企业添加与修改

src/views/components/CityOptions/index.vue

@@ -3,7 +3,7 @@
     ref="formRef"
     :model="modelValue"
     :rules="rules"
-    :label-width="labelWidth + 'px'"
+    :label-width="`${labelWidth}px`"
   >
     <el-row>
       <el-col :span="24">
@@ -14,7 +14,9 @@
                 <el-select
                   v-model="modelValue.province"
                   clearable
+                  filterable
                   placeholder="请选择"
+                  :disabled="provinceSelectList.length === 0"
                   @change="provinceChanged"
                 >
                   <el-option
@@ -32,6 +34,8 @@
                 <el-select
                   v-model="modelValue.city"
                   clearable
+                  filterable
+                  :disabled="citySelectList.length === 0"
                   placeholder="请选择"
                   @change="cityChanged"
                 >
@@ -50,6 +54,8 @@
                 <el-select
                   v-model="modelValue.district"
                   clearable
+                  filterable
+                  :disabled="districtSelectList.length === 0"
                   placeholder="请选择"
                 >
                   <el-option
@@ -99,17 +105,29 @@ const { rules } = toRefs(data);
 // 获取 省列表
 const getProvinceList = async () => {
   const resp = await provinceList();
-  provinceSelectList.value = resp.data;
+  provinceSelectList.value = resp.data.map((el) => {
+    return { ...el, provinceCode: el.provinceCode.toString() };
+  });
 };
 // 获取市列表
 const getCityListByProvinceId = async (provinceId) => {
   const { data } = await cityList(provinceId);
-  citySelectList.value = data;
+  citySelectList.value = data.map((el) => {
+    return {
+      ...el,
+      cityCode: el.cityCode.toString(),
+    };
+  });
 };
 // 根据市id获取县区列表
 const getAreaListByCityId = async (cityId) => {
   const { data } = await districtList(cityId);
-  districtSelectList.value = data;
+  districtSelectList.value = data.map((el) => {
+    return {
+      ...el,
+      areaCode: el.areaCode.toString(),
+    };
+  });
 };
 // 当省改变时
 const provinceChanged = () => {
@@ -132,9 +150,25 @@ const cityChanged = () => {
 };
 
 const validateForm = async () => {
-  return await formRef.value.validate();
+  try {
+    return await formRef.value.validate();
+  } catch (error) {
+    return false;
+  }
 };
+// watch(modelValue, (val) => {
+//   console.log(val);
+// });
+
 getProvinceList();
+watch(modelValue, (val) => {
+  if (val.province) {
+    getCityListByProvinceId(val.province);
+  }
+  if (val.city) {
+    getAreaListByCityId(val.city);
+  }
+});
 
 defineExpose({
   validateForm,