联建单位联建活动筛选

src/views/modules/communityParty/regionalParty/activitys.vue

@@ -23,22 +23,17 @@
 
           </el-form-item>
 
-          <el-form-item label="服务事项"
-                        prop="serviceMatter">
-            <el-select class="item_width_2"
+          <el-form-item label="服务事项" prop="serviceMatter">
+              <el-cascader
                 v-model="formData.serviceMatter"
+                class="u-item-width-daterange2"
                 size="small"
-                       placeholder="请选择"
-                       clearable>
-              <el-option v-for="item in serviceList"
-                         :key="item.value"
-                         :label="item.label"
-                         :value="item.value">
-              </el-option>
-            </el-select>
-
+                :options="searchdemandOptions"
+                :props="{ checkStrictly: true,label: 'categoryName',value: 'categoryCode',children: 'childCateList'}"
+                clearable
+                @change="handleCateCHange"
+              ></el-cascader>
         </el-form-item>
-
           <el-form-item label="所属网格"
                         prop="gridId">
             <el-select class="item_width_1"
@@ -302,7 +297,7 @@ export default {
       formData: {
         unitId: '',
         title: '',
-        serviceMatter: '',
+        serviceMatter:"",
         startTime: '',
         endTime: '',
         gridId: ''
@@ -318,8 +313,8 @@ export default {
 
       files: "",
       fileName: "",
-      uploadUlr: window.SITE_CONFIG['apiURL'] + '/gov/org/neighborhood/import'
-
+      uploadUlr: window.SITE_CONFIG['apiURL'] + '/gov/org/neighborhood/import',
+      searchdemandOptions:[]
     }
   },
   components: {
@@ -330,7 +325,7 @@ export default {
   },
   async mounted () {
     //获取服务事项
-    await this.loadService()
+    await this.getDemandOptions()
 
     const { user } = this.$store.state
     this.agencyId = user.agencyId
@@ -340,9 +335,46 @@ export default {
     this.loadGrid()
     //获取网格下拉框数据
     this.loadTable()
+
   },
 
   methods: {
+    handleCateCHange(val) {
+      if (val.length === 1) {
+        this.formData.serviceMatter = val[1];
+      } else {
+        this.formData.serviceMatter = val[0];
+      }
+    },
+    async getDemandOptions() {
+      this.$http
+        .post("/actual/base/serviceitem/listAllCategory")
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          } else {
+            this.searchdemandOptions = this.getTreeData(res.data);
+          }
+        })
+        .catch(() => {
+          return this.$message.error("网络错误");
+        });
+    },
+    getTreeData(data) {
+      if (!Array.isArray(data)) return [];
+      let arr = data.map((item) => {
+        let _item = {};
+        if (item.childCateList) {
+          if (item.childCateList.length === 0)
+            _item = { ...item, childCateList: undefined };
+          else _item = { ...item, childCateList: this.getTreeData(item.childCateList) };
+        } else {
+          _item = { ...item };
+        }
+        return _item;
+      });
+      return arr;
+    },
     handleSearch () {
       this.loadTable()
     },

src/views/modules/communityParty/regionalParty/units.vue

@@ -18,21 +18,15 @@
           </el-input>
         </el-form-item>
         <el-form-item label="服务事项" prop="serviceMatter">
-          <el-select
-            class="u-item-width-normal"
+              <el-cascader
                 v-model="formData.serviceMatter"
-            placeholder="请选择"
+                class="u-item-width-daterange2"
                 size="small"
+                :options="searchdemandOptions"
+                :props="{ checkStrictly: true,label: 'categoryName',value: 'categoryCode',children: 'childCateList'}"
                 clearable
-          >
-            <el-option
-              v-for="item in serviceList"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
-            </el-option>
-          </el-select>
+                @change="handleCateCHange"
+              ></el-cascader>
         </el-form-item>
 
         <el-form-item label="分类" prop="type">
@@ -413,7 +407,9 @@ export default {
       unitId: "",
       formData: {
         unitName: "",
-        serviceMatter: "",
+        // categoryCode:"",
+        // parentCategoryCode:"",
+        serviceMatter:'',
         type: "",
         contact: "",
         contactMobile: "",
@@ -436,6 +432,7 @@ export default {
       files: "",
       fileName: "",
       uploadUlr: window.SITE_CONFIG["apiURL"] + "/gov/org/neighborhood/import",
+      searchdemandOptions:[]
     };
   },
   components: {
@@ -447,7 +444,7 @@ export default {
   async created() {},
   async mounted() {
     //获取服务事项
-    await this.loadService();
+    await this.getDemandOptions()
 
     //获取分类
     await this.loadType();
@@ -459,6 +456,42 @@ export default {
   },
 
   methods: {
+    handleCateCHange(val) {
+      if (val.length === 1) {
+        this.formData.serviceMatter = val[1];
+      } else {
+        this.formData.serviceMatter = val[0];
+      }
+    },
+    async getDemandOptions() {
+      this.$http
+        .post("/actual/base/serviceitem/listAllCategory")
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          } else {
+            this.searchdemandOptions = this.getTreeData(res.data);
+          }
+        })
+        .catch(() => {
+          return this.$message.error("网络错误");
+        });
+    },
+    getTreeData(data) {
+      if (!Array.isArray(data)) return [];
+      let arr = data.map((item) => {
+        let _item = {};
+        if (item.childCateList) {
+          if (item.childCateList.length === 0)
+            _item = { ...item, childCateList: undefined };
+          else _item = { ...item, childCateList: this.getTreeData(item.childCateList) };
+        } else {
+          _item = { ...item };
+        }
+        return _item;
+      });
+      return arr;
+    },
     handleSearch() {
       this.loadTable();
     },