feat: mall brokeage record

pull/152/head
xingyu4j 2025-06-19 15:51:11 +08:00
parent df396f3441
commit 1518ec2f67
2 changed files with 183 additions and 24 deletions

View File

@ -0,0 +1,128 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { fenToYuan } from '@vben/utils';
import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'userId',
label: '用户编号',
component: 'Input',
componentProps: {
placeholder: '请输入用户编号',
clearable: true,
},
},
{
fieldName: 'bizType',
label: '业务类型',
component: 'Select',
componentProps: {
placeholder: '请选择业务类型',
clearable: true,
options: getDictOptions(DICT_TYPE.BROKERAGE_RECORD_BIZ_TYPE, 'number'),
},
},
{
fieldName: 'status',
label: '状态',
component: 'Select',
componentProps: {
placeholder: '请选择状态',
clearable: true,
options: getDictOptions(DICT_TYPE.BROKERAGE_RECORD_STATUS, 'number'),
},
},
{
fieldName: 'createTime',
label: '创建时间',
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
clearable: true,
},
},
];
}
/** 列表的字段 */
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{
field: 'id',
title: '编号',
minWidth: 60,
},
{
field: 'userId',
title: '用户编号',
minWidth: 80,
},
{
field: 'userAvatar',
title: '头像',
width: 70,
slots: { default: 'userAvatar' },
},
{
field: 'userNickname',
title: '昵称',
minWidth: 80,
},
{
field: 'bizType',
title: '业务类型',
minWidth: 85,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.BROKERAGE_RECORD_BIZ_TYPE },
},
},
{
field: 'bizId',
title: '业务编号',
minWidth: 80,
},
{
field: 'title',
title: '标题',
minWidth: 110,
},
{
field: 'price',
title: '金额',
minWidth: 60,
formatter: ({ row }) => `${fenToYuan(row.price)}`,
},
{
field: 'description',
title: '说明',
minWidth: 120,
},
{
field: 'status',
title: '状态',
minWidth: 85,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.BROKERAGE_RECORD_STATUS },
},
},
{
field: 'unfreezeTime',
title: '解冻时间',
width: 180,
formatter: 'formatDateTime',
},
{
field: 'createTime',
title: '创建时间',
width: 180,
formatter: 'formatDateTime',
},
];
}

View File

@ -1,32 +1,63 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { MallBrokerageRecordApi } from '#/api/mall/trade/brokerage/record';
import { DocAlert, Page } from '@vben/common-ui';
import { Button } from 'ant-design-vue';
import { Avatar } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getBrokerageRecordPage } from '#/api/mall/trade/brokerage/record';
import { useGridColumns, useGridFormSchema } from './data';
defineOptions({ name: 'TradeBrokerageRecord' });
const [Grid] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(),
height: 'auto',
keepSource: true,
showOverflow: 'tooltip',
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await getBrokerageRecordPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<MallBrokerageRecordApi.BrokerageRecord>,
});
</script>
<template>
<Page>
<DocAlert
title="【交易】分销返佣"
url="https://doc.iocoder.cn/mall/trade-brokerage/"
/>
<Button
danger
type="link"
target="_blank"
href="https://github.com/yudaocode/yudao-ui-admin-vue3"
>
该功能支持 Vue3 + element-plus 版本
</Button>
<br />
<Button
type="link"
target="_blank"
href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/trade/brokerage/record/index"
>
可参考
https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mall/trade/brokerage/record/index
代码pull request 贡献给我们
</Button>
<Page auto-content-height>
<template #doc>
<DocAlert
title="【交易】分销返佣"
url="https://doc.iocoder.cn/mall/trade-brokerage/"
/>
</template>
<Grid table-title="">
<template #userAvatar="{ row }">
<Avatar :src="row.userAvatar" />
</template>
</Grid>
</Page>
</template>