下拉树组件-清空选中值

src/components/select-org-tree/index.vue

@@ -4,7 +4,7 @@
 @Date: 2021-08-02 13:49
 -->
 <template>
-    <!-- :loading="loading" -->
+  <!-- :loading="loading" -->
 
   <el-select
     ref="reference"
@@ -13,6 +13,7 @@
     v-bind="$attrs"
     v-on="$listeners"
     @filter-org="handleFilterOrg"
+    @clearSelect="handleClearSelect"
     :placeholder="placeholder"
     :filterable="true"
     :options="treeData"
@@ -65,11 +66,15 @@ export default {
     },
     apiName: {
       type: String,
-      default: 'getTree'
+      default: 'getOrgTree'
     },
     placeholder: {
       type: String,
       default: '请选择所属单位'
+    },
+    // 目前所知道的值有：APP, 0
+    type: {
+      type: String
     }
   },
   data() {
@@ -117,7 +122,8 @@ export default {
   },
   methods: {
     handleNodeClick(data, node, tree) {
-      // debugger
+      this.$emit('orgTreeValue', data[this.nodeKey]);
+      this.$emit('orgTreeNode', data);
     },
     loadNode(node, resolve) {
       // debugger
@@ -126,7 +132,7 @@ export default {
     // 组织机构
     getTree(id, resolve) {
       const { params, apiName } = this;
-      commonApi[apiName]({ id, ...params })
+      commonApi[apiName]({ id, type: this.type })
         .then((res) => {
           // 就为了存根节点, 用于刷新
           return resolve(res || []);
@@ -156,12 +162,18 @@ export default {
         }
       }
     },
+    handleClearSelect() {
+      this.treeValue = '';
+      this.$refs.tree.setCurrentKey(null);
+      this.$refs.tree.setRadioKeys([]);
+    },
     handleScrollToBottom() {
       if (!this.lazy && !this.isLast) {
         this.searchForm.pageNum++;
         this.getSearchTree();
       }
     },
+    // 查询
     getSearchTree() {
       this.loading = true;
       commonApi.treeMatch(this.searchForm).then((res) => {
@@ -180,8 +192,7 @@ export default {
         this.isLast = this.treeData.length == totalElements;
         this.loading = false;
       });
-    },
-    handleFilter(val, data) {}
+    }
   }
 };
 </script>

src/components/select-org-tree/select.vue

@@ -122,7 +122,7 @@
     </el-input>
     <transition name="el-zoom-in-top" @before-enter="handleMenuEnter" @after-leave="doDestroy">
       <el-select-menu ref="popper" :append-to-body="popperAppendToBody" v-show="visible && emptyText !== false">
-          <!-- <template v-if="emptyText && (!allowCreate || loading || (allowCreate && options.length === 0 ))">
+        <!-- <template v-if="emptyText && (!allowCreate || loading || (allowCreate && options.length === 0 ))">
           <slot name="empty" v-if="$slots.empty"></slot>
           <p class="el-select-dropdown__empty" v-else>
             {{ emptyText }}
@@ -328,6 +328,16 @@ export default {
         this.checkDefaultFirstOption();
       }
       this.$emit('filter-org', val);
+    },
+    handleClearClick(event) {
+      this.$emit('clearSelect');
+      this.deleteSelected(event);
+    },
+    // 解决因树组件展开收起后引发的样式定位问题
+    updatePopper() {
+      setTimeout(() => {
+        this.broadcast('ElSelectDropdown', 'updatePopper');
+      }, 300);
     }
   },
 

src/pages/list-manage/white-list-manage/component/user-list.vue

@@ -17,11 +17,11 @@
       <el-form-item label="身份证号码">
         <el-input v-model="form.idcard.value" placeholder="请输入身份证号码" clearable></el-input>
       </el-form-item>
-      <el-form-item label="单位名称">
+      <!-- <el-form-item label="单位名称">
         <select-tree ref="selectTree" api-name="getOrgTree" nodeKey="id" @submitTreeValue="getTreeValue"></select-tree>
-      </el-form-item>
-        <el-form-item label="所属单位">
-          <select-org-tree api-name="getOrgTree" nodeKey="id"></select-org-tree>
+      </el-form-item> -->
+        <el-form-item label="单位名称">
+          <select-org-tree api-name="getOrgTree" nodeKey="id" @orgTreeValue="getTreeValue" type="APP"></select-org-tree>
         </el-form-item>
       <el-form-item>
         <dg-button type="primary" @click="handleSearch" icon="el-icon-search">查询</dg-button>

src/pages/permission-selfhelp-manage/component/app-func-form.vue

@@ -76,7 +76,7 @@ export default {
         const element = funcAttr[i].join('/');
         attr.push(element);
       }
-      return attr.join('，');
+      return attr.join('、');
     },
     handleCancel() {
       this.$emit('close');

src/pages/permission-selfhelp-manage/component/basic-form.vue

@@ -368,10 +368,10 @@ export default {
     flowContentStr() {
       let str = '';
       if (this.sizeForm.flowContent) {
-        const { visitorName, visitResourceName, cancelResourceName } = JSON.parse(this.sizeForm.flowContent);
+        const { visitorName, visitResourceName, removeVisitResourceNames } = JSON.parse(this.sizeForm.flowContent);
         const { applyText, cancelText } = this.applyContentOperateObj[this.sizeForm.businessCode] || {};
         const applyContent = visitResourceName ? `${applyText}${visitResourceName}。\n` : '';
-        const cancelContent = cancelResourceName ? `${cancelText}${cancelResourceName}。` : '';
+        const cancelContent = removeVisitResourceNames ? `${cancelText}${removeVisitResourceNames}。` : '';
         str = `${visitorName}${applyContent}${cancelContent}`;
       }
       return str;
@@ -489,12 +489,12 @@ export default {
         content: this.applyContentCom,
         area: ['1200px', '700px'],
         on: {
-          success(visitResourceName, cancelResourceName, selectKeys, resourceInfos = []) {
+          success(visitResourceName, removeVisitResourceNames, selectKeys, resourceInfos = []) {
             vm.sizeForm.resourceInfos = resourceInfos;
             vm.applySelectKeys = selectKeys;
             const visitorName =
               vm.sizeForm.applyType !== 'SERVICE_AUTH' ? vm.sizeForm.applicantName : vm.sizeForm.applyId;
-            const resourceObj = { visitorName, visitResourceName, cancelResourceName };
+            const resourceObj = { visitorName, visitResourceName, removeVisitResourceNames };
             vm.sizeForm.flowContent = JSON.stringify(resourceObj);
             vm.needFilter = false;
             layer.close(layer.dialogIndex);