订单列表显示优化

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

@@ -20,6 +20,14 @@
             <jeepay-text-up :placeholder="'商户号'" :msg="searchData.mchNo" v-model="searchData.mchNo" />
             <jeepay-text-up :placeholder="'服务商号'" :msg="searchData.isvNo" v-model="searchData.isvNo" />
             <jeepay-text-up :placeholder="'应用AppId'" :msg="searchData.appId" v-model="searchData.appId"/>
+            <a-form-item v-if="$access('ENT_PAY_ORDER_SEARCH_PAY_WAY')" label="" class="table-head-layout">
+              <a-select v-model="searchData.wayCode" placeholder="支付方式" default-value="">
+                <a-select-option value="">全部</a-select-option>
+                <a-select-option :key="item.wayCode" v-for="item in payWayList" :value="item.wayCode">
+                  {{ item.wayName }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
             <a-form-item label="" class="table-head-layout">
               <a-select v-model="searchData.state" placeholder="支付状态" default-value="">
                 <a-select-option value="">全部</a-select-option>
@@ -39,14 +47,6 @@
                 <a-select-option value="1">已发送</a-select-option>
               </a-select>
             </a-form-item>
-            <a-form-item v-if="$access('ENT_PAY_ORDER_SEARCH_PAY_WAY')" label="" class="table-head-layout">
-              <a-select v-model="searchData.wayCode" placeholder="支付方式" default-value="">
-                <a-select-option value="">全部</a-select-option>
-                <a-select-option :key="item.wayCode" v-for="item in payWayList" :value="item.wayCode">
-                  {{ item.wayName }}
-                </a-select-option>
-              </a-select>
-            </a-form-item>
             <a-form-item label="" class="table-head-layout">
               <a-select v-model="searchData.divisionState" placeholder="分账状态" default-value="">
                 <a-select-option value="">全部</a-select-option>
@@ -87,11 +87,11 @@
           </a-tag>
         </template>
         <template slot="divisionStateSlot" slot-scope="{record}">
-          <span color="blue" v-if="record.divisionState == 0"> - </span>
-          <span color="orange" v-else-if="record.divisionState == 1">待分账</span>
-          <span color="red" v-else-if="record.divisionState == 2">分账处理中</span>
-          <span color="green" v-else-if="record.divisionState == 3">任务已结束</span>
-          <span color="#f50" v-else>未知</span>
+          <span v-if="record.divisionState == 0"> - </span>
+          <a-tag color="orange" v-else-if="record.divisionState == 1">待分账</a-tag>
+          <a-tag color="red" v-else-if="record.divisionState == 2">分账处理中</a-tag>
+          <a-tag color="green" v-else-if="record.divisionState == 3">任务已结束</a-tag>
+          <span v-else>未知</span>
         </template>
         <template slot="notifySlot" slot-scope="{record}">
           <a-badge :status="record.notifyState === 1?'processing':'error'" :text="record.notifyState === 1?'已发送':'未发送'" />
@@ -101,21 +101,23 @@
             <p><span style="color:#729ED5;background:#e7f5f7">支付</span>{{ record.payOrderId }}</p>
             <p style="margin-bottom: 0">
               <span style="color:#56cf56;background:#d8eadf">商户</span>
-              <a-tooltip placement="bottom" style="font-weight: normal;">
+              <a-tooltip placement="bottom" style="font-weight: normal;" v-if="record.mchOrderNo.length > record.payOrderId.length">
                 <template slot="title">
                   <span>{{ record.mchOrderNo }}</span>
                 </template>
-                {{ record.mchOrderNo.length <= record.payOrderId.length ? record.mchOrderNo:record.mchOrderNo.substring(0, record.payOrderId.length) + "..." }}
+                {{ changeStr2ellipsis(record.mchOrderNo, record.payOrderId.length) }}
               </a-tooltip>
+              <span style="font-weight: normal;" v-else>{{ record.mchOrderNo }}</span>
             </p>
             <p v-if="record.channelOrderNo" style="margin-bottom: 0;margin-top: 10px">
               <span style="color:#fff;background:#E09C4D;">渠道</span>
-              <a-tooltip placement="bottom" style="font-weight: normal;">
+              <a-tooltip placement="bottom" style="font-weight: normal;" v-if="record.channelOrderNo.length > record.payOrderId.length">
                 <template slot="title">
                   <span>{{ record.channelOrderNo }}</span>
                 </template>
-                {{ record.channelOrderNo.length <= record.payOrderId.length ? record.channelOrderNo:record.channelOrderNo.substring(0, record.payOrderId.length) + "..." }}
+                {{ changeStr2ellipsis(record.channelOrderNo, record.payOrderId.length) }}
               </a-tooltip>
+              <span style="font-weight: normal;" v-else>{{ record.channelOrderNo }}</span>
             </p>
           </div>
         </template>
@@ -491,6 +493,10 @@ export default {
       req.list(API_URL_PAYWAYS_LIST, { 'pageSize': -1 }).then(res => { // 支付方式下拉列表
         that.payWayList = res.records
       })
+    },
+    changeStr2ellipsis (orderNo, baseLength) {
+      const halfLengh = parseInt(baseLength / 2)
+      return orderNo.substring(0, halfLengh - 1) + '...' + orderNo.substring(orderNo.length - halfLengh, orderNo.length)
     }
   }
 }

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

