style 交易记录和商户通知页面优化

src/enums/daxpay/PaymentEnum.ts

@@ -24,3 +24,17 @@ export enum TradeTypeEnum {
    */
   TRANSFER = 'transfer',
 }
+
+/**
+ * 客户通知内容类型
+ */
+export enum NotifyContentTypeEnum {
+  /** 支付订单变动通知 */
+  PAY = 'PAY',
+
+  /** 退款订单变动通知 */
+  REFUND = 'refund',
+
+  /** 支付订单变动通知 */
+  TRANSFER = 'transfer',
+}

src/views/daxpay/admin/notice/callback/CallbackRecordInfo.vue

@@ -3,8 +3,8 @@
     title="查看记录"
     v-bind="$attrs"
     :loading="confirmLoading"
-    :width="modalWidth"
-    :visible="visible"
+    :width="1000"
+    :open="visible"
     :mask-closable="showable"
     @cancel="handleCancel"
   >
@@ -17,7 +17,7 @@
           {{ info.reqCount || '空' }}
         </a-descriptions-item>
         <a-descriptions-item label="发送类型">
-          <a-tag>{{ dictConvert('SendType', info.sendType) }}</a-tag>
+          <a-tag>{{ dictConvert('notice_send_type', info.sendType) }}</a-tag>
         </a-descriptions-item>
         <a-descriptions-item label="是否发送成功">
           <a-tag v-if="info.success" color="green">是</a-tag>
@@ -68,4 +68,8 @@
   })
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+  :deep(.ant-descriptions-item-label) {
+    width: 170px;
+  }
+</style>

src/views/daxpay/admin/notice/callback/CallbackRecordList.vue

@@ -24,13 +24,13 @@
       </vxe-column>
       <vxe-column field="channel" title="是否成功">
         <template #default="{ row }">
-          <a-tag v-if="row.success" color="green">是</a-tag>
-          <a-tag v-else color="red">否</a-tag>
+          <a-tag v-if="row.success" color="green">成功</a-tag>
+          <a-tag v-else color="red">失败</a-tag>
         </template>
       </vxe-column>
       <vxe-column field="sendType" title="发送类型">
         <template #default="{ row }">
-          <a-tag>{{ dictConvert('ClientNoticeSendType', row.sendType) }}</a-tag>
+          <a-tag>{{ dictConvert('notice_send_type', row.sendType) }}</a-tag>
         </template>
       </vxe-column>
       <vxe-column field="errorMsg" title="错误信息" max-width="200" />

src/views/daxpay/admin/notice/callback/CallbackTaskInfo.vue

@@ -4,41 +4,47 @@
     v-bind="$attrs"
     :loading="confirmLoading"
     :width="1200"
-    :visible="visible"
+    :open="visible"
     :mask-closable="showable"
     @cancel="handleCancel"
   >
     <a-spin :spinning="confirmLoading">
-      <a-descriptions title="" bordered>
-        <a-descriptions-item label="本地订单号" :span="2">
+      <a-descriptions title="" bordered :column="{ lg: 2, md: 1 }">
+        <a-descriptions-item label="平台订单号" :span="2">
           <a-tag>{{ task.tradeNo }}</a-tag>
         </a-descriptions-item>
-        <a-descriptions-item label="交易类型" :span="2">
-          <a-tag>{{ dictConvert('tradeType', task.tradeType) }}</a-tag>
+        <a-descriptions-item label="交易类型" :span="1">
+          <a-tag>{{ dictConvert('trade_type', task.tradeType) }}</a-tag>
         </a-descriptions-item>
-        <a-descriptions-item label="是否发送成功" :span="2">
-          <a-tag v-if="task.success" color="green">是</a-tag>
-          <a-tag v-else color="red">否</a-tag>
+        <a-descriptions-item label="是否发送成功" :span="1">
+          <a-tag v-if="task.success" color="green">成功</a-tag>
+          <a-tag v-else color="red">失败</a-tag>
         </a-descriptions-item>
