yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: 新增会员管理模块，包括用户、等级、标签、签到配置等功能

pull/166/head
吃货 2025-07-05 07:50:55 +08:00
parent 361ae581ae
commit 59cf72ab9c
35 changed files with 3392 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web-ele/src/components/table-action/table-action.vue
View File

@ -210,7 +210,7 @@ function handleMenuClick(command: any) {
<ElDropdown v-if="getDropdownList.length > 0" @command="handleMenuClick">
<slot name="more">
<ElButton :type="getDropdownList[0].type">
<ElButton :type="getDropdownList[0].type" link>
{{ $t('page.action.more') }}
<IconifyIcon icon="lucide:ellipsis-vertical" class="ml-1" />
</ElButton>

16
apps/web-ele/src/router/routes/modules/member.ts Normal file
View File

@ -0,0 +1,16 @@
import type { RouteRecordRaw } from 'vue-router';
const routes: RouteRecordRaw[] = [
{
path: '/member/user/detail',
component: () => import('#/views/member/user/modules/detail.vue'),
name: 'MemberUserDetail',
meta: {
title: '会员详情',
icon: 'lucide:user',
hideInMenu: true,
},
},
];
export default routes;

16
apps/web-ele/src/router/routes/modules/pay.ts Normal file
View File

@ -0,0 +1,16 @@
import type { RouteRecordRaw } from 'vue-router';
const routes: RouteRecordRaw[] = [
{
path: '/pay/cashier',
component: () => import('#/views/pay/cashier/index.vue'),
name: 'PayCashier',
meta: {
title: '收银台',
icon: 'lucide:badge-japanese-yen',
hideInMenu: true,
},
},
];
export default routes;

114
apps/web-ele/src/views/member/config/index.vue Normal file
View File

@ -0,0 +1,114 @@
<script lang="ts" setup>
import type { MemberConfigApi } from '#/api/member/config';
import { onMounted, ref } from 'vue';
import { Page } from '@vben/common-ui';
import { ElCard, ElMessage } from 'element-plus';
import { useVbenForm } from '#/adapter/form';
import { getConfig, saveConfig } from '#/api/member/config';
import { $t } from '#/locales';
const emit = defineEmits(['success']);
const formData = ref<MemberConfigApi.Config>();
const [Form, formApi] = useVbenForm({
commonConfig: {
// 所有表单项
labelClass: 'w-2/6',
},
layout: 'horizontal',
wrapperClass: 'grid-cols-1',
actionWrapperClass: 'text-center',
schema: [
{
component: 'Input',
fieldName: 'id',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
component: 'Switch',
fieldName: 'pointTradeDeductEnable',
label: '积分抵扣',
help: '开启后，用户可以积分抵扣',
},
{
component: 'InputNumber',
fieldName: 'pointTradeDeductUnitPrice',
label: '积分抵扣单价',
help: '用户每消费1元，可以抵扣多少积分',
componentProps: {
min: 0,
precision: 2,
class: 'w-full',
},
},
{
component: 'InputNumber',
fieldName: 'pointTradeDeductMaxPrice',
label: '积分抵扣最大值',
help: '单次下单积分使用上限，0 不限制',
componentProps: {
min: 0,
class: 'w-full',
},
},
{
component: 'InputNumber',
fieldName: 'pointTradeGivePoint',
label: '1 元赠送多少分',
help: '下单支付金额按比例赠送积分（实际支付 1 元赠送多少积分）',
componentProps: {
min: 0,
class: 'w-full',
},
},
],
// 提交函数
handleSubmit: onSubmit,
});
async function onSubmit() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
// 提交表单
const data = (await formApi.getValues()) as MemberConfigApi.Config;
formApi.setState({ commonConfig: { disabled: true } });
try {
await saveConfig(data);
// 关闭并提示
emit('success');
ElMessage.success($t('ui.actionMessage.operationSuccess'));
} finally {
formApi.setState({ commonConfig: { disabled: false } });
}
}
async function getConfigInfo() {
try {
const res = await getConfig();
formData.value = res;
} catch (error) {
console.error(error);
}
}
onMounted(() => {
getConfigInfo();
});
</script>
<template>
<Page auto-content-height>
<ElCard title="积分设置">
<Form class="w-1/4" />
</ElCard>
</Page>
</template>

88
apps/web-ele/src/views/member/group/data.ts Normal file
View File

@ -0,0 +1,88 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { z } from '#/adapter/form';
import { CommonStatusEnum, DICT_TYPE, getDictOptions } from '#/utils';
/** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
return [
{
component: 'Input',
fieldName: 'id',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
component: 'Input',
fieldName: 'name',
label: '分组名称',
},
{
fieldName: 'status',
label: '状态',
component: 'RadioGroup',
componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
buttonStyle: 'solid',
optionType: 'button',
},
rules: z.number().default(CommonStatusEnum.ENABLE),
},
];
}
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'name',
label: '分组名称',
component: 'Input',
},
{
fieldName: 'status',
label: '状态',
component: 'Select',
componentProps: {
allowClear: true,
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
},
},
];
}
/** 列表的字段 */
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{
field: 'id',
title: '编号',
},
{
field: 'name',
title: '分组名称',
},
{
field: 'status',
title: '状态',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.COMMON_STATUS },
},
},
{
field: 'createTime',
title: '创建时间',
formatter: 'formatDateTime',
},
{
title: '操作',
width: 130,
fixed: 'right',
slots: { default: 'actions' },
},
];
}

126
apps/web-ele/src/views/member/group/index.vue Normal file
View File

@ -0,0 +1,126 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MemberGroupApi } from '#/api/member/group';
import { Page, useVbenModal } from '@vben/common-ui';
import { ElMessage } from 'element-plus';
import { ElLoading } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteGroup, getGroupPage } from '#/api/member/group';
import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
destroyOnClose: true,
});
/** 刷新表格 */
function onRefresh() {
gridApi.query();
}
/** 创建分组 */
function handleCreate() {
formModalApi.setData(null).open();
}
/** 编辑分组 */
function handleEdit(row: MemberGroupApi.Group) {
formModalApi.setData(row).open();
}
/** 删除分组 */
async function handleDelete(row: MemberGroupApi.Group) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
fullscreen: true,
});
try {
await deleteGroup(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
loadingInstance.close();
}
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(),
height: 'auto',
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await getGroupPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<MemberGroupApi.Group>,
});
</script>
<template>
<Page auto-content-height>
<FormModal @success="onRefresh" />
<Grid table-title="分组列表">
<template #toolbar-tools>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', ['分组']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['member:group:create'],
onClick: handleCreate,
},
]"
/>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: $t('common.edit'),
type: 'primary',
link: true,
icon: ACTION_ICON.EDIT,
auth: ['member:group:update'],
onClick: handleEdit.bind(null, row),
},
{
label: $t('common.delete'),
type: 'danger',
link: true,
icon: ACTION_ICON.DELETE,
auth: ['member:group:delete'],
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.name]),
confirm: handleDelete.bind(null, row),
},
},
]"
/>
</template>
</Grid>
</Page>
</template>

82
apps/web-ele/src/views/member/group/modules/form.vue Normal file
View File

