From a60c29169b2022e1455b7f3bc6c465a7b129e6c3 Mon Sep 17 00:00:00 2001 From: YunaiV Date: Tue, 7 Oct 2025 14:18:48 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90antd=E3=80=91=E3=80=90mem?= =?UTF-8?q?ber=20=E4=BC=9A=E5=91=98=E3=80=91=E5=AE=8C=E6=88=90=20index=20?= =?UTF-8?q?=E5=92=8C=20form=20=E7=9A=84=E9=87=8D=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web-antd/src/views/member/user/data.ts | 109 ++++++++++++------ apps/web-antd/src/views/member/user/index.vue | 49 ++++---- 2 files changed, 100 insertions(+), 58 deletions(-) diff --git a/apps/web-antd/src/views/member/user/data.ts b/apps/web-antd/src/views/member/user/data.ts index a245cd6b4..939ed3814 100644 --- a/apps/web-antd/src/views/member/user/data.ts +++ b/apps/web-antd/src/views/member/user/data.ts @@ -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, diff --git a/apps/web-antd/src/views/member/user/index.vue b/apps/web-antd/src/views/member/user/index.vue index 854160f21..b69faae13 100644 --- a/apps/web-antd/src/views/member/user/index.vue +++ b/apps/web-antd/src/views/member/user/index.vue @@ -39,23 +39,11 @@ const [LevelFormModal, levelFormModalApi] = useVbenModal({ destroyOnClose: true, }); -/** 刷新表格数据 */ -function onRefresh() { +/** 刷新表格 */ +function handleRefresh() { gridApi.query(); } -/** 设置选中 ID */ -const checkedIds = ref([]); -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([]); +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, gridEvents: { - checkboxAll: setCheckedIds, - checkboxChange: setCheckedIds, + checkboxAll: handleRowCheckboxChange, + checkboxChange: handleRowCheckboxChange, }, }); @@ -134,10 +133,10 @@ const [Grid, gridApi] = useVbenVxeGrid({ /> - - - - + + + +