bugfix

src/components/CityOptions/index.vue

@@ -0,0 +1,202 @@
+<template>
+  <el-form
+    ref="formRef"
+    :label-width="`${labelWidth}px`"
+    :model="modelValue"
+    :rules="rules"
+  >
+    <el-row>
+      <el-col :span="24">
+        <el-form-item label="所在地:" required>
+          <el-row justify="space-between" type="flex">
+            <el-col :span="7">
+              <el-form-item prop="provinceCode">
+                <el-select
+                  v-model="modelValue.provinceCode"
+                  :disabled="provinceSelectList.length === 0"
+                  clearable
+                  filterable
+                  placeholder="请选择"
+                  @change="provinceChanged"
+                >
+                  <el-option
+                    v-for="item in provinceSelectList"
+                    :key="item.provinceCode"
+                    :label="item.provinceName"
+                    :value="item.provinceCode"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="7">
+              <el-form-item prop="cityCode">
+                <el-select
+                  v-model="modelValue.cityCode"
+                  :disabled="citySelectList.length === 0"
+                  clearable
+                  filterable
+                  placeholder="请选择"
+                  @change="cityChanged"
+                >
+                  <el-option
+                    v-for="item in citySelectList"
+                    :key="item.cityCode"
+                    :label="item.cityName"
+                    :value="item.cityCode"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="7">
+              <el-form-item prop="areaCode">
+                <el-select
+                  v-model="modelValue.areaCode"
+                  :disabled="districtSelectList.length === 0"
+                  clearable
+                  filterable
+                  placeholder="请选择"
+                  @change="areaChanged"
+                >
+                  <el-option
+                    v-for="item in districtSelectList"
+                    :key="item.areaCode"
+                    :label="item.areaName"
+                    :value="item.areaCode"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form-item>
+      </el-col>
+    </el-row>
+  </el-form>
+</template>
+<script name="CityOptions" setup>
+import { cityList, districtList, provinceList } from "@/api/config";
+
+import { reactive, ref, toRefs, watch } 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: {
+    provinceCode: [
+      { required: true, message: "请选择", trigger: ["change", "blue"] }
+    ],
+    cityCode: [{ required: true, message: "请选择", trigger: ["change", "blue"] }],
+    areaCode: [
+      { required: true, message: "请选择", trigger: ["change", "blue"] }
+    ]
+  }
+});
+const { rules } = toRefs(data);
+// 获取 省列表
+const getProvinceList = async () => {
+  const resp = await provinceList();
+  provinceSelectList.value = resp.data.map((el) => {
+    return { ...el, provinceCode: el.provinceCode.toString() };
+  });
+};
+// 获取市列表
+const getCityListByProvinceId = async (provinceId) => {
+  const { data } = await cityList(provinceId);
+  citySelectList.value = data.map((el) => {
+    return {
+      ...el,
+      cityCode: el.cityCode.toString()
+    };
+  });
+};
+// 根据市id获取县区列表
+const getAreaListByCityId = async (cityId) => {
+  const { data } = await districtList(cityId);
+  districtSelectList.value = data.map((el) => {
+    return {
+      ...el,
+      areaCode: el.areaCode.toString()
+    };
+  });
+};
+// 当省改变时
+const provinceChanged = (val) => {
+  if (val) {
+    modelValue.value.provinceName = provinceSelectList.value.find(el => el.provinceCode === val)?.provinceName;
+  } else {
+    modelValue.value.provinceName = undefined;
+  }
+  // 清除市县代码列表
+  modelValue.value.cityCode = undefined;
+  modelValue.value.areaCode = undefined;
+  // 清除市县列表
+  citySelectList.value = [];
+  districtSelectList.value = [];
+};
+// 当市改变时
+const cityChanged = (val) => {
+  if (val) {
+    modelValue.value.cityName = citySelectList.value.find(el => el.cityCode === val)?.cityName;
+  } else {
+    modelValue.value.cityName = undefined;
+  }
+  // 清除县区代码列表
+  modelValue.value.areaCode = undefined;
+  districtSelectList.value = [];
+};
+const areaChanged = (val) => {
+  if (val) {
+    modelValue.value.areaName = districtSelectList.value.find(el => el.areaCode === val)?.areaName;
+  } else {
+    modelValue.value.areaName = undefined;
+  }
+};
+const validateForm = async () => {
+  try {
+    return await formRef.value.validate();
+  } catch (error) {
+    return false;
+  }
+};
+
+
+watch(
+  () => modelValue.value.provinceCode,
+  (val) => {
+    console.log("changed province");
+    val && getCityListByProvinceId(val);
+  },
+  {
+    immediate: true
+  }
+);
+
+watch(
+  () => modelValue.value.cityCode,
+  (val) => {
+    console.log("changed city");
+    val && getAreaListByCityId(val);
+  },
+  {
+    immediate: true
+  }
+);
+
+getProvinceList();
+
+defineExpose({
+  validateForm
+});
+</script>

src/components/MapSelect/index.vue

@@ -187,7 +187,7 @@ onMounted(async () => {
     left: 0;
     top: 10px;
     padding: 0 10px;
-    z-index: 202333;
+    z-index: 120;
   }
 }
 </style>