更新

src/components/autocomplete/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-autocomplete
+  <!-- <el-autocomplete
     v-model="text"
     :fetch-suggestions="querySearchAsync"
     :value-key="config.valueKey"
@@ -7,7 +7,26 @@
     clearable
     @select="selectAutocomplete"
     @clear="params[config.querykey] = ''"
-  ></el-autocomplete>
+  ></el-autocomplete> -->
+
+  <el-select
+    v-model="params[config.querykey]"
+    filterable
+    remote
+    clearable
+    reserve-keyword
+    :placeholder="config.placeholder"
+    :remote-method="remoteMethod"
+    @clear="list = []"
+  >
+    <el-option
+      v-for="(item, index) in list"
+      :key="item.id + index"
+      :label="item[config.labelKey]"
+      :value="item[config.valueKey]"
+    >
+    </el-option>
+  </el-select>
 </template>
 
 <script>
@@ -17,37 +36,67 @@ export default {
     config: Object,
     // config: {
     //   serveTarget: {}, // 远程搜索接口
-    //   autocomplateKey: "", //远程搜索接口参数名
+    //   autocompleteKey: "", //远程搜索接口参数名
+    //   labelKey: "", //接口返回数据label名
+    //   valueKey: "", //接口返回数据唯一值
     //   querykey: "", //查询接口参数名
     // },
   },
   data() {
     return {
       text: "",
+      list: [],
     };
   },
-  created() {
+  watch: {
-    console.log("params", this.params);
+    "config.echoId": {
+      handler(nval, oval) {
+        if (nval) {
+          console.log(nval);
+          this.remoteMethod(this.config.echoName);
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
   },
   methods: {
     // 远程搜索
-    querySearchAsync(queryString, cb) {
+    remoteMethod(query) {
-      if (queryString) {
+      if (query !== "") {
+        this.loading = true;
         let params = {};
-        params[this.config.autocompleteKey] = queryString;
+        params[this.config.autocompleteKey] = query;
         this.config.serveTarget(params).then((res) => {
           let timeInstance = setTimeout(() => {
+            this.loading = false;
             clearTimeout(timeInstance);
             if (res.data.length) {
-              cb(res.data);
+              this.list = res.data;
-            } else cb([]);
+            } else this.list = [];
           }, 1000 * Math.random());
         });
-      } else cb([]);
+      } else {
-    },
+        this.list = [];
-    selectAutocomplete(item) {
+      }
-      this.params[this.config.querykey] = item.id;
     },
+    // querySearchAsync(queryString, cb) {
+    //   if (queryString) {
+    //     let params = {};
+    //     params[this.config.autocompleteKey] = queryString;
+    //     this.config.serveTarget(params).then((res) => {
+    //       let timeInstance = setTimeout(() => {
+    //         clearTimeout(timeInstance);
+    //         if (res.data.length) {
+    //           cb(res.data);
+    //         } else cb([]);
+    //       }, 1000 * Math.random());
+    //     });
+    //   } else cb([]);
+    // },
+    // selectAutocomplete(item) {
+    //   this.params[this.config.querykey] = item.id;
+    // },
   },
 };
 </script>

src/views/product/components/add.vue

@@ -110,10 +110,13 @@ export default {
       refineryList: [],
       configAutocomplete: {
         serveTarget: refineryInfoServe.findByEntity,
-        autocomplateKey: "refineryName",
+        autocompleteKey: "refineryName",
-        valueKey: "refineryName",
+        labelKey: "refineryName",
+        valueKey: "id",
         placeholder: "炼厂名称",
         querykey: "refineryId",
+        echoId: "",
+        echoName: "",
       },
       productTypeList: [
         {
@@ -170,6 +173,8 @@ export default {
       if (id) {
         //回显
         this.form = JSON.parse(JSON.stringify(this.controlWindows.addInfo));
+        this.configAutocomplete.echoId = id;
+        this.configAutocomplete.echoName = this.form.refineryName;
         console.log("this.form", this.form.floorPrice);
       }
     },

src/views/product/components/create.vue

@@ -93,8 +93,9 @@ export default {
       refineryList: [],
       configAutocomplete: {
         serveTarget: refineryInfoServe.findByEntity,
-        autocomplateKey: "refineryName",
+        autocompleteKey: "refineryName",
-        valueKey: "refineryName",
+        labelKey: "refineryName",
+        valueKey: "id",
         placeholder: "炼厂名称",
         querykey: "refineryId",
       },

src/views/product/index.vue

@@ -224,8 +224,9 @@ export default {
       },
       configAutocomplete: {
         serveTarget: refineryInfoServe.findByEntity,
-        autocomplateKey: "refineryName",
+        autocompleteKey: "refineryName",
-        valueKey: "refineryName",
+        labelKey: "refineryName",
+        valueKey: "id",
         placeholder: "炼厂名称",
         querykey: "refineryId",
       },

src/views/refineryAccount/components/add.vue

@@ -70,8 +70,9 @@ export default {
       refineryList: [],
       configAutocomplete: {
         serveTarget: refineryInfoServe.findByEntity,
-        autocomplateKey: "refineryName",
+        autocompleteKey: "refineryName",
-        valueKey: "refineryName",
+        labelKey: "refineryName",
+        valueKey: "id",
         placeholder: "炼厂名称",
         querykey: "refineryId",
       },

src/views/refineryAccount/index.vue

@@ -162,8 +162,9 @@ export default {
       },
       configAutocomplete: {
         serveTarget: refineryInfoServe.findByEntity,
-        autocomplateKey: "refineryName",
+        autocompleteKey: "refineryName",
-        valueKey: "refineryName",
+        labelKey: "refineryName",
+        valueKey: "id",
         placeholder: "炼厂名称",
         querykey: "refineryId",
       },

src/views/refineryInfo/index.vue

@@ -189,8 +189,9 @@ export default {
       },
       configAutocomplete: {
         serveTarget: serve.findByEntity,
-        autocomplateKey: "refineryName",
+        autocompleteKey: "refineryName",
-        valueKey: "refineryName",
+        labelKey: "refineryName",
+        valueKey: "id",
         placeholder: "炼厂名称",
         querykey: "refineryId",
       },