新增商品增加与编辑

src/App.vue

@@ -9,3 +9,9 @@ export default {
   name: 'App'
 }
 </script>
+
+<style>
+.tips {
+  color: #999;
+}
+</style>

src/api/shop.js

@@ -168,7 +168,7 @@ export function tbProductSpecPut(data) {
 }
 
 /**
- * 规格更改
+ * 删除规格
  * @returns
  */
 export function tbProductSpecDelete(data) {
@@ -191,7 +191,6 @@ export function tbProductGroupPost(data) {
   })
 }
 
-
 /**
  * 更改分组
  * @returns
@@ -220,11 +219,60 @@ export function tbProductGroupGet(params) {
  * 商品列表（根据分组中的商品id）
  * @returns
  */
-export function productListGet(params) {
+export function productListGet(productGroup) {
   return request({
-    url: `/api/tbProduct/productList`,
+    url: `/api/tbProductGroup/${productGroup}`,
-    method: 'get',
+    method: 'get'
-    params
   })
 }
 
+/**
+ * 删除分组
+ * @returns
+ */
+export function tbProductGroupDelete(data) {
+  return request({
+    url: `/api/tbProductGroup`,
+    method: 'DELETE',
+    data
+  })
+}
+
+/**
+ * 添加商品
+ * @returns
+ */
+export function tbProductPost(data) {
+  return request({
+    url: `/api/tbProduct`,
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 添加商品
+ * @returns
+ */
+export function tbProductPut(data) {
+  return request({
+    url: `/api/tbProduct`,
+    method: 'put',
+    data
+  })
+}
+
+/**
+ * 商品详情（单个商品）
+ * product 商品id
+ * @returns
+ */
+export function tbProductGetDetail(product) {
+  return request({
+    url: `/api/tbProduct/${product}`,
+    method: 'get'
+  })
+}
+
+
+

src/components/uploadImg/index.vue

@@ -1,8 +1,8 @@
 <template>
     <div>
         <el-upload ref="upload" :action="qiNiuUploadApi" :headers="headers" :file-list="fileList" :limit="limit"
-            list-type="picture-card" :on-preview="handlePictureCardPreview" :on-success="handleSuccess"
+            :list-type="type" :on-preview="handlePictureCardPreview" :multiple="limit > 1"
-            :on-error="handleError" :on-exceed="onExceed" :on-remove="handleRemove">
+            :on-success="handleSuccess" :on-error="handleError" :on-exceed="onExceed" :on-remove="handleRemove">
             <i class="el-icon-plus"></i>
         </el-upload>
         <el-dialog :visible.sync="dialogVisible" :z-index="99">
@@ -21,6 +21,10 @@ export default {
         ])
     },
     props: {
+        type: {
+            type: String,
+            default: 'picture-card'
+        },
         limit: {
             type: Number,
             default: 1

src/settings.js

@@ -42,5 +42,32 @@ module.exports = {
   /**
    * 备案号
    */
-  caseNumber: '陕ICP备2022008069号'
+  caseNumber: '陕ICP备2022008069号',
+  typeEnum: [
+    {
+      label: '计量商品',
+      intro: '单价购买',
+      typeEnum: 'normal'
+    },
+    {
+      label: '多规格',
+      intro: '多种不同规格',
+      typeEnum: 'sku'
+    },
+    {
+      label: '套餐商品',
+      intro: '选职多种组合',
+      typeEnum: 'group'
+    },
+    {
+      label: '称重商品',
+      intro: '按重量售卖',
+      typeEnum: 'weight'
+    },
+    {
+      label: '时价商品',
+      intro: '按重量售卖',
+      typeEnum: 'currentPrice'
+    }
+  ]
 }

src/views/product/add_shop.vue

@@ -1,11 +1,11 @@
 <template>
     <div class="app-container">
-        <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
+        <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" label-position="left">
-            <el-form-item label="商品类型" prop="type">
+            <el-form-item label="商品类型" prop="typeEnum">
                 <div class="shop_type_box">
                     <div class="item" v-for="(item, index) in shopTypes" :key="index"
-                        :class="{ active: shopTypesActive == index }" @click="shopTypesActive = index">
+                        :class="{ active: shopTypesActive == index }" @click="changeTypeEnum(index)">
-                        <div class="title">{{ item.label }}</div>
+                        <div class="s_title">{{ item.label }}</div>
                         <div class="intro">（{{ item.intro }}）</div>
                         <div class="active_dot">
                             <i class="el-icon-check"></i>
@@ -17,64 +17,260 @@
                 <el-input v-model="form.name" placeholder="请输入商品名称" style="width: 500px;"></el-input>
             </el-form-item>
             <el-form-item label="单位">
-                <el-select v-model="form.unit" placeholder="请选择单位" style="width: 500px;">
+                <el-select v-model="form.unitId" placeholder="请选择单位" style="width: 500px;">
                     <el-option :label="item.name" :value="item.id" v-for="item in units" :key="item.id"></el-option>
                 </el-select>
                 <el-button type="primary" plain icon="el-icon-plus" @click="$refs.addUnitRef.show()">添加单位</el-button>
-                <addUnit ref="addUnitRef" />
+                <addUnit ref="addUnitRef" @success="tbShopUnit" />
             </el-form-item>
-            <el-form-item label="商品分类" prop="classify">
+            <el-form-item label="商品分类" prop="categoryId">
-                <el-select v-model="form.unit" placeholder="请选择商品分类" style="width: 500px;">
+                <el-select v-model="form.categoryId" placeholder="请选择商品分类" style="width: 500px;">
-                    <el-option :label="item.name" :value="item.id" v-for="item in units" :key="item.id"></el-option>
+                    <el-option :label="item.name" :value="item.id" v-for="item in categorys" :key="item.id"></el-option>
                 </el-select>
                 <el-button type="primary" plain icon="el-icon-plus" @click="$refs.addClassifyRef.show()">添加分类</el-button>
-                <addClassify ref="addClassifyRef" />
+                <addClassify ref="addClassifyRef" @success="tbShopCategoryGet" />
+            </el-form-item>
+            <el-form-item label="商品图片">
+                <uploadImg ref="uploadImg" :limit="9" @success="uploadSuccess" />
+                <div class="tips">注：第一张图为商品封面图，图片尺寸为750×750(可拖动图片排序)</div>
+            </el-form-item>
+            <el-form-item label="套餐商品" v-if="shopTypes[shopTypesActive].typeEnum == 'group'">
+                <el-table :data="form.groupSnap" border v-if="form.groupSnap.length">
+                    <el-table-column label="标题" prop="title">
+                        <template v-slot="scope">
+                            <el-input v-model="scope.row.title" placeholder="请输入标题：自选小吃"></el-input>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="商品信息">
+                        <template v-slot="scope">
+                            <div class="shop_list">
+                                <div class="item" v-for="item in scope.row.goods" :key="item.id">
+                                    <span class="dot"></span>
+                                    <div class="name">
+                                        <div class="t">{{ item.name }}</div>
+                                    </div>
+                                    <i class="del el-icon-delete"></i>
+                                </div>
+                            </div>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="几选几">
+                        <template v-slot="scope">
+                            <span>{{ scope.row.goods.length }}选</span>
+                            <el-input-number v-model="scope.row.number" controls-position="right"
+                                :min="1"></el-input-number>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作" width="160">
+                        <template v-slot="scope">
+                            <el-button type="text" @click="tableAddShop(scope.$index, scope.row.goods)">添加商品</el-button>
+                            <el-button type="text" @click="form.groupSnap.splice(scope.$index, 1)">删除分组</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+                <el-button type="text" @click="$refs.shopListRef.show()">添加分组</el-button>
+                <shopList ref="shopListRef" @success="selectShopRes" />
+            </el-form-item>
+            <el-form-item label="规格属性" v-if="shopTypes[shopTypesActive].typeEnum != 'sku'">
+                <el-table :data="form.skuList" border>
+                    <el-table-column label="售价" prop="salePrice">
+                        <template v-slot="scope">
+                            <el-input-number v-model="scope.row.salePrice"></el-input-number>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="会员价" prop="memberPrice">
+                        <template v-slot="scope">
+                            <el-input-number v-model="scope.row.memberPrice"></el-input-number>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="成本价" prop="costPrice">
+                        <template v-slot="scope">
+                            <el-input-number v-model="scope.row.costPrice"></el-input-number>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="原价" prop="originPrice">
+                        <template v-slot="scope">
+                            <el-input-number v-model="scope.row.originPrice"></el-input-number>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="库存数量" prop="stockNumber">
+                        <template v-slot="scope">
+                            <el-input-number v-model="scope.row.stockNumber"></el-input-number>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="分销金额" prop="firstShared">
+                        <template v-slot="scope">
+                            <el-input-number v-model="scope.row.firstShared"></el-input-number>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </el-form-item>
+            <el-form-item label="选择规格" v-if="shopTypes[shopTypesActive].typeEnum == 'sku'">
+                <el-select v-model="form.specId" placeholder="请选择规格" style="width: 500px;" @change="selectSpecHandle">
+                    <el-option :label="item.name" :value="item.id" v-for="item in specList" :key="item.id"></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item :label="item.name" v-if="selectSpec.length" v-for="item in selectSpec" :key="item.name">
+                <el-checkbox-group v-model="item.selectSpecResult" @change="selectSpecResultChange">
+                    <el-checkbox :label="item" v-for="(item, index) in item.value
+" :key="index"></el-checkbox>
+                </el-checkbox-group>
+            </el-form-item>
+            <el-form-item v-if="selectSpecResult && shopTypes[shopTypesActive].typeEnum == 'sku'">
+                <el-table :data="form.skuList" border>
+                    <el-table-column :label="item.label" :prop="item.value" v-for="(item, index) in specTableHeaders"
+                        :key="index">
+                    </el-table-column>
+                    <el-table-column label="图片" prop="coverImg">
+                        <template v-slot="scope">
+                            <uploadImg type="text" :limit="1" @success="res => scope.row.coverImg = res[0]"
+                                v-if="!scope.row.coverImg" />
+                            <el-image style="width:30px;height:30px;" :src="scope.row.coverImg" v-else />
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="售价" prop="salePrice">
+                        <template v-slot="scope">
+                            <el-input-number v-model="scope.row.salePrice"></el-input-number>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="会员价" prop="memberPrice">
+                        <template v-slot="scope">
+                            <el-input-number v-model="scope.row.memberPrice"></el-input-number>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="成本价" prop="costPrice">
+                        <template v-slot="scope">
+                            <el-input-number v-model="scope.row.costPrice"></el-input-number>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="原价" prop="originPrice">
+                        <template v-slot="scope">
+                            <el-input-number v-model="scope.row.originPrice"></el-input-number>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="库存数量" prop="stockNumber">
+                        <template v-slot="scope">
+                            <el-input-number v-model="scope.row.stockNumber"></el-input-number>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="分销金额" prop="firstShared">
+                        <template v-slot="scope">
+                            <el-input-number v-model="scope.row.firstShared"></el-input-number>
+                        </template>
+                    </el-table-column>
+                    <el-table-column label="操作" width="80">
+                        <template v-slot="scope">
+                            <el-button type="text" @click="form.skuList.splice(scope.$index, 1)">删除</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </el-form-item>
+            <el-form-item label="库存开关">
+                <el-switch v-model="form.isStock" :active-value="1" :inactive-value="0"></el-switch>
+            </el-form-item>
+            <el-form-item label="标签打印">
+                <el-switch v-model="form.enableLabel" :active-value="1" :inactive-value="0"></el-switch>
+            </el-form-item>
+            <el-form-item label="打包费">
+                <el-input-number v-model="form.packFee" controls-position="right" :min="0"></el-input-number>
+            </el-form-item>
+            <el-form-item label="虚拟销量">
+                <el-input-number v-model="form.baseSalesNumber" controls-position="right" :min="0"></el-input-number>
+            </el-form-item>
+            <el-form-item label="排序">
+                <el-input-number v-model="form.sort" controls-position="right" :min="0"></el-input-number>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="submitHandle">确定</el-button>
+                <el-button>取消</el-button>
             </el-form-item>
         </el-form>
     </div>
 </template>
 
 <script>
-import { tbShopUnit } from "@/api/shop";
+import { tbShopUnit, tbShopCategoryGet, tbProductPost, tbProductSpecGet, tbProductGetDetail, tbProductPut } from "@/api/shop";
 import addUnit from './components/addUnit'
 import addClassify from './components/addClassify'
+import shopList from './components/shopList'
+import uploadImg from '@/components/uploadImg'
+import settings from '@/settings'
 export default {
     components: {
         addUnit,
-        addClassify
+        addClassify,
+        uploadImg,
+        shopList
     },
     data() {
         return {
             shopTypesActive: 0,
-            shopTypes: [
+            shopTypes: settings.typeEnum,
+            skuList: [
                 {
-                    label: '计量商品',
+                    label: '售价',
-                    intro: '单价购买'
+                    value: 'salePrice'
                 },
                 {
-                    label: '多规格',
+                    label: '会员价',
-                    intro: '多种不同规格'
+                    value: 'memberPrice'
                 },
                 {
-                    label: '套餐商品',
+                    label: '成本价',
-                    intro: '选职多种组合'
+                    value: 'costPrice'
                 },
                 {
-                    label: '称重商品',
+                    label: '原价',
-                    intro: '按重量售卖'
+                    value: 'originPrice'
                 },
                 {
-                    label: '时价商品',
+                    label: '库存数量',
-                    intro: '按重量售卖'
+                    value: 'stockNumber'
+                },
+                {
+                    label: '一级分销金额',
+                    value: 'firstShared'
                 }
             ],
+            specTableHeaders: [],
+            specTableBodys: [],
+            specId: '',
+            specList: [],
+            selectSpec: [],
+            selectSpecResult: false,
+            defaultSku: {
+                salePrice: 0,
+                memberPrice: 0,
+                costPrice: 0,
+                originPrice: 0,
+                stockNumber: 0,
+                firstShared: 0
+            },
+            tableAddShopIndex: null,
             form: {
-                type: 1,
+                id: '',
+                typeEnum: 'normal',
                 name: '',
-                unit: ''
+                unitId: '',
+                categoryId: '', // 商品分类id
+                coverImg: '',
+                images: [],
+                shopId: localStorage.getItem('shopId'),
+                lowPrice: '',
+                skuList: [],
+                isStock: 0,
+                isStock: 0,
+                packFee: 0,
+                specId: '',
+                baseSalesNumber: 0,
+                sort: 0,
+                groupSnap: [],
+                specInfo: [],
+                selectSpec: [],
+                specTableHeaders: []
             },
             rules: {
-                type: [
+                typeEnum: [
                     {
                         required: true
                     }
@@ -85,23 +281,275 @@ export default {
                         trigger: 'blur',
                         message: '请输入商品名称'
                     }
+                ],
+                categoryId: [
+                    {
+                        required: true,
+                        trigger: 'change',
+                        message: '请选择商品分类'
+                    }
                 ]
             },
-            units: []
+            units: [],
+            categorys: []
         }
     },
     mounted() {
-        this.tbShopUnit();
+        this.tbShopUnit()
+        this.tbShopCategoryGet()
+        this.changeTypeEnum(0)
+
+        if (this.$route.query.goods_id) {
+            this.tbProductGetDetail()
+        }
     },
     methods: {
+        // 商品详情
+        async tbProductGetDetail() {
+            try {
+                const res = await tbProductGetDetail(this.$route.query.goods_id)
+
+                // 赋值商品类型
+                this.changeTypeEnum(this.shopTypes.findIndex(item => item.typeEnum == res.typeEnum))
+                this.specTableHeaders = JSON.parse(res.specTableHeaders)
+                this.selectSpec = JSON.parse(res.selectSpec)
+
+                // 初始化上传图片
+                const images = JSON.parse(res.images);
+                this.$refs.uploadImg.fileList = images.map(item => {
+                    return {
+                        url: item
+                    }
+                })
+
+                this.form = res
+                this.form.skuList = JSON.parse(res.specInfo)
+                if (res.typeEnum == 'sku' && this.form.skuList.length) {
+                    this.selectSpecResult = true
+                }
+            } catch (error) {
+                console.log(error)
+            }
+        },
+        // 提交
+        async submitHandle() {
+            try {
+                this.$refs.formRef.validate(async faild => {
+                    if (faild) {
+                        this.form.lowPrice = this.form.skuList[0].salePrice
+                        this.form.coverImg = this.form.images[0]
+                        this.form.selectSpec = JSON.stringify(this.selectSpec)
+                        this.form.specTableHeaders = JSON.stringify(this.specTableHeaders)
+                        if (this.form.id) {
+                            await tbProductPut(this.form)
+                        } else {
+                            this.form.specInfo = JSON.stringify(this.form.skuList)
+                            await tbProductPost(this.form)
+                        }
+                        this.$notify({
+                            title: '成功',
+                            message: `${this.form.id ? '编辑' : '添加'}成功`,
+                            type: 'success'
+                        });
+                        this.$router.back()
+                    }
+                })
+            } catch (error) {
+                console.log(error)
+            }
+        },
+        // 给分组添加商品
+        tableAddShop(index, goods) {
+            this.tableAddShopIndex = index
+            this.$refs.shopListRef.show([...goods])
+        },
+        // 分组选择商品
+        selectShopRes(res) {
+            if (this.tableAddShopIndex != null) {
+                this.form.groupSnap[this.tableAddShopIndex].goods = res;
+                this.tableAddShopIndex = null
+            } else {
+                this.form.groupSnap.push({
+                    title: '',
+                    goods: res,
+                    number: 1
+                })
+            }
+        },
+        // 切换类型
+        changeTypeEnum(index) {
+            this.shopTypesActive = index
+            const typeEnum = this.shopTypes[index].typeEnum
+            this.form.typeEnum = typeEnum
+
+            if (typeEnum == 'sku') {
+                this.tbProductSpecGet()
+            } else {
+                this.specId = ''
+                this.form.specId = ''
+                this.selectSpec = []
+                this.selectSpecResult = ''
+                this.form.skuList = [JSON.parse(JSON.stringify(this.defaultSku))]
+            }
+        },
+        // 上传图片
+        uploadSuccess(res) {
+            this.form.images.push(res[0])
+        },
+        // 选择规格属性
+        selectSpecResultChange() {
+            this.createSkuHeader()
+            this.createSkuBody()
+        },
+        // 生成多规格表体
+        createSkuBody() {
+            let bodys = []
+            for (let item of this.selectSpec) {
+                if (item.selectSpecResult.length) {
+                    let arr = []
+                    for (let val of item.selectSpecResult) {
+                        arr.push({
+                            [item.name]: val
+                        })
+                    }
+                    bodys.push(arr)
+                }
+            }
+
+            let arr = this.cartesian(bodys)
+            console.log(arr)
+            let newarr = []
+
+            const m = {
+                coverImg: '',
+                ...this.defaultSku
+            }
+
+            for (let item of arr) {
+                if (Array.isArray(item)) {
+                    let obj = {}
+                    let specSnap = []
+                    for (let v of item) {
+                        for (let key in v) {
+                            obj[`${key}`] = v[key]
+                            specSnap.push(v[key])
+                        }
+                    }
+                    newarr.push({
+                        specSnap: specSnap.join(','),
+                        ...m,
+                        ...obj
+                    })
+                } else {
+                    let specSnap = []
+                    for (let key in item) {
+                        specSnap.push(item[key])
+                    }
+                    newarr.push({
+                        specSnap: specSnap.join(','),
+                        ...m,
+                        ...item
+                    })
+                }
+            }
+
+            this.form.skuList = []
+            this.form.skuList = newarr
+
+            console.log(this.form.skuList)
+        },
+        // 笛卡尔积算法
+        cartesian(arr) {
+            if (arr.length < 2) return arr[0] || [];
+            return [].reduce.call(arr, (col, set) => {
+                let res = [];
+                col.forEach(c => {
+                    set.forEach(s => {
+                        let t = [].concat(Array.isArray(c) ? c : [c]);
+                        t.push(s);
+                        res.push(t);
+                    })
+                });
+                return res;
+            });
+        },
+        // 生成多规格表头
+        createSkuHeader() {
+            let i = 0
+            const headers = []
+            for (let item of this.selectSpec) {
+                if (item.selectSpecResult.length) {
+                    i++
+                    headers.push({
+                        label: item.name,
+                        value: item.name
+                    })
+                }
+            }
+            this.selectSpecResult = i
+            this.specTableHeaders = headers
+        },
+        // 选择规格
+        selectSpecHandle(e) {
+            const selectSpec = JSON.parse(JSON.stringify(this.specList.find(item => item.id == e).specList))
+            for (let item in selectSpec) {
+                selectSpec[item].selectSpecResult = []
+            }
+            this.selectSpec = selectSpec
+            this.form.skuList = []
+        },
+        // 获取规格列表
+        async tbProductSpecGet() {
+            try {
+                const res = await tbProductSpecGet({
+                    shopId: localStorage.getItem('shopId'),
+                    sort: 'id',
+                    page: 0,
+                    size: 100
+                })
+                this.specList = res.content
+            } catch (error) { }
+        },
+        // 获取单位
         async tbShopUnit() {
             try {
                 const res = await tbShopUnit({
+                    shopId: localStorage.getItem('shopId'),
+                    sort: 'id',
                     page: 0,
                     size: 100
                 })
                 this.units = res.content
             } catch (error) { }
+        },
+        // 商品分类列表
+        async tbShopCategoryGet() {
+            try {
+                const res = await tbShopCategoryGet({
+                    shopId: localStorage.getItem('shopId'),
+                    sort: 'id',
+                    page: 0,
+                    size: 100
+                })
+                let categorys = []
+                for (let item of res.content) {
+                    categorys.push({
+                        name: `|----${item.name}`,
+                        id: item.id
+                    })
+                    if (item.childrenList.length) {
+                        for (let val of item.childrenList) {
+                            categorys.push({
+                                name: `|----|----${val.name}`,
+                                id: val.id
+                            })
+                        }
+                    }
+                }
+                this.categorys = categorys
+            } catch (error) {
+                console.log('商品分类列表', error)
+            }
         }
     }
 }
@@ -152,7 +600,7 @@ export default {
             padding-right: 2px;
         }
 
-        .title {
+        .s_title {
             font-weight: bold;
             color: #555;
         }
@@ -164,4 +612,43 @@ export default {
         }
     }
 }
+
+.shop_list {
+    .item {
+        display: flex;
+        align-items: center;
+
+        .dot {
+            $size: 6px;
+            width: $size;
+            height: $size;
+            border-radius: 50%;
+            background-color: #1890FF;
+        }
+
+        .name {
+            flex: 1;
+            margin-left: 10px;
+
+            .t {
+                color: #333;
+                font-size: 14px;
+                max-width: 100px;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+        }
+
+        .del {
+            font-size: 14px;
+            color: #999;
+
+            &:hover {
+                cursor: pointer;
+                color: #555;
+            }
+        }
+    }
+}
 </style>

src/views/product/components/addGroup.vue

@@ -97,9 +97,8 @@ export default {
         },
         async getProduts() {
             try {
-                const res = await productListGet({
+                const res = await productListGet(this.form.id)
-                    productList: this.form.productIds
+                this.productIds = res
-                })
             } catch (error) {
                 console.log(error)
             }

src/views/product/components/shopList.vue

@@ -64,12 +64,10 @@ export default {
                 total: 0,
                 loading: false,
                 list: []
-            }
+            },
+            goods: []
         }
     },
-    mounted() {
-        this.tbShopCategoryGet()
-    },
     methods: {
         // 确定选商品
         confirmHandle() {
@@ -81,7 +79,8 @@ export default {
         resetHandle() {
             this.searhForm.name = ''
             this.searhForm.category = ''
-            this.tableData.page = 0;
+            this.tableData.page = 0
+            this.tableData.list = []
             this.getTableData()
         },
         // 分页回调
@@ -101,6 +100,12 @@ export default {
                 this.tableData.loading = false
                 this.tableData.list = res.content
                 this.tableData.total = res.totalElements
+
+                if (this.goods.length) {
+                    this.$nextTick(() => {
+                        this.selection()
+                    })
+                }
             } catch (error) {
                 console.log(error)
             }
@@ -119,11 +124,28 @@ export default {
                 console.log(error)
             }
         },
-        show() {
+        show(goods) {
+            console.log('show-goods===', goods)
             this.dialogVisible = true
+            if (goods && goods.length) {
+                this.goods = goods
+            } else {
+                this.goods = []
+            }
+            this.resetHandle()
+            this.getTableData()
         },
         close() {
             this.dialogVisible = false
+        },
+        selection() {
+            this.goods.forEach(row => {
+                this.tableData.list.forEach((item, index) => {
+                    if (row.id == item.id) {
+                        this.$refs.table.toggleRowSelection(this.tableData.list[index]);
+                    }
+                })
+            });
         }
     }
 }

src/views/product/group/index.vue

@@ -35,7 +35,7 @@
 
 <script>
 import addGroup from '../components/addGroup'
-import { tbProductGroupGet, tbProductSpecDelete } from '@/api/shop'
+import { tbProductGroupGet, tbProductGroupDelete } from '@/api/shop'
 export default {
   components: {
     addGroup
@@ -68,7 +68,7 @@ export default {
     // 删除
     async delHandle(ids) {
       try {
-        await tbProductSpecDelete(ids)
+        await tbProductGroupDelete(ids)
         this.$notify({
           title: '成功',
           message: `删除成功`,

src/views/product/index.vue

@@ -3,19 +3,17 @@
     <div class="head-container">
       <el-row :gutter="20">
         <el-col :span="3">
-          <el-input v-model="query.blurry" size="small" clearable placeholder="请输入商品名称" style="width: 100%;"
+          <el-input v-model="query.name" size="small" clearable placeholder="请输入商品名称" style="width: 100%;"
             class="filter-item" @keyup.enter.native="getTableData" />
         </el-col>
         <el-col :span="3">
-          <el-select v-model="query.class" placeholder="请选择商品分类" style="width: 100%;">
+          <el-cascader :options="categorys" v-model="query.categoryId" :show-all-levels="false"
-            <el-option label="饮品" :value="1" />
+            :props="{ value: 'id', label: 'name', children: 'childrenList', expandTrigger: 'hover', emitPath: false }"
-            <el-option label="烤串" :value="2" />
+            clearable placeholder="请选择商品分类"></el-cascader>
-          </el-select>
         </el-col>
         <el-col :span="3">
-          <el-select v-model="query.sku" placeholder="请选择商品规格" style="width: 100%;">
+          <el-select v-model="query.typeEnum" placeholder="请选择商品规格" style="width: 100%;">
-            <el-option label="饮品" :value="1" />
+            <el-option :label="item.label" :value="item.typeEnum" v-for="item in typeEnums" :key="item.typeEnum" />
-            <el-option label="烤串" :value="2" />
           </el-select>
         </el-col>
         <el-col :span="6">
@@ -39,7 +37,11 @@
           <template v-slot="scope">
             <div class="shop_info">
               <el-image :src="scope.row.coverImg"
-                style="width: 50px;height: 50px;border-radius: 4px;background-color: #efefef;" />
+                style="width: 50px;height: 50px;border-radius: 4px;background-color: #efefef;">
+                <div class="img_error" slot="error">
+                  <i class="icon el-icon-document-delete"></i>
+                </div>
+              </el-image>
               <div class="info">
                 <span>{{ scope.row.name }}</span>
               </div>
@@ -58,11 +60,17 @@
         </el-table-column>
         <el-table-column label="上架区域" prop="area" />
         <el-table-column label="排序" prop="sort" sortable />
-        <el-table-column label="更新时间" prop="update" />
+        <el-table-column label="更新时间" prop="createdAt">
+          <template v-slot="scope">
+            {{ dayjs(scope.row.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
+          </template>
+        </el-table-column>
         <el-table-column label="操作" width="200">
           <template v-slot="scope">
-            <el-button type="primary" size="mini" round icon="el-icon-edit">编辑</el-button>
+            <router-link :to="{ path: '/product/add_shop', query: { goods_id: scope.row.id } }">
-            <el-button type="danger" size="mini" round icon="el-icon-delete">删除</el-button>
+              <el-button type="text" icon="el-icon-edit">编辑</el-button>
+            </router-link>
+            <el-button type="text" icon="el-icon-delete" style="margin-left: 20px !important;">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -75,15 +83,20 @@
 </template>
 
 <script>
-import { tbProduct } from '@/api/shop'
+import dayjs from 'dayjs'
+import settings from '@/settings'
+import { tbProduct, tbShopCategoryGet } from '@/api/shop'
 export default {
   data() {
     return {
+      dayjs,
       query: {
-        blurry: '',
+        name: '',
-        class: '',
+        categoryId: '',
-        sku: ''
+        typeEnum: ''
       },
+      categorys: [],
+      typeEnums: settings.typeEnum,
       tableData: {
         data: [],
         page: 0,
@@ -95,18 +108,19 @@ export default {
   },
   mounted() {
     this.getTableData()
+    this.tbShopCategoryGet()
   },
   methods: {
     // 重置查询
     resetHandle() {
-      this.query.blurry = ''
+      this.query.name = ''
-      this.query.class = ''
+      this.query.categoryId = ''
-      this.query.sku = ''
+      this.query.typeEnum = ''
       this.getTableData()
     },
     // 分页回调
     paginationChange(e) {
-      this.tableData.page = e
+      this.tableData.page = e - 1
       this.getTableData()
     },
     // 获取商品列表
@@ -115,17 +129,50 @@ export default {
       try {
         const res = await tbProduct({
           page: this.tableData.page,
-          size: this.tableData.size
+          size: this.tableData.size,
+          name: this.query.name,
+          categoryId: this.query.categoryId,
+          typeEnum: this.query.typeEnum
         })
         this.tableData.loading = false
         this.tableData.data = res.content
         this.tableData.total = res.totalElements
-      } catch (error) { }
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 获取商品分类列表
+    async tbShopCategoryGet() {
+      try {
+        const res = await tbShopCategoryGet({
+          shopId: localStorage.getItem('shopId'),
+          page: 0,
+          size: 100,
+          sort: 'id'
+        })
+        this.categorys = res.content
+      } catch (error) {
+        console.log(error)
+      }
     }
   }
 }
 </script>
 
+<style>
+.img_error {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .icon {
+    font-size: 20px;
+    color: #999;
+  }
+}
+</style>
 <style scoped lang="scss">
 .shop_info {
   display: flex;

src/views/shop/components/shopInfo.vue

@@ -217,8 +217,9 @@ export default {
                     this.formLoading = true
                     try {
                         if (this.startTime && this.endTime) {
-                            this.form.businessTime = `${dayjs(this.startTime).format('HH:mm')}-${dayjs(this.endTime).format('HH:mm')}`
+                            this.form.businessTime = `${this.startTime}-${this.endTime}`
                         }
+                        console.log(this.startTime, this.endTime);
                         const res = await tbShopInfoPut(this.form)
                         this.formLoading = false
                         this.$notify({