在职转接标签多级筛选

src/api/qw/tag.js

@@ -9,6 +9,15 @@ export function listTag(query) {
   })
 }
 
+// 查询标签组+标签的层级结构列表
+export function tagGroupList(query) {
+  return request({
+    url: '/qw/tag/tagGroupList',
+    method: 'get',
+    params: query
+  })
+}
+
 // 查询企微客户标签详细
 export function getTag(id) {
   return request({

src/views/qw/externalContactTransfer/index.vue

@@ -79,13 +79,18 @@
         </el-select>
       </el-form-item>
       <el-form-item label="标签" prop="tagIds">
-        <el-select v-model="selectTags" remote multiple placeholder="请选择" filterable  style="width: 100%;">
-          <el-option
-            v-for="dict in tagList"
-            :label="dict.name"
-            :value="dict.tagId">
-          </el-option>
-        </el-select>
+        <el-cascader
+          v-model="selectTags"
+          :options="tagGroupOptions"
+          :props="cascaderProps"
+          :show-all-levels="false"
+          collapse-tags
+          clearable
+          filterable
+          @focus="handleCascaderFocus"
+          style="width: 100%;"
+          placeholder="请选择标签">
+        </el-cascader>
       </el-form-item>
       <el-form-item label="备注" prop="remark">
         <el-input
@@ -317,7 +322,7 @@
 
 <script>
 import { transfer,listExternalContact, getExternalContact, delExternalContact, addExternalContact, updateExternalContact, exportExternalContact } from "@/api/qw/externalContact";
-import { listTag, getTag, delTag, addTag, updateTag, exportTag } from "@/api/qw/tag";
+import { listTag, tagGroupList, getTag, delTag, addTag, updateTag, exportTag } from "@/api/qw/tag";
 import { qwUserList } from "@/api/qw/user";
 import qwUserSelectOne from '@/views/qw/user/qwUserSelectOne.vue'
 import { getMyQwUserList,getMyQwCompanyList } from "@/api/qw/user";
@@ -387,6 +392,14 @@ export default {
         needClearTag: 0
       },
       tagList:[],
+      tagGroupOptions: [], // 标签组级联数据
+      cascaderProps: {
+        multiple: true,
+        value: 'tagId',
+        label: 'name',
+        children: 'tag',
+        emitPath: false // 只返回选中的tagId，不返回完整路径
+      },
       transferStatusOptions:[],
       statusOptions:[],
       // 每个用户显示的标签数量，key为用户ID，value为显示的标签数量
@@ -402,6 +415,7 @@ export default {
             this.myQwCompanyList = response.data;
             if(this.myQwCompanyList!=null){
               this.queryParams.corpId=this.myQwCompanyList[0].dictValue;
+              this.loadTagGroupList();
               listTag({corpId:this.queryParams.corpId}).then(response => {
                 this.tagList = response.rows;
               });
@@ -437,6 +451,7 @@ export default {
   },
   methods: {
     updateCorpId(){
+      this.loadTagGroupList();
       listTag({corpId:this.queryParams.corpId}).then(response => {
         this.tagList = response.rows;
       });
@@ -445,6 +460,22 @@ export default {
       });
       this.getList();
      },
+    /** 加载标签组列表 */
+    loadTagGroupList() {
+      tagGroupList({
+        corpId: this.queryParams.corpId,
+        pageNum: 1,
+        pageSize: 9999
+      }).then(response => {
+        this.tagGroupOptions = response.rows || [];
+      });
+    },
+    /** 级联选择器获得焦点时加载数据 */
+    handleCascaderFocus() {
+      if (!this.tagGroupOptions || this.tagGroupOptions.length === 0) {
+        this.loadTagGroupList();
+      }
+    },
     /** 查询企业微信客户列表 */
     getList() {
       this.loading = true;