|
@@ -38,26 +38,74 @@
|
|
|
<el-row style="width: 100%;display: flex;justify-content: space-between;">
|
|
|
<el-col :span="7">
|
|
|
<el-form-item prop="countryId">
|
|
|
- <el-select v-model="formData.data.countryId" placeholder="国家" filterable @change="(val) => getCityData(val, '20', true)">
|
|
|
- <el-option v-for="item in countryData" :label="item.chineseName" :value="item.id"> </el-option>
|
|
|
+ <el-select
|
|
|
+ v-model="formData.data.countryId"
|
|
|
+ filterable
|
|
|
+ remote
|
|
|
+ reserve-keyword
|
|
|
+ placeholder="请输入关键字"
|
|
|
+ remote-show-suffix
|
|
|
+ no-data-text="无数据,请联系管理员添加"
|
|
|
+ :loading="loadingSearch"
|
|
|
+ :remote-method="(val) => remoteMethod(val, '0')"
|
|
|
+ @input="(val) => remoteMethod(val, '0')"
|
|
|
+ @change="(val) => getCityData(val, '20')"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in countryData"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="7">
|
|
|
<el-form-item prop="provinceName">
|
|
|
- <selectCity
|
|
|
- placeholder="省/洲"
|
|
|
- @change="(val) => getCityData(val, '30', true)"
|
|
|
- addressId="provinceId"
|
|
|
- addressName="provinceName"
|
|
|
- v-model="formData.data"
|
|
|
- :data="provinceData">
|
|
|
- </selectCity>
|
|
|
+ <el-select
|
|
|
+ v-model="formData.data.provinceId"
|
|
|
+ filterable
|
|
|
+ remote
|
|
|
+ reserve-keyword
|
|
|
+ placeholder="请输入关键字"
|
|
|
+ remote-show-suffix
|
|
|
+ no-data-text="无数据,请联系管理员添加"
|
|
|
+ :loading="loadingSearchProvince"
|
|
|
+ :remote-method="(val) => remoteMethod(val, '1')"
|
|
|
+ @input="(val) => remoteMethod(val, '1')"
|
|
|
+ @change="(val) => getCityData(val, '30')"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in provinceData"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :span="7">
|
|
|
<el-form-item prop="cityName">
|
|
|
- <selectCity placeholder="城市" addressId="cityId" addressName="cityName" v-model="formData.data" :data="cityData"></selectCity>
|
|
|
+ <el-select
|
|
|
+ v-model="formData.data.cityId"
|
|
|
+ filterable
|
|
|
+ remote
|
|
|
+ reserve-keyword
|
|
|
+ placeholder="请输入关键字"
|
|
|
+ remote-show-suffix
|
|
|
+ no-data-text="无数据,请联系管理员添加"
|
|
|
+ :loading="loadingSearchCity"
|
|
|
+ :remote-method="(val) => remoteMethod(val, '2')"
|
|
|
+ @input="(val) => remoteMethod(val, '2')"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in cityData"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
@@ -633,6 +681,37 @@ const contractSealListSuccess = (response, uploadFile) => {
|
|
|
},
|
|
|
];
|
|
|
};
|
|
|
+
|
|
|
+const loadingSearch = ref(false);
|
|
|
+const loadingSearchProvince = ref(false);
|
|
|
+const remoteMethod = (keyword, type) => {
|
|
|
+ if (keyword && typeof keyword === "string") {
|
|
|
+ let parentId = "0";
|
|
|
+ if (type == "0") {
|
|
|
+ loadingSearch.value = true;
|
|
|
+ } else if (type == "1") {
|
|
|
+ parentId = formData.data.countryId;
|
|
|
+ loadingSearchProvince.value = true;
|
|
|
+ } else if (type == "2") {
|
|
|
+ parentId = formData.data.provinceId;
|
|
|
+ loadingSearchCity.value = true;
|
|
|
+ }
|
|
|
+ proxy.post("/customizeArea/page", { parentId, keyword }).then((res) => {
|
|
|
+ if (type == "0") {
|
|
|
+ countryData.value = res.rows;
|
|
|
+ loadingSearch.value = false;
|
|
|
+ } else if (type == "1") {
|
|
|
+ provinceData.value = res.rows;
|
|
|
+ loadingSearchProvince.value = false;
|
|
|
+ } else if (type == "2") {
|
|
|
+ cityData.value = res.rows;
|
|
|
+ loadingSearchCity.value = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return;
|
|
|
+};
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|