From 5bfbecfc5176ef731dde963fbfdd0eecf9a27c2c Mon Sep 17 00:00:00 2001
From: xxm1995 <xxm1995@outlook.com>
Date: Wed, 24 Jan 2024 16:51:11 +0800
Subject: [PATCH] =?UTF-8?q?feat=20=E5=90=84=E7=A7=8D=E8=AE=A2=E5=8D=95?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../payment/order/pay/PayChannelOrderInfo.vue |  79 ++++++++++++++
 .../payment/order/pay/PayChannelOrderList.vue | 101 ++++++++++++++++++
 src/views/payment/order/pay/PayOrder.api.ts   |  34 ++++--
 src/views/payment/order/pay/PayOrderInfo.vue  |   8 +-
 src/views/payment/order/pay/PayOrderList.vue  |  17 ++-
 .../order/refund/RefundChannelOrderInfo.vue   |   2 +-
 .../order/refund/RefundChannelOrderList.vue   |   8 +-
 .../payment/order/refund/RefundOrder.api.ts   |   4 +-
 .../payment/order/refund/RefundOrderInfo.vue  |  18 +++-
 .../payment/order/refund/RefundOrderList.vue  |   2 +-
 10 files changed, 245 insertions(+), 28 deletions(-)
 create mode 100644 src/views/payment/order/pay/PayChannelOrderInfo.vue
 create mode 100644 src/views/payment/order/pay/PayChannelOrderList.vue

