商家端前端库存管理商品选择新增商品弹框列表内容显示、商品搜索选择业务功能

src/views/stock/stocknote/Edit.vue

@@ -1,18 +1,19 @@
 <template>
-  <el-dialog
-    :close-on-click-modal="false"
-    :title="title"
-    :type="type"
-    :visible.sync="isVisible"
-    :modal-append-to-body="false"
-    :center="true"
-    width="80%"
-    top="50px"
-    class="dialog-wrap"
-  >
-  <el-form ref="ruleForm" :model="params" label-width="150px">
-      <el-form-item label="仓库">
-        <el-select v-model="params.storehouseId" placeholder="请选择仓库" @change="changeStorehouseValue" clearable>
+  <div>
+    <el-dialog
+      :close-on-click-modal="false"
+      :title="title"
+      :type="type"
+      :visible.sync="isVisible"
+      :modal-append-to-body="false"
+      :center="true"
+      width="80%"
+      top="50px"
+      class="dialog-wrap"
+    >
+      <el-form ref="ruleForm" :model="params" label-width="150px">
+        <el-form-item label="仓库">
+          <el-select v-model="params.storehouseId" placeholder="请选择仓库" @change="changeStorehouseValue" clearable>
             <el-option
               v-for="(item,index) in storehouseList"
               :key="index"
@@ -20,21 +21,27 @@
               :value="item.storehouseId"
             />
           </el-select>
-      </el-form-item>
+        </el-form-item>
 
-      <el-form-item label="商品">
-        <el-select v-model="params.productId" placeholder="请选择商品"  @change="changeProductValue" clearable>
-            <el-option
-              v-for="(item,index) in productList"
-              :key="index"
-              :label="item.productName"
-              :value="item.productId"
-            />
-          </el-select>
-      </el-form-item>
+        <el-form-item label="商品">
+          <!--        <el-select v-model="params.productId" placeholder="请选择商品"  @change="changeProductValue" filterable clearable>
+                      <el-option
+                        v-for="(item,index) in productList"
+                        :key="index"
+                        :label="item.productName"
+                        :value="item.productId"
+                      />
+                    </el-select>-->
+          <div>
+            <div class="prod_search_column" @click="onSearchProd()">
+              <span class="prod_search_txt">{{params.productName}}</span>
+              <img src="../../../assets/images/search.png" style="width: 16px;height: 16px">
+            </div>
+          </div>
+        </el-form-item>
 
-      <el-form-item label="SKU" v-if="isSkuVisible == 1">
-        <el-select v-model="params.skuId" placeholder="请选择规格" clearable>
+        <el-form-item label="SKU" v-if="isSkuVisible == 1">
+          <el-select v-model="params.skuId" placeholder="请选择规格" clearable>
             <el-option
               v-for="(item,index) in skuList"
               :key="index"
@@ -42,42 +49,42 @@
               :value="item.skuId"
             />
           </el-select>
-      </el-form-item>
-
-      <el-form-item label="单据类型">
-        <el-radio-group v-model="params.billTypeId">
-          <el-radio :disabled="isDisabled" :label="1">采购入库</el-radio>
-          <el-radio :disabled="isDisabled" :label="4">报废出库</el-radio>
-        </el-radio-group>
-      </el-form-item>
-      
-      <el-form-item label="数量">
-        <div class="form-item-row">
-          <div class="el-row" style="margin-bottom: 10px;">
-            <el-input
-              v-model="params.quantity"
-              maxlength="20"
-              :readonly="isDisabled"
-              onblur="value=value.replace(/(^\s*)|(\s*$)/g, '')"
-            />
+        </el-form-item>
+
+        <el-form-item label="单据类型">
+          <el-radio-group v-model="params.billTypeId">
+            <el-radio :disabled="isDisabled" :label="1">采购入库</el-radio>
+            <el-radio :disabled="isDisabled" :label="4">报废出库</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item label="数量">
+          <div class="form-item-row">
+            <div class="el-row" style="margin-bottom: 10px;">
+              <el-input
+                v-model="params.quantity"
+                maxlength="20"
+                :readonly="isDisabled"
+                onblur="value=value.replace(/(^\s*)|(\s*$)/g, '')"
+              />
+            </div>
           </div>
-        </div>
-      </el-form-item>
-
-      <el-form-item label="价格">
-        <div class="form-item-row">
-          <div class="el-row" style="margin-bottom: 10px;">
-            <el-input
-              v-model="params.price"
-              maxlength="20"
-              :readonly="isDisabled"
-              onblur="value=value.replace(/(^\s*)|(\s*$)/g, '')"
-            />
+        </el-form-item>
+
+        <el-form-item label="价格">
+          <div class="form-item-row">
+            <div class="el-row" style="margin-bottom: 10px;">
+              <el-input
+                v-model="params.price"
+                maxlength="20"
+                :readonly="isDisabled"
+                onblur="value=value.replace(/(^\s*)|(\s*$)/g, '')"
+              />
+            </div>
           </div>
-        </div>
-      </el-form-item>
+        </el-form-item>
 
-   </el-form>
+      </el-form>
       <!-- <el-table-column label="商品">
         <template slot-scope="scope">
           <el-select v-model="scope.row.productId" placeholder="请选择商品" clearable>
@@ -106,12 +113,73 @@
 
        -->
 
