1.店铺设置 - 店铺信息 - 桌位费开启免餐位费不可修改输入框

2.店铺设置 - 店铺信息logo、门店、二维码、小程序码图片添加下载按钮
3.新增pad点单设置

src/api/pad.js

@@ -0,0 +1,71 @@
+import request from "@/utils/request";
+
+/**
+ * Pad商品版式布局列表
+ * @returns
+ */
+export function layoutlist(params) {
+  return request({
+    url: "/api/pad/layout/list",
+    method: "get",
+    params
+  });
+}
+
+/**
+ * 新建
+ * @returns
+ */
+export function productGroup(data) {
+  return request({
+    url: "/api/pad/productCategory",
+    method: "post",
+    data
+  });
+}
+
+/**
+ * Pad点餐列表
+ * @returns
+ */
+export function productGrouppage(params) {
+  return request({
+    url: "/api/pad/productCategory/page",
+    method: "get",
+    params
+  });
+}
+
+/**
+ * 获取详情
+ * @returns
+ */
+export function productCategoryDetail(id) {
+  return request({
+    url: `/api/pad/productCategory/${id}`,
+    method: "get"
+  });
+}
+
+/**
+ * 删除
+ * @returns
+ */
+export function productCategoryDelete(id) {
+  return request({
+    url: `/api/pad/productCategory/${id}`,
+    method: "DELETE"
+  });
+}
+
+/**
+ * 修改
+ * @returns
+ */
+export function productGroupPut(data) {
+  return request({
+    url: "/api/pad/productCategory",
+    method: "put",
+    data
+  });
+}

src/components/shopList/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-dialog title="选择商品" :visible.sync="dialogVisible" @open="resetHandle()">
+    <el-dialog title="选择商品" top="5vh" :visible.sync="dialogVisible">
         <el-form :model="searhForm" inline>
             <el-form-item>
                 <el-input v-model="searhForm.name" placeholder="商品名称"></el-input>
@@ -16,8 +16,8 @@
             </el-form-item>
         </el-form>
         <div class="head-container">
-            <el-table ref="table" :data="tableData.list" v-loading="tableData.loading">
+            <el-table ref="table" :data="tableData.list" height="500" v-loading="tableData.loading">
-                <el-table-column type="selection" width="55" align="center"></el-table-column>
+                <el-table-column type="selection" width="55" align="center" v-if="!radio"></el-table-column>
                 <el-table-column label="商品信息">
                     <template v-slot="scope">
                         <div class="shop_info">
@@ -36,11 +36,11 @@
                     </template>
                 </el-table-column> <el-table-column label="是否售罄">
                     <template v-slot="scope">
-                        {{ scope.row.isPauseSale == 1?'是':'否' }}
+                        {{ scope.row.isPauseSale == 1 ? '是' : '否' }}
                     </template>
                 </el-table-column> <el-table-column label="是否分销">
                     <template v-slot="scope">
-                        {{ scope.row.isDistribute == 1?'是':'否' }}
+                        {{ scope.row.isDistribute == 1 ? '是' : '否' }}
                     </template>
                 </el-table-column>
                 <el-table-column label="售价">
@@ -54,12 +54,17 @@
                     </template>
                 </el-table-column>
                 <el-table-column label="分类名称" prop="categoryName"></el-table-column>
+                <el-table-column label="操作">
+                    <template v-slot="scope">
+                        <el-button type="primary" @click="selectHandle(scope.row)">选择</el-button>
+                    </template>
+                </el-table-column>
             </el-table>
         </div>
         <el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
             @current-change="paginationChange" @size-change="sizeChange"
             layout="total, sizes, prev, pager, next, jumper"></el-pagination>
-        <span slot="footer" class="dialog-footer">
+        <span slot="footer" class="dialog-footer" v-if="!radio">
             <el-button @click="dialogVisible = false">取 消</el-button>
             <el-button type="primary" @click="confirmHandle">确 定</el-button>
         </span>
