列表页部分优化

jeepay-ui-manager/src/views/order/pay/PayOrderList.vue

@@ -76,6 +76,7 @@
         :scrollX="1350"
       >
         <template slot="amountSlot" slot-scope="{record}"><b>￥{{ record.amount/100 }}</b></template> <!-- 自定义插槽 -->
+        <template slot="refundAmountSlot" slot-scope="{record}">￥{{ record.refundAmount/100 }}</template> <!-- 自定义插槽 -->
         <template slot="stateSlot" slot-scope="{record}">
           <a-tag
             :key="record.state"
@@ -84,20 +85,12 @@
             {{ record.state === 0?'订单生成':record.state === 1?'支付中':record.state === 2?'支付成功':record.state === 3?'支付失败':record.state === 4?'已撤销':record.state === 5?'已退款':record.state === 6?'订单关闭':'未知' }}
           </a-tag>
         </template>
-        <template slot="refundStateSlot" slot-scope="{record}">
-          <a-tag
-            :key="record.refundState"
-            :color="record.refundState === 0?'blue':record.refundState === 1?'orange':record.refundState === 2?'green':'volcano'"
-          >
-            {{ record.refundState === 0?'未发起':record.refundState === 1?'部分退款':record.refundState === 2?'全额退款':'未知' }}
-          </a-tag>
-        </template>
         <template slot="divisionStateSlot" slot-scope="{record}">
-          <a-tag color="blue" v-if="record.divisionState == 0">未发生分账</a-tag>
+          <span color="blue" v-if="record.divisionState == 0"> - </span>
-          <a-tag color="orange" v-else-if="record.divisionState == 1">待分账</a-tag>
+          <span color="orange" v-else-if="record.divisionState == 1">待分账</span>
-          <a-tag color="red" v-else-if="record.divisionState == 2">分账处理中</a-tag>
+          <span color="red" v-else-if="record.divisionState == 2">分账处理中</span>
-          <a-tag color="green" v-else-if="record.divisionState == 3">任务已结束</a-tag>
+          <span color="green" v-else-if="record.divisionState == 3">任务已结束</span>
-          <a-tag color="#f50" v-else>未知</a-tag>
+          <span color="#f50" v-else>未知</span>
         </template>
         <template slot="notifySlot" slot-scope="{record}">
           <a-badge :status="record.notifyState === 1?'processing':'error'" :text="record.notifyState === 1?'已发送':'未发送'" />
@@ -105,14 +98,29 @@
         <template slot="orderSlot" slot-scope="{record}">
           <div class="order-list">
             <p><span style="color:#729ED5;background:#e7f5f7">支付</span>{{ record.payOrderId }}</p>
-            <p><span style="color:#56cf56;background:#d8eadf">商户</span>{{ record.mchOrderNo }}</p>
+            <p>
-            <p v-if="record.channelOrderNo"><span style="color:#fff;background:#E09C4D">渠道</span>{{ record.channelOrderNo }}</p>
+              <span style="color:#56cf56;background:#d8eadf">商户</span>
+              <a-tooltip placement="bottom" style="font-weight: normal;">
+                <template slot="title">
+                  <span>{{ record.mchOrderNo }}</span>
+                </template>
+                {{ record.mchOrderNo.length <= record.payOrderId.length ? record.mchOrderNo:record.mchOrderNo.substring(0, record.payOrderId.length) + "..." }}
+              </a-tooltip>
+            </p>
+            <p v-if="record.channelOrderNo">
+              <span style="color:#fff;background:#E09C4D;">渠道</span>
+              <a-tooltip placement="bottom" style="font-weight: normal;">
+                <template slot="title">
+                  <span>{{ record.channelOrderNo }}</span>
+                </template>
+                {{ record.channelOrderNo.length <= record.payOrderId.length ? record.channelOrderNo:record.channelOrderNo.substring(0, record.payOrderId.length) + "..." }}
+              </a-tooltip>
+            </p>
           </div>
         </template>
         <template slot="opSlot" slot-scope="{record}">  <!-- 操作列插槽 -->
           <JeepayTableColumns>
             <a-button type="link" v-if="$access('ENT_PAY_ORDER_VIEW')" @click="detailFunc(record.payOrderId)">详情</a-button>
