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

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: {
+      minWidth: 80,
-        default: ({ row }) => {
+      cellRender: {
-          return h('img', {
+        name: 'CellImage',
-            src: row.avatar,
-            style: { width: '40px' },
-          });
-        },
       },
     },
     {
       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,

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<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,
+    checkboxAll: handleRowCheckboxChange,
-    checkboxChange: setCheckedIds,
+    checkboxChange: handleRowCheckboxChange,
   },
 });
 </script>
@@ -134,10 +133,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       />
     </template>
 
-    <FormModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
-    <PointFormModal @success="onRefresh" />
+    <PointFormModal @success="handleRefresh" />
-    <BalanceFormModal @success="onRefresh" />
+    <BalanceFormModal @success="handleRefresh" />
-    <LevelFormModal @success="onRefresh" />
+    <LevelFormModal @success="handleRefresh" />
     <Grid table-title="会员列表">
       <template #toolbar-tools>
         <TableAction