feat：【ele】【member 会员】优化会员 list、form 相关的代码

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: {
+      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) => {
@@ -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(

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 [LevelFormModal, levelFormModalApi] = useVbenModal({
-const [LeavelFormModal, leavelFormModalApi] = useVbenModal({
+  connectedComponent: LevelForm,
-  connectedComponent: LeavelForm,
   destroyOnClose: true,
 });
 
-/** 刷新表格数据 */
+const [CouponSendFormModal, couponSendFormModalApi] = useVbenModal({
-function onRefresh() {
+  // connectedComponent: CouponSendForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
   gridApi.query();
 }
 
-/** 设置选中 ID */
-const checkedIds = ref<number[]>([]);
-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<number[]>([]);
+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<MemberUserApi.User>,
   gridEvents: {
-    checkboxAll: setCheckedIds,
+    checkboxAll: handleRowCheckboxChange,
-    checkboxChange: setCheckedIds,
+    checkboxChange: handleRowCheckboxChange,
   },
 });
 </script>
@@ -135,10 +147,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
       />
     </template>
 
-    <FormModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
-    <PointFormModal @success="onRefresh" />
+    <PointFormModal @success="handleRefresh" />
-    <BalanceFormModal @success="onRefresh" />
+    <BalanceFormModal @success="handleRefresh" />
-    <LeavelFormModal @success="onRefresh" />
+    <LevelFormModal @success="handleRefresh" />
+    <CouponSendFormModal />
     <Grid table-title="会员列表">
       <template #toolbar-tools>
         <TableAction
@@ -147,6 +160,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: '发送优惠券',
               type: 'primary',
               icon: 'lucide:mouse-pointer-2',
+              disabled: isEmpty(checkedIds),
               auth: ['promotion:coupon:send'],
               onClick: handleSendCoupon,
             },

apps/web-ele/src/views/member/user/modules/balance-form.vue

@@ -4,13 +4,13 @@ import type { MemberUserApi } from '#/api/member/user';
 import { ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
-import { formatToFraction } from '@vben/utils';
+import { fenToYuan, yuanToFen } from '@vben/utils';
 
 import { ElMessage } from 'element-plus';
 
 import { useVbenForm } from '#/adapter/form';
-import { getUser, updateUser } from '#/api/member/user';
+import { getUser } from '#/api/member/user';
-import { getWallet } from '#/api/pay/wallet/balance';
+import { getWallet, updateWalletBalance } from '#/api/pay/wallet/balance';
 import { $t } from '#/locales';
 
 import { useBalanceFormSchema } from '../data';
@@ -45,9 +45,12 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     // 提交表单
-    const data = (await formApi.getValues()) as MemberUserApi.User;
+    const data = await formApi.getValues();
     try {
-      await updateUser(data);
+      await updateWalletBalance({
+        userId: data.id,
+        balance: yuanToFen(data.changeBalance) * data.changeType,
+      });
       // 关闭并提示
       await modalApi.close();
       emit('success');
@@ -74,9 +77,9 @@ const [Modal, modalApi] = useVbenModal({
       const wallet = await getWallet({ userId: user.id });
       formData.value.id = user.id;
       formData.value.nickname = user.nickname || '';
-      formData.value.balance = formatToFraction(wallet.balance);
+      formData.value.balance = fenToYuan(wallet.balance);
       formData.value.changeType = 1; // 默认增加余额
-      formData.value.changeBalance = 0; // 变动余额默认0
+      formData.value.changeBalance = 0; // 变动余额默认 0
       // 设置到 values
       await formApi.setValues(formData.value);
     } finally {

apps/web-ele/src/views/member/user/modules/form.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { MemberUserApi } from '#/api/member/user';
 
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
@@ -15,6 +15,11 @@ import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
 const formData = ref<MemberUserApi.User>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['会员'])
+    : $t('ui.actionTitle.create', ['会员']);
+});
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
@@ -71,7 +76,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-2/5" :title="$t('ui.actionTitle.edit', ['会员'])">
+  <Modal :title="getTitle" class="w-1/2">
     <Form class="mx-4" />
   </Modal>
 </template>

apps/web-ele/src/views/member/user/modules/level-form.vue

@@ -1,20 +1,23 @@
 <script lang="ts" setup>
 import type { MemberUserApi } from '#/api/member/user';
 
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
 import { ElMessage } from 'element-plus';
 
 import { useVbenForm } from '#/adapter/form';
-import { getUser, updateUser } from '#/api/member/user';
+import { getUser, updateUserLevel } from '#/api/member/user';
 import { $t } from '#/locales';
 
-import { useLeavelFormSchema } from '../data';
+import { useLevelFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
 const formData = ref<MemberUserApi.User>();
+const getTitle = computed(() => {
+  return $t('ui.actionTitle.edit', ['用户等级']);
+});
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
@@ -25,7 +28,7 @@ const [Form, formApi] = useVbenForm({
     labelWidth: 80,
   },
   layout: 'horizontal',
-  schema: useLeavelFormSchema(),
+  schema: useLevelFormSchema(),
   showDefaultActions: false,
 });
 
@@ -37,9 +40,10 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     // 提交表单
-    const data = (await formApi.getValues()) as MemberUserApi.User;
+    const data =
+      (await formApi.getValues()) as MemberUserApi.UserUpdateLevelReqVO;
     try {
-      await updateUser(data);
+      await updateUserLevel(data);
       // 关闭并提示
       await modalApi.close();
       emit('success');
@@ -71,7 +75,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-1/3" :title="$t('ui.actionTitle.edit', ['用户等级'])">
+  <Modal :title="getTitle" class="w-1/2">
     <Form class="mx-4" />
   </Modal>
 </template>

apps/web-ele/src/views/member/user/modules/point-form.vue

@@ -1,20 +1,23 @@
 <script lang="ts" setup>
 import type { MemberUserApi } from '#/api/member/user';
 
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
 import { ElMessage } from 'element-plus';
 
 import { useVbenForm } from '#/adapter/form';
-import { getUser, updateUser } from '#/api/member/user';
+import { getUser, updateUserPoint } from '#/api/member/user';
 import { $t } from '#/locales';
 
 import { usePointFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
 const formData = ref<MemberUserApi.User>();
+const getTitle = computed(() => {
+  return $t('ui.actionTitle.edit', ['用户积分']);
+});
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
@@ -37,9 +40,12 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     // 提交表单
-    const data = (await formApi.getValues()) as MemberUserApi.User;
+    const data = await formApi.getValues();
     try {
-      await updateUser(data);
+      await updateUserPoint({
+        id: data.id,
+        point: data.changePoint * data.changeType,
+      });
       // 关闭并提示
       await modalApi.close();
       emit('success');
@@ -71,7 +77,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-1/3" :title="$t('ui.actionTitle.edit', ['用户积分'])">
+  <Modal :title="getTitle" class="w-1/2">
     <Form class="mx-4" />
   </Modal>
 </template>