@@ -75,12 +75,13 @@
             <p><span style="color:#729ED5;background:#e7f5f7">支付</span>{{ record.payOrderId }}</p>
             <p v-if="record.channelPayOrderNo" style="margin-bottom: 0;">
               <span style="color:#fff;background:#E09C4D">渠道</span>
-              <a-tooltip placement="bottom" style="font-weight: normal;">
+              <a-tooltip placement="bottom" style="font-weight: normal;" v-if="record.channelPayOrderNo.length > record.payOrderId.length">
                 <template slot="title">
                   <span>{{ record.channelPayOrderNo }}</span>
                 </template>
-                {{ record.channelPayOrderNo.length <= record.payOrderId.length ? record.channelPayOrderNo:record.channelPayOrderNo.substring(0, record.payOrderId.length) + "..." }}
+                {{ changeStr2ellipsis(record.channelPayOrderNo, record.payOrderId.length) }}
               </a-tooltip>
+              <span style="font-weight: normal;" v-else>{{ record.channelPayOrderNo }}</span>
             </p>
           </div>
         </template>
@@ -90,12 +91,13 @@
             <p><span style="color:#729ED5;background:#e7f5f7">退款</span>{{ record.refundOrderId }}</p>
             <p style="margin-bottom: 0;">
               <span style="color:#56cf56;background:#d8eadf">商户</span>
-              <a-tooltip placement="bottom" style="font-weight: normal;">
+              <a-tooltip placement="bottom" style="font-weight: normal;" v-if="record.mchRefundNo.length > record.payOrderId.length">
                 <template slot="title">
                   <span>{{ record.mchRefundNo }}</span>
                 </template>
-                {{ record.mchRefundNo.length <= record.payOrderId.length ? record.mchRefundNo:record.mchRefundNo.substring(0, record.payOrderId.length) + "..." }}
+                {{ changeStr2ellipsis(record.mchRefundNo, record.refundOrderId.length) }}
               </a-tooltip>
+              <span style="font-weight: normal;" v-else>{{ record.mchRefundNo }}</span>
             </p>
           </div>
         </template>
@@ -397,6 +399,10 @@
       },
       onClose () {
         this.visible = false
+      },
+      changeStr2ellipsis (orderNo, baseLength) {
+        const halfLengh = parseInt(baseLength / 2)
+        return orderNo.substring(0, halfLengh - 1) + '...' + orderNo.substring(orderNo.length - halfLengh, orderNo.length)
       }
     }
   }

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

