smart-flow/yudao-ui-admin-vben
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：【antd】【member 会员】完成 index 和 form 的重构

Browse Source
This commit is contained in:
YunaiV
2025-10-07 14:18:48 +08:00
parent b9593c7a4a
commit a60c29169b
2 changed files with 100 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
apps/web-antd/src/views/member/user/data.ts
View File

@@ -16,21 +16,21 @@ import { getSimpleTagList } from '#/api/member/tag';
import { getAreaTree } from '#/api/system/area';
import { getRangePickerDefaultProps } from '#/utils';
/** 修改的表单 */
/** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
return [
{
component: 'Input',
fieldName: 'id',
component: 'Input',
dependencies: {
triggerFields: [''],
show: () => false,
},
},
{
component: 'Input',
fieldName: 'mobile',
label: '手机号',
component: 'Input',
rules: 'required',
},
{
@@ -45,19 +45,25 @@ export function useFormSchema(): VbenFormSchema[] {
rules: z.number().default(CommonStatusEnum.ENABLE).optional(),
},
{
component: 'Input',
fieldName: 'nickname',
label: '用户昵称',
component: 'Input',
componentProps: {
placeholder: '请输入用户昵称',
},
},
{
component: 'ImageUpload',
fieldName: 'avatar',
label: '头像',
component: 'ImageUpload',
},
{
component: 'Input',
fieldName: 'name',
label: '真实名字',
component: 'Input',
componentProps: {
placeholder: '请输入真实名字',
},
},
{
fieldName: 'sex',
@@ -70,45 +76,53 @@ export function useFormSchema(): VbenFormSchema[] {
},
},
{
component: 'DatePicker',
fieldName: 'birthday',
label: '出生日期',
component: 'DatePicker',
componentProps: {
format: 'YYYY-MM-DD',
valueFormat: 'x',
placeholder: '请选择出生日期',
},
},
{
component: 'ApiTreeSelect',
fieldName: 'areaId',
label: '所在地',
component: 'ApiTreeSelect',
componentProps: {
api: () => getAreaTree(),
fieldNames: { label: 'name', value: 'id', children: 'children' },
placeholder: '请选择所在地',
},
},
{
component: 'ApiSelect',
fieldName: 'tagIds',
label: '用户标签',
component: 'ApiSelect',
componentProps: {
api: () => getSimpleTagList(),
fieldNames: { label: 'name', value: 'id' },
mode: 'multiple',
placeholder: '请选择用户标签',
},
},
{
component: 'ApiSelect',
fieldName: 'groupId',
label: '用户分组',
component: 'ApiSelect',
componentProps: {
api: () => getSimpleGroupList(),
fieldNames: { label: 'name', value: 'id' },
placeholder: '请选择用户分组',
},
},
{
component: 'Textarea',
fieldName: 'mark',
label: '会员备注',
component: 'Textarea',
componentProps: {
placeholder: '请输入会员备注',
},
},
];
}
@@ -120,11 +134,19 @@ export function useGridFormSchema(): VbenFormSchema[] {
fieldName: 'nickname',
label: '用户昵称',
component: 'Input',
componentProps: {
placeholder: '请输入用户昵称',
allowClear: true,
},
},
{
fieldName: 'mobile',
label: '手机号',
component: 'Input',
componentProps: {
placeholder: '请输入手机号',
allowClear: true,
},
},
{
fieldName: 'loginDate',
@@ -132,6 +154,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
allowClear: true,
},
},
{
@@ -140,6 +163,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
allowClear: true,
},
},
{
@@ -150,6 +174,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
api: () => getSimpleTagList(),
fieldNames: { label: 'name', value: 'id' },
mode: 'multiple',
placeholder: '请选择用户标签',
allowClear: true,
},
},
{
@@ -159,6 +185,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
componentProps: {
api: () => getSimpleLevelList(),
fieldNames: { label: 'name', value: 'id' },
placeholder: '请选择用户等级',
allowClear: true,
},
},
{
@@ -168,6 +196,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
componentProps: {
api: () => getSimpleGroupList(),
fieldNames: { label: 'name', value: 'id' },
placeholder: '请选择用户分组',
allowClear: true,
},
},
];
@@ -183,38 +213,40 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'id',
title: '用户编号',
minWidth: 100,
},
{
field: 'avatar',
title: '头像',
slots: {
default: ({ row }) => {
return h('img', {
src: row.avatar,
style: { width: '40px' },
});
},
minWidth: 80,
cellRender: {
name: 'CellImage',
},
},
{
field: 'mobile',
title: '手机号',
minWidth: 120,
},
{
field: 'nickname',
title: '昵称',
minWidth: 120,
},
{
field: 'levelName',
title: '等级',
minWidth: 100,
},
{
field: 'groupName',
title: '分组',
minWidth: 100,
},
{
field: 'tagNames',
title: '用户标签',
minWidth: 150,
slots: {
default: ({ row }) => {
return row.tagNames?.map((tagName: string, index: number) => {
@@ -234,10 +266,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'point',
title: '积分',
minWidth: 80,
},
{
field: 'status',
title: '状态',
minWidth: 80,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.COMMON_STATUS },
@@ -246,11 +280,13 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'loginDate',
title: '登录时间',
minWidth: 160,
formatter: 'formatDateTime',
},
{
field: 'createTime',
title: '注册时间',
minWidth: 160,
formatter: 'formatDateTime',
},
{
@@ -266,17 +302,17 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
export function useLevelFormSchema(): VbenFormSchema[] {
return [
{
component: 'Input',
fieldName: 'id',
label: '用户编号',
component: 'Input',
componentProps: {
disabled: true,
},
},
{
component: 'Input',
fieldName: 'nickname',
label: '用户昵称',
component: 'Input',
componentProps: {
disabled: true,
},
@@ -288,12 +324,17 @@ export function useLevelFormSchema(): VbenFormSchema[] {
componentProps: {
api: () => getSimpleLevelList(),
fieldNames: { label: 'name', value: 'id' },
placeholder: '请选择用户等级',
},
rules: 'required',
},
{
component: 'Textarea',
fieldName: 'reason',
label: '修改原因',
component: 'Textarea',
componentProps: {
placeholder: '请输入修改原因',
},
rules: 'required',
},
];
@@ -303,33 +344,33 @@ export function useLevelFormSchema(): VbenFormSchema[] {
export function useBalanceFormSchema(): VbenFormSchema[] {
return [
{
component: 'Input',
fieldName: 'id',
label: '用户编号',
component: 'Input',
componentProps: {
disabled: true,
},
},
{
component: 'Input',
fieldName: 'nickname',
label: '用户昵称',
component: 'Input',
componentProps: {
disabled: true,
},
},
{
component: 'Input',
fieldName: 'balance',
label: '变动前余额(元)',
component: 'Input',
componentProps: {
disabled: true,
},
},
{
component: 'RadioGroup',
fieldName: 'changeType',
label: '变动类型',
component: 'RadioGroup',
componentProps: {
options: [
{ label: '增加', value: 1 },
@@ -341,21 +382,22 @@ export function useBalanceFormSchema(): VbenFormSchema[] {
defaultValue: 1,
},
{
component: 'InputNumber',
fieldName: 'changeBalance',
label: '变动余额(元)',
component: 'InputNumber',
rules: 'required',
componentProps: {
min: 0,
precision: 2,
step: 0.1,
placeholder: '请输入变动余额',
},
defaultValue: 0,
},
{
component: 'Input',
fieldName: 'balanceResult',
label: '变动后余额(元)',
component: 'Input',
dependencies: {
triggerFields: ['changeBalance', 'changeType'],
disabled: true,
@@ -377,33 +419,33 @@ export function useBalanceFormSchema(): VbenFormSchema[] {
export function usePointFormSchema(): VbenFormSchema[] {
return [
{
component: 'Input',
fieldName: 'id',
label: '用户编号',
component: 'Input',
componentProps: {
disabled: true,
},
},
{
component: 'Input',
fieldName: 'nickname',
label: '用户昵称',
component: 'Input',
componentProps: {
disabled: true,
},
},
{
component: 'Input',
fieldName: 'point',
label: '变动前积分',
component: 'Input',
componentProps: {
disabled: true,
},
},
{
component: 'RadioGroup',
fieldName: 'changeType',
label: '变动类型',
component: 'RadioGroup',
componentProps: {
options: [
{ label: '增加', value: 1 },
@@ -415,20 +457,21 @@ export function usePointFormSchema(): VbenFormSchema[] {
defaultValue: 1,
},
{
component: 'InputNumber',
fieldName: 'changePoint',
label: '变动积分',
component: 'InputNumber',
rules: 'required',
componentProps: {
min: 0,
precision: 0,
placeholder: '请输入变动积分',
},
defaultValue: 0,
},
{
component: 'Input',
fieldName: 'pointResult',
label: '变动后积分',
component: 'Input',
dependencies: {
triggerFields: ['changePoint', 'changeType'],
disabled: true,

49
apps/web-antd/src/views/member/user/index.vue
View File

@@ -39,23 +39,11 @@ const [LevelFormModal, levelFormModalApi] = useVbenModal({
destroyOnClose: true,
});
/** 刷新表格数据 */
function onRefresh() {
/** 刷新表格 */
function handleRefresh() {
gridApi.query();
}
/** 设置选中 ID */
const checkedIds = ref<number[]>([]);
function setCheckedIds({ records }: { records: MemberUserApi.User[] }) {
checkedIds.value = records.map((item) => item.id!);
}
/** 发送优惠券 */
// TODO @xingyu：这个功能没开发对，是发送优惠劵哈；
function handleSendCoupon() {
formModalApi.setData(null).open();
}
/** 编辑会员 */
function handleEdit(row: MemberUserApi.User) {
formModalApi.setData(row).open();
@@ -76,6 +64,21 @@ function handleUpdateBalance(row: MemberUserApi.User) {
balanceFormModalApi.setData(row).open();
}
/** 发送优惠券 */
// TODO @xingyu：这个功能没开发对，是发送优惠劵哈；
function handleSendCoupon() {
formModalApi.setData(null).open();
}
const checkedIds = ref<number[]>([]);
function handleRowCheckboxChange({
records,
}: {
records: MemberUserApi.User[];
}) {
checkedIds.value = records.map((item) => item.id!);
}
/** 查看会员详情 */
function handleViewDetail(row: MemberUserApi.User) {
router.push({
@@ -86,17 +89,12 @@ function handleViewDetail(row: MemberUserApi.User) {
});
}
// 表格实例
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(),
checkboxConfig: {
highlight: true,
labelField: 'checkbox',
},
height: 'auto',
keepSource: true,
proxyConfig: {
@@ -112,6 +110,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,
@@ -119,8 +118,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
} as VxeTableGridOptions<MemberUserApi.User>,
gridEvents: {
checkboxAll: setCheckedIds,
checkboxChange: setCheckedIds,
checkboxAll: handleRowCheckboxChange,
checkboxChange: handleRowCheckboxChange,
},
});
</script>
@@ -134,10 +133,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
/>
</template>
<FormModal @success="onRefresh" />
<PointFormModal @success="onRefresh" />
<BalanceFormModal @success="onRefresh" />
<LevelFormModal @success="onRefresh" />
<FormModal @success="handleRefresh" />
<PointFormModal @success="handleRefresh" />
<BalanceFormModal @success="handleRefresh" />
<LevelFormModal @success="handleRefresh" />
<Grid table-title="会员列表">
<template #toolbar-tools>
<TableAction