perf 添加商户号, 对账页面优化

This commit is contained in:
bootx
2024-08-19 22:44:05 +08:00
parent 8a62ebc125
commit 467296077f
14 changed files with 548 additions and 23 deletions

View File

@@ -1,6 +1,7 @@
import { defHttp } from '@/utils/http/axios'
import { PageResult, Result } from '#/axios'
import { BaseEntity } from '#/web'
import {LabeledValue} from "ant-design-vue/lib/select";
/**
* 分页
@@ -49,6 +50,16 @@ export const del = (id) => {
})
}
/**
* 查询商户下的应用列表
*/
export function mchAppDropdown(mchNo) {
return defHttp.get<Result<LabeledValue[]>>({
url: '/mch/app/dropdown',
params: { mchNo },
})
}
/**
* 商户应用
*/

View File

@@ -23,6 +23,7 @@
</a-form-item>
<a-form-item label="商户号" name="mchNo">
<a-select
:filter-option="search"
v-model:value="form.mchNo"
:disabled="showable"
placeholder="请选择商户"
@@ -119,13 +120,14 @@
import { FormEditType } from '@/enums/formTypeEnum'
import { BasicDrawer } from '@/components/Drawer'
import { buildUUID } from '@/utils/uuid'
import { dropdown as merchantDropdown } from '@/views/daxpay/admin/merchant/info/Merchant.api'
import { merchantDropdown } from '@/views/daxpay/admin/merchant/info/Merchant.api'
import { LabeledValue } from 'ant-design-vue/lib/select'
import { useDict } from '@/hooks/bootx/useDict'
const {
initFormEditType,
handleCancel,
search,
labelCol,
wrapperCol,
title,

View File

@@ -96,7 +96,7 @@
import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
import ALink from '@/components/Link/Link.vue'
import { useDict } from '@/hooks/bootx/useDict'
import { dropdown as merchantDropdown } from '@/views/daxpay/admin/merchant/info/Merchant.api'
import { merchantDropdown } from '@/views/daxpay/admin/merchant/info/Merchant.api'
import { LabeledValue } from 'ant-design-vue/lib/select'
import ChannelConfigList from '@/views/daxpay/admin/merchant/channel/ChannelConfigList.vue'
import MerchantNotifyConfigList from '../notify/MerchantNotifyConfigList.vue'
@@ -124,7 +124,7 @@
selectList: mchNoOptions.value,
placeholder: '请选择商户',
},
{ field: 'appId', type: STRING, name: '商户号', placeholder: '请输入应用号' },
{ field: 'appId', type: STRING, name: '应用号', placeholder: '请输入应用号' },
{ field: 'appName', type: STRING, name: '应用名称', placeholder: '请输入应用名称' },
] as QueryField[]
})

View File

@@ -43,7 +43,7 @@ export const update = (obj) => {
/**
* 商户下拉列表
*/
export const dropdown = () => {
export const merchantDropdown = () => {
return defHttp.get<Result<LabeledValue[]>>({
url: '/merchant/dropdown',
})

View File

@@ -72,6 +72,8 @@
</template>
</vxe-column>
<vxe-column field="createTime" title="创建时间" sortable :min-width="230" />
<vxe-column field="mchNo" title="商户号" :min-width="150" />
<vxe-column field="appId" title="商户号" :min-width="150" />
<vxe-column fixed="right" width="120" :showOverflow="false" title="操作">
<template #default="{ row }">
<a-link @click="show(row)">查看</a-link>
@@ -213,6 +215,8 @@
selectList: payRefundStatusList.value,
},
{ field: 'allocStatus', name: '支付状态', type: LIST, selectList: payAllocStatusList.value },
{ field: 'mchNo', type: STRING, name: '商户号', placeholder: '请输入商户号' },
{ field: 'appId', type: STRING, name: '应用号', placeholder: '请输入应用号' },
] as QueryField[]
})

View File

