cas_cloud_admin_i18n_old/src/views/components/CityOptions/index.vue

<template>
  <el-form
    ref="formRef"
    :model="modelValue"
    :rules="rules"
    :label-width="labelWidth + 'px'"
  >
    <el-row>
      <el-col :span="24">
        <el-form-item label="所在地:" required>
          <el-row type="flex" justify="space-between">
            <el-col :span="7">
              <el-form-item prop="province">
                <el-select
                  v-model="modelValue.province"
                  clearable
                  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="city">
                <el-select
                  v-model="modelValue.city"
                  clearable
                  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="district">
                <el-select
                  v-model="modelValue.district"
                  clearable
                  placeholder="请选择"
                >
                  <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 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 {};
  },
  watch: {
    value(newOld) {
      const data = Object.assign({}, newOld);
      this.provinceCodeChange(data.province);
      this.cityCodeChange(data.city);
      newOld.city = data.city;
      newOld.district = data.district;
    },
  },
  methods: {
    getProvinceByParent(id) {
      return new Promise((resolve, reject) => {
        areaList({ code: id })
          .then(({ code, msg, data }) => {
            if (code == 200) {
              resolve(data);
            } else {
              this.$modal.msgError(msg);
              reject({ msg, code });
            }
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    async provinceCodeChange(id) {
      // delete this.modelValue.city;
      // delete this.modelValue.district;
      this.modelValue.city = undefined;
      this.modelValue.district = undefined;
      if (!id) {
        this.citySelectList = [];
        this.districtSelectList = [];
        return false;
      }
      this.citySelectList = await this.getProvinceByParent(id);
    },
    async cityCodeChange(id) {
      // delete this.modelValue.district;
      this.modelValue.district = undefined;
      if (!id) {
        this.districtSelectList = [];
        return false;
      }
      this.districtSelectList = await this.getProvinceByParent(id);
    },
    submitForm() {
      let flag = false;
      this.$refs["form"].validate((valid) => {
        flag = valid;
      });
      return flag;
    },
  },
  created() {
    areaList().then((res) => {
      this.provinceSelectList = res.data;
    });
  },
};
</script> -->