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

//添加司机
<template>
  <div class="container">
    <el-row>
      <el-col :span="12">
        <h2 class="bg-left title">添加新司机</h2>
      </el-col>
      <el-col :span="12" class="bg-right">
        <el-button
          class="bg-bottom"
          type="primary"
          size="small"
          @click="returnsales()"
          ><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="mainReportAdd" :model="deptBudgetList"
      ><div class="small-title">司机信息</div>
      <div class="flex drivermessage">
        <ws-info-table>
          <!--司机姓名-->
          <ws-form-item
            label="姓名"
            span="1"
            prop="contractNo"
            class="readonly bg-right"
          >
            <ws-input
              disabled
              v-model="deptBudgetList.driverName"
              placeholder="请输入司机姓名"
              maxlength="20"
              size="small"
            />
          </ws-form-item>
          <!--手机号-->
          <ws-form-item
            label="手机号"
            span="1"
            prop="driverPhone"
            class="readonly"
          >
            <ws-input
              disabled
              v-model="deptBudgetList.driverPhone"
              placeholder="请输入手机号"
              maxlength="100"
              size="small"
            />
          </ws-form-item>

          <!--常驻城市-->
          <ws-form-item label="常驻城市" span="1" prop="acceptanceMethod">
            {{ deptBudgetList.residentCityProvincial
            }}{{ deptBudgetList.residentCityMunicipal }}
          </ws-form-item>

          <!--身份证号-->
          <ws-form-item
            label="身份证号"
            span="1"
            prop="driverNo"
            class="readonly"
          >
            <ws-input
              disabled
              v-model="deptBudgetList.numberCard"
              placeholder="请输入身份证号"
              maxlength="100"
              size="small"
            />
          </ws-form-item>
        </ws-info-table>
        <span v-if="age && age < 60" class="small">{{ age }}岁</span>
        <span v-if="age && age > 60" class="big">{{ age }}岁</span>
      </div>
    </ws-form>

    <ws-form
      ref="deptBudgetList"
      :rules="mainReportAdd"
      :model="deptBudgetList"
    >
      <div class="small-title">货车信息</div>
      <div
        style="width: 100%"
        class="flex position"
        v-for="(item, index) in deptBudgetList.driverCarInfoList"
      >
        <div class="trucks">
          <div class="driver">货车信息-{{ index + 1 }}</div>
          <div class="truckswrap">车牌号: {{ item.carNumber }}</div>
          <div class="truckswrap">车型: {{ item.carModel }}</div>
          <div class="truckswrap">不含车头车长（米）: {{ item.carLength }}</div>
          <div class="truckswrap">载重: {{ item.carLoad }}</div>
          <div class="truckswrap">出厂年份: {{ item.yearManufacture }}</div>
        </div>
      </div>
    </ws-form>
    <ws-form
      ref="deptBudgetList"
      :rules="mainReportAdd"
      :model="deptBudgetList"
    >
      <div class="small-title">收款人账户信息</div>
      <div
        class="gathering"
        v-for="(item, index) in deptBudgetList.driverPayeeInfoList"
      >
        <div>
          <div class="driver">收款人账户信息-{{ index + 1 }}</div>
          <ws-info-table class="el-table">
            <!--账户类型-->
            <ws-form-item
              label="账户类型"
              span="1"
              prop="contractNo"
              class="el-car bg-right"
            >
              <span v-if="item.accountTypeFlag == 1">私人账号</span>
              <span v-if="item.accountTypeFlag == 2">企业账户</span>
            </ws-form-item>
            <!--账号-->
            <ws-form-item label="账号" span="1" prop="bankCard" class="el-car">
              {{ item.bankCard }}
            </ws-form-item>
            <!--开户行-->
            <ws-form-item
              label="开户行"
              span="1"
              prop="bankDeposit"
              class="el-car bankDeposit"
            >
              {{ item.bankDeposit }}
            </ws-form-item>
            <!--姓名-->
            <ws-form-item
              label="姓名"
              v-if="item.accountTypeFlag == 1"
              span="1"
              prop="payeeName"
              class="el-car"
              width="150px"
            >
              {{ item.payeeName }}
            </ws-form-item>
            <!--企业名称-->
            <ws-form-item
              label="企业名称"
              v-else
              span="1"
              prop="compName"
              class="el-car compname"
              width="150px"
            >
              {{ item.compName }}
            </ws-form-item>

            <!--身份证号-->
            <ws-form-item
              label="身份证号"
              v-if="item.accountTypeFlag == 1"
              span="1"
              prop="payeeNumberCard"
              class="el-car"
            >
              {{ item.payeeNumberCard }}
            </ws-form-item>
            <ws-form-item
              label="开户支行"
              span="1"
              prop="bankDepositBranch"
              class="el-car bankDeposit1"
            >
              {{ item.bankDepositBranch }}
            </ws-form-item>
          </ws-info-table>
        </div>
      </div>
    </ws-form>
    <ws-form
      ref="deptBudgetList"
      :rules="mainReportAdd"
      :model="deptBudgetList"
    >
      <div class="small-title">相关附件</div>
      <div class="flex">
        <div
          style="margin: 10px"
          v-for="(item, index) in deptBudgetList.addressUrlArray"
        >
          <div class="button" v-if="index == 0">行驶证</div>
          <div class="button" v-if="index == 1">驾驶证</div>
          <div class="button-green" v-if="index == 2">道路运营证</div>
          <div class="button-green" v-if="index == 3">从业资格证</div>
          <div class="button-yellow" v-if="index == 4">身份证正面</div>
          <div class="button-yellow" v-if="index == 5">身份证反面</div>
          <img width="100" height="100" :src="item" alt="" />
        </div>
      </div>
    </ws-form>
    <!-- 提交 -->
    <div style="text-align: right; padding: 10px" class="center">
      <el-button
        class="bg-bottom"
        type="primary"
        size="small"
        @click="returnsales()"
        >关闭</el-button
      >
    </div>
  </div>