@@ -60,7 +60,10 @@
</template>
</vxe-column>
<vxe-column field="createTime" title="创建时间" sortable :min-width="230" />
<vxe-column fixed="right" width="130" :showOverflow="false" title="操作">
<vxe-column field="mchNo" title="商户号" :min-width="150" />
<vxe-column field="appId" title="商户号" :min-width="150" />
<vxe-column fixed="right" width="120" :showOverflow="false" title="操作">
<template #default="{ row }">
<a-link @click="show(row)">查看</a-link>
<a-divider type="vertical" />
@@ -175,6 +178,8 @@
selectList: refundStatusList.value,
},
{ field: 'channel', name: '支付通道', type: LIST, selectList: channelList.value },
{ field: 'mchNo', type: STRING, name: '商户号', placeholder: '请输入商户号' },
{ field: 'appId', type: STRING, name: '应用号', placeholder: '请输入应用号' },
] as QueryField[]
})

View File

@@ -54,7 +54,10 @@
</template>
</vxe-column>
<vxe-column field="reason" title="转账原因" :min-width="160" />
<vxe-column field="createTime" title="创建时间" sortable :min-width="230" />
<vxe-column field="createTime" title="创建时间" sortable :min-width="170" />
<vxe-column field="mchNo" title="商户号" :min-width="150" />
<vxe-column field="appId" title="商户号" :min-width="150" />
<vxe-column fixed="right" :width="120" :showOverflow="false" title="操作">
<template #default="{ row }">
<a-link @click="show(row)">查看</a-link>
@@ -111,7 +114,7 @@
page,
retryTransfer,
syncByTransferNo,
cellStyle
cellStyle,
} from './TransferOrder.api'
import useTablePage from '@/hooks/bootx/useTablePage'
import TransferOrderInfo from './TransferOrderInfo.vue'
@@ -160,6 +163,8 @@
selectList: transferStatusList.value,
},
{ field: 'channel', name: '转账通道', type: LIST, selectList: channelList.value },
{ field: 'mchNo', type: STRING, name: '商户号', placeholder: '请输入商户号' },
{ field: 'appId', type: STRING, name: '应用号', placeholder: '请输入应用号' },
] as QueryField[]
})

View File

