feat: 开发区、产业园添加筛选

components.d.ts

@@ -7,39 +7,41 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    CommonHeader: (typeof import('./src/components/common/CommonHeader.vue'))['default'];
-    DetailInfoCell: (typeof import('./src/components/detail/DetailInfoCell.vue'))['default'];
-    DetailMain: (typeof import('./src/components/detail/DetailMain.vue'))['default'];
-    ElButton: (typeof import('element-plus/es'))['ElButton'];
-    ElCheckbox: (typeof import('element-plus/es'))['ElCheckbox'];
-    ElCheckboxGroup: (typeof import('element-plus/es'))['ElCheckboxGroup'];
-    ElCol: (typeof import('element-plus/es'))['ElCol'];
-    ElContainer: (typeof import('element-plus/es'))['ElContainer'];
-    ElDatePicker: (typeof import('element-plus/es'))['ElDatePicker'];
-    ElFooter: (typeof import('element-plus/es'))['ElFooter'];
-    ElForm: (typeof import('element-plus/es'))['ElForm'];
-    ElFormItem: (typeof import('element-plus/es'))['ElFormItem'];
-    ElHeader: (typeof import('element-plus/es'))['ElHeader'];
-    ElInput: (typeof import('element-plus/es'))['ElInput'];
-    ElMain: (typeof import('element-plus/es'))['ElMain'];
-    ElMenu: (typeof import('element-plus/es'))['ElMenu'];
-    ElMenuItem: (typeof import('element-plus/es'))['ElMenuItem'];
-    ElOption: (typeof import('element-plus/es'))['ElOption'];
-    ElPagination: (typeof import('element-plus/es'))['ElPagination'];
-    ElRadio: (typeof import('element-plus/es'))['ElRadio'];
-    ElRadioGroup: (typeof import('element-plus/es'))['ElRadioGroup'];
-    ElSelect: (typeof import('element-plus/es'))['ElSelect'];
-    ElSubMenu: (typeof import('element-plus/es'))['ElSubMenu'];
-    ImageList: (typeof import('./src/components/common/ImageList.vue'))['default'];
-    ListInfo: (typeof import('./src/components/list/ListInfo.vue'))['default'];
-    Filter: (typeof import('./src/components/filter/filter.vue'))['default'];
-    FilterView: (typeof import('./src/components/filter/filter-view.vue'))['default'];
-    ListCarrierItem: (typeof import('./src/components/list/list-carrier-item.vue'))['default'];
-    ListPagination: (typeof import('./src/components/list/ListPagination.vue'))['default'];
-    MiniListItem: (typeof import('./src/components/detail/MiniListItem.vue'))['default'];
-    ListLandItem: (typeof import('./src/components/list/list-land-item.vue'))['default'];
-    ParkItem: (typeof import('./src/components/list/ParkItem.vue'))['default'];
-    RouterLink: (typeof import('vue-router'))['RouterLink'];
-    RouterView: (typeof import('vue-router'))['RouterView'];
+    CommonHeader: typeof import('./src/components/common/CommonHeader.vue')['default']
+    DetailInfo: typeof import('./src/components/detail/DetailInfo.vue')['default']
+    DetailInfoCell: typeof import('./src/components/detail/DetailInfoCell.vue')['default']
+    DetailInfoTab: typeof import('./src/components/detail/DetailInfoTab.vue')['default']
+    DetailMain: typeof import('./src/components/detail/DetailMain.vue')['default']
+    ElButton: (typeof import('element-plus/es'))['ElButton']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
+    ElCol: (typeof import('element-plus/es'))['ElCol']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDatePicker: (typeof import('element-plus/es'))['ElDatePicker']
+    ElFooter: typeof import('element-plus/es')['ElFooter']
+    ElForm: (typeof import('element-plus/es'))['ElForm']
+    ElFormItem: (typeof import('element-plus/es'))['ElFormItem']
+    ElHeader: typeof import('element-plus/es')['ElHeader']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElMain: typeof import('element-plus/es')['ElMain']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElOption: (typeof import('element-plus/es'))['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElRadio: (typeof import('element-plus/es'))['ElRadio']
+    ElRadioGroup: (typeof import('element-plus/es'))['ElRadioGroup']
+    ElSelect: (typeof import('element-plus/es'))['ElSelect']
+    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    Filter: (typeof import('./src/components/filter/filter.vue'))['default']
+    FilterView: typeof import('./src/components/filter/filter-view.vue')['default']
+    ImageList: typeof import('./src/components/common/ImageList.vue')['default']
+    ListCarrierItem: typeof import('./src/components/list/list-carrier-item.vue')['default']
+    ListInfo: typeof import('./src/components/list/ListInfo.vue')['default']
+    ListLandItem: typeof import('./src/components/list/list-land-item.vue')['default']
+    ListPagination: typeof import('./src/components/list/ListPagination.vue')['default']
+    MiniListItem: typeof import('./src/components/detail/MiniListItem.vue')['default']
+    ParkItem: typeof import('./src/components/list/ParkItem.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
   }
 }

package-lock.json

@@ -13573,9 +13573,9 @@
       "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA=="
     },
     "@element-plus/icons-vue": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.1.0.tgz",
