[update] 树形弹框

src/components/selection/TreeDataSelectModal.vue

@@ -23,15 +23,15 @@
         @check="onCheck"
         @select="onSelect"
         @expand="onExpand"
-        @loadData="loadData"
+        :loadData="loadData"
         :expandedKeys="expandedKeys"
         :checkedKeys="checkedKeys">
 
-        <template slot="title" slot-scope="{name}">
-          <span v-if="searchValue && name.indexOf(searchValue) > -1">
-            <span style="color: #f50">{{ name }}</span>
+        <template slot="title" slot-scope="{dataRef}">
+          <span v-if="searchValue && dataRef[replaceFields.title].indexOf(searchValue) > -1">
+            <span style="color: #f50">{{ dataRef[replaceFields.title] }}</span>
           </span>
-          <span v-else>{{name}}</span>
+          <span v-else>{{ dataRef[replaceFields.title] }}</span>
         </template>
       </a-tree>
     </div>
@@ -81,12 +81,6 @@ export default {
       required: false,
       default: false
     },
-    // 查询传的字段名
-    searchFieldName: {
-      type: String,
-      required: false,
-      default: 'name'
-    },
     // 存储字段 [key field]
     storeField: {
       type: String,
@@ -103,12 +97,6 @@ export default {
       type: String,
       required: false,
       default: ''
-    },
-    // 懒加载接口,默认是涉及系统/部件的懒加载接口
-    lazyLoadHref: {
-      type: String,
-      required: false,
-      default: '/laws/dictTree/getChild'
     }
   },
   computed: {
@@ -130,13 +118,24 @@ export default {
       if (val) {
         this.checkedKeys = val.split(',')
       }
-    }
-  },
-  mounted () {
-    if (this.optionsHref === '/laws/standard/partName/') {
-      this.replaceFields = { children: 'childPartNameList', title: 'name', key: 'id' }
-    } else { // 标签库
-      this.replaceFields = { children: 'childrenList', title: 'itemText', key: 'id' }
+    },
+    optionsHref: {
+      immediate: true,
+      handler (val) {
+        console.log('-------------optionsHref', val)
+        if (val === '/laws/standard/partName/') {
+          // 是涉及系统/部件
+          this.replaceFields = { children: 'childPartNameList', title: 'name', key: 'id' }
+          this.lazyLoadHref = ''
+          this.searchFieldName = 'name'
+          this.lazyLoadPidFieldName = ''
+        } else { // 标签库
+          this.replaceFields = { children: 'childrenList', title: 'itemText', key: 'id' }
+          this.lazyLoadHref = '/laws/dictTree/getChild'
+          this.searchFieldName = 'nodeName'
+          this.lazyLoadPidFieldName = 'dictItemId'
+        }
+      }
     }
   },
   data () {
@@ -152,7 +151,11 @@ export default {
       checkedRows: [],
       loadedKeys: [], // 已经加载的节点
       searchValue: '', // 查询框内容
-      replaceFields: {}
+      replaceFields: {},
+      dataSourceRight: [],
+      lazyLoadHref: '', // 懒加载接口
+      searchFieldName: '', // 查询传的字段名
+      lazyLoadPidFieldName: '' // 懒加载传父级的字段名
     }
   },
   methods: {
@@ -203,18 +206,22 @@ export default {
     },
     // 异步加载
     loadData (node) {
+      console.log('-------node', node)
       if (node.dataRef.children) {
         return
       }
       this.confirmLoading = true
       const params = {}
+      params.dictId = this.dictId
       // 查询条件的名称
-      params[this.searchFieldName] = this.searchValue
+      if (this.searchValue) {
+        params[this.searchFieldName] = this.searchValue
+      }
       // 父节点id
-      params.pid = node.dataRef.id
-      getAction(this.optionsHref, params).then(res => {
+      params.dictItemId = node.dataRef.id
+      getAction(this.lazyLoadHref, params).then(res => {
         if (res.success) {
-          node.childPartNameList = res.result.record
+          node[this.replaceFields.children] = res.result.record
           this.loadedKeys.push(node.id)
         }
       }).finally(() => {
@@ -228,6 +235,7 @@ export default {
       this.visible = false
       this.checkedKeys = []
       this.expandedKeys = []
+      this.dataSourceRight = []
       this.treeData = []
       this.searchValue = ''
     },
@@ -334,4 +342,10 @@ export default {
   overflow-y: scroll;
 }
 
+.modal-content-title {
+  color: #1D2129;
+  font-weight: 500;
+  margin-right: 12px;
+  margin-bottom: 0;
+}
 </style>