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

src/views/stock/stocknote/Edit.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <el-dialog
       :close-on-click-modal="false"
       :title="title"
@@ -23,14 +24,20 @@
         </el-form-item>
 
         <el-form-item label="商品">
-        <el-select v-model="params.productId" placeholder="请选择商品"  @change="changeProductValue" clearable>
+          <!--        <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>
+                    </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">
@@ -112,6 +119,67 @@
       </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();
       }
     },
     // 获取商品
@@ -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>