From cdd7e69f8e31f0765a1b3888ac318e6b245f4afe Mon Sep 17 00:00:00 2001 From: YunaiV Date: Tue, 7 Oct 2025 20:20:33 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90ele=E3=80=91=E3=80=90memb?= =?UTF-8?q?er=20=E4=BC=9A=E5=91=98=E3=80=91=E4=BC=98=E5=8C=96=E4=BC=9A?= =?UTF-8?q?=E5=91=98=20list=E3=80=81form=20=E7=9B=B8=E5=85=B3=E7=9A=84?= =?UTF-8?q?=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web-ele/src/views/member/user/data.ts | 129 ++++++++++++------ .../user/detail/{detail.vue => index.vue} | 0 apps/web-ele/src/views/member/user/index.vue | 64 +++++---- .../member/user/modules/balance-form.vue | 17 ++- .../src/views/member/user/modules/form.vue | 9 +- .../{leavel-form.vue => level-form.vue} | 18 ++- .../views/member/user/modules/point-form.vue | 16 ++- 7 files changed, 167 insertions(+), 86 deletions(-) rename apps/web-ele/src/views/member/user/detail/{detail.vue => index.vue} (100%) rename apps/web-ele/src/views/member/user/modules/{leavel-form.vue => level-form.vue} (77%) diff --git a/apps/web-ele/src/views/member/user/data.ts b/apps/web-ele/src/views/member/user/data.ts index a9a76007e..778573850 100644 --- a/apps/web-ele/src/views/member/user/data.ts +++ b/apps/web-ele/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,49 +76,57 @@ 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(), labelField: 'name', valueField: 'id', childrenField: 'children', + placeholder: '请选择所在地', }, }, { - component: 'ApiSelect', fieldName: 'tagIds', label: '用户标签', + component: 'ApiSelect', componentProps: { api: () => getSimpleTagList(), labelField: 'name', valueField: 'id', - mode: 'multiple', + multiple: true, + placeholder: '请选择用户标签', }, }, { - component: 'ApiSelect', fieldName: 'groupId', label: '用户分组', + component: 'ApiSelect', componentProps: { api: () => getSimpleGroupList(), labelField: 'name', valueField: 'id', + placeholder: '请选择用户分组', }, }, { - component: 'Textarea', fieldName: 'mark', label: '会员备注', + component: 'Textarea', + componentProps: { + placeholder: '请输入会员备注', + }, }, ]; } @@ -124,11 +138,19 @@ export function useGridFormSchema(): VbenFormSchema[] { fieldName: 'nickname', label: '用户昵称', component: 'Input', + componentProps: { + placeholder: '请输入用户昵称', + clearable: true, + }, }, { fieldName: 'mobile', label: '手机号', component: 'Input', + componentProps: { + placeholder: '请输入手机号', + clearable: true, + }, }, { fieldName: 'loginDate', @@ -136,6 +158,7 @@ export function useGridFormSchema(): VbenFormSchema[] { component: 'RangePicker', componentProps: { ...getRangePickerDefaultProps(), + clearable: true, }, }, { @@ -144,6 +167,7 @@ export function useGridFormSchema(): VbenFormSchema[] { component: 'RangePicker', componentProps: { ...getRangePickerDefaultProps(), + clearable: true, }, }, { @@ -155,6 +179,8 @@ export function useGridFormSchema(): VbenFormSchema[] { labelField: 'name', valueField: 'id', mode: 'multiple', + placeholder: '请选择用户标签', + clearable: true, }, }, { @@ -165,6 +191,8 @@ export function useGridFormSchema(): VbenFormSchema[] { api: () => getSimpleLevelList(), labelField: 'name', valueField: 'id', + placeholder: '请选择用户等级', + clearable: true, }, }, { @@ -175,6 +203,8 @@ export function useGridFormSchema(): VbenFormSchema[] { api: () => getSimpleGroupList(), labelField: 'name', valueField: 'id', + placeholder: '请选择用户分组', + clearable: true, }, }, ]; @@ -190,38 +220,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) => { @@ -230,7 +262,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] { { key: index, class: 'mr-1', - color: 'blue', + type: 'primary', }, () => tagName, ); @@ -241,10 +273,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 }, @@ -253,11 +287,13 @@ export function useGridColumns(): VxeTableGridOptions['columns'] { { field: 'loginDate', title: '登录时间', + minWidth: 160, formatter: 'formatDateTime', }, { field: 'createTime', title: '注册时间', + minWidth: 160, formatter: 'formatDateTime', }, { @@ -270,38 +306,43 @@ export function useGridColumns(): VxeTableGridOptions['columns'] { } /** 修改用户等级 */ -export function useLeavelFormSchema(): VbenFormSchema[] { +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, }, }, { - fieldName: 'point', + fieldName: 'levelId', label: '用户等级', component: 'ApiSelect', componentProps: { api: () => getSimpleLevelList(), labelField: 'name', valueField: 'id', + placeholder: '请选择用户等级', + clearable: true, }, }, { - component: 'Textarea', fieldName: 'reason', label: '修改原因', + component: 'Textarea', + componentProps: { + placeholder: '请输入修改原因', + }, rules: 'required', }, ]; @@ -311,33 +352,33 @@ export function useLeavelFormSchema(): 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 }, @@ -349,23 +390,26 @@ export function useBalanceFormSchema(): VbenFormSchema[] { defaultValue: 1, }, { - component: 'InputNumber', fieldName: 'changeBalance', label: '变动余额(元)', + component: 'InputNumber', rules: 'required', componentProps: { min: 0, precision: 2, step: 0.1, + placeholder: '请输入变动余额', + controlsPosition: 'right', + class: '!w-full', }, defaultValue: 0, }, { - component: 'Input', fieldName: 'balanceResult', label: '变动后余额(元)', + component: 'Input', dependencies: { - triggerFields: ['changeBalance', 'changeType'], + triggerFields: ['balance', 'changeBalance', 'changeType'], disabled: true, trigger(values, form) { form.setFieldValue( @@ -385,33 +429,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 }, @@ -423,22 +467,27 @@ export function usePointFormSchema(): VbenFormSchema[] { defaultValue: 1, }, { - component: 'InputNumber', fieldName: 'changePoint', label: '变动积分', + component: 'InputNumber', rules: 'required', componentProps: { min: 0, precision: 0, + placeholder: '请输入变动积分', + controlsPosition: 'right', + class: '!w-full', }, - defaultValue: 0, }, { - component: 'Input', fieldName: 'pointResult', label: '变动后积分', + component: 'Input', + componentProps: { + placeholder: '', + }, dependencies: { - triggerFields: ['changePoint', 'changeType'], + triggerFields: ['point', 'changePoint', 'changeType'], disabled: true, trigger(values, form) { form.setFieldValue( diff --git a/apps/web-ele/src/views/member/user/detail/detail.vue b/apps/web-ele/src/views/member/user/detail/index.vue similarity index 100% rename from apps/web-ele/src/views/member/user/detail/detail.vue rename to apps/web-ele/src/views/member/user/detail/index.vue diff --git a/apps/web-ele/src/views/member/user/index.vue b/apps/web-ele/src/views/member/user/index.vue index 8dc3e5108..c1ff4436c 100644 --- a/apps/web-ele/src/views/member/user/index.vue +++ b/apps/web-ele/src/views/member/user/index.vue @@ -6,15 +6,17 @@ import { ref } from 'vue'; import { useRouter } from 'vue-router'; import { DocAlert, Page, useVbenModal } from '@vben/common-ui'; +import { isEmpty } from '@vben/utils'; import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table'; import { getUserPage } from '#/api/member/user'; import { $t } from '#/locales'; +// import { CouponSendForm } from '../../mall/promotion/coupon/components/CouponSendForm.vue'; 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 LevelForm from './modules/level-form.vue'; import PointForm from './modules/point-form.vue'; const router = useRouter(); @@ -34,29 +36,21 @@ const [BalanceFormModal, balanceFormModalApi] = useVbenModal({ destroyOnClose: true, }); -// TODO @霖:拼写错误; -const [LeavelFormModal, leavelFormModalApi] = useVbenModal({ - connectedComponent: LeavelForm, +const [LevelFormModal, levelFormModalApi] = useVbenModal({ + connectedComponent: LevelForm, destroyOnClose: true, }); -/** 刷新表格数据 */ -function onRefresh() { +const [CouponSendFormModal, couponSendFormModalApi] = useVbenModal({ + // connectedComponent: CouponSendForm, + destroyOnClose: true, +}); + +/** 刷新表格 */ +function handleRefresh() { gridApi.query(); } -/** 设置选中 ID */ -const checkedIds = ref([]); -function setCheckedIds({ records }: { records: MemberUserApi.User[] }) { - checkedIds.value = records.map((item) => item.id!); -} - -/** 发送优惠券 */ -// TODO @霖:这个功能没开发对,是发送优惠劵哈; -function handleSendCoupon() { - formModalApi.setData(null).open(); -} - /** 编辑会员 */ function handleEdit(row: MemberUserApi.User) { formModalApi.setData(row).open(); @@ -64,7 +58,7 @@ function handleEdit(row: MemberUserApi.User) { /** 修改会员等级 */ function handleUpdateLevel(row: MemberUserApi.User) { - leavelFormModalApi.setData(row).open(); + levelFormModalApi.setData(row).open(); } /** 修改会员积分 */ @@ -77,6 +71,24 @@ function handleUpdateBalance(row: MemberUserApi.User) { balanceFormModalApi.setData(row).open(); } +/** 发送优惠券 */ +async function handleSendCoupon() { + couponSendFormModalApi + .setData({ + userIds: checkedIds.value, + }) + .open(); +} + +const checkedIds = ref([]); +function handleRowCheckboxChange({ + records, +}: { + records: MemberUserApi.User[]; +}) { + checkedIds.value = records.map((item) => item.id!); +} + /** 查看会员详情 */ function handleViewDetail(row: MemberUserApi.User) { router.push({ @@ -120,8 +132,8 @@ const [Grid, gridApi] = useVbenVxeGrid({ }, } as VxeTableGridOptions, gridEvents: { - checkboxAll: setCheckedIds, - checkboxChange: setCheckedIds, + checkboxAll: handleRowCheckboxChange, + checkboxChange: handleRowCheckboxChange, }, }); @@ -135,10 +147,11 @@ const [Grid, gridApi] = useVbenVxeGrid({ /> - - - - + + + + +