feat: 优化支付订单 退款订单页面

src/views/payment/order/pay/PayChannelOrderInfo.vue

@@ -10,23 +10,23 @@
   >
     <a-descriptions bordered title="" :column="{ md: 1, sm: 1, xs: 1 }">
       <a-descriptions-item label="通道支付单ID">
-        <a-tag>{{ form.id }}</a-tag>
+         {{ form.id }} 
       </a-descriptions-item>
       <a-descriptions-item label="支付通道">
-        <a-tag>{{ dictConvert('PayChannel', form.channel) }}</a-tag>
+         {{ dictConvert('PayChannel', form.channel) }} 
       </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>
+        <span v-if="form.async" style="color:green">是</span>
+        <span v-else style="color:red">否</span>
       </a-descriptions-item>
       <a-descriptions-item label="支付方式">
-        <a-tag>{{ dictConvert('PayWay', form.payWay) }}</a-tag>
+        {{ dictConvert('PayWay', form.payWay) }} 
       </a-descriptions-item>
       <a-descriptions-item label="订单金额">
         {{ form.amount }}
       </a-descriptions-item>
       <a-descriptions-item label="支付状态">
-        <a-tag>{{ dictConvert('PayStatus', form.status) }}</a-tag>
+        <span :style="dynamicStyle(form.status)"> {{ dictConvert('PayStatus', form.status) }}</span>
       </a-descriptions-item>
       <a-descriptions-item label="支付时间">
         {{ form.payTime }}
@@ -75,6 +75,21 @@
       confirmLoading.value = false
     })
   }
+  function dynamicStyle(item: string){
+    if (item == 'success') {
+      return { color: 'green' }
+    }
+    if (item == 'fail') {
+      return { color: 'red' }
+    }
+    if (item == 'progress') {
+      return { color: 'orange' }
+    }
+    if (item == 'close') {
+      return { color: 'gray' }
+    }
+    return { color: 'red' }
+  }
   defineExpose({
     init,
   })

src/views/payment/order/pay/PayChannelOrderList.vue

@@ -1,30 +1,30 @@
 <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-table row-id="id" ref="xTable" :data="records" :loading="loading" :cell-style="cellStyle">
       <vxe-column type="seq" width="60" />
       <vxe-column field="id" title="通道支付单ID" width="170" />
       <vxe-column field="channel" title="支付通道">
         <template #default="{ row }">
-          <a-tag>{{ dictConvert('PayChannel', row.channel) }}</a-tag>
+           {{ dictConvert('PayChannel', row.channel) }} 
         </template>
       </vxe-column>
       <vxe-column field="payWay" title="支付方式">
         <template #default="{ row }">
-          <a-tag>{{ dictConvert('PayWay', row.payWay) }}</a-tag>
+          {{ dictConvert('PayWay', row.payWay) }}
         </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>
+          <span  v-if="row.async" style="color:green">是</span>
+          <span v-else style="color:red">否</span>
         </template>
       </vxe-column>
       <vxe-column field="status" title="支付状态">
         <template #default="{ row }">
-          <a-tag>{{ dictConvert('PayStatus', row.status) }}</a-tag>
+          {{ dictConvert('PayStatus', row.status) }} 
         </template>
       </vxe-column>
       <vxe-column field="payTime" title="支付时间" />
@@ -93,6 +93,38 @@
   function show(record) {
     payChannelOrderInfo.init(record)
   }
+
+  function cellStyle({ row, column }) {
+  if (column.field == 'status') {
+    if (row.status == 'success') {
+      return { color: 'green' }
+    }
+    if (row.status == 'fail') {
+      return { color: 'red' }
+    }
+    if (row.status == 'progress') {
+      return { color: 'orange' }
+    }
+    if (row.status == 'close') {
+      return { color: 'gray' }
+    }
+    return { color: 'red' }
+  }
+  if (column.field == 'asyncPay') {
+    if (row.asyncPay) {
+      return { color: 'green' }
+    } else {
+      return { color: 'gray' }
+    }
+  }
+  if (column.field == 'combinationPayMode') {
+    if (row.combinationPayMode) {
+      return { color: 'green' }
+    } else {
+      return { color: 'gray' }
+    }
+  }
+}
   defineExpose({
     init,
   })

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

