更新

src/views/product/index.vue

@@ -7,19 +7,19 @@
         placeholder="产品名称"
         clearable
       ></el-input>
-      <el-select
-        v-model="parameter.params.refineryId"
+
+      <autocomplete :params="parameter.params" :config="configAutocomplete" />
+
+      <!-- <el-autocomplete
+        v-model="parameter.params.refineryName"
+        :fetch-suggestions="querySearchAsync"
+        @select="selectAutocomplete"
+        value-key="refineryName"
         placeholder="炼厂名称"
         clearable
-      >
-        <el-option
-          v-for="item in refineryList"
-          :key="item.id"
-          :label="item.refineryName"
-          :value="item.id"
-        >
-        </el-option>
-      </el-select>
+        @clear="parameter.params.refineryId = ''"
+      ></el-autocomplete> -->
+
       <el-input
         v-model="parameter.params.belongLibrary"
         placeholder="所处炼厂库"
@@ -198,7 +198,7 @@
 
 <script>
 import serve from "api/product.js";
-import refineryServe from "api/refineryInfo.js";
+import refineryInfoServe from "api/refineryInfo.js";
 
 import add from "./components/add.vue";
 import create from "./components/create.vue";
@@ -206,6 +206,7 @@ import record from "./components/record.vue";
 import batch from "./components/batch.vue";
 import adjust from "./components/adjust.vue";
 
+import autocomplete from "components/autocomplete/index.vue";
 import pagination from "components/pagination/index.vue";
 import generalDetails from "components/generalDetails/index.vue";
 
@@ -221,6 +222,13 @@ export default {
         batch: false,
         adjust: false,
       },
+      configAutocomplete: {
+        serveTarget: refineryInfoServe.findByEntity,
+        autocomplateKey: "refineryName",
+        valueKey: "refineryName",
+        placeholder: "炼厂名称",
+        querykey: "refineryId",
+      },
       refineryList: [],
       multipleRowList: [],
       tableHeight: 0,
@@ -263,6 +271,7 @@ export default {
     adjust,
 
     pagination,
+    autocomplete,
     generalDetails,
   },
   mounted() {
@@ -275,7 +284,6 @@ export default {
     );
   },
   created() {
-    this.findByEntity();
     this.getByPage();
   },
   methods: {
@@ -294,12 +302,25 @@ export default {
         this.parameter.total = res.data.totalCount;
       });
     },
-    //炼厂list
-    findByEntity() {
-      refineryServe.findByEntity().then((res) => {
-        this.refineryList = res.data;
-      });
-    },
+    // 远程搜索
+    // querySearchAsync(queryString, cb) {
+    //   if (queryString) {
+    //     refineryServe
+    //       .findByEntity({ refineryName: queryString })
+    //       .then((res) => {
+    //         let timeInstance = setTimeout(() => {
+    //           clearTimeout(timeInstance);
+    //           if (res.data.length) {
+    //             console.log(res.data);
+    //             cb(res.data);
+    //           } else cb([]);
+    //         }, 1000 * Math.random());
+    //       });
+    //   } else cb([]);
+    // },
+    // selectAutocomplete(item) {
+    //   this.parameter.params.refineryId = item.id;
+    // },
     //新增
     addition() {
       this.controlWindows.addInfo.title = "产品新增";
@@ -399,6 +420,9 @@ export default {
       width: 183px;
       height: 40px;
     }
+    .el-autocomplete + .el-input,
+    .el-input + .el-autocomplete,
+    .el-autocomplete + .el-select,
     .el-input + .el-input,
     .el-input + .el-select,
     .el-select + .el-select,
@@ -435,10 +459,6 @@ export default {
       margin-bottom: 20px;
       border-radius: 10px 10px 0px 0px;
     }
-    // .el-link,
-    // .el-dropdown {
-    //   margin-right: 10px;
-    // }
 
     .el-dropdown-link {
       margin-right: 10px;