yiliangyiyun-pc-jj/src/views/tranManagement/tranManagementShippingLook.vue

// 船运调度详情
<template>
  <div class="container">
    <el-row>
      <el-col :span="20">
        <h2 class="bg-left title">船运调度详情</h2>
      </el-col>
      <el-col :span="4" class="bg-right">
        <el-button class="bg-bottom" type="primary" size="small" @click="revert()">
          <img width="6" height="10" style="vertical-align: bottom; margin-right: 3px"
            src="../../../public/img/lujing.png" alt />返回
        </el-button>
      </el-col>
    </el-row>
    <div class="center">
      <ws-form ref="deptBudgetList" :model="deptBudgetList">
        <div>
          <div class="basicInformation">
            <div class="small-title" style="font-size: 16px;">任务详情</div>
            <ws-info-table>
              <!-- 任务编号 -->
              <ws-form-item label="任务编号" span="1" prop="processNo">{{ deptBudgetList.processNo }}</ws-form-item>
              <!-- 货名 -->
              <ws-form-item label="货名" span="1" prop="goodsName">{{ deptBudgetList.goodsName }}</ws-form-item>
              <!--重量（吨）-->
              <ws-form-item label="重量（吨）" span="1" prop="weight" class="readonly">{{ deptBudgetList.weight }}
              </ws-form-item>

              <!--发货地址-->
              <ws-form-item label="发货地址" span="1">
                {{ deptBudgetList.sendPrivate }}{{ deptBudgetList.sendCity
                }}{{ deptBudgetList.sendArea }}
              </ws-form-item>
              <!--发货人-->
              <ws-form-item label="发货人" span="1" prop="sender">{{ deptBudgetList.sender }}</ws-form-item>

              <!--发货人电话-->
              <ws-form-item label="发货人电话" span="1" prop="senderPhone">{{ deptBudgetList.senderPhone }}</ws-form-item>
              <!--收货地址-->
              <ws-form-item label="收货地址" span="1" prop="receiveDetailedAddress">
                {{ deptBudgetList.receivePrivate }}{{ deptBudgetList.receiveCity
                }}{{ deptBudgetList.receiveArea }}
              </ws-form-item>
              <!--收货人-->
              <ws-form-item label="收货人" span="1" prop="receiver">{{ deptBudgetList.receiver }}</ws-form-item>

              <!--收货人电话-->
              <ws-form-item label="收货人电话" span="1" prop="receiverPhone">{{ deptBudgetList.receiverPhone }}
              </ws-form-item>

              <!--发船日期-->
              <ws-form-item label="发货日期" span="1" prop="deliveryDateStart">{{ deptBudgetList.deliveryDateStart }}
              </ws-form-item>

              <!--最晚发货日期-->
              <ws-form-item label="最晚到货日期" span="1" prop="deliveryDateEnd">{{ deptBudgetList.deliveryDateEnd }}
              </ws-form-item>
              <!--合同编号-->
              <ws-form-item label="合同编号" span="1" prop="contractNo">{{ deptBudgetList.contractNo }}</ws-form-item>
            </ws-info-table>
          </div>

          <div>
            <div class="small-title" style="font-size: 16px">联络员及航次</div>
            <div class="myTest">
            <!--当前运输总价-->
          <ws-form-item label="当前运输总价(元/吨):" span="1" prop="tranPrice">
              <ws-input
                v-model="deptBudgetList.tranPrice"
                maxlength="70"
                :disabled="readonly"
                size="small"
                style="width:70px"
              />
          </ws-form-item>
       </div>
            <div v-if='deptBudgetList.tranCarInfoList'>
              <div style="width: 100% " class="flex position middle"
                v-for="(item, index) in deptBudgetList.tranCarInfoList" :key="index">
                <div style="margin: 18px;color: #69708C;">航次信息</div>
                <ws-info-table>
                  <ws-form-item label="姓名:" span="1" prop="driver" class="siji">{{item.driver}}</ws-form-item>
                  <ws-form-item label="电话:" span="1" prop="driverPhone" style="width:210px;">{{item.driverPhone}}
                  </ws-form-item>
                  <ws-form-item label="发船日期:" span="1" prop="sendDateStart" class="siji">{{ item.sendDateStart }}
                  </ws-form-item>
                  <ws-form-item label="预计到港日期:" span="1" prop="receiveDateEnd" class="siji">{{ item.receiveDateEnd }}
                  </ws-form-item>
                  <ws-form-item label="船名:" span="1" prop="shipName" class="siji">{{ item.shipName }}</ws-form-item>
                  <ws-form-item label="航次:" span="1" prop="shipNo" class="siji">{{ item.shipNo }}</ws-form-item>
                  <ws-form-item label="类型:" span="1" prop="shipType" class="siji">{{ item.shipType }}</ws-form-item>
                  <ws-form-item label="数量:" span="1" prop="boxNumber" class="siji" v-if="item.shipType == '集装箱'">
                    {{ item.boxNumber }}</ws-form-item>
                  <ws-form-item label="仓位号:" span="1" prop="impurity" class="siji" v-if="item.shipType == '散船'">
                    {{ item.binNumber }}</ws-form-item>
                  <ws-form-item label="重量(吨):" span="1" prop="positionWeight" class="siji" v-if="item.shipType == '散船'">
                    {{ item.positionWeight }}</ws-form-item>
                </ws-info-table>
              </div>
            </div>

          </div>

          <div style="text-align: right; padding: 10px">
            <el-button class="bg-bottom-up" type="primary" size="small" @click="returnsales()">关闭</el-button>
          </div>
        </div>
      </ws-form>
    </div>
  </div>