@@ -63,21 +63,23 @@
             <p><span style="color:#729ED5;background:#e7f5f7">转账</span>{{ record.transferId }}</p>
             <p style="margin-bottom: 0;">
               <span style="color:#56cf56;background:#d8eadf">商户</span>
-              <a-tooltip placement="bottom" style="font-weight: normal;">
+              <a-tooltip placement="bottom" style="font-weight: normal;" v-if="record.mchOrderNo.length > record.transferId.length">
                 <template slot="title">
                   <span>{{ record.mchOrderNo }}</span>
                 </template>
-                {{ record.mchOrderNo.length <= record.transferId.length ? record.mchOrderNo:record.mchOrderNo.substring(0, record.transferId.length) + "..." }}
+                {{ changeStr2ellipsis(record.mchOrderNo, record.transferId.length) }}
               </a-tooltip>
+              <span style="font-weight: normal;" v-else>{{ record.mchOrderNo }}</span>
             </p>
             <p v-if="record.channelOrderNo" style="margin-bottom: 0;margin-top: 10px">
               <span style="color:#fff;background:#E09C4D">渠道</span>
-              <a-tooltip placement="bottom" style="font-weight: normal;">
+              <a-tooltip placement="bottom" style="font-weight: normal;" v-if="record.channelOrderNo.length > record.transferId.length">
                 <template slot="title">
                   <span>{{ record.channelOrderNo }}</span>
                 </template>
-                {{ record.channelOrderNo.length <= record.transferId.length ? record.channelOrderNo:record.channelOrderNo.substring(0, record.transferId.length) + "..." }}
+                {{ changeStr2ellipsis(record.channelOrderNo, record.transferId.length) }}
               </a-tooltip>
+              <span style="font-weight: normal;" v-else>{{ record.channelOrderNo }}</span>
             </p>
           </div>
         </template>
@@ -152,6 +154,10 @@
       },
       disabledDate (current) { // 今日之后日期不可选
         return current && current > moment().endOf('day')
+      },
+      changeStr2ellipsis (orderNo, baseLength) {
+        const halfLengh = parseInt(baseLength / 2)
+        return orderNo.substring(0, halfLengh - 1) + '...' + orderNo.substring(orderNo.length - halfLengh, orderNo.length)
       }
     }
   }

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

@@ -18,6 +18,14 @@
 <!--            <jeepay-text-up :placeholder="'支付订单号'" :msg="searchData.payOrderId" v-model="searchData.payOrderId" />-->
 <!--            <jeepay-text-up :placeholder="'商户订单号'" :msg="searchData.mchOrderNo" v-model="searchData.mchOrderNo" />-->
             <jeepay-text-up :placeholder="'应用AppId'" :msg="searchData.appId" v-model="searchData.appId"/>
