优化问题、更换接口

src/views/product/add_shop.vue

@@ -45,7 +45,7 @@
         <el-button type="primary" plain icon="el-icon-plus" @click="$refs.addClassifyRef.show()">添加分类</el-button>
         <addClassify ref="addClassifyRef" @success="tbShopCategoryGet" />
       </el-form-item>
-      <el-form-item label="商品图片">
+      <el-form-item label="商品图片" prop="coverImg">
         <div style="display: flex; flex-wrap: wrap">
           <div v-for="(item, index) in imgList" :key="index" style="position: relative" class="showStyle">
             <i class="el-icon-error buttonstyle" @click="deleteEvent(item)"></i>
@@ -440,6 +440,13 @@ export default {
         callback();
       }
     };
+    const validateCoverImg = (rule, value, callback) => {
+      if (!this.form.images.length) {
+        callback(new Error("请上传商品图片"));
+      } else {
+        callback()
+      }
+    }
     return {
       shopTypesActive: 0,
       shopTypes: settings.typeEnum,
@@ -520,6 +527,14 @@ export default {
             message: "请输入商品名称",
           },
         ],
+        coverImg: [
+          {
+            required: true,
+            trigger: "change",
+            validator: validateCoverImg,
+            message: "请上传商品图片",
+          }
+        ],
         unitId: [
           {
             required: true,

src/views/product/components/bindCons.vue

@@ -5,9 +5,9 @@
             <div class="btn_wrap">
                 <div class="refund_stock">
                     <span>退款退回库存</span>
-                    <el-switch v-model="isRefundStock"></el-switch>
+                    <el-switch :active-value="1" :inactive-value="0" v-model="goodsDetail.isRefundStock"></el-switch>
                 </div>
-                <el-radio-group v-model="type">
+                <el-radio-group v-model="type" @change="typeChange">
                     <el-radio-button label="1">添加至商品</el-radio-button>
                     <el-radio-button label="2" v-if="goodsDetail.typeEnum == '多规格'">添加至规格</el-radio-button>
                 </el-radio-group>
@@ -18,6 +18,7 @@
         </div>
         <el-table :data="tableData.cons">
             <el-table-column label="序号" type="index" width="50"></el-table-column>
+            <el-table-column label="规格名称" prop="specSnap" v-if="type == 2"></el-table-column>
             <el-table-column label="耗材名称">
                 <template v-slot="scope">
                     <el-select v-model="scope.row.conInfoId" filterable remote reserve-keyword placeholder="请输入关键词"
@@ -46,7 +47,7 @@
                         <div class="btn sub" @click="tableData.cons.splice(scope.$index, 1)">
                             <i class="el-icon-remove-outline"></i>
                         </div>
-                        <div class="btn add" @click="createItem">
+                        <div class="btn add" @click="createItem(scope.row)">
                             <i class="el-icon-circle-plus-outline"></i>
                         </div>
                     </div>
@@ -85,11 +86,24 @@ export default {
         // 提交
         async onSubmitHandle() {
             try {
+                // let flag = true
+
+                // this.tableData.cons.map(item => {
+                //     if (!item.conInfoId) {
+                //         flag = false
+                //     }
+                // })
+
+                // if (!flag) {
+                //     this.$message.error('请完善信息')
+                //     return
+                // }
                 this.formLoading = true
                 const res = await tbProskuConV2(this.tableData)
                 this.formLoading = false
                 this.$message.success('编辑成功')
                 this.dialogVisible = false
+                this.$emit('refundChange', this.goodsDetail)
             } catch (error) {
                 console.log(error);
                 this.formLoading = false
@@ -128,25 +142,120 @@ export default {
             this.dialogVisible = true
             this.goodsDetail = { ...obj }
             this.tableData.productId = this.goodsDetail.id
-            if (obj.conInfos.length) {
-                this.tableData.cons = [...obj.conInfos]
+            this.type = this.goodsDetail.isSaveSku
+
+            this.initItem()
+        },
+        // 切换类型
+        typeChange() {
+            this.initItem(true)
+        },
+        // 初始化绑定耗材项
+        initItem(radio = false) {
+            this.tableData.cons = []
+            if (this.type == 1) {
+                // 添加至商品
+                if (radio) {
+                    let item = {}
+                    item.id = ''
+                    item.shopId = localStorage.getItem('shopId')
+                    item.productId = this.goodsDetail.id
+                    item.productSkuId = 0
+                    item.conInfoId = ''
+                    item.name = ''
+                    item.conUnit = ''
+                    item.surplusStock = 0
+                    item.status = 1
+                    this.tableData.cons.push(item)
+                } else {
+                    if (this.goodsDetail.conInfos.length) {
+
+                        this.goodsDetail.conInfos.map(val => {
+                            let item = {}
+
+                            item.id = val.id
+                            item.shopId = val.shopId
+                            item.productId = val.productId
+                            item.productSkuId = 0
+                            item.conInfoId = val.conInfoId
+                            item.name = ''
+                            item.conUnit = val.conUnit
+                            item.surplusStock = val.surplusStock
+                            item.status = 1
+                            item.specSnap = ''
+
+                            this.tableData.cons.push(item)
+                        })
+                    } else {
+                        let item = {}
+                        item.id = ''
+                        item.shopId = localStorage.getItem('shopId')
+                        item.productId = this.goodsDetail.id
+                        item.productSkuId = 0
+                        item.conInfoId = ''
+                        item.name = ''
+                        item.conUnit = ''
+                        item.surplusStock = 0
+                        item.status = 1
+                        this.tableData.cons.push(item)
+                    }
+                }
             } else {
-                this.createItem()
+                // 添加至规格
+                if (this.goodsDetail.conInfos.length) {
+                    this.tableData.cons = [...this.goodsDetail.conInfos]
+                }
+                this.goodsDetail.skuList.map(val => {
+                    let item = {}
+
+                    item.id = ''
+                    item.shopId = localStorage.getItem('shopId')
+                    item.productId = this.goodsDetail.id
+                    item.productSkuId = val.id
+                    item.conInfoId = ''
+                    item.name = ''
+                    item.conUnit = ''
+                    item.surplusStock = 0
+                    item.status = 1
+                    item.specSnap = val.name
+
+                    this.tableData.cons.push(item)
+                })
             }
         },
         // 生成新关系项
-        createItem() {
-            let item = {}
-            item.id = ''
-            item.shopId = localStorage.getItem('shopId')
-            item.productId = this.goodsDetail.id
-            item.productSkuId = 0
-            item.conInfoId = ''
-            item.name = ''
-            item.conUnit = ''
-            item.surplusStock = 0
-            item.status = 1
-            this.tableData.cons.push(item)
+        createItem(val) {
+            if (this.type == 1) {
+
+                let item = {}
+
+                item.id = ''
+                item.shopId = localStorage.getItem('shopId')
+                item.productId = this.goodsDetail.id
+                item.productSkuId = 0
+                item.conInfoId = ''
+                item.name = ''
+                item.conUnit = ''
+                item.surplusStock = 0
+                item.status = 1
+
+                this.tableData.cons.push(item)
+            } else {
+                let item = {}
+
+                item.id = ''
+                item.shopId = localStorage.getItem('shopId')
+                item.productId = this.goodsDetail.id
+                item.productSkuId = val.productSkuId
+                item.conInfoId = ''
+                item.name = ''
+                item.conUnit = ''
+                item.surplusStock = 0
+                item.status = 1
+                item.specSnap = val.specSnap
+
+                this.tableData.cons.push(item)
+            }
         },
         reset() {
             this.goodsDetail = ''

src/views/product/components/stockHistory.vue

@@ -0,0 +1,113 @@
+<!-- 商品库存记录 -->
+<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-column label="商品名称/规格名称" prop="productName"></el-table-column>
+                <el-table-column label="变动后库存">
+                    <template v-slot="scope">
+                        {{ scope.row.leftNumber }}
+                    </template>
+                </el-table-column>
+                <el-table-column label="原有库存" prop="">
+                    <template v-slot="scope">
+                        {{ scope.row.leftNumber + scope.row.stockNumber }}
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作描述" prop="type"></el-table-column>
+                <el-table-column :label="`${keysList[key]}`" prop="">
+                    <template v-slot="scope">
+                        {{ scope.row.stockNumber }}
+                    </template>
+                </el-table-column>
+                <!-- <el-table-column label="报损" prop=""></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>
+            </el-table>
+        </div>
+        <div class="head-container">
+            <el-pagination :total="tableData.total" @size-change="handleSizeChange" :current-page="tableData.page + 1"
+                :page-size="tableData.size" @current-change="paginationChange"
+                layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+import dayjs from 'dayjs'
+import { tbProductStockDetailStock } from '@/api/shop.js'
+export default {
+    data() {
+        return {
+            dayjs,
+            dialogVisible: false,
+            key: 'stockNumber',
+            keysList: {
+                stockNumber: '现有数量',
+                addCountNumber: '增加数量',
+                addNumber: '手动增加',
+                refundNumber: '退货',
+                subCountNumber: '减少数量',
+                subNumber: '手动减少',
+                saleNumber: '销售量',
+                lossNumber: '报损',
+            },
+            productId: '',
+            tableData: {
+                sort: 1,
+                data: [],
+                page: 0,
+                size: 30,
+                loading: false,
+                total: 0
+            },
+        }
+    },
+    methods: {
+        // 库存记录列表
+        async tbProductStockDetailStock() {
+            try {
+                this.tableData.loading = true
+                const res = await tbProductStockDetailStock({
+                    page: this.tableData.page,
+                    size: this.tableData.size,
+                    shopId: localStorage.getItem('shopId'),
+                    column: this.key
+                })
+                this.tableData.loading = false
+                this.tableData.data = res.content
+                this.tableData.total = res.totalElements
+            } catch (error) {
+                console.log(error);
+            }
+        },
+        // 分页回调
+        paginationChange(e) {
+            this.tableData.page = e - 1
+            this.tbProductStockDetailStock()
+        },
+        handleSizeChange(val) {
+            this.tableData.size = val
+            this.tbProductStockDetailStock()
+        },
+        // 显示
+        show(key) {
+            this.dialogVisible = true
+            this.key = key
+            this.tbProductStockDetailStock()
+        },
+        // 初始化dialog
+        reset() {
+            this.tableData.page = 0
+            this.tableData.data = []
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss"></style>

src/views/product/index.vue

@@ -23,13 +23,72 @@
       </el-row>
     </div>
     <div class="head-container">
-      <el-row>
-        <el-col>
-          <router-link :to="{ name: 'add_shop' }">
-            <el-button type="primary" icon="el-icon-plus">添加商品</el-button>
-          </router-link>
-        </el-col>
-      </el-row>
+      <div class="header_wrap">
+        <router-link :to="{ name: 'add_shop' }">
+          <el-button type="primary" icon="el-icon-plus">添加商品</el-button>
+        </router-link>
+        <el-select v-model="tableData.sort" placeholder="排序" @change="getTableData">
+          <el-option value="createdAt,desc" label="创建时间"></el-option>
+          <el-option value="stockNumber,asc" label="数量由低到高"></el-option>
+        </el-select>
+      </div>
+    </div>
+    <div class="head-container">
+      <div class="data_wrap">
+        <div class="item">
+          <div class="icon">
+            <i class="el-icon-pie-chart"></i>
+          </div>
+          <div class="info">
+            <div class="row">
+              <span>现有数量</span>
+              <span @click="showStockHistory('stockNumber')">{{ countInfo.stockNumber || 0 }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="item">
+          <div class="icon">
+            <i class="el-icon-sort-up"></i>
+          </div>
+          <div class="info">
+            <div class="row">
+              <span>增加数量</span>
+              <span class="link" @click="showStockHistory('addCountNumber')">{{ countInfo.addCountNumber || 0 }}</span>
+            </div>
+            <div class="row">
+              <span>手动增加：</span>
+              <span class="link" @click="showStockHistory('addNumber')">{{ countInfo.addNumber || 0 }}</span>
+            </div>
+          </div>
+        </div>
+        <div class="item">
+          <div class="icon">
+            <i class="el-icon-sort-down"></i>
+          </div>
+          <div class="info">
+            <div class="row">
+              <span>减少数量</span>
+              <span class="link" @click="showStockHistory('subCountNumber')">{{ countInfo.subCountNumber || 0 }}</span>
+            </div>
+            <div class="row">
+              <div class="row">
+                <span>手动减少：</span>
+                <span class="link" @click="showStockHistory('subNumber')">{{ countInfo.subNumber || 0 }}</span>
+              </div>
+              <div class="line"></div>
+              <div class="row">
+                <span>销售量：</span>
+                <span class="link" @click="showStockHistory('saleNumber')">{{ countInfo.saleNumber || 0 }}</span>
+              </div>
+              <div class="line"></div>
+              <div class="row">
+                <span>报损：</span>
+                <span class="link" @click="showStockHistory('lossNumber')">{{ countInfo.lossNumber || 0 }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="head-container" id="table_drag">
       <el-table ref="table" :data="tableData.data" v-loading="tableData.loading" row-key="id"
@@ -73,7 +132,7 @@
         </el-table-column>
         <el-table-column label="耗材信息" width="200">
           <template v-slot="scope">
-            <div class="cons_wrap">
+            <div class="cons_wrap" v-if="scope.row.typeEnum">
               <div v-if="scope.row.conInfos && scope.row.conInfos.length">
                 <span v-for="item in scope.row.conInfos" :key="item.id">{{ item.conName }}、</span>
               </div>
@@ -91,15 +150,25 @@
             <el-button type="text" icon="el-icon-edit"
               v-if="!scope.row.isShowCash && !scope.row.isShowMall">未上架</el-button> -->
             <el-switch v-model="scope.row.isGrounding" :active-value="1" :inactive-value="0"
-              @change="changeGrounding($event, scope.row)"></el-switch>
+              @change="changeGrounding($event, scope.row, 'grounding')"></el-switch>
           </template>
         </el-table-column>
-        <el-table-column label="排序" prop="sort" sortable />
+        <el-table-column label="售罄">
+          <template v-slot="scope">
+            <!-- <el-button type="text" icon="el-icon-edit" v-if="scope.row.isShowCash">收银端</el-button>
+            <el-button type="text" icon="el-icon-edit" v-if="scope.row.isShowMall">小程序</el-button>
+            <el-button type="text" icon="el-icon-edit"
+              v-if="!scope.row.isShowCash && !scope.row.isShowMall">未上架</el-button> -->
+            <el-switch v-model="scope.row.isPauseSale" :active-value="1" :inactive-value="0"
+              @change="changeGrounding($event, scope.row, 'pauseSale')"></el-switch>
+          </template>
+        </el-table-column>
+        <!-- <el-table-column label="排序" prop="sort" sortable />
         <el-table-column label="更新时间" prop="createdAt" width="150">
           <template v-slot="scope">
             {{ dayjs(scope.row.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
           </template>
-        </el-table-column>
+        </el-table-column> -->
         <!-- <el-table-column label="设为热门" prop="createdAt">
           <template v-slot="scope">
             <el-switch v-model="scope.row.isHot" :active-value="1" :inactive-value="0"
@@ -130,7 +199,9 @@
         layout="total, sizes, prev, pager, next, jumper"></el-pagination>
     </div>
     <!-- 绑定耗材 -->
-    <BindCons ref="bindCons" />
+    <BindCons ref="bindCons" @refundChange="refundChange" />
+    <!-- 商品库存记录 -->
+    <StockHistory ref="stockHistory" />
     <!-- 编辑售价、库存 -->
     <el-dialog :title="editorEumn[editorForm.key]" :visible.sync="editorVisable" :show-close="false" width="300px">
       <el-form :model="editorForm">
@@ -151,10 +222,12 @@ import Sortable from 'sortablejs'
 import dayjs from 'dayjs'
 import settings from '@/settings'
 import BindCons from './components/bindCons.vue'
-import { tbProductListV2, tbShopCategoryGet, tbProductDelete, tbProductIsHot, upProSort, updateProductData } from '@/api/shop'
+import StockHistory from './components/stockHistory.vue'
+import { tbProductListV2, tbShopCategoryGet, tbProductDelete, tbProductIsHot, upProSort, updateProductData, tbProductStockDetailStockCount } from '@/api/shop'
 export default {
   components: {
-    BindCons
+    BindCons,
+    StockHistory
   },
   data() {
     return {
@@ -168,6 +241,7 @@ export default {
       categorys: [],
       typeEnums: settings.typeEnum,
       tableData: {
+        sort: 'createdAt,desc',
         data: [],
         page: 0,
         size: 30,
@@ -188,7 +262,8 @@ export default {
         id: '',
         key: '',
         value: ''
-      }
+      },
+      countInfo: {}
     }
   },
   async mounted() {
@@ -205,10 +280,40 @@ export default {
         this.tableDrag()
       })
     }
+
+    this.tbProductStockDetailStockCount()
   },
   methods: {
-    changeGrounding(event, row) {
-      this.editorForm.key = 'grounding'
+    // 显示库存记录
+    showStockHistory(key) {
+      this.$refs.stockHistory.show(key)
+    },
+    // 库存统计列表 统计
+    async tbProductStockDetailStockCount() {
+      try {
+        const res = await tbProductStockDetailStockCount({
+          shopId: localStorage.getItem('shopId')
+        })
+        this.countInfo = res
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    // 编辑退款是否退回库存
+    refundChange(e) {
+      let row = this.tableData.data.find(item => item.id == e.id)
+
+      if (row.isRefundStock != e.isRefundStock) {
+        this.editorForm.key = 'refundStock'
+        this.editorForm.id = e.id
+        this.editorForm.isSku = !e.typeEnum
+        this.editorForm.value = e.isRefundStock
+
+        this.editorConfirmChange()
+      }
+    },
+    changeGrounding(event, row, key) {
+      this.editorForm.key = key
       this.editorForm.id = row.id
       this.editorForm.isSku = !row.typeEnum
       this.editorForm.value = event
@@ -221,7 +326,7 @@ export default {
         this.editorFormLoading = true
         const res = await updateProductData([this.editorForm])
         this.editorFormLoading = false
-        this.$message.success('修改成功')
+        // this.$message.success('修改成功')
         this.editorVisable = false
         this.getTableData()
       } catch (error) {
@@ -320,7 +425,7 @@ export default {
         }
 
         this.tableData.loading = true
-        console.log(this.query, '调试2')
+        // console.log(this.query, '调试2')
         const res = await tbProductListV2({
           page: this.tableData.page,
           size: this.tableData.size,
@@ -328,7 +433,8 @@ export default {
           categoryId: this.query.categoryId,
           id: this.query.productId,
           type: this.query.typeEnum,
-          shopId: localStorage.getItem('shopId')
+          shopId: localStorage.getItem('shopId'),
+          sort: this.tableData.sort
         })
         this.tableData.loading = false
         this.tableData.data = res.content
@@ -369,6 +475,73 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.header_wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.data_wrap {
+  display: flex;
+  justify-content: space-between;
+
+  .item {
+    display: flex;
+    align-items: center;
+    background-color: #F4F9FF;
+    height: 80px;
+    padding: 20px;
+
+    .icon {
+      width: 37px;
+      height: 37px;
+      border-radius: 50%;
+      background-color: #D4E9FE;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #3F9EFF;
+      font-size: 20px;
+    }
+
+    .info {
+      flex: 1;
+      display: flex;
+      gap: 14px;
+      flex-direction: column;
+      padding-left: 14px;
+
+      .row {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        font-size: 14px;
+
+        .line {
+          margin: 0 14px;
+          height: 20px;
+          border-left: 1px solid #DDDFE6;
+        }
+
+        span {
+          &.link {
+            color: #3F9EFF;
+            cursor: pointer;
+
+            &:hover {
+              text-decoration: underline;
+            }
+          }
+
+          &:first-child {
+            color: #666;
+          }
+        }
+      }
+    }
+  }
+}
+
 .cons_wrap {
   display: flex;
   flex-wrap: wrap;