-        <a-descriptions-item label="发送次数" :span="2">
-          {{ task.sendCount }}
+        <a-descriptions-item label="发送次数" :span="1">
+          {{ task.sendCount || 0 }}
         </a-descriptions-item>
-        <a-descriptions-item label="下次发送时间" :span="2">
-          {{ task.nextTime }}
+        <a-descriptions-item label="下次发送时间" :span="1">
+          {{ task.nextTime || '无' }}
         </a-descriptions-item>
-        <a-descriptions-item label="延迟重试次数" :span="2">
-          {{ task.delayCount }}
+        <a-descriptions-item label="延迟重试次数" :span="1">
+          {{ task.delayCount || 0 }}
         </a-descriptions-item>
-        <a-descriptions-item label="发送地址" :span="2">
-          {{ task.url }}
+        <a-descriptions-item label="发送地址" :span="1">
+          {{ task.url || '空' }}
         </a-descriptions-item>
-        <a-descriptions-item label="最后发送时间" :span="2">
-          {{ task.latestTime }}
+        <a-descriptions-item label="最后发送时间" :span="1">
+          {{ task.latestTime || '无' }}
         </a-descriptions-item>
-        <a-descriptions-item label="创建时间" :span="2">
+        <a-descriptions-item label="创建时间" :span="1">
           {{ task.createTime }}
         </a-descriptions-item>
-        <a-descriptions-item label="消息内容" :span="4">
+        <a-descriptions-item label="商户号" :span="1">
+          {{ task.mchNo }}
+        </a-descriptions-item>
+        <a-descriptions-item label="应用AppId" :span="1">
+          {{ task.appId }}
+        </a-descriptions-item>
+        <a-descriptions-item label="消息内容" :span="2">
           <json-preview :data="JSON.parse(task.content || '{}')" />
         </a-descriptions-item>
       </a-descriptions>

src/views/daxpay/admin/notice/callback/CallbackTaskList.vue

@@ -26,20 +26,26 @@
             </a-link>
           </template>
         </vxe-column>
-        <vxe-column field="noticeType" title="交易类型" :min-width="80">
+        <vxe-column field="noticeType" title="交易类型" :min-width="120" align="center">
           <template #default="{ row }">
-            <a-tag>{{ dictConvert('TradeType', row.tradeType) }}</a-tag>
+            <a-tag>{{ dictConvert('trade_type', row.tradeType) }}</a-tag>
           </template>
         </vxe-column>
-        <vxe-column field="success" title="发送成功" sortable :min-width="80">
+        <vxe-column field="success" title="发送成功" sortable :min-width="120" align="center">
           <template #default="{ row }">
-            <a-tag v-if="row.success" color="green">是</a-tag>
-            <a-tag v-else color="red">否</a-tag>
+            <a-tag v-if="row.success" color="green">成功</a-tag>
+            <a-tag v-else color="red">失败</a-tag>
           </template>
         </vxe-column>
-        <vxe-column field="sendCount" title="发送次数" sortable :min-width="70" />
+        <vxe-column field="sendCount" title="发送次数" sortable :min-width="110" align="center" />
         <vxe-column field="nextTime" title="下次发送时间" sortable :min-width="170" />
-        <vxe-column field="delayCount" title="延迟重试次数" sortable :min-width="70" />
+        <vxe-column
+          field="delayCount"
+          title="延迟重试次数"
+          sortable
+          :min-width="130"
+          align="center"
+        />
         <vxe-column field="latestTime" title="最后发送时间" sortable :min-width="170" />
         <vxe-column field="createTime" title="创建时间" sortable :min-width="170" />
         <vxe-column fixed="right" width="180" :showOverflow="false" title="操作">

src/views/daxpay/admin/notice/notify/NotifyRecordInfo.vue

@@ -4,7 +4,7 @@
     v-bind="$attrs"
     :loading="confirmLoading"
     :width="modalWidth"
-    :visible="visible"
+    :open="visible"
     :mask-closable="showable"
     @cancel="handleCancel"
   >

src/views/daxpay/admin/notice/notify/NotifyRecordList.vue

@@ -4,45 +4,48 @@
     v-bind="$attrs"
     title="通知明细列表"
     width="60%"
