From f1c7aea7b5b4d979a3bcc3e95f46e3b64b51031e Mon Sep 17 00:00:00 2001
From: bootx <xxm1995@outlook.com>
Date: Sun, 2 Jun 2024 18:57:58 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E4=BA=A4=E6=98=93=E6=B5=81=E6=B0=B4?=
 =?UTF-8?q?=E8=81=94=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../record/flow/TradeFlowRecord.api.ts        |  43 +++++
 .../record/flow/TradeFlowRecordInfo.vue       |  76 +++++++++
 .../record/flow/TradeFlowRecordList.vue       | 160 ++++++++++++++++++
 .../payment/record/sync/PaySyncRecordList.vue |   2 +-
 4 files changed, 280 insertions(+), 1 deletion(-)
 create mode 100644 src/views/payment/record/flow/TradeFlowRecord.api.ts
 create mode 100644 src/views/payment/record/flow/TradeFlowRecordInfo.vue
 create mode 100644 src/views/payment/record/flow/TradeFlowRecordList.vue

diff --git a/src/views/payment/record/flow/TradeFlowRecord.api.ts b/src/views/payment/record/flow/TradeFlowRecord.api.ts
new file mode 100644
index 000000000..934f9ed75
--- /dev/null
+++ b/src/views/payment/record/flow/TradeFlowRecord.api.ts
@@ -0,0 +1,43 @@
+import { defHttp } from '/@/utils/http/axios'
+import { PageResult, Result } from '/#/axios'
+import { BaseEntity } from '/#/web'
+
+/**
+ * 分页
+ */
+export function page(params) {
+  return defHttp.get<Result<PageResult<TradeFlowRecord>>>({
+    url: '/record/flow/page',
+    params,
+  })
+}
+
+/**
+ * 获取单条
+ */
+export function get(id) {
+  return defHttp.get<Result<TradeFlowRecord>>({
+    url: '/record/flow/findById',
+    params: { id },
+  })
+}
+
+/**
+ * 支付同步记录
+ */
+export interface TradeFlowRecord extends BaseEntity {
+  // 订单标题
+  title?: string
+  // 金额
+  amount?: number
+  // 业务类型
+  type?: string
+  // 同步通道
+  channel?: string
+  // 修复号
+  tradeNo?: string
+  // 商户交易号
+  bizTradeNo?: string
+  // 通道交易号
+  outTradeNo?: string
+}
diff --git a/src/views/payment/record/flow/TradeFlowRecordInfo.vue b/src/views/payment/record/flow/TradeFlowRecordInfo.vue
new file mode 100644
index 000000000..cf6383ddd
--- /dev/null
+++ b/src/views/payment/record/flow/TradeFlowRecordInfo.vue
@@ -0,0 +1,76 @@
+<template>
+  <basic-modal
+    title="查看同步信息"
+    v-bind="$attrs"
+    :loading="confirmLoading"
+    :width="1200"
+    :visible="visible"
+    :mask-closable="showable"
+    @cancel="handleCancel"
+  >
+    <a-spin :spinning="confirmLoading">
+      <a-descriptions title="" bordered>
+        <a-descriptions-item label="标题" :span="2">
+          {{ form.title }}
+        </a-descriptions-item>
+        <a-descriptions-item label="交易金额(元)" :span="2">
+          {{ form.amount ? (form.amount / 100).toFixed(2) : '无' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="本地交易号" :span="4">
+          {{ form.tradeNo }}
+        </a-descriptions-item>
+        <a-descriptions-item label="商户交易号" :span="4">
+          {{ form.bizTradeNo }}
+        </a-descriptions-item>
+        <a-descriptions-item label="通道交易号" :span="4">
+          {{ form.outTradeNo || '无' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="流水类型" :span="2">
+          <a-tag>{{ dictConvert('TradeFlowRecordType', form.type) }}</a-tag>
+        </a-descriptions-item>
+        <a-descriptions-item label="交易通道" :span="2">
+          <a-tag> {{ dictConvert('PayChannel', form.channel) }}</a-tag>
+        </a-descriptions-item>
+        <a-descriptions-item label="同步时间" :span="2">
+          {{ form.createTime }}
+        </a-descriptions-item>
+      </a-descriptions>
+    </a-spin>
+    <template #footer>
+      <a-button key="cancel" @click="handleCancel">取消</a-button>
+    </template>
+  </basic-modal>
+</template>
+
+<script lang="ts" setup>
+  import { $ref } from 'vue/macros'
+  import useFormEdit from '/@/hooks/bootx/useFormEdit'
+  import { get, TradeFlowRecord } from './TradeFlowRecord.api'
+  import { BasicModal } from '/@/components/Modal'
+  import { useDict } from '/@/hooks/bootx/useDict'
+
+  const { handleCancel, confirmLoading, visible, showable } = useFormEdit()
+  const { dictConvert } = useDict()
+
+  // 表单
+  let form = $ref<TradeFlowRecord>({})
+  // 入口
+  function init(id) {
+    visible.value = true
+    confirmLoading.value = true
+    get(id).then(({ data }) => {
+      form = data
+      confirmLoading.value = false
+    })
+  }
+
+  defineExpose({
+    init,
+  })
+</script>
+
+<style lang="less" scoped>
+  /deep/ .ant-descriptions-item-label {
+    width: 170px;
+  }
+</style>
diff --git a/src/views/payment/record/flow/TradeFlowRecordList.vue b/src/views/payment/record/flow/TradeFlowRecordList.vue
new file mode 100644
index 000000000..ff94ef6a6
--- /dev/null
+++ b/src/views/payment/record/flow/TradeFlowRecordList.vue
@@ -0,0 +1,160 @@
+<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 }" />
+      <vxe-table row-id="id" ref="xTable" :data="pagination.records" :loading="loading">
+        <vxe-column type="seq" title="序号" width="60" />
+        <vxe-column field="title" title="标题" :min-width="220" />
+        <vxe-column field="amount" title="金额(元)" :min-width="120" sortable>
+          <template #default="{ row }"> {{ row.amount ? (row.amount / 100).toFixed(2) : 0 }} </template>
+        </vxe-column>
+        <vxe-column field="type" title="流水类型" :min-width="120">
+          <template #default="{ row }">
+            <a-tag>{{ dictConvert('TradeFlowRecordType', row.type) }}</a-tag>
+          </template>
+        </vxe-column>
+        <vxe-column field="channel" title="交易通道" :min-width="100">
+          <template #default="{ row }">
+            <a-tag>{{ dictConvert('AsyncPayChannel', row.channel) }}</a-tag>
+          </template>
+        </vxe-column>
+        <vxe-column field="tradeNo" title="本地交易号" :min-width="220">
+          <template #default="{ row }">
+            <a @click="showOrder(row)">
+              {{ row.tradeNo }}
+            </a>
+          </template>
+        </vxe-column>
+        <vxe-column field="bizTradeNo" title="商户交易号" :min-width="220" />
+        <vxe-column field="outTradeNo" title="通道交易号" :min-width="220" />
+        <vxe-column field="createTime" title="时间" :min-width="160" sortable />
+        <vxe-column fixed="right" :min-width="60" :showOverflow="false" title="操作">
+          <template #default="{ row }">
+            <span>
+              <a-link @click="show(row)">查看</a-link>
+            </span>
+          </template>
+        </vxe-column>
+      </vxe-table>
+      <vxe-pager
+        size="medium"
+        :loading="loading"
+        :current-page="pagination.current"
+        :page-size="pagination.size"
+        :total="pagination.total"
+        @page-change="handleTableChange"
+      />
+    </div>
+    <trade-flow-record-info ref="tradeFlowRecordInfo" />
+    <pay-order-info ref="payOrderInfo" />
+    <refund-order-info ref="refundOrderInfo" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, onMounted } from 'vue'
+  import { $ref } from 'vue/macros'
+  import { page } from './TradeFlowRecord.api'
+  import useTablePage from '/@/hooks/bootx/useTablePage'
+  import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
+  import BQuery from '/@/components/Bootx/Query/BQuery.vue'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  import { LIST, QueryField, STRING } from '/@/components/Bootx/Query/Query'
+  import { useDict } from '/@/hooks/bootx/useDict'
+  import { LabeledValue } from 'ant-design-vue/lib/select'
+  import PayOrderInfo from '/@/views/payment/order/pay/PayOrderInfo.vue'
+  import RefundOrderInfo from '/@/views/payment/order/refund/RefundOrderInfo.vue'
+  import ALink from '/@/components/Link/Link.vue'
+  import TradeFlowRecordInfo from './TradeFlowRecordInfo.vue'
+
+  // 使用hooks
+  const { handleTableChange, pageQueryResHandel, resetQueryParams, pagination, pages, model, loading } = useTablePage(queryPage)
+  const { notification, createMessage, createConfirm } = useMessage()
+  const { dictConvert, dictDropDown } = useDict()
+
+  let payChannelList = $ref<LabeledValue[]>([])
+  let tradeFlowRecordTypeList = $ref<LabeledValue[]>([])
+
+  // 查询条件
+  const fields = computed(() => {
+    return [
+      { field: 'title', type: STRING, name: '订单标题', placeholder: '请输入订单标题' },
+      { field: 'tradeNo', type: STRING, name: '本地交易号', placeholder: '请输入本地交易号' },
+      { field: 'bizTradeNo', type: STRING, name: '商户交易号', placeholder: '请输入商户交易号' },
+      { field: 'outTradeNo', type: STRING, name: '通道交易号', placeholder: '请输入通道交易号' },
+      {
+        field: 'type',
+        type: LIST,
+        name: '流水类型',
+        placeholder: '请选择流水类型',
+        selectList: tradeFlowRecordTypeList,
+      },
+      {
+        field: 'channel',
+        type: LIST,
+        name: '交易通道',
+        placeholder: '请选择交易通道',
+        selectList: payChannelList,
+      },
+    ] as QueryField[]
+  })
+
+  const xTable = $ref<VxeTableInstance>()
+  const xToolbar = $ref<VxeToolbarInstance>()
+  const payOrderInfo = $ref<any>()
+  const refundOrderInfo = $ref<any>()
+  const tradeFlowRecordInfo = $ref<any>()
+
+  onMounted(() => {
+    init()
+    vxeBind()
+    queryPage()
+  })
+  function vxeBind() {
+    xTable?.connect(xToolbar as VxeToolbarInstance)
+  }
+
+  /**
+   * 初始化
+   */
+  async function init() {
+    tradeFlowRecordTypeList = await dictDropDown('TradeFlowRecordType')
+    payChannelList = await dictDropDown('PayChannel')
+  }
+
+  /**
+   * 分页查询
+   */
+  function queryPage() {
+    loading.value = true
+    page({
+      ...model.queryParam,
+      ...pages,
+    }).then(({ data }) => {
+      pageQueryResHandel(data)
+    })
+    return Promise.resolve()
+  }
+  /**
+   * 查看
+   */
+  function show(record) {
+    tradeFlowRecordInfo.init(record.id)
+  }
+
+  /**
+   * 查看支付单信息
+   */
+  function showOrder(record) {
+    if (record.type === 'pay') {
+      payOrderInfo.init(record.tradeNo)
+    } else if (record.type === 'refund') {
+      refundOrderInfo.init(record.tradeNo)
+    }
+  }
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/payment/record/sync/PaySyncRecordList.vue b/src/views/payment/record/sync/PaySyncRecordList.vue
index 83a4d4c3e..f55148e05 100644
--- a/src/views/payment/record/sync/PaySyncRecordList.vue
+++ b/src/views/payment/record/sync/PaySyncRecordList.vue
@@ -97,7 +97,7 @@
     return [
       { field: 'tradeNo', type: STRING, name: '本地交易号', placeholder: '请输入本地交易号' },
       { field: 'bizTradeNo', type: STRING, name: '商户交易号', placeholder: '请输入商户交易号' },
-      { field: 'bizTradeNo', type: STRING, name: '通道交易号', placeholder: '请输入通道交易号' },
+      { field: 'outTradeNo', type: STRING, name: '通道交易号', placeholder: '请输入通道交易号' },
       {
         field: 'syncType',
         type: LIST,