ll

liukangdong

2025-02-27 88a34566f7c3f77d90daa3fd57fb0abca3e1b5e6

 pda/pages/index/queueup.vue

@@ -1,8 +1,9 @@
<template>
  <view class="main_app">
    <view class="main_content">
      <view class="title"
        >安泰物流装货平台<u-icon
      <view class="title" @click="showPlatformgroup = true"
        >{{ platformGroup.name
        }}<u-icon
          name="arrow-down"
          size="20"
          class="ml12"
@@ -12,89 +13,215 @@
      <view class="input_wrap">
        <u-icon name="search" class="mr12" size="19" color="#999999" />
        <input
          v-model="carCodeFront"
          type="text"
          placeholder="搜索车辆牌照"
          placeholder-class="placeholder9"
          @confirm="handleQuery"
        />
      </view>
      <view class="count"
        >已签到车辆：<text>{{ 10 }}</text></view
        >总排队车辆：<text>{{ total }}</text></view
      >
    </view>
    <!--  -->
    <div class="dataList">
      <div class="item">
    <view class="dataList">
      <view class="item" v-for="item in platformLineUpList" :key="item.id">
        <view class="head">
          <view class="code">
            <text>皖</text>
            <text>AD1212</text>
          <view v-if="item.carCodeFront" class="code">
            <text>{{ item.carCodeFront.slice(0, 1) }}</text>
            <text>{{ item.carCodeFront.slice(1, 2) }}</text>
            <text>·</text>
            <text>{{ item.carCodeFront.slice(2) }}</text>
          </view>
          <view class="status">签到时间：{{ 11 }}</view>
          <view class="status" v-if="item.signDate"
            >签到时间：{{ item.signDate.slice(11, 16) }}</view
          >
        </view>
        <view class="line">
        <view class="line" v-if="item.billCode">
          <text class="label">运输单号</text>
          <text class="value">11111</text>
          <text class="primaryColor" @click="handleDetail()">运单详情</text>
          <text class="value">{{ item.billCode }}</text>
          <text class="primaryColor" @click="handleDetail(item)">运单详情</text>
        </view>
        <view class="line" v-else>
          <text class="label">合同单号</text>
          <text class="value">{{ item.contractNum }}</text>
               <text class="primaryColor" @click="subDetail(item)">预约详情</text>
        </view>
            <view class="line line2" v-if="item.billCode && item.wmsContractNum">
               <text class="label">合同单号</text>
               <text class="value">{{ item.wmsContractNum }}</text>
            </view>
        <view class="line">
          <text class="label">驾驶员</text>
          <text class="value">11111</text>
          <text class="value"
            >{{ item.driverName }} {{ item.drivierPhone }}</text
          >
        </view>
        <view class="line">
          <text class="label">总运输量</text>
          <text class="value">11111</text>
          <text class="value">{{ item.totalNum || item.ioQty }}万支</text>
        </view>
        <view class="line">
        <view class="line" v-if="item.carrierName">
          <text class="label">运输公司</text>
          <text class="value">11111</text>
          <text class="value">{{ item.carrierName }}</text>
        </view>
        <view class="btns">
        <!-- <view class="btns">
          <view class="btn active">入园</view>
        </view>
      </div>
    </div>
        </view> -->
      </view>
      <view v-if="platformLineUpList.length == 0" class="empty_wrap">
        <image src="@/static/default_nodata@2x.png" />
        <text>暂无作业车辆</text>
      </view>
    </view>
      <u-popup :show="showDetail" :round="10" :safeAreaInsetBottom="true" closeOnClickOverlay :closeable="true"
         mode="bottom" @close="showDetail = false">
         <view class="detail_modal">
            <view class="modal_title">运单详情</view>
            <view v-if="wmsInfo.plateNumber" class="id_card">
               <text>{{ wmsInfo.plateNumber.slice(0, 1) }}</text>
               <text>{{ wmsInfo.plateNumber.slice(1, 2) }}</text>
               <text>·</text>
               <text>{{ wmsInfo.plateNumber.slice(2) }}</text>
            </view>
            <!--  -->
            <view class="info">
               <view class="line">
                  <view class="label">运输单号</view>
                  <view class="value">{{ wmsInfo.carryBillCode }}</view>
               </view>
               <view class="line">
                  <view class="label">驾驶员</view>
                  <view class="value">{{ wmsInfo.driverName }} {{ wmsInfo.driverPhone }}</view>
               </view>
               <view class="line">
                  <view class="label">总运输量</view>
                  <view class="value">{{ wmsInfo.ioQty }}万支</view>
               </view>
               <view class="line">
                  <view class="label">运输公司</view>
                  <view class="value">{{ wmsInfo.carrierName }}</view>
               </view>
            </view>
            <!-- <view class="separate"></view> -->
            <view class="contract_wrap">
               <view class="contract_list" v-for="item in wmsInfo.wmsJobContractVOList">
                  <view class="title">合同号：{{ item.contractCode }}</view>
                  <view class="address">收货地：{{ item.address }}</view>
                  <view class="list">
                     <view class="item" v-for="line in item.platformWmsDetailList">
                        <view class="line">
                           <view class="label">物料：</view>
                           <view class="value">{{ line.materialName }}</view>
                        </view>
                        <view class="line">
                           <view class="label">数量：</view>
                           <view class="value">{{ line.ioQty }}万支</view>
                        </view>
                     </view>
                  </view>
               </view>
            </view>
         </view>
      </u-popup>
      <u-picker
      :show="showPlatformgroup"
      keyName="name"
      :columns="[platformGroupList]"
      @cancel="showPlatformgroup = false"
      @confirm="platConfirm"
    ></u-picker>
  </view>
