From 2f6e7ced5e8d74a4c3531c86e6c12cb65fc99722 Mon Sep 17 00:00:00 2001 From: YunaiV Date: Tue, 7 Oct 2025 10:14:23 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90antd=E3=80=91=E3=80=90ele?= =?UTF-8?q?=E3=80=91=E3=80=90member=20=E4=BC=9A=E5=91=98=E3=80=91level=20?= =?UTF-8?q?=E8=BF=81=E7=A7=BB=20antd?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web-antd/src/views/member/level/data.ts | 53 ++++++++++++++++--- .../web-antd/src/views/member/level/index.vue | 20 ++++--- .../src/views/member/level/modules/form.vue | 6 +-- 3 files changed, 60 insertions(+), 19 deletions(-) diff --git a/apps/web-antd/src/views/member/level/data.ts b/apps/web-antd/src/views/member/level/data.ts index 594d612a9..0ceb1740d 100644 --- a/apps/web-antd/src/views/member/level/data.ts +++ b/apps/web-antd/src/views/member/level/data.ts @@ -5,31 +5,39 @@ import { CommonStatusEnum, DICT_TYPE } from '@vben/constants'; import { getDictOptions } from '@vben/hooks'; import { z } from '#/adapter/form'; +import { getRangePickerDefaultProps } from '#/utils'; /** 新增/修改的表单 */ export function useFormSchema(): VbenFormSchema[] { return [ { - component: 'Input', fieldName: 'id', + component: 'Input', dependencies: { triggerFields: [''], show: () => false, }, }, { - component: 'Input', fieldName: 'name', label: '等级名称', + component: 'Input', + componentProps: { + placeholder: '请输入等级名称', + }, + rules: 'required', }, { - component: 'InputNumber', fieldName: 'level', label: '等级', + component: 'InputNumber', componentProps: { min: 0, precision: 0, + placeholder: '请输入等级', + controlsPosition: 'right', }, + rules: 'required', }, { fieldName: 'experience', @@ -38,7 +46,10 @@ export function useFormSchema(): VbenFormSchema[] { componentProps: { min: 0, precision: 0, + placeholder: '请输入升级经验', + controlsPosition: 'right', }, + rules: 'required', }, { fieldName: 'discountPercent', @@ -48,17 +59,20 @@ export function useFormSchema(): VbenFormSchema[] { min: 0, max: 100, precision: 0, + placeholder: '请输入享受折扣', + controlsPosition: 'right', }, + rules: 'required', }, { - component: 'ImageUpload', fieldName: 'icon', label: '等级图标', + component: 'ImageUpload', }, { - component: 'ImageUpload', fieldName: 'backgroundUrl', - label: '等级背景图', + label: '背景图', + component: 'ImageUpload', }, { fieldName: 'status', @@ -81,16 +95,30 @@ export function useGridFormSchema(): VbenFormSchema[] { fieldName: 'name', label: '等级名称', component: 'Input', + componentProps: { + placeholder: '请输入等级名称', + allowClear: true, + }, }, { fieldName: 'status', label: '状态', component: 'Select', componentProps: { + placeholder: '请选择状态', allowClear: true, options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'), }, }, + { + fieldName: 'createTime', + label: '创建时间', + component: 'RangePicker', + componentProps: { + ...getRangePickerDefaultProps(), + allowClear: true, + }, + }, ]; } @@ -99,11 +127,13 @@ export function useGridColumns(): VxeTableGridOptions['columns'] { return [ { field: 'id', - title: '编号', + title: '等级编号', + minWidth: 80, }, { field: 'icon', title: '等级图标', + minWidth: 100, cellRender: { name: 'CellImage', }, @@ -111,6 +141,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] { { field: 'backgroundUrl', title: '等级背景图', + minWidth: 120, cellRender: { name: 'CellImage', }, @@ -118,22 +149,27 @@ export function useGridColumns(): VxeTableGridOptions['columns'] { { field: 'name', title: '等级名称', + minWidth: 120, }, { field: 'level', title: '等级', + minWidth: 80, }, { field: 'experience', title: '升级经验', + minWidth: 100, }, { field: 'discountPercent', title: '享受折扣(%)', + minWidth: 120, }, { field: 'status', title: '状态', + minWidth: 80, cellRender: { name: 'CellDict', props: { type: DICT_TYPE.COMMON_STATUS }, @@ -142,11 +178,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] { { field: 'createTime', title: '创建时间', + minWidth: 180, formatter: 'formatDateTime', }, { title: '操作', - width: 130, + width: 180, fixed: 'right', slots: { default: 'actions' }, }, diff --git a/apps/web-antd/src/views/member/level/index.vue b/apps/web-antd/src/views/member/level/index.vue index c6ae22464..b18b53caa 100644 --- a/apps/web-antd/src/views/member/level/index.vue +++ b/apps/web-antd/src/views/member/level/index.vue @@ -2,7 +2,7 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table'; import type { MemberLevelApi } from '#/api/member/level'; -import { Page, useVbenModal } from '@vben/common-ui'; +import { DocAlert, Page, useVbenModal } from '@vben/common-ui'; import { message } from 'ant-design-vue'; @@ -19,7 +19,7 @@ const [FormModal, formModalApi] = useVbenModal({ }); /** 刷新表格 */ -function onRefresh() { +function handleRefresh() { gridApi.query(); } @@ -41,10 +41,8 @@ async function handleDelete(row: MemberLevelApi.Level) { }); try { await deleteLevel(row.id as number); - message.success({ - content: $t('ui.actionMessage.deleteSuccess', [row.name]), - }); - onRefresh(); + message.success($t('ui.actionMessage.deleteSuccess', [row.name])); + handleRefresh(); } finally { hideLoading(); } @@ -63,7 +61,7 @@ const [Grid, gridApi] = useVbenVxeGrid({ }, proxyConfig: { ajax: { - query: async (_params, formValues) => { + query: async (_, formValues) => { return await getLevelList({ ...formValues, }); @@ -72,6 +70,7 @@ const [Grid, gridApi] = useVbenVxeGrid({ }, rowConfig: { keyField: 'id', + isHover: true, }, toolbarConfig: { refresh: true, @@ -83,7 +82,12 @@ const [Grid, gridApi] = useVbenVxeGrid({