@@ -28,7 +28,7 @@
         {{ dictConvert('PayChannel', form.channel) }}
       </a-descriptions-item>
       <a-descriptions-item label="状态">
-        <a-tag>{{ dictConvert('RefundStatus', form.status) }}</a-tag>
+        <span :style="dynamicStyle(form.status)">{{ dictConvert('RefundStatus', form.status) }}</span>
       </a-descriptions-item>
     </a-descriptions>
 
@@ -74,6 +74,21 @@
       confirmLoading.value = false
     })
   }
+  function dynamicStyle(item: string){
+    if (item == 'success') {
+      return { color: 'green' }
+    }
+    if (item == 'fail') {
+      return { color: 'red' }
+    }
+    if (item == 'progress') {
+      return { color: 'orange' }
+    }
+    if (item == 'close') {
+      return { color: 'gray' }
+    }
+    return { color: 'red' }
+  }
   defineExpose({
     init,
   })

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

@@ -1,20 +1,16 @@
 <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-table row-id="id" ref="xTable" :cell-style="cellStyle" :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>
+        <template #default="{ row }">{{ dictConvert('PayChannel', row.channel) }}</template>
       </vxe-column>
       <vxe-column field="orderAmount" title="订单金额" />
       <vxe-column field="amount" title="退款金额" />
       <vxe-column field="refundableAmount" title="剩余可退余额" />
       <vxe-column field="refundStatus" title="状态">
-        <template #default="{ row }">
-          <a-tag>{{ dictConvert('RefundStatus', row.status) }}</a-tag>
-        </template>
+        <template #default="{ row }">{{ dictConvert('RefundStatus', row.status) }}</template>
       </vxe-column>
       <vxe-column field="payChannelId" title="通道支付单ID" />
       <vxe-column fixed="right" width="60" :showOverflow="false" title="操作">
@@ -30,61 +26,79 @@
 </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, RefundOrder } from './RefundOrder.api'
-  import RefundChannelOrderInfo from './RefundChannelOrderInfo.vue'
+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, RefundOrder } from './RefundOrder.api'
+import RefundChannelOrderInfo from './RefundChannelOrderInfo.vue'
 
-  // 使用hooks
-  const { resetQueryParams, model, loading } = useTablePage(queryPage)
-  const { notification, createMessage } = useMessage()
-  const { dictDropDown, dictConvert } = useDict()
+// 使用hooks
+const { resetQueryParams, model, loading } = useTablePage(queryPage)
+const { notification, createMessage } = useMessage()
+const { dictDropDown, dictConvert } = useDict()
 
-  let visible = $ref(false)
-  let refundOrder = $ref<RefundOrder>()
-  let records = $ref<RefundOrder[]>([])
-  const xTable = $ref<VxeTableInstance>()
-  const xToolbar = $ref<VxeToolbarInstance>()
-  const refundChannelOrderInfo = $ref<any>()
+let visible = $ref(false)
+let refundOrder = $ref<RefundOrder>()
+let records = $ref<RefundOrder[]>([])
+const xTable = $ref<VxeTableInstance>()
+const xToolbar = $ref<VxeToolbarInstance>()
+const refundChannelOrderInfo = $ref<any>()
 