-      "integrity": "sha512-PSBn3elNoanENc1vnCfh+3WA9fimRC7n+fWkf3rE5jvv+aBohNHABC/KAR5KWPecxWxDTVT1ERpRbOMRcOV/vA==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz",
+      "integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==",
       "requires": {}
     },
     "@esbuild/android-arm": {

src/components/filter/filter-view.vue

@@ -31,7 +31,7 @@
       <div class="w-[100px] shrink-0 text-xs leading-9 text-black/[.65]">
         <span>{{ filter.label }}</span>
       </div>
-      <div>
+      <div class="flex-1">
         <div v-if="!filter.multiple" class="flex pt-1.5 text-xs">
           <div
             class="shrink-0"
@@ -47,10 +47,10 @@
               全部
             </span>
           </div>
-          <div class="flex">
-            <div v-for="(item, idx) in filter.list" :key="idx" class="Filter--keysWrap">
+          <div class="flex flex-wrap">
+            <div v-for="(item, idx) in filter.list" :key="idx">
               <div
-                class="Filter-ListWrap cursor-pointer px-2 py-1 text-black/[.45]"
+                class="cursor-pointer px-2 py-1 text-black/[.45]"
                 :class="{ selected: filter.value === item.dictValue }"
                 @click="handleFilterClick(item, filter)"
               >
@@ -88,7 +88,6 @@
           </ElCheckboxGroup>
         </div>
       </div>
-      <div class="Filter--operateWrap" style="width: 100px"></div>
     </div>
   </div>
 </template>

src/views/carrier/CarrierList.vue

@@ -36,7 +36,7 @@
 import { useListView } from '@/composable/useListView.ts';
 import { RouteName } from '@/router/router.ts';
 import { RequestUrl } from '@/types/api.ts';
-import ListPagination from '@/components/list/list-pagination.vue';
+import ListPagination from '@/components/list/ListPagination.vue';
 import CarrierListItemView from '@/components/list/list-carrier-item.vue';
 import FilterView from '@/components/filter/filter-view.vue';
 import type { CarrierListCondition, CarrierListItem } from '@/types/api/carrierList';

src/views/develop/DevelopZoneList.vue

 <!-- 开发区列表 -->
 <template>
   <div class="main-width mx-auto">
+    <FilterView
+      :filter-key-list="filterKeyList"
+      class="mb-6"
+      @change="handleFilterChange"
+    ></FilterView>
     <div class="space-y-5">
       <ParkItem
         v-for="item in datas"
@@ -27,9 +32,30 @@ import ListPagination from '@/components/list/ListPagination.vue';
 import { RequestUrl } from '@/types/api.ts';
 import type { DevelopZoneItem, DevelopZoneListCondition } from '@/types/api/developZoneList';
 import { ParkItemType } from '@/types/enum.ts';
+import FilterView from '@/components/filter/filter-view.vue';
 
-const { pageNum, pageSize, totalCount, datas, handleDetail } = useListView<
+// 筛选项列表
+const filterKeyList = [
+  'development_level',
+  'development_type',
+  'development_direction',
+  'development_area',
+  'industry_policy',
+];
+
+const { pageNum, pageSize, totalCount, datas, handleDetail, queryList } = useListView<
   DevelopZoneItem,
   DevelopZoneListCondition
 >(RequestUrl.developZoneList);
+
+// 处理筛选条件
+const handleFilterChange = async function (selectList) {
+  const temp: any = {};
+  for (const item of selectList.value) {
+    temp[item.key] = item.value;
+  }
+  pageNum.value = 1;
+  const { data } = await queryList(temp);
+  datas.value = data.records;
+};
 </script>

src/views/industrial-park/IndustrialParkList.vue

 <!-- 产业园列表 -->
 <template>
   <div class="main-width mx-auto">
+    <FilterView
+      class="mb-6"
+      :filter-key-list="filterKeyList"
+      @change="handleFilterChange"
+    ></FilterView>
     <div>
       <div class="space-y-5">
         <ParkItem
@@ -27,6 +32,7 @@ import { useListView } from '@/composable/useListView.ts';
 import { RouteName } from '@/router/router.ts';
 import { RequestUrl } from '@/types/api.ts';
 import ListPagination from '@/components/list/ListPagination.vue';
+import FilterView from '@/components/filter/filter-view.vue';
 import ParkItem from '@/components/list/ParkItem.vue';
 import type {
   IndustrialParkItem,
@@ -34,8 +40,26 @@ import type {
 } from '@/types/api/industrialParkList.ts';
 import { ParkItemType } from '@/types/enum.ts';
 
-const { pageNum, pageSize, totalCount, datas, handleDetail } = useListView<
+const { pageNum, pageSize, totalCount, datas, handleDetail, queryList } = useListView<
   IndustrialParkItem,
   IndustrialParkListCondition
 >(RequestUrl.industrialParkList);
+// 筛选项
+const filterKeyList = [
+  'park_level',
+  'park_direction',
+  'park_area',
+  'park_resources',
+  'industry_policy',
+];
+// 处理筛选条件
+const handleFilterChange = async function (selectList) {
+  const temp: any = {};
+  for (const item of selectList.value) {
+    temp[item.key] = item.value;
+  }
+  pageNum.value = 1;
+  const { data } = await queryList(temp);
+  datas.value = data.records;
+};
 </script>

src/views/land/LandList.vue

@@ -29,17 +29,16 @@
 import { useListView } from '@/composable/useListView.ts';
 import { RouteName } from '@/router/router.ts';
 import { RequestUrl } from '@/types/api.ts';
-import ListPagination from '@/components/list/list-pagination.vue';
+import ListPagination from '@/components/list/ListPagination.vue';
 import LandListItemView from '@/components/list/list-land-item.vue';
 import FilterView from '@/components/filter/filter-view.vue';
 import type { LandListCondition, LandListItem } from '@/types/api/landList';
-import { onMounted, ref } from 'vue';
+import { ref } from 'vue';
 
 const Response = useListView<LandListItem, LandListCondition>(RequestUrl.landList);
 const { datas, pageNum, totalCount, pageSize, handleDetail, queryList } = Response;
 
 const filterKeyList = ref(['land_price', 'land_type', 'land_area']);
-onMounted(() => {});
 // 处理筛选条件
 const handleFilterChange = async function (selectList) {
   const temp: any = {};