@ -0,0 +1,82 @@
<script lang="ts" setup>
import type { MemberGroupApi } from '#/api/member/group';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { ElMessage } from 'element-plus';
import { useVbenForm } from '#/adapter/form';
import { createGroup, getGroup, updateGroup } from '#/api/member/group';
import { $t } from '#/locales';
import { useFormSchema } from '../data';
const emit = defineEmits(['success']);
const formData = ref<MemberGroupApi.Group>();
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['会员分组'])
: $t('ui.actionTitle.create', ['会员分组']);
});
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
},
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as MemberGroupApi.Group;
try {
await (formData.value?.id ? updateGroup(data) : createGroup(data));
// 关闭并提示
await modalApi.close();
emit('success');
ElMessage.success($t('ui.actionMessage.operationSuccess'));
} finally {
modalApi.unlock();
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
return;
}
// 加载数据
const data = modalApi.getData<MemberGroupApi.Group>();
if (!data || !data.id) {
return;
}
modalApi.lock();
try {
formData.value = await getGroup(data.id as number);
// 设置到 values
await formApi.setValues(formData.value);
} finally {
modalApi.unlock();
}
},
});
</script>
<template>
<Modal class="w-2/5" :title="getTitle">
<Form class="mx-4" />
</Modal>
</template>

152
apps/web-ele/src/views/member/level/data.ts Normal file
View File

@ -0,0 +1,152 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { z } from '#/adapter/form';
import { CommonStatusEnum, DICT_TYPE, getDictOptions } from '#/utils';
/** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
return [
{
component: 'Input',
fieldName: 'id',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
component: 'Input',
fieldName: 'name',
label: '等级名称',
},
{
component: 'InputNumber',
fieldName: 'level',
label: '等级',
componentProps: {
min: 0,
precision: 0,
},
},
{
fieldName: 'experience',
label: '升级经验',
component: 'InputNumber',
componentProps: {
min: 0,
precision: 0,
},
},
{
fieldName: 'discountPercent',
label: '享受折扣(%)',
component: 'InputNumber',
componentProps: {
min: 0,
max: 100,
precision: 0,
},
},
{
component: 'ImageUpload',
fieldName: 'icon',
label: '等级图标',
},
{
component: 'ImageUpload',
fieldName: 'backgroundUrl',
label: '等级背景图',
},
{
fieldName: 'status',
label: '状态',
component: 'RadioGroup',
componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
buttonStyle: 'solid',
optionType: 'button',
},
rules: z.number().default(CommonStatusEnum.ENABLE),
},
];
}
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'name',
label: '等级名称',
component: 'Input',
},
{
fieldName: 'status',
label: '状态',
component: 'Select',
componentProps: {
allowClear: true,
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
},
},
];
}
/** 列表的字段 */
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{
field: 'id',
title: '编号',
},
{
field: 'icon',
title: '等级图标',
cellRender: {
name: 'CellImage',
},
},
{
field: 'backgroundUrl',
title: '等级背景图',
cellRender: {
name: 'CellImage',
},
},
{
field: 'name',
title: '等级名称',
},
{
field: 'level',
title: '等级',
},
{
field: 'experience',
title: '升级经验',
},
{
field: 'discountPercent',
title: '享受折扣(%)',
},
{
field: 'status',
title: '状态',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.COMMON_STATUS },
},
},
{
field: 'createTime',
title: '创建时间',
formatter: 'formatDateTime',
},
{
title: '操作',
width: 130,
fixed: 'right',
slots: { default: 'actions' },
},
];
}

126
apps/web-ele/src/views/member/level/index.vue Normal file
View File

@ -0,0 +1,126 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MemberLevelApi } from '#/api/member/level';
import { Page, useVbenModal } from '@vben/common-ui';
import { ElLoading, ElMessage } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteLevel, getLevelList } from '#/api/member/level';
import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
destroyOnClose: true,
});
/** 刷新表格 */
function onRefresh() {
gridApi.query();
}
/** 创建等级 */
function handleCreate() {
formModalApi.setData(null).open();
}
/** 编辑等级 */
function handleEdit(row: MemberLevelApi.Level) {
formModalApi.setData(row).open();
}
/** 删除等级 */
async function handleDelete(row: MemberLevelApi.Level) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
fullscreen: true,
});
try {
await deleteLevel(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
loadingInstance.close();
}
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(),
height: 'auto',
keepSource: true,
pagerConfig: {
enabled: false,
},
proxyConfig: {
ajax: {
query: async (_params, formValues) => {
return await getLevelList({
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<MemberLevelApi.Level>,
});
</script>
<template>
<Page auto-content-height>
<FormModal @success="onRefresh" />
<Grid table-title="等级列表">
<template #toolbar-tools>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', ['等级']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['member:level:create'],
onClick: handleCreate,
},
]"
/>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: $t('common.edit'),
type: 'primary',
link: true,
icon: ACTION_ICON.EDIT,
auth: ['member:level:update'],
onClick: handleEdit.bind(null, row),
},
{
label: $t('common.delete'),
type: 'danger',
link: true,
icon: ACTION_ICON.DELETE,
auth: ['member:level:delete'],
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.name]),
confirm: handleDelete.bind(null, row),
},
},
]"
/>
</template>
</Grid>
</Page>
</template>

82
apps/web-ele/src/views/member/level/modules/form.vue Normal file
View File

@ -0,0 +1,82 @@
<script lang="ts" setup>
import type { MemberLevelApi } from '#/api/member/level';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { ElMessage } from 'element-plus';
import { useVbenForm } from '#/adapter/form';
import { createLevel, getLevel, updateLevel } from '#/api/member/level';
import { $t } from '#/locales';
import { useFormSchema } from '../data';
const emit = defineEmits(['success']);
const formData = ref<MemberLevelApi.Level>();
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['等级'])
: $t('ui.actionTitle.create', ['等级']);
});
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
},
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as MemberLevelApi.Level;
try {
await (formData.value?.id ? updateLevel(data) : createLevel(data));
// 关闭并提示
await modalApi.close();
emit('success');
ElMessage.success($t('ui.actionMessage.operationSuccess'));
} finally {
modalApi.unlock();
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
return;
}
// 加载数据
const data = modalApi.getData<MemberLevelApi.Level>();
if (!data || !data.id) {
return;
}
modalApi.lock();
try {
formData.value = await getLevel(data.id as number);
// 设置到 values
await formApi.setValues(formData.value);
} finally {
modalApi.unlock();
}
},
});
</script>
<template>
<Modal class="w-2/5" :title="getTitle">
<Form class="mx-4" />
</Modal>
</template>

101
apps/web-ele/src/views/member/point/record/data.ts Normal file
View File

@ -0,0 +1,101 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { h } from 'vue';
import { ElTag } from 'element-plus';
import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'nickname',
label: '用户',
component: 'Input',
},
{
fieldName: 'bizType',
label: '业务类型',
component: 'Select',
componentProps: {
allowClear: true,
options: getDictOptions(DICT_TYPE.MEMBER_POINT_BIZ_TYPE, 'number'),
},
},
{
fieldName: 'title',
label: '积分标题',
component: 'Input',
},
{
fieldName: 'createDate',
label: '获得时间',
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
allowClear: true,
},
},
];
}
/** 列表的字段 */
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{
field: 'id',
title: '编号',
},
{
field: 'createTime',
title: '获得时间',
formatter: 'formatDateTime',
},
{
field: 'nickname',
title: '用户',
},
{
field: 'point',
title: '获得积分',
slots: {
default: ({ row }) => {
return h(
ElTag,
{
class: 'mr-1',
color: row.point > 0 ? 'blue' : 'red',
},
() => (row.point > 0 ? `+${row.point}` : row.point),
);
},
},
},
{
field: 'totalPoint',
title: '总积分',
},
{
field: 'title',
title: '标题',
},
{
field: 'description',
title: '描述',
},
{
field: 'bizId',
title: '业务编码',
},
{
field: 'bizType',
title: '业务类型',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.MEMBER_POINT_BIZ_TYPE },
},
},
];
}