@@ -69,6 +74,13 @@
 <script>
 import { tbShopCategoryGet, tbProduct } from "@/api/shop";
 export default {
+    props: {
+        // 是否为单选
+        radio: {
+            type: Boolean,
+            default: false
+        }
+    },
     data() {
         return {
             dialogVisible: false,
@@ -88,6 +100,11 @@ export default {
         }
     },
     methods: {
+        // 单选商品
+        selectHandle(row) {
+            this.$emit('success', [{ ...row }])
+            this.close()
+        },
         // 确定选商品
         confirmHandle() {
             let res = this.$refs.table.selection
@@ -154,7 +171,7 @@ export default {
                 console.log(error)
             }
         },
-        show(goods) {
+        async show(goods, categoryId) {
             this.dialogVisible = true
             if (goods && goods.length) {
                 this.goods = goods
@@ -162,8 +179,18 @@ export default {
                 this.goods = []
             }
             this.resetHandle()
-            this.tbShopCategoryGet()
+
-            this.getTableData()
+            console.log(categoryId);
+
+            if (categoryId) {
+                this.searhForm.category = categoryId
+            }
+
+            console.log(this.searhForm);
+
+
+            await this.tbShopCategoryGet()
+            await this.getTableData()
         },
         close() {
             this.dialogVisible = false

src/layout/components/Sidebar/Logo.vue

@@ -45,6 +45,13 @@ export default {
   opacity: 0;
 }
 
+h1 {
+  width: 100px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
 .sidebar-logo-container {
   position: relative;
   width: 100%;
@@ -82,6 +89,11 @@ export default {
     .sidebar-logo {
       margin-right: 0px;
     }
+
+    .sidebar-logo {
+      width: 24px;
+      height: 24px;
+    }
   }
 }
 </style>

src/views/home/home.vue

@@ -233,7 +233,7 @@
             <!-- <el-table-column label="排名" prop="productId"></el-table-column> -->
             <el-table-column label="商品名称" prop="productName"></el-table-column>
             <el-table-column label="数量" prop="salesNum"></el-table-column>
-            <el-table-column label="金额" prop="salesAmount"></el-table-column>
+            <!-- <el-table-column label="金额" prop="salesAmount"></el-table-column> -->
           </el-table>
           <div class="head-container" style="padding-top: 20px;display: flex;justify-content: flex-end;">
             <el-pagination :total="saleTableTotal" :page-size="saleTableSize" :current-page="saleTablePage + 1"
@@ -682,12 +682,12 @@ export default {
             barWidth: time.length <= 7 ? "30%" : "20%",
             data: data.map(item => item.orderAmount),
           },
-          {
+          // {
-            name: '实收金额',
+          //   name: '实收金额',
-            type: "bar",
+          //   type: "bar",
-            barWidth: time.length <= 7 ? "30%" : "20%",
+          //   barWidth: time.length <= 7 ? "30%" : "20%",
-            data: data.map(item => item.actualAmount),
+          //   data: data.map(item => item.actualAmount),
-          },
+          // },
           {
             name: '优惠金额',
             type: "bar",
@@ -753,7 +753,7 @@ export default {
         const data = res.total.map(item => {
           return {
             orderAmount: item.orderAmount,
-            actualAmount: item.actualAmount,
+            // actualAmount: item.actualAmount,
             discountAmount: item.discountAmount
           }
         });

src/views/shop/components/addPadPage.vue

@@ -0,0 +1,316 @@
+<!-- 新增pad选菜页 -->
+<template>
+    <div>
+        <el-dialog :title="`${preview ? '预览' : form.id ? '编辑' : '添加'}平板菜谱`" top="5vh" width="1000px"
+            :visible.sync="dialogVisible" :show-close="preview">
+            <div class="content" v-loading="pageLoading">
+                <div class="editor_wrap" :class="[`type${typeListActive}`]">
+                    <template v-if="typeListActive != 6">
+                        <div class="btn_wrap" :class="[`div${index + 1}`]" v-for="(item, index) in form.list"
+                            :key="index" @click="showSelectGoods(index)">
+                            <div class="btn" v-if="!item.id">
+                                <i class="icon el-icon-plus"></i>
+                            </div>
+                            <div class="cover" v-else>
+                                <img class="img" :src="item.coverImg">
+                            </div>
+                        </div>
+                    </template>
+                    <template v-else>
+                        <div class="btn_wrap">
+                            <div class="btn">
+                                <el-button>一键生成菜单</el-button>
+                            </div>
+                        </div>
+                    </template>
+                </div>
+                <div class="tab" v-if="!preview">
+                    <el-radio-group v-model="typeListActive" @change="tabChange">
+                        <el-radio-button :label="item.id" v-for="item in typeList" :key="item.id">
+                            {{ item.name }}
+                        </el-radio-button>
+                    </el-radio-group>
+                </div>
+            </div>
+            <div class="dialog_footer" v-if="!preview">
+                <el-button @click="dialogVisible = false">取 消</el-button>
+                <el-button type="primary" :loading="loading" @click="submitHandle">保 存</el-button>
+            </div>
+        </el-dialog>
+        <shopList ref="shopList" radio @success="selectConfirmGoods" />
+    </div>
+</template>
+
+<script>
+import shopList from '@/components/shopList/index.vue'
+import { layoutlist, productGroup, productCategoryDetail, productGroupPut } from '@/api/pad.js'
+export default {
+    components: { shopList },
+    props: {
+        category: {
+            type: [String, Number],
+            default: ''
+        }
+    },
+    data() {
+        return {
+            dialogVisible: false,
+            pageLoading: false,
+            loading: false,
+            activeItem: 0,
+            form: {
+                id: '',
+                list: []
+            },
+            typeListActive: 1,
+            typeList: [],
+            preview: false
+        }
+    },
+    mounted() {
+        this.layoutlist()
+    },
+    methods: {
+        // 提交
+        async submitHandle() {
+            try {
+                this.loading = true
+                let res = null
+                if (this.form.id) {
+                    await productGroupPut({
+                        id: this.form.id,
+                        padLayoutId: this.typeListActive,
+                        customName: '',
+                        productCategoryId: this.category || this.form.list[0].categoryId,
+                        shopId: localStorage.getItem("shopId"),
+                        sort: 1,
+                        remark: '',
+                        productIdList: this.form.list.map(item => item.id)
+                    })
+                } else {
+                    res = await productGroup({
+                        padLayoutId: this.typeListActive,
+                        customName: '',
+                        productCategoryId: this.category,
+                        shopId: localStorage.getItem("shopId"),
+                        sort: 1,
+                        remark: '',
+                        productIdList: this.form.list.map(item => item.id)
+                    })
+                }
+                this.loading = false
+                this.$message.success(this.form.id ? '编辑成功' : '添加成功')
+                this.dialogVisible = false
+                this.$emit('success')
+            } catch (error) {
+                this.loading = false
+                console.log(error);
+            }
+        },
+        // 获取
+        async layoutlist() {
+            try {
+                const res = await layoutlist()
+                this.typeList = res
+            } catch (error) {
+                console.log(error);
+            }
+        },
+        // 显示选择商品
+        showSelectGoods(index) {
+            this.activeItem = index
+            this.$refs.shopList.show([], this.category)
+        },
+        // 确认选择商品
+        selectConfirmGoods(res) {
+            this.$set(this.form.list, this.activeItem, { ...res[0] })
+        },
+        // 切换tab
+        tabChange() {
+            this.form.list = []
+            if (this.typeListActive != 6) {
+                this.init()
+            }
+        },
+        // 初始化
+        init() {
+            let num = this.typeList.find(item => item.id == this.typeListActive).maximum
+            for (let i = 0; i < num; i++) {
+                this.form.list.push({})
+            }
+        },
+        // 获取详情
+        async productCategoryDetail(id) {
+            try {
+                this.pageLoading = true
+                const res = await productCategoryDetail(id)
+                this.pageLoading = false
+                this.typeListActive = res.padLayoutId
+                this.form.id = res.id
+
+                this.form.list = []
+                this.form.list = res.productList
+            } catch (error) {
+                console.log(error);
+            }
+        },
+        reset() {
+            this.form.id = ''
+            this.form.list = []
+        },
+        // 显示 type=1 编辑 type=2预览
+        async show(id = '', type = 1) {
+            this.reset()
+            this.typeListActive = 1
+            this.dialogVisible = true
+            this.tabChange()
+            if (id) {
+                await this.productCategoryDetail(id)
+            }
+            if (type == 2) {
+                this.preview = true
+            } else {
+                this.preview = false
+            }
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.content {
+    .editor_wrap {
+        width: 100%;
+        height: 560px;
+
+        &.type2 {
+            display: flex;
+            gap: 10px;
+        }
+
+        &.type3 {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            grid-template-rows: repeat(2, 1fr);
+            grid-column-gap: 10px;
+            grid-row-gap: 10px;
+
+            .div1 {
+                grid-area: 1 / 1 / 3 / 2;
+            }
+
+            .div2 {
+                grid-area: 1 / 2 / 2 / 3;
+            }
+
+            .div3 {
+                grid-area: 2 / 2 / 3 / 3;
+            }
+        }
+
+        &.type4 {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            grid-template-rows: repeat(2, 1fr);
+            grid-column-gap: 10px;
+            grid-row-gap: 10px;
+
+            .div1 {
+                grid-area: 1 / 1 / 2 / 2;
+            }
+
+            .div2 {
+                grid-area: 1 / 2 / 2 / 3;
+            }
+
+            .div3 {
+                grid-area: 2 / 1 / 3 / 2;
+            }
+
+            .div4 {
+                grid-area: 2 / 2 / 3 / 3;
+            }
+        }
+
+        &.type5 {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            grid-template-rows: repeat(2, 1fr);
+            grid-column-gap: 10px;
+            grid-row-gap: 10px;
+
+            .div1 {
+                grid-area: 1 / 1 / 2 / 2;
+            }
+
+            .div2 {
+                grid-area: 1 / 2 / 2 / 3;
+            }
+
+            .div3 {
+                grid-area: 1 / 3 / 2 / 4;
+            }
+
+            .div4 {
+                grid-area: 2 / 1 / 3 / 2;
+            }
+
+            .div5 {
+                grid-area: 2 / 2 / 3 / 3;
+            }
+
+            .div6 {
+                grid-area: 2 / 3 / 3 / 4;
+            }
+        }
+
+        .btn_wrap {
+            flex: 1;
+            height: 100%;
+
+            .btn {
+                height: 100%;
+                border: 1px solid #DDDFE6;
+                background: #F7F7FA;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                .icon {
+                    font-size: 40px;
+                    color: #DDDFE6;
+                }
+            }
+
+            .cover {
+                height: 100%;
+                background: #F7F7FA;
+                position: relative;
+
+                .img {
+                    width: 100%;
+                    height: 100%;
+                    display: block;
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    object-fit: cover;
+                }
+            }
+        }
+
+    }
+
+    .tab {
+        display: flex;
+        justify-content: center;
+        padding-top: 20px;
+    }
+}
+
+.dialog_footer {
+    display: flex;
+    justify-content: center;
+    padding-top: 20px;
+}
+</style>

src/views/shop/components/shopInfo.vue

@@ -9,29 +9,56 @@
           <el-input v-model.trim="form.chainName" placeholder="请输入连锁店扩展店名" style="width: 500px;"></el-input>
         </el-form-item>
         <el-form-item label="门店logo">
-          <el-image :src="form.logo || require('@/assets/images/upload.png')" fit="contain"
+          <div class="img_box">
-            style="width: 80px;height: 80px;" @click="
+            <el-image :src="form.logo || require('@/assets/images/upload.png')" fit="contain"
-              showUpload = true;
+              style="width: 80px;height: 80px;" @click="
-            uploadIndex = 1;
+                showUpload = true;
-            "></el-image>
+              uploadIndex = 1;
+              "></el-image>
+            <el-button type="primary" plain v-if="form.logo" @click="downloadImgHandle(form.logo)">下载</el-button>
+          </div>
         </el-form-item>
         <el-form-item label="门店照片">
-          <el-image :src="form.coverImg || require('@/assets/images/upload.png')" fit="contain"
+          <div class="img_box">
-            style="width: 80px;height: 80px;" @click="
+            <el-image :src="form.coverImg || require('@/assets/images/upload.png')" fit="contain"
-              showUpload = true;
+              style="width: 80px;height: 80px;" @click="
-            uploadIndex = 2;
+                showUpload = true;
-            "></el-image>
+              uploadIndex = 2;
+              "></el-image>
+            <el-button type="primary" plain v-if="form.coverImg"
+              @click="downloadImgHandle(form.coverImg)">下载</el-button>
+          </div>
         </el-form-item>
         <el-form-item label="微信二维码">
-          <el-image :src="form.shopQrcode || require('@/assets/images/upload.png')" fit="contain"
+          <div class="img_box">
-            style="width: 80px;height: 80px;" @click="
+            <el-image :src="form.shopQrcode || require('@/assets/images/upload.png')" fit="contain"
-              showUpload = true;
+              style="width: 80px;height: 80px;" @click="
-            uploadIndex = 3;
+                showUpload = true;
-            "></el-image>
+              uploadIndex = 3;
+              "></el-image>
+            <el-button type="primary" plain v-if="form.shopQrcode"
+              @click="downloadImgHandle(form.shopQrcode)">下载</el-button>
+          </div>
         </el-form-item>
         <el-form-item label="店铺小程序码">
-          <el-image :src="form.smallQrcode || require('@/assets/images/img_download_error.png')" fit="contain"
+          <div class="img_box">
-            style="width: 80px;height: 80px;" @click="downloadImgHandle(form.smallQrcode)"></el-image>
+            <el-image :src="form.smallQrcode || require('@/assets/images/img_download_error.png')" fit="contain"
+              style="width: 80px;height: 80px;"></el-image>
+            <el-button type="primary" plain v-if="form.shopQrcode"
+              @click="downloadImgHandle(form.smallQrcode)">下载</el-button>
+          </div>
+        </el-form-item>
+        <el-form-item label="经营模式「单选」">
+          <el-radio-group v-model="form.registerType">
+            <el-radio label="munchies">快餐版（先支付后下单）</el-radio>
+            <el-radio label="restaurant">餐饮版（先下单后支付）</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="就餐模式「多选」">
+          <el-checkbox-group v-model="form.eatModel">
+            <el-checkbox label="dine-in">堂食自取</el-checkbox>
+            <el-checkbox label="take-out">允许打包</el-checkbox>
+          </el-checkbox-group>
         </el-form-item>
         <el-form-item label="联系电话" prop="phone">
           <el-input v-model.trim="form.phone" placeholder="请输入联系电话" style="width: 500px;"></el-input>
@@ -58,7 +85,8 @@
           <div style="color: #999;">注：准确的定位便于用户导航到店铺</div>
         </el-form-item>
         <el-form-item label="门店详细地址">
-          <el-input type="textarea" v-model.trim="form.address" placeholder="请输入门店详细地址" style="width: 500px;"></el-input>
+          <el-input type="textarea" v-model.trim="form.address" placeholder="请输入门店详细地址"
+            style="width: 500px;"></el-input>
         </el-form-item>
         <el-form-item label="营业时间">
           <el-select v-model="form.businessStartDay" placeholder="周几开始">
@@ -78,7 +106,7 @@
           </el-time-picker>
         </el-form-item>
         <el-form-item label="桌位费/位/元">
-          <el-input-number v-model="form.tableFee" :min="0" />
+          <el-input-number :disabled="!!form.isTableFee" v-model="form.tableFee" :min="0" />
           <!-- <el-checkbox v-model="form.isTableFee" :label="1">免餐位费</el-checkbox> -->
           <el-switch v-model.trim="form.isTableFee" :active-value="1" :inactive-value="0" active-text="免餐位费">
           </el-switch>
@@ -188,7 +216,9 @@ export default {
       startTime: "",
       endTime: "",
       formLoading: false,
-      form: {},
+      form: {
+        eatModel: []
+      },
       rules: {
         shopName: [
           {
@@ -372,6 +402,12 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.img_box {
+  display: flex;
+  align-items: flex-end;
+  gap: 20px;
+}
+
 .map_box {
   width: 100%;
   position: relative;

src/views/shop/pad_setting.vue

@@ -0,0 +1,211 @@
+<template>
+    <div class="app-container">
+        <div class="left_menu">
+            <div class="search_wrap">
+                <el-input placeholder="名称/代码" v-model="query.name">
+                    <el-button slot="append" icon="el-icon-search"></el-button>
+                </el-input>
+            </div>
+            <div class="tree_wrap">
+                <el-tree :data="treeData" node-key="id" highlight-current :props="{ label: 'name' }" default-expand-all
+                    @node-click="treeItemClick"></el-tree>
+            </div>
+        </div>
+        <div class="table_wrap">
+            <div class="header_wrap">
+                <el-button type="primary" @click="addHandle">新建</el-button>
+            </div>
+            <div class="table">
+                <el-table :data="tableData.list" border height="100%" v-loading="tableData.loading">
+                    <el-table-column label="序号" type="index"></el-table-column>
+                    <el-table-column label="菜品名称" prop="productNames"></el-table-column>
+                    <el-table-column label="类型" prop="padLayoutName"></el-table-column>
+                    <el-table-column label="所属小类" prop="productCategoryName"></el-table-column>
+                    <el-table-column label="自定义分类" prop="customName"></el-table-column>
+                    <el-table-column label="操作">
+                        <template v-slot="scope">
+                            <el-button type="text">拖动排序</el-button>
+                            <el-button type="text" @click="editorHandle(scope.row, 1)">编辑</el-button>
+                            <el-popconfirm title="确定删除吗？" @confirm="delTableHandle(scope.row.id)">
+                                <el-button type="text" slot="reference">删除</el-button>
+                            </el-popconfirm>
+                            <el-button type="text" @click="editorHandle(scope.row, 2)">预览</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+            <div class="head-container">
+                <el-pagination @size-change="paginationSizeChange" :total="tableData.total"
+                    :current-page="tableData.page" :page-size="tableData.size" @current-change="paginationChange"
+                    layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+            </div>
+        </div>
+        <AddPadPage ref="AddPadPage" :category="selectCatory.id" @success="addSuccess" />
+    </div>
+</template>
+
+<script>
+import AddPadPage from './components/addPadPage.vue'
+import { tbShopCategoryGet } from '@/api/shop'
+import { productGrouppage, productCategoryDelete } from '@/api/pad.js'
+import editor from 'mavon-editor';
+export default {
+    components: {
+        AddPadPage
+    },
+    data() {
+        return {
+            query: {
+                name: ''
+            },
+            selectCatory: '',
+            treeData: [],
+            tableData: {
+                loading: false,
+                page: 1,
+                size: 10,
+                total: 0,
+                list: []
+            }
+        }
+    },
+    mounted() {
+        this.tbShopCategoryGet()
+    },
+    methods: {
+        // 删除
+        async delTableHandle(id) {
+            try {
+                await productCategoryDelete(id)
+                this.$message.success('已删除')
+                this.getTableData()
+            } catch (error) {
+                console.log(error);
+            }
+        },
+        // 编辑 预览
+        editorHandle(row, type) {
+            this.$refs.AddPadPage.show(row.id, type)
+        },
+        // 新建成功
+        addSuccess() {
+            this.tableData.page = 1
+            this.getTableData()
+        },
+        // 新建
+        addHandle() {
+            if (this.selectCatory.id) {
+                this.$refs.AddPadPage.show()
+            } else {
+                this.$message.warning('请选择分类')
+            }
+        },
+        // 分类被点击
+        treeItemClick(data) {
+            this.selectCatory = data
+            this.tableData.page = 1
+            this.getTableData()
+        },
+        // 获取商品分类
+        async tbShopCategoryGet() {
+            this.tableData.loading = true
+            try {
+                const res = await tbShopCategoryGet({
+                    page: 0,
+                    size: 100,
+                    sort: 'id,desc',
+                    shopId: localStorage.getItem('shopId')
+                })
+                this.treeData = res.content
+                this.getTableData()
+            } catch (error) {
+                console.log(error)
+            }
+        },
+        // 重置查询
+        resetHandle() {
+            this.tableData.page = 1
+            this.tableData.size = 10
+            this.tableData.list = []
+            this.getTableData()
+        },
+        // 每页条数改变是回调
+        paginationSizeChange(e) {
+            this.tableData.size = e
+            this.tableData.page = 1
+            this.getTableData()
+        },
+        // 分页回调
+        paginationChange(e) {
+            this.tableData.page = e
+            this.tableData.list = []
+            this.getTableData()
+        },
+        // Pad点餐列表
+        async getTableData() {
+            try {
+                this.tableData.loading = true
+                const res = await productGrouppage({
+                    shopId: localStorage.getItem("shopId"),
+                    page: this.tableData.page,
+                    size: this.tableData.size,
+                    customName: '',
+                    productCategoryId: this.selectCatory.id,
+                    padLayoutId: '',
+                    id: ''
+                })
+                this.tableData.loading = false
+                this.tableData.list = res.content
+                this.tableData.total = res.totalElements
+            } catch (error) {
+                console.log(error)
+            }
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content) {
+    background-color: #1890ff;
+    color: #fff;
+}
+
+.app-container {
+    display: flex;
+}
+
+.left_menu {
+    width: 164px;
+    height: calc(100vh - 210px);
+    border: 1px solid #ddd;
+
+    .search_wrap {
+        padding: 14px;
+    }
+
+    .tree_wrap {
+        width: 100%;
+        height: calc(100% - 70px);
+        overflow-y: auto;
+    }
+}
+
+.table_wrap {
+    flex: 1;
+    padding-left: 14px;
+
+    .header_wrap {
+        display: flex;
+    }
+
+    .table {
+        padding-top: 15px;
+        height: calc(100vh - 310px);
+    }
+}
+
+.head-container {
+    padding-top: 20px;
+}
+</style>

src/views/shop/shop_configuration.vue

@@ -2,7 +2,7 @@
     <div class="app-container">
         <el-tabs v-model="activeName" type="card">
             <el-tab-pane label="店铺信息" name="1"></el-tab-pane>
-            <el-tab-pane label="经营模式" name="8"></el-tab-pane>
+            <!-- <el-tab-pane label="经营模式" name="8"></el-tab-pane> -->
             <el-tab-pane label="基础配置" name="2"></el-tab-pane>
             <!-- <el-tab-pane label="通知配置" name="3"></el-tab-pane> -->
             <el-tab-pane label="安全设置" name="4"></el-tab-pane>