feat: 列表筛选

src/assets/styles/reset.scss

@@ -14,6 +14,9 @@ body {
 #app {
   .el-checkbox {
     margin-right: 20px;
+    &:hover .el-checkbox__inner{
+      border-color: #c0322b;
+    }
   }
   .el-checkbox__input.is-checked .el-checkbox__inner {
     background-color: #c0322b;

src/components/filter/config.ts

@@ -154,4 +154,28 @@ export const defaultFiltersConfig = {
       unit: 'm',
     },
   },
+  // 省
+  province: {
+    type: 'select',
+    label: '全部区域',
+    key: 'provinceName',
+    multiple: false,
+    isAddress: true,
+  },
+  // 市
+  city: {
+    type: 'select',
+    label: '全部城市',
+    key: 'cityName',
+    multiple: false,
+    isAddress: true,
+  },
+  // 区
+  region: {
+    type: 'select',
+    label: '全部区县',
+    key: 'regionName',
+    multiple: false,
+    isAddress: true,
+  },
 };

src/composable/useCity.ts

 import cityData from '@/utils/cities.json';
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 
 export interface CityData {
   value: string;
@@ -16,20 +16,52 @@ export function useAddress() {
   const currentProvince = ref<CityData | null>(null);
   const currentCity = ref<CityData | null>(null);
   const currentRegion = ref<CityData | null>(null);
+  // 省列表
+  const AreaJson = cityData;
+  function getProvinces() {
+    const provinces = [];
+    for (let i = 0; i < AreaJson.length; i++) {
+      provinces.push({
+        dictLabel: AreaJson[i].name,
+        dictValue: AreaJson[i].name,
+        index: i,
+      });
+    }
+    return provinces;
+  }
+
+  function getCity(i: any) {
+    const cities: any[] = [];
+    const idx = i;
+    for (let index = 0; index < AreaJson[i].children.length; index++) {
+      cities.push({
+        dictLabel: AreaJson[idx].children[index].name,
+        dictValue: AreaJson[idx].children[index].name,
+        index,
+      });
+    }
+    return cities;
+  }
+  function getRegion(provinceIdx: number, cityIdx: number) {
+    const regions: any[] = [];
+    for (const item of AreaJson[provinceIdx].children[cityIdx].children) {
+      regions.push({
+        dictLabel: item.name,
+        dictValue: item.name,
+      });
+    }
+    return regions;
+  }
 
   /**
    * 当前省的市列表
    */
-  const currentCityList = computed(() => {
-    return currentProvince.value?.children || [];
-  });
+  const currentCityList = ref<CityData[]>([]);
 
   /**
    * 当前市的区列表
    */
-  const currentRegionList = computed(() => {
-    return currentCity.value?.children || [];
-  });
+  const currentRegionList = ref<CityData[]>([]);
 
   return {
     cityList,
@@ -38,5 +70,8 @@ export function useAddress() {
     currentRegion,
     currentCityList,
     currentRegionList,
+    getProvinces,
+    getCity,
+    getRegion,
   };
 }

src/types/common.ts

@@ -56,6 +56,8 @@ export type FilterListItem = {
   type: string;
   multiple?: boolean;
   value?: string | string[];
+  valueLabel?: string | string[];
+  isAddress?: boolean;
   plugin?: {
     type: string;
     unit: string;