46
apps/web-ele/src/views/member/point/record/index.vue Normal file
View File

@ -0,0 +1,46 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MemberPointRecordApi } from '#/api/member/point/record';
import { Page } from '@vben/common-ui';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getRecordPage } from '#/api/member/point/record';
import { useGridColumns, useGridFormSchema } from './data';
const [Grid] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(),
height: 'auto',
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await getRecordPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<MemberPointRecordApi.Record>,
});
</script>
<template>
<Page auto-content-height>
<Grid table-title="积分记录列表" />
</Page>
</template>

101
apps/web-ele/src/views/member/signin/config/data.ts Normal file
View File

@ -0,0 +1,101 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { z } from '#/adapter/form';
import { CommonStatusEnum, DICT_TYPE, getDictOptions } from '#/utils';
/** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
return [
{
component: 'Input',
fieldName: 'id',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
component: 'InputNumber',
fieldName: 'day',
label: '签到天数',
help: '只允许设置 1-7，默认签到 7 天为一个周期',
componentProps: {
min: 1,
max: 7,
precision: 0,
},
},
{
component: 'InputNumber',
fieldName: 'point',
label: '获得积分',
componentProps: {
min: 0,
precision: 0,
},
},
{
component: 'InputNumber',
fieldName: 'experience',
label: '奖励经验',
componentProps: {
min: 0,
precision: 0,
},
},
{
fieldName: 'status',
label: '状态',
component: 'RadioGroup',
componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
buttonStyle: 'solid',
optionType: 'button',
},
rules: z.number().default(CommonStatusEnum.ENABLE),
},
];
}
/** 列表的字段 */
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{
field: 'id',
title: '编号',
},
{
field: 'day',
title: '签到天数',
formatter: ({ cellValue }) => ['第', cellValue, '天'].join(' '),
},
{
field: 'point',
title: '获得积分',
},
{
field: 'experience',
title: '奖励经验',
},
{
field: 'status',
title: '状态',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.COMMON_STATUS },
},
},
{
field: 'createTime',
title: '创建时间',
formatter: 'formatDateTime',
},
{
title: '操作',
width: 130,
fixed: 'right',
slots: { default: 'actions' },
},
];
}

124
apps/web-ele/src/views/member/signin/config/index.vue Normal file
View File

@ -0,0 +1,124 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MemberSignInConfigApi } from '#/api/member/signin/config';
import { Page, useVbenModal } from '@vben/common-ui';
import { ElLoading, ElMessage } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import {
deleteSignInConfig,
getSignInConfigList,
} from '#/api/member/signin/config';
import { $t } from '#/locales';
import { useGridColumns } from './data';
import Form from './modules/form.vue';
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
destroyOnClose: true,
});
/** 刷新表格 */
function onRefresh() {
gridApi.query();
}
/** 创建签到配置 */
function handleCreate() {
formModalApi.setData(null).open();
}
/** 编辑签到配置 */
function handleEdit(row: MemberSignInConfigApi.SignInConfig) {
formModalApi.setData(row).open();
}
/** 删除签到配置 */
async function handleDelete(row: MemberSignInConfigApi.SignInConfig) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting'),
fullscreen: true,
});
try {
await deleteSignInConfig(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess'));
onRefresh();
} finally {
loadingInstance.close();
}
}
const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
columns: useGridColumns(),
height: 'auto',
keepSource: true,
pagerConfig: {
enabled: false,
},
proxyConfig: {
ajax: {
query: async () => {
return await getSignInConfigList();
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<MemberSignInConfigApi.SignInConfig>,
});
</script>
<template>
<Page auto-content-height>
<FormModal @success="onRefresh" />
<Grid table-title="签到配置列表">
<template #toolbar-tools>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', ['签到配置']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['point:sign-in-config:create'],
onClick: handleCreate,
},
]"
/>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: $t('common.edit'),
type: 'primary',
link: true,
icon: ACTION_ICON.EDIT,
auth: ['point:sign-in-config:update'],
onClick: handleEdit.bind(null, row),
},
{
label: $t('common.delete'),
type: 'danger',
link: true,
icon: ACTION_ICON.DELETE,
auth: ['point:sign-in-config:delete'],
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.name]),
confirm: handleDelete.bind(null, row),
},
},
]"
/>
</template>
</Grid>
</Page>
</template>

89
apps/web-ele/src/views/member/signin/config/modules/form.vue Normal file
View File

@ -0,0 +1,89 @@
<script lang="ts" setup>
import type { MemberSignInConfigApi } from '#/api/member/signin/config';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { ElMessage } from 'element-plus';
import { useVbenForm } from '#/adapter/form';
import {
createSignInConfig,
getSignInConfig,
updateSignInConfig,
} from '#/api/member/signin/config';
import { $t } from '#/locales';
import { useFormSchema } from '../data';
const emit = defineEmits(['success']);
const formData = ref<MemberSignInConfigApi.SignInConfig>();
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['签到配置'])
: $t('ui.actionTitle.create', ['签到配置']);
});
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
},
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const data =
(await formApi.getValues()) as MemberSignInConfigApi.SignInConfig;
try {
await (formData.value?.id
? updateSignInConfig(data)
: createSignInConfig(data));
// 关闭并提示
await modalApi.close();
emit('success');
ElMessage.success($t('ui.actionMessage.operationSuccess'));
} finally {
modalApi.unlock();
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
return;
}
// 加载数据
const data = modalApi.getData<MemberSignInConfigApi.SignInConfig>();
if (!data || !data.id) {
return;
}
modalApi.lock();
try {
formData.value = await getSignInConfig(data.id as number);
// 设置到 values
await formApi.setValues(formData.value);
} finally {
modalApi.unlock();
}
},
});
</script>
<template>
<Modal class="w-2/5" :title="getTitle">
<Form class="mx-4" />
</Modal>
</template>

73
apps/web-ele/src/views/member/signin/record/data.ts Normal file
View File

@ -0,0 +1,73 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { h } from 'vue';
import { ElTag } from 'element-plus';
import { getRangePickerDefaultProps } from '#/utils';
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'nickname',
label: '签到用户',
component: 'Input',
},
{
fieldName: 'day',
label: '签到天数',
component: 'Input',
},
{
fieldName: 'createTime',
label: '签到时间',
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
allowClear: true,
},
},
];
}
/** 列表的字段 */
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{
field: 'id',
title: '编号',
},
{
field: 'nickname',
title: '签到用户',
},
{
field: 'day',
title: '签到天数',
formatter: ({ cellValue }) => ['第', cellValue, '天'].join(' '),
},
{
field: 'point',
title: '获得积分',
slots: {
default: ({ row }) => {
return h(
ElTag,
{
class: 'mr-5px',
color: row.point > 0 ? 'blue' : 'red',
},
() => (row.point > 0 ? `+${row.point}` : row.point),
);
},
},
},
{
field: 'createTime',
title: '签到时间',
formatter: 'formatDateTime',
},
];
}

46
apps/web-ele/src/views/member/signin/record/index.vue Normal file
View File