-    :visible="visible"
+    :open="visible"
     @close="visible = false"
   >
     <vxe-toolbar ref="xToolbar" custom :refresh="{ queryMethod: queryPage }" />
-    <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" width="60" />
-      <vxe-column field="reqCount" title="请求次数">
-        <template #default="{ row }">
-          <a-tag color="green">{{ row.reqCount || '空' }}</a-tag>
-        </template>
-      </vxe-column>
-      <vxe-column field="channel" title="是否成功">
-        <template #default="{ row }">
-          <a-tag v-if="row.success" color="green">是</a-tag>
-          <a-tag v-else color="red">否</a-tag>
-        </template>
-      </vxe-column>
-      <vxe-column field="sendType" title="发送类型">
-        <template #default="{ row }">
-          <a-tag>{{ dictConvert('ClientNoticeSendType', row.sendType) }}</a-tag>
-        </template>
-      </vxe-column>
-      <vxe-column field="errorMsg" title="错误信息" max-width="200" />
-      <vxe-column field="createTime" 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>
+    <div class="h-70vh">
+      <vxe-table
+        row-id="id"
+        ref="xTable"
+        height="auto"
+        :data="pagination.records"
+        :loading="loading"
+        :sort-config="{ remote: true, trigger: 'cell' }"
+        @sort-change="sortChange"
+      >
+        <vxe-column type="seq" width="60" />
+        <vxe-column field="reqCount" title="请求次数">
+          <template #default="{ row }">
+            <a-tag color="green">{{ row.reqCount || '空' }}</a-tag>
+          </template>
+        </vxe-column>
+        <vxe-column field="channel" title="是否成功">
+          <template #default="{ row }">
+            <a-tag v-if="row.success" color="green">是</a-tag>
+            <a-tag v-else color="red">否</a-tag>
+          </template>
+        </vxe-column>
+        <vxe-column field="sendType" title="发送类型">
+          <template #default="{ row }">
+            <a-tag>{{ dictConvert('ClientNoticeSendType', row.sendType) }}</a-tag>
+          </template>
+        </vxe-column>
+        <vxe-column field="errorMsg" title="错误信息" max-width="200" />
+        <vxe-column field="createTime" 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>
+    </div>
     <vxe-pager
       size="medium"
       :loading="loading"

src/views/daxpay/admin/notice/notify/NotifyTask.api.ts

