搜索中心筛选全部加上

src/api/system/dept.js

@@ -1,52 +1,59 @@
-import request from '@/utils/request'
+import request from "@/utils/request";
 
 // 查询部门列表
 export function listDept(query) {
   return request({
-    url: '/system/dept/list',
-    method: 'get',
-    params: query
-  })
+    url: "/system/dept/list",
+    method: "get",
+    params: query,
+  });
 }
 
 // 查询部门列表（排除节点）
 export function listDeptExcludeChild(deptId) {
   return request({
-    url: '/system/dept/list/exclude/' + deptId,
-    method: 'get'
-  })
+    url: "/system/dept/list/exclude/" + deptId,
+    method: "get",
+  });
 }
 
 // 查询部门详细
 export function getDept(deptId) {
   return request({
-    url: '/system/dept/' + deptId,
-    method: 'get'
-  })
+    url: "/system/dept/" + deptId,
+    method: "get",
+  });
+}
+// 查询部门下拉树结构
+export function treeselect() {
+  return request({
+    url: "/system/dept/treeselect",
+    method: "get",
+  });
 }
 
 // 新增部门
 export function addDept(data) {
   return request({
-    url: '/system/dept',
-    method: 'post',
-    data: data
-  })
+    url: "/system/dept",
+    method: "post",
+    data: data,
+  });
 }
 
 // 修改部门
 export function updateDept(data) {
   return request({
-    url: '/system/dept',
-    method: 'put',
-    data: data
-  })
+    url: "/system/dept",
+    method: "put",
+    data: data,
+  });
 }
 
 // 删除部门
 export function delDept(deptId) {
   return request({
-    url: '/system/dept/' + deptId,
-    method: 'delete'
-  })
-}
+    url: "/system/dept/" + deptId,
+    method: "delete",
+  });
+}

src/components/NavigationBar/peopleCentre.vue

@@ -1,83 +1,108 @@
 <template>
   <div class="search-container">
     <div class="option-rows">
-      <el-select v-model="value" placeholder="选择社区">
+      <el-select
+        @change="changeSelect($event, 'xiaoquList')"
+        v-model="queryParams.shequId"
+        placeholder="选择社区"
+      >
         <el-option
-          v-for="item in community"
-          :key="item.value"
+          v-for="item in deptList"
+          :key="item.id"
           :label="item.label"
-          :value="item.value"
+          :value="item.id"
         >
         </el-option>
       </el-select>
-      <el-select v-model="value" placeholder="选择小区">
+      <el-select
+        v-model="queryParams.xiaoquId"
+        placeholder="选择小区"
+        @change="changeSelect($event, 'netList')"
+      >
         <el-option
-          v-for="item in xiaoqu"
-          :key="item.value"
+          v-for="item in xiaoquList"
+          :key="item.id"
           :label="item.label"
-          :value="item.value"
+          :value="item.id"
         >
         </el-option>
       </el-select>
     </div>
     <div class="option-rows">
-      <el-select v-model="value" placeholder="选择网格">
+      <el-select
+        v-model="queryParams.parentid"
+        placeholder="选择网格"
+        @change="changeSelect($event, 'yuanList')"
+      >
         <el-option
-          v-for="item in community"
-          :key="item.value"
+          v-for="item in netList"
+          :key="item.id"
           :label="item.label"
-          :value="item.value"
+          :value="item.id"
         >
         </el-option>
       </el-select>
-      <el-select v-model="value" placeholder="选择苑">
+      <el-select
+        v-model="queryParams.yuanid"
+        placeholder="选择苑"
+        @change="changeSelect($event, 'buildingList')"
+      >
         <el-option
-          v-for="item in xiaoqu"
-          :key="item.value"
+          v-for="item in yuanList"
+          :key="item.id"
           :label="item.label"
-          :value="item.value"
+          :value="item.id"
         >
         </el-option>
       </el-select>
-      <el-select v-model="value" placeholder="选择楼栋">
+      <el-select
+        v-model="queryParams.buildingId"
+        placeholder="选择楼栋"
+        @change="changeSelect($event, 'houseList')"
+      >
         <el-option
-          v-for="item in xiaoqu"
-          :key="item.value"
+          v-for="item in buildingList"
+          :key="item.id"
           :label="item.label"
-          :value="item.value"
+          :value="item.id"
         >
         </el-option>
       </el-select>
