Merge branch 'xiaozy_产品列表' of http://121.196.213.68:3000/xiaozhiyong/refinery-admin into lixuan

src/views/product/components/create.vue

@@ -25,14 +25,16 @@
           ></el-input> -->
         </el-form-item>
         <el-form-item label="炼厂名称" prop="refineryId">
-          <el-select v-model="form.refineryId" filterable reserve-keyword remote :remote-method="refineryData" 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" filterable reserve-keyword remote :remote-method="productData" placeholder="请选择产品类型">
@@ -85,17 +87,33 @@
 
 <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 {
       customList:[],
       form: {},
       refineryList: [],
+      configAutocomplete: {
+        serveTarget: refineryInfoServe.findByEntity,
+        autocomplateKey: "refineryName",
+        valueKey: "refineryName",
+        placeholder: "炼厂名称",
+        querykey: "refineryId",
+      },
       productTypeList: [
         {
           label: "0#柴",
@@ -119,20 +137,17 @@ export default {
           { required: true, message: "请输入产品名称", trigger: "blur" },
         ],
         refineryId: [
-          { required: true, message: "请选择炼厂", trigger: "blur" },
+          { required: true, validator: validatorRefineryId, trigger: "change" },
         ],
         enableMark: [
-          { required: true, message: "请选择启用状态", trigger: "blur" },
+          { required: true, message: "请选择启用状态", trigger: "change" },
         ],
         productType: [
-          { required: true, message: "请选择产品类型", trigger: "blur" },
+          { required: true, message: "请选择产品类型", trigger: "change" },
         ],
       },
     };
   },
-  created() {
-    // this.findByEntity();
-  },
   methods: {
     //搜索炼厂
     refineryData(value){
@@ -182,6 +197,21 @@ export default {
     //     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 = {};
@@ -197,7 +227,8 @@ export default {
   padding: 20px;
   .el-input,
   .el-select,
-  .el-textarea {
+  .el-textarea,
+  .el-autocomplete {
     width: 300px;
   }
 }