-
             <a-button type="link" v-if="$access('ENT_PAY_ORDER_REFUND')" style="color: red" v-show="(record.state === 2 && record.refundState !== 2)" @click="openFunc(record, record.payOrderId)">退款</a-button>
           </JeepayTableColumns>
         </template>
@@ -403,6 +411,7 @@ import moment from 'moment'
 // eslint-disable-next-line no-unused-vars
 const tableColumns = [
   { key: 'amount', title: '支付金额', ellipsis: true, width: '130px', fixed: 'left', scopedSlots: { customRender: 'amountSlot' } },
+  { key: 'refundAmount', title: '退款金额', width: '130px', scopedSlots: { customRender: 'refundAmountSlot' } },
   { key: 'mchFeeAmount', dataIndex: 'mchFeeAmount', title: '手续费', customRender: (text) => '￥' + (text / 100).toFixed(2) },
   { key: 'mchName', title: '商户名称', dataIndex: 'mchName', ellipsis: true, width: '100px' },
   { key: 'orderNo', title: '订单号', scopedSlots: { customRender: 'orderSlot' }, width: '260px' },
@@ -410,8 +419,7 @@ const tableColumns = [
   // { key: 'mchOrderNo', title: '商户订单号', dataIndex: 'mchOrderNo' },
   { key: 'wayName', title: '支付方式', dataIndex: 'wayName', width: 150 },
   { key: 'state', title: '支付状态', scopedSlots: { customRender: 'stateSlot' }, width: 100 },
-  { key: 'refundState', title: '退款状态', scopedSlots: { customRender: 'refundStateSlot' }, width: 100 },
+  { key: 'divisionState', title: '分账状态', scopedSlots: { customRender: 'divisionStateSlot' }, align: 'center' },
-  { key: 'divisionState', title: '分账状态', scopedSlots: { customRender: 'divisionStateSlot' } },
   { key: 'notifyState', title: '回调状态', scopedSlots: { customRender: 'notifySlot' }, width: 100 },
   { key: 'createdAt', dataIndex: 'createdAt', title: '创建日期', width: 180 },
   { key: 'op', title: '操作', width: '160px', fixed: 'right', align: 'center', scopedSlots: { customRender: 'opSlot' } }

jeepay-ui-manager/src/views/order/refund/RefundOrderList.vue

@@ -72,14 +72,30 @@
         <template slot="payOrderSlot" slot-scope="{record}">
           <div class="order-list">
             <p><span style="color:#729ED5;background:#e7f5f7">支付</span>{{ record.payOrderId }}</p>
-            <p v-if="record.channelPayOrderNo"><span style="color:#fff;background:#E09C4D">渠道</span>{{ record.channelPayOrderNo }}</p>
+            <p v-if="record.channelPayOrderNo">
+              <span style="color:#fff;background:#E09C4D">渠道</span>
+              <a-tooltip placement="bottom" style="font-weight: normal;">
+                <template slot="title">
+                  <span>{{ record.channelPayOrderNo }}</span>
+                </template>
+                {{ record.channelPayOrderNo.length <= record.payOrderId.length ? record.channelPayOrderNo:record.channelPayOrderNo.substring(0, record.payOrderId.length) + "..." }}
+              </a-tooltip>
+            </p>
           </div>
         </template>
 
         <template slot="refundOrderSlot" slot-scope="{record}">
           <div class="order-list">
             <p><span style="color:#729ED5;background:#e7f5f7">退款</span>{{ record.refundOrderId }}</p>
-            <p><span style="color:#56cf56;background:#d8eadf">商户</span>{{ record.mchRefundNo }}</p>
+            <p>
+              <span style="color:#56cf56;background:#d8eadf">商户</span>
+              <a-tooltip placement="bottom" style="font-weight: normal;">
+                <template slot="title">
+                  <span>{{ record.mchRefundNo }}</span>
+                </template>
+                {{ record.mchRefundNo.length <= record.payOrderId.length ? record.mchRefundNo:record.mchRefundNo.substring(0, record.payOrderId.length) + "..." }}
+              </a-tooltip>
+            </p>
           </div>
         </template>
         <template slot="opSlot" slot-scope="{record}">  <!-- 操作列插槽 -->
@@ -309,14 +325,14 @@
 
   // eslint-disable-next-line no-unused-vars
   const tableColumns = [
-    { key: 'payAmount', title: '支付金额', fixed: 'left', scopedSlots: { customRender: 'payAmountSlot' } },
+    { key: 'payAmount', title: '支付金额', ellipsis: true, fixed: 'left', scopedSlots: { customRender: 'payAmountSlot' }, width: '150px' },
-    { key: 'refundAmount', title: '退款金额', scopedSlots: { customRender: 'refundAmountSlot' } },
+    { key: 'refundAmount', title: '退款金额', ellipsis: true, scopedSlots: { customRender: 'refundAmountSlot' }, width: '150px' },
     { key: 'pay', title: '退款订单号', scopedSlots: { customRender: 'refundOrderSlot' }, width: '260px' },
     { key: 'refund', title: '支付订单号', scopedSlots: { customRender: 'payOrderSlot' }, width: '280px' },
     // { key: 'refundOrderId', title: '退款订单号', dataIndex: 'refundOrderId' },
     // { key: 'payOrderId', title: '支付订单号', dataIndex: 'payOrderId' },
     // { key: 'mchRefundNo', title: '商户退款单号', dataIndex: 'mchRefundNo' },
-    { key: 'state', title: '状态', scopedSlots: { customRender: 'stateSlot' }, width: 100 },
+    { key: 'state', title: '状态', scopedSlots: { customRender: 'stateSlot' } },
     { key: 'createdAt', dataIndex: 'createdAt', title: '创建日期' },
     { key: 'op', title: '操作', width: '100px', fixed: 'right', align: 'center', scopedSlots: { customRender: 'opSlot' } }
   ]

jeepay-ui-manager/src/views/order/transfer/TransferOrderList.vue

@@ -60,8 +60,24 @@
         <template slot="orderSlot" slot-scope="{record}">
           <div class="order-list">
             <p><span style="color:#729ED5;background:#e7f5f7">转账</span>{{ record.transferId }}</p>
-            <p><span style="color:#56cf56;background:#d8eadf">商户</span>{{ record.mchOrderNo }}</p>
+            <p>
-            <p v-if="record.channelOrderNo"><span style="color:#fff;background:#E09C4D">渠道</span>{{ record.channelOrderNo }}</p>
+              <span style="color:#56cf56;background:#d8eadf">商户</span>
+              <a-tooltip placement="bottom" style="font-weight: normal;">
+                <template slot="title">
+                  <span>{{ record.mchOrderNo }}</span>
+                </template>
+                {{ record.mchOrderNo.length <= record.transferId.length ? record.mchOrderNo:record.mchOrderNo.substring(0, record.transferId.length) + "..." }}
+              </a-tooltip>
+            </p>
+            <p v-if="record.channelOrderNo">
+              <span style="color:#fff;background:#E09C4D">渠道</span>
+              <a-tooltip placement="bottom" style="font-weight: normal;">
+                <template slot="title">
+                  <span>{{ record.channelOrderNo }}</span>
+                </template>
+                {{ record.channelOrderNo.length <= record.transferId.length ? record.channelOrderNo:record.channelOrderNo.substring(0, record.transferId.length) + "..." }}
+              </a-tooltip>
+            </p>
           </div>
         </template>
         <template slot="opSlot" slot-scope="{record}">  <!-- 操作列插槽 -->

jeepay-ui-merchant/src/views/order/pay/PayOrderList.vue

@@ -70,6 +70,7 @@
         :scrollX="1000"
       >
         <template slot="amountSlot" slot-scope="{record}"><b>￥{{ record.amount/100 }}</b></template> <!-- 自定义插槽 -->
+        <template slot="refundAmountSlot" slot-scope="{record}">￥{{ record.refundAmount/100 }}</template> <!-- 自定义插槽 -->
         <template slot="stateSlot" slot-scope="{record}">
           <a-tag
             :key="record.state"
@@ -80,18 +81,34 @@
         </template>
 
         <template slot="divisionStateSlot" slot-scope="{record}">
-          <a-tag color="blue" v-if="record.divisionState == 0">未发生分账</a-tag>
+          <span color="blue" v-if="record.divisionState == 0">-</span>
-          <a-tag color="orange" v-else-if="record.divisionState == 1">待分账</a-tag>
+          <span color="orange" v-else-if="record.divisionState == 1">待分账</span>
-          <a-tag color="red" v-else-if="record.divisionState == 2">分账处理中</a-tag>
+          <span color="red" v-else-if="record.divisionState == 2">分账处理中</span>
-          <a-tag color="green" v-else-if="record.divisionState == 3">任务已结束</a-tag>
+          <span color="green" v-else-if="record.divisionState == 3">任务已结束</span>
-          <a-tag color="#f50" v-else>未知</a-tag>
+          <span color="#f50" v-else>未知</span>
         </template>
 
         <template slot="orderSlot" slot-scope="{record}">
           <div class="order-list">
             <p><span style="color:#729ED5;background:#e7f5f7">支付</span>{{ record.payOrderId }}</p>
-            <p><span style="color:#56cf56;background:#d8eadf">商户</span>{{ record.mchOrderNo }}</p>
+            <p>
-            <p v-if="record.channelOrderNo"><span style="color:#fff;background:#E09C4D">渠道</span>{{ record.channelOrderNo }}</p>
+              <span style="color:#56cf56;background:#d8eadf">商户</span>
+              <a-tooltip placement="bottom" style="font-weight: normal;">
+                <template slot="title">
+                  <span>{{ record.mchOrderNo }}</span>
+                </template>
+                {{ record.mchOrderNo.length <= record.payOrderId.length ? record.mchOrderNo:record.mchOrderNo.substring(0, record.payOrderId.length) + "..." }}
+              </a-tooltip>
+            </p>
+            <p v-if="record.channelOrderNo">
+              <span style="color:#fff;background:#E09C4D">渠道</span>
+              <a-tooltip placement="bottom" style="font-weight: normal;">
+                <template slot="title">
+                  <span>{{ record.channelOrderNo }}</span>
+                </template>
+                {{ record.channelOrderNo.length <= record.payOrderId.length ? record.channelOrderNo:record.channelOrderNo.substring(0, record.payOrderId.length) + "..." }}
+              </a-tooltip>
+            </p>
           </div>
         </template>
 
@@ -364,13 +381,14 @@ import moment from 'moment'
 // eslint-disable-next-line no-unused-vars
 const tableColumns = [
   { key: 'amount', title: '支付金额', scopedSlots: { customRender: 'amountSlot' } },
+  { key: 'refundAmount', title: '退款金额', scopedSlots: { customRender: 'refundAmountSlot' } },
   { key: 'mchFeeAmount', dataIndex: 'mchFeeAmount', title: '手续费', customRender: (text) => '￥' + (text / 100).toFixed(2) },
   { key: 'orderNo', title: '订单号', scopedSlots: { customRender: 'orderSlot' }, width: '260px' },
   // { key: 'payOrderId', title: '支付订单号', dataIndex: 'payOrderId' },
   // { key: 'mchOrderNo', title: '商户订单号', dataIndex: 'mchOrderNo' },
   { key: 'wayName', title: '支付方式', dataIndex: 'wayName', width: 150 },
   { key: 'state', title: '支付状态', scopedSlots: { customRender: 'stateSlot' } },
-  { key: 'divisionState', title: '分账状态', scopedSlots: { customRender: 'divisionStateSlot' } },
+  { key: 'divisionState', title: '分账状态', scopedSlots: { customRender: 'divisionStateSlot' }, align: 'center' },
   { key: 'createdAt', dataIndex: 'createdAt', title: '创建日期' },
   { key: 'op', title: '操作', width: '100px', fixed: 'right', align: 'center', scopedSlots: { customRender: 'opSlot' } }
 ]

jeepay-ui-merchant/src/views/order/refund/RefundOrderList.vue

@@ -65,14 +65,30 @@
         <template slot="payOrderSlot" slot-scope="{record}">
           <div class="order-list">
             <p><span style="color:#729ED5;background:#e7f5f7">支付</span>{{ record.payOrderId }}</p>
-            <p v-if="record.channelPayOrderNo"><span style="color:#fff;background:#E09C4D">渠道</span>{{ record.channelPayOrderNo }}</p>
+            <p v-if="record.channelPayOrderNo">
+              <span style="color:#fff;background:#E09C4D">渠道</span>
+              <a-tooltip placement="bottom" style="font-weight: normal;">
+                <template slot="title">
+                  <span>{{ record.channelPayOrderNo }}</span>
+                </template>
+                {{ record.channelPayOrderNo.length <= record.payOrderId.length ? record.channelPayOrderNo:record.channelPayOrderNo.substring(0, record.payOrderId.length) + "..." }}
+              </a-tooltip>
+            </p>
           </div>
         </template>
 
         <template slot="refundOrderSlot" slot-scope="{record}">
           <div class="order-list">
             <p><span style="color:#729ED5;background:#e7f5f7">退款</span>{{ record.refundOrderId }}</p>
-            <p><span style="color:#56cf56;background:#d8eadf">商户</span>{{ record.mchRefundNo }}</p>
+            <p>
+              <span style="color:#56cf56;background:#d8eadf">商户</span>
+              <a-tooltip placement="bottom" style="font-weight: normal;">
+                <template slot="title">
+                  <span>{{ record.mchRefundNo }}</span>
+                </template>
+                {{ record.mchRefundNo.length <= record.payOrderId.length ? record.mchRefundNo:record.mchRefundNo.substring(0, record.payOrderId.length) + "..." }}
+              </a-tooltip>
+            </p>
           </div>
         </template>
         <template slot="opSlot" slot-scope="{record}">  <!-- 操作列插槽 -->
@@ -305,7 +321,7 @@
     { key: 'payAmount', title: '支付金额', scopedSlots: { customRender: 'payAmountSlot' } },
     { key: 'refundAmount', title: '退款金额', scopedSlots: { customRender: 'refundAmountSlot' } },
     { key: 'pay', title: '退款订单号', scopedSlots: { customRender: 'refundOrderSlot' }, width: '260px' },
-    { key: 'refund', title: '支付订单号', scopedSlots: { customRender: 'payOrderSlot' }, width: '280px' },
+    { key: 'refund', title: '支付订单号', scopedSlots: { customRender: 'payOrderSlot' }, width: '260px' },
     // { key: 'refundOrderId', title: '退款订单号', dataIndex: 'refundOrderId' },
     // { key: 'mchRefundNo', title: '商户退款单号', dataIndex: 'mchRefundNo' },
     // { key: 'payOrderId', title: '支付订单号', dataIndex: 'payOrderId' },

jeepay-ui-merchant/src/views/order/transfer/TransferOrderList.vue

@@ -59,8 +59,24 @@
         <template slot="orderSlot" slot-scope="{record}">
           <div class="order-list">
             <p><span style="color:#729ED5;background:#e7f5f7">转账</span>{{ record.transferId }}</p>
-            <p><span style="color:#56cf56;background:#d8eadf">商户</span>{{ record.mchOrderNo }}</p>
+            <p>
-            <p v-if="record.channelOrderNo"><span style="color:#fff;background:#E09C4D">渠道</span>{{ record.channelOrderNo }}</p>
+              <span style="color:#56cf56;background:#d8eadf">商户</span>
+              <a-tooltip placement="bottom" style="font-weight: normal;">
+                <template slot="title">
+                  <span>{{ record.mchOrderNo }}</span>
+                </template>
+                {{ record.mchOrderNo.length <= record.transferId.length ? record.mchOrderNo:record.mchOrderNo.substring(0, record.transferId.length) + "..." }}
+              </a-tooltip>
+            </p>
+            <p v-if="record.channelOrderNo">
+              <span style="color:#fff;background:#E09C4D">渠道</span>
+              <a-tooltip placement="bottom" style="font-weight: normal;">
+                <template slot="title">
+                  <span>{{ record.channelOrderNo }}</span>
+                </template>
+                {{ record.channelOrderNo.length <= record.transferId.length ? record.channelOrderNo:record.channelOrderNo.substring(0, record.transferId.length) + "..." }}
+              </a-tooltip>
+            </p>
           </div>
         </template>
         <template slot="opSlot" slot-scope="{record}">  <!-- 操作列插槽 -->