优化商品列表数据展示

src/settings.js

@@ -2,7 +2,7 @@ module.exports = {
   /**
    * @description 网站标题
    */
-  title: '管理后台',
+  title: "管理后台",
   /**
    * @description 是否显示 tagsView
    */
@@ -22,7 +22,7 @@ module.exports = {
   /**
    * @description token key
    */
-  TokenKey: 'ELADMIN-TOEKN',
+  TokenKey: "ELADMIN-TOEKN",
   /**
    * @description 请求超时时间，毫秒（默认2分钟）
    */
@@ -38,36 +38,37 @@ module.exports = {
   /**
    * 底部文字，支持html语法
    */
-  footerTxt: '© 2018-2024 超掌柜科技 <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License 2.0</a>',
+  footerTxt:
+    '© 2018-2024 超掌柜科技 <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License 2.0</a>',
   /**
    * 备案号
    */
-  caseNumber: '陕ICP备2022008069号',
+  caseNumber: "陕ICP备2022008069号",
   typeEnum: [
     {
-      label: '计量商品',
+      label: "单规格",
-      intro: '单价购买',
+      intro: "单价购买",
-      typeEnum: 'normal'
+      typeEnum: "normal"
     },
     {
-      label: '多规格',
+      label: "多规格",
-      intro: '多种不同规格',
+      intro: "多种不同规格",
-      typeEnum: 'sku'
+      typeEnum: "sku"
-    },
-    {
-      label: '套餐商品',
-      intro: '选职多种组合',
-      typeEnum: 'group'
-    },
-    {
-      label: '称重商品',
-      intro: '按重量售卖',
-      typeEnum: 'weight'
-    },
-    {
-      label: '时价商品',
-      intro: '收银端可更改价格',
-      typeEnum: 'currentPrice'
     }
+    // {
+    //   label: '套餐商品',
+    //   intro: '选职多种组合',
+    //   typeEnum: 'group'
+    // },
+    // {
+    //   label: '称重商品',
+    //   intro: '按重量售卖',
+    //   typeEnum: 'weight'
+    // },
+    // {
+    //   label: '时价商品',
+    //   intro: '收银端可更改价格',
+    //   typeEnum: 'currentPrice'
+    // }
   ]
-}
+};

src/views/product/components/stockHistory.vue

@@ -42,6 +42,12 @@
 import dayjs from 'dayjs'
 import { tbProductStockDetailStock } from '@/api/shop.js'
 export default {
+    props: {
+        query: {
+            type: Object,
+            default: {}
+        }
+    },
     data() {
         return {
             dayjs,
@@ -77,7 +83,12 @@ export default {
                     page: this.tableData.page,
                     size: this.tableData.size,
                     shopId: localStorage.getItem('shopId'),
-                    column: this.key
+                    column: this.key,
+                    productName: this.query.name,
+                    categoryId: this.query.categoryId,
+                    type: this.query.typeEnum,
+                    startTime: this.query.createdAt[0] || '',
+                    endTime: this.query.createdAt[1] || '',
                 })
                 this.tableData.loading = false
                 this.tableData.data = res.content

src/views/product/index.vue

@@ -1,32 +1,22 @@
 <template>
   <div class="app-container">
     <div class="head-container">
-      <el-row :gutter="20">
+      <div class="flex">
-        <el-col :span="3">
+        <el-input v-model="query.name" size="small" clearable placeholder="请输入商品名称" @keyup.enter.native="getTableData"
-          <el-input v-model="query.name" size="small" clearable placeholder="请输入商品名称" style="width: 100%;"
+          style="width: 200px;" />
-            class="filter-item" @keyup.enter.native="getTableData" />
+        <el-select v-model="query.categoryId" placeholder="请选择商品分类">
-        </el-col>
-        <el-col :span="3">
-          <el-select v-model="query.categoryId" placeholder="请选择商品分类" style="width: 100%;">
           <el-option :label="item.name" :value="item.id" v-for="item in categorys" :key="item.id" />
         </el-select>
-        </el-col>
+        <el-select v-model="query.typeEnum" placeholder="请选择商品规格">
-        <el-col :span="3">
-          <el-select v-model="query.typeEnum" placeholder="请选择商品规格" style="width: 100%;">
           <el-option :label="item.label" :value="item.typeEnum" v-for="item in typeEnums" :key="item.typeEnum" />
         </el-select>
-        </el-col>
-        <el-col :span="6">
         <el-date-picker v-model="query.createdAt" type="daterange" range-separator="至" start-placeholder="开始日期"
           end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss">
         </el-date-picker>
-        </el-col>
-        <el-col :span="6">
         <el-button type="primary" @click="queryHandle">查询</el-button>
         <el-button @click="resetHandle">重置</el-button>
         <el-button @click="showStockWarningHandle">库存预警：{{ warnLine }}</el-button>
-        </el-col>
+      </div>
-      </el-row>
     </div>
     <div class="head-container">
       <div class="header_wrap">
@@ -149,6 +139,7 @@
               <div v-if="scope.row.conInfos && scope.row.conInfos.length">
                 <el-button type="text" @click="showBindCons(scope.row)">
                   {{ scope.row.conInfos | conInfosFilter }}
+                  <i class="el-icon-edit"></i>
                 </el-button>
               </div>
               <el-button v-else type="text" @click="showBindCons(scope.row)">
@@ -216,7 +207,7 @@
     <!-- 绑定耗材 -->
     <BindCons ref="bindCons" @refundChange="refundChange" />
     <!-- 商品库存记录 -->
-    <StockHistory ref="stockHistory" />
+    <StockHistory ref="stockHistory" :query="query" />
     <!-- 编辑售价、库存 -->
     <el-dialog :title="editorEumn[editorForm.key]" :visible.sync="editorVisable" :show-close="false" width="300px">
       <el-form :model="editorForm">
@@ -430,6 +421,7 @@ export default {
     queryHandle() {
       localStorage.setItem('shopIndexQuery', JSON.stringify(this.query))
       this.getTableData()
+      this.tbProductStockDetailStockCount()
     },
     //表格拖拽
     tableDrag() {
@@ -474,9 +466,11 @@ export default {
       this.query.categoryId = ''
       this.query.typeEnum = ''
       this.query.productId = ''
+      this.query.createdAt = []
       this.tableData.page = 0
       localStorage.setItem('shopIndexQuery', JSON.stringify(this.query))
       this.getTableData()
+      this.tbProductStockDetailStockCount()
     },
     // 分页回调
     paginationChange(e) {
@@ -561,6 +555,13 @@ export default {
   justify-content: space-between;
 }
 
+.flex {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
 .data_wrap {
   display: flex;
   justify-content: space-between;