@ -0,0 +1,46 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MemberSignInRecordApi } from '#/api/member/signin/record';
import { Page } from '@vben/common-ui';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getSignInRecordPage } from '#/api/member/signin/record';
import { useGridColumns, useGridFormSchema } from './data';
const [Grid] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(),
height: 'auto',
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await getSignInRecordPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<MemberSignInRecordApi.SignInRecord>,
});
</script>
<template>
<Page auto-content-height>
<Grid table-title="签到记录列表" />
</Page>
</template>

68
apps/web-ele/src/views/member/tag/data.ts Normal file
View File

@ -0,0 +1,68 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { getRangePickerDefaultProps } from '#/utils';
/** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
return [
{
component: 'Input',
fieldName: 'id',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
component: 'Input',
fieldName: 'name',
label: '标签名称',
rules: 'required',
},
];
}
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'name',
label: '标签名称',
component: 'Input',
},
{
fieldName: 'createTime',
label: '创建时间',
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
},
},
];
}
/** 列表的字段 */
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{
field: 'id',
title: '编号',
},
{
field: 'name',
title: '标签名称',
},
{
field: 'createTime',
title: '创建时间',
formatter: 'formatDateTime',
},
{
title: '操作',
width: 150,
fixed: 'right',
slots: { default: 'actions' },
},
];
}

131
apps/web-ele/src/views/member/tag/index.vue Normal file
View File

@ -0,0 +1,131 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MemberTagApi } from '#/api/member/tag';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { ElLoading, ElMessage } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteMemberTag, getMemberTagPage } from '#/api/member/tag';
import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue';
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
destroyOnClose: true,
});
/** 刷新表格 */
function onRefresh() {
gridApi.query();
}
/** 创建会员标签 */
function handleCreate() {
formModalApi.setData(null).open();
}
/** 编辑会员标签 */
function handleEdit(row: MemberTagApi.Tag) {
formModalApi.setData(row).open();
}
/** 删除会员标签 */
async function handleDelete(row: MemberTagApi.Tag) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
fullscreen: true,
});
try {
await deleteMemberTag(row.id as number);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
} finally {
loadingInstance.close();
}
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(),
height: 'auto',
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await getMemberTagPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<MemberTagApi.Tag>,
});
</script>
<template>
<Page auto-content-height>
<template #doc>
<DocAlert
title="会员用户、标签、分组"
url="https://doc.iocoder.cn/member/user/"
/>
</template>
<FormModal @success="onRefresh" />
<Grid table-title="会员标签列表">
<template #toolbar-tools>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.create', ['会员标签']),
type: 'primary',
icon: ACTION_ICON.ADD,
auth: ['member:tag:create'],
onClick: handleCreate,
},
]"
/>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: $t('common.edit'),
type: 'primary',
link: true,
icon: ACTION_ICON.EDIT,
auth: ['member:tag:update'],
onClick: handleEdit.bind(null, row),
},
{
label: $t('common.delete'),
type: 'danger',
link: true,
icon: ACTION_ICON.DELETE,
auth: ['member:tag:delete'],
popConfirm: {
title: $t('ui.actionMessage.deleteConfirm', [row.name]),
confirm: handleDelete.bind(null, row),
},
},
]"
/>
</template>
</Grid>
</Page>
</template>

88
apps/web-ele/src/views/member/tag/modules/form.vue Normal file
View File

@ -0,0 +1,88 @@
<script lang="ts" setup>
import type { MemberTagApi } from '#/api/member/tag';
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { ElMessage } from 'element-plus';
import { useVbenForm } from '#/adapter/form';
import {
createMemberTag,
getMemberTag,
updateMemberTag,
} from '#/api/member/tag';
import { $t } from '#/locales';
import { useFormSchema } from '../data';
const emit = defineEmits(['success']);
const formData = ref<MemberTagApi.Tag>();
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['会员标签'])
: $t('ui.actionTitle.create', ['会员标签']);
});
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
},
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as MemberTagApi.Tag;
try {
await (formData.value?.id
? updateMemberTag(data)
: createMemberTag(data));
// 关闭并提示
await modalApi.close();
emit('success');
ElMessage.success($t('ui.actionMessage.operationSuccess'));
} finally {
modalApi.unlock();
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
return;
}
// 加载数据
const data = modalApi.getData<MemberTagApi.Tag>();
if (!data || !data.id) {
return;
}
modalApi.lock();
try {
formData.value = await getMemberTag(data.id as number);
// 设置到 values
await formApi.setValues(formData.value);
} finally {
modalApi.unlock();
}
},
});
</script>
<template>
<Modal class="w-2/5" :title="getTitle">
<Form class="mx-4" />
</Modal>
</template>

87
apps/web-ele/src/views/member/user/components/user-account-info.vue Normal file
View File

@ -0,0 +1,87 @@
<script setup lang="ts">
import type { MemberUserApi } from '#/api/member/user';
import type { PayWalletApi } from '#/api/pay/wallet/balance';
import { fenToYuan } from '@vben/utils';
import { ElCard } from 'element-plus';
import { useDescription } from '#/components/description';
withDefaults(
defineProps<{
mode?: 'kefu' | 'member';
user: MemberUserApi.User;
wallet: PayWalletApi.Wallet;
}>(),
{
mode: 'member',
},
);
const [Description] = useDescription({
componentProps: {
border: false,
column: 2,
direction: 'horizontal',
labelWidth: 100,
title: '',
extra: '',
},
schema: [
{
field: 'levelName',
label: '等级',
content: (data) => data.levelName || '无',
},
{
field: 'experience',
label: '成长值',
content: (data) => data.experience || 0,
},
{
field: 'point',
label: '当前积分',
content: (data) => data.point || 0,
},
{
field: 'totalPoint',
label: '总积分',
content: (data) => data.totalPoint || 0,
},
{
field: 'balance',
label: '当前余额',
content: (data) => fenToYuan(data.balance || 0),
},
{
field: 'totalExpense',
label: '支出金额',
content: (data) => fenToYuan(data.totalExpense || 0),
},
{
field: 'totalRecharge',
label: '充值金额',
content: (data) => fenToYuan(data.totalRecharge || 0),
},
],
});
</script>
<template>
<ElCard>
<template #title>
<slot name="title"></slot>
</template>
<template #extra>
<slot name="extra"></slot>
</template>
<Description
:column="mode === 'member' ? 2 : 1"
:data="{
...user,
...wallet,
}"
/>
</ElCard>
</template>

87
apps/web-ele/src/views/member/user/components/user-address-list.vue Normal file
View File

