yiliangyiyun-pc/src/views/tranManagement/tranManagementVehicleLook.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>

    <ws-form ref="deptBudgetList" :rules="rules" :model="deptBudgetList">
      <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">{{ deptBudgetList.weight }}</ws-form-item>

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

        <!--发货人-->
        <ws-form-item
          label="发货人"
          span="1"
          prop="sender"
          class="readonly"
        >{{ deptBudgetList.sender }}</ws-form-item>

        <!--发货人电话-->
        <ws-form-item
          label="发货人电话"
          span="1"
          prop="senderPhone"
          class="readonly"
        >{{ 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 class="small-title" style="font-size: 16px;">派车</div>
      <div
        style="width: 100%"
        class="driver"
        v-for="(item, index) in deptBudgetList.tranCarInfoList"
        :key="index"
      >
        <ws-info-table>
          <div class="catNos">
            司机-{{ index + 1 }}
            <span class="noservice" v-show="item.status == '未送达'">
              {{
              item.status
              }}
            </span>
            <span class="service" v-show="item.status == '已送达'">
              {{
              item.status
              }}
            </span>
          </div>
          <!--姓名-->
          <ws-form-item label="姓名" span="1" prop="driver">{{ item.driver }}</ws-form-item>
          <el-divider direction="vertical" class="line"></el-divider>
          <ws-form-item class="phone" label="电话" span="1" prop="driverPhone">{{ item.driverPhone }}</ws-form-item>
          <el-divider direction="vertical" class="line"></el-divider>
          <ws-form-item label="车牌号" span="1" prop="carNo">{{ item.carNo }}</ws-form-item>
          <el-divider direction="vertical" class="line"></el-divider>
          <ws-form-item label="装车（吨）" span="1" prop="loadNetWeight">{{ item.loadNetWeight }}</ws-form-item>
          <el-divider direction="vertical" class="line"></el-divider>
          <ws-form-item label="卸车（吨）" span="1" prop="unloadNetWeight">{{ item.unloadNetWeight }}</ws-form-item>
          <el-divider direction="vertical" class="line"></el-divider>
          <ws-form-item label="损耗（吨）" span="1" prop="loss">{{ item.loss }}</ws-form-item>
          <el-divider direction="vertical" class="line"></el-divider>
          <ws-form-item label="合同" span="1" prop="unloadNetWeight" class="hetong"></ws-form-item>
        </ws-info-table>
      </div>
    </ws-form>
    <div style="text-align: right; padding: 10px">
      <el-button class="bg-bottom-up" type="primary" size="small" @click="revert()">关闭</el-button>
    </div>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import WsUpload from '@/components/WsUpload'
import { seeCat } from '@/model/transport/index'
// import { dayjs, fmoney, EventBus } from 'base-core-lib'
import { dayjs } from 'base-core-lib'
export default {
  name: 'viewSpareMoney',
  components: {
    WsUpload,
    Pagination
  },
  watch: {
    // vesselId(val) {
    //   this.getList()
    // },
    isShow(val) {
      this.showType = val
    }
  },
  data() {
    return {
      //弹出框
      dialogViewSpareMoney: false,
      dialogApproveFormVisible: false,
      // 船舶类型
      monetaryKey: null,
      // 表格显示数据
      tableDate: [],
      // 是否显示
      showType: true,
      // 年
      year: '',
      disabled: true,
      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: [],
      rules: {
        netWeight: [
          {
            required: true,
            type: 'number',
            message: '请输入活动名称',
            trigger: 'blur'
          }
        ]
      },
      size: 10,
      compId: sessionStorage.getItem('ws-pf_compId'),
      deptCircularPage: {},
      packtypeList: {},
      date: {
        year: dayjs().format('YYYY'),
        month: dayjs().format('MM')
      },
      contractList: [],
      deptBudgetList: {
        warehouseInOutDetail: {}
      },
      historyList: [],

      pickerBeginDateBefore: {
        disabledDate: time => {
          return time.getTime() > Date.now()
        }
      },
      accessoryTFs: false
    }
  },
  activated() {
    this.getList()
  },
  methods: {
    //返回按钮
    revert() {
      this.$router.go(-1)
    },
    del(index) {
      if (this.freightspace.length > 1) {
        this.freightspace.splice(index, 1)
      }
    },
    getList() {
      seeCat({ id: this.$route.query.id })
        .toPromise()
        .then(response => {
          for (var i = 0; i < response.tranCarInfoList.length; i++) {
            if (
              response.tranCarInfoList[i].loadNetWeight &&
              response.tranCarInfoList[i].unloadNetWeight
            ) {
              response.tranCarInfoList[i].loss =
                response.tranCarInfoList[i].loadNetWeight -
                response.tranCarInfoList[i].unloadNetWeight
            } else if (response.tranCarInfoList[i].loadNetWeight) {
              response.tranCarInfoList[i].loss =
                response.tranCarInfoList[i].loadNetWeight
            } else {
              response.tranCarInfoList[i].loss = 0
            }
          }
          this.deptBudgetList = response
        })
    },
    handleExamine(row) {
      this.$router.push({
        name: 'salesContractExamine',
        query: { id: row.id }
      })
    },

    // 关闭 dialog时 处理文件url 初始化upload组件
    // handleCloe() {
    //   this.dialogViewSpareMoney = false
    // },
    // history(row) {
    //   billoperatehis({ id: row.id })
    //     .toPromise()
    //     .then((response) => {
    //       this.historyList = response
    //     })
    // },
    // deletecontract(){},
    //删除
    approve() {},
    listQuery() {}
  }
}
</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;
    }
  }
}
.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;
}
.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;
}

/deep/.ws-info-table .el-form-item {
  width: 33.33%;
}
/deep/.el-form-item__label {
  width: 160px;
}
//选填
/deep/.el-form-item {
  width: 50%;
}
.container {
  overflow: scroll;
  height: 120vh;
}
/deep/.ws-info-table .el-form-item .el-form-item__label {
  text-align: center;
}
.deliverydate {
  display: inline-block;
  width: 10%;
}

//表格文字
/deep/.ws-info-table .el-form-item .el-form-item__label {
  text-align: left;
  font-size: 14px;
  font-weight: 400;
  color: #000;
  line-height: 16px;
}
.small-title {
  position: relative;
  padding: 10px;
  font-weight: 600;
}
.small-title::before {
  position: absolute;
  content: '';
  display: block;
  width: 4px;
  height: 14px;
  left: 0px;
  top: 13px;
  padding: 4px 2px;
}
// .ws-info-table[data-v-850a44a6] .el-form-item {
//     width: 16.66%;
// }

//去边框
/deep/.el-form-item,
/deep/.ws-info-table {
  border: none;
}

/deep/.ws-info-table .el-form-item .el-form-item__content {
  border: none;
}
/deep/.ws-info-table .el-form-item {
  border: none;
  height: 50px;
}
/deep/.ws-info-table .el-form-item .el-form-item__content {
  background: #f5f7fa;
  color: #8890b1;
  font-size: 14px;
}
.driver {
  position: relative;
  background: #f6f7fb;
  border-radius: 4px;
  border: 1px solid #d8dce6;
  margin-top: 20px;
}
.not,
.already {
  position: absolute;
  left: -45px;
  top: 10px;
}
/deep/.ws-info-table .el-form-item .el-form-item__label {
  background: #fff;
  color: #8890b1;
  font-size: 14px;
}
/deep/.driver .ws-info-table .el-form-item {
  width: 13.1%;
}
/deep/.driver .ws-info-table .el-form-item .el-form-item__label {
  width: 86px;
  text-align: center;
  background: #f6f7fb;
  font-size: 14px;
  color: #8890b1;
}

/deep/.driver .ws-info-table .el-form-item.phone .el-form-item__label {
  width: 50px;
}
/deep/.catNos {
  width: 100%;
  margin-top: 10px;
  margin-left: 15px;
}
/deep/.driver .ws-info-table .el-form-item .el-form-item__content {
  // border-right: 1px solid #8890b1;
  background: #f6f7fb;
  font-size: 14px;
  color: #8890b1;
}
/deep/.hetong .ws-info-table .el-form-item .el-form-item__content {
  border: none;
}
//送达/未送达
.noservice,
.service {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid #d8dce6;
  padding: 2px;
  font-size: 12px;
}
.noservice {
  background: #c4cada;
  color: #ffffff;
}
.service {
  background: #e5f1f7;
  color: #50cad4;
}
/deep/.driver.ws-info-table .el-form-item .el-form-item__content {
  border: none;
}
.line {
  height: 26px;
  margin-top: 6px;
  left: -14px;
}
</style>