[update] 树选择增加loading

src/components/selection/TreeDataSelectModal.vue

@@ -10,40 +10,44 @@
     @cancel="handleCancel">
 
     <div class="modal-content">
-      <a-input-search style="margin-bottom: 1px" :placeholder="$t('pleaseEnter') + $t('treeSelection.primaryNodeName')" @search="onSearch" />
-      <a-tree
-        ref="tree"
-        :checkable="checkable"
-        :checkStrictly="true"
-        :replaceFields="replaceFields"
-        :class="treeScreenClass"
-        :treeData="treeData"
-        :autoExpandParent="autoExpandParent"
-        @check="onCheck"
-        @select="onSelect"
-        @expand="onExpand"
-        :loadData="loadData"
-        :expandedKeys="expandedKeys"
-        :checkedKeys="checkedKeys"
-        :selectedKeys.sync="selectedKeys">
+      <a-spin :spinning="topLoading">
+        <a-input-search style="margin-bottom: 1px" :placeholder="$t('pleaseEnter') + $t('treeSelection.primaryNodeName')" @search="onSearch" />
+        <a-tree
+          ref="tree"
+          :checkable="checkable"
+          :checkStrictly="true"
+          :replaceFields="replaceFields"
+          :class="treeScreenClass"
+          :treeData="treeData"
+          :autoExpandParent="autoExpandParent"
+          @check="onCheck"
+          @select="onSelect"
+          @expand="onExpand"
+          :loadData="loadData"
+          :expandedKeys="expandedKeys"
+          :checkedKeys="checkedKeys"
+          :selectedKeys.sync="selectedKeys">
 
-        <template slot="title" slot-scope="{dataRef}">
+          <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>{{ dataRef[replaceFields.title] }}</span>
-        </template>
-      </a-tree>
+            <span v-else>{{ dataRef[replaceFields.title] }}</span>
+          </template>
+        </a-tree>
+      </a-spin>
     </div>
 
     <p class="modal-content-title">{{ $t('treeSelection.selectedData') }}</p>
-    <div v-if="dataSourceRight && dataSourceRight.length > 0" class="name-content">
-      <div v-for="(item, index) in dataSourceRight" :key="item[replaceFields.key]" class="name-div">
-        {{ item[replaceFields.title] }}
-        <a-icon type="close" @click="handleDelete(item, index)" />
+    <a-spin :spinning="bottomLoading">
+      <div v-if="dataSourceRight && dataSourceRight.length > 0" class="name-content">
+        <div v-for="(item, index) in dataSourceRight" :key="item[replaceFields.key]" class="name-div">
+          {{ item[replaceFields.title] }}
+          <a-icon type="close" @click="handleDelete(item, index)" />
+        </div>
       </div>
-    </div>
-    <a-empty v-else />
+      <a-empty v-else />
+    </a-spin>
 
     <!--底部父子关联操作和确认取消按钮-->
     <template slot="footer" v-if="treeOpera && checkable">
@@ -162,6 +166,8 @@ export default {
       width: 800,
       visible: false,
       confirmLoading: false,
+      topLoading: false,
+      bottomLoading: false,
       parentChildRelate: true, // 父子节点是否关联
       autoExpandParent: false, // 是否自动展开父节点
       treeData: [],
@@ -324,7 +330,7 @@ export default {
       if (node.dataRef.children) {
         return
       }
-      this.confirmLoading = true
+      this.topLoading = true
       const params = {}
       params.dictId = this.dictId
       // 查询条件的名称
@@ -338,7 +344,7 @@ export default {
           node.dataRef[this.replaceFields.children] = res.result.record || res.result
         }
       }).finally(() => {
-        this.confirmLoading = false
+        this.topLoading = false
       })
     },
     handleCancel () {
@@ -378,7 +384,7 @@ export default {
       }
     },
     getTreeData () {
-      this.confirmLoading = true
+      this.topLoading = true
       const params = {}
       params.dictId = this.dictId
       getAction(this.optionsHref, params).then(res => {
@@ -386,7 +392,7 @@ export default {
           this.treeData = res.result.records || res.result
         }
       }).finally(() => {
-        this.confirmLoading = false
+        this.topLoading = false
       })
     },
     // 已选数据列表的删除
@@ -411,6 +417,7 @@ export default {
       this.close()
     },
     getSelectedList (codes) {
+      this.bottomLoading = true
       const params = {
         selectNodeCodes: codes,
         dictId: this.dictId
@@ -429,6 +436,8 @@ export default {
         if (res.success) {
           this.dataSourceRight = JSON.parse(JSON.stringify(res.result))
         }
+      }).finally(() => {
+        this.bottomLoading = false
       })
     }
   }