refactor: 将省份和城市级联改为select框联动

src/views/pms/project/ProjectForm.vue

@@ -37,29 +37,37 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="省份" prop="provinceId">
-            <el-cascader
-              v-model="formData.provinceId"
-              :options="areaList"
-              :props="props1"
-              class="w-1/1"
+            <el-select
               clearable
               filterable
               placeholder="请选择省份"
-            />
+              v-model="formData.provinceId"
+              @change="onProvinceChange"
+            >
+              <el-option
+                v-for="item in areaList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="城市" prop="cityId">
-            <el-cascader
-              v-model="formData.cityId"
-              :options="areaList"
-              :props="props1"
-              :show-all-levels="false"
-              class="w-1/1"
+            <el-select
               clearable
               filterable
               placeholder="请选择城市"
-            />
+              v-model="formData.cityId"
+            >
+              <el-option
+                v-for="item in cityList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="12">
@@ -245,6 +253,7 @@ import { useUserStore } from '@/store/modules/user'
 import { CustomerCompanyApi, CustomerCompanyVO } from '@/api/cms/customerCompany'
 import * as DeptApi from '@/api/system/dept'
 import {defaultProps, handleTree} from "@/utils/tree";
+import { log } from 'console'
 
 /** 项目基本信息 表单 */
 defineOptions({ name: 'ProjectForm' })
@@ -256,6 +265,7 @@ const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const areaList = ref([]) // 地区列表
+const cityList = ref([]); // 城市options
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
 const customerCompanyOptions = ref<CustomerCompanyVO[]>([]) //客户公司列表
@@ -401,4 +411,10 @@ const resetForm = () => {
   }
   formRef.value?.resetFields()
 }
+
+// 省份更新时，刷新城市选项
+const onProvinceChange = (value: number)=>{
+  formData.value.cityId = undefined;
+  cityList.value = (areaList.value.find(({id})=>id===value) as any)?.children ?? [];
+}
 </script>

src/views/pms/project/bpm/ProjectBpmCreate.vue

@@ -35,32 +35,40 @@
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-form-item label="省份" prop="provinceId">
-          <el-cascader
-            v-model="formData.provinceId"
-            :options="areaList"
-            :props="props"
-            class="w-1/1"
-            clearable
-            filterable
-            placeholder="请选择省份"
-          />
-        </el-form-item>
-      </el-col>
-      <el-col :span="12">
-        <el-form-item label="城市" prop="cityId">
-          <el-cascader
-            v-model="formData.cityId"
-            :options="areaList"
-            :props="props"
-            :show-all-levels="false"
-            class="w-1/1"
-            clearable
-            filterable
-            placeholder="请选择城市"
-          />
-        </el-form-item>
-      </el-col>
+          <el-form-item label="省份" prop="provinceId">
+            <el-select
+              clearable
+              filterable
+              placeholder="请选择省份"
+              v-model="formData.provinceId"
+              @change="onProvinceChange"
+            >
+              <el-option
+                v-for="item in areaList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="城市" prop="cityId">
+            <el-select
+              clearable
+              filterable
+              placeholder="请选择城市"
+              v-model="formData.cityId"
+            >
+              <el-option
+                v-for="item in cityList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
       <el-col :span="12">
         <el-form-item label="预计金额(万)" prop="contractAmount" :label-width="102">
           <el-input v-model="formData.contractAmount" placeholder="请输入预计合同金额" />
@@ -309,6 +317,7 @@ const formRef = ref() // 表单 Ref
 const processDefineKey = 'pms_project_init' // 流程定义 Key
 const userList = ref<any[]>([]) // 用户列表
 const areaList = ref([]) // 地区列表
+const cityList = ref([]); // 城市options
 const customerCompanyOptions = ref<CustomerCompanyVO[]>([]) //客户公司列表
 const deptOptions = ref<any[]>([]) // 部门树形结构
 
@@ -354,4 +363,10 @@ onMounted(async () => {
   // 客户公司列表
   customerCompanyOptions.value = await CustomerCompanyApi.getCustomerCompanyList()
 })
+
+// 省份更新时，刷新城市选项
+const onProvinceChange = (value: number)=>{
+  formData.value.cityId = undefined;
+  cityList.value = (areaList.value.find(({id})=>id===value) as any)?.children ?? [];
+}
 </script>