@@ -34,15 +34,27 @@ export function create(params: ReconcileCreatParam) {
}
/**
* 手动触发对账文件下载
* 下载对账单
*/
export function downAndSave(id: any) {
return defHttp.post<any>({
url: '/order/reconcile/downAndSave',
params: { id },
})
}
/**
* 手动触发交易对账单比对
* 对账单比对
*/
export function compare(id: any) {
return defHttp.post<any>({
url: '/order/reconcile/compare',
params: { id },
})
}
/**
* 对账差异记录
* 对账记录
*/
export interface ReconcileStatement extends MchEntity {
/** 对账单ID */
@@ -99,13 +111,24 @@ export interface ReconcileStatement extends MchEntity {
channelTradeTime?: string
}
/**
* 对账创建参数
*/
export interface ReconcileCreatParam {
/** 名称 */
name?: string
title?: string
/** 对账日期 */
reconcileDate?: string
date?: string
/** 支付通道 */
channel?: string
/**
* 商户号
*/
mchNo?: string
/**
* 应用AppId
*/
appId?: string
}

View File

@@ -0,0 +1,180 @@
<template>
<basic-modal
title="新建对账订单"
v-bind="$attrs"
:loading="confirmLoading"
:width="modalWidth"
:visible="visible"
:mask-closable="showable"
@cancel="handleCancel"
>
<a-form
class="small-from-item"
ref="formRef"
:model="form"
:rules="rules"
:label-col="labelCol"
:wrapper-col="wrapperCol"
>
<a-form-item label="标题" name="name">
<a-input v-model:value="form.title" placeholder="请输入对账名称" />
</a-form-item>
<a-form-item label="商户" name="mchNo">
<a-select
:filter-option="search"
v-model:value="form.mchNo"
:disabled="showable"
placeholder="请选择商户"
/>
</a-form-item>
<a-form-item label="商户应用" name="appId" v-show="form.mchNo">
<a-select
:filter-option="search"
:disabled="showable"
v-model:value="form.appId"
placeholder="请选择商户应用"
@change="merchantChange"
/>
</a-form-item>
<a-form-item label="对账日期" name="date">
<a-date-picker
style="width: 100%"
valueFormat="YYYY-MM-DD"
placeholder="请选择对账日期"
v-model:value="form.date"
:defaultPickerValue="form.date"
:disabled-date="disabledDate"
:show-today="false"
/>
</a-form-item>
<a-form-item label="对账通道" name="channel">
<a-select
style="width: 100%"
v-model:value="form.channel"
:options="channels"
placeholder="请选择对账通道"
/>
</a-form-item>
</a-form>
<template #footer>
<a-button key="cancel" @click="handleCancel">取消</a-button>
<a-button key="forward" :loading="confirmLoading" type="primary" @click="handleOk"
>提交</a-button
>
</template>
</basic-modal>
</template>
<script setup lang="ts">
import { BasicModal } from '@/components/Modal'
import { nextTick, onMounted, reactive, ref } from 'vue'
import useFormEdit from '@/hooks/bootx/useFormEdit'
import { useMessage } from '@/hooks/web/useMessage'
import { FormInstance, Rule } from 'ant-design-vue/lib/form'
import { LabeledValue } from 'ant-design-vue/lib/select'
import { useDict } from '@/hooks/bootx/useDict'
import dayjs, { Dayjs } from 'dayjs'
import XEUtils from 'xe-utils'
import { create, ReconcileCreatParam } from './ReconcileStatement.api'
import { merchantDropdown } from '@/views/daxpay/admin/merchant/info/Merchant.api'
import { mchAppDropdown } from '@/views/daxpay/admin/merchant/app/MchApp.api'
const {
handleCancel,
search,
labelCol,
wrapperCol,
modalWidth,
confirmLoading,
visible,
showable,
} = useFormEdit()
const { createMessage } = useMessage()
const { dictDropDown } = useDict()
const form = reactive<ReconcileCreatParam>({})
const rules = {
title: [{ required: true, message: '请输入对账标题' }],
date: [{ required: true, message: '请选择对账日期' }],
channel: [{ required: true, message: '请选择对账通道' }],
mchNo: [{ required: true, message: '请选择商户' }],
appId: [{ required: true, message: '请选择商户应用' }],
} as Record<string, Rule[]>
const channels = ref<LabeledValue[]>([])
const merchantList = ref<LabeledValue[]>([])
const mchAppList = ref<LabeledValue[]>([])
const formRef = ref<FormInstance>()
const emits = defineEmits(['ok'])
onMounted(() => {
initData()
})
/**
* 初始化数据
*/
async function initData() {
// 通道
channels.value = await dictDropDown('channel')
// 商户
merchantDropdown().then(({ data }) => {
merchantList.value = data
})
}
/**
* 商户变动时刷新应用列表
*/
function merchantChange() {
form.appId = undefined
mchAppDropdown(form.mchNo).then(({ data }) => {
mchAppList.value = data
})
}
/**
* 入口
*/
function init() {
visible.value = true
resetForm()
const date = XEUtils.getWhatDay(new Date(), -1)
form.date = XEUtils.toDateString(date, 'yyyy-MM-dd')
confirmLoading.value = false
}
/**
* 提交
*/
async function handleOk() {
formRef.value?.validate().then(async () => {
confirmLoading.value = true
await create(form)
visible.value = false
confirmLoading.value = false
createMessage.success('提交成功')
emits('ok')
})
}
/**
* 禁用今天及以后的日期
*/
function disabledDate(current: Dayjs) {
return current && current >= dayjs().startOf('day')
}
/**
* 重置表单
*/
function resetForm() {
nextTick(() => {
formRef.value?.resetFields()
})
}
defineExpose({ init })
</script>
<style scoped lang="less"></style>

View File

@@ -1,11 +1,290 @@
<script setup lang="ts">
</script>
<template>
<div>
<div class="m-3 p-3 pt-5 bg-white">
<b-query
:query-params="model.queryParam"
:default-item-count="3"
:fields="fields"
@query="queryPage"
@reset="resetQueryParams"
/>
</div>
<div class="m-3 p-3 bg-white">
<vxe-toolbar ref="xToolbar" custom :refresh="{ queryMethod: queryPage }">
<template #buttons>
<a-space>
<a-button type="primary" pre-icon="ant-design:plus-outlined" @click="add"
>新建</a-button
>
</a-space>
</template>
</vxe-toolbar>
<div class="h-65vh">
<vxe-table
row-id="id"
ref="xTable"
:data="pagination.records"
:loading="loading"
:sort-config="{ remote: true, trigger: 'cell' }"
@sort-change="sortChange"
>
<vxe-column type="seq" title="序号" width="60" />
<vxe-column field="date" title="对账日期" :min-width="100" />
<vxe-column field="reconcileNo" title="对账号" :min-width="230">
<template #default="{ row }">
<a @click="show(row)">
{{ row.reconcileNo }}
</a>
</template>
</vxe-column>
<vxe-column field="channel" title="对账通道" :min-width="100">
<template #default="{ row }">
<a-tag>{{ dictConvert('channel', row.channel) }}</a-tag>
</template>
</vxe-column>
<vxe-column field="down" title="下载" :min-width="100">
<template #default="{ row }">
<template v-if="row.downOrUpload">
<a-tag v-if="row.downOrUpload" color="green">已完成</a-tag>
</template>
<template v-else>
<a-link color="red" @click="down(row)">下载</a-link>
</template>
</template>
</vxe-column>
<vxe-column field="compare" title="比对" :min-width="100">
<template #default="{ row }">
<a-tag v-if="row.compare" color="green">已比对</a-tag>
<a-link v-else :disabled="!row.downOrUpload" color="red" @click="compareOrder(row)"
>比对</a-link
>
</template>
</vxe-column>
<vxe-column field="result" title="对账结果" :min-width="100">
<template #default="{ row }">
{{ dictConvert('reconcile_result', row.result) }}
</template>
</vxe-column>
<vxe-colgroup title="平台数据">
<vxe-column field="orderCount" title="支付订单数" :min-width="150" />
<vxe-column field="orderAmount" title="支付交易金额" :min-width="150" />
<vxe-column field="refundCount" title="退款订单数" :min-width="150" />
<vxe-column field="refundAmount" title="退款交易金额" :min-width="150" />
</vxe-colgroup>
<vxe-colgroup title="通道数据">
<vxe-column field="channelOrderCount" title="支付订单数" :min-width="150" />
<vxe-column field="channelOrderAmount" title="支付交易金额" :min-width="150" />
<vxe-column field="channelRefundCount" title="退款订单数" :min-width="150" />
<vxe-column field="channelRefundAmount" title="退款交易金额" :min-width="150" />
</vxe-colgroup>
<vxe-column field="errorMsg" title="错误信息" :min-width="160" />
<vxe-column field="createTime" title="创建时间" :min-width="160" />
<vxe-column fixed="right" width="100" :showOverflow="false" title="操作">
<template #default="{ row }">
<a-link @click="show(row)">查看</a-link>
<a-divider type="vertical" />
<a-dropdown>
<a>
更多
<icon icon="ant-design:down-outlined" :size="12" />
</a>
<template #overlay>
<a-menu>
<a-menu-item>
<a-link @click="downOriginalFile(row)">通道对账单</a-link>
</a-menu-item>
<a-menu-item>
<a-link @click="downReconcileFile(row)">平台对账单</a-link>
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</template>
</vxe-column>
</vxe-table>
</div>
<vxe-pager
size="medium"
:loading="loading"
:current-page="pagination.current"
:page-size="pagination.size"
:total="pagination.total"
@page-change="handleTableChange"
/>
<ReconcileStatementCreate ref="reconcileStatementCreate" />
</div>
</div>
</template>
<style scoped lang="less">
<script setup lang="ts">
import { computed, nextTick, onMounted, ref } from 'vue'
import { compare, downAndSave, page } from './ReconcileStatement.api'
import useTablePage from '@/hooks/bootx/useTablePage'
import { VxeTable, VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
import { useMessage } from '@/hooks/web/useMessage'
import { LIST, QueryField, STRING } from '@/components/Bootx/Query/Query'
import BQuery from '/@/components/Bootx/Query/BQuery.vue'
import { LabeledValue } from 'ant-design-vue/lib/select'
import { useDict } from '@/hooks/bootx/useDict'
import { Icon } from '@/components/Icon'
import ALink from '@/components/Link/Link.vue'
import ReconcileStatementCreate from './ReconcileStatementCreate.vue'
import { useUpload } from '@/hooks/bootx/useUpload'
</style>
// 使用hooks
const {
handleTableChange,
pageQueryResHandel,
resetQueryParams,
sortChange,
pagination,
pages,
sortParam,
model,
loading,
} = useTablePage(queryPage)
const { dictDropDown, dictConvert } = useDict()
const { createMessage, createConfirm } = useMessage()
let tradeTypeList = ref<LabeledValue[]>([])
let channelList = ref<LabeledValue[]>([])
// 查询条件
const fields = computed(() => {
return [
{ field: 'reconcileNo', type: STRING, name: '对账单号', placeholder: '请输入对账单号' },
{ field: 'title', type: STRING, name: '订单名称', placeholder: '请输入订单名称' },
{ field: 'tradeNo', type: STRING, name: '平台交易号', placeholder: '请输入平台交易号' },
{ field: 'outOrderNo', type: STRING, name: '通道交易号', placeholder: '请输入通道交易号' },
] as QueryField[]
})
const xTable = ref<VxeTableInstance>()
const xToolbar = ref<VxeToolbarInstance>()
const reconcileStatementCreate = ref<any>()
nextTick(() => {
xTable.value?.connect(xToolbar.value as VxeToolbarInstance)
})
onMounted(() => {
initData()
init()
})
/**
* 初始化基础数据
*/
async function initData() {
tradeTypeList.value = await dictDropDown('trade_type')
channelList.value = await dictDropDown('channel')
}
/**
* 入口
*/
function init() {
model.queryParam = {}
xTable.value?.clearSort()
queryPage()
}
/**
* 分页查询
*/
function queryPage() {
loading.value = true
page({
...model.queryParam,
...pages,
...sortParam,
}).then(({ data }) => {
pageQueryResHandel(data)
})
}
/**
* 下载对账单
*/
function down(record) {
createConfirm({
iconType: 'info',
title: '提示',
content: '确定要下载对账单吗?',
onOk: () => {
createMessage.info('对账单下载保存中.....')
downAndSave(record.id)
.then(() => {
createMessage.info('对账单下载完成')
})
.finally(() => {
queryPage()
})
},
})
}
/**
* 对账比对
*/
function compareOrder(record) {
createConfirm({
iconType: 'info',
title: '提示',
content: '确定要进行比对吗?',
onOk: () => {
createMessage.info('对账单比对中.....')
compare(record.id)
.then(() => {
createMessage.info('对账单比对完成')
})
.finally(() => {
queryPage()
})
},
})
}
/**
* 创建对账订单
*/
function add() {
reconcileStatementCreate.value.init()
}
/**
* 查看
*/
function show(record) {
reconcileDiffInfo.value.init(record)
}
/**
* 下载原始对账单
*/
function downOriginalFile(record) {
createConfirm({
iconType: 'info',
title: '提示',
content: '从三方支付系统中获取的交易对账单文件,未经过处理,确定要下载吗?',
onOk: () => {},
})
}
/**
* 下载对账单
*/
function downReconcileFile(record) {
createConfirm({
iconType: 'info',
title: '提示',
content: '通过本系统中订单生成的对账单,确定要下载吗?',
onOk: () => {},
})
}
defineExpose({
init,
})
</script>
<style scoped lang="less"></style>

View File

@@ -47,6 +47,8 @@
</vxe-column>
<vxe-column field="msg" title="提示信息" :min-width="250" />
<vxe-column field="createTime" title="通知时间" sortable :min-width="170" />
<vxe-column field="mchNo" title="商户号" :min-width="150" />
<vxe-column field="appId" title="商户号" :min-width="150" />
<vxe-column fixed="right" width="60" :showOverflow="false" title="操作">
<template #default="{ row }">
<span>
@@ -114,7 +116,7 @@
field: 'channel',
type: LIST,
name: '支付通道',
placeholder: '请选择支付通道',
placeholder: '请选择通道',
selectList: channelList.value,
},
{
@@ -131,6 +133,8 @@
placeholder: '请选择消息处理状态',
selectList: callbackStatusList.value,
},
{ field: 'mchNo', type: STRING, name: '商户号', placeholder: '请输入商户号' },
{ field: 'appId', type: STRING, name: '应用号', placeholder: '请输入应用号' },
] as QueryField[]
})

