ShibeiWorkPlatform_Frontend/src/views/components/CTreeDialogSingle.vue

<!-- 输入框+选择，点击选择弹出单选树 -->
<template>
  <div>
    <!-- <el-tooltip :content="inputValue"
                placement="top"> -->

    <el-input readonly
              style="width:100%"
              v-model="inputValue"
              :placeholder="placeholder">

      <el-button slot="append"
                 :type="type"
                 class="undisabled"
                 :disabled="selBtnDisabled"
                 @click="handleSelect">选择</el-button>
    </el-input>
    <!-- </el-tooltip> -->

    <el-dialog :title="title"
               lock-scroll
               :visible="dialogVisible"
               :modal="modal"
               :width="'28%'"
               :before-close="handleCancel"
               :append-to-body="isNest"
               :close-on-click-modal="false">
      <div :style="{height:formHeight+'px',overflowY:'auto',overflowX:'hidden'}">
        <c-tree ref="dialog_tree"
                :url="url"
                :params="params"
                :isDialogTree="true"
                :showCheckbox="showCheckbox"
                :defaultExpandAll="defaultExpandAll"
                :expandKeys="expandKeys"
                :defaultNodeKey="defaultNodeKey"
                :defaultOnlyLeaf="defaultOnlyLeaf"
                :defaultExpandOnClickNode="defaultExpandOnClickNode"
                :nodeType="nodeType"
                :autoLoad="autoLoad"
                @nodeClick="handleNodeClick"></c-tree>

      </div>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="handleOk">确定</el-button>
        <el-button @click="handleClear">清空</el-button>
        <!--   <el-button @click="handleCancel">取消</el-button> -->
      </span>
    </el-dialog>

  </div>
</template>

<script>
import CDialog from './CDialog'
import CTree from './CTree'
import { mapGetters } from 'vuex'
export default {
  components: { CDialog, CTree },
  data () {
    return {
      testContent: '测试数据', //  this.$refs.lineInfo_form.reaPpShow,
      dialogVisible: false, // 是否显示下拉框
      selData: Object, // 选择的节点
      selDataArray: [], // 多选树选择的节点数组
      inputValue: this.inputModel,
      expandKeys: []
    }
  },
  props: {
    formKey: { // 用于接收form的key
      type: String,
      default: ''
    },
    formIndex: { // 用于接收form的index
      type: Number,
      default: 0
    },
    placeholder: { // input
      type: String,
      default: '请选择'
    },
    inputModel: { // input
      type: String,
      default: ''
    },

    type: { // button
      type: String,
      default: 'primary'
    },

    title: { // dialog
      type: String,
      default: '选择'
    },
    isNest: {
      type: Boolean,
      default: true
    },
    selBtnDisabled: {
      type: Boolean,
      default: false
    },
    modal: {
      type: Boolean,
      default: true
    },
    url: { // tree
      type: String,
      required: true
    },
    params: { // tree
      type: Object,
      default () {
        return {}
      }
    },
    showCheckbox: { // tree
      type: Boolean,
      default: false
    },
    defaultCheckedKeys: { // tree
      // 默认勾选节点
      type: Array,
      default () {
        return []
      }
    },
    //是否自动加载
    autoLoad: {
      type: Boolean,
      default: true
    },

    // 默认节点定为0 ，即选择树不回显
    defaultNodeKey: { // tree
      //  默认选中节点(节点id)
      type: Number
    },
    defaultExpandAll: { // tree
      //  默认选中节点(节点id)
      type: Boolean,
      default: true
    },
    defaultOnlyLeaf: { // tree
      // 点击所有节点都能选中，为true时表示：只能选择叶节点
      type: Boolean,
      default: false
    },
    // 能够选择的节点类型，默认为空
    nodeType: {
      type: String,
      default: ''
    },
    defaultExpandOnClickNode: {
      // 默认点击节点时展开节点
      type: Boolean,
      default: false
    },
    // 判断是否自动刷新树
    freshen: {
      type: Boolean,
      default: false
    },

  },

  methods: {
    handleSelect () {

      this.dialogVisible = true
      this.loadData()

    },
    setInputValue (inputValue) {
      this.inputValue = inputValue
    },
    loadData (callback, currentKey, expandKeys) {

      this.$nextTick(() => {

        if (expandKeys) {
          this.expandKeys = expandKeys
        }

        this.$refs['dialog_tree'].loadData(callback, currentKey, [], this.expandKeys)
      })
    },
    setExpandKeys (expandKeys) {

      this.expandKeys = expandKeys
    },
    handleClear () { // 清空
      this.selData = ''
      this.inputValue = ''
      this.$emit('handleClear', '', this.formKey, this.formIndex)
      this.dialogVisible = false
    },

    handleCancel () {
      this.dialogVisible = false
    },
    handleOk () {
    },

    // 清空输入框
    clearInput () {
      this.selData = ''
      this.inputValue = ''
    },

    handleNodeClick (data, node) {
      if (data.id !== 0) {
        if (this.nodeType !== '') {
          if (data.role === this.nodeType) { // 定义了选择的节点类型
            this.selData = data
            this.inputValue = this.selData.label
            this.$emit('handleOk', this.selData, this.formKey, this.formIndex)
            this.dialogVisible = false
          }
        } else {
          this.selData = data
          this.inputValue = this.selData.label
          this.$emit('handleOk', this.selData, this.formKey, this.formIndex)
          this.dialogVisible = false
        }
      }
    }
  },
  mounted () {

  },
  computed: {
    formHeight () {
      return this.clientHeight * 0.56
    },
    ...mapGetters(['clientHeight'])
  }
}
</script>

<style>
.mLeft {
  margin-left: 6px;
}
.blue {
  color: #003585;
}
</style>
<style scoped>
.tree {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>