优化商品列表

src/App.vue

@@ -131,4 +131,13 @@ export default {
     }
   }
 }
+
+.image-slot {
+  width: 100%;
+  height: 100%;
+  background-color: #efefef;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 </style>

src/views/product/components/stockHistory.vue

@@ -2,39 +2,180 @@
 <template>
     <el-dialog width="80%" :title="`${keysList[key]}统计`" :visible.sync="dialogVisible" @close="reset">
         <div class="head-container">
-            <el-table :data="tableData.data" v-loading="tableData.loading" height="400px">
+            <el-table ref="table" :data="tableData.data" v-loading="tableData.loading" height="400px"
-                <el-table-column label="商品名称/规格名称" prop="productName"></el-table-column>
+                v-if="dialogVisible">
-                <el-table-column label="变动后库存">
+                <!-- 销量统计 -->
-                    <template v-slot="scope">
+                <template v-if="key == 'saleNumber'">
-                        {{ scope.row.leftNumber }}
+                    <el-table-column label="商品名称/规格名称" prop="productName"></el-table-column>
-                    </template>
+                    <el-table-column label="原库存" prop="leftNumber">
-                </el-table-column>
+                        <template v-slot="scope">
-                <el-table-column label="原有库存" prop="">
+                            {{ `${scope.row.leftNumber}${scope.row.unitName}` }}
-                    <template v-slot="scope">
+                        </template>
-                        {{ scope.row.leftNumber + scope.row.stockNumber }}
+                    </el-table-column>
-                    </template>
+                    <el-table-column label="变动后库存">
-                </el-table-column>
+                        <template v-slot="scope">
-                <el-table-column label="订单编号" prop="orderNo">
+                            {{ scope.row.leftNumber + scope.row.stockNumber }}
-                    <template v-slot="scope">
+                        </template>
-                        <router-link :to="{ path: '/order_manage/order_list', query: { orderNo: scope.row.orderNo } }">
+                    </el-table-column>
-                            <el-link type="primary">{{ scope.row.orderNo }}</el-link>
+                    <el-table-column label="销量" prop="saleNumber"></el-table-column>
-                        </router-link>
+                    <el-table-column label="订单编号" prop="orderNo">
-                    </template>
+                        <template v-slot="scope">
-                </el-table-column>
+                            <router-link
-                <el-table-column label="操作描述" prop="type"></el-table-column>
+                                :to="{ path: '/order_manage/order_list', query: { orderNo: scope.row.orderNo } }">
-                <el-table-column :label="`${keysList[key]}`" prop="">
+                                <el-link type="primary">{{ scope.row.orderNo }}</el-link>
-                    <template v-slot="scope">
+                            </router-link>
-                        {{ scope.row.stockNumber }}
+                        </template>
-                    </template>
+                    </el-table-column>
-                </el-table-column>
+                    <el-table-column label="操作时间" prop="updatedAt">
-                <!-- <el-table-column label="报损" prop=""></el-table-column> -->
+                        <template v-slot="scope">
-                <el-table-column label="操作人" prop="operator"></el-table-column>
+                            {{ dayjs(scope.row.updatedAt).format('YYYY-MM-DD HH:mm:ss') }}
-                <el-table-column label="备注" prop="remark"></el-table-column>
+                        </template>
-                <el-table-column label="操作时间" prop="updatedAt">
+                    </el-table-column>
-                    <template v-slot="scope">
+                </template>
-                        {{ dayjs(scope.row.updatedAt).format('YYYY-MM-DD HH:mm:ss') }}
+                <!-- 减少数量统计 -->
-                    </template>
+                <template v-if="key == 'subCountNumber'">
-                </el-table-column>
+                    <el-table-column label="商品名称/规格名称" prop="productName"></el-table-column>
+                    <el-table-column label="变动后库存">
+                        <template v-slot="scope">
+                            {{ `${scope.row.leftNumber + scope.row.stockNumber}${scope.row.unitName}` }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="原有库存" prop="leftNumber">
+                        <template v-slot="scope">
+                            {{ `${scope.row.leftNumber}` }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="手动减少" prop="subNumber"></el-table-column>
+                    <el-table-column label="销售量" prop="saleNumber"></el-table-column>
+                    <el-table-column label="报损" prop="lossNumber"></el-table-column>
+                    <el-table-column label="操作人" prop="operator"></el-table-column>
+                    <el-table-column label="备注" prop="remark"></el-table-column>
+                    <el-table-column label="操作时间" prop="updatedAt">
+                        <template v-slot="scope">
+                            {{ dayjs(scope.row.updatedAt).format('YYYY-MM-DD HH:mm:ss') }}
+                        </template>
+                    </el-table-column>
+                </template>
+                <!-- 手动减少统计 -->
+                <template v-if="key == 'subNumber'">
+                    <el-table-column label="商品名称/规格名称" prop="productName"></el-table-column>
+                    <el-table-column label="变动后库存">
+                        <template v-slot="scope">
+                            {{ `${scope.row.leftNumber + scope.row.stockNumber}${scope.row.unitName}` }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="原有库存" prop="leftNumber">
+                        <template v-slot="scope">
+                            {{ `${scope.row.leftNumber}` }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="手动减少" prop="subNumber"></el-table-column>
+                    <el-table-column label="操作人" prop="operator"></el-table-column>
+                    <el-table-column label="备注" prop="remark"></el-table-column>
+                    <el-table-column label="操作时间" prop="updatedAt">
+                        <template v-slot="scope">
+                            {{ dayjs(scope.row.updatedAt).format('YYYY-MM-DD HH:mm:ss') }}
+                        </template>
+                    </el-table-column>
+                </template>
+                <!-- 报损统计 -->
+                <template v-if="key == 'lossNumber'">
+                    <el-table-column label="商品名称/规格名称" prop="productName"></el-table-column>
+                    <el-table-column label="原库存" prop="leftNumber">
+                        <template v-slot="scope">
+                            {{ `${scope.row.leftNumber}${scope.row.unitName}` }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="变动后库存">
+                        <template v-slot="scope">
+                            {{ `${scope.row.leftNumber + scope.row.stockNumber}` }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="报损数量" prop="lossNumber"></el-table-column>
+                    <el-table-column label="报损人" prop="operator"></el-table-column>
+                    <el-table-column label="图片" prop="coverImg">
+                        <template v-slot="scope">
+                            <el-image :src="scope.row.coverImg" style="width: 40px;height: 40px;">
+                                <div slot="error" class="image-slot">
+                                    <i class="el-icon-picture-outline"></i>
+                                </div>
+                            </el-image>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="备注" prop="remark"></el-table-column>
+                    <el-table-column label="操作时间" prop="updatedAt">
+                        <template v-slot="scope">
+                            {{ dayjs(scope.row.updatedAt).format('YYYY-MM-DD HH:mm:ss') }}
+                        </template>
+                    </el-table-column>
+                </template>
+                <!-- 增加数量统计 -->
+                <template v-if="key == 'addCountNumber'">
+                    <el-table-column label="商品名称/规格名称" prop="productName"></el-table-column>
+                    <el-table-column label="变动后库存">
+                        <template v-slot="scope">
+                            {{ `${scope.row.leftNumber + scope.row.stockNumber}${scope.row.unitName}` }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="原库存" prop="leftNumber">
+                        <template v-slot="scope">
+                            {{ `${scope.row.leftNumber}` }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="手动增加" prop="addNumber"></el-table-column>
+                    <el-table-column label="退货" prop="refundNumber"></el-table-column>
+                    <el-table-column label="操作人" prop="operator"></el-table-column>
+                    <el-table-column label="备注" prop="remark"></el-table-column>
+                    <el-table-column label="操作时间" prop="updatedAt">
+                        <template v-slot="scope">
+                            {{ dayjs(scope.row.updatedAt).format('YYYY-MM-DD HH:mm:ss') }}
+                        </template>
+                    </el-table-column>
+                </template>
+                <!-- 手动增加统计 -->
+                <template v-if="key == 'addNumber'">
+                    <el-table-column label="商品名称/规格名称" prop="productName"></el-table-column>
+                    <el-table-column label="变动后库存">
+                        <template v-slot="scope">
+                            {{ `${scope.row.leftNumber + scope.row.stockNumber}${scope.row.unitName}` }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="原库存" prop="leftNumber">
+                        <template v-slot="scope">
+                            {{ `${scope.row.leftNumber}` }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="手动增加" prop="addNumber"></el-table-column>
+                    <el-table-column label="操作人" prop="operator"></el-table-column>
+                    <el-table-column label="备注" prop="remark"></el-table-column>
+                    <el-table-column label="操作时间" prop="updatedAt">
+                        <template v-slot="scope">
+                            {{ dayjs(scope.row.updatedAt).format('YYYY-MM-DD HH:mm:ss') }}
+                        </template>
+                    </el-table-column>
+                </template>
+                <!-- 退货统计 -->
+                <template v-if="key == 'refundNumber'">
+                    <el-table-column label="商品名称/规格名称" prop="productName"></el-table-column>
+                    <el-table-column label="变动后库存">
+                        <template v-slot="scope">
+                            {{ `${scope.row.leftNumber + scope.row.stockNumber}${scope.row.unitName}` }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="原库存" prop="leftNumber">
+                        <template v-slot="scope">
+                            {{ `${scope.row.leftNumber}` }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="退货" prop="refundNumber"></el-table-column>
+                    <el-table-column label="操作人" prop="operator"></el-table-column>
+                    <el-table-column label="备注" prop="remark"></el-table-column>
+                    <el-table-column label="操作时间" prop="updatedAt">
+                        <template v-slot="scope">
+                            {{ dayjs(scope.row.updatedAt).format('YYYY-MM-DD HH:mm:ss') }}
+                        </template>
+                    </el-table-column>
+                </template>
             </el-table>
         </div>
         <div class="head-container">
@@ -59,7 +200,7 @@ export default {
         return {
             dayjs,
             dialogVisible: false,
-            key: 'stockNumber',
+            key: 'saleNumber',
             keysList: {
                 stockNumber: '现有数量',
                 addCountNumber: '增加数量',
@@ -67,7 +208,7 @@ export default {
                 refundNumber: '退货',
                 subCountNumber: '减少数量',
                 subNumber: '手动减少',
-                saleNumber: '销售量',
+                saleNumber: '销量',
                 lossNumber: '报损',
             },
             productId: '',

src/views/product/index.vue

@@ -37,8 +37,9 @@
           </div>
           <div class="info">
             <div class="row">
-              <span>现有数量</span>
+              <span>商品种数</span>
-              <span class="link" @click="showStockHistory('stockNumber')">{{ countInfo.stockNumber || 0 }}</span>
+              <!-- @click="showStockHistory('stockNumber')" -->
+              <span>{{ tableData.total || 0 }}</span>
             </div>
           </div>
         </div>