feat(会员): 新增会员分组功能

- 添加会员分组管理页面，支持增删改查
- 在会员列表页新增分组筛选和批量设置分组功能
- 扩展会员管理 API，添加分组相关接口
- 配置路由以支持分组页面访问

manager/src/api/member.js

@@ -148,3 +148,25 @@ export const increaseMemberWallet = (params) => {
 export const updateMemberPoint = (params) => {
   return putRequest(`/passport/member/updateMemberPoint`, params);
 };
+
+export const getMemberGroupByPage = (params) => {
+  return getRequest("/member/memberGroup/getByPage", params);
+};
+export const getMemberGroup = (id) => {
+  return getRequest(`/member/memberGroup/get/${id}`);
+};
+export const addMemberGroup = (params) => {
+  return postRequest(`/member/memberGroup`, params);
+};
+export const updateMemberGroup = (id, params) => {
+  return putRequest(`/member/memberGroup/update/${id}`, params);
+};
+export const deleteMemberGroup = (id) => {
+  return deleteRequest(`/member/memberGroup/delete/${id}`);
+};
+
+export const addMemberGroupUsers = (groupId, memberIds) => {
+  return postRequest(`/member/memberGroup/${groupId}/users`, {
+    memberIds: Array.isArray(memberIds) ? memberIds.join(",") : memberIds,
+  });
+};

manager/src/router/router.js

@@ -147,6 +147,12 @@ export const otherRouter = {
       name: "member-detail",
       component: () => import("@/views/member/list/memberDetail.vue")
     },
+    {
+      path: "member-group",
+      title: "会员分组",
+      name: "member-group",
+      component: () => import("@/views/member/group/index.vue")
+    },
 
     {
       path: "goods/goods-info/goodsDetail",

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

@@ -0,0 +1,257 @@
+<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_Member from "@/api/member.js";
+
+export default {
+  name: "memberGroup",
+  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" } },
+              "|"
+            );
+            const children = [
+              h(
+                "a",
+                { style: linkStyle, on: { click: () => this.openEdit(params.row) } },
+                "编辑"
+              ),
+              sep,
+              h(
+                "a",
+                { style: linkStyle, on: { click: () => this.remove(params.row) } },
+                "删除"
+              ),
+            ];
+            return h(
+              "div",
+              { class: "ops", style: { display: "flex", justifyContent: "center" } },
+              children
+            );
+          },
+        },
+      ],
+      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_Member.getMemberGroupByPage(this.searchForm).then((res) => {
+        this.loading = false;
+        if (res && res.success && res.result) {
+          this.data = res.result.records || [];
+          this.total = res.result.total || 0;
+        }
+      });
+    },
+    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_Member.addMemberGroup(this.formAdd).then((res) => {
+          this.submitAddLoading = false;
+          if (res && res.success) {
+            this.$Message.success("添加成功");
+            this.addFlag = false;
+            this.getData();
+          }
+        });
+      });
+    },
+    openEdit(row) {
+      this.editFlag = true;
+      this.submitEditLoading = false;
+      API_Member.getMemberGroup(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 || "",
+          };
+        }
+      });
+    },
+    submitEdit() {
+      this.$refs.editForm.validate((valid) => {
+        if (!valid) return;
+        this.submitEditLoading = true;
+        const { id, groupName, description } = this.formEdit;
+        API_Member.updateMemberGroup(id, { groupName, description }).then((res) => {
+          this.submitEditLoading = false;
+          if (res && res.success) {
+            this.$Message.success("修改成功");
+            this.editFlag = false;
+            this.getData();
+          }
+        });
+      });
+    },
+    remove(row) {
+      this.$Modal.confirm({
+        title: "提示",
+        content: "<p>确定删除该分组？</p>",
+        onOk: () => {
+          API_Member.deleteMemberGroup(row.id).then((res) => {
+            if (res && res.success) {
+              this.$Message.success("删除成功");
+              this.getData();
+            } else if (res && res.message) {
+              this.$Message.error(res.message);
+            }
+          });
+        },
+      });
+    },
+  },
+  mounted() {
+    this.init();
+  },
+};
+</script>

manager/src/views/member/list/index.vue

@@ -18,6 +18,11 @@
           <Form-item label="联系方式" prop="mobile">
             <Input type="text" v-model="searchForm.mobile" placeholder="请输入会员联系方式" clearable style="width: 240px" />
           </Form-item>
+          <Form-item label="会员分组" prop="groupId">
+            <Select v-model="searchForm.groupId" clearable filterable style="width: 240px">
+              <Option v-for="item in memberGroupList" :value="item.id" :key="item.id">{{ item.groupName }}</Option>
+            </Select>
+          </Form-item>
           <Button @click="handleSearch" class="search-btn" type="primary" icon="ios-search">搜索</Button>
         </Form>
       </Row>
@@ -25,9 +30,22 @@
       <Card>
       <Row class="operation padding-row" v-if="!selectedMember">
         <Button @click="addMember" type="primary">添加会员</Button>
