更新

src/views/refineryAccount/index.vue

@@ -1,20 +1,18 @@
 <template>
   <div class="order">
     <div class="frame">
-      <el-select
+      <!-- <el-autocomplete
         class="mr20"
+        label
         v-model="parameter.params.id"
+        :fetch-suggestions="querySearchAsync"
+        value-key="refineryName"
+        value="id"
         placeholder="炼厂名称"
-        clearable
-      >
-        <el-option
-          v-for="item in refineryList"
-          :key="item.id"
-          :label="item.refineryName"
-          :value="item.id"
-        >
-        </el-option>
-      </el-select>
+      ></el-autocomplete> -->
+
+      <autocomplete :params="parameter.params" :config="configAutocomplete" />
+
       <el-select
         v-model="parameter.params.refineryType"
         placeholder="炼厂类型"
@@ -141,11 +139,18 @@ import serve from "api/refineryAccount.js";
 import add from "./components/add.vue";
 
 import pagination from "components/pagination/index.vue";
+import autocomplete from "components/autocomplete/index.vue";
 import generalDetails from "components/generalDetails/index.vue";
 
 import { refineryTypeEnum, refineryAccountTypeEnum } from "utils/dataType.js";
 
 export default {
+  components: {
+    add,
+    pagination,
+    autocomplete,
+    generalDetails,
+  },
   data() {
     return {
       refineryTypeEnum: refineryTypeEnum,
@@ -155,6 +160,13 @@ export default {
         addInfo: {},
         detail: false,
       },
+      configAutocomplete: {
+        serveTarget: refineryInfoServe.findByEntity,
+        autocomplateKey: "refineryName",
+        valueKey: "refineryName",
+        placeholder: "炼厂名称",
+        querykey: "refineryId",
+      },
       refineryList: [],
       tableHeight: 0,
       tableData: [],
@@ -183,11 +195,7 @@ export default {
       ],
     };
   },
-  components: {
-    add,
-    pagination,
-    generalDetails,
-  },
+
   mounted() {
     this.$nextTick(() => {
       this.heightHandle();
@@ -198,7 +206,6 @@ export default {
     );
   },
   created() {
-    this.findByEntity();
     this.getByPage();
   },
   methods: {
@@ -214,11 +221,26 @@ export default {
       });
     },
     //炼厂list
-    findByEntity() {
-      refineryInfoServe.findByEntity().then((res) => {
-        this.refineryList = res.data;
-      });
-    },
+    // findByEntity() {
+    //   refineryInfoServe.findByEntity().then((res) => {
+    //     this.refineryList = res.data;
+    //   });
+    // },
+    //远程搜索
+    // querySearchAsync(queryString, cb) {
+    //   if (queryString) {
+    //     refineryInfoServe
+    //       .findByEntity({ refineryName: queryString })
+    //       .then((res) => {
+    //         let timeInstance = setTimeout(() => {
+    //           clearTimeout(timeInstance);
+    //           if (res.data.length) {
+    //             cb(res.data);
+    //           } else cb([]);
+    //         }, 1000 * Math.random());
+    //       });
+    //   } else cb([]);
+    // },
     //新增
     addition() {
       this.controlWindows.addInfo.title = "账户新增";
@@ -276,6 +298,7 @@ export default {
       width: 183px;
       height: 40px;
     }
+    .el-autocomplete + .el-select,
     .el-input + .el-input,
     .el-input + .el-select,
     .el-select + .el-select,