From 7a68dccf9b448f33d88556f34c79defb65984012 Mon Sep 17 00:00:00 2001
From: SADYX <zweihandler019@foxmail.com>
Date: Tue, 9 Jul 2024 16:42:48 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=B0=86=E7=9C=81=E4=BB=BD?=
 =?UTF-8?q?=E5=92=8C=E5=9F=8E=E5=B8=82=E7=BA=A7=E8=81=94=E6=94=B9=E4=B8=BA?=
 =?UTF-8?q?select=E6=A1=86=E8=81=94=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/pms/project/ProjectForm.vue         | 42 ++++++++----
 .../pms/project/bpm/ProjectBpmCreate.vue      | 67 ++++++++++++-------
 2 files changed, 70 insertions(+), 39 deletions(-)

diff --git a/src/views/pms/project/ProjectForm.vue b/src/views/pms/project/ProjectForm.vue
index ba858205..b57c97d7 100644
--- a/src/views/pms/project/ProjectForm.vue
+++ b/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>
diff --git a/src/views/pms/project/bpm/ProjectBpmCreate.vue b/src/views/pms/project/bpm/ProjectBpmCreate.vue
index 5f89074d..adef2e9e 100644
--- a/src/views/pms/project/bpm/ProjectBpmCreate.vue
+++ b/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>