yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: pay

pull/115/MERGE
xingyu4j 2025-05-26 17:22:09 +08:00
parent a602decde9
commit ae7b549879
9 changed files with 285 additions and 356 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,13 +1,9 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import { useAccess } from '@vben/access';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { getAppList } from '#/api/pay/app';
import { DICT_TYPE, getDictOptions } from '#/utils';
const { hasAccessByCodes } = useAccess();
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
@ -69,9 +65,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
}
/** 列表的字段 */
export function useGridColumns<T = any>(
onActionClick: OnActionClickFn<T>,
): VxeTableGridOptions['columns'] {
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{
field: 'id',
@ -136,23 +130,10 @@ export function useGridColumns<T = any>(
},
},
{
field: 'operation',
title: '操作',
minWidth: 100,
align: 'center',
width: 80,
fixed: 'right',
cellRender: {
attrs: {
onClick: onActionClick,
},
name: 'CellOperation',
options: [
{
code: 'detail',
show: hasAccessByCodes(['pay:notify:query']),
},
],
},
slots: { default: 'actions' },
},
];
}

47
apps/web-antd/src/views/pay/notify/index.vue
View File

@ -1,19 +1,16 @@
<script lang="ts" setup>
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { Page, useVbenModal } from '@vben/common-ui';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import * as PayNotifyApi from '#/api/pay/notify';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { getNotifyTaskPage } from '#/api/pay/notify';
import { DocAlert } from '#/components/doc-alert';
import { useGridColumns, useGridFormSchema } from './data';
import Detail from './modules/detail.vue';
const [NotifyDetailModal, notifyDetailModalApi] = useVbenModal({
const [DetailModal, detailModalApi] = useVbenModal({
connectedComponent: Detail,
destroyOnClose: true,
});
@ -24,18 +21,8 @@ function onRefresh() {
}
/** 查看详情 */
function onDetail(row: any) {
notifyDetailModalApi.setData(row).open();
}
/** 表格操作按钮的回调函数 */
function onActionClick({ code, row }: OnActionClickParams<any>) {
switch (code) {
case 'detail': {
onDetail(row);
break;
}
}
function handleDetail(row: any) {
detailModalApi.setData(row).open();
}
const [Grid, gridApi] = useVbenVxeGrid({
@ -43,13 +30,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(onActionClick),
columns: useGridColumns(),
height: 'auto',
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await PayNotifyApi.getNotifyTaskPage({
return await getNotifyTaskPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
@ -72,7 +59,21 @@ const [Grid, gridApi] = useVbenVxeGrid({
<template #doc>
<DocAlert title="支付功能开启" url="https://doc.iocoder.cn/pay/build/" />
</template>
<NotifyDetailModal @success="onRefresh" />
<Grid table-title="支付通知列表" />
<DetailModal @success="onRefresh" />
<Grid table-title="支付通知列表">
<template #actions="{ row }">
<TableAction
:actions="[
{
label: $t('common.detail'),
type: 'link',
icon: ACTION_ICON.VIEW,
auth: ['pay:notify:query'],
onClick: handleDetail.bind(null, row),
},
]"
/>
</template>
</Grid>
</Page>
</template>

7
apps/web-antd/src/views/pay/notify/modules/detail.vue
View File

@ -33,13 +33,6 @@ const [Modal, modalApi] = useVbenModal({
}
},
});
/** 打开弹窗 */
const open = (id: number) => {
modalApi.setData({ id }).open();
};
defineExpose({ open });
</script>
<template>

259
apps/web-antd/src/views/pay/order/data.ts
View File

@ -1,144 +1,137 @@
import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { DICT_TYPE, getDictOptions } from '#/utils/dict';
import { DICT_TYPE, getDictOptions } from '#/utils';
export const querySchema: FormSchemaGetter = () => [
{
component: 'Input',
fieldName: 'appId',
label: '应用编号',
componentProps: {
placeholder: '请输入应用编号',
},
},
{
component: 'Select',
fieldName: 'channelCode',
label: '支付渠道',
componentProps: {
placeholder: '请选择开启状态',
options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE, 'string'),
},
},
{
component: 'Input',
fieldName: 'merchantOrderId',
label: '商户单号',
componentProps: {
placeholder: '请输入商户单号',
},
},
{
component: 'Input',
fieldName: 'no',
label: '支付单号',
componentProps: {
placeholder: '请输入支付单号',
},
},
{
component: 'Input',
fieldName: 'channelOrderNo',
label: '渠道单号',
componentProps: {
placeholder: '请输入渠道单号',
},
},
{
component: 'Select',
fieldName: 'status',
label: '支付状态',
componentProps: {
placeholder: '请选择支付状态',
options: getDictOptions(DICT_TYPE.PAY_ORDER_STATUS, 'number'),
},
},
{
component: 'RangePicker',
fieldName: 'createTime',
label: '创建时间',
componentProps: {
placeholder: ['开始日期', '结束日期'],
},
},
];
export const columns: VxeGridProps['columns'] = [
{ type: 'checkbox', width: 60 },
{
title: '编号',
field: 'id',
},
{
title: '支付金额',
field: 'price',
slots: {
default: ({ row }) => {
return `￥${(row.price || 0 / 100).toFixed(2)}`;
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
{
component: 'Input',
fieldName: 'appId',
label: '应用编号',
componentProps: {
placeholder: '请输入应用编号',
},
},
},
{
title: '退款金额',
field: 'refundPrice',
slots: {
default: ({ row }) => {
return `￥${(row.refundPrice || 0 / 100).toFixed(2)}`;
{
component: 'Select',
fieldName: 'channelCode',
label: '支付渠道',
componentProps: {
placeholder: '请选择开启状态',
options: getDictOptions(DICT_TYPE.PAY_CHANNEL_CODE, 'string'),
},
},
},
{
title: '手续金额',
field: 'channelFeePrice',
slots: {
default: ({ row }) => {
return `￥${(row.channelFeePrice || 0 / 100).toFixed(2)}`;
{
component: 'Input',
fieldName: 'merchantOrderId',
label: '商户单号',
componentProps: {
placeholder: '请输入商户单号',
},
},
},
{
title: '订单号',
field: 'no',
slots: {
default: 'no',
{
component: 'Input',
fieldName: 'no',
label: '支付单号',
componentProps: {
placeholder: '请输入支付单号',
},
},
},
{
title: '支付状态',
field: 'status',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.PAY_ORDER_STATUS },
{
component: 'Input',
fieldName: 'channelOrderNo',
label: '渠道单号',
componentProps: {
placeholder: '请输入渠道单号',
},
},
},
{
title: '支付渠道',
field: 'channelCode',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
{
component: 'Select',
fieldName: 'status',
label: '支付状态',
componentProps: {
placeholder: '请选择支付状态',
options: getDictOptions(DICT_TYPE.PAY_ORDER_STATUS, 'number'),
},
},
},
{
title: '支付时间',
field: 'successTime',
minWidth: 180,
formatter: 'formatDateTime',
},
{
title: '支付应用',
field: 'appName',
},
{
title: '商品标题',
field: 'subject',
},
{
field: 'action',
fixed: 'right',
slots: { default: 'action' },
title: '操作',
minWidth: 80,
},
];
{
component: 'RangePicker',
fieldName: 'createTime',
label: '创建时间',
componentProps: {
placeholder: ['开始日期', '结束日期'],
},
},
];
}
/** 列表的字段 */
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{ type: 'checkbox', width: 60 },
{
title: '编号',
field: 'id',
},
{
title: '支付金额',
field: 'price',
formatter: 'formatAmount',
},
{
title: '退款金额',
field: 'refundPrice',
formatter: 'formatAmount',
},
{
title: '手续金额',
field: 'channelFeePrice',
formatter: 'formatAmount',
},
{
title: '订单号',
field: 'no',
slots: {
default: 'no',
},
},
{
title: '支付状态',
field: 'status',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.PAY_ORDER_STATUS },
},
},
{
title: '支付渠道',
field: 'channelCode',
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.PAY_CHANNEL_CODE },
},
},
{
title: '支付时间',
field: 'successTime',
minWidth: 180,
formatter: 'formatDateTime',
},
{
title: '支付应用',
field: 'appName',
},
{
title: '商品标题',
field: 'subject',
},
{
title: '操作',
width: 80,
fixed: 'right',
slots: { default: 'actions' },
},
];
}

164
apps/web-antd/src/views/pay/order/index.vue
View File

@ -1,110 +1,93 @@
<script lang="ts" setup>
import type { VbenFormProps } from '@vben/common-ui';
import type { VxeGridProps } from '#/adapter/vxe-table';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { PayOrderApi } from '#/api/pay/order';
import { Page, useVbenModal } from '@vben/common-ui';
import { Tag } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import * as OrderApi from '#/api/pay/order';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { getOrderPage } from '#/api/pay/order';
import { DocAlert } from '#/components/doc-alert';
import { columns, querySchema } from './data';
import detailFrom from './modules/order-detail.vue';
import { useGridColumns, useGridFormSchema } from './data';
import Detail from './modules/detail.vue';
const formOptions: VbenFormProps = {
commonConfig: {
labelWidth: 100,
componentProps: {
allowClear: true,
},
},
schema: querySchema(),
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
// 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
// 不需要直接删除
// fieldMappingTime: [
// [
// 'createTime',
// ['params[beginTime]', 'params[endTime]'],
// ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
// ],
// ],
};
const [DetailModal, detailModalApi] = useVbenModal({
connectedComponent: Detail,
destroyOnClose: true,
});
const gridOptions: VxeGridProps = {
checkboxConfig: {
// 高亮
highlight: true,
// 翻页时保留选中状态
reserve: true,
// 点击行选中
// trigger: 'row',
/** 刷新表格 */
function onRefresh() {
gridApi.query();
}
/** 查看详情 */
function handleDetail(row: PayOrderApi.Order) {
detailModalApi.setData(row).open();
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
columns,
height: 'auto',
keepSource: true,
pagerConfig: {},
proxyConfig: {
ajax: {
query: async ({ page }, formValues = {}) => {
return await OrderApi.getOrderPage({
pageNum: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
gridOptions: {
columns: useGridColumns(),
height: 'auto',
keepSource: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
return await getOrderPage({
pageNo: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
},
rowConfig: {
keyField: 'id',
},
// 表格全局唯一表示 保存列配置需要用到
id: 'pay-order-index',
};
const [BasicTable] = useVbenVxeGrid({
formOptions,
gridOptions,
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<PayOrderApi.Order>,
});
const [DetailModal, modalDetailApi] = useVbenModal({
connectedComponent: detailFrom,
});
const openDetail = (id: number) => {
modalDetailApi.setData({
id,
});
modalDetailApi.open();
};
</script>
<template>
<Page :auto-content-height="true">
<DocAlert
title="支付宝支付接入"
url="https://doc.iocoder.cn/pay/alipay-pay-demo/"
/>
<DocAlert
title="微信公众号支付接入"
url="https://doc.iocoder.cn/pay/wx-pub-pay-demo/"
/>
<DocAlert
title="微信小程序支付接入"
url="https://doc.iocoder.cn/pay/wx-lite-pay-demo/"
/>
<BasicTable>
<template #action="{ row }">
<a-button
type="link"
v-access:code="['pay:order:query']"
@click="openDetail(row.id)"
>
{{ $t('ui.actionTitle.detail') }}
</a-button>
<template #doc>
<DocAlert
title="支付宝支付接入"
url="https://doc.iocoder.cn/pay/alipay-pay-demo/"
/>
<DocAlert
title="微信公众号支付接入"
url="https://doc.iocoder.cn/pay/wx-pub-pay-demo/"
/>
<DocAlert
title="微信小程序支付接入"
url="https://doc.iocoder.cn/pay/wx-lite-pay-demo/"
/>
</template>
<DetailModal @success="onRefresh" />
<Grid table-title="支付订单列表">
<template #actions="{ row }">
<TableAction
:actions="[
{
label: $t('common.detail'),
type: 'link',
icon: ACTION_ICON.VIEW,
auth: ['pay:order:query'],
onClick: handleDetail.bind(null, row),
},
]"
/>
</template>
<template #no="{ row }">
<p class="order-font">
@ -118,7 +101,6 @@ const openDetail = (id: number) => {
{{ row.channelOrderNo }}
</p>
</template>
</BasicTable>
<DetailModal />
</Grid>
</Page>
</template>

43
apps/web-antd/src/views/pay/order/modules/order-detail.vue → apps/web-antd/src/views/pay/order/modules/detail.vue
View File

@ -1,4 +1,6 @@
<script setup lang="ts">
import type { PayOrderApi } from '#/api/pay/order';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
@ -6,34 +8,39 @@ import { formatDateTime } from '@vben/utils';
import { Descriptions, Divider, Tag } from 'ant-design-vue';
import * as OrderApi from '#/api/pay/order';
import { getOrder } from '#/api/pay/order';
import { DictTag } from '#/components/dict-tag';
import { DICT_TYPE } from '#/utils/dict';
const detailData = ref<OrderApi.PayOrderApi.Order>();
const detailData = ref<PayOrderApi.Order>();
const [BasicModal, modalApi] = useVbenModal({
fullscreenButton: false,
showCancelButton: false,
showConfirmButton: false,
const [Modal, modalApi] = useVbenModal({
onOpenChange: async (isOpen) => {
if (!isOpen) {
return null;
detailData.value = undefined;
return;
}
// 加载数据
const data = modalApi.getData<PayOrderApi.Order>();
if (!data || !data.id) {
return;
}
modalApi.lock();
try {
detailData.value = await getOrder(data.id);
} finally {
modalApi.unlock();
}
modalApi.modalLoading(true);
const { id } = modalApi.getData() as {
id: number;
};
detailData.value = await OrderApi.getOrderDetail(id);
modalApi.modalLoading(false);
},
});
</script>
<template>
<BasicModal :close-on-click-modal="false" title="订单详情" class="w-[700px]">
<Modal
title="订单详情"
class="w-1/2"
:show-cancel-button="false"
:show-confirm-button="false"
>
<Descriptions :column="2">
<Descriptions.Item label="商户单号">
{{ detailData?.merchantOrderId }}
@ -121,5 +128,5 @@ const [BasicModal, modalApi] = useVbenModal({
{{ detailData?.channelNotifyData }}
</Descriptions.Item>
</Descriptions>
</BasicModal>
</Modal>
</template>

28
apps/web-antd/src/views/pay/refund/data.ts
View File

@ -1,14 +1,9 @@
import type { VbenFormSchema } from '#/adapter/form';
import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
import type { PayRefundApi } from '#/api/pay/refund';
import { useAccess } from '@vben/access';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { getAppList } from '#/api/pay/app';
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '#/utils';
const { hasAccessByCodes } = useAccess();
/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
return [
@ -80,9 +75,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
}
/** 列表的字段 */
export function useGridColumns<T = PayRefundApi.Refund>(
onActionClick: OnActionClickFn<T>,
): VxeTableGridOptions['columns'] {
export function useGridColumns(): VxeTableGridOptions['columns'] {
return [
{
field: 'id',
@ -155,23 +148,10 @@ export function useGridColumns<T = PayRefundApi.Refund>(
},
},
{
field: 'operation',
title: '操作',
minWidth: 100,
align: 'center',
width: 80,
fixed: 'right',
cellRender: {
attrs: {
onClick: onActionClick,
},
name: 'CellOperation',
options: [
{
code: 'detail',
show: hasAccessByCodes(['pay:refund:query']),
},
],
},
slots: { default: 'actions' },
},
];
}

59
apps/web-antd/src/views/pay/refund/index.vue
View File

@ -1,16 +1,10 @@
<script lang="ts" setup>
import type {
OnActionClickParams,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { Page, useVbenModal } from '@vben/common-ui';
import { Download } from '@vben/icons';
import { downloadFileFromBlobPart } from '@vben/utils';
import { Button } from 'ant-design-vue';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import * as RefundApi from '#/api/pay/refund';
import { DocAlert } from '#/components/doc-alert';
import { $t } from '#/locales';
@ -29,32 +23,22 @@ function onRefresh() {
}
/** 导出表格 */
async function onExport() {
async function handleExport() {
const data = await RefundApi.exportRefund(await gridApi.formApi.getValues());
downloadFileFromBlobPart({ fileName: '支付退款.xls', source: data });
}
/** 查看详情 */
function onDetail(row: any) {
function handleDetail(row: any) {
refundDetailModalApi.setData(row).open();
}
/** 表格操作按钮的回调函数 */
function onActionClick({ code, row }: OnActionClickParams<any>) {
switch (code) {
case 'detail': {
onDetail(row);
break;
}
}
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
},
gridOptions: {
columns: useGridColumns(onActionClick),
columns: useGridColumns(),
height: 'auto',
keepSource: true,
proxyConfig: {
@ -89,15 +73,30 @@ const [Grid, gridApi] = useVbenVxeGrid({
<RefundDetailModal @success="onRefresh" />
<Grid table-title="支付退款列表">
<template #toolbar-tools>
<Button
type="primary"
class="ml-2"
@click="onExport"
v-access:code="['pay:refund:export']"
>
<Download class="size-5" />
{{ $t('ui.actionTitle.export') }}
</Button>
<TableAction
:actions="[
{
label: $t('ui.actionTitle.export'),
type: 'primary',
icon: ACTION_ICON.DOWNLOAD,
auth: ['pay:refund:query'],
onClick: handleExport,
},
]"
/>
</template>
<template #actions="{ row }">
<TableAction
:actions="[
{
label: $t('common.detail'),
type: 'link',
icon: ACTION_ICON.VIEW,
auth: ['pay:refund:query'],
onClick: handleDetail.bind(null, row),
},
]"
/>
</template>
</Grid>
</Page>

7
apps/web-antd/src/views/pay/refund/modules/detail.vue
View File

@ -33,13 +33,6 @@ const [Modal, modalApi] = useVbenModal({
}
},
});
/** 打开弹窗 */
const open = (id: number) => {
modalApi.setData({ id }).open();
};
defineExpose({ open });
</script>
<template>