</template>
<script>
  import {
    seeCat
  } from '@/model/transport/index'
  import Pagination from '@/components/Pagination'
  import WsUpload from '@/components/WsUpload'
  import {
    dayjs,
    EventBus
  } from 'base-core-lib'
  export default {
    name: 'viewSpareMoney',
    components: {
      WsUpload,
      Pagination
    },
    watch: {
      isShow(val) {
        this.showType = val
      }
    },
    data() {
      return {
        //弹出框
        dialogViewSpareMoney: false,
        dialogApproveFormVisible: false,
        // 船舶类型
        monetaryKey: null,
        // 表格显示数据
        tableDate: [],
        // 是否显示
        showType: true,
        // 年
        year: '',
        deptBudgetTotal: 0,
        currentPage: 1,
        pageSize: 10,
        searchType: 1,
        searchKeyWord: '',
        contractType: 2,
        startDate: null,
        endDate: null,
        goodnameList: {},
        // 提交类型
        submitType: true,
        storageType: [],
        readonly: true,
        appendixIdsAdd: '',
        uploadSuccess: {},
        onChange: {},
        gradeList: [],
        list: [],
        arr: [],
        size: 10,
        compId: sessionStorage.getItem('ws-pf_compId'),
        deptCircularPage: {},
        packtypeList: {},
        deptBudgetList: {
          totalStorage: 0,
          tranCarInfoList: [],
        },
        tranCarInfoList: {},
        date: {
          year: dayjs().format('YYYY'),
          month: dayjs().format('MM')
        },
        contractList: [],
        deptBudgetList: {},
      }
    },
    activated() {
      this.deptBudgetList.id = this.$route.query.id
      this.getList()
    },

    methods: {
      getList() {
        seeCat({
            id: this.$route.query.id
          })
          .toPromise()
          .then((response) => {
            this.deptBudgetList = response
            if(response.tranCarInfoList.length > 0 &&response.tranCarInfoList[0].shipType =='集装箱') {
              this.deptBudgetList.tranCarInfoList=[this.deptBudgetList.tranCarInfoList[0]]

            }else{
               this.deptBudgetList.tranCarInfoList = response.tranCarInfoList

            }
          })
      },
      //返回按钮
      revert() {
        this.$router.go(-1)
      },
      returnsales() {
        this.$router.go(-1)
      },
    }
  }
