feat(商品分组): 新增商品分组管理功能

- 添加商品分组相关API接口，包括分页获取、详情查询、增删改操作
- 在商品管理页面支持批量设置商品分组功能
- 新增商品分组管理页面，支持分组的增删改查
- 配置路由以支持商品分组页面访问

manager/src/api/goods.js

@@ -142,6 +142,32 @@ export const getGoodsNumerData = (params) => {
 export const getGoodsListData = (params) => {
     return getRequest('/goods/goods/list', params)
 }
+// 商品分组分页
+export const getGoodsGroupByPage = (params) => {
+    return getRequest('/goods/goodsGroup/getByPage', params)
+}
+// 商品分组详情
+export const getGoodsGroup = (id) => {
+    return getRequest(`/goods/goodsGroup/get/${id}`)
+}
+// 新增商品分组
+export const addGoodsGroup = (params) => {
+    return postRequest('/goods/goodsGroup', params)
+}
+// 修改商品分组
+export const updateGoodsGroup = (id, params) => {
+    return putRequest(`/goods/goodsGroup/update/${id}`, params)
+}
+// 删除商品分组
+export const deleteGoodsGroup = (id) => {
+    return deleteRequest(`/goods/goodsGroup/delete/${id}`)
+}
+// 设定商品分组（批量）
+export const addGoodsGroupItems = (groupId, goodsIds) => {
+    return postRequest(`/goods/goodsGroup/${groupId}/goods`, {
+        goodsIds: Array.isArray(goodsIds) ? goodsIds.join(",") : goodsIds,
+    })
+}
 //  获取待审核商品分页列表
 export const getAuthGoodsListData = (params) => {
     return getRequest('/goods/goods/auth/list', params)

manager/src/router/router.js

@@ -91,6 +91,12 @@ export const otherRouter = {
       name: "goods-category",
       component: () => import("@/views/goods/goods-manage/category.vue")
     },
+    {
+      path: "goods-group",
+      title: "商品分组",
+      name: "goods-group",
+      component: () => import("@/views/goods/group/index.vue")
+    },
     {
       path: "goods-parameter",
       title: "商品参数",
@@ -153,6 +159,12 @@ export const otherRouter = {
       name: "member-group",
       component: () => import("@/views/member/group/index.vue")
     },
+    {
+      path: "message-template",
+      title: "消息模版",
+      name: "message-template",
+      component: () => import("@/views/sys/message/messageTemplate.vue")
+    },
 
     {
       path: "goods/goods-info/goodsDetail",

manager/src/views/goods/goods-info/goods.vue

@@ -58,6 +58,17 @@
             <Option value="VIRTUAL_GOODS">虚拟商品</Option>
           </Select>
         </Form-item>
+        <Form-item label="商品分组" prop="groupId">
+          <Select
+            v-model="searchForm.groupId"
+            placeholder="请选择商品分组"
+            clearable
+            filterable
+            style="width: 240px"
+          >
+            <Option v-for="item in goodsGroupList" :value="item.id" :key="item.id">{{ item.groupName }}</Option>
+          </Select>
+        </Form-item>
         <Button
           @click="handleSearch"
           class="search-btn"
@@ -78,6 +89,14 @@
 
       <!-- 批量操作按钮 -->
       <div class="batch-operations" style="margin: 10px 0;">
+        <Button
+          type="primary"
+          :disabled="selectedRows.length === 0"
+          @click="openSetGoodsGroup"
+          style="margin-right: 10px;"
+        >
+          批量设置分组
+        </Button>
         <Button
           type="success"
           :disabled="selectedRows.length === 0"
@@ -216,11 +235,32 @@
         <Button type="primary" @click="submitBatchAudit">提交审核</Button>
       </div>
     </Modal>
+    <Modal v-model="goodsGroupFlag" title="批量设置商品分组" width="420">
+      <Form ref="goodsGroupForm" :model="goodsGroupForm" :rules="goodsGroupRule" :label-width="90">
+        <FormItem label="商品分组" prop="groupId">
+          <Select v-model="goodsGroupForm.groupId" clearable filterable style="width: 240px">
+            <Option v-for="item in goodsGroupList" :value="item.id" :key="item.id">{{ item.groupName }}</Option>
+          </Select>
+        </FormItem>
+      </Form>
+      <div slot="footer">
+        <Button @click="goodsGroupFlag = false">取消</Button>
+        <Button type="primary" :loading="goodsGroupLoading" @click="submitSetGoodsGroup">确定</Button>
+      </div>
+    </Modal>
   </div>
 </template>
 
 <script>
-import { getGoodsListData,getGoodsNumerData, upGoods, lowGoods, authGoods } from "@/api/goods";
+import {
+  getGoodsListData,
+  getGoodsNumerData,
+  upGoods,
+  lowGoods,
+  authGoods,
+  getGoodsGroupByPage,
+  addGoodsGroupItems
+} from "@/api/goods";
 import vueQr from "vue-qr";
 export default {
   components: {
@@ -238,6 +278,7 @@ export default {
         pageSize: 20, // 页面大小
         sort: "create_time", // 默认排序字段
         order: "desc", // 默认排序方式
+        groupId: "",
       },
       underForm: {
         // 下架原因
@@ -510,6 +551,15 @@ export default {
         auth_flag: 1,
         reason: ''
       },
+      goodsGroupFlag: false,
+      goodsGroupLoading: false,
+      goodsGroupList: [],
+      goodsGroupForm: {
+        groupId: ""
+      },
+      goodsGroupRule: {
+        groupId: [{ required: true, message: "请选择商品分组", trigger: "change" }]
+      }
     };
   },
   computed: {
@@ -528,6 +578,7 @@ export default {
     init() {
       this.getDataList();
       this.getNumberData();
+      this.loadGoodsGroupList();
     },
     // 分页 改变页码
     changePage(v) {
@@ -855,6 +906,51 @@ export default {
           });
         }
       });
+    },
+    loadGoodsGroupList() {
+      getGoodsGroupByPage({ pageNumber: 1, pageSize: 1000 }).then((res) => {
+        if (res && res.success && res.result) {
+          this.goodsGroupList = res.result.records || [];
+        }
+      });
+    },
+    openSetGoodsGroup() {
+      if (this.selectedRows.length === 0) {
+        this.$Message.warning("请先选择商品");
+        return;
+      }
+      this.goodsGroupFlag = true;
+      this.goodsGroupLoading = false;
+      this.goodsGroupForm = { groupId: "" };
+      this.$nextTick(() => {
+        if (this.$refs.goodsGroupForm) this.$refs.goodsGroupForm.resetFields();
+      });
+      this.loadGoodsGroupList();
+    },
+    submitSetGoodsGroup() {
+      this.$refs.goodsGroupForm.validate((valid) => {
+        if (!valid) return;
+        const goodsIds = this.selectedRows.map((item) => item.id);
+        this.goodsGroupLoading = true;
+        addGoodsGroupItems(this.goodsGroupForm.groupId, goodsIds).then((res) => {
+          this.goodsGroupLoading = false;
+          if (res && res.success) {
+            this.$Message.success("设置成功");
+            this.goodsGroupFlag = false;
+            this.selectedRows = [];
+            this.selectAll = false;
+            if (this.$refs.table && this.$refs.table.selectAll) {
+              this.$refs.table.selectAll(false);
+            }
+            this.getDataList();
+          } else if (res && res.message) {
+            this.$Message.error(res.message);
+          }
+        }).catch(() => {
+          this.goodsGroupLoading = false;
+          this.$Message.error("设置失败，请检查权限或后端接口");
+        });
+      });
     }
   },
   mounted() {

manager/src/views/goods/group/index.vue

@@ -0,0 +1,273 @@
+<template>
+  <div class="search">
+    <Card>
+      <Row class="operation padding-row">
+        <Button type="primary" @click="openAdd">添加分组</Button>
+      </Row>
+      <Table
+        :loading="loading"
+        border
+        :columns="columns"
+        :data="data"
+        ref="table"
+        class="mt_10"
+      ></Table>
+      <Row type="flex" justify="end" class="mt_10">
+        <Page
+          :current="searchForm.pageNumber"
+          :total="total"
+          :page-size="searchForm.pageSize"
+          @on-change="changePage"
+          @on-page-size-change="changePageSize"
+          :page-size-opts="[20, 50, 100]"
+          size="small"
+          show-total
+          show-elevator
+          show-sizer
+        ></Page>
+      </Row>
+    </Card>
+    <Modal v-model="addFlag" title="添加商品分组">
+      <Form ref="addForm" :model="formAdd" :rules="rulesAdd" :label-width="90">
+        <FormItem label="分组名称" prop="groupName" style="width: 90%;">
+          <Input v-model="formAdd.groupName" maxlength="30" placeholder="请输入分组名称" />
+        </FormItem>
+        <FormItem label="分组描述" prop="description" style="width: 90%;">
+          <Input v-model="formAdd.description" maxlength="200" placeholder="请输入分组描述" />
+        </FormItem>
+      </Form>
+      <div slot="footer">
+        <Button @click="addFlag = false">取消</Button>
+        <Button type="primary" :loading="submitAddLoading" @click="submitAdd">确定</Button>
+      </div>
+    </Modal>
+    <Modal v-model="editFlag" title="编辑商品分组">
+      <Form ref="editForm" :model="formEdit" :rules="rulesEdit" :label-width="90">
+        <Input v-model="formEdit.id" v-show="false" />
+        <FormItem label="分组名称" prop="groupName" style="width: 90%;">
+          <Input v-model="formEdit.groupName" maxlength="30" placeholder="请输入分组名称" />
+        </FormItem>
+        <FormItem label="分组描述" prop="description" style="width: 90%;">
+          <Input v-model="formEdit.description" maxlength="200" placeholder="请输入分组描述" />
+        </FormItem>
+      </Form>
+      <div slot="footer">
+        <Button @click="editFlag = false">取消</Button>
+        <Button type="primary" :loading="submitEditLoading" @click="submitEdit">确定</Button>
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import * as API_Goods from "@/api/goods.js";
+
+export default {
+  name: "goodsGroup",
+  data() {
+    return {
+      loading: true,
+      searchForm: {
+        pageNumber: 1,
+        pageSize: 20,
+      },
+      columns: [
+        {
+          title: "分组名称",
+          key: "groupName",
+          minWidth: 160,
+          tooltip: true,
+        },
+        {
+          title: "分组描述",
+          key: "description",
+          minWidth: 240,
+          tooltip: true,
+        },
+        {
+          title: "创建时间",
+          key: "createTime",
+          width: 180,
+        },
+        {
+          title: "更新时间",
+          key: "updateTime",
+          width: 180,
+        },
+        {
+          title: "操作",
+          key: "action",
+          align: "center",
+          width: 200,
+          fixed: "right",
+          render: (h, params) => {
+            const linkStyle = {
+              color: "#2d8cf0",
+              cursor: "pointer",
+              textDecoration: "none",
+            };
+            const sep = h(
+              "span",
+              { style: { margin: "0 8px", color: "#dcdee2" } },
+              "|"
+            );
+            return h("div", { class: "ops", style: { display: "flex", justifyContent: "center" } }, [
+              h("a", { style: linkStyle, on: { click: () => this.openEdit(params.row) } }, "编辑"),
+              sep,
+              h("a", { style: linkStyle, on: { click: () => this.remove(params.row) } }, "删除"),
+            ]);
+          },
+        },
+      ],
+      data: [],
+      total: 0,
+      addFlag: false,
+      editFlag: false,
+      submitAddLoading: false,
+      submitEditLoading: false,
+      formAdd: {
+        groupName: "",
+        description: "",
+      },
+      formEdit: {
+        id: "",
+        groupName: "",
+        description: "",
+      },
+      rulesAdd: {
+        groupName: [{ required: true, message: "请输入分组名称" }],
+      },
+      rulesEdit: {
+        groupName: [{ required: true, message: "请输入分组名称" }],
+      },
+    };
+  },
+  methods: {
+    init() {
+      this.getData();
+    },
+    changePage(v) {
+      this.searchForm.pageNumber = v;
+      this.getData();
+    },
+    changePageSize(v) {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = v;
+      this.getData();
+    },
+    getData() {
+      this.loading = true;
+      API_Goods.getGoodsGroupByPage(this.searchForm)
+        .then((res) => {
+          this.loading = false;
+          if (res && res.success && res.result) {
+            this.data = res.result.records || [];
+            this.total = res.result.total || 0;
+          } else if (res && res.message) {
+            this.$Message.error(res.message);
+          }
+        })
+        .catch(() => {
+          this.loading = false;
+          this.$Message.error("加载商品分组失败");
+        });
+    },
+    openAdd() {
+      this.addFlag = true;
+      this.$nextTick(() => {
+        if (this.$refs.addForm) this.$refs.addForm.resetFields();
+        this.formAdd = { groupName: "", description: "" };
+      });
+    },
+    submitAdd() {
+      this.$refs.addForm.validate((valid) => {
+        if (!valid) return;
+        this.submitAddLoading = true;
+        API_Goods.addGoodsGroup(this.formAdd)
+          .then((res) => {
+            this.submitAddLoading = false;
+            if (res && res.success) {
+              this.$Message.success("添加成功");
+              this.addFlag = false;
+              this.getData();
+            } else if (res && res.message) {
+              this.$Message.error(res.message);
+            }
+          })
+          .catch(() => {
+            this.submitAddLoading = false;
+            this.$Message.error("添加失败，请检查权限或后端接口");
+          });
+      });
+    },
+    openEdit(row) {
+      this.editFlag = true;
+      this.submitEditLoading = false;
+      API_Goods.getGoodsGroup(row.id)
+        .then((res) => {
+          if (res && res.success && res.result) {
+            this.formEdit = {
+              id: res.result.id,
+              groupName: res.result.groupName || "",
+              description: res.result.description || "",
+            };
+          } else {
+            this.formEdit = {
+              id: row.id,
+              groupName: row.groupName || "",
+              description: row.description || "",
+            };
+          }
+        })
+        .catch(() => {
+          this.$Message.error("获取分组详情失败");
+        });
+    },
+    submitEdit() {
+      this.$refs.editForm.validate((valid) => {
+        if (!valid) return;
+        this.submitEditLoading = true;
+        const { id, groupName, description } = this.formEdit;
+        API_Goods.updateGoodsGroup(id, { id, groupName, description })
+          .then((res) => {
+            this.submitEditLoading = false;
+            if (res && res.success) {
+              this.$Message.success("修改成功");
+              this.editFlag = false;
+              this.getData();
+            } else if (res && res.message) {
+              this.$Message.error(res.message);
+            }
+          })
+          .catch(() => {
+            this.submitEditLoading = false;
+            this.$Message.error("修改失败，请检查权限或后端接口");
+          });
+      });
+    },
+    remove(row) {
+      this.$Modal.confirm({
+        title: "提示",
+        content: "<p>确定删除该分组？</p>",
+        onOk: () => {
+          API_Goods.deleteGoodsGroup(row.id)
+            .then((res) => {
+              if (res && res.success) {
+                this.$Message.success("删除成功");
+                this.getData();
+              } else if (res && res.message) {
+                this.$Message.error(res.message);
+              }
+            })
+            .catch(() => {
+              this.$Message.error("删除失败，请检查权限或后端接口");
+            });
+        },
+      });
+    },
+  },
+  mounted() {
+    this.init();
+  },
+};
+</script>