160 lines
4.3 KiB
Vue
160 lines
4.3 KiB
Vue
|
<template>
|
||
|
|
<el-form
|
||
|
|
ref="form"
|
||
|
|
: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="provinceCodeChange"
|
||
|
|
>
|
||
|
|
<el-option
|
||
|
|
v-for="(key, value) in provinceSelectList"
|
||
|
|
:key="value"
|
||
|
|
:label="key"
|
||
|
|
:value="value"
|
||
|
|
>
|
||
|
|
</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="cityCodeChange"
|
||
|
|
>
|
||
|
|
<el-option
|
||
|
|
v-for="(key, value) in citySelectList"
|
||
|
|
:key="value"
|
||
|
|
:label="key"
|
||
|
|
:value="value"
|
||
|
|
>
|
||
|
|
</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="(key, value) in districtSelectList"
|
||
|
|
:key="value"
|
||
|
|
:label="key"
|
||
|
|
:value="value"
|
||
|
|
>
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</el-form>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import { areaList } from "@/api/config";
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
modelValue: Object,
|
||
|
|
labelWidth: {
|
||
|
|
type: Number,
|
||
|
|
default: 120,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
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"] },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
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>
|