+        <Button
+          style="margin-left: 10px;"
+          type="primary"
+          :disabled="selectedRows.length === 0"
+          @click="openSetMemberGroup"
+        >设定会员分组</Button>
       </Row>
 
-      <Table :loading="loading" :columns="columns" class="mt_10" :data="data" ref="table"></Table>
+      <Table
+        :loading="loading"
+        :columns="tableColumns"
+        class="mt_10"
+        :data="data"
+        ref="table"
+        @on-selection-change="onSelectionChange"
+      ></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
@@ -127,6 +145,19 @@
         <Button type="primary" :loading="memberPointLoading" @click="submitMemberPoint">确定</Button>
       </div>
     </Modal>
+    <Modal v-model="memberGroupFlag" title="设定会员分组" width="420">
+      <Form ref="memberGroupForm" :model="memberGroupForm" :rules="memberGroupRule" :label-width="90">
+        <FormItem label="会员分组" prop="groupId">
+          <Select v-model="memberGroupForm.groupId" clearable filterable style="width: 240px">
+            <Option v-for="item in memberGroupList" :value="item.id" :key="item.id">{{ item.groupName }}</Option>
+          </Select>
+        </FormItem>
+      </Form>
+      <div slot="footer">
+        <Button @click="memberGroupFlag = false">取消</Button>
+        <Button type="primary" :loading="memberGroupLoading" @click="submitSetMemberGroup">确定</Button>
+      </div>
+    </Modal>
     <Modal width="1200px" v-model="picModelFlag">
       <ossManage @callback="callbackSelected" :isComponent="true" :initialize="picModelFlag" ref="ossManage" />
     </Modal>
@@ -146,6 +177,19 @@ export default {
     multipleMap,
     ossManage,
   },
+  computed: {
+    tableColumns() {
+      if (this.selectedMember) return this.columns;
+      return [
+        {
+          type: "selection",
+          width: 60,
+          align: "center",
+        },
+        ...this.columns,
+      ];
+    },
+  },
   data() {
     return {
       defaultPic:require('@/assets/default.png'),
@@ -169,6 +213,7 @@ export default {
         username: "",
         mobile: "",
         disabled: "OPEN",
+        groupId: "",
       },
       picModelFlag: false, // 选择图片
       form: {}, // 表单数据
@@ -200,6 +245,16 @@ export default {
         point: null,
         type: "INCREASE",
       },
+      selectedRows: [],
+      memberGroupFlag: false,
+      memberGroupLoading: false,
+      memberGroupForm: {
+        groupId: "",
+      },
+      memberGroupRule: {
+        groupId: [{ required: true, message: "请选择会员分组", trigger: "change" }],
+      },
+      memberGroupList: [],
       memberPointRule: {
         type: [{ required: true, message: "请选择类型", trigger: "change" }],
         point: [
@@ -515,6 +570,52 @@ export default {
     },
   },
   methods: {
+    onSelectionChange(selection) {
+      this.selectedRows = selection || [];
+    },
+    openSetMemberGroup() {
+      this.memberGroupFlag = true;
+      this.memberGroupLoading = false;
+      this.memberGroupForm = { groupId: "" };
+      this.$nextTick(() => {
+        if (this.$refs.memberGroupForm) this.$refs.memberGroupForm.resetFields();
+      });
+      this.loadMemberGroupList();
+    },
+    loadMemberGroupList() {
+      API_Member.getMemberGroupByPage({ pageNumber: 1, pageSize: 1000 }).then((res) => {
+        if (res && res.success && res.result) {
+          this.memberGroupList = res.result.records || [];
+        }
+      });
+    },
+    clearSelection() {
+      if (this.$refs.table && this.$refs.table.clearSelection) {
+        this.$refs.table.clearSelection();
+      }
+    },
+    submitSetMemberGroup() {
+      if (this.selectedRows.length === 0) {
+        this.$Message.warning("请先选择会员");
+        return;
+      }
+      this.$refs.memberGroupForm.validate((valid) => {
+        if (!valid) return;
+        const memberIds = this.selectedRows.map((item) => item.id);
+        this.memberGroupLoading = true;
+        API_Member.addMemberGroupUsers(this.memberGroupForm.groupId, memberIds).then((res) => {
+          this.memberGroupLoading = false;
+          if (res && res.success) {
+            this.$Message.success("设置成功");
+            this.memberGroupFlag = false;
+            this.selectedRows = [];
+            this.clearSelection();
+          } else if (res && res.message) {
+            this.$Message.error(res.message);
+          }
+        });
+      });
+    },
     // 回调给父级
     callback(val, index) {
       this.selectMember.forEach(item=>{item.___selected = false})
@@ -594,6 +695,11 @@ export default {
 
     //查询会员列表
     getData() {
+      this.loading = true;
+      if (!this.selectedMember) {
+        this.selectedRows = [];
+        this.clearSelection();
+      }
       API_Member.getMemberListData(this.searchForm).then((res) => {
         if (res.result.records) {
           this.loading = false;
@@ -759,6 +865,9 @@ export default {
   },
   mounted() {
     this.getData();
+    if (!this.selectedMember) {
+      this.loadMemberGroupList();
+    }
   },
 };
 </script>