+            <a-form-item v-if="$access('ENT_PAY_ORDER_SEARCH_PAY_WAY')" label="" class="table-head-layout">
+              <a-select v-model="searchData.wayCode" placeholder="支付方式" default-value="">
+                <a-select-option value="">全部</a-select-option>
+                <a-select-option :key="item.wayCode" v-for="item in payWayList" :value="item.wayCode">
+                  {{ item.wayName }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
             <a-form-item label="" class="table-head-layout">
               <a-select v-model="searchData.state" placeholder="支付状态" default-value="">
                 <a-select-option value="">全部</a-select-option>
@@ -31,15 +39,6 @@
               </a-select>
             </a-form-item>
 
-            <a-form-item v-if="$access('ENT_PAY_ORDER_SEARCH_PAY_WAY')" label="" class="table-head-layout">
-              <a-select v-model="searchData.wayCode" placeholder="支付方式" default-value="">
-                <a-select-option value="">全部</a-select-option>
-                <a-select-option :key="item.wayCode" v-for="item in payWayList" :value="item.wayCode">
-                  {{ item.wayName }}
-                </a-select-option>
-              </a-select>
-            </a-form-item>
-
             <a-form-item label="" class="table-head-layout">
               <a-select v-model="searchData.divisionState" placeholder="分账状态" default-value="">
                 <a-select-option value="">全部</a-select-option>
@@ -82,11 +81,11 @@
         </template>
 
         <template slot="divisionStateSlot" slot-scope="{record}">
-          <span color="blue" v-if="record.divisionState == 0">-</span>
-          <span color="orange" v-else-if="record.divisionState == 1">待分账</span>
-          <span color="red" v-else-if="record.divisionState == 2">分账处理中</span>
-          <span color="green" v-else-if="record.divisionState == 3">任务已结束</span>
-          <span color="#f50" v-else>未知</span>
+          <span v-if="record.divisionState == 0">-</span>
+          <a-tag color="orange" v-else-if="record.divisionState == 1">待分账</a-tag>
+          <a-tag color="red" v-else-if="record.divisionState == 2">分账处理中</a-tag>
+          <a-tag color="green" v-else-if="record.divisionState == 3">任务已结束</a-tag>
+          <span v-else>未知</span>
         </template>
 
         <template slot="orderSlot" slot-scope="{record}">
@@ -94,21 +93,23 @@
             <p><span style="color:#729ED5;background:#e7f5f7">支付</span>{{ record.payOrderId }}</p>
             <p style="margin-bottom: 0">
               <span style="color:#56cf56;background:#d8eadf">商户</span>
-              <a-tooltip placement="bottom" style="font-weight: normal;">
+              <a-tooltip placement="bottom" style="font-weight: normal;" v-if="record.mchOrderNo.length > record.payOrderId.length">
                 <template slot="title">
                   <span>{{ record.mchOrderNo }}</span>
                 </template>
-                {{ record.mchOrderNo.length <= record.payOrderId.length ? record.mchOrderNo:record.mchOrderNo.substring(0, record.payOrderId.length) + "..." }}
+                {{ changeStr2ellipsis(record.mchOrderNo, record.payOrderId.length) }}
               </a-tooltip>
+              <span style="font-weight: normal;" v-else>{{ record.mchOrderNo }}</span>
             </p>
             <p v-if="record.channelOrderNo" style="margin-bottom: 0;margin-top: 10px">
               <span style="color:#fff;background:#E09C4D">渠道</span>
-              <a-tooltip placement="bottom" style="font-weight: normal;">
+              <a-tooltip placement="bottom" style="font-weight: normal;" v-if="record.channelOrderNo.length > record.payOrderId.length">
                 <template slot="title">
                   <span>{{ record.channelOrderNo }}</span>
                 </template>
-                {{ record.channelOrderNo.length <= record.payOrderId.length ? record.channelOrderNo:record.channelOrderNo.substring(0, record.payOrderId.length) + "..." }}
+                {{ changeStr2ellipsis(record.channelOrderNo, record.payOrderId.length) }}
               </a-tooltip>
+              <span style="font-weight: normal;" v-else>{{ record.channelOrderNo }}</span>
             </p>
           </div>
         </template>
@@ -458,6 +459,10 @@ export default {
       req.list(API_URL_PAYWAYS_LIST, { 'pageSize': -1 }).then(res => { // 支付方式下拉列表
         that.payWayList = res.records
       })
+    },
+    changeStr2ellipsis (orderNo, baseLength) {
+      const halfLengh = parseInt(baseLength / 2)
+      return orderNo.substring(0, halfLengh - 1) + '...' + orderNo.substring(orderNo.length - halfLengh, orderNo.length)
     }
   }
 }

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

@@ -68,12 +68,13 @@
             <p><span style="color:#729ED5;background:#e7f5f7">支付</span>{{ record.payOrderId }}</p>
             <p v-if="record.channelPayOrderNo" style="margin-bottom: 0;">
               <span style="color:#fff;background:#E09C4D">渠道</span>