-    <div slot="footer" class="btn-wrap">
-      <el-button type="primary" @click="onSubmit">{{ $t('common.sure') }}</el-button>
-      <el-button @click="isVisible = false">{{ $t('common.cancel') }}</el-button>
-    </div>
-    
-  </el-dialog>
+      <div slot="footer" class="btn-wrap">
+        <el-button type="primary" @click="onSubmit">{{ $t('common.sure') }}</el-button>
+        <el-button @click="isVisible = false">{{ $t('common.cancel') }}</el-button>
+      </div>
+
+    </el-dialog>
+
+    <el-dialog
+      title="选择商品"
+      :visible.sync="prodSelectDialog"
+      width="70%"
+      top="50px"
+      class="group-dialog"
+      :close-on-click-modal="false"
+      :modal-append-to-body="false"
+      :modal="false"
+      @close="onProdDialogClose"
+    >
+      <!-- 表格 -->
+      <div style="margin-bottom: 15px">
+        <el-input v-model="prodSearch" :placeholder="$t('product.productname_hint')" style="width: 360px" clearable/>
+        <el-button type="primary" style="margin-left: 8px" @click="searchProd">{{$t('common.query')}}</el-button>
+      </div>
+      <div class="tableBox">
+        <el-table
+          ref="multipleTable"
+          :data="productList"
+          border
+          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
+          tooltip-effect="dark"
+          style="width: 100%"
+          max-height="600"
+        >
+          <el-table-column label="产品主图" width="220" align="center">
+            <template slot-scope="scope">
+              <img height="80" width="80" :src="scope.row.productImage" alt srcset>
+            </template>
+          </el-table-column>
+          <el-table-column prop="productName" label="产品名称" width="220" />
+          <!--          <el-table-column prop="discountPrice" label="售价（元）" show-overflow-tooltip />-->
+<!--          <el-table-column prop="originalPrice" label="原价（元）" show-overflow-tooltip />-->
+          <el-table-column prop="stockNumber" label="库存（件）" show-overflow-tooltip />
+          <el-table-column prop="shopName" label="所属店铺" show-overflow-tooltip />
+          <el-table-column label="操作" width="90" align="center" fixed="right">
+            <template slot-scope="scope">
+              <el-button type="primary" plain @click="selectProd(scope.row)">选择</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+<!--        <div class="fenye">
+          <el-pagination
+            :current-page="proOption.page"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="proOption.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
+        </div>-->
+      </div>
+      <div slot="footer" class="btn-wrap">
+        <el-button @click="prodSelectDialog = false">{{ $t('common.cancel') }}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+
 </template>
 <script>
 
@@ -149,7 +217,14 @@ export default {
       productList:[],//商品列表
       skuList:[],//商品列表
       isSkuVisible : 1,
-      checkId: null
+      checkId: null,
+      prodSelectDialog: false,
+      proOption: {
+        page: 1,
+        pageSize: 10
+      },
+      prodSearch: undefined,
+      total: 0,
     }
   },
   computed: {
@@ -185,7 +260,7 @@ export default {
       if(this.storehouseList && this.storehouseList.length > 0){
         this.params.storehouseId = this.storehouseList[0].storehouseId
         this.params.storehouseName = this.storehouseList[0].storehouseName
-        this.getProductList();
+        //this.getProductList();
       }
     },
     // 获取商品
@@ -212,14 +287,14 @@ export default {
         }
       }
     },
-    
+
     async changeStorehouseValue(){
       this.getProductList();
     },
     async changeProductValue(){
       this.getSkuList();
     },
-    
+
     close() {
       this.$emit('close')
     },
@@ -240,7 +315,7 @@ export default {
       if(this.storehouseList && this.storehouseList.length > 0){
         this.params.storehouseId = this.storehouseList[0].storehouseId
         this.params.storehouseName = this.storehouseList[0].storehouseName
-        this.getProductList();
+        //this.getProductList();
       }
     },
     // 查看详情
@@ -293,6 +368,51 @@ export default {
         this.checkId = val['checkId']
         this.getDetails()
       }
+    },
+
+    onSearchProd() {
+      this.prodSelectDialog = true
+      this.searchProd()
+    },
+
+    handleSizeChange(val) {
+      this.proOption.pageSize = val
+      this.getProList()
+    },
+    handleCurrentChange(val) {
+      this.proOption.page = val
+      this.getProList()
+    },
+
+    async getProList() {
+      const res = await getClassifyGetList(this.proOption)
+      this.productList = res.data
+     /* if(this.productList && this.productList.length > 0){
+        this.params.productId = this.productList[0].productId
+        this.params.productName = this.productList[0].productName
+        this.getSkuList();
+      }*/
+    },
+
+    searchProd() {
+      this.proOption.page = 1
+      this.proOption.pageSize = 10
+      this.proOption.search = this.prodSearch
+      this.proOption.storehouseId = this.params.storehouseId
+      this.getProList()
+    },
+
+    onProdDialogClose() {
+      this.productList = []
+      this.prodSearch = undefined
+      this.proOption.searchContent = undefined
+    },
+
+    selectProd(prod) {
+      this.params.productId = prod.productId
+      this.params.productName = prod.productName
+      this.getSkuList();
+      this.prodSelectDialog = false
     }
   }
 }
@@ -333,4 +453,29 @@ export default {
   }
 }
 
+.prod_search_column{
+  width: 220px;
+  display: flex;
+  align-items: center;
+  border: 1px solid lightgray;
+  border-radius: 4px;
+  padding: 2px 3px 2px 5px;
+  height: 40px;
+  cursor: pointer;
+}
+
+.prod_search_column:active{
+  border: 2px solid #108a66;
+  border-radius: 4px;
+}
+
+.prod_search_txt{
+  width: 200px;
+  text-align: left;
+  overflow: hidden;
+  text-overflow:ellipsis;
+  white-space: nowrap;
+  padding-left: 10px;
+}
+
 </style>