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

feat：【antd】【ele】【pay 支付】pay/wallet/balance 迁移 ele 版本

Browse Source
This commit is contained in:
YunaiV
2025-10-06 13:36:03 +08:00
parent 385b5eaaec
commit b2de0e2a29
9 changed files with 130 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web-antd/src/views/pay/wallet/balance/modules/detail.vue
View File

@@ -62,4 +62,4 @@ const [Modal, modalApi] = useVbenModal({
<Grid />
</Page>
</Modal>
</template>
</template>

14
apps/web-ele/src/views/pay/order/data.ts
View File

@@ -22,7 +22,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '应用编号',
component: 'Input',
componentProps: {
allowClear: true,
clearable: true,
placeholder: '请输入应用编号',
},
},
@@ -31,7 +31,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '支付渠道',
component: 'Select',
componentProps: {
allowClear: true,
clearable: true,
placeholder: '请选择支付渠道',
options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE, 'string'),
},
@@ -41,7 +41,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '商户单号',
component: 'Input',
componentProps: {
allowClear: true,
clearable: true,
placeholder: '请输入商户单号',
},
},
@@ -50,7 +50,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '支付单号',
component: 'Input',
componentProps: {
allowClear: true,
clearable: true,
placeholder: '请输入支付单号',
},
},
@@ -59,7 +59,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '渠道单号',
component: 'Input',
componentProps: {
allowClear: true,
clearable: true,
placeholder: '请输入渠道单号',
},
},
@@ -68,7 +68,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '支付状态',
component: 'Select',
componentProps: {
allowClear: true,
clearable: true,
placeholder: '请选择支付状态',
options: getDictOptions(DICT_TYPE.PAY_ORDER_STATUS, 'number'),
},
@@ -79,7 +79,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
allowClear: true,
clearable: true,
},
},
];

14
apps/web-ele/src/views/pay/refund/data.ts
View File

@@ -22,7 +22,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '应用编号',
component: 'Input',
componentProps: {
allowClear: true,
clearable: true,
placeholder: '请输入应用编号',
},
},
@@ -41,7 +41,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '商户单号',
component: 'Input',
componentProps: {
allowClear: true,
clearable: true,
placeholder: '请输入商户单号',
},
},
@@ -50,7 +50,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '退款单号',
component: 'Input',
componentProps: {
allowClear: true,
clearable: true,
placeholder: '请输入退款单号',
},
},
@@ -59,7 +59,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '渠道单号',
component: 'Input',
componentProps: {
allowClear: true,
clearable: true,
placeholder: '请输入渠道单号',
},
},
@@ -68,7 +68,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '渠道退款单号',
component: 'Input',
componentProps: {
allowClear: true,
clearable: true,
placeholder: '请输入渠道退款单号',
},
},
@@ -77,7 +77,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '退款状态',
component: 'Select',
componentProps: {
allowClear: true,
clearable: true,
placeholder: '请选择退款状态',
options: getDictOptions(DICT_TYPE.PAY_REFUND_STATUS, 'number'),
},
@@ -88,7 +88,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
allowClear: true,
clearable: true,
},
},
];

18
apps/web-ele/src/views/pay/transfer/data.ts
View File

@@ -22,7 +22,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '转账单号',
component: 'Input',
componentProps: {
allowClear: true,
clearable: true,
placeholder: '请输入转账单号',
},
},
@@ -32,7 +32,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE),
allowClear: true,
clearable: true,
placeholder: '请选择支付渠道',
},
},
@@ -41,7 +41,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '商户单号',
component: 'Input',
componentProps: {
allowClear: true,
clearable: true,
placeholder: '请输入商户单号',
},
},
@@ -51,7 +51,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.PAY_TRANSFER_TYPE),
allowClear: true,
clearable: true,
placeholder: '请选择类型',
},
},
@@ -61,7 +61,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.PAY_TRANSFER_STATUS),
allowClear: true,
clearable: true,
placeholder: '请选择转账状态',
},
},
@@ -70,7 +70,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '收款人姓名',
component: 'Input',
componentProps: {
allowClear: true,
clearable: true,
placeholder: '请输入收款人姓名',
},
},
@@ -79,7 +79,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '收款人账号',
component: 'Input',
componentProps: {
allowClear: true,
clearable: true,
placeholder: '请输入收款人账号',
},
},
@@ -88,7 +88,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '渠道单号',
component: 'Input',
componentProps: {
allowClear: true,
clearable: true,
placeholder: '请输入渠道单号',
},
},
@@ -98,7 +98,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
allowClear: true,
clearable: true,
},
},
];