@@ -63,8 +63,8 @@ export interface NotifyTask extends MchEntity {
   tradeId?: string
   // 平台交易号
   tradeNo?: string
-  // 交易类型
-  tradeType?: string
+  // 通知类型
+  notifyType?: string
   // 消息内容
   content?: string
   // 是否发送成功

src/views/daxpay/admin/notice/notify/NotifyTaskInfo.vue

@@ -4,41 +4,47 @@
     v-bind="$attrs"
     :loading="confirmLoading"
     :width="1200"
-    :visible="visible"
+    :open="visible"
     :mask-closable="showable"
     @cancel="handleCancel"
   >
     <a-spin :spinning="confirmLoading">
-      <a-descriptions title="" bordered>
-        <a-descriptions-item label="本地订单号" :span="2">
+      <a-descriptions title="" bordered :column="{ lg: 2, md: 1 }">
+        <a-descriptions-item label="平台订单号" :span="2">
           <a-tag>{{ task.tradeNo }}</a-tag>
         </a-descriptions-item>
-        <a-descriptions-item label="交易类型" :span="2">
-          <a-tag>{{ dictConvert('tradeType', task.tradeType) }}</a-tag>
+        <a-descriptions-item label="通知类型" :span="1">
+          <a-tag>{{ dictConvert('notify_content_type', task.notifyType) }}</a-tag>
         </a-descriptions-item>
-        <a-descriptions-item label="是否发送成功" :span="2">
+        <a-descriptions-item label="是否发送成功" :span="1">
           <a-tag v-if="task.success" color="green">是</a-tag>
           <a-tag v-else color="red">否</a-tag>
         </a-descriptions-item>
-        <a-descriptions-item label="发送次数" :span="2">
+        <a-descriptions-item label="发送次数" :span="1">
           {{ task.sendCount }}
         </a-descriptions-item>
-        <a-descriptions-item label="下次发送时间" :span="2">
-          {{ task.nextTime }}
+        <a-descriptions-item label="下次发送时间" :span="1">
+          {{ task.nextTime || '空' }}
         </a-descriptions-item>
-        <a-descriptions-item label="延迟重试次数" :span="2">
-          {{ task.delayCount }}
+        <a-descriptions-item label="延迟重试次数" :span="1">
+          {{ task.delayCount || 0 }}
         </a-descriptions-item>
-        <a-descriptions-item label="发送地址" :span="2">
-          {{ task.url }}
+        <a-descriptions-item label="发送地址" :span="1">
+          {{ task.url || '无' }}
         </a-descriptions-item>
-        <a-descriptions-item label="最后发送时间" :span="2">
-          {{ task.latestTime }}
+        <a-descriptions-item label="最后发送时间" :span="1">
+          {{ task.latestTime || '空' }}
         </a-descriptions-item>
-        <a-descriptions-item label="创建时间" :span="2">
+        <a-descriptions-item label="创建时间" :span="1">
           {{ task.createTime }}
         </a-descriptions-item>
-        <a-descriptions-item label="消息内容" :span="4">
+        <a-descriptions-item label="商户号" :span="1">
+          {{ task.mchNo }}
+        </a-descriptions-item>
+        <a-descriptions-item label="应用AppId" :span="1">
+          {{ task.appId }}
+        </a-descriptions-item>
+        <a-descriptions-item label="消息内容" :span="2">
           <json-preview :data="JSON.parse(task.content || '{}')" />
         </a-descriptions-item>
       </a-descriptions>

src/views/daxpay/admin/notice/notify/NotifyTaskList.vue

@@ -10,48 +10,51 @@
     </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"
-        :sort-config="{ remote: true, trigger: 'cell' }"
-        @sort-change="sortChange"
-      >
-        <vxe-column type="seq" title="序号" width="60" />
-        <vxe-column field="orderId" title="平台交易号" :min-width="230">
-          <template #default="{ row }">
-            <a-link @click="showOrder(row)">
-              {{ row.tradeNo }}
-            </a-link>
-          </template>
-        </vxe-column>
-        <vxe-column field="noticeType" title="交易类型" :min-width="80">
-          <template #default="{ row }">
-            <a-tag>{{ dictConvert('TradeType', row.tradeType) }}</a-tag>
-          </template>
-        </vxe-column>
-        <vxe-column field="success" title="发送成功" sortable :min-width="80">
-          <template #default="{ row }">
-            <a-tag v-if="row.success" color="green">是</a-tag>
-            <a-tag v-else color="red">否</a-tag>
-          </template>
-        </vxe-column>
-        <vxe-column field="sendCount" title="发送次数" sortable :min-width="70" />
-        <vxe-column field="nextTime" title="下次发送时间" sortable :min-width="170" />
-        <vxe-column field="delayCount" title="延迟重试次数" sortable :min-width="70" />
-        <vxe-column field="latestTime" title="最后发送时间" sortable :min-width="170" />
-        <vxe-column field="createTime" title="创建时间" sortable :min-width="170" />
-        <vxe-column fixed="right" width="180" :showOverflow="false" title="操作">
-          <template #default="{ row }">
-            <a-link @click="show(row)">查看</a-link>
-            <a-divider type="vertical" />
-            <a-link @click="showRecord(row)">记录列表</a-link>
-            <a-divider type="vertical" />
-            <a-link @click="resetSend(row)">重发</a-link>
-          </template>
-        </vxe-column>
-      </vxe-table>
+      <div class="h-65vh">
+        <vxe-table
+          row-id="id"
+          ref="xTable"
+          height="auto"
+          :data="pagination.records"
+          :loading="loading"
+          :sort-config="{ remote: true, trigger: 'cell' }"
+          @sort-change="sortChange"
+        >
+          <vxe-column type="seq" title="序号" width="60" />
+          <vxe-column field="orderId" title="平台交易号" :min-width="230">
+            <template #default="{ row }">
+              <a-link @click="showOrder(row)">
+                {{ row.tradeNo }}
+              </a-link>
+            </template>
+          </vxe-column>
+          <vxe-column field="notifyType" title="通知类型" :min-width="180">
+            <template #default="{ row }">
+              <a-tag>{{ dictConvert('notify_content_type', row.notifyType) }}</a-tag>
+            </template>
+          </vxe-column>
+          <vxe-column field="success" title="发送成功" sortable :min-width="120">
+            <template #default="{ row }">
+              <a-tag v-if="row.success" color="green">成功</a-tag>
+              <a-tag v-else color="red">失败</a-tag>
+            </template>
+          </vxe-column>
+          <vxe-column field="sendCount" title="发送次数" sortable :min-width="120" />
+          <vxe-column field="nextTime" title="下次发送时间" sortable :min-width="170" />
+          <vxe-column field="delayCount" title="延迟重试次数" sortable :min-width="150" />
+          <vxe-column field="latestTime" title="最后发送时间" sortable :min-width="170" />
+          <vxe-column field="createTime" title="创建时间" sortable :min-width="170" />
+          <vxe-column fixed="right" width="180" :showOverflow="false" title="操作">
+            <template #default="{ row }">
+              <a-link @click="show(row)">查看</a-link>
+              <a-divider type="vertical" />
+              <a-link @click="showRecord(row)">记录列表</a-link>
+              <a-divider type="vertical" />
+              <a-link @click="resetSend(row)">重发</a-link>
+            </template>
+          </vxe-column>
+        </vxe-table>
+      </div>
       <vxe-pager
         size="medium"
         :loading="loading"
@@ -61,10 +64,11 @@
         @page-change="handleTableChange"
       />
     </div>
-    <NotifyTaskInfo ref="noticeTaskInfo" />
+    <NotifyTaskInfo ref="notifyTaskInfo" />
     <PayOrderInfo ref="payOrderInfo" />
+    <RefundOrderInfo ref="refundOrderInfo" />
     <TransferOrderInfo ref="transferOrderInfo" />
-    <NotifyRecordList ref="noticeRecordList" />
+    <NotifyRecordList ref="notifyRecordList" />
   </div>
 </template>
 
@@ -83,6 +87,8 @@
   import PayOrderInfo from '@/views/daxpay/admin/order/pay/PayOrderInfo.vue'
   import TransferOrderInfo from '@/views/daxpay/admin/order/transfer/TransferOrderInfo.vue'
   import NotifyRecordList from './NotifyRecordList.vue'
+  import { NotifyContentTypeEnum } from '@/enums/daxpay/PaymentEnum'
+  import RefundOrderInfo from '@/views/daxpay/admin/order/refund/RefundOrderInfo.vue'
 
   // 使用hooks
   const {
@@ -114,8 +120,8 @@
     ] as QueryField[]
   })
 