View File

@@ -47,7 +47,9 @@
</vxe-column>
<vxe-column field="errorMsg" title="错误消息" :min-width="180" />
<vxe-column field="clientIp" title="客户端IP" :min-width="120" />
<vxe-column field="createTime" title="请求时间" :min-width="120" />
<vxe-column field="createTime" title="创建时间" :min-width="170" />
<vxe-column field="mchNo" title="商户号" :min-width="150" />
<vxe-column field="appId" title="商户号" :min-width="150" />
<vxe-column fixed="right" width="60" :showOverflow="false" title="操作">
<template #default="{ row }">
<span>
@@ -129,6 +131,8 @@
{ label: '失败', value: false },
],
},
{ field: 'mchNo', type: STRING, name: '商户号', placeholder: '请输入商户号' },
{ field: 'appId', type: STRING, name: '应用号', placeholder: '请输入应用号' },
] as QueryField[]
})

View File

@@ -55,7 +55,9 @@
</vxe-column>
<vxe-column field="bizTradeNo" title="商户交易号" :min-width="230" />
<vxe-column field="outTradeNo" title="通道交易号" :min-width="230" />
<vxe-column field="createTime" title="时间" :min-width="160" sortable />
<vxe-column field="createTime" title="时间" :min-width="170" sortable />
<vxe-column field="mchNo" title="商户号" :min-width="150" />
<vxe-column field="appId" title="商户号" :min-width="150" />
<vxe-column fixed="right" :min-width="60" :showOverflow="false" title="操作">
<template #default="{ row }">
<span>
@@ -133,6 +135,8 @@
placeholder: '请选择交易通道',
selectList: payChannelList.value,
},
{ field: 'mchNo', type: STRING, name: '商户号', placeholder: '请输入商户号' },
{ field: 'appId', type: STRING, name: '应用号', placeholder: '请输入应用号' },
] as QueryField[]
})

View File

@@ -40,7 +40,9 @@
</template>
</vxe-column>
<vxe-column field="errorMsg" title="错误消息" :min-width="160" />
<vxe-column field="createTime" title="同步时间" :min-width="160" />
<vxe-column field="createTime" title="同步时间" :min-width="170" />
<vxe-column field="mchNo" title="商户号" :min-width="150" />
<vxe-column field="appId" title="商户号" :min-width="150" />
<vxe-column fixed="right" :min-width="50" :showOverflow="false" title="操作">
<template #default="{ row }">
<span>
@@ -124,6 +126,8 @@
placeholder: '请选择同步通道',
selectList: payChannelList.value,
},
{ field: 'mchNo', type: STRING, name: '商户号', placeholder: '请输入商户号' },
{ field: 'appId', type: STRING, name: '应用号', placeholder: '请输入应用号' },
] as QueryField[]
})