!209 会员：增加用户等级功能

Merge pull request !209 from 疯狂的世界/member_dev

Author: YunaiV

src/api/member/group/index.ts

@@ -0,0 +1,38 @@
+import request from '@/config/axios'
+
+export interface GroupVO {
+  id: number
+  name: string
+  remark: string
+  status: number
+}
+
+// 查询用户分组列表
+export const getGroupPage = async (params: any) => {
+  return await request.get({ url: `/member/group/page`, params })
+}
+
+// 查询用户分组详情
+export const getGroup = async (id: number) => {
+  return await request.get({ url: `/member/group/get?id=` + id })
+}
+
+// 新增用户分组
+export const createGroup = async (data: GroupVO) => {
+  return await request.post({ url: `/member/group/create`, data })
+}
+
+// 查询用户分组 - 精简信息列表
+export const getSimpleGroupList = async () => {
+  return await request.get({ url: `/member/group/list-all-simple` })
+}
+
+// 修改用户分组
+export const updateGroup = async (data: GroupVO) => {
+  return await request.put({ url: `/member/group/update`, data })
+}
+
+// 删除用户分组
+export const deleteGroup = async (id: number) => {
+  return await request.delete({ url: `/member/group/delete?id=` + id })
+}

src/api/member/level/index.ts

@@ -0,0 +1,42 @@
+import request from '@/config/axios'
+
+export interface LevelVO {
+  id: number
+  name: string
+  experience: number
+  value: number
+  discount: number
+  icon: string
+  bgUrl: string
+  status: number
+}
+
+// 查询会员等级列表
+export const getLevelPage = async (params) => {
+  return await request.get({ url: `/member/level/page`, params })
+}
+
+// 查询会员等级详情
+export const getLevel = async (id: number) => {
+  return await request.get({ url: `/member/level/get?id=` + id })
+}
+
+// 查询会员等级 - 精简信息列表
+export const getSimpleLevelList = async () => {
+  return await request.get({ url: `/member/level/list-all-simple` })
+}
+
+// 新增会员等级
+export const createLevel = async (data: LevelVO) => {
+  return await request.post({ url: `/member/level/create`, data })
+}
+
+// 修改会员等级
+export const updateLevel = async (data: LevelVO) => {
+  return await request.put({ url: `/member/level/update`, data })
+}
+
+// 删除会员等级
+export const deleteLevel = async (id: number) => {
+  return await request.delete({ url: `/member/level/delete?id=` + id })
+}

src/api/member/tag/index.ts

@@ -6,7 +6,7 @@ export interface TagVO {
 }
 
 // 查询会员标签列表
-export const getMemberTagPage = async (params) => {
+export const getMemberTagPage = async (params: any) => {
   return await request.get({ url: `/member/tag/page`, params })
 }
 
@@ -15,6 +15,11 @@ export const getMemberTag = async (id: number) => {
   return await request.get({ url: `/member/tag/get?id=` + id })
 }
 
+// 查询会员标签 - 精简信息列表
+export const getSimpleTagList = async () => {
+  return await request.get({ url: `/member/tag/list-all-simple` })
+}
+
 // 新增会员标签
 export const createMemberTag = async (data: TagVO) => {
   return await request.post({ url: `/member/tag/create`, data })

src/views/member/group/GroupForm.vue

@@ -0,0 +1,112 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="600">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入名称" />
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-radio-group v-model="formData.status">
+          <el-radio
+            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+            :key="dict.value"
+            :label="dict.value"
+          >
+            {{ dict.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import * as GroupApi from '@/api/member/group'
+import { CommonStatusEnum } from '@/utils/constants'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  id: undefined,
+  name: undefined,
+  remark: undefined,
+  status: CommonStatusEnum.ENABLE
+})
+const formRules = reactive({
+  name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
+  status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await GroupApi.getGroup(id)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as GroupApi.GroupVO
+    if (formType.value === 'create') {
+      await GroupApi.createGroup(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await GroupApi.updateGroup(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: undefined,
+    remark: undefined,
+    status: CommonStatusEnum.ENABLE
+  }
+  formRef.value?.resetFields()
+}
+</script>

src/views/member/group/components/MemberGroupSelect.vue

@@ -0,0 +1,46 @@
+<template>
+  <el-select v-model="groupId" placeholder="请选择用户分组" clearable class="!w-240px">
+    <el-option
+      v-for="group in groupOptions"
+      :key="group.id"
+      :label="group.name"
+      :value="group.id"
+    />
+  </el-select>
+</template>
+
+<script lang="ts" setup>
+import * as GroupApi from '@/api/member/group'
+
+/** 会员分组选择框 **/
+defineOptions({ name: 'MemberGroupSelect' })
+
+const props = defineProps({
+  /** 下拉框选中值 **/
+  modelValue: {
+    type: Number,
+    default: undefined
+  }
+})
+const emit = defineEmits(['update:modelValue'])
+
+const groupId = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value: any) {
+    emit('update:modelValue', value)
+  }
+})
+
+const groupOptions = ref<GroupApi.GroupVO[]>([])
+
+const getList = async () => {
+  groupOptions.value = await GroupApi.getSimpleGroupList()
+}
+
+/** 初始化 */
+onMounted(() => {
+  getList()
+})
+</script>