-      <el-select v-model="value" placeholder="选择住户">
+      <el-select v-model="queryParams.houseid" placeholder="选择住户">
         <el-option
-          v-for="item in xiaoqu"
-          :key="item.value"
+          v-for="item in houseList"
+          :key="item.id"
           :label="item.label"
-          :value="item.value"
+          :value="item.id"
         >
         </el-option>
       </el-select>
     </div>
     <div class="option-rows">
-      <el-select v-model="value" placeholder="选择分色">
+      <el-select
+        v-model="colorList"
+        placeholder="选择分色"
+        multiple
+        collapse-tags
+        clearable
+      >
         <el-option
-          v-for="item in xiaoqu"
-          :key="item.value"
-          :label="item.label"
-          :value="item.value"
+          v-for="dict in dict.type.b_color_type"
+          :key="dict.value"
+          :label="dict.label"
+          :value="dict.value"
         >
         </el-option>
       </el-select>
-      <el-radio-group v-model="radio">
-        <el-radio :label="1">户籍</el-radio>
-        <el-radio :label="2">流动</el-radio>
-      </el-radio-group>
 
-      <el-checkbox-group v-model="checkList">
-        <el-checkbox label="党员"></el-checkbox>
-        <el-checkbox label="困难户"></el-checkbox>
-        <el-checkbox label="信访户"></el-checkbox>
-        <el-checkbox label="退役军人"></el-checkbox>
+      <el-radio v-model="queryParams.type" :label="1">户籍</el-radio>
+      <el-radio v-model="queryParams.type" :label="2">流动</el-radio>
+
+      <el-checkbox-group v-model="isCheck">
+        <el-checkbox label="中共党员"> </el-checkbox>
+        <el-checkbox label="帮扶对象"> </el-checkbox>
+        <el-checkbox label="重点人群"> </el-checkbox>
+        <el-checkbox label="退役军人"> </el-checkbox>
       </el-checkbox-group>
     </div>
     <div class="three-option">
@@ -95,7 +120,6 @@
       <div class="option-input">
         <el-select
           v-model="credentialnoType"
-          placeholder="选择分色"
           v-show="currentIndex == 0"
           class="input-general-width"
         >
@@ -169,9 +193,12 @@
 
 <script>
 import { getNetWorkId, inputSearch } from "@/api/home/index.js";
+import { handleTreeId } from "@/utils/findTreeId.js";
+import { treeselect } from "@/api/system/dept"; //部门
 import { mapGetters } from "vuex";
 import ColorCell from "@/components/ColorCell";
 export default {
+  dicts: ["b_color_type"],
   components: { ColorCell },
   computed: {
     ...mapGetters(["leftColor", "rightTopColor"]),
@@ -192,34 +219,84 @@ export default {
         { name: "市级(前4位)", value: 2 },
         { name: "县级(前6位)", value: 3 },
       ],
-      checkList: [],
+      isCheck: [],
+      isList: [
+        { name: "中共党员", key: "isd" },
+        { name: "帮扶对象", key: "isk" },
+        { name: "退役军人", key: "isj" },
+        { name: "重点人群", key: "isx" },
+      ],
       radio: "",
       value: "",
       keyWord: "",
+      colorList: [],
       queryParams: {
+        shequId: undefined,
+        xiaoquId: undefined,
+        parentid: undefined,
+        yuanid: undefined,
+        buildingId: undefined,
+        houseid: undefined,
+        isd: undefined, //党员
+        isk: undefined, //帮扶
+        isj: undefined, //退伍
+        isx: undefined, //重点
         credentialno: undefined, //身份证(全)
         cre1: undefined, //身份证(2)
         cre2: undefined, //身份证(4)
         cre3: undefined, //身份证(6)
         phone: undefined,
         name: undefined,
+        color: undefined,
+        type: undefined,
         pageNum: 1,
         pageSize: 10,
       },
-      community: [],
-      xiaoqu: [],
+      deptList: [],
+      xiaoquList: [],
+      netList: [],
+      yuanList: [],
+      buildingList: [],
+      houseList: [],
       list: [],
       houseTotal: 0,
       total: 0,
     };
   },