</script>
<style lang="scss" scoped>
  /deep/.basicInformation {
    .ws-info-table {
      border: none;
    }

    .el-form-item {
      width: 33.3333%;
      border: none;

      .el-form-item__label {
        background: transparent;
        border: none;
      }

      .el-form-item__content {
        border: none;
      }
    }
  }

  .title {
    position: relative;
    padding-left: 10px;
  }

  .title::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 30px;
    background: #5473e8;
    position: absolute;
    left: 0;
  }

  .el-form {
    padding: 0 10%;
  }

  .el-button--primary {
    background-color: #5878e8;
    border-color: #5878e8;
  }

  .el-col {
    background: #f6f7fc;
  }

  .bg-right {
    text-align: right;
    padding: 16px 20px;
  }

  .center {
    width: 100%;
    margin: 0 auto;
  }

  //表格文字
  /deep/.ws-info-table .el-form-item .el-form-item__label {
    text-align: left;
    font-size: 14px;
    font-weight: 400;
    color: #8890b1;
    line-height: 16px;
  }

  //蓝标
  .small-title {
    position: relative;
    padding: 10px;
    font-weight: 600;
  }

  .small-title::before {
    position: absolute;
    content: '';
    display: block;
    background: #5473e8;
    width: 4px;
    height: 14px;
    left: 0px;
    top: 13px;
    padding: 4px 2px;
  }

  .position {
    width: 90%;
  }

  .position .siji {
    width: 16%;
  }

  /deep/.position .ws-info-table .el-form-item .el-form-item__label {
    background-color: #f5f7fa;
  }

  .position .zaizhong {
    width: 16%;
  }

  //减号
  .del {
    right: -70px;
  }

  // .bot{
  //   width: 30%;
  //   border: none;
  // }
  .siji {
    width: 300px;
  }

  /deep/.el-form-item {
    border-right: 0px;
    border-bottom: 0px;
  }

  /deep/.ws-info-table {
    border-left: 0px;
    border-top: 0px;
  }

  .ws-info-table .el-form-item .el-form-item__content {
    border-right: 0px;
    border-bottom: 0px;
    border-left: 0px;
    border-top: 0px;
  }

  /deep/.ws-info-table .el-form-item {
    border-right: 0px;
    border-bottom: 0px;
    border-left: 0px;
    border-top: 0px;
  }

  /deep/.ws-info-table .el-form-item .el-form-item__content {
    background: #f5f7fa;
    border-radius: 4px;
    border: 1px solid #d8dce6;
    font-family: PingFangSC-Regular, PingFang SC;
    margin-bottom: 5px;
    background-color: #fff;
    font-size: 13px;
    font-weight: 400;
    color: #8890b1;
    line-height: 16px;
  }

  /deep/.ws-info-table .el-form-item .el-form-item__content {
    background: #f5f7fa;
    border-radius: 4px;
    border: 1px solid #d8dce6;
  }

  /deep/.flex .ws-info-table .el-form-item .el-form-item__content {
    border: 0px;
    border-right: 1px solid #d8dce6;
    border-radius: 0px;
  }

  /deep/.ws-class-table-col {
    height: auto;
    padding: 0px 2px;

    /deep/.el-input__inner {
      padding: 0px 2px;
    }
  }

  /deep/.is-disabled {
    .el-input__prefix,
    .el-input__suffix {
      display: none;
    }

    .el-input__inner {
      // background-color: #fff;
      // border-color: #fff !important;
      color: #c0c4cc !important;
      font-size: 14px;
      cursor: text;
      padding: 0 10px !important;
      // border: none;
    }
  }

  .xia {
    width: 700px;
    // height: 50px;
    border-radius: 4px;
    border: 1px solid #d8dce6;
    margin-top: 10px;
    border: none;
  }

  /deep/.ws-info-table .el-form-item .el-form-item__label {
    // background-color: #f5f7fa;
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #8890b1;
    line-height: 16px;
  }

  .position .siji {
    width: 14.28%;
  }

  .phone {
    width: 100%;
  }

  .el-form {
    height: 1000px;
  }

  .flex {
    flex-direction: column;
  }

  /deep/.position .ws-info-table .el-form-item .el-form-item__label {
    background-color: #f5f7fa;
    // text-align: center;
    width: 51%;
  }

  .middle {
    background: #f6f7fc;
    border-radius: 4px;
    border: 1px solid #d8dce6;
  }

  .line {
    height: 26px;
    margin-top: 6px;
    left: 2px;
  }

  /deep/.ws-info-table.el-form-item .el-form-item__label {
    // background-color: #eee;
    // padding-right: 8px;
    // padding-left: 8px;
    // width: 100px;
    font-size: 12px;
    // font-weight: bold;
    // color: #333;
    // overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    // line-height: 40px;
    text-align: center;
  }

  /deep/.cangno .ws-info-table .el-form-item .el-form-item__content {
    border: none;

  }
  .myTest{
    width: 800px;
    display: flex;
    height: 40px;
  }
</style>