diff --git a/src/views/payment/order/pay/PayChannelOrderInfo.vue b/src/views/payment/order/pay/PayChannelOrderInfo.vue
new file mode 100644
index 000000000..f251993c4
--- /dev/null
+++ b/src/views/payment/order/pay/PayChannelOrderInfo.vue
@@ -0,0 +1,79 @@
+<template>
+  <basic-modal
+    title="退款订单"
+    v-bind="$attrs"
+    :loading="confirmLoading"
+    :width="750"
+    :visible="visible"
+    :mask-closable="showable"
+    @cancel="handleCancel"
+  >
+    <a-descriptions bordered title="" :column="{ md: 1, sm: 1, xs: 1 }">
+      <a-descriptions-item label="支付通道">
+        <a-tag>{{ dictConvert('PayChannel', form.channel) }}</a-tag>
+      </a-descriptions-item>
+      <a-descriptions-item label="支付通道">
+        <a-tag v-if="form.async" color="green">是</a-tag>
+        <a-tag v-else color="red">否</a-tag>
+      </a-descriptions-item>
+      <a-descriptions-item label="支付方式">
+        <a-tag>{{ dictConvert('PayWay', form.payWay) }}</a-tag>
+      </a-descriptions-item>
+      <a-descriptions-item label="订单金额">
+        {{ form.amount }}
+      </a-descriptions-item>
+      <a-descriptions-item label="支付状态">
+        <a-tag>{{ dictConvert('PayStatus', form.status) }}</a-tag>
+      </a-descriptions-item>
+      <a-descriptions-item label="关联网关退款号">
+        {{ form.gatewayOrderNo }}
+      </a-descriptions-item>
+    </a-descriptions>
+
+    <template #footer>
+      <a-button key="cancel" @click="handleCancel">取消</a-button>
+    </template>
+  </basic-modal>
+</template>
+<script setup lang="ts">
+  import { $ref } from 'vue/macros'
+  import useFormEdit from '/@/hooks/bootx/useFormEdit'
+  import { FormInstance } from 'ant-design-vue/lib/form'
+  import { BasicModal } from '/@/components/Modal'
+  import { useDict } from '/@/hooks/bootx/useDict'
+  import { getChannel, PayChannelOrder } from '/@/views/payment/order/pay/PayOrder.api'
+  const {
+    initFormEditType,
+    handleCancel,
+    search,
+    labelCol,
+    wrapperCol,
+    modalWidth,
+    title,
+    confirmLoading,
+    visible,
+    editable,
+    showable,
+    formEditType,
+  } = useFormEdit()
+  const { dictConvert } = useDict()
+  // 表单
+  const formRef = $ref<FormInstance>()
+  let form = $ref<PayChannelOrder>({})
+
+  // 事件
+  const emits = defineEmits(['ok'])
+  // 入口
+  function init(id) {
+    visible.value = true
+    confirmLoading.value = true
+    getChannel(id).then(({ data }) => {
+      form = data
+      confirmLoading.value = false
+    })
+  }
+  defineExpose({
+    init,
+  })
+</script>
+<style scoped lang="less"></style>
diff --git a/src/views/payment/order/pay/PayChannelOrderList.vue b/src/views/payment/order/pay/PayChannelOrderList.vue
new file mode 100644
index 000000000..d8cc9fe8d
--- /dev/null
+++ b/src/views/payment/order/pay/PayChannelOrderList.vue
@@ -0,0 +1,101 @@
+<template>
+  <basic-drawer forceRender v-bind="$attrs" title="字典列表" width="60%" :visible="visible" @close="visible = false">
+    <vxe-toolbar ref="xToolbar" custom :refresh="{ queryMethod: queryPage }" />
+    <vxe-table row-id="id" ref="xTable" :data="records" :loading="loading">
+      <vxe-column type="seq" width="60" />
+      <vxe-column field="channel" title="支付通道">
+        <template #default="{ row }">
+          <a-tag>{{ dictConvert('PayChannel', row.channel) }}</a-tag>
+        </template>
+      </vxe-column>
+      <vxe-column field="payWay" title="支付方式">
+        <template #default="{ row }">
+          <a-tag>{{ dictConvert('PayWay', row.payWay) }}</a-tag>
+        </template>
+      </vxe-column>
+      <vxe-column field="amount" title="订单金额" />
+      <vxe-column field="refundableBalance" title="可退款金额" />
+      <vxe-column field="async" title="异步支付">
+        <template #default="{ row }">
+          <a-tag v-if="row.async" color="green">是</a-tag>
+          <a-tag v-else color="red">否</a-tag>
+        </template>
+      </vxe-column>
+      <vxe-column field="payChannelId" title="通道支付单ID" />
+      <vxe-column field="status" title="支付状态">
+        <template #default="{ row }">
+          <a-tag>{{ dictConvert('PayStatus', row.status) }}</a-tag>
+        </template>
+      </vxe-column>
+      <vxe-column field="gatewayOrderNo" title="关联网关退款号" />
+      <vxe-column fixed="right" width="60" :showOverflow="false" title="操作">
+        <template #default="{ row }">
+          <span>
+            <a href="javascript:" @click="show(row)">查看</a>
+          </span>
+        </template>
+      </vxe-column>
+    </vxe-table>
+    <pay-channel-order-info ref="payChannelOrderInfo" />
+  </basic-drawer>
+</template>
+
+<script setup lang="ts">
+  import { nextTick } from 'vue'
+  import { $ref } from 'vue/macros'
+  import useTablePage from '/@/hooks/bootx/useTablePage'
+  import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  import BasicDrawer from '/@/components/Drawer/src/BasicDrawer.vue'
+  import { useDict } from '/@/hooks/bootx/useDict'
+  import { listByChannel, PayChannelOrder, PayOrder } from '/@/views/payment/order/pay/PayOrder.api'
+  import PayChannelOrderInfo from './PayChannelOrderInfo.vue'
+
+  // 使用hooks
+  const { resetQueryParams, model, loading } = useTablePage(queryPage)
+  const { notification, createMessage } = useMessage()
+  const { dictDropDown, dictConvert } = useDict()
+
+  let visible = $ref(false)
+  let payOrder = $ref<PayOrder>()
+  let records = $ref<PayChannelOrder[]>([])
+  const xTable = $ref<VxeTableInstance>()
+  const xToolbar = $ref<VxeToolbarInstance>()
+  const payChannelOrderInfo = $ref<any>()
+
+  nextTick(() => {
+    xTable?.connect(xToolbar as VxeToolbarInstance)
+  })
+
+  /**
+   * 入口
+   * @param record
+   */
+  function init(record) {
+    visible = true
+    payOrder = record
+    queryPage()
+  }
+
+  /**
+   * 分页查询
+   */
+  function queryPage() {
+    loading.value = true
+    listByChannel(payOrder?.id).then(({ data }) => {
+      records = data
+      loading.value = false
+    })
+  }
+  /**
+   * 查看
+   */
+  function show(record) {
+    payChannelOrderInfo.init(record)
+  }
+  defineExpose({
+    init,
+  })
+</script>
+
+<style scoped lang="less"></style>
diff --git a/src/views/payment/order/pay/PayOrder.api.ts b/src/views/payment/order/pay/PayOrder.api.ts
index 9f1d1daab..5404e1f63 100644
--- a/src/views/payment/order/pay/PayOrder.api.ts
+++ b/src/views/payment/order/pay/PayOrder.api.ts
@@ -1,8 +1,8 @@
 import { defHttp } from '/@/utils/http/axios'
 import { PageResult, Result } from '/#/axios'
 import { BaseEntity } from '/#/web'