-  const noticeRecordList = ref<any>()
-  const noticeTaskInfo = ref<any>()
+  const notifyRecordList = ref<any>()
+  const notifyTaskInfo = ref<any>()
   const payOrderInfo = ref<any>()
   const refundOrderInfo = ref<any>()
   const transferOrderInfo = ref<any>()
@@ -174,23 +180,23 @@
    * 查看
    */
   function show(record) {
-    noticeTaskInfo.value.init(record)
+    notifyTaskInfo.value.init(record)
   }
   /**
    * 查看记录列表
    */
   function showRecord(record) {
-    noticeRecordList.value.init(record)
+    notifyRecordList.value.init(record)
   }
   /**
    * 查看订单信息
    */
   function showOrder(record: NotifyTask) {
-    if (record.tradeType === 'pay') {
+    if (record.notifyType === NotifyContentTypeEnum.PAY) {
       payOrderInfo.value.init(record.tradeNo)
-    } else if (record.tradeType === 'refund') {
+    } else if (record.notifyType === NotifyContentTypeEnum.REFUND) {
       refundOrderInfo.value.init(record.tradeNo)
-    } else {
+    } else if (record.notifyType === NotifyContentTypeEnum.TRANSFER) {
       transferOrderInfo.value.init(record.tradeNo)
     }
   }

src/views/daxpay/admin/order/refund/RefundOrderInfo.vue

@@ -45,6 +45,12 @@
       <a-descriptions-item label="退款终端ip">
         {{ order.clientIp }}
       </a-descriptions-item>
+      <a-descriptions-item label="商户号" :span="2">
+        {{ order.mchNo }}
+      </a-descriptions-item>
+      <a-descriptions-item label="应用AppId" :span="2">
+        {{ order.appId }}
+      </a-descriptions-item>
     </a-descriptions>
     <template #footer>
       <a-button key="cancel" @click="handleCancel">取消</a-button>

src/views/daxpay/admin/order/refund/RefundOrderList.vue

@@ -197,7 +197,7 @@
    */
   async function initData() {
     refundStatusList.value = await dictDropDown('RefundStatus')
-    channelList.value = await dictDropDown('PayChannel')
+    channelList.value = await dictDropDown('channel')
   }
 
   /**

src/views/daxpay/admin/reconcile/discrepancy/ReconcileDiscrepancyList.vue

@@ -164,7 +164,7 @@
   async function initData() {
     tradeTypeList.value = await dictDropDown('PaymentType')
     diffTypeList.value = await dictDropDown('ReconcileDiffType')
-    payChannelList.value = await dictDropDown('PayChannel')
+    payChannelList.value = await dictDropDown('channel')
   }
   /**
    * 入口

src/views/daxpay/admin/record/callback/TradeCallbackRecordInfo.vue

@@ -77,7 +77,7 @@
 </script>
 
 <style lang="less" scoped>
-  /deep/ .ant-descriptions-item-label {
+  :deep(.ant-descriptions-item-label) {
     width: 170px;
   }
 </style>

src/views/daxpay/admin/record/close/PayCloseRecordList.vue

@@ -150,8 +150,8 @@
    * 初始化
    */
   async function init() {
-    payChannelList.value = await dictDropDown('PayChannel')
-    closeTypeList.value = await dictDropDown('PayCloseType')
+    payChannelList.value = await dictDropDown('channel')
+    closeTypeList.value = await dictDropDown('close_type')
   }
 
   /**

src/views/daxpay/admin/record/flow/TradeFlowRecord.api.ts

@@ -22,6 +22,16 @@ export function get(id) {
   })
 }
 
+/**
+ * 金额汇总
+ */
+export function amountSummary(params) {
+  return defHttp.get<Result<any>>({
+    url: '/record/flow/summary',
+    params,
+  })
+}
+
 /**
  * 支付同步记录
  */

src/views/daxpay/admin/record/flow/TradeFlowRecordList.vue

@@ -83,7 +83,7 @@
 
 <script lang="ts" setup>
   import { computed, onMounted, ref } from 'vue'
-  import { page, TradeFlowRecord } from './TradeFlowRecord.api'
+  import { amountSummary, page, TradeFlowRecord } from './TradeFlowRecord.api'
   import useTablePage from '@/hooks/bootx/useTablePage'
   import { VxeTable, VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
   import BQuery from '@/components/Bootx/Query/BQuery.vue'
@@ -161,8 +161,8 @@
    * 初始化
    */
   async function init() {
-    tradeFlowRecordTypeList.value = await dictDropDown('TradeFlowRecordType')
-    payChannelList.value = await dictDropDown('PayChannel')
+    tradeFlowRecordTypeList.value = await dictDropDown('trade_type')
+    payChannelList.value = await dictDropDown('channel')
   }
 
   /**
@@ -170,14 +170,20 @@
    */
   function queryPage() {
     loading.value = true
+    // 分页查询
     page({
       ...model.queryParam,
       ...pages,
     }).then(({ data }) => {
       pageQueryResHandel(data)
     })
+    // 金额汇总
+    amountSummary(model.queryParam).then(({ data }) => {
+      totalAmount.value = data
+    })
     return Promise.resolve()
   }
+
   /**
    * 查看
    */