</template>

<script>
   import { platformLineUpPage, getPlatformGroupList } from '@/api'
import { platformLineUpPage, getPlatformGroupList, wmsJobDetail } from '@/api'
export default {
  data() {
    return {
         windowTop: 24,
      showDetail: false,
         capacity: 10,
         page: 1,
         platformGroupId: '',
         platformGroupList: []
      showPlatformgroup: false,
      capacity: 10,
      page: 1,
      total: 0,
      carCodeFront: '',
      platformGroup: {},
      wmsInfo: {},
      platformGroupList: [],
      platformLineUpList: []
    }
  },
  onLoad() {
      this.getPlatformGroup()
      this.initData()
    this.getPlatformGroup()
  },
   onReachBottom() {
      if(this.total > this.platformLineUpList.length){
         this.getList()
      }
   },
  methods: {
    handleDetail() {
      this.showDetail = true
    handleDetail(param) {
      wmsJobDetail({ id: param.id }).then(res => {
         this.wmsInfo = res.data
         this.showDetail = true
      })
    },
      getPlatformGroup() {
         getPlatformGroupList().then(res => {
				
      subDetail(item) {
         uni.navigateTo({
           url: `/pages/index/SubDetail?id=${item.bookId}`
         })
      },
      initData(){
         const { page, capacity } = this
         platformLineUpPage({
            capacity, page, model: {}
         })
      }
    getPlatformGroup() {
      getPlatformGroupList({
        queryData: 1,
        queryType: 0
      }).then(res => {
        this.platformGroupList = res.data || []
        if (this.platformGroupList && this.platformGroupList.length > 0) {
          this.platformGroup = this.platformGroupList[0]
          this.getList()
        }
      })
    },
    getList() {
      const { page, capacity, platformGroup, carCodeFront } = this
      platformLineUpPage({
        capacity, page, model: { platformGroupId: platformGroup.id, callType: 3, carCodeFront }
      }).then(res => {
        if (res.data) {
          this.platformLineUpList = [...this.platformLineUpList, ...res.data.records || []]
               this.platformLineUpList.forEach(item => {
                  if(item.wmsContractNum){
                     item.wmsContractNum = item.wmsContractNum.split(',').join('，')
                  }
               })
          this.total = res.data.total || 0
        }
      })
    },
    handleQuery() {
      this.page = 1
      this.platformLineUpList = []
      this.getList()
    },
    platConfirm(e) {
      const index = e.indexs[0]
      this.platformGroup = this.platformGroupList[index]
         this.platformLineUpList = []
      this.getList()
      this.showPlatformgroup = false
    },
  }
}
</script>
<style lang="scss">
   page{
      background: #f7f7f7;
   }
.main_app {
  padding: 30rpx 0 0rpx;
  min-height: 100vh;
  background: #f7f7f7;
  .main_content {
    background-color: #fff;
    padding: 30rpx 30rpx 0;
@@ -143,18 +270,30 @@
        align-items: center;
        margin-bottom: 30rpx;
        .code {
          display: flex;
          font-weight: 600;
          height: 60rpx;
          line-height: 60rpx;
               height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 32rpx;
          color: #111111;
          border-radius: 8rpx;
          border: 1rpx solid #dfdede;
          text {
            padding: 0 12rpx;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  height: 100%;
            &:nth-of-type(1) {
              background: #e9f5f6;
              padding: 0 12rpx;
            }
            &:nth-of-type(2) {
              padding-left: 4rpx;
            }
            &:nth-of-type(4) {
              padding-right: 6rpx;
            }
          }
        }
@@ -168,6 +307,7 @@
        margin-bottom: 20rpx;
        .label {
          width: 144rpx;
               flex-shrink: 0;
          color: #666666;
        }
        .value {
@@ -180,8 +320,9 @@
        .btn {
          width: 136rpx;
          height: 64rpx;
          line-height: 64rpx;
          text-align: center;
          display: flex;
               justify-content: center;
               align-items: center;
          background: #ffffff;
          border-radius: 40rpx;
          border: 1rpx solid #999999;
@@ -196,4 +337,132 @@
    }
  }
}
.detail_modal {
      height: 100vh;
      padding: 36rpx 30rpx;
      border-radius: 12rpx;
      box-shadow: 0 0 6rpx rgba(0, 0, 0, 0.5);
      .modal_title {
         font-weight: 600;
         font-size: 32rpx;
         color: #222222;
         line-height: 44rpx;
         text-align: center;
         margin-bottom: 36rpx;
      }
      .contract_wrap{
         height: calc( 100% - 400rpx );
         overflow-y: auto;
      }
      .contract_list {
         border-top: 1rpx solid #E5E5E5;
         margin-bottom: 30rpx;
         padding-top: 30rpx;
         &:nth-last-child(1){
            margin-bottom: 0;
         }
         .list {
            background: #f7f7f7;
            border-radius: 8rpx;
            padding: 20rpx;
            .item{
               border-bottom: 1rpx solid #e5e5e5;
               padding-bottom: 20rpx;
               margin-bottom: 20rpx;
               &:nth-last-child(1){
                  border: none;
                  padding-bottom: 0;
                  margin-bottom: 0;
               }
            }
            .line {
               display: flex;
               margin-bottom: 20rpx;
               &:nth-last-child(1){
                  margin-bottom: 0rpx;
               }
               .label {
                  color: #666666;
                  width: 92rpx;
               }

               .value {
                  flex: 1;
                  color: #222222;
               }
            }
         }

         .title {
            font-weight: 600;
            font-size: 30rpx;
            color: $uni-color-primary;
            margin-bottom: 12rpx;
         }

         .address {
            font-size: 26rpx;
            color: #666666;
            margin-bottom: 20rpx;
         }
      }

      .info {
         .line {
            display: flex;
            margin-bottom: 20rpx;

            .label {
               font-size: 30rpx;
               color: #666666;
               width: 150rpx;
            }

            .value {
               flex: 1;
               font-size: 30rpx;
               color: #222222;
            }
         }
      }

      .separate {
         width: 750rpx;
         height: 2rpx;
         margin: 30rpx -30rpx;
         border: 1rpx solid #e5e5e5;
      }

      .id_card {
         display: flex;
         font-weight: 600;
         height: 60rpx;
         line-height: 60rpx;
         font-size: 32rpx;
         color: #111111;
         border-radius: 8rpx;
         border: 1rpx solid #dfdede;
         width: 220rpx;
         margin-bottom: 15rpx;

         text {
            &:nth-of-type(1) {
               background: #e9f5f6;
               padding: 0 12rpx;
            }

            &:nth-of-type(2) {
               padding-left: 10rpx;
            }

            &:nth-of-type(4) {
               padding-right: 6rpx;
            }
         }
      }
   }
   .line2{
      margin-right: -30rpx;
      padding-right: 0;
   }
</style>