企业列表地区选择器

src/views/components/CityOptions/index.vue

@@ -1,7 +1,7 @@
 <template>
   <el-form
-    ref="form"
-    :model="value"
+    ref="formRef"
+    :model="modelValue"
     :rules="rules"
     :label-width="labelWidth + 'px'"
   >
@@ -12,16 +12,16 @@
             <el-col :span="7">
               <el-form-item prop="province">
                 <el-select
-                  v-model="value.province"
+                  v-model="modelValue.province"
                   clearable
                   placeholder="请选择"
-                  @change="provinceCodeChange"
+                  @change="provinceChanged"
                 >
                   <el-option
-                    v-for="(key, value) in provinceSelectList"
-                    :key="value"
-                    :label="key"
-                    :value="value"
+                    v-for="item in provinceSelectList"
+                    :key="item.provinceCode"
+                    :label="item.provinceName"
+                    :value="item.provinceCode"
                   >
                   </el-option>
                 </el-select>
@@ -30,16 +30,16 @@
             <el-col :span="7">
               <el-form-item prop="city">
                 <el-select
-                  v-model="value.city"
+                  v-model="modelValue.city"
                   clearable
                   placeholder="请选择"
-                  @change="cityCodeChange"
+                  @change="cityChanged"
                 >
                   <el-option
-                    v-for="(key, value) in citySelectList"
-                    :key="value"
-                    :label="key"
-                    :value="value"
+                    v-for="item in citySelectList"
+                    :key="item.cityCode"
+                    :label="item.cityName"
+                    :value="item.cityCode"
                   >
                   </el-option>
                 </el-select>
@@ -48,15 +48,15 @@
             <el-col :span="7">
               <el-form-item prop="district">
                 <el-select
-                  v-model="value.district"
+                  v-model="modelValue.district"
                   clearable
                   placeholder="请选择"
                 >
                   <el-option
-                    v-for="(key, value) in districtSelectList"
-                    :key="value"
-                    :label="key"
-                    :value="value"
+                    v-for="item in districtSelectList"
+                    :key="item.areaCode"
+                    :label="item.areaName"
+                    :value="item.areaCode"
                   >
                   </el-option>
                 </el-select>
@@ -68,33 +68,83 @@
     </el-row>
   </el-form>
 </template>
-<script>
-import { areaList } from "@/api/config";
-export default {
-  props: {
-    value: Object,
-    labelWidth: {
-      type: Number,
-      default: 120,
-    },
+<script setup name="CityOptions">
+import { provinceList, cityList, districtList } from "@/api/config";
+import { reactive, ref, toRefs } from "vue";
+
+const props = defineProps({
+  modelValue: Object,
+  labelWidth: {
+    type: Number,
+    default: 120,
   },
+});
+const { modelValue, labelWidth } = toRefs(props);
+const formRef = ref(null);
+const provinceSelectList = ref([]); // 省
+const citySelectList = ref([]); // 市
+const districtSelectList = ref([]); // 区\
+const data = reactive({
+  rules: {
+    province: [
+      { required: true, message: "请选择", trigger: ["change", "blue"] },
+    ],
+    city: [{ required: true, message: "请选择", trigger: ["change", "blue"] }],
+    district: [
+      { required: true, message: "请选择", trigger: ["change", "blue"] },
+    ],
+  },
+});
+const { rules } = toRefs(data);
+// 获取 省列表
+const getProvinceList = async () => {
+  const resp = await provinceList();
+  provinceSelectList.value = resp.data;
+};
+// 获取市列表
+const getCityListByProvinceId = async (provinceId) => {
+  const { data } = await cityList(provinceId);
+  citySelectList.value = data;
+};
+// 根据市id获取县区列表
+const getAreaListByCityId = async (cityId) => {
+  const { data } = await districtList(cityId);
+  districtSelectList.value = data;
+};
+// 当省改变时
+const provinceChanged = () => {
+  // 清除市县代码列表
+  modelValue.value.city = undefined;
+  modelValue.value.district = undefined;
+  // 清除市县列表
+  citySelectList.value = [];
+  districtSelectList.value = [];
+  // 重新请求城市列表
+  modelValue.value.province &&
+    getCityListByProvinceId(modelValue.value.province);
+};
+// 当市改变时
+const cityChanged = () => {
+  // 清除县区代码列表
+  modelValue.value.district = undefined;
+  districtSelectList.value = [];
+  modelValue.value.city && getAreaListByCityId(modelValue.value.city);
+};
+
+const validateForm = async () => {
+  return await formRef.value.validate();
+};
+getProvinceList();
+
+defineExpose({
+  validateForm,
+});
+</script>
+
+<!-- <script>
+export default {
   data() {
-    return {
-      provinceSelectList: [], // 省
-      citySelectList: [], // 市
-      districtSelectList: [], // 区
-      rules: {
-        province: [
-          { required: true, message: "请选择", trigger: ["change", "blue"] },
-        ],
-        city: [
-          { required: true, message: "请选择", trigger: ["change", "blue"] },
-        ],
-        district: [
-          { required: true, message: "请选择", trigger: ["change", "blue"] },
-        ],
-      },
-    };
+    return {};
   },
   watch: {
     value(newOld) {
@@ -123,10 +173,10 @@ export default {
       });
     },
     async provinceCodeChange(id) {
-      // delete this.value.city;
-      // delete this.value.district;
-      this.value.city = undefined;
-      this.value.district = undefined;
+      // delete this.modelValue.city;
+      // delete this.modelValue.district;
+      this.modelValue.city = undefined;
+      this.modelValue.district = undefined;
       if (!id) {
         this.citySelectList = [];
         this.districtSelectList = [];
@@ -135,8 +185,8 @@ export default {
       this.citySelectList = await this.getProvinceByParent(id);
     },
     async cityCodeChange(id) {
-      // delete this.value.district;
-      this.value.district = undefined;
+      // delete this.modelValue.district;
+      this.modelValue.district = undefined;
       if (!id) {
         this.districtSelectList = [];
         return false;
@@ -157,4 +207,4 @@ export default {
     });
   },
 };
-</script>
+</script> -->