smart-flow/yudao-ui-admin-vben
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
YunaiV
2025-10-07 20:20:33 +08:00
parent d3e7c49255
commit cdd7e69f8e
7 changed files with 167 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
apps/web-ele/src/views/member/user/data.ts
View File

@@ -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(

0
apps/web-ele/src/views/member/user/detail/detail.vue → apps/web-ele/src/views/member/user/detail/index.vue
View File

64
apps/web-ele/src/views/member/user/index.vue
View File

@@ -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<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,
checkboxChange: setCheckedIds,
checkboxAll: handleRowCheckboxChange,
checkboxChange: handleRowCheckboxChange,
},
});
</script>
@@ -135,10 +147,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
/>
</template>
<FormModal @success="onRefresh" />
<PointFormModal @success="onRefresh" />
<BalanceFormModal @success="onRefresh" />
<LeavelFormModal @success="onRefresh" />
<FormModal @success="handleRefresh" />
<PointFormModal @success="handleRefresh" />
<BalanceFormModal @success="handleRefresh" />
<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,
},

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

@@ -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 { getWallet } from '#/api/pay/wallet/balance';
import { getUser } from '#/api/member/user';
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 {

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

@@ -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>

18
apps/web-ele/src/views/member/user/modules/leavel-form.vue → apps/web-ele/src/views/member/user/modules/level-form.vue
View File

@@ -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>

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

@@ -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>