-              <a-tooltip placement="bottom" style="font-weight: normal;">
+              <a-tooltip placement="bottom" style="font-weight: normal;" v-if="record.channelPayOrderNo.length > record.payOrderId.length">
                 <template slot="title">
                   <span>{{ record.channelPayOrderNo }}</span>
                 </template>
-                {{ record.channelPayOrderNo.length <= record.payOrderId.length ? record.channelPayOrderNo:record.channelPayOrderNo.substring(0, record.payOrderId.length) + "..." }}
+                {{ changeStr2ellipsis(record.channelPayOrderNo, record.payOrderId.length) }}
               </a-tooltip>
+              <span style="font-weight: normal;" v-else>{{ record.channelPayOrderNo }}</span>
             </p>
           </div>
         </template>
@@ -83,12 +84,13 @@
             <p><span style="color:#729ED5;background:#e7f5f7">退款</span>{{ record.refundOrderId }}</p>
             <p style="margin-bottom: 0;">
               <span style="color:#56cf56;background:#d8eadf">商户</span>
-              <a-tooltip placement="bottom" style="font-weight: normal;">
+              <a-tooltip placement="bottom" style="font-weight: normal;" v-if="record.mchRefundNo.length > record.refundOrderId.length">
                 <template slot="title">
                   <span>{{ record.mchRefundNo }}</span>
                 </template>
-                {{ record.mchRefundNo.length <= record.payOrderId.length ? record.mchRefundNo:record.mchRefundNo.substring(0, record.payOrderId.length) + "..." }}
+                {{ changeStr2ellipsis(record.mchRefundNo, record.refundOrderId.length) }}
               </a-tooltip>
+              <span style="font-weight: normal;" v-else>{{ record.mchRefundNo }}</span>
             </p>
           </div>
         </template>
@@ -379,6 +381,10 @@
       },
       onClose () {
         this.visible = false
+      },
+      changeStr2ellipsis (orderNo, baseLength) {
+        const halfLengh = parseInt(baseLength / 2)
+        return orderNo.substring(0, halfLengh - 1) + '...' + orderNo.substring(orderNo.length - halfLengh, orderNo.length)
       }
     }
   }

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

@@ -62,21 +62,23 @@
             <p><span style="color:#729ED5;background:#e7f5f7">转账</span>{{ record.transferId }}</p>
             <p style="margin-bottom: 0">
               <span style="color:#56cf56;background:#d8eadf">商户</span>
-              <a-tooltip placement="bottom" style="font-weight: normal;">
+              <a-tooltip v-if="record.mchOrderNo.length > record.transferId.length" 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) + "..." }}
+                {{ changeStr2ellipsis(record.mchOrderNo, record.transferId.length) }}
               </a-tooltip>
+              <span style="font-weight: normal;" v-else>{{ record.mchOrderNo }}</span>
             </p>
             <p v-if="record.channelOrderNo" style="margin-bottom: 0;margin-top: 10px">
               <span style="color:#fff;background:#E09C4D">渠道</span>
-              <a-tooltip placement="bottom" style="font-weight: normal;">
+              <a-tooltip v-if="record.channelOrderNo.length > record.transferId.length" 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) + "..." }}
+                {{ changeStr2ellipsis(record.channelOrderNo, record.transferId.length) }}
               </a-tooltip>
+              <span style="font-weight: normal;" v-else>{{ record.channelOrderNo }}</span>
             </p>
           </div>
         </template>
@@ -150,6 +152,10 @@
       },
       disabledDate (current) { // 今日之后日期不可选
         return current && current > moment().endOf('day')
+      },
+      changeStr2ellipsis (orderNo, baseLength) {
+        const halfLengh = parseInt(baseLength / 2)
+        return orderNo.substring(0, halfLengh - 1) + '...' + orderNo.substring(orderNo.length - halfLengh, orderNo.length)
       }
     }
   }