筛选行优化

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@element-plus/icons-vue": "^1.1.4",
         "@tinymce/tinymce-vue": "^5.0.0",
+        "@vant/area-data": "^1.3.1",
         "axios": "^0.27.2",
         "blueimp-md5": "^2.19.0",
         "element-plus": "^2.2.2",
@@ -490,6 +491,11 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@vant/area-data": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@vant/area-data/-/area-data-1.3.1.tgz",
+      "integrity": "sha512-xji2kfVBXzFYmHAJNbhYjiRJ4GnN+enbTmtx6FnpTyxs9sUcFtS11BZ23hYCGuj4s02gXyrzUBTXGqhX5IKHIw=="
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-2.3.3.tgz",
@@ -5058,6 +5064,11 @@
         "eslint-visitor-keys": "^3.0.0"
       }
     },
+    "@vant/area-data": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@vant/area-data/-/area-data-1.3.1.tgz",
+      "integrity": "sha512-xji2kfVBXzFYmHAJNbhYjiRJ4GnN+enbTmtx6FnpTyxs9sUcFtS11BZ23hYCGuj4s02gXyrzUBTXGqhX5IKHIw=="
+    },
     "@vitejs/plugin-vue": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-2.3.3.tgz",

package.json

@@ -21,7 +21,8 @@
     "pinia": "^2.0.14",
     "qs": "^6.10.3",
     "vue": "^3.2.36",
-    "vue-router": "^4.0.15"
+    "vue-router": "^4.0.15",
+    "@vant/area-data": "^1.3.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.1.3",

src/composables/useArea.ts

+import { areaList } from '@vant/area-data'
+// json to array
+const json2Array = function (data: Record<string, string>) {
+  return Object.keys(data).map(code => ({ code, label: data[code], value: data[code] }))
+}
+
+export function useArea() {
+  const provinceValue = ref('')
+  const cityValue = ref('')
+
+  watch(provinceValue, () => {
+    cityValue.value = ''
+  })
+
+  const provinceList = ref(
+    json2Array(areaList.province_list).sort((a, b) => {
+      return a.label.localeCompare(b.label)
+    })
+  )
+  const cityList = computed(() => {
+    return json2Array(areaList.city_list)
+      .filter(item => {
+        const provinceValueCode =
+          provinceList.value.find(province => province.label === provinceValue.value)?.code || ''
+        return item.code.slice(0, 2) === provinceValueCode.slice(0, 2)
+      })
+      .sort((a, b) => {
+        return a.label.localeCompare(b.label)
+      })
+  })
+
+  const treeList = json2Array(areaList.province_list).map(item => {
+    const children = json2Array(areaList.city_list).filter(item2 => {
+      return item2.code.slice(0, 2) === item.code.slice(0, 2)
+    })
+    return { ...item, children }
+  })
+
+  return { provinceValue, cityValue, provinceList, cityList, treeList }
+}

src/modules/alumni/prefix.ts

