管理后台-存酒管理

htmldev/manage/src/views/business/saveWine/details.vue

@@ -9,12 +9,30 @@
                :model="form"
                :rules="formRules"
                label-width="120px">
-        <el-form-item prop="storage_name"
-                      :rules="formRules.required"
-                      label="酒名：">
-          <el-input v-model="form.storage_name"
-                    placeholder="请输入酒名"
-                    clearable></el-input>
+        <!--        <el-form-item prop="storage_name"-->
+        <!--                      :rules="formRules.required"-->
+        <!--                      label="酒名：">-->
+        <!--          <el-input v-model="form.storage_name"-->
+        <!--                    placeholder="请输入酒名"-->
+        <!--                    clearable></el-input>-->
+        <!--        </el-form-item>-->
+        <el-form-item prop="storage_name" :rules="formRules.required" label="酒名：">
+          <el-select
+            v-model="form.storage_name"
+            filterable
+            remote
+            reserve-keyword
+            :remote-method="myFilterOfRule"
+            @visible-change="getDropdownOfRule($event)"
+            :loading="loading">
+            <el-option
+              v-for="item in getMyFilterGoodsInfo"
+              :key="item.index"
+              :label="item.storage_name"
+              :value="item.id">
+              <p>商品名称</p>
+            </el-option>
+          </el-select>
         </el-form-item>
         <el-form-item prop="storage_img_url"
                       :rules="formRules.uploadImgs"
@@ -104,7 +122,10 @@ export default {
         storage_remark: '' // 存酒备注
       },
       fileList: [],
-      booLock: false
+      booLock: false,
+      getMySearchInfo: '',
+      getMyFilterGoodsInfo: [],
+      loading: false
     }
   },
   methods: {
@@ -153,7 +174,39 @@ export default {
           }
         }
       })
-    }
+    },
+    getDropdownOfRule (e) {
+      if (e === true) {
+        this.myFilterOfRule(this.getMySearchInfo)
+      } else {
+        const _result = this.getMyFilterGoodsInfo.filter(item => item.id === this.form.id || item.storage_name === this.getMySearchInfo)
+        if (_result.length) {
+          this.getMySearchInfo = _result[0].id
+          this.form.storage_name = _result[0].storage_name
+        } else {
+          this.getMySearchInfo = ''
+          this.form.id = ''
+        }
+        this.getMyFilterGoodsInfo = []
+      }
+    },
+    myFilterOfRule (query) {
+      this.getMySearchInfo = query
+      if (query !== '') {
+        this.loading = true
+        this.$set(this.form, 'storage_name', query)
+        setTimeout(async () => {
+          this.loading = false
+          const data = await this.$fetch('', {
+            storage_name: '商品名称'
+          })
+
+          this.getMyFilterGoodsInfo = res.data
+        }, 200)
+      } else {
+        this.getMyFilterGoodsInfo = []
+      }
+    },
   },
   mounted () {
     if (this.exData.id) {