From 3be96ce81fa5f818fb91b04181222cbf079f3c72 Mon Sep 17 00:00:00 2001
From: xingyu <xingyu4j@vip.qq.com>
Date: Thu, 30 Mar 2023 00:15:43 +0800
Subject: [PATCH] feat: order
---
src/api/pay/order/index.ts | 5 +
src/views/pay/order/OrderModal.vue | 20 ++
src/views/pay/order/index.vue | 65 +++++-
src/views/pay/order/order.data.ts | 317 +++++++++++++++++++++++++++++
4 files changed, 406 insertions(+), 1 deletion(-)
create mode 100644 src/views/pay/order/OrderModal.vue
create mode 100644 src/views/pay/order/order.data.ts
diff --git a/src/api/pay/order/index.ts b/src/api/pay/order/index.ts
index 02323eed..140ac79c 100644
--- a/src/api/pay/order/index.ts
+++ b/src/api/pay/order/index.ts
@@ -88,6 +88,11 @@ export function getOrder(id: number) {
return defHttp.get({ url: '/pay/order/get?id=' + id })
}
+// 查询详情支付订单
+export function getOrderDetail(id: number) {
+ return defHttp.get({ url: '/pay/order/get-detail?id=' + id })
+}
+
// 新增支付订单
export function createOrder(data: OrderVO) {
return defHttp.post({ url: '/pay/order/create', data })
diff --git a/src/views/pay/order/OrderModal.vue b/src/views/pay/order/OrderModal.vue
new file mode 100644
index 00000000..61bd9e25
--- /dev/null
+++ b/src/views/pay/order/OrderModal.vue
@@ -0,0 +1,20 @@
+<template>
+ <BasicModal v-bind="$attrs" width="60%" @register="registerModal" title="查看详情" :showOkBtn="false">
+ <Description :bordered="false" :column="3" :data="refundData" :schema="descSchema" />
+ </BasicModal>
+</template>
+<script lang="ts" setup name="RefundModal">
+import { ref } from 'vue'
+import { BasicModal, useModalInner } from '@/components/Modal'
+import { Description } from '@/components/Description'
+import { descSchema } from './order.data'
+import { getOrderDetail } from '@/api/pay/order'
+
+const refundData = ref()
+
+const [registerModal, { setModalProps }] = useModalInner(async (data) => {
+ setModalProps({ confirmLoading: false })
+ const res = await getOrderDetail(data.record.id)
+ refundData.value = res
+})
+</script>
diff --git a/src/views/pay/order/index.vue b/src/views/pay/order/index.vue
index 3b64cfc4..40792467 100644
--- a/src/views/pay/order/index.vue
+++ b/src/views/pay/order/index.vue
@@ -1,3 +1,66 @@
<template>
- <div>开发中</div>
+ <div>
+ <BasicTable @register="registerTable">
+ <template #toolbar>
+ <a-button type="warning" v-auth="['pay:order:export']" :preIcon="IconEnum.EXPORT" @click="handleExport">
+ {{ t('action.export') }}
+ </a-button>
+ </template>
+ <template #bodyCell="{ column, record }">
+ <template v-if="column.key === 'action'">
+ <TableAction
+ :actions="[
+ { icon: IconEnum.DATA, label: t('action.detail'), auth: 'pay:order:query', onClick: handleQueryDetails.bind(null, record) }
+ ]"
+ />
+ </template>
+ </template>
+ </BasicTable>
+ <OrderModal @register="registerModal" />
+ </div>
</template>
+<script lang="ts" setup name="Order">
+import { useI18n } from '@/hooks/web/useI18n'
+import { useMessage } from '@/hooks/web/useMessage'
+import { useModal } from '@/components/Modal'
+import OrderModal from './OrderModal.vue'
+import { IconEnum } from '@/enums/appEnum'
+import { BasicTable, useTable, TableAction } from '@/components/Table'
+import { getOrderPage, exportOrder, OrderExportReqVO } from '@/api/pay/order'
+import { columns, searchFormSchema } from './order.data'
+
+const { t } = useI18n()
+const { createConfirm, createMessage } = useMessage()
+const [registerModal, { openModal }] = useModal()
+
+const [registerTable, { getForm }] = useTable({
+ title: '订单列表',
+ api: getOrderPage,
+ columns,
+ formConfig: { labelWidth: 120, schemas: searchFormSchema },
+ useSearchForm: true,
+ showTableSetting: true,
+ actionColumn: {
+ width: 140,
+ title: t('common.action'),
+ dataIndex: 'action',
+ fixed: 'right'
+ }
+})
+
+function handleQueryDetails(record: Recordable) {
+ openModal(true, { record, isUpdate: true })
+}
+
+async function handleExport() {
+ createConfirm({
+ title: t('common.exportTitle'),
+ iconType: 'warning',
+ content: t('common.exportMessage'),
+ async onOk() {
+ await exportOrder(getForm().getFieldsValue() as OrderExportReqVO)
+ createMessage.success(t('common.exportSuccessText'))
+ }
+ })
+}
+</script>
diff --git a/src/views/pay/order/order.data.ts b/src/views/pay/order/order.data.ts
new file mode 100644
index 00000000..8b1ee20d
--- /dev/null
+++ b/src/views/pay/order/order.data.ts
@@ -0,0 +1,317 @@
+import { getMerchantListByName } from '@/api/pay/merchant'
+import { DescItem } from '@/components/Description'
+import { BasicColumn, FormSchema, useRender } from '@/components/Table'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+
+export const columns: BasicColumn[] = [
+ {
+ title: '订单编号',
+ dataIndex: 'id',
+ width: 100
+ },
+ {
+ title: '支付渠道',
+ children: [
+ {
+ title: '商户名称',
+ dataIndex: 'merchantName',
+ width: 120
+ },
+ {
+ title: '应用名称',
+ dataIndex: 'appName',
+ width: 120
+ },
+ {
+ title: '渠道名称',
+ dataIndex: 'channelCodeName',
+ width: 160
+ }
+ ]
+ },
+ {
+ title: '支付订单',
+ children: [
+ {
+ title: '商户',
+ dataIndex: 'merchantOrderId',
+ width: 100
+ },
+ {
+ title: '支付',
+ dataIndex: 'channelOrderNo',
+ width: 200
+ }
+ ]
+ },
+ {
+ title: '商品标题',
+ dataIndex: 'subject',
+ width: 200
+ },
+ {
+ title: '支付金额(元)',
+ dataIndex: 'amount',
+ width: 120,
+ customRender: ({ text }) => {
+ return '￥' + parseFloat(text || 0 / 100).toFixed(2)
+ }
+ },
+ {
+ title: '手续金额(元)',
+ dataIndex: 'channelFeeAmount',
+ width: 120,
+ customRender: ({ text }) => {
+ return '￥' + parseFloat(text || 0 / 100).toFixed(2)
+ }
+ },
+ {
+ title: '退款金额(元)',
+ dataIndex: 'refundAmount',
+ width: 120,
+ customRender: ({ text }) => {
+ return '￥' + parseFloat(text || 0 / 100).toFixed(2)
+ }
+ },
+ {
+ title: '支付状态',
+ dataIndex: 'status',
+ width: 100,
+ customRender: ({ text }) => {
+ return useRender.renderDict(text, DICT_TYPE.PAY_ORDER_STATUS)
+ }
+ },
+ {
+ title: '回调状态',
+ dataIndex: 'notifyStatus',
+ width: 100,
+ customRender: ({ text }) => {
+ return useRender.renderDict(text, DICT_TYPE.PAY_ORDER_NOTIFY_STATUS)
+ }
+ },
+ {
+ title: '创建时间',
+ dataIndex: 'createTime',
+ width: 180,
+ customRender: ({ text }) => {
+ return useRender.renderDate(text)
+ }
+ },
+ {
+ title: '支付时间',
+ dataIndex: 'successTime',
+ width: 180,
+ customRender: ({ text }) => {
+ return useRender.renderDate(text)
+ }
+ }
+]
+
+export const searchFormSchema: FormSchema[] = [
+ {
+ label: '所属商户',
+ field: 'merchantId',
+ component: 'ApiSelect',
+ componentProps: {
+ api: () => getMerchantListByName('')
+ },
+ colProps: { span: 8 }
+ },
+ {
+ label: '应用编号',
+ field: 'appId',
+ component: 'Input',
+ colProps: { span: 8 }
+ },
+ {
+ label: '渠道编码',
+ field: 'channelCode',
+ component: 'Select',
+ componentProps: {
+ options: getIntDictOptions(DICT_TYPE.PAY_CHANNEL_CODE_TYPE)
+ },
+ colProps: { span: 8 }
+ },
+ {
+ label: '商户订单编号',
+ field: 'merchantOrderId',
+ component: 'Input',
+ colProps: { span: 8 }
+ },
+ {
+ label: '渠道订单号',
+ field: 'channelOrderNo',
+ component: 'Input',
+ colProps: { span: 8 }
+ },
+ {
+ label: '支付状态',
+ field: 'status',
+ component: 'Select',
+ componentProps: {
+ options: getIntDictOptions(DICT_TYPE.PAY_ORDER_STATUS)
+ },
+ colProps: { span: 8 }
+ },
+ {
+ label: '退款状态',
+ field: 'refundStatus',
+ component: 'Select',
+ componentProps: {
+ options: getIntDictOptions(DICT_TYPE.PAY_ORDER_REFUND_STATUS)
+ },
+ colProps: { span: 8 }
+ },
+ {
+ label: '回调商户状态',
+ field: 'notifyStatus',
+ component: 'Select',
+ componentProps: {
+ options: getIntDictOptions(DICT_TYPE.PAY_ORDER_NOTIFY_STATUS)
+ },
+ colProps: { span: 8 }
+ },
+ {
+ label: '创建时间',
+ field: 'createTime',
+ component: 'RangePicker',
+ colProps: { span: 8 }
+ }
+]
+
+export const descSchema: DescItem[] = [
+ {
+ label: '商户名称',
+ field: 'merchantName'
+ },
+ {
+ label: '应用名称',
+ field: 'appName'
+ },
+ {
+ label: '商品名称',
+ field: 'subject'
+ },
+ {
+ label: '商户订单号',
+ field: 'merchantOrderId',
+ render: (curVal) => {
+ return useRender.renderTag(curVal)
+ }
+ },
+ {
+ label: '渠道订单号',
+ field: 'channelOrderNo',
+ render: (curVal) => {
+ return useRender.renderTag(curVal)
+ }
+ },
+ {
+ label: '支付订单号',
+ field: 'payOrderExtension.no',
+ render: (curVal) => {
+ return useRender.renderTag(curVal)
+ }
+ },
+ {
+ label: '支付金额',
+ field: 'amount',
+ render: (curVal) => {
+ return '￥' + parseFloat(curVal || 0 / 100).toFixed(2)
+ }
+ },
+ {
+ label: '手续费',
+ field: 'channelFeeAmount',
+ render: (curVal) => {
+ return '￥' + parseFloat(curVal || 0 / 100).toFixed(2)
+ }
+ },
+ {
+ label: '手续费比例',
+ field: 'channelFeeRate',
+ render: (curVal) => {
+ return parseFloat(curVal || 0 / 100).toFixed(2) + '%'
+ }
+ },
+ {
+ label: '支付状态',
+ field: 'status',
+ render: (curVal) => {
+ return useRender.renderDict(curVal, DICT_TYPE.PAY_ORDER_STATUS)
+ }
+ },
+ {
+ label: '回调状态',
+ field: 'notifyStatus',
+ render: (curVal) => {
+ return useRender.renderDict(curVal, DICT_TYPE.PAY_ORDER_NOTIFY_STATUS)
+ }
+ },
+ {
+ label: '回调地址',
+ field: 'notifyUrl'
+ },
+ {
+ label: '创建时间',
+ field: 'createTime',
+ render: (curVal) => {
+ return useRender.renderDate(curVal)
+ }
+ },
+ {
+ label: '支付时间',
+ field: 'successTime',
+ render: (curVal) => {
+ return useRender.renderDate(curVal)
+ }
+ },
+ {
+ label: '失效时间',
+ field: 'expireTime',
+ render: (curVal) => {
+ return useRender.renderDate(curVal)
+ }
+ },
+ {
+ label: '通知时间',
+ field: 'notifyTime',
+ render: (curVal) => {
+ return useRender.renderDate(curVal)
+ }
+ },
+ {
+ label: '支付渠道',
+ field: 'channelCodeName'
+ },
+ {
+ label: '支付IP',
+ field: 'userIp'
+ },
+ {
+ label: '退款状态',
+ field: 'notifyStatus',
+ render: (curVal) => {
+ return useRender.renderDict(curVal, DICT_TYPE.PAY_ORDER_REFUND_STATUS)
+ }
+ },
+ {
+ label: '退款次数',
+ field: 'refundTimes'
+ },
+ {
+ label: '退款金额',
+ field: 'refundAmount',
+ render: (curVal) => {
+ return '￥' + parseFloat(curVal / 100).toFixed(2)
+ }
+ },
+ {
+ label: '商品描述',
+ field: 'body'
+ },
+ {
+ label: '支付通道异步回调内容',
+ field: 'payOrderExtension.channelNotifyData'
+ }
+]