65
apps/web-ele/src/views/pay/wallet/balance/data.ts
View File

@@ -1,6 +1,7 @@
import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
import type { VxeTableGridOptions as VxeTableGridOptionsLegacy } from '@vben/plugins/vxe-table';
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
@@ -8,13 +9,16 @@ import { getDictOptions } from '@vben/hooks';
import { getRangePickerDefaultProps } from '#/utils';
/** 列表的搜索表单 */
// TODO @霖：少了 placeholder
export function useGridFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'userId',
label: '用户编号',
component: 'Input',
componentProps: {
placeholder: '请输入用户编号',
clearable: true,
},
},
{
fieldName: 'userType',
@@ -22,6 +26,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.USER_TYPE, 'number'),
placeholder: '请选择用户类型',
clearable: true,
},
},
{
@@ -29,27 +35,30 @@ export function useGridFormSchema(): VbenFormSchema[] {
label: '创建时间',
component: 'RangePicker',
componentProps: {
clearable: true,
...getRangePickerDefaultProps(),
clearable: true,
},
},
];
}
/** 列表的字段 */
export function useGridColumns(): VxeTableGridOptions['columns'] {
export function useGridColumns(): VxeTableGridOptionsLegacy['columns'] {
return [
{
title: '编号',
field: 'id',
minWidth: 100,
},
{
title: '用户编号',
field: 'userId',
minWidth: 120,
},
{
title: '用户类型',
field: 'userType',
minWidth: 120,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.USER_TYPE },
@@ -58,33 +67,73 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
title: '余额',
field: 'balance',
formatter: 'formatFenToYuanAmount',
minWidth: 120,
formatter: 'formatAmount2',
},
{
title: '累计支出',
field: 'totalExpense',
formatter: 'formatFenToYuanAmount',
minWidth: 120,
formatter: 'formatAmount2',
},
{
title: '累计充值',
field: 'totalRecharge',
formatter: 'formatFenToYuanAmount',
minWidth: 120,
formatter: 'formatAmount2',
},
{
title: '冻结金额',
field: 'freezePrice',
formatter: 'formatFenToYuanAmount',
minWidth: 120,
formatter: 'formatAmount2',
},
{
title: '创建时间',
field: 'createTime',
minWidth: 180,
formatter: 'formatDateTime',
},
{
title: '操作',
field: 'actions',
width: 80,
fixed: 'right',
slots: { default: 'actions' },
},
];
}
/** 钱包交易记录列表字段 */
export function useTransactionGridColumns(): VxeTableGridOptions['columns'] {
return [
{
field: 'id',
title: '编号',
minWidth: 100,
},
{
field: 'title',
title: '关联业务标题',
minWidth: 200,
},
{
field: 'price',
title: '交易金额',
minWidth: 120,
formatter: 'formatAmount2',
},
{
field: 'balance',
title: '钱包余额',
minWidth: 120,
formatter: 'formatAmount2',
},
{
field: 'createTime',
title: '交易时间',
minWidth: 180,
formatter: 'formatDateTime',
},
];
}

23
apps/web-ele/src/views/pay/wallet/balance/index.vue
View File