-  nextTick(() => {
-    xTable?.connect(xToolbar as VxeToolbarInstance)
+nextTick(() => {
+  xTable?.connect(xToolbar as VxeToolbarInstance)
+})
+
+/**
+ * 入口
+ * @param record
+ */
+function init(record) {
+  visible = true
+  refundOrder = record
+  queryPage()
+}
+
+/**
+ * 分页查询
+ */
+function queryPage() {
+  loading.value = true
+  listByChannel(refundOrder?.id).then(({ data }) => {
+    records = data
+    loading.value = false
   })
+}
+/**
+ * 查看
+ */
+function show(record) {
+  refundChannelOrderInfo.init(record)
+}
 
-  /**
-   * 入口
-   * @param record
-   */
-  function init(record) {
-    visible = true
-    refundOrder = record
-    queryPage()
+function cellStyle({ row, column }) {
+  if (column.field == 'refundStatus') {
+    if (row.status == 'success') {
+      return { color: 'green' }
+    }
+    if (row.status == 'fail') {
+      return { color: 'red' }
+    }
+    if (row.status == 'progress') {
+      return { color: 'orange' }
+    }
+    if (row.status == 'close') {
+      return { color: 'gray' }
+    }
+    return { color: 'red' }
   }
-
-  /**
-   * 分页查询
-   */
-  function queryPage() {
-    loading.value = true
-    listByChannel(refundOrder?.id).then(({ data }) => {
-      records = data
-      loading.value = false
-    })
-  }
-  /**
-   * 查看
-   */
-  function show(record) {
-    refundChannelOrderInfo.init(record)
-  }
-  defineExpose({
-    init,
-  })
+}
+defineExpose({
+  init,
+})
 </script>
 
 <style scoped lang="less"></style>

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

@@ -14,6 +14,7 @@
       <vxe-toolbar ref="xToolbar" custom :refresh="{ queryMethod: queryPage }" />
       <vxe-table
         row-id="id"
+        :cell-style="cellStyle"
         ref="xTable"
         :sort-config="{ remote: true, trigger: 'cell' }"
         :data="pagination.records"
@@ -21,9 +22,10 @@
         @sort-change="sortChange"
       >
         <vxe-column type="seq" title="序号" width="60" />
-        <vxe-column field="id" title="退款ID" width="180" />
-        <vxe-column field="title" title="原支付标题" />
-        <vxe-column field="paymentId" title="原支付ID" width="170">
+        <vxe-column field="id" title="退款ID" width="220" />
+        <vxe-column field="refundTime" title="退款时间" sortable  width="180"/>
+        <vxe-column field="title" title="原支付标题" width="160" />
+        <vxe-column field="paymentId" title="原支付ID" width="220">
           <template #default="{ row }">
             <a @click="showPayment(row.paymentId)">
               {{ row.paymentId }}
@@ -31,21 +33,20 @@
           </template>
         </vxe-column>
         <vxe-column field="businessNo" title="原业务号" :visible="false" />
-        <vxe-column field="amount" title="退款金额" sortable />
-        <vxe-column field="refundableBalance" title="剩余可退金额" sortable />
-        <vxe-column field="async" title="包含异步通道">
+        <vxe-column field="amount" title="退款金额(分)"  sortable width="140" />
+        <vxe-column field="refundableBalance" title="剩余可退金额(分)" sortable width="160" />
+        <vxe-column field="async" title="包含异步通道" width="120">
           <template #default="{ row }">
-            <a-tag color="green">{{ row.asyncPay ? '是' : '否' }}</a-tag>
+            {{ row.asyncPay ? '是' : '否' }} 
           </template>
         </vxe-column>
-        <vxe-column field="gatewayOrderNo" title="支付网关订单号" :visible="false" />
-        <vxe-column field="refundTime" title="退款时间" sortable />
-        <vxe-column field="refundStatus" title="状态">
+        <vxe-column field="gatewayOrderNo" title="支付网关订单号" :visible="false" width="220" />
+        <vxe-column field="refundStatus" title="状态" width="80">
           <template #default="{ row }">
-            <a-tag>{{ dictConvert('RefundStatus', row.status) }}</a-tag>
+             {{ dictConvert('RefundStatus', row.status) }} 
           </template>
         </vxe-column>
-        <vxe-column field="reason" title="原因" />
+        <vxe-column field="reason" title="原因" width="160" />
         <vxe-column fixed="right" width="220" :showOverflow="false" title="操作">
           <template #default="{ row }">
             <a-link @click="show(row)">查看</a-link>
@@ -214,6 +215,38 @@
   function showChannel(record) {
     refundChannelOrderList.init(record)
   }
+
+  function cellStyle({ row, column }) {
+  if (column.field == 'refundStatus') {
+    if (row.status == 'success') {
+      return { color: 'green' }
+    }
+    if (row.status == 'fail') {
+      return { color: 'red' }
+    }
+    if (row.status == 'progress') {
+      return { color: 'orange' }
+    }
+    if (row.status == 'close') {
+      return { color: 'gray' }
+    }
+    return { color: 'red' }
+  }
+  if (column.field == 'async') {
+    if (row.asyncPay) {
+      return { color: 'green' }
+    } else {
+      return { color: 'gray' }
+    }
+  }
+  if (column.field == 'combinationPayMode') {
+    if (row.combinationPayMode) {
+      return { color: 'green' }
+    } else {
+      return { color: 'gray' }
+    }
+  }
+}
 </script>
 
 <style lang="less" scoped></style>