[update] 树形弹框

src/components/selection/TreeDataSelection.vue

@@ -1,18 +1,19 @@
 <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 @click="openModal" :placeholder="$t('pleaseSelect')" v-model="nameStr" :title="nameStr" readOnly>
+      <a-icon v-if="nameStr" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>
     </a-input>
 
     <tree-data-select-modal
       ref="selectModal"
       :checkable="checkable"
       :value="value"
-      :storeField="storeField"
-      :textField="textField"
       :dict-id="dictId"
+      v-bind="$attrs"
       :options-href="optionsHref"
-      @ok="handleOK"/>
+      @change="handleChange"
+      @nameChange="nameChange"
+      @listChange="listChange"/>
   </div>
 </template>
 
@@ -38,35 +39,13 @@ export default {
       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,
@@ -83,66 +62,40 @@ export default {
       default: ''
     }
   },
+  watch: {
+    nameStr: {
+      immediate: true,
+      handler (val) {
+        console.log('----------nameStr', val)
+      }
+    }
+  },
   data () {
     return {
       visible: false,
-      confirmLoading: false,
-      storeVals: '', // [key values]
-      textVals: '' // [label values]
-    }
-  },
-  mounted () {
-    this.storeVals = this.value
-  },
-  watch: {
-    value (val) {
-      this.storeVals = val
+      confirmLoading: false
     }
   },
   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()
+    handleChange (value) {
+      this.$emit('change', value, this.fieldName)
+    },
+    nameChange (value) {
+      this.$emit('nameChange', value, this.fieldName)
+    },
+    listChange (value) {
+      this.$emit('listChange', value, this.fieldName)
     },
     handleEmpty () {
       if (this.disabled) {
         return
       }
-      this.handleOK('')
+      this.handleChange('')
+      this.nameChange('')
+      this.listChange([])
     }
   },
   model: {