三级联动 地区选择 兼容父子不关联

dsk-operate-ui/src/assets/styles/el-search-form-public.scss

@@ -48,6 +48,7 @@
 
       .el-input__icon {
         line-height: 32px;
+        color: #C0C4CC;
       }
     }
 
@@ -87,5 +88,11 @@
         text-align: left;
       }
     }
+
+    // 三级联动
+    .el-cascader {
+      line-height: 32px;
+    }
+
   }
 }

dsk-operate-ui/src/utils/index.js

@@ -611,7 +611,7 @@ export function queryConditionFiltering(params) {
           result[key] = queryConditionFiltering(_temp[key]);
           continue;
         }
-        // 过滤无效值 0为有效数据
+        // 过滤无效值 0为有效数据 object在此处作为无效值
         if (typeof _temp[key] != "object" && (_temp[key] || _temp[key] == "0")) {
           result[key] = _temp[key];
           continue;
@@ -624,6 +624,30 @@ export function queryConditionFiltering(params) {
   }
 }
 
+/**
+ * 三级联动选择 过滤省市区 兼容父子互不关联情况
+ * @param {Array<object>} selectList 
+ * @returns 
+ */
+export function getTreeSelectAreaList(selectList) {
+  try {
+    if (Object.prototype.toString.call(selectList) != "[object Array]") throw new Error("传入查询条件不是一个数组");
+    if (!selectList?.length) return [];
+    const _temp = selectList;
+    const selectMap = new Map();
+    const len = _temp.length;
+
+    for (let index = 0; index < len; index++) {
+      const treeItem = _temp[index];
+      console.log(treeItem);
+      // 没有父级 作为最顶级元素
+      if (!treeItem.parent) selectMap.set(treeItem.value, {});
+    }
+  } catch (error) {
+    console.log(error);
+  }
+}
+
 // 甲方详情左侧菜单映射
 export const detailSideBar = new Map([
   // 企业速览

dsk-operate-ui/src/views/consultingOrgManagement/components/EnterpriseList/detail/detailsOfCooperation.vue

@@ -6,7 +6,8 @@
         <el-form :model="form" ref="form" :rules="rules" label-width="84px" class="el-search-form-public">
           <div class="each-line">
             <el-form-item label="项目地区">
-              <el-input v-model="form.provinceName" placeholder="请输入咨询机构名称" clearable></el-input>
+              <el-cascader ref="areaTree" v-model="form.provinceName" @change="handleChange" :options="areaDataList" placeholder="请选择" clearable
+                :props="cascaderOptions"></el-cascader>
             </el-form-item>
             <el-form-item label="项目承接类型">
               <el-select v-model="form.isinvestproject" placeholder="请选择" clearable>
@@ -68,7 +69,7 @@
 import TableListCom from "@/components/TableListCom";
 import Skeleton from "@/components/Skeleton";
 import { getConsultingOrgEenterpriseDetailWithSearchApi } from "@/api/consultingOrgManagement";
-import { queryConditionFiltering } from "@/utils";
+import { queryConditionFiltering, getTreeSelectAreaList } from "@/utils";
 import { v4 } from 'uuid';
 export default {
   name: "detailsOfCooperation",
@@ -136,7 +137,14 @@ export default {
           value: "2",
           label: "测试2"
         }
-      ]
+      ],
+      // 三级联动配置项
+      cascaderOptions: {
+        label: "value",
+        value: "value",
+        multiple: true,
+        checkStrictly: true
+      }
     };
   },
   //可访问data属性
@@ -148,7 +156,9 @@ export default {
   },
   //计算集
   computed: {
-
+    areaDataList() {
+      return JSON.parse(JSON.stringify(this.$store.state.user.areaArrayList));
+    }
   },
   //方法集
   methods: {
@@ -246,6 +256,11 @@ export default {
         const flag = target.scrollLeft > 0 ? true : false;
         this.formColum.forEach(item => this.fixedPropsKey.includes(item.prop) ? item.fixed = flag : null);
       }
+    },
+    handleChange(params) {
+      const tree = this.$refs?.areaTree?.getCheckedNodes();
+      console.log(tree, "tree");
+      console.log(getTreeSelectAreaList(tree), "filter");
     }
   },
 }