@ -0,0 +1,87 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MemberAddressApi } from '#/api/member/address';
import { h } from 'vue';
import { ElTag } from 'element-plus';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getAddressList } from '#/api/member/address';
const props = defineProps<{
userId: number;
}>();
const [Grid] = useVbenVxeGrid({
gridOptions: {
columns: [
{
field: 'id',
title: '地址编号',
},
{
field: 'name',
title: '收件人名称',
},
{
field: 'mobile',
title: '手机号',
},
{
field: 'areaId',
title: '地区编码',
},
{
field: 'detailAddress',
title: '收件详细地址',
},
{
field: 'defaultStatus',
title: '是否默认',
slots: {
default: ({ row }) => {
return h(
ElTag,
{
class: 'mr-1',
color: row.defaultStatus ? 'blue' : 'red',
},
() => (row.defaultStatus ? '是' : '否'),
);
},
},
},
{
field: 'createTime',
title: '创建时间',
formatter: 'formatDateTime',
},
],
keepSource: true,
pagerConfig: {
enabled: false,
},
proxyConfig: {
ajax: {
query: async () => {
return await getAddressList({
userId: props.userId,
});
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<MemberAddressApi.Address>,
});
</script>
<template>
<Grid />
</template>

68
apps/web-ele/src/views/member/user/components/user-balance-list.vue Normal file
View File

@ -0,0 +1,68 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { WalletTransactionApi } from '#/api/pay/wallet/transaction';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getTransactionPage } from '#/api/pay/wallet/transaction';
const props = defineProps<{
walletId: number | undefined;
}>();
const [Grid] = useVbenVxeGrid({
gridOptions: {
columns: [
{
field: 'id',
title: '编号',
},
{
field: 'title',
title: '关联业务标题',
},
{
field: 'price',
title: '交易金额',
formatter: 'formatAmount2',
},
{
field: 'balance',
title: '钱包余额',
formatter: 'formatAmount2',
},
{
field: 'createTime',
title: '交易时间',
formatter: 'formatDateTime',
},
],
keepSource: true,
pagerConfig: {
pageSize: 10,
},
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await getTransactionPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
walletId: props.walletId,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<WalletTransactionApi.Transaction>,
});
</script>
<template>
<Grid />
</template>

100
apps/web-ele/src/views/member/user/components/user-basic-info.vue Normal file
View File

@ -0,0 +1,100 @@
<script setup lang="ts">
import type { MemberUserApi } from '#/api/member/user';
import { h } from 'vue';
import { formatDate } from '@vben/utils';
import { ElAvatar, ElCard, ElCol, ElRow } from 'element-plus';
import { useDescription } from '#/components/description';
import { DictTag } from '#/components/dict-tag';
import { DICT_TYPE } from '#/utils';
withDefaults(
defineProps<{ mode?: 'kefu' | 'member'; user: MemberUserApi.User }>(),
{
mode: 'member',
},
);
const [Description] = useDescription({
componentProps: {
border: false,
column: 2,
direction: 'horizontal',
labelWidth: 100,
title: '',
extra: '',
},
schema: [
{
field: 'name',
label: '用户名',
},
{
field: 'nickname',
label: '昵称',
},
{
field: 'mobile',
label: '手机号',
},
{
field: 'sex',
label: '性别',
content: (data) =>
h(DictTag, {
type: DICT_TYPE.SYSTEM_USER_SEX,
value: data.sex,
}),
},
{
field: 'areaName',
label: '所在地',
},
{
field: 'registerIp',
label: '注册 IP',
},
{
field: 'birthday',
label: '生日',
content: (data) => formatDate(data.birthday)?.toString() || '空',
},
{
field: 'createTime',
label: '注册时间',
content: (data) => formatDate(data.createTime)?.toString() || '空',
},
{
field: 'loginDate',
label: '最后登录时间',
content: (data) => formatDate(data.loginDate)?.toString() || '空',
},
],
});
</script>
<template>
<ElCard>
<template #title>
<slot name="title"></slot>
</template>
<template #extra>
<slot name="extra"></slot>
</template>
<ElRow v-if="mode === 'member'" :gutter="24">
<ElCol :span="4">
<ElAvatar :size="140" shape="square" :src="user.avatar" />
</ElCol>
<ElCol :span="20">
<Description :column="2" :data="user" />
</ElCol>
</ElRow>
<template v-else-if="mode === 'kefu'">
<ElAvatar :size="140" shape="square" :src="user.avatar" />
<Description :column="1" :data="user" />
</template>
</ElCard>
</template>

131
apps/web-ele/src/views/member/user/components/user-experience-record-list.vue Normal file
View File

@ -0,0 +1,131 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MemberExperienceRecordApi } from '#/api/member/experience-record';
import { h } from 'vue';
import { ElTag } from 'element-plus';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getExperienceRecordPage } from '#/api/member/experience-record';
import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
const props = defineProps<{
userId: number;
}>();
const [Grid] = useVbenVxeGrid({
formOptions: {
schema: [
{
fieldName: 'bizType',
label: '业务类型',
component: 'Select',
componentProps: {
allowClear: true,
options: getDictOptions(
DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE,
'number',
),
},
},
{
fieldName: 'title',
label: '标题',
component: 'Input',
},
{
fieldName: 'createDate',
label: '获得时间',
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
allowClear: true,
},
},
],
},
gridOptions: {
columns: [
{
field: 'id',
title: '编号',
},
{
field: 'createTime',
title: '获得时间',
formatter: 'formatDateTime',
},
{
field: 'experience',
title: '经验',
slots: {
default: ({ row }) => {
return h(
ElTag,
{
class: 'mr-1',
color: row.experience > 0 ? 'blue' : 'red',
},
() =>
row.experience > 0 ? `+${row.experience}` : row.experience,
);
},
},
},
{
field: 'totalExperience',
title: '总经验',
},
{
field: 'title',
title: '标题',
},
{
field: 'description',
title: '描述',
},
{
field: 'bizId',
title: '业务编号',
},
{
field: 'bizType',
title: '业务类型',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE },
},
},
],
keepSource: true,
pagerConfig: {
pageSize: 10,
},
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await getExperienceRecordPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
userId: props.userId,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<MemberExperienceRecordApi.ExperienceRecord>,
separator: false,
});
</script>
<template>
<Grid />
</template>

74
apps/web-ele/src/views/member/user/components/user-point-list.vue Normal file
View File

@ -0,0 +1,74 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MemberPointRecordApi } from '#/api/member/point/record';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getRecordPage } from '#/api/member/point/record';
import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
import { useGridColumns } from '#/views/member/point/record/data';
const props = defineProps<{
userId: number;
}>();
const [Grid] = useVbenVxeGrid({
formOptions: {
schema: [
{
fieldName: 'bizType',
label: '业务类型',
component: 'Select',
componentProps: {
allowClear: true,
options: getDictOptions(DICT_TYPE.MEMBER_POINT_BIZ_TYPE, 'number'),
},
},
{
fieldName: 'title',
label: '积分标题',
component: 'Input',
},
{
fieldName: 'createDate',
label: '获得时间',
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
allowClear: true,
},
},
],
},
gridOptions: {
columns: useGridColumns(),
keepSource: true,
pagerConfig: {
pageSize: 10,
},
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await getRecordPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
userId: props.userId,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<MemberPointRecordApi.Record>,
separator: false,
});
</script>
<template>
<Grid />
</template>

65
apps/web-ele/src/views/member/user/components/user-sign-list.vue Normal file
View File

@ -0,0 +1,65 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MemberSignInRecordApi } from '#/api/member/signin/record';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getSignInRecordPage } from '#/api/member/signin/record';
import { getRangePickerDefaultProps } from '#/utils';
import { useGridColumns } from '#/views/member/signin/record/data';
const props = defineProps<{
userId: number;
}>();
const [Grid] = useVbenVxeGrid({
formOptions: {
schema: [
{
fieldName: 'day',
label: '签到天数',
component: 'Input',
},
{
fieldName: 'createTime',
label: '签到时间',
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
allowClear: true,
},
},
],
},
gridOptions: {
columns: useGridColumns(),
keepSource: true,
pagerConfig: {
pageSize: 10,
},
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await getSignInRecordPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
userId: props.userId,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<MemberSignInRecordApi.SignInRecord>,
separator: false,
});
</script>
<template>
<Grid />
</template>

