更新

src/views/product/components/create.vue

@@ -17,14 +17,16 @@
           ></el-input>
         </el-form-item>
         <el-form-item label="炼厂名称" prop="refineryId">
-          <el-select v-model="form.refineryId" placeholder="请选择炼厂">
-            <el-option
-              v-for="(item, index) in refineryList"
-              :key="index"
-              :label="item.refineryName"
-              :value="item.id"
-            ></el-option>
-          </el-select>
+          <!-- <el-autocomplete
+            label
+            v-model="form.refineryId"
+            :fetch-suggestions="querySearchAsync"
+            value-key="refineryName"
+            value="id"
+            placeholder="炼厂名称"
+          ></el-autocomplete> -->
+
+          <autocomplete :params="form" :config="configAutocomplete" />
         </el-form-item>
         <el-form-item label="产品类型" prop="productType">
           <el-select v-model="form.productType" placeholder="请选择产品类型">
@@ -70,16 +72,32 @@
 
 <script>
 import serve from "api/product.js";
-import refineryServe from "api/refineryInfo.js";
+import refineryInfoServe from "api/refineryInfo.js";
+
+import autocomplete from "components/autocomplete/index.vue";
 export default {
+  components: {
+    autocomplete,
+  },
   props: {
     controlWindows: Object,
     // refineryTypeEnum: 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",
+      },
       productTypeList: [
         {
           label: "0#柴",
@@ -103,7 +121,7 @@ export default {
           { required: true, message: "请输入产品名称", trigger: "blur" },
         ],
         refineryId: [
-          { required: true, message: "请选择炼厂", trigger: "change" },
+          { required: true, validator: validatorRefineryId, trigger: "change" },
         ],
         enableMark: [
           { required: true, message: "请选择启用状态", trigger: "change" },
@@ -114,9 +132,6 @@ export default {
       },
     };
   },
-  created() {
-    this.findByEntity();
-  },
   methods: {
     openDrawer() {},
     submit() {
@@ -137,11 +152,26 @@ export default {
       else return serve.save(form);
     },
     //炼厂list
-    findByEntity() {
-      refineryServe.findByEntity().then((res) => {
-        this.refineryList = res.data;
-      });
-    },
+    // 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) {
+    //             cb(res.data);
+    //           } else cb([]);
+    //         }, 1000 * Math.random());
+    //       });
+    //   } else cb([]);
+    // },
     closeWindow() {
       this.$emit("closeWindow");
       this.form = {};
@@ -157,7 +187,8 @@ export default {
   padding: 20px;
   .el-input,
   .el-select,
-  .el-textarea {
+  .el-textarea,
+  .el-autocomplete {
     width: 300px;
   }
 }