feat 各种订单列表调整

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>

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>

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
 }

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

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)
+  }
 
   /**
    * 同步信息

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 }}

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>

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
 }

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,

src/views/payment/order/refund/RefundOrderList.vue

@@ -150,7 +150,7 @@
   }
 
   /**
-   * 查看通道明细
+   * 查看通道明细列表
    */
   function showChannel(record) {
     refundChannelOrderList.init(record)