任务列表-快递方式太多处理

src/views/outbound/picking/task/index.vue

@@ -31,7 +31,15 @@
             {{ ownerMap[row.owner] || row.owner }}
           </td>
           <td style="word-wrap: break-word;">{{ row.ruleName }}</td>
-          <td style="word-wrap: break-word;">{{ row.carrier }}</td>
+          <td style="word-wrap: break-word;">
+             <div v-if="row.carrier.split(',').length" @click="onMore(row)">
+                <div v-if="row.carrier.split(',').length > 5"  >
+                  <div>{{ row.carrier.split(',').slice(0, 5).join(',') }}</div>
+                  <div><van-icon name="eye-o" size="25" color="#1989fa" /></div>
+                </div>
+                <span v-else>{{ row.carrier }}</span>
+              </div>
+          </td>
           <td style="word-wrap: break-word;">{{ row.typeDescribe }}</td>
           <td>{{ row.count }}</td>
           <td>
@@ -58,18 +66,18 @@
           <van-checkbox-group  v-model="checkedResult" @change="checkedResultChange" >
             <van-checkbox class="order-item" v-for="(item,index) in taskDetailList" :key="index" :name="item">
               <div v-if="model.type=='*'" class="order-item-detail">
-                <div class="" style="width: 80px" ><van-notice-bar :background="'none'" :speed="50" color="#000" :text="item.carrierName" /></div>
+                <div class="" style="width: 80px" ><van-notice-bar :background="'none'" :speed="20" color="#000" :text="item.carrierName" /></div>
                 <div class="">{{item.residualOrderQty}}<span style="font-size: 12px">单</span></div>
                 <div @click.stop class="">
                   <van-stepper v-model="item.taskCount" :min="1" :max="item.residualOrderQty" input-width="50px"	theme="round"  button-size="30" />
                 </div>
               </div>
-              <div v-else  >
+              <div v-else style="display: flex;flex: 1;flex-direction: column" >
                 <div class="order-item-detail">
                   <div><span style="font-size: 12px">订单号:</span>{{ item.orderNo }}</div>
                   <div>{{item.itemQty}}<span style="font-size: 12px">件</span></div>
                 </div>
-                <div class="order-item-detail" v-if="item.remark!=='' && item.remark!=null"><van-notice-bar :background="'none'" style="font-size: 12px" :speed="50" :text="item.remark" /></div>
+                <div  v-if="item.remark!=='' && item.remark!=null"><van-notice-bar :background="'none'" style="font-size: 12px" :speed="20" :text="item.remark" /></div>
               </div>
             </van-checkbox>
           </van-checkbox-group>
@@ -116,7 +124,7 @@
 import { useRouter } from 'vue-router'
 import { getTaskList } from '@/views/outbound/picking/task/hooks/task'
 import { computed, ref } from 'vue'
-import { showToast } from 'vant'
+import { showDialog, showToast } from 'vant'
 import { basicStore } from '@/store/modules/basic'
 import { createPickingTask, getPickingTaskDetail } from '@/api/picking'
 import { useStore } from '@/store/modules/user'
@@ -126,6 +134,7 @@ import BigPicking from '@/views/outbound/components/BigPicking.vue'
 import SelectOwner from '@/views/outbound/components/SelectOwner.vue'
 import { closeLoading, showLoading } from '@/utils/loading'
 import { toMap } from '@/utils/dataType'
+import { getCarrierList } from '@/hooks/basic/carrier'
 
 const router = useRouter()
 const store = basicStore()
@@ -190,6 +199,10 @@ const onTaskList=async (row:Object,type)=>{
   showLoading()
   const { data }: pickingListResponse = await getPickingTaskDetail(params)
   closeLoading()
+  if(data.length==0){
+    showToast('任务已被获取，请刷新后重新查看！')
+    return
+  }
   if(model.value.type==='*'){
     data.forEach((item,index)=>{
       item.taskCount=item.residualOrderQty
@@ -333,6 +346,16 @@ const pickingNoInputRef=ref(null)
 const onClickRight = () => {
   pickingNoInputRef.value?.show()
 };
+//查看更多承运人
+const onMore= async (row)=>{
+  const carrierArray = row.carrier.split(',').map(code => store.carrierMap[code] || code)
+  showDialog({
+    title: `${ownerMap.value[row.owner]?ownerMap.value[row.owner]:row.owner}`+`《${row.typeDescribe}》承运商`,
+    message: carrierArray.join(','),
+  }).then(() => {
+    // on close
+  });
+}
 //选择货主
 const selectOwnerRef=ref(null)
 const onClickRightIcon = () => {
@@ -401,9 +424,12 @@ const onRefresh = () => {
   overflow: scroll
   .order-item
     padding: 5px 0
+    ::v-deep .van-checkbox__label
+      display: flex
+      flex: 1
     .order-item-detail
-      width: 260px
       display: flex
+      flex: 1
       align-items: center
       justify-content: space-between
 .all-count
@@ -418,9 +444,12 @@ const onRefresh = () => {
   flex-wrap: wrap
   padding: 10px 20px
   font-size: 12px
+  max-height: 120px
+  overflow: auto
   .tips-item
     width: 50%
     text-align: left
+    word-break: break-word
 .count-input
   border-bottom: 2px solid #0077ff
 </style>