@@ -9,20 +9,21 @@ import { getWalletPage } from '#/api/pay/wallet/balance';
import { $t } from '#/locales';
import { useGridColumns, useGridFormSchema } from './data';
import WalletDetail from './modules/detail.vue';
import Detail from './modules/detail.vue';
/** 刷新表格 */
function onRefresh() {
gridApi.query();
}
const [WalletModal, walletModalApi] = useVbenModal({
connectedComponent: WalletDetail,
const [DetailModal, detailModalApi] = useVbenModal({
connectedComponent: Detail,
destroyOnClose: true,
});
/** 刷新表格 */
function handleRefresh() {
gridApi.query();
}
/** 查看钱包 */
function handleDetail(row: Required<PayWalletApi.Wallet>) {
walletModalApi.setData(row).open();
detailModalApi.setData(row).open();
}
const [Grid, gridApi] = useVbenVxeGrid({
@@ -46,6 +47,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,
@@ -61,8 +63,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
<DocAlert title="钱包余额" url="https://doc.iocoder.cn/pay/build/" />
</template>
<WalletModal @reload="onRefresh" />
<DetailModal @reload="handleRefresh" />
<Grid>
<template #actions="{ row }">
<TableAction

49
apps/web-ele/src/views/pay/wallet/balance/modules/detail.vue
View File

@@ -1,13 +1,40 @@
<script setup lang="ts">
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { PayWalletApi } from '#/api/pay/wallet/balance';
import type { WalletTransactionApi } from '#/api/pay/wallet/transaction';
import { ref } from 'vue';
import { Page, useVbenModal } from '@vben/common-ui';
import { useVbenModal } from '@vben/common-ui';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getTransactionPage } from '#/api/pay/wallet/transaction';
import WalletTransactionList from '../../transaction/index.vue';
import { useTransactionGridColumns } from '../data';
const walletId = ref(0);
const [Grid, gridApi] = useVbenVxeGrid({
gridOptions: {
columns: useTransactionGridColumns(),
height: 'auto',
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }) => {
return await getTransactionPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
walletId: modalApi.getData<PayWalletApi.Wallet>().id,
});
},
},
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
enabled: false,
},
} as VxeTableGridOptions<WalletTransactionApi.Transaction>,
});
const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
@@ -15,13 +42,9 @@ const [Modal, modalApi] = useVbenModal({
return;
}
// 加载数据
const data = modalApi.getData<PayWalletApi.Wallet>();
if (!data || !data.id) {
return;
}
modalApi.lock();
try {
walletId.value = data.id;
await gridApi.query();
} finally {
modalApi.unlock();
}
@@ -31,10 +54,12 @@ const [Modal, modalApi] = useVbenModal({
<template>
<Modal
title="钱包交易记录"
class="w-2/5"
class="w-1/2"
:show-cancel-button="false"
:show-confirm-button="false"
>
<WalletTransactionList :wallet-id="walletId" />
<Page auto-content-height>
<Grid />
</Page>
</Modal>
</template>
</template>

40
apps/web-ele/src/views/pay/wallet/transaction/data.ts
View File

@@ -1,40 +0,0 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
/** 列表的字段 */
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{
field: 'id',
title: '编号',
width: 80,
},
{
field: 'walletId',
title: '钱包编号',
width: 100,
},
{
field: 'title',
title: '关联业务标题',
width: 200,
},
{
field: 'price',
title: '交易金额',
width: 120,
formatter: ({ cellValue }) => `${cellValue / 100} 元`,
},
{
field: 'balance',
title: '钱包余额',
width: 120,
formatter: ({ cellValue }) => `${cellValue / 100} 元`,
},
{
field: 'createTime',
title: '交易时间',
width: 180,
formatter: 'formatDateTime',
},
];
}

61
apps/web-ele/src/views/pay/wallet/transaction/index.vue
View File

@@ -1,61 +0,0 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { Page } from '@vben/common-ui';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getWallet } from '#/api/pay/wallet/balance';
import { getTransactionPage } from '#/api/pay/wallet/transaction';
import { useGridColumns } from './data';
const props = defineProps({
walletId: {
type: Number,
required: false,
default: undefined,
},
userId: {
type: Number,
required: false,
default: undefined,
},
});
const [Grid] = useVbenVxeGrid({
gridOptions: {
columns: useGridColumns(),
height: 'auto',
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
let walletId = props.walletId;
if (props.userId) {
const wallet = await getWallet({ userId: props.userId });
walletId = wallet.id;
}
return await getTransactionPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
walletId,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: true,
},
} as VxeTableGridOptions<any>,
});
</script>
<template>
<Page auto-content-height>
<Grid />
</Page>
</template>