[update] 修改树形弹框改成树

2024-08-02 15:16:29 +08:00
parent 1f7fce5ddd
commit f6e647a3ae
3 changed files with 491 additions and 20 deletions
@@ -0,0 +1,151 @@
+<template>
+  <div class="components-input-demo-presuffix">
+    <a-input @click="openModal" :placeholder="$t('pleaseSelect')" v-model="nameStr" readOnly :disabled="disabled">
+      <a-icon v-if="storeVals" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>
+    </a-input>
+
+    <tree-data-select-modal
+      ref="selectModal"
+      :checkable="checkable"
+      :value="value"
+      :storeField="storeField"
+      :textField="textField"
+      :options-href="optionsHref"
+      @ok="handleOK"/>
+  </div>
+</template>
+
+<script>
+import TreeDataSelectModal from './TreeDataSelectModal'
+import { underLinetoHump } from '@/components/_util/StringUtil'
+
+export default {
+  name: 'TreeDataSelection',
+  components: { TreeDataSelectModal },
+  props: {
+    checkable: { // 是否多选
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    value: {
+      type: String,
+      required: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // 自定义返回字段，默认返回 id
+    customReturnField: {
+      type: String,
+      default: ''
+    },
+    // 获取数据的接口
+    optionsHref: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    // 是否返回选中的对象
+    backObj: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    // 存储字段 [key field]
+    storeField: {
+      type: String,
+      default: 'id',
+      required: false
+    },
+    // 显示字段 [label field]
+    textField: {
+      type: String,
+      default: 'name',
+      required: false
+    },
+    nameStr: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    fieldName: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      visible: false,
+      confirmLoading: false,
+      storeVals: '', // [key values]
+      textVals: '' // [label values]
+    }
+  },
+  mounted () {
+    this.storeVals = this.value
+  },
+  watch: {
+    value (val) {
+      this.storeVals = val
+    }
+  },
+  methods: {
+    // 返回选中的部门信息
+    backObjInfo () {
+      if (this.backObj === true) {
+        if (this.storeVals && this.storeVals.length > 0) {
+          const arr1 = this.storeVals.split(',')
+          const arr2 = this.textVals.split(',')
+          const info = []
+          for (let i = 0; i < arr1.length; i++) {
+            info.push({
+              value: arr1[i],
+              text: arr2[i]
+            })
+          }
+          this.$emit('back', info)
+        }
+      }
+    },
+    openModal () {
+      this.$refs.selectModal.show()
+    },
+    handleOK (rows) {
+      if (!rows && rows.length <= 0) {
+        this.textVals = ''
+        this.storeVals = ''
+      } else {
+        const arr1 = []
+        const arr2 = []
+        for (const dep of rows) {
+          arr1.push(dep[this.storeField])
+          arr2.push(dep[this.textField])
+        }
+        this.storeVals = arr1.join(',')
+        this.textVals = arr2.join(',')
+      }
+      this.$emit('change', this.storeVals)
+      this.$emit('nameChange', this.textVals, this.fieldName)
+      this.backObjInfo()
+    },
+    handleEmpty () {
+      if (this.disabled) {
+        return
+      }
+      this.handleOK('')
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  }
+}
+</script>
+
+<style scoped>
+
+</style>