From 5238df86e56833f88e5d5aa2a9467dda0bb25743 Mon Sep 17 00:00:00 2001
From: YeMingfei666 <1619116647@qq.com>
Date: Sat, 22 Feb 2025 11:09:02 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0ipad=E7=82=B9=E9=A4=90?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/account/padProd.ts                    | 102 ++++
 src/components/GoodsSelect/index.vue          | 235 ++++++++
 .../online-shop/components/addPadPage.vue     | 543 ++++++++++++++++++
 src/views/online-shop/components/layout.js    |  52 ++
 src/views/online-shop/pad-setting.vue         | 306 +++++++++-
 5 files changed, 1237 insertions(+), 1 deletion(-)
 create mode 100644 src/api/account/padProd.ts
 create mode 100644 src/components/GoodsSelect/index.vue
 create mode 100644 src/views/online-shop/components/addPadPage.vue
 create mode 100644 src/views/online-shop/components/layout.js

diff --git a/src/api/account/padProd.ts b/src/api/account/padProd.ts
new file mode 100644
index 0000000..0cfcb8c
--- /dev/null
+++ b/src/api/account/padProd.ts
@@ -0,0 +1,102 @@
+import request from "@/utils/request";
+import { Account_BaseUrl } from "@/api/config";
+const baseURL = Account_BaseUrl + "/admin/padProd";
+const API = {
+  getList(data: getListRequest) {
+    return request<any>({
+      url: `${baseURL}`,
+      method: "get",
+      params: data
+    });
+  },
+
+  get(params: getRequest) {
+    return request<any>({
+      url: `${baseURL}/detail`,
+      method: "get",
+      params
+    });
+  },
+  edit(data: editRequest) {
+    return request({
+      url: `${baseURL}`,
+      method: "put",
+      data: data,
+    });
+  },
+  add(data: addRequest) {
+    return request({
+      url: `${baseURL}`,
+      method: "post",
+      data: data,
+    });
+  },
+  delete(data: delteRequest) {
+    return request({
+      url: `${baseURL}`,
+      method: "delete",
+      data: data,
+    });
+  }
+}
+export default API;
+
+export type delteRequest = number | string | [number | string];
+
+/**
+ * PadDetailAddDTO
+ */
+export interface addRequest {
+  /**
+   * 布局id
+   */
+  padLayoutId: number | null;
+  /**
+   * 商品分类id
+   */
+  productCategoryId: number | null;
+  /**
+   * 商品id集合
+   */
+  productIdList: number[] | null;
+  [property: string]: any;
+}
+export interface getRequest {
+  /**
+   * tb_pad_product_category Id
+   */
+  id?: number;
+  [property: string]: any;
+}
+export interface getListRequest {
+  page?: string;
+  /**
+   * 分类id
+   */
+  productCategoryId?: number;
+  size?: string;
+  [property: string]: any;
+}
+
+/**
+ * PadDetailEditDTO
+ */
+export interface editRequest {
+  /**
+   * 列表id
+   */
+  id: number | null;
+  /**
+   * 布局id
+   */
+  padLayoutId?: number | null;
+  /**
+   * 商品列表id
+   */
+  productIdList?: number[] | null;
+  /**
+   * 排序值
+   */
+  sort: string;
+  [property: string]: any;
+}
\ No newline at end of file
diff --git a/src/components/GoodsSelect/index.vue b/src/components/GoodsSelect/index.vue
new file mode 100644
index 0000000..400ac19
--- /dev/null
+++ b/src/components/GoodsSelect/index.vue
@@ -0,0 +1,235 @@
+<template>
+  <el-dialog title="选择商品" top="5vh" v-model="dialogVisible">
+    <el-form :model="searhForm" inline>
+      <el-form-item>
+        <el-input v-model="searhForm.name" placeholder="商品名称"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-select v-model="searhForm.category" placeholder="商品分类" :disabled="disableCategory">
+          <el-option
+            :label="item.name"
+            :value="item.id"
+            v-for="item in categoryList"
+            :key="item.id"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getTableData">查询</el-button>
+        <el-button @click="resetHandle">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <div class="head-container">
+      <el-table ref="table" :data="tableData.list" height="500" v-loading="tableData.loading">
+        <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">
+              <el-image :src="scope.row.coverImg" style="width: 30px; height: 30px">
+                <template #error>
+                  <div class="img_error">
+                    <i class="icon el-icon-document-delete"></i>
+                  </div>
+                </template>
+              </el-image>
+              <span>{{ scope.row.name }}</span>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="规格">
+          <template v-slot="scope">
+            {{ scope.row.typeEnum }}
+          </template>
+        </el-table-column>
+        <el-table-column label="是否售罄">
+          <template v-slot="scope">
+            {{ scope.row.isPauseSale == 1 ? "是" : "否" }}
+          </template>
+        </el-table-column>
+        <el-table-column label="是否分销">
+          <template v-slot="scope">
+            {{ scope.row.isDistribute == 1 ? "是" : "否" }}
+          </template>
+        </el-table-column>
+        <el-table-column label="售价">
+          <template v-slot="scope">￥{{ scope.row.lowPrice }}</template>
+        </el-table-column>
+        <el-table-column label="销量/库存">
+          <template v-slot="scope">
+            {{ scope.row.realSalesNumber }}/{{ scope.row.stockNumber }}
+          </template>
+        </el-table-column>
+        <el-table-column label="分类名称" prop="categoryName"></el-table-column>
+        <el-table-column label="操作" v-if="radio">
+          <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>
+    <template #footer>
+      <span class="dialog-footer" v-if="!radio">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="confirmHandle">确 定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import productApi from "@/api/product/index";
+import paoductCategoryApi from "@/api/product/productclassification";
+
+export default {
+  props: {
+    // 是否禁用分类
+    disableCategory: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否为单选
+    radio: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      searhForm: {
+        name: "",
+        category: "",
+      },
+      categoryList: [],
+      tableData: {
+        page: 0,
+        size: 10,
+        total: 0,
+        loading: false,
+        list: [],
+      },
+      goods: [],
+    };
+  },
+  methods: {
+    // 单选商品
+    selectHandle(row) {
+      this.$emit("success", [{ ...row }]);
+      this.close();
+    },
+    // 确定选商品
+    confirmHandle() {
+      let res = this.$refs.table.selection;
+      this.$emit("success", res);
+      this.close();
+    },
+    // 重置查询
+    resetHandle() {
+      this.searhForm.name = "";
+      this.searhForm.category = "";
+      this.tableData.page = 0;
+      this.tableData.size = 10;
+      this.tableData.list = [];
+      this.getTableData();
+    },
+    // 分页大小改变
+    sizeChange(e) {
+      this.tableData.size = e;
+      this.getTableData();
+    },
+    // 分页回调
+    paginationChange(e) {
+      this.tableData.page = e - 1;
+      this.getTableData();
+    },
+    // 商品列表
+    async getTableData() {
+      this.tableData.loading = true;
+      try {
+        const res = await productApi.getPage({
+          page: this.tableData.page,
+          size: this.tableData.size,
+          name: this.searhForm.name,
+          categoryId: this.searhForm.category,
+        });
+        this.tableData.list = res.content;
+        this.tableData.total = res.totalElements;
+
+        if (this.goods.length) {
+          this.$nextTick(() => {
+            this.selection();
+          });
+        }
+        setTimeout(() => {
+          this.tableData.loading = false;
+        }, 500);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    // 商品分类
+    async tbShopCategoryGet() {
+      try {
+        const res = await paoductCategoryApi.getPage({
+          page: 0,
+          size: 100,
+        });
+        this.categoryList = res.content;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    async show(goods, categoryId) {
+      this.dialogVisible = true;
+      if (goods && goods.length) {
+        this.goods = goods;
+      } else {
+        this.goods = [];
+      }
+      this.resetHandle();
+
+      console.log(categoryId);
+
+      if (categoryId) {
+        this.searhForm.category = categoryId;
+      }
+
+      console.log(this.searhForm);
+
+      await this.tbShopCategoryGet();
+      await 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]);
+          }
+        });
+      });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.shop_info {
+  display: flex;
+  align-items: center;
+
+  span {
+    margin-left: 10px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/online-shop/components/addPadPage.vue b/src/views/online-shop/components/addPadPage.vue
new file mode 100644
index 0000000..416769b
--- /dev/null
+++ b/src/views/online-shop/components/addPadPage.vue
@@ -0,0 +1,543 @@
+<!-- 新增pad选菜页 -->
+<template>
+  <div>
+    <el-dialog
+      :title="`${preview ? '预览' : form.id ? '编辑' : '添加'}平板菜谱`"
+      top="5vh"
+      width="1000px"
+      v-model="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">
+                <el-icon size="40" color="#dddfe6"><Plus /></el-icon>
+              </div>
+              <div class="cover" v-else>
+                <img class="img" :src="item.coverImg" />
+              </div>
+            </div>
+          </template>
+          <template v-else>
+            <div class="btn_wrap" v-if="!form.list.length">
+              <div class="btn">
+                <el-button @click="oneClick">一键生成菜单</el-button>
+              </div>
+            </div>
+            <div class="goods_list" v-else>
+              <div
+                class="btn_wrap"
+                :class="[`div${index + 1}`]"
+                v-for="(item, index) in form.list"
+                :key="index"
+                @click="selectGoods(item)"
+              >
+                <div class="info" :class="{ active: item.active }">
+                  <span class="t1">{{ item.name }}</span>
+                  <span class="t1">￥{{ item.lowPrice }}</span>
+                </div>
+              </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>
+    <GoodsSelect ref="refSelGoods"></GoodsSelect>
+    <!-- <shopList ref="shopList" disableCategory radio @success="selectConfirmGoods" /> -->
+  </div>
+</template>
+
+<script>
+import { layoutList } from "./layout.js";
+// import shopList from "@/components/shopList/index.vue";
+// import { tbProduct } from "@/api/shop.js";
+// import { layoutlist, productGroup, productCategoryDetail, productGroupPut } from "@/api/pad.js";
+export default {
+  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: {
+    // 选中菜品
+    selectGoods(item) {
+      item.active = !item.active;
+    },
+    // 一键生成菜单
+    async oneClick() {
+      try {
+        const res = await tbProduct({
+          categoryId: this.category,
+          page: 0,
+          size: 20,
+          sort: "id",
+          shopId: localStorage.getItem("shopId"),
+        });
+        this.form.list = res.content.map((item, index) => {
+          if (index == 0 || index == 12) {
+            item.active = true;
+          } else {
+            item.active = false;
+          }
+          return item;
+        });
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    // 提交
+    async submitHandle() {
+      try {
+        if (this.typeList.find((item) => item.id == this.typeListActive).code == "text-menu") {
+          if (!this.form.list.length) {
+            this.$notify.error({
+              title: "错误",
+              message: "请生成菜单",
+            });
+            return;
+          }
+        }
+
+        let isEmpty = true;
+        this.form.list.map((item) => {
+          if (!item.id) isEmpty = false;
+        });
+
+        if (!isEmpty) {
+          this.$notify.error({
+            title: "错误",
+            message: "请添加商品",
+          });
+          return;
+        }
+
+        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;
+        if (this.form.id) {
+          this.$notify.success({
+            title: "提示",
+            message: "编辑成功",
+          });
+        } else {
+          this.$notify.success({
+            title: "提示",
+            message: "添加成功",
+          });
+        }
+        this.dialogVisible = false;
+        this.$emit("success");
+      } catch (error) {
+        this.loading = false;
+        console.log(error);
+      }
+    },
+    // 获取
+    async layoutlist() {
+      this.typeList = layoutList;
+      return;
+      try {
+        const res = await layoutlist();
+        this.typeList = res;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    // 显示选择商品
+    showSelectGoods(index) {
+      this.activeItem = index;
+      this.$refs.refSelGoods.show([], this.category);
+    },
+    // 确认选择商品
+    selectConfirmGoods(res) {
+      // this.form.list = res
+      const flag = this.form.list.filter((item) => item.id == res[0].id);
+
+      if (flag.length) {
+        this.$notify({
+          title: "注意",
+          message: "请勿重复添加",
+          type: "error",
+        });
+      } else {
+        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;
+      }
+    }
+
+    &.type6 {
+      .goods_list {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: repeat(10, 1fr);
+        grid-column-gap: 20px;
+        grid-row-gap: 0px;
+
+        .div1 {
+          grid-area: 1 / 1 / 2 / 2;
+        }
+
+        .div2 {
+          grid-area: 2 / 1 / 3 / 2;
+        }
+
+        .div3 {
+          grid-area: 3 / 1 / 4 / 2;
+        }
+
+        .div4 {
+          grid-area: 4 / 1 / 5 / 2;
+        }
+
+        .div5 {
+          grid-area: 5 / 1 / 6 / 2;
+        }
+
+        .div6 {
+          grid-area: 6 / 1 / 7 / 2;
+        }
+
+        .div7 {
+          grid-area: 7 / 1 / 8 / 2;
+        }
+
+        .div8 {
+          grid-area: 8 / 1 / 9 / 2;
+        }
+
+        .div9 {
+          grid-area: 9 / 1 / 10 / 2;
+        }
+
+        .div10 {
+          grid-area: 10 / 1 / 11 / 2;
+        }
+
+        .div11 {
+          grid-area: 1 / 2 / 2 / 3;
+        }
+
+        .div12 {
+          grid-area: 2 / 2 / 3 / 3;
+        }
+
+        .div13 {
+          grid-area: 3 / 2 / 4 / 3;
+        }
+
+        .div14 {
+          grid-area: 4 / 2 / 5 / 3;
+        }
+
+        .div15 {
+          grid-area: 5 / 2 / 6 / 3;
+        }
+
+        .div16 {
+          grid-area: 6 / 2 / 7 / 3;
+        }
+
+        .div17 {
+          grid-area: 7 / 2 / 8 / 3;
+        }
+
+        .div18 {
+          grid-area: 8 / 2 / 9 / 3;
+        }
+
+        .div19 {
+          grid-area: 9 / 2 / 10 / 3;
+        }
+
+        .div20 {
+          grid-area: 10 / 2 / 11 / 3;
+        }
+      }
+    }
+
+    .goods_list {
+      height: 100%;
+    }
+
+    .btn_wrap {
+      flex: 1;
+      height: 100%;
+      position: relative;
+
+      .info {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid #ececec;
+        padding: 0 20px;
+        font-size: 16px;
+        font-weight: bold;
+        overflow: hidden;
+
+        &.active {
+          background-color: #bc1414;
+          color: #fff;
+
+          &::after {
+            content: "";
+            width: 120px;
+            height: 60px;
+            border: 22px solid #fff;
+            border-top: none;
+            border-right: none;
+            opacity: 0.3;
+            position: absolute;
+            top: -20px;
+            right: 10%;
+            transform: rotate(-45deg);
+          }
+        }
+      }
+
+      .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>
\ No newline at end of file
diff --git a/src/views/online-shop/components/layout.js b/src/views/online-shop/components/layout.js
new file mode 100644
index 0000000..8f046c0
--- /dev/null
+++ b/src/views/online-shop/components/layout.js
@@ -0,0 +1,52 @@
+export const layoutList = [
+  {
+    code: "single",
+    createTime: "2024-10-22 15:50:05",
+    delFlag: 0,
+    id: 1,
+    maximum: 1,
+    name: "单图",
+    remark: null,
+    sort: 0,
+  },
+  {
+    code: "double",
+    createTime: "2024-10-22 15:50:34",
+    delFlag: 0,
+    id: 2,
+    maximum: 2,
+    name: "双图",
+    remark: null,
+    sort: 1,
+  },
+  {
+    code: "L1-R2",
+    createTime: "2024-10-22 15:51:20",
+    delFlag: 0,
+    id: 3,
+    maximum: 3,
+    name: "左一右二",
+    remark: null,
+    sort: 2,
+  },
+  {
+    code: "4-gird",
+    createTime: "2024-10-22 15:52:22",
+    delFlag: 0,
+    id: 4,
+    maximum: 4,
+    name: "四图",
+    remark: "四宫格",
+    sort: 3,
+  },
+  {
+    code: "6-grid",
+    createTime: "2024-10-22 15:53:21",
+    delFlag: 0,
+    id: 5,
+    maximum: 6,
+    name: "六图",
+    remark: "六宫格",
+    sort: 4,
+  },
+];
diff --git a/src/views/online-shop/pad-setting.vue b/src/views/online-shop/pad-setting.vue
index 41a40c8..7cc3659 100644
--- a/src/views/online-shop/pad-setting.vue
+++ b/src/views/online-shop/pad-setting.vue
@@ -1 +1,305 @@
-<template></template>
\ No newline at end of file
+<template>
+  <div class="app-container">
+    <div class="left_menu">
+      <div class="search_wrap">
+        <el-input placeholder="名称/代码" v-model="query.name" @change="searchCateory">
+          <template #append>
+            <el-button icon="el-icon-search" @click="searchCateory"></el-button>
+          </template>
+        </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
+          class="item"
+          :class="{ active: selectCatoryIndex == index }"
+          v-for="(item, index) in treeData"
+          :key="item.id"
+          @click="treeItemClick(item, index)"
+        >
+          {{ item.name }}
+        </div>
+      </div>
+    </div>
+    <div class="table_wrap">
+      <div class="header_wrap">
+        <el-button type="primary" @click="addHandle">新建</el-button>
+      </div>
+      <div class="table" id="table_drag">
+        <el-table
+          ref="table"
+          :data="tableData.list"
+          border
+          height="100%"
+          v-loading="tableData.loading"
+          row-key="id"
+        >
+          <el-table-column label="序号" type="index" width="80"></el-table-column>
+          <el-table-column label="ID" prop="id" width="80"></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="操作" width="200">
+            <template v-slot="scope">
+              <el-button type="text" v-if="isPcBowser">拖动排序</el-button>
+              <el-button type="text" @click="editorHandle(scope.row, 1)">编辑</el-button>
+              <el-popconfirm title="确定删除吗？" @confirm="delTableHandle(scope.row.id)">
+                <template #reference>
+                  <el-button type="text">删除</el-button>
+                </template>
+              </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 Sortable from "sortablejs";
+import AddPadPage from "./components/addPadPage.vue";
+import paoductCategoryApi from "@/api/product/productclassification";
+import padProdApi from "@/api/account/padProd";
+import { swapArrayEle } from "@/utils/tools.js";
+
+export default {
+  components: {
+    AddPadPage,
+  },
+  data() {
+    return {
+      query: {
+        name: "",
+      },
+      selectCatoryIndex: 0,
+      selectCatory: "",
+      treeDataOrgin: [],
+      treeData: [],
+      tableData: {
+        loading: false,
+        page: 1,
+        size: 10,
+        total: 0,
+        list: [],
+      },
+    };
+  },
+  mounted() {
+    this.tbShopCategoryGet();
+    if (this.isPcBowser) {
+      this.$nextTick(() => {
+        this.tableDrag();
+      });
+    }
+  },
+  methods: {
+    // 搜索分类
+    searchCateory() {
+      this.treeData = this.treeDataOrgin.filter((item) => {
+        return item.name.includes(this.query.name);
+      });
+
+      if (this.treeData.length) {
+        this.selectCatoryIndex = 0;
+        this.selectCatory = this.treeData[this.selectCatoryIndex];
+        this.getTableData();
+      }
+    },
+    //表格拖拽
+    tableDrag() {
+      const el = document.querySelector("#table_drag .el-table__body-wrapper tbody");
+      new Sortable(el, {
+        animation: 150,
+        onEnd: async (e) => {
+          // console.log('拖拽结束===', e);
+          if (e.oldIndex == e.newIndex) return;
+
+          let arr = swapArrayEle(this.tableData.list, e.oldIndex, e.newIndex);
+          console.log(arr);
+          let data = arr.map((item, index) => {
+            return {
+              id: item.id,
+              sort: index,
+            };
+          });
+
+          try {
+            await productCategorySort(data);
+            this.getTableData();
+          } catch (error) {
+            console.log(error);
+          }
+        },
+      });
+    },
+    // 删除
+    async delTableHandle(id) {
+      try {
+        await padProdApi.delete(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.$notify.error({
+          title: "错误",
+          message: "请选择分类",
+        });
+      }
+    },
+    // 分类被点击
+    treeItemClick(data, index) {
+      this.selectCatoryIndex = index;
+      this.selectCatory = data;
+      this.tableData.page = 1;
+      this.getTableData();
+    },
+    // 获取商品分类
+    async tbShopCategoryGet() {
+      this.tableData.loading = true;
+      try {
+        const res = await paoductCategoryApi.getList({
+          page: 0,
+          size: 100,
+        });
+        this.treeDataOrgin = res;
+        this.treeData = res;
+        this.selectCatory = res[this.selectCatoryIndex];
+        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 padProdApi.getList({
+          page: this.tableData.page,
+          size: this.tableData.size,
+          customName: "",
+          productCategoryId: this.selectCatory.id,
+          padLayoutId: "",
+          id: "",
+        });
+        this.tableData.loading = false;
+        this.tableData.list = res.records;
+        this.tableData.total = res.totalRow;
+      } 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;
+
+    .item {
+      padding: 10px 15px;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      &.active {
+        background-color: #1890ff;
+        color: #fff;
+      }
+    }
+  }
+}
+
+.table_wrap {
+  flex: 1;
+  padding-left: 14px;
+
+  .header_wrap {
+    display: flex;
+  }
+
+  .table {
+    padding-top: 15px;
+    width: 100%;
+    height: calc(100vh - 310px);
+  }
+}
+
+.head-container {
+  padding-top: 20px;
+}
+</style>
\ No newline at end of file