更新

MrShi

2025-03-12 69a1b3bf45738f048361ee4ccb6bdc64fce35720

 admin/src/views/platform/components/WaybillDetail.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,204 @@
<template>
  <GlobalWindow title="运单详情" center :visible.sync="isShowModal" width="800px" :confirm-working="subLoading"
    @confirm="isShowModal = false">
    <div class="detail_modal">
      <div class="head">
        <div class="plate" v-if="info.plateNumber">
          <span>{{ info.plateNumber.slice(0, 1) }}</span>
          <span>{{ info.plateNumber.slice(1, 2) }}</span>
          <span>·</span>
          <span>{{ info.plateNumber.slice(2) }}</span>
        </div>
        <div class="list">
          <div class="item">
            <span>运输单号：</span>
            <span>{{ info.carryBillCode }}</span>
          </div>
          <div class="item">
            <span>总运输量：</span>
            <span>{{ info.ioQty || info.totalNum }}万支</span>
          </div>
          <div class="item">
            <span>驾驶员：</span>
            <span>{{ info.driverName }} {{ info.driverPhone }}</span>
          </div>
        </div>
      </div>
      <div class="title">合同列表</div>
      <div class="content">
        <div class="item" v-for="item in info.wmsJobContractVOList">
          <div class="contract">
            <span>合同号：{{ item.contractCode }}</span>
            <!-- <div> -->
              <span class="scs" v-if="item.status == 1">WMS作业已完成</span>
              <span class="pad" v-if="item.status == 0">WMS作业未完成</span>
              <span class="err" v-if="item.status == 2">WMS作业已取消</span>

              <span class="scs" v-if="item.lockStatus == 1">电子锁已上锁</span>
              <span class="pad" v-if="item.lockStatus == 0">电子锁未上锁</span>
            <!-- </div> -->
          </div>
          <div class="placeholder6">收货地：{{ item.address }}</div>
          <div class="list">
            <div class="line" v-for="line in item.platformWmsDetailList">
              <div class="left"><span>物料名称：</span><span>{{ line.materialName }}</span></div>
              <div class="right"><span>数量：</span><span>{{ line.ioQty }}万支</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </GlobalWindow>
</template>

<script>
import GlobalWindow from '@/components/common/GlobalWindow'
import { platformWmsJobDetail } from '@/api'
export default {
  components: {
    GlobalWindow
  },
  data() {
    return {
      isShowModal: false,
      subLoading: false,
      info: {},
      id: ''

    }
  },
  methods: {
    getDetail() {
      const { id } = this
      platformWmsJobDetail(id).then(res => {
        this.info = res
      })
    }
  }

}
</script>

<style lang="scss" scoped>
@import "@/assets/style/variables.scss";

.detail_modal {
  font-size: 12px;
  color: #282828;

  .head {
    background: rgba(39, 155, 170, 0.05);
    border-radius: 4px;
    border: 1px solid #dfe2e8;
    padding: 16px;

    .plate {
      display: flex;
      font-weight: 600;
      height: 30px;
      line-height: 30px;
      font-size: 15px;
      color: #111111;
      background-color: #fff;
      border-radius: 4px;
      border: 1px solid $primaryColor;
      padding-right: 4px;
      width:106px;
      span {
        &:nth-of-type(1) {
          background: $primaryColor;
          padding: 0 8px;
          color: #fff;
        }

        &:nth-of-type(2) {
          padding-left: 4px;
        }
      }
    }

    .list {
      display: flex;
      flex-wrap: wrap;
      margin-top: 16px;

      .item {
        width: 50%;
        margin-bottom: 8px;

        span {
          &:nth-child(1) {
            color: #666666;
          }
        }
      }
    }
  }

  .title {
    margin: 16px 0;
    font-weight: 500;
    font-size: 16px;
    color: #222222;
  }

  .content {
    .item {
      border-radius: 4px;
      border: 1px solid #dfe2e8;
      padding: 16px;
      margin-bottom: 10px;

      .list {
        background: #f7f7f7;
        border-radius: 4px;
        padding: 12px 16px;
        margin-top: 10px;
      }

      .contract {
        font-weight: 500;
        font-size: 15px;
        color: #279baa;
        margin-bottom: 4px;
        display: flex;
        justify-content: space-between;
        .scs{
          color: #00ba67;
        }
        .pad{
          color: #f19c3f;
        }
        .err{
          color: red;
        }
      }

      .line {
        display: flex;
        margin-bottom: 8px;

        &:nth-last-child(1) {
          margin: 0;
        }

        div {
          span {
            &:nth-child(1) {
              color: #666666;
            }
          }
        }

        .left {
          flex: 6;
        }

        .right {
          flex: 4;
        }
      }
    }
  }
}
</style>