449
apps/web-ele/src/views/member/user/data.ts Normal file
View File

@ -0,0 +1,449 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { h } from 'vue';
import { convertToInteger, formatToFraction } from '@vben/utils';
import { ElTag } from 'element-plus';
import { z } from '#/adapter/form';
import { getSimpleGroupList } from '#/api/member/group';
import { getSimpleLevelList } from '#/api/member/level';
import { getSimpleTagList } from '#/api/member/tag';
import { getAreaTree } from '#/api/system/area';
import {
CommonStatusEnum,
DICT_TYPE,
getDictOptions,
getRangePickerDefaultProps,
} from '#/utils';
/** 修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
return [
{
component: 'Input',
fieldName: 'id',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
component: 'Input',
fieldName: 'mobile',
label: '手机号',
rules: 'required',
},
{
fieldName: 'status',
label: '状态',
component: 'RadioGroup',
componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
buttonStyle: 'solid',
optionType: 'button',
},
rules: z.number().default(CommonStatusEnum.ENABLE).optional(),
},
{
component: 'Input',
fieldName: 'nickname',
label: '用户昵称',
},
{
component: 'ImageUpload',
fieldName: 'avatar',
label: '头像',
},
{
component: 'Input',
fieldName: 'name',
label: '真实名字',
},
{
fieldName: 'sex',
label: '用户性别',
component: 'RadioGroup',
componentProps: {
options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
buttonStyle: 'solid',
optionType: 'button',
},
},
{
component: 'DatePicker',
fieldName: 'birthday',
label: '出生日期',
componentProps: {
format: 'YYYY-MM-DD',
},
},
{
component: 'ApiTreeSelect',
fieldName: 'areaId',
label: '所在地',
componentProps: {
api: () => getAreaTree(),
fieldNames: { label: 'name', value: 'id', children: 'children' },
},
},
{
component: 'ApiSelect',
fieldName: 'tagIds',
label: '用户标签',
componentProps: {
api: () => getSimpleTagList(),
fieldNames: { label: 'name', value: 'id' },
mode: 'multiple',
},
},
{
component: 'ApiSelect',
fieldName: 'groupId',
label: '用户分组',
componentProps: {
api: () => getSimpleGroupList(),
fieldNames: { label: 'name', value: 'id' },
},
},
{
component: 'Textarea',
fieldName: 'mark',
label: '会员备注',
},
];
}
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'nickname',
label: '用户昵称',
component: 'Input',
},
{
fieldName: 'mobile',
label: '手机号',
component: 'Input',
},
{
fieldName: 'loginDate',
label: '登录时间',
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
},
},
{
fieldName: 'createTime',
label: '注册时间',
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
},
},
{
fieldName: 'tagIds',
label: '用户标签',
component: 'ApiSelect',
componentProps: {
api: () => getSimpleTagList(),
fieldNames: { label: 'name', value: 'id' },
mode: 'multiple',
},
},
{
fieldName: 'levelId',
label: '用户等级',
component: 'ApiSelect',
componentProps: {
api: () => getSimpleLevelList(),
fieldNames: { label: 'name', value: 'id' },
},
},
{
fieldName: 'groupId',
label: '用户分组',
component: 'ApiSelect',
componentProps: {
api: () => getSimpleGroupList(),
fieldNames: { label: 'name', value: 'id' },
},
},
];
}
/** 列表的字段 */
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{
type: 'checkbox',
width: 50,
},
{
field: 'id',
title: '用户编号',
},
{
field: 'avatar',
title: '头像',
slots: {
default: ({ row }) => {
return h('img', {
src: row.avatar,
style: { width: '40px' },
});
},
},
},
{
field: 'mobile',
title: '手机号',
},
{
field: 'nickname',
title: '昵称',
},
{
field: 'levelName',
title: '等级',
},
{
field: 'groupName',
title: '分组',
},
{
field: 'tagNames',
title: '用户标签',
slots: {
default: ({ row }) => {
return row.tagNames?.map((tagName: string, index: number) => {
return h(
ElTag,
{
key: index,
class: 'mr-1',
color: 'blue',
},
() => tagName,
);
});
},
},
},
{
field: 'point',
title: '积分',
},
{
field: 'status',
title: '状态',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.COMMON_STATUS },
},
},
{
field: 'loginDate',
title: '登录时间',
formatter: 'formatDateTime',
},
{
field: 'createTime',
title: '注册时间',
formatter: 'formatDateTime',
},
{
title: '操作',
width: 200,
fixed: 'right',
slots: { default: 'actions' },
},
];
}
/** 修改用户等级 */
export function useLeavelFormSchema(): VbenFormSchema[] {
return [
{
component: 'Input',
fieldName: 'id',
label: '用户编号',
componentProps: {
disabled: true,
},
},
{
component: 'Input',
fieldName: 'nickname',
label: '用户昵称',
componentProps: {
disabled: true,
},
},
{
fieldName: 'point',
label: '用户等级',
component: 'ApiSelect',
componentProps: {
api: () => getSimpleLevelList(),
fieldNames: { label: 'name', value: 'id' },
},
},
{
component: 'Textarea',
fieldName: 'reason',
label: '修改原因',
rules: 'required',
},
];
}
/** 修改用户余额 */
export function useBalanceFormSchema(): VbenFormSchema[] {
return [
{
component: 'Input',
fieldName: 'id',
label: '用户编号',
componentProps: {
disabled: true,
},
},
{
component: 'Input',
fieldName: 'nickname',
label: '用户昵称',
componentProps: {
disabled: true,
},
},
{
component: 'Input',
fieldName: 'balance',
label: '变动前余额(元)',
componentProps: {
disabled: true,
},
},
{
component: 'RadioGroup',
fieldName: 'changeType',
label: '变动类型',
componentProps: {
options: [
{ label: '增加', value: 1 },
{ label: '减少', value: -1 },
],
buttonStyle: 'solid',
optionType: 'button',
},
defaultValue: 1,
},
{
component: 'InputNumber',
fieldName: 'changeBalance',
label: '变动余额(元)',
rules: 'required',
componentProps: {
min: 0,
precision: 2,
step: 0.1,
},
defaultValue: 0,
},
{
component: 'Input',
fieldName: 'balanceResult',
label: '变动后余额(元)',
dependencies: {
triggerFields: ['changeBalance', 'changeType'],
disabled: true,
trigger(values, form) {
form.setFieldValue(
'balanceResult',
formatToFraction(
convertToInteger(values.balance) +
convertToInteger(values.changeBalance) * values.changeType,
),
);
},
},
},
];
}
/** 修改用户积分 */
export function usePointFormSchema(): VbenFormSchema[] {
return [
{
component: 'Input',
fieldName: 'id',
label: '用户编号',
componentProps: {
disabled: true,
},
},
{
component: 'Input',
fieldName: 'nickname',
label: '用户昵称',
componentProps: {
disabled: true,
},
},
{
component: 'Input',
fieldName: 'point',
label: '变动前积分',
componentProps: {
disabled: true,
},
},
{
component: 'RadioGroup',
fieldName: 'changeType',
label: '变动类型',
componentProps: {
options: [
{ label: '增加', value: 1 },
{ label: '减少', value: -1 },
],
buttonStyle: 'solid',
optionType: 'button',
},
defaultValue: 1,
},
{
component: 'InputNumber',
fieldName: 'changePoint',
label: '变动积分',
rules: 'required',
componentProps: {
min: 0,
precision: 0,
},
defaultValue: 0,
},
{
component: 'Input',
fieldName: 'pointResult',
label: '变动后积分',
dependencies: {
triggerFields: ['changePoint', 'changeType'],
disabled: true,
trigger(values, form) {
form.setFieldValue(
'pointResult',
values.point + values.changePoint * values.changeType ||
values.point,
);
},
},
rules: z.number().min(0),
},
];
}