-const allPrefix = [
+// json to array
+export const json2Array = function (data: Record<string, any>, isValueToNumber = true) {
+  return Object.keys(data).map(value => ({ label: data[value], value: isValueToNumber ? parseInt(value) : value }))
+}
+export const allPrefixList = [
   { prefix: 'sofia', name: '索菲亚' },
   { prefix: 'kelley', name: '凯丽' },
   { prefix: 'marywood', name: '玛丽伍德' },
@@ -6,4 +10,52 @@ const allPrefix = [
   { prefix: 'cbu_plus', name: '加州浸会大学1+1' },
   { prefix: 'sbu_plus', name: '纽约大学石溪分校1+1' }
 ]
-export default allPrefix
+export const industryCategory: Record<string, string> = {
+  '1': '互联网/电子商务',
+  '2': '基金/证券/期货/投资',
+  '3': '保险',
+  '4': '银行',
+  '5': '信托/担保/拍卖/典当',
+  '6': '计算机软件',
+  '7': 'IT服务(系统/数据/维护)',
+  '8': '电子技术/半导体/集成电路',
+  '9': '计算机硬件',
+  '10': '通信/电信/网络设备',
+  '11': '通信/电信运营、增值服务',
+  '12': '网络游戏',
+  '13': '房地产/建筑/建材/工程',
+  '14': '家居/室内设计/装饰装潢',
+  '15': '物业管理/商业中心',
+  '16': '专业服务/咨询(财会/法律/人力资源等)',
+  '17': '广告/会展/公关',
+  '18': '中介服务',
+  '19': '检验/检测/认证',
+  '20': '外包服务',
+  '21': '快速消费品（食品/饮料/烟酒/日化）',
+  '22': '耐用消费品（服饰/纺织/皮革/家具/家电）',
+  '23': '贸易/进出口',
+  '24': '零售/批发',
+  '25': '租赁服务',
+  '26': '教育/培训/院校',
+  '27': '礼品/玩具/工艺美术/收藏品/奢侈品',
+  '28': '汽车/摩托车',
+  '29': '大型设备/机电设备/重工业',
+  '30': '加工制造（原料加工/模具）',
+  '31': '仪器仪表及工业自动化',
+  '32': '印刷/包装/造纸',
+  '33': '办公用品及设备',
+  '34': '医药/生物工程',
+  '35': '医疗设备/器械',
+  '36': '航空/航天研究与制造',
+  '37': '交通/运输,物流/仓储',
+  '38': '医疗/护理/美容/保健/卫生服务',
+  '39': '酒店/餐饮,旅游/度假,媒体/出版/影视/文化传播',
+  '40': '娱乐/体育/休闲',
+  '41': '能源/矿产/采掘/冶炼',
+  '42': '石油/石化/化工,电气/电力/水利',
+  '43': '环保',
+  '44': '政府/公共事业/非盈利机构',
+  '45': '学术/科研,农/林/牧/渔跨领域经营',
+  '90': '其他'
+}
+export const industryCategoryList = Object.values(industryCategory).map(item => ({ label: item, value: item }))

src/modules/alumni/views/List.vue

 <script setup lang="ts">
-import allPrefixList from '../prefix'
+import { allPrefixList, industryCategoryList } from '../prefix'
+import { useArea } from '@/composables/useArea'
 
 import { ref } from 'vue'
 import { getAlumniList, getClassList } from '../api'
 const appList = ref()
+// 省市
+const { provinceList, cityList, provinceValue, cityValue } = useArea()
 interface classList {
   loading: boolean
   page: number
@@ -70,9 +73,9 @@ const listOptions = $computed(() => {
         prop: 'project_prefix',
         slots: 'filter-project'
       },
-      { type: 'input', prop: 'province', placeholder: '省份' },
-      { type: 'input', prop: 'city', placeholder: '城市' },
-      { type: 'input', prop: 'industry', placeholder: '所在行业' },
+      { type: 'input', prop: 'province', placeholder: '省份', slots: 'filter-province' },
+      { type: 'input', prop: 'city', placeholder: '城市', slots: 'filter-city' },
+      { type: 'select', prop: 'industry', placeholder: '所在行业', options: industryCategoryList },
       { type: 'input', prop: 'workplace', placeholder: '工作单位' }
     ],
     columns: [
@@ -118,6 +121,23 @@ const handleFresh = () => {
           <el-option v-for="item in allPrefixList" :key="item.prefix" :label="item.name" :value="item.prefix" />
         </el-select>
       </template>
+      <template #filter-province>
+        <el-select filterable clearable v-model="provinceValue" @change="handleFresh" placeholder="省份">
+          <el-option v-for="item in provinceList" :value="item.label" :key="item.code"></el-option>
+        </el-select>
+      </template>
+      <template #filter-city>
+        <el-select
+          filterable
+          clearable
+          v-model="cityValue"
+          @change="handleFresh"
+          placeholder="城市"
+          no-data-text="请先选择省份"
+        >
+          <el-option v-for="item in cityList" :value="item.label" :key="item.code"></el-option>
+        </el-select>
+      </template>
       <template #table-operate="{ row }">
         <el-space>
           <router-link :to="`/alumni/view?id=${row.id}`" target="_blank">