</template>
<script>
import { provinceAndCityData, CodeToText } from 'element-china-area-data'
import { lookDriver } from '@/model/transport/index'
import WsUpload from '@/components/WsUpload'
import mapDrag from '@/components/mapdrag/mapdrag'
export default {
  name: 'viewSpareMoney',
  components: {
    WsUpload,
    mapDrag,
  },
  watch: {
    vesselId(val) {
      this.getVesselData()
    },
    isShow(val) {
      this.showType = val
    },
  },
  data() {
    let self = this
    return {
      deptBudgetList: {
        totalStorage: 0,
        drivercarInfo: {
          goodsName: '',
        },
        driverPayeeInfo: {},
      },
      radio: '1',
      carModelList: [],
      carLengthList: [],
      options_: provinceAndCityData,
      heightData: '600px',
      zoom: 7,
      selectedOptions: [],
      center: [116.244694, 39.517344],
      window: '',
      district: null,
      listDate: { country: '中国', level: 'country', city: '' },
      citylist: [],
      compId: sessionStorage.getItem('ws-pf_compId'),
      mainReportAdd: {},
      appendixIdsAdd: '',
      size: 10,
      value1: '',
      unitList: [],
      accessoryBankTFs: false,
      freightspace: [
        {
          carNumber: '',
          carModel: '高栏',
          carModelKey: '1',
          carLength: '13',
          carLengthKey: '1',
          carLoad: '',
          yearManufacture: '',
        },
      ],
      freightspace1: [
        {
          account_type: '',
          radio: '1',
          payeeName: '',
          payeeNumberCard: '',
          compName: '',
          bankDeposit: '',
          addressUrlArray: [],
          bankCard: '',
        },
      ],
      name: '',
      age: '',
    }
  },
  activated() {
    this.loaddata()
    this.showType = this.isShow
  },
  computed: {},
  methods: {
    IdCard(UUserCard) {
      //获取年龄
      var myDate = new Date()
      var month = myDate.getMonth() + 1
      var day = myDate.getDate()
      var age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1
      if (
        UUserCard.substring(10, 12) < month ||
        (UUserCard.substring(10, 12) == month &&
          UUserCard.substring(12, 14) <= day)
      ) {
        age++
      }
      this.age = age
    },
    bankcardfujian(item) {
      this.accessoryBankTFs = true
    },
    loaddata() {
      lookDriver({ id: this.$route.query.id })
        .toPromise()
        .then((response) => {
          this.IdCard(response.numberCard)
          response.addressUrlArray = response.addressUrl.split(',')
          this.deptBudgetList = response
        })
      //   // 车型
      //   packList({ constId: 'TRAN1' })
      //     .toPromise()
      //     .then((response) => {
      //       this.carModelList = response
      //     })
      //   // 车长
      //   packList({ constId: 'TRAN2' })
      //     .toPromise()
      //     .then((response) => {
      //       this.carLengthList = response
      //     })
    },
    confirmPositioncity() {
      this.listDate.level = 'city'
      this.listDate.country = this.name
    },
    uploadSuccessHandle(e, file) {
      const that = this
      this.upForm.personNoImg = e.url
      this.upForm.type = 'driver'
      this.submiting = true
      // personShibie(this.upForm).then((response) => {
      //   this.list.unshift(response.data.data)
      //   this.upForm.driver = response.data.data.driver
      //   this.upForm.driverNo = response.data.data.driverNo
      //   this.upForm.driverAddress = response.data.data.driverAddress
      //   this.upFormVisible = true
      //   this.submiting = false
      // })
    },
    // 关闭 dialog时 处理文件url 初始化upload组件
    handleClose() {
      this.dialogViewSpareMoney = false
    },
    identitycardfujian(item) {},
    handleChange(value) {
      this.selectedOptions = value
    },
    returnsales() {
      this.$router.push({ path: 'tranManagementDriver' })
    },
    resetForm(deptBudgetList) {
      this.$refs[deptBudgetList].resetFields()
    },
  },
}
</script>