-import { RefundableInfo } from '/src/views/payment/order/refund/RefundOrder.api'
-import { PaySyncResult } from "/@/views/payment/record/sync/PaySyncRecord.api";
+import { RefundableInfo } from '/@/views/payment/order/refund/RefundOrder.api'
+import { PaySyncResult } from '/@/views/payment/record/sync/PaySyncRecord.api'
 
 /**
  * 分页
@@ -34,15 +34,25 @@ export function getOrderExtra(id) {
 }
 
 /**
- * 获取订单关联支付通道信息
+ * 获取付通道订单列表
  */
-export function getPayChannel(paymentId) {
-  return defHttp.get<Result<PayOrderChannel[]>>({
-    url: '/order/pay/getChannels',
+export function listByChannel(paymentId) {
+  return defHttp.get<Result<PayChannelOrder[]>>({
+    url: '/order/pay/listByChannel',
     params: { paymentId },
   })
 }
 
+/**
+ * 获取付通道订单列表
+ */
+export function getChannel(id) {
+  return defHttp.get<Result<PayChannelOrder>>({
+    url: '/order/pay/getChannel',
+    params: { id },
+  })
+}
+
 /**
  * 同步支付状态
  */
@@ -81,8 +91,6 @@ export interface PayOrder extends BaseEntity {
   amount?: number
   // 可退款余额
   refundableBalance?: number
-  // 可退款信息
-  refundableInfos?: RefundableInfo[]
   // 支付状态
   status?: number
   // 支付时间
@@ -122,13 +130,21 @@ export interface PayOrderExtra {
 /**
  * 支付通道信息
  */
-export interface PayOrderChannel {
+export interface PayChannelOrder extends BaseEntity {
   // 支付通道
   channel?: number
   // 支付方式
   payWay?: number
+  // 异步支付方式
+  async?: boolean
   // 金额
   amount?: number
+  // 可退款金额
+  refundableBalance?: number
+  // 支付状态
+  status?: string
+  // 关联网关支付号
+  gatewayOrderNo?: number
   // 扩展参数的json字符串
   extraParamsJson?: string
 }
diff --git a/src/views/payment/order/pay/PayOrderInfo.vue b/src/views/payment/order/pay/PayOrderInfo.vue
index 549b2f295..f90ca55a4 100644
--- a/src/views/payment/order/pay/PayOrderInfo.vue
+++ b/src/views/payment/order/pay/PayOrderInfo.vue
@@ -44,7 +44,7 @@
           <a-tag v-for="o in orderChannel" :key="o.channel">{{ dictConvert('PayChannel', o.channel) }}: {{ o.amount }}</a-tag>
         </a-descriptions-item>
         <a-descriptions-item label="可退款信息">
-          <a-tag v-for="o in order.refundableInfos" :key="o.channel">{{ dictConvert('PayChannel', o.channel) }}: {{ o.amount }}</a-tag>
+          <a-tag v-for="o in orderChannel" :key="o.channel">{{ dictConvert('PayChannel', o.channel) }}: {{ o.refundableBalance }}</a-tag>
         </a-descriptions-item>
         <a-descriptions-item label="客户IP">
           {{ orderExtra.clientIp }}
@@ -92,7 +92,7 @@
 <script lang="ts" setup>
   import { $ref } from 'vue/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
-  import { getOrder, PayOrder, PayOrderExtra, PayOrderChannel, getOrderExtra, getPayChannel } from './PayOrder.api'
+  import { getOrder, PayOrder, PayOrderExtra, PayChannelOrder, getOrderExtra, listByChannel } from './PayOrder.api'
   import { BasicModal } from '/@/components/Modal'
   import { useDict } from '/@/hooks/bootx/useDict'
   const {
@@ -113,7 +113,7 @@
 
   let order = $ref<PayOrder>({})
   let orderExtra = $ref<PayOrderExtra>({})
-  let orderChannel = $ref<PayOrderChannel[]>([])
+  let orderChannel = $ref<PayChannelOrder[]>([])
   // 入口
   async function init(id) {
     visible.value = true
@@ -124,7 +124,7 @@
     await getOrderExtra(id).then(({ data }) => {
       orderExtra = data
     })
-    await getPayChannel(id).then(({ data }) => {
+    await listByChannel(id).then(({ data }) => {
       orderChannel = data
     })
     confirmLoading.value = false
diff --git a/src/views/payment/order/pay/PayOrderList.vue b/src/views/payment/order/pay/PayOrderList.vue
index 680b7a39e..68fa3f2cb 100644
--- a/src/views/payment/order/pay/PayOrderList.vue
+++ b/src/views/payment/order/pay/PayOrderList.vue
@@ -41,11 +41,11 @@
         </vxe-column>
         <vxe-column field="expiredTime" title="过期时间" sortable />
         <vxe-column field="createTime" title="创建时间" sortable />
-        <vxe-column fixed="right" width="120" :showOverflow="false" title="操作">
+        <vxe-column fixed="right" width="200" :showOverflow="false" title="操作">
           <template #default="{ row }">
-            <span>
-              <a-link @click="show(row)">查看</a-link>
-            </span>
+            <a-link @click="show(row)">查看</a-link>
+            <a-divider type="vertical" />
+            <a-link @click="showChannel(row)">通道订单</a-link>
             <a-divider type="vertical" />
             <a-dropdown>
               <a> 更多 <icon icon="ant-design:down-outlined" :size="12" /></a>
@@ -75,6 +75,7 @@
         @page-change="handleTableChange"
       />
       <pay-order-info ref="payOrderInfo" />
+      <pay-channel-order-list ref="payChannelOrderList" />
       <refund-model ref="refundModel" @ok="queryPage" />
     </div>
   </div>
@@ -95,6 +96,7 @@
   import ALink from '/@/components/Link/Link.vue'
   import { PayStatus } from '/@/enums/payment/PayStatus'
   import { LabeledValue } from 'ant-design-vue/lib/select'
+  import PayChannelOrderList from './PayChannelOrderList.vue'
 
   // 使用hooks
   const { handleTableChange, pageQueryResHandel, sortChange, resetQueryParams, pagination, pages, sortParam, model, loading } =
@@ -120,6 +122,7 @@
   const xTable = $ref<VxeTableInstance>()
   const xToolbar = $ref<VxeToolbarInstance>()
   const payOrderInfo = $ref<any>()
+  const payChannelOrderList = $ref<any>()
   const refundModel = $ref<any>()
 
   onMounted(() => {
@@ -158,6 +161,12 @@
   function show(record) {
     payOrderInfo.init(record.id)
   }
+  /**
+   * 查看
+   */
+  function showChannel(record) {
+    payChannelOrderList.init(record)
+  }
 
   /**
    * 同步信息
diff --git a/src/views/payment/order/refund/RefundChannelOrderInfo.vue b/src/views/payment/order/refund/RefundChannelOrderInfo.vue
index a848bda60..3a05080bc 100644
--- a/src/views/payment/order/refund/RefundChannelOrderInfo.vue
+++ b/src/views/payment/order/refund/RefundChannelOrderInfo.vue
@@ -10,7 +10,7 @@
   >
     <a-descriptions bordered title="" :column="{ md: 1, sm: 1, xs: 1 }">
       <a-descriptions-item label="订单金额">
-        {{ form.totalAmount }}
+        {{ form.orderAmount }}
       </a-descriptions-item>
       <a-descriptions-item label="退款金额">
         {{ form.amount }}
diff --git a/src/views/payment/order/refund/RefundChannelOrderList.vue b/src/views/payment/order/refund/RefundChannelOrderList.vue
index f00538aba..bbd0b6eb8 100644
--- a/src/views/payment/order/refund/RefundChannelOrderList.vue
+++ b/src/views/payment/order/refund/RefundChannelOrderList.vue
@@ -3,15 +3,15 @@
     <vxe-toolbar ref="xToolbar" custom :refresh="{ queryMethod: queryPage }" />
     <vxe-table row-id="id" ref="xTable" :data="records" :loading="loading">
       <vxe-column type="seq" width="60" />
-      <vxe-column field="totalAmount" title="订单金额" />
-      <vxe-column field="amount" title="退款金额" />
-      <vxe-column field="payChannelId" title="通道支付单ID" />
-      <vxe-column field="gatewayOrderNo" title="关联网关退款号" />
       <vxe-column field="channel" title="退款通道">
         <template #default="{ row }">
           <a-tag>{{ dictConvert('PayChannel', row.channel) }}</a-tag>
         </template>
       </vxe-column>
+      <vxe-column field="orderAmount" title="订单金额" />
+      <vxe-column field="amount" title="退款金额" />
+      <vxe-column field="payChannelId" title="通道支付单ID" />
+      <vxe-column field="gatewayOrderNo" title="关联网关退款号" />
       <vxe-column fixed="right" width="60" :showOverflow="false" title="操作">
         <template #default="{ row }">
           <span>
diff --git a/src/views/payment/order/refund/RefundOrder.api.ts b/src/views/payment/order/refund/RefundOrder.api.ts
index ed30c2cf9..f7f8a86fe 100644
--- a/src/views/payment/order/refund/RefundOrder.api.ts
+++ b/src/views/payment/order/refund/RefundOrder.api.ts
@@ -92,8 +92,10 @@ export interface RefundChannelOrder extends BaseEntity {
   gatewayOrderNo?: string
   // 通道支付单id
   async?: boolean
+  // 通道
+  channel?: string
   // 订单金额
-  totalAmount?: number
+  orderAmount?: number
   // 退款金额
   amount?: number
 }
diff --git a/src/views/payment/order/refund/RefundOrderInfo.vue b/src/views/payment/order/refund/RefundOrderInfo.vue
index c27297d21..c8599b8d7 100644
--- a/src/views/payment/order/refund/RefundOrderInfo.vue
+++ b/src/views/payment/order/refund/RefundOrderInfo.vue
@@ -27,6 +27,12 @@
       <a-descriptions-item label="剩余可退款金额">
         {{ form.refundableBalance }}
       </a-descriptions-item>
+      <a-descriptions-item label="订单金额信息">
+        <a-tag v-for="o in refundChannelOrders" :key="o.channel">{{ dictConvert('PayChannel', o.channel) }}: {{ o.orderAmount }}</a-tag>
+      </a-descriptions-item>
+      <a-descriptions-item label="退款信息">
+        <a-tag v-for="o in refundChannelOrders" :key="o.channel">{{ dictConvert('PayChannel', o.channel) }}: {{ o.amount }}</a-tag>
+      </a-descriptions-item>
       <a-descriptions-item label="退款时间">
         {{ form.refundTime }}
       </a-descriptions-item>
@@ -52,7 +58,7 @@
 <script lang="ts" setup>
   import { $ref } from 'vue/macros'
   import useFormEdit from '/@/hooks/bootx/useFormEdit'
-  import { get, RefundOrder } from './RefundOrder.api'
+  import { get, listByChannel, RefundChannelOrder, RefundOrder } from './RefundOrder.api'
   import { FormInstance } from 'ant-design-vue/lib/form'
   import { BasicModal } from '/@/components/Modal'
   import { useDict } from '/@/hooks/bootx/useDict'
@@ -74,17 +80,21 @@
   // 表单
   const formRef = $ref<FormInstance>()
   let form = $ref<RefundOrder>({})
+  let refundChannelOrders = $ref<RefundChannelOrder[]>([])
 
   // 事件
   const emits = defineEmits(['ok'])
   // 入口
-  function init(id) {
+  async function init(id) {
     visible.value = true
     confirmLoading.value = true
-    get(id).then(({ data }) => {
+    await get(id).then(({ data }) => {
       form = data
-      confirmLoading.value = false
     })
+    await listByChannel(id).then(({ data }) => {
+      refundChannelOrders = data
+    })
+    confirmLoading.value = false
   }
   defineExpose({
     init,
diff --git a/src/views/payment/order/refund/RefundOrderList.vue b/src/views/payment/order/refund/RefundOrderList.vue
index bcbc533c1..5f1d760ef 100644
--- a/src/views/payment/order/refund/RefundOrderList.vue
+++ b/src/views/payment/order/refund/RefundOrderList.vue
@@ -150,7 +150,7 @@
   }
 
   /**
-   * 查看通道明细
+   * 查看通道明细列表
    */
   function showChannel(record) {
     refundChannelOrderList.init(record)