-  mounted() {},
+  mounted() {
+    this.getDeptList();
+  },
   methods: {
+    /**获取树部门 */
+    async getDeptList() {
+      let result = await treeselect();
+      this.deptList = result.data[0].children;
+      console.log(result);
+    },
+    /**
+     * 级联筛选
+     */
+    changeSelect(e, key) {
+      this[key] = handleTreeId(e, this.deptList);
+      // console.log(e, key, this[key]);
+    },
+
     /**
      * 搜索
      */
     handleSearch() {
       this.reset();
+      //分色
+      this.queryParams.color = this.colorList.toString();
+      console.log(this.queryParams.color);
+      //处理四个is
+      this.isCheck.forEach((item) => {
+        let index = this.isList.findIndex((it) => it.name == item);
+        if (index > -1) {
+          this.queryParams[this.isList[index].key] = 1;
+        }
+      });
+      //三个tab搜索
       if (this.currentIndex == 0) {
         if (this.credentialnoType == 0) {
           this.queryParams.credentialno = this.keyWord;
@@ -239,6 +316,16 @@ export default {
     handleReset() {
       this.keyWord = "";
       this.credentialnoType = 0;
+      this.queryParams.type = undefined;
+      this.queryParams.shequId = undefined;
+      this.queryParams.xiaoquId = undefined;
+      this.queryParams.parentid = undefined;
+      this.queryParams.yuanid = undefined;
+      this.queryParams.buildingId = undefined;
+      this.queryParams.houseid = undefined;
+
+      this.colorList = [];
+      this.isCheck = [];
       this.reset();
       this.load();
     },
@@ -293,14 +380,21 @@ export default {
      * 重置
      */
     reset() {
+      this.queryParams.isd = undefined; //党员
+      this.queryParams.isk = undefined; //帮扶
+      this.queryParams.isj = undefined; //退伍
+      this.queryParams.isx = undefined; //重点
       this.queryParams.credentialno = undefined; //身份证(全)
       this.queryParams.cre1 = undefined; //身份证(2)
       this.queryParams.cre2 = undefined; //身份证(4)
       this.queryParams.cre3 = undefined; //身份证(6)
       this.queryParams.phone = undefined;
       this.queryParams.name = undefined;
+      this.queryParams.color = undefined; //分色
+
       this.queryParams.pageNum = 1;
       this.queryParams.pageSize = 10;
+
       this.list = [];
       this.houseTotal = 0;
       this.total = 0;
@@ -320,7 +414,7 @@ export default {
     padding: 15px 0;
     .el-select {
       margin-right: 10px;
-      width: 140px;
+      width: 150px;
     }
     .el-radio-group {
       margin: 0 30px 0 10px;

src/utils/findTreeId.js

@@ -0,0 +1,52 @@
+// 定义递归函数来查找指定 id 的节点及其子节点
+function findNodeById(tree, id) {
+  // 遍历树的每一个节点
+  for (let node of tree) {
+    // 如果当前节点的 id 匹配
+    if (node.id === id) {
+      return node; // 返回当前节点及其子节点
+    }
+    // 如果当前节点有子节点，则递归查找子节点
+    if (node.children) {
+      let result = findNodeById(node.children, id);
+      if (result) {
+        return result; // 如果找到了就直接返回结果
+      }
+    }
+  }
+  // 如果未找到匹配的节点，则返回空（null）
+  return null;
+}
+
+// 定义一个函数来找到指定 id 节点及其所有子节点的完整信息
+function findAllChildrenInfo(tree, id) {
+  let node = findNodeById(tree, id); // 首先找到指定 id 的节点
+
+  if (!node) {
+    return null; // 如果找不到，返回 null
+  }
+
+  // 定义一个递归函数来获取节点及其所有子节点的完整信息
+  function collectChildrenInfo(node) {
+    let result = { ...node }; // 复制当前节点的所有属性
+
+    if (result.children) {
+      // 如果当前节点有子节点，则递归处理每一个子节点
+      result.children = result.children.map((child) =>
+        collectChildrenInfo(child)
+      );
+    }
+
+    return result;
+  }
+
+  return collectChildrenInfo(node); // 返回节点及其所有子节点的完整信息
+}
+
+export function handleTreeId(id, tree) {
+  // 测试示例
+  const idToFind = id; // 要查找的 id
+  const foundIds = findAllChildrenInfo(tree, idToFind); // 找到所有与 idToFind 相关的节点 id
+
+  return foundIds.children;
+}