You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

95 lines
2.7 KiB

<script lang="ts" setup>
import DemoModal from './DemoModal.vue'
import { columns, searchFormSchema } from './demo.data'
import { useGo } from '@/hooks/web/usePage'
import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage'
import { useModal } from '@/components/Modal'
import { IconEnum } from '@/enums/appEnum'
import { BasicTable, TableAction, useTable } from '@/components/Table'
import { getDemoOrderPage, refundDemoOrder } from '@/api/pay/demo'
defineOptions({ name: 'PayDemo' })
const go = useGo()
const { t } = useI18n()
const { createConfirm, createMessage } = useMessage()
const [registerModal, { openModal }] = useModal()
const [registerTable, { reload }] = useTable({
title: '接入示例列表',
api: getDemoOrderPage,
columns,
formConfig: { labelWidth: 120, schemas: searchFormSchema },
useSearchForm: true,
showTableSetting: true,
showIndexColumn: false,
actionColumn: {
width: 180,
title: t('common.action'),
dataIndex: 'action',
fixed: 'right',
},
})
function handleAdd() {
openModal(true)
}
/** 支付按钮操作 */
function handlePay(record: Recordable) {
go(`/pay/cashier?id=${record.payOrderId}&&returnUrl=${encodeURIComponent(`/pay/demo-order?id=${record.id}`)}`)
}
/** 退款按钮操作 */
async function handleRefund(record: Recordable) {
createConfirm({
title: '退款',
iconType: 'warning',
content: `是否确认退款编号为"${record.id}"的示例订单?`,
async onOk() {
await refundDemoOrder(record.id)
createMessage.success(t('common.successText'))
reload()
},
})
}
</script>
<template>
<div>
<BasicTable @register="registerTable">
<template #toolbar>
<a-button v-auth="['pay:app:create']" type="primary" :pre-icon="IconEnum.ADD" @click="handleAdd">
发起订单
</a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: IconEnum.EDIT,
label: '前往支付',
ifShow: () => {
return !record.payed
},
onClick: handlePay.bind(null, record),
},
{
icon: IconEnum.DELETE,
danger: true,
label: '发起退款',
ifShow: () => {
return record.payed && !record.payRefundId
},
onClick: handleRefund.bind(null, record),
},
]"
/>
</template>
</template>
</BasicTable>
<DemoModal @register="registerModal" @success="reload()" />
</div>
</template>