更新

src/views/refineryAccount/components/add.vue

@@ -27,20 +27,16 @@
           </el-select>
         </el-form-item>
         <el-form-item label="炼厂名称" prop="refineryId">
-          <el-select
-            class="mr20"
+          <!-- <el-autocomplete
+            label
             v-model="form.refineryId"
+            :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="form" :config="configAutocomplete" />
         </el-form-item>
       </el-form>
     </div>
@@ -54,15 +50,31 @@
 <script>
 import refineryInfoServe from "api/refineryInfo.js";
 import serve from "api/refineryAccount.js";
+
+import autocomplete from "components/autocomplete/index.vue";
 export default {
+  components: {
+    autocomplete,
+  },
   props: {
     controlWindows: Object,
     refineryAccountTypeEnum: Array,
   },
   data() {
+    let validatorRefineryId = (rule, value, callback) => {
+      if (this.form.refineryId) callback();
+      else callback("请选择炼厂");
+    };
     return {
       form: {},
       refineryList: [],
+      configAutocomplete: {
+        serveTarget: refineryInfoServe.findByEntity,
+        autocomplateKey: "refineryName",
+        valueKey: "refineryName",
+        placeholder: "炼厂名称",
+        querykey: "refineryId",
+      },
       rules: {
         accountName: [
           { required: true, message: "请输入账户名称", trigger: "blur" },
@@ -71,15 +83,13 @@ export default {
           { required: true, message: "请输入账户名称", trigger: "blur" },
         ],
         refineryId: [
-          { required: true, message: "请选择炼厂", trigger: "change" },
+          { required: true, validator: validatorRefineryId, trigger: "change" },
         ],
       },
     };
   },
   methods: {
-    openDrawer() {
-      this.findByEntity();
-    },
+    openDrawer() {},
     submit() {
       this.$refs["form"].validate((valid) => {
         if (valid) {
@@ -97,16 +107,31 @@ export default {
       if (id) return serve.update(form);
       else return serve.save(form);
     },
-    //炼厂list
-    findByEntity() {
-      refineryInfoServe.findByEntity().then((res) => {
-        this.refineryList = res.data;
-        let { id } = this.controlWindows.addInfo;
-        if (id) {
-          this.form = JSON.parse(JSON.stringify(this.controlWindows.addInfo));
-        }
-      });
-    },
+    // //炼厂list
+    // findByEntity() {
+    //   refineryInfoServe.findByEntity().then((res) => {
+    //     this.refineryList = res.data;
+    //     let { id } = this.controlWindows.addInfo;
+    //     if (id) {
+    //       this.form = JSON.parse(JSON.stringify(this.controlWindows.addInfo));
+    //     }
+    //   });
+    // },
+    //远程搜索
+    // 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([]);
+    // },
     closeWindow() {
       this.$emit("closeWindow");
       this.form = {};
@@ -125,7 +150,8 @@ export default {
   padding: 20px;
   .el-input,
   .el-select,
-  .el-textarea {
+  .el-textarea,
+  .el-autocomplete {
     width: 300px;
   }
 }