200
apps/web-ele/src/views/member/user/index.vue Normal file
View File

@ -0,0 +1,200 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MemberUserApi } from '#/api/member/user';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { getUserPage } from '#/api/member/user';
import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
import BalanceForm from './modules/balance-form.vue';
import Form from './modules/form.vue';
import LeavelForm from './modules/leavel-form.vue';
import PointForm from './modules/point-form.vue';
const router = useRouter();
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
destroyOnClose: true,
});
const [PointFormModal, pointFormModalApi] = useVbenModal({
connectedComponent: PointForm,
destroyOnClose: true,
});
const [BalanceFormModal, balanceFormModalApi] = useVbenModal({
connectedComponent: BalanceForm,
destroyOnClose: true,
});
const [LeavelFormModal, leavelFormModalApi] = useVbenModal({
connectedComponent: LeavelForm,
destroyOnClose: true,
});
/** 刷新表格数据 */
function onRefresh() {
gridApi.query();
}
/** 设置选中 ID */
const checkedIds = ref<number[]>([]);
function setCheckedIds({ records }: { records: MemberUserApi.User[] }) {
checkedIds.value = records.map((item) => item.id as number);
}
/** 发送优惠券 */
function handleSendCoupon() {
formModalApi.setData(null).open();
}
/** 编辑会员 */
function handleEdit(row: MemberUserApi.User) {
formModalApi.setData(row).open();
}
/** 修改会员等级 */
function handleUpdateLevel(row: MemberUserApi.User) {
leavelFormModalApi.setData(row).open();
}
/** 修改会员积分 */
function handleUpdatePoint(row: MemberUserApi.User) {
pointFormModalApi.setData(row).open();
}
/** 修改会员余额 */
function handleUpdateBalance(row: MemberUserApi.User) {
balanceFormModalApi.setData(row).open();
}
/** 查看会员详情 */
function handleViewDetail(row: MemberUserApi.User) {
router.push({
name: 'MemberUserDetail',
query: {
id: row.id,
},
});
}
// 表格实例
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(),
checkboxConfig: {
highlight: true,
labelField: 'checkbox',
},
height: 'auto',
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await getUserPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<MemberUserApi.User>,
gridEvents: {
checkboxAll: setCheckedIds,
checkboxChange: setCheckedIds,
},
});
</script>
<template>
<Page auto-content-height>
<template #doc>
<DocAlert
title="会员用户、标签、分组"
url="https://doc.iocoder.cn/member/user/"
/>
</template>
<FormModal @success="onRefresh" />
<PointFormModal @success="onRefresh" />
<BalanceFormModal @success="onRefresh" />
<LeavelFormModal @success="onRefresh" />
<Grid table-title="会员列表">
<template #toolbar-tools>
<TableAction
:actions="[
{
label: '发送优惠券',
type: 'primary',
icon: 'lucide:mouse-pointer-2',
auth: ['promotion:coupon:send'],
onClick: handleSendCoupon,
},
]"
/>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: $t('common.detail'),
type: 'primary',
link: true,
icon: ACTION_ICON.VIEW,
onClick: handleViewDetail.bind(null, row),
},
]"
:drop-down-actions="[
{
label: $t('common.edit'),
type: 'primary',
link: true,
auth: ['member:user:update'],
onClick: handleEdit.bind(null, row),
},
{
label: '修改等级',
type: 'primary',
link: true,
auth: ['member:user:update-level'],
onClick: handleUpdateLevel.bind(null, row),
},
{
label: '修改积分',
type: 'primary',
link: true,
auth: ['member:user:update-point'],
onClick: handleUpdatePoint.bind(null, row),
},
{
label: '修改余额',
type: 'primary',
link: true,
auth: ['pay:wallet:update-balance'],
onClick: handleUpdateBalance.bind(null, row),
},
]"
/>
</template>
</Grid>
</Page>
</template>

93
apps/web-ele/src/views/member/user/modules/balance-form.vue Normal file
View File

@ -0,0 +1,93 @@
<script lang="ts" setup>
import type { MemberUserApi } from '#/api/member/user';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { formatToFraction } from '@vben/utils';
import { ElMessage } from 'element-plus';
import { useVbenForm } from '#/adapter/form';
import { getUser, updateUser } from '#/api/member/user';
import { getWallet } from '#/api/pay/wallet/balance';
import { $t } from '#/locales';
import { useBalanceFormSchema } from '../data';
const emit = defineEmits(['success']);
const formData = ref({
id: 0,
nickname: '',
balance: '0',
changeBalance: 0,
changeType: 1,
});
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 100,
},
layout: 'horizontal',
schema: useBalanceFormSchema(),
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as MemberUserApi.User;
try {
await updateUser(data);
// 关闭并提示
await modalApi.close();
emit('success');
ElMessage.success($t('ui.actionMessage.operationSuccess'));
} finally {
modalApi.unlock();
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
return;
}
// 加载数据
const data = modalApi.getData<MemberUserApi.User>();
if (!data || !data.id) {
return;
}
modalApi.lock();
try {
const user = await getUser(data.id as number);
if (!user || !user.id) {
return;
}
const wallet = await getWallet({ userId: user.id });
formData.value.id = user.id;
formData.value.nickname = user.nickname || '';
formData.value.balance = formatToFraction(wallet.balance);
formData.value.changeType = 1; // 默认增加余额
formData.value.changeBalance = 0; // 变动余额默认0
// 设置到 values
await formApi.setValues(formData.value);
} finally {
modalApi.unlock();
}
},
});
</script>
<template>
<Modal class="w-1/3" :title="$t('ui.actionTitle.edit', ['用户余额'])">
<Form class="mx-4" />
</Modal>
</template>

136
apps/web-ele/src/views/member/user/modules/detail.vue Normal file
View File

