大屏

liukangdong

2024-10-24 44dd2c7c73d5fead948902cad2695ae30d4620e2

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

@@ -1,39 +1,48 @@
<template>
  <GlobalWindow
    title="运单详情"
    center
    :visible.sync="isShowModal"
    width="420px"
    :confirm-working="subLoading"
    @confirm="isShowDetail = false"
  >
  <GlobalWindow title="运单详情" center :visible.sync="isShowModal" width="600px" :confirm-working="subLoading"
    @confirm="isShowModal = false">
    <div class="detail_modal">
      <div class="head">
        <div class="plate">皖A12122</div>
        <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>22222</span>
            <span>{{ info.carryBillCode }}</span>
          </div>
          <div class="item">
            <span>总运输量：</span>
            <span>22222</span>
            <span>{{ info.ioQty }}万支</span>
          </div>
          <div class="item">
            <span>驾驶员：</span>
            <span>22222</span>
            <span>{{ info.driverName }} {{ info.driverPhone }}</span>
          </div>
        </div>
      </div>
      <div class="title">合同列表</div>
      <div class="content">
        <div class="item">
          <div class="contract">合同号：1292992</div>
          <div class="placeholder6">收货地：address</div>
        <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">
              <div class="left"><span>物料名称：</span><span>黄山</span></div>
              <div class="right"><span>数量：</span><span>100</span></div>
            <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>
@@ -44,7 +53,7 @@

<script>
import GlobalWindow from '@/components/common/GlobalWindow'
import { getPlatform, PlatformEdit, PlatformDel } from '@/api'
import { platformWmsJobDetail } from '@/api'
export default {
  components: {
    GlobalWindow
@@ -53,23 +62,16 @@
    return {
      isShowModal: false,
      subLoading: false,
      param: {}
      info: {},
      id: ''

    }
  },
  methods: {
    handleSub() {
      const { param } = this
      this.subLoading = true
      PlatformEdit({
        ...param
      }).then(res => {
        this.subLoading = false
        this.isShowEdit = false
        this.$tip.success('提交成功')
        this.getList()
      }, () => {
        this.subLoading = false
    getDetail() {
      const { id } = this
      platformWmsJobDetail(id).then(res => {
        this.info = res
      })
    }
  }
@@ -79,31 +81,51 @@

<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 {
      width: 90px;
      text-align: center;
      display: flex;
      font-weight: 600;
      height: 30px;
      line-height: 30px;
      font-size: 15px;
      color: #111111;
      padding: 4px 5px;
      font-weight: 700;
      border: 1px solid #279baa;
      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;
@@ -112,35 +134,54 @@
      }
    }
  }

  .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) {
@@ -148,9 +189,11 @@
            }
          }
        }

        .left {
          flex: 6;
        }

        .right {
          flex: 4;
        }