供应商地址库功能更改

src/views/purchaseManage/supplier/supplier/index.vue

@@ -45,12 +45,20 @@
           <div>
             <el-select
               v-model="formData.data.countryId"
-              placeholder="国家"
-              @change="(val) => getCityData(val, '20', true)"
+              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.chineseName"
+                :label="item.name"
                 :value="item.id"
               >
               </el-option>
@@ -60,28 +68,50 @@
 
         <template #provinceId>
           <div>
-            <selectCity
-              placeholder="省/洲"
-              @change="(val) => getCityData(val, '30', true)"
-              addressId="provinceId"
-              addressName="provinceName"
-              v-model="formData.data"
-              :data="provinceData"
+            <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')"
             >
-            </selectCity>
+              <el-option
+                v-for="item in provinceData"
+                :label="item.name"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
           </div>
         </template>
 
         <template #cityId>
           <div>
-            <selectCity
-              placeholder="城市"
-              addressId="cityId"
-              addressName="cityName"
-              v-model="formData.data"
-              :data="cityData"
+            <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')"
             >
-            </selectCity>
+              <el-option
+                v-for="item in cityData"
+                :label="item.name"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
           </div>
         </template>
 
@@ -513,24 +543,14 @@ const getDtl = (row) => {
 const countryData = ref([]);
 const provinceData = ref([]);
 const cityData = ref([]);
-const getCityData = (id, type, flag) => {
-  proxy.post("/customizeArea/list", { parentId: id }).then((res) => {
+const getCityData = (id, type) => {
+  proxy.post("/customizeArea/page", { parentId: id }).then((res) => {
     if (type === "20") {
-      provinceData.value = res;
-      if (flag) {
-        formData.data.provinceId = "";
-        formData.data.provinceName = "";
-        formData.data.cityId = "";
-        formData.data.cityName = "";
-      }
+      provinceData.value = res.rows;
     } else if (type === "30") {
-      cityData.value = res;
-      if (flag) {
-        formData.data.cityId = "";
-        formData.data.cityName = "";
-      }
+      cityData.value = res.rows;
     } else {
-      countryData.value = res;
+      countryData.value = res.rows;
     }
   });
 };
@@ -547,6 +567,37 @@ const getDict = () => {
 getDict();
 getCityData("0");
 getList();
+
+const loadingSearch = ref(false);
+const loadingSearchProvince = ref(false);
+const loadingSearchCity = 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>