@ -0,0 +1,136 @@
<script setup lang="ts">
import type { MemberUserApi } from '#/api/member/user';
import type { PayWalletApi } from '#/api/pay/wallet/balance';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { Page, useVbenModal } from '@vben/common-ui';
import { useTabs } from '@vben/hooks';
import { ElButton, ElCard, ElMessage, ElTabPane, ElTabs } from 'element-plus';
import { getUser } from '#/api/member/user';
import { getWallet } from '#/api/pay/wallet/balance';
import { $t } from '#/locales';
import UserAccountInfo from '../components/user-account-info.vue';
import UserAddressList from '../components/user-address-list.vue';
import UserBalanceList from '../components/user-balance-list.vue';
import UserBasicInfo from '../components/user-basic-info.vue';
import UserExperienceRecordList from '../components/user-experience-record-list.vue';
import UserPointList from '../components/user-point-list.vue';
import UserSignList from '../components/user-sign-list.vue';
import Form from './form.vue';
const route = useRoute();
const { closeCurrentTab, refreshTab } = useTabs();
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form,
destroyOnClose: true,
});
const userId = Number(route.query.id);
const user = ref<MemberUserApi.User>();
const wallet = ref<PayWalletApi.Wallet>();
const activeName = ref('UserPointList');
/* 钱包初始化数据 */
const WALLET_INIT_DATA = {
balance: 0,
totalExpense: 0,
totalRecharge: 0,
} as PayWalletApi.Wallet;
async function getUserDetail() {
if (!userId) {
ElMessage.error('参数错误，会员编号不能为空！');
closeCurrentTab();
return;
}
user.value = await getUser(userId);
wallet.value = (await getWallet({ userId })) || WALLET_INIT_DATA;
}
function handleEdit() {
formModalApi.setData(user.value).open();
}
onMounted(async () => {
await getUserDetail();
});
</script>
<template>
<Page auto-content-height>
<FormModal @success="refreshTab" />
<div class="flex">
<UserBasicInfo v-if="user" class="w-3/5" :user="user" mode="member">
<template #title> 基本信息 </template>
<template #extra>
<ElButton type="primary" @click="handleEdit">
{{ $t('common.edit') }}
</ElButton>
</template>
</UserBasicInfo>
<UserAccountInfo
v-if="user && wallet"
class="ml-4 w-2/5"
:user="user"
:wallet="wallet"
>
<template #title> 账户信息 </template>
</UserAccountInfo>
</div>
<div class="mt-4">
<ElCard title="账户明细">
<ElTabs v-model="activeName" >
<ElTabPane label="积分" name="UserPointList">
<UserPointList class="h-full" :user-id="userId" />
</ElTabPane>
<ElTabPane label="签到" name="UserSignList">
<UserSignList class="h-full" :user-id="userId" />
</ElTabPane>
<ElTabPane label="成长值" name="UserExperienceRecordList">
<UserExperienceRecordList class="h-full" :user-id="userId" />
</ElTabPane>
<ElTabPane label="余额" name="UserBalanceList">
<UserBalanceList class="h-full" :wallet-id="wallet?.id" />
</ElTabPane>
<ElTabPane label="收货地址" name="UserAddressList">
<UserAddressList class="h-full" :user-id="userId" />
</ElTabPane>
<ElTabPane label="订单管理" name="UserOrderList">
<!-- Todo: 商城模块 -->
<div class="h-full">
<h1>订单管理</h1>
</div>
</ElTabPane>
<ElTabPane label="售后管理" name="UserAfterSaleList">
<!-- Todo: 商城模块 -->
<div class="h-full">
<h1>售后管理</h1>
</div>
</ElTabPane>
<ElTabPane label="收藏记录" name="UserFavoriteList">
<!-- Todo: 商城模块 -->
<div class="h-full">
<h1>收藏记录</h1>
</div>
</ElTabPane>
<ElTabPane label="优惠劵" name="UserCouponList">
<!-- Todo: 商城模块 -->
<div class="h-full">
<h1>优惠劵</h1>
</div>
</ElTabPane>
<ElTabPane label="推广用户" name="UserBrokerageList">
<!-- Todo: 商城模块 -->
<div class="h-full">
<h1>推广用户</h1>
</div>
</ElTabPane>
</ElTabs>
</ElCard>
</div>
</Page>
</template>

77
apps/web-ele/src/views/member/user/modules/form.vue Normal file
View File

@ -0,0 +1,77 @@
<script lang="ts" setup>
import type { MemberUserApi } from '#/api/member/user';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { ElMessage } from 'element-plus';
import { useVbenForm } from '#/adapter/form';
import { getUser, updateUser } from '#/api/member/user';
import { $t } from '#/locales';
import { useFormSchema } from '../data';
const emit = defineEmits(['success']);
const formData = ref<MemberUserApi.User>();
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
},
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as MemberUserApi.User;
try {
await updateUser(data);
// 关闭并提示
await modalApi.close();
emit('success');
ElMessage.success($t('ui.actionMessage.operationSuccess'));
} finally {
modalApi.unlock();
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
return;
}
// 加载数据
const data = modalApi.getData<MemberUserApi.User>();
if (!data || !data.id) {
return;
}
modalApi.lock();
try {
formData.value = await getUser(data.id as number);
// 设置到 values
await formApi.setValues(formData.value);
} finally {
modalApi.unlock();
}
},
});
</script>
<template>
<Modal class="w-2/5" :title="$t('ui.actionTitle.edit', ['会员'])">
<Form class="mx-4" />
</Modal>
</template>

77
apps/web-ele/src/views/member/user/modules/leavel-form.vue Normal file
View File

@ -0,0 +1,77 @@
<script lang="ts" setup>
import type { MemberUserApi } from '#/api/member/user';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { ElMessage } from 'element-plus';
import { useVbenForm } from '#/adapter/form';
import { getUser, updateUser } from '#/api/member/user';
import { $t } from '#/locales';
import { useLeavelFormSchema } from '../data';
const emit = defineEmits(['success']);
const formData = ref<MemberUserApi.User>();
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
},
layout: 'horizontal',
schema: useLeavelFormSchema(),
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as MemberUserApi.User;
try {
await updateUser(data);
// 关闭并提示
await modalApi.close();
emit('success');
ElMessage.success($t('ui.actionMessage.operationSuccess'));
} finally {
modalApi.unlock();
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
return;
}
// 加载数据
const data = modalApi.getData<MemberUserApi.User>();
if (!data || !data.id) {
return;
}
modalApi.lock();
try {
formData.value = await getUser(data.id as number);
// 设置到 values
await formApi.setValues(formData.value);
} finally {
modalApi.unlock();
}
},
});
</script>
<template>
<Modal class="w-1/3" :title="$t('ui.actionTitle.edit', ['用户等级'])">
<Form class="mx-4" />
</Modal>
</template>

77
apps/web-ele/src/views/member/user/modules/point-form.vue Normal file
View File

@ -0,0 +1,77 @@
<script lang="ts" setup>
import type { MemberUserApi } from '#/api/member/user';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { ElMessage } from 'element-plus';
import { useVbenForm } from '#/adapter/form';
import { getUser, updateUser } from '#/api/member/user';
import { $t } from '#/locales';
import { usePointFormSchema } from '../data';
const emit = defineEmits(['success']);
const formData = ref<MemberUserApi.User>();
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
},
layout: 'horizontal',
schema: usePointFormSchema(),
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as MemberUserApi.User;
try {
await updateUser(data);
// 关闭并提示
await modalApi.close();
emit('success');
ElMessage.success($t('ui.actionMessage.operationSuccess'));
} finally {
modalApi.unlock();
}
},
async onOpenChange(isOpen: boolean) {
if (!isOpen) {
formData.value = undefined;
return;
}
// 加载数据
const data = modalApi.getData<MemberUserApi.User>();
if (!data || !data.id) {
return;
}
modalApi.lock();
try {
formData.value = await getUser(data.id as number);
// 设置到 values
await formApi.setValues(formData.value);
} finally {
modalApi.unlock();
}
},
});
</script>
<template>
<Modal class="w-1/3" :title="$t('ui.actionTitle.edit', ['用户积分'])">
<Form class="mx-4" />
</Modal>
</template>

2
apps/web-ele/vite.config.mts
View File

@ -17,7 +17,7 @@ export default defineConfig(async () => {
changeOrigin: true,
rewrite: (path) => path.replace(/^\/admin-api/, ''),
// mock代理目标地址
target: 'http://localhost:48080/admin-api',
target: 'http://localhost:48081/admin-api',
ws: true,
},
},