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/notify 迁移 ele 版本

Browse Source
This commit is contained in:
YunaiV
2025-10-06 11:11:51 +08:00
parent c168045639
commit 0627f5072d
5 changed files with 274 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/web-antd/src/views/pay/notify/data.ts
View File

@@ -161,13 +161,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
field: 'notifyTimes',
title: '通知次数',
minWidth: 120,
cellRender: {
name: 'CellTag',
props: {
type: 'success',
content: '{notifyTimes} / {maxNotifyTimes}',
},
},
formatter: ({ row }) => `${row.notifyTimes} / ${row.maxNotifyTimes}`,
},
{
title: '操作',

47
apps/web-ele/src/api/pay/notify/index.ts
View File

@@ -1,15 +1,52 @@
import type { PageParam } from '@vben/request';
import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace PayNotifyApi {
/** 支付通知任务 */
export interface NotifyTask {
id: number;
appId: number;
appName: string;
type: number;
dataId: number;
status: number;
merchantOrderId: string;
merchantRefundId?: string;
merchantTransferId?: string;
lastExecuteTime: Date;
nextNotifyTime: Date;
notifyTimes: number;
maxNotifyTimes: number;
createTime: Date;
updateTime: Date;
logs?: any[];
}
/** 支付通知任务分页请求 */
export interface NotifyTaskPageReqVO extends PageParam {
appId?: number;
type?: number;
dataId?: number;
status?: number;
merchantOrderId?: string;
merchantRefundId?: string;
merchantTransferId?: string;
createTime?: Date[];
}
}
/** 获得支付通知明细 */
export function getNotifyTaskDetail(id: number) {
return requestClient.get(`/pay/notify/get-detail?id=${id}`);
}
/** 获得支付通知分页 */
export function getNotifyTaskPage(params: PageParam) {
return requestClient.get('/pay/notify/page', {
params,
});
export function getNotifyTaskPage(params: PayNotifyApi.NotifyTaskPageReqVO) {
return requestClient.get<PageResult<PayNotifyApi.NotifyTask>>(
'/pay/notify/page',
{
params,
},
);
}

211
apps/web-ele/src/views/pay/notify/data.ts
View File

@@ -1,14 +1,19 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { PayNotifyApi } from '#/api/pay/notify';
import type { DescriptionItemSchema } from '#/components/description';
import { h } from 'vue';
import { getAppList } from '#/api/pay/app';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { formatDateTime } from '@vben/utils';
import { getAppList } from '#/api/pay/app';
import { DictTag } from '#/components/dict-tag';
import { getRangePickerDefaultProps } from '#/utils';
/** 列表的搜索表单 */
// TODO @霖：缺少 placeholder
export function useGridFormSchema(): VbenFormSchema[] {
return [
{
@@ -24,7 +29,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
}));
},
autoSelect: 'first',
placeholder: '请选择数据源',
placeholder: '请选择应用编号',
},
},
{
@@ -34,12 +39,17 @@ export function useGridFormSchema(): VbenFormSchema[] {
componentProps: {
clearable: true,
options: getDictOptions(DICT_TYPE.PAY_NOTIFY_TYPE, 'number'),
placeholder: '请选择通知类型',
},
},
{
fieldName: 'dataId',
label: '关联编号',
component: 'Input',
componentProps: {
clearable: true,
placeholder: '请输入关联编号',
},
},
{
fieldName: 'status',
@@ -48,12 +58,35 @@ export function useGridFormSchema(): VbenFormSchema[] {
componentProps: {
clearable: true,
options: getDictOptions(DICT_TYPE.PAY_NOTIFY_STATUS, 'number'),
placeholder: '请选择通知状态',
},
},
{
fieldName: 'merchantOrderId',
label: '商户订单编号',
component: 'Input',
componentProps: {
clearable: true,
placeholder: '请输入商户订单编号',
},
},
{
fieldName: 'merchantRefundId',
label: '商户退款编号',
component: 'Input',
componentProps: {
clearable: true,
placeholder: '请输入商户退款编号',
},
},
{
fieldName: 'merchantTransferId',
label: '商户转账编号',
component: 'Input',
componentProps: {
clearable: true,
placeholder: '请输入商户转账编号',
},
},
{
fieldName: 'createTime',
@@ -62,6 +95,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
componentProps: {
...getRangePickerDefaultProps(),
clearable: true,
placeholder: ['开始日期', '结束日期'],
},
},
];
@@ -73,18 +107,25 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'id',
title: '任务编号',
minWidth: 100,
},
{
field: 'appName',
title: '应用编号',
title: '应用名称',
minWidth: 150,
},
{
field: 'merchantOrderId',
title: '商户订单编号',
field: 'merchantInfo',
title: '商户单信息',
minWidth: 240,
slots: {
default: 'merchantInfo',
},
},
{
field: 'type',
title: '通知类型',
minWidth: 120,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.PAY_NOTIFY_TYPE },
@@ -93,10 +134,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'dataId',
title: '关联编号',
minWidth: 120,
},
{
field: 'status',
title: '通知状态',
minWidth: 120,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.PAY_NOTIFY_STATUS },
@@ -105,23 +148,20 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'lastExecuteTime',
title: '最后通知时间',
minWidth: 180,
formatter: 'formatDateTime',
},
{
field: 'nextNotifyTime',
title: '下次通知时间',
minWidth: 180,
formatter: 'formatDateTime',
},
{
field: 'notifyTimes',
title: '通知次数',
cellRender: {
name: 'CellTag',
props: {
type: 'success',
content: '{notifyTimes} / {maxNotifyTimes}',
},
},
minWidth: 120,
formatter: ({ row }) => `${row.notifyTimes} / ${row.maxNotifyTimes}`,
},
{
title: '操作',
@@ -132,41 +172,110 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
];
}
/** 详情列表的字段 */
export const detailColumns = [
{
title: '日志编号',
dataIndex: 'id',
key: 'id',
width: 120,
ellipsis: false,
},
{
title: '通知状态',
dataIndex: 'status',
key: 'status',
width: 120,
ellipsis: false,
},
{
title: '通知次数',
dataIndex: 'notifyTimes',
key: 'notifyTimes',
width: 120,
ellipsis: false,
},
{
title: '通知时间',
dataIndex: 'lastExecuteTime',
key: 'lastExecuteTime',
width: 120,
ellipsis: false,
},
{
title: '响应结果',
dataIndex: 'response',
key: 'response',
width: 120,
ellipsis: false,
},
];
/** 详情的字段 */
export function useDetailSchema(): DescriptionItemSchema[] {
return [
{
field: 'appId',
label: '应用编号',
},
{
field: 'appName',
label: '应用名称',
},
{
field: 'type',
label: '通知类型',
content: (data: PayNotifyApi.NotifyTask) =>
h(DictTag, {
type: DICT_TYPE.PAY_NOTIFY_TYPE,
value: data?.type,
}),
},
{
field: 'dataId',
label: '关联编号',
},
{
field: 'status',
label: '通知状态',
content: (data: PayNotifyApi.NotifyTask) =>
h(DictTag, {
type: DICT_TYPE.PAY_NOTIFY_STATUS,
value: data?.status,
}),
},
{
field: 'merchantOrderId',
label: '商户订单编号',
},
{
field: 'lastExecuteTime',
label: '最后通知时间',
content: (data: PayNotifyApi.NotifyTask) =>
formatDateTime(data?.lastExecuteTime) as string,
},
{
field: 'nextNotifyTime',
label: '下次通知时间',
content: (data: PayNotifyApi.NotifyTask) =>
formatDateTime(data?.nextNotifyTime) as string,
},
{
field: 'notifyTimes',
label: '通知次数',
},
{
field: 'maxNotifyTimes',
label: '最大通知次数',
},
{
field: 'createTime',
label: '创建时间',
content: (data: PayNotifyApi.NotifyTask) =>
formatDateTime(data?.createTime) as string,
},
{
field: 'updateTime',
label: '更新时间',
content: (data: PayNotifyApi.NotifyTask) =>
formatDateTime(data?.updateTime) as string,
},
];
}
/** 详情的日志字段 */
export function useDetailLogColumns(): VxeTableGridOptions['columns'] {
return [
{
field: 'id',
title: '日志编号',
minWidth: 120,
},
{
field: 'status',
title: '通知状态',
minWidth: 120,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.PAY_NOTIFY_STATUS },
},
},
{
field: 'notifyTimes',
title: '通知次数',
minWidth: 120,
},
{
field: 'createTime',
title: '通知时间',
minWidth: 180,
formatter: 'formatDateTime',
},
{
field: 'response',
title: '响应结果',
minWidth: 200,
},
];
}

33
apps/web-ele/src/views/pay/notify/index.vue
View File

@@ -1,9 +1,12 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { PayNotifyApi } from '#/api/pay/notify';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { ElTag } from 'element-plus';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { getNotifyTaskPage } from '#/api/pay/notify';
@@ -16,12 +19,12 @@ const [DetailModal, detailModalApi] = useVbenModal({
});
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.query();
}
/** 查看详情 */
function handleDetail(row: any) {
function handleDetail(row: PayNotifyApi.NotifyTask) {
detailModalApi.setData(row).open();
}
@@ -30,6 +33,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
schema: useGridFormSchema(),
},
gridOptions: {
cellConfig: {
height: 80,
},
columns: useGridColumns(),
height: 'auto',
keepSource: true,
@@ -46,12 +52,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,
search: true,
},
} as VxeTableGridOptions<any>,
} as VxeTableGridOptions<PayNotifyApi.NotifyTask>,
});
</script>
<template>
@@ -60,8 +67,24 @@ const [Grid, gridApi] = useVbenVxeGrid({
<DocAlert title="支付功能开启" url="https://doc.iocoder.cn/pay/build/" />
</template>
<DetailModal @success="onRefresh" />
<Grid table-title="支付通知列表">
<DetailModal @success="handleRefresh" />
<Grid table-title="通知列表">
<template #merchantInfo="{ row }">
<div class="flex flex-col gap-1 text-left">
<p class="text-sm" v-if="row.merchantOrderId">
<ElTag size="small" type="primary">商户订单编号</ElTag>
{{ row.merchantOrderId }}
</p>
<p class="text-sm" v-if="row.merchantRefundId">
<ElTag size="small" type="warning">商户退款编号</ElTag>
{{ row.merchantRefundId }}
</p>
<p class="text-sm" v-if="row.merchantTransferId">
<ElTag size="small" type="success">商户转账编号</ElTag>
{{ row.merchantTransferId }}
</p>
</div>
</template>
<template #actions="{ row }">
<TableAction
:actions="[

108
apps/web-ele/src/views/pay/notify/modules/detail.vue
View File

@@ -1,24 +1,51 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { PayNotifyApi } from '#/api/pay/notify';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { formatDateTime } from '@vben/utils';
import {
ElDescriptions,
ElDescriptionsItem,
ElDivider,
ElTable,
ElTag,
} from 'element-plus';
import { ElDivider } from 'element-plus';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getNotifyTaskDetail } from '#/api/pay/notify';
import { DictTag } from '#/components/dict-tag';
import { useDescription } from '#/components/description';
import { detailColumns } from '../data';
import { useDetailLogColumns, useDetailSchema } from '../data';
const formData = ref();
const formData = ref<PayNotifyApi.NotifyTask>();
const [Description] = useDescription({
componentProps: {
border: true,
column: 2,
direction: 'horizontal',
labelWidth: 140,
title: '',
extra: '',
},
schema: useDetailSchema(),
});
const [LogGrid, logGridApi] = useVbenVxeGrid({
gridOptions: {
columns: useDetailLogColumns(),
height: 'auto',
keepSource: true,
rowConfig: {
keyField: 'id',
isHover: true,
},
pagerConfig: {
enabled: false,
},
toolbarConfig: {
enabled: true,
refresh: true,
},
} as VxeTableGridOptions,
});
const [Modal, modalApi] = useVbenModal({
async onOpenChange(isOpen: boolean) {
@@ -27,13 +54,14 @@ const [Modal, modalApi] = useVbenModal({
return;
}
// 加载数据
const data = modalApi.getData();
const data = modalApi.getData<PayNotifyApi.NotifyTask>();
if (!data || !data.id) {
return;
}
modalApi.lock();
try {
formData.value = await getNotifyTaskDetail(data.id);
logGridApi.grid?.reloadData(formData.value?.logs || []);
} finally {
modalApi.unlock();
}
@@ -48,60 +76,10 @@ const [Modal, modalApi] = useVbenModal({
:show-cancel-button="false"
:show-confirm-button="false"
>
<ElDescriptions border :column="2" class="mx-4">
<ElDescriptionsItem label="商户订单编号">
<ElTag>{{ formData?.merchantOrderId }}</ElTag>
</ElDescriptionsItem>
<ElDescriptionsItem label="通知状态">
<DictTag
:type="DICT_TYPE.PAY_NOTIFY_STATUS"
:value="formData?.status"
/>
</ElDescriptionsItem>
<ElDescriptionsItem label="应用编号">
{{ formData?.appId }}
</ElDescriptionsItem>
<ElDescriptionsItem label="应用名称">
{{ formData?.appName }}
</ElDescriptionsItem>
<ElDescriptionsItem label="关联编号">
{{ formData?.dataId }}
</ElDescriptionsItem>
<ElDescriptionsItem label="通知类型">
<DictTag :type="DICT_TYPE.PAY_NOTIFY_TYPE" :value="formData?.type" />
</ElDescriptionsItem>
<ElDescriptionsItem label="通知次数">
{{ formData?.notifyTimes }}
</ElDescriptionsItem>
<ElDescriptionsItem label="最大通知次数">
{{ formData?.maxNotifyTimes }}
</ElDescriptionsItem>
<ElDescriptionsItem label="最后通知时间">
{{ formatDateTime(formData?.lastExecuteTime || '') }}
</ElDescriptionsItem>
<ElDescriptionsItem label="创建时间">
{{ formatDateTime(formData?.createTime || '') }}
</ElDescriptionsItem>
<ElDescriptionsItem label="更新时间">
{{ formatDateTime(formData?.updateTime || '') }}
</ElDescriptionsItem>
</ElDescriptions>
<Description :data="formData" />
<ElDivider />
<ElDescriptions border :column="1" class="mx-4">
<ElDescriptionsItem label="回调日志">
<ElTable
v-if="formData"
:data-source="formData.logs"
:columns="detailColumns"
/>
</ElDescriptionsItem>
</ElDescriptions>
<LogGrid table-title="支付通知列表" />
</Modal>
</template>