<style lang="scss" scoped>
.position {
  position: relative;
}
.add,
.del {
  position: absolute;
  right: -38px;
  top: 9px;
  cursor: pointer;
}
.del {
  right: -70px;
}
.amap-page-container {
  width: 300px;
  height: 300px;
}
.el-form {
  padding: 0 10%;
}
/deep/.ws-info-table .el-form-item {
  border-right: 1px solid #cdd2dc;
  border-bottom: 1px solid #cdd2dc;
}
.title {
  position: relative;
}
.el-car {
  width: 413px;
}
.title::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 30px;
  background: #5473e8;
  position: absolute;
  left: 0;
}
.el-col {
  background: #f6f7fc;
}
.drivermessage {
  position: relative;
}
.button-container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  width: 100%;
  height: 50px;
  padding: 0 10px;
  & > div {
    margin-left: 10px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    & > span {
      line-height: 50px;
    }
  }

  /deep/.auditFlow-box {
    position: unset;
    margin-left: 10px;
    &/deep/.auditFlow-icon {
      width: auto;
      padding-right: 30px;
    }
    &/deep/.auditFlow-main {
      position: absolute;
    }
  }
}
.box-app {
  display: inline-block;
  float: left;
  margin-left: 30px;
  line-height: 50px;
}
/deep/.el-dialog {
  .el-form-item {
    margin-bottom: 0 !important;
    .el-input--medium {
      textarea {
        min-height: 100px !important;
      }
    }
  }
}
.collapse-bottom {
  margin-bottom: 20px;
}
.input-main .textarea .el-textarea__inner {
  width: 100%;
  z-index: 1;
}
.bg-left {
  padding-left: 30px;
}
.bg-right {
  padding-right: 10px;
  text-align: right;
}
.bg-bottom {
  margin: 15px 0px;
}

.el-form-item__label {
  text-align: center;
}
//蓝标
.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;
}
// 控制select为只读的时候显示样式
/deep/.ws-class-table-col {
  height: auto;
  padding: 0px 2px;
  /deep/.el-input__inner {
    padding: 0px 2px;
  }
}

.container {
  overflow: scroll;
  height: 93vh;
}
/deep/.ws-info-table .el-form-item {
  width: 25%;
}
.el-textarea__inner {
  display: none;
}
.el-form {
  margin-top: 50px;
}
.el-cascader {
  width: 145px;
}
.forlist {
  width: 20%;
}
.el-form-item.forlist.is-success.el-form-item--small {
  width: 20%;
}
.el-form-item.forlist.el-form-item--small {
  width: 20%;
}
.el-form-item.readonly.is-success.el-form-item--small.showLableToopTip {
  width: 20%;
}
.el-form-item.el-car.el-form-item--small {
  width: 33.3%;
}
.trucks {
  background: #f5f7fa;
  color: #69708c;
  border: 1px solid #d8dce6;
  width: 90%;
  padding: 12px;
  border-radius: 3px;
}
.truckswrap {
  width: 19.7%;
  display: inline-block;
  margin: 0;
  padding: 9px 0;
}
.gathering {
  background: #f5f7fa;
  border: 1px solid #d8dce6;
  border-radius: 3px;
  width: 90%;
  border-bottom: 1px solid transparent;
}
/deep/.gathering .ws-info-table {
  border-left: none;
  border-top: 1px solid #d8dce6;
}
/deep/.gathering .driver {
  padding: 10px;
}
/deep/.gathering .el-form-item .el-form-item__label {
  background: #f5f7fa;
  text-align: center;
}
/deep/.gathering .ws-info-table .el-form-item .el-form-item__content {
  border-left: 1px solid #d8dce6;
}
/deep/.gathering .ws-info-table .el-form-item.compname,
/deep/.gathering .ws-info-table .el-form-item.bankDeposit,
/deep/.gathering .ws-info-table .el-form-item.bankDeposit1 {
  border-right: 1px solid transparent;
}
/deep/.gathering .ws-info-table .el-form-item.compname {
  width: 100%;
}
.button,
.button-green,
.button-yellow {
  height: 28px;
  background: #edf1ff;
  border-radius: 4px;
  color: #5473e8;
  font-size: 12px;
  text-align: center;
  line-height: 28px;
  margin: 7px auto;
  padding: 0 10px;
}
.button-green {
  background: #ecf8f9;
  color: #50cad4;
}
.button-yellow {
  background: #fff6eb;
  color: #ff9f24;
}
.el-button--primary {
  background: #5878e8;
}
.drivermessage .ws-info-table {
  border: none;
}
/deep/.drivermessage .ws-info-table .el-form-item__label {
  background: #fff;
  width: 80px;
}
/deep/.drivermessage .ws-info-table .el-form-item__content,
/deep/.drivermessage .ws-info-table .el-form-item {
  border: none;
}
.small,
.big {
  color: #ccc;
  line-height: 16px;
  position: absolute;
  right: -50px;
  top: 5px;
  border: 1px solid #ccc;
  padding: 5px 10px;
  border-radius: 20px;
}
.big {
  color: #f46060;
  background: #ffeeee;
}
</style>