yiliangyiyun-pc-jj/src/views/tranManagement/tranManagementDriverAdd.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="drivermessage">
        <div class="small-title">司机信息</div>
        <ws-info-table>
          <!--司机姓名-->
          <ws-form-item
            label="姓名"
            span="1"
            prop="contractNo"
            class="readonly bg-right"
          >
            <ws-input
              v-model="deptBudgetList.driverName"
              placeholder="请输入司机姓名"
              maxlength="20"
              size="small"
            />
          </ws-form-item>
          <!--手机号-->
          <ws-form-item
            label="手机号"
            span="1"
            prop="driverPhone"
            class="readonly"
          >
            <ws-input
              v-model="deptBudgetList.driverPhone"
              placeholder="请输入手机号"
              maxlength="100"
              size="small"
            />
          </ws-form-item>

          <!--常驻城市-->
          <ws-form-item label="常驻城市" span="1" prop="acceptanceMethod">
            <el-cascader
              :options="options_"
              v-model="selectedOptions"
              clearable
              size="large"
              placeholder="请选择常驻城市"
              style="width: 200%"
              class="el-cascader"
              @change="handleChange"
            />
          </ws-form-item>

          <!--身份证号-->
          <ws-form-item
            label="身份证号"
            span="1"
            prop="driverNo"
            class="readonly"
          >
            <ws-input
              @input="cardchange"
              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 freightspace"
      >
        <div class="trucks">
          <div class="driver">
            货车信息-{{ index + 1 }}
            <img
              width="22"
              height="22"
              class="add"
              @click="add"
              src="../../../public/img/add.png"
              alt=""
            />
            <img
              width="22"
              height="22"
              class="del"
              @click="del(index)"
              src="../../../public/img/del.png"
              alt=""
            />
          </div>
          <ws-info-table class="el-table">
            <!--车牌号-->
            <ws-form-item
              label="车牌号"
              span="1"
              prop="carNumber"
              class="forlist"
              width="400px"
            >
              <ws-input
                v-model="item.carNumber"
                placeholder="请输入车牌号"
                maxlength="20"
                size="small"
              />
            </ws-form-item>
            <!--车型-->
            <ws-form-item label="车型" span="1" prop="carModel" class="forlist">
              <ws-select
                v-model="item.carModel"
                placeholder=""
                class="typeselect"
                @change="selectcarModel"
              >
                <ws-option
                  v-for="item in carModelList"
                  :key="item.constKey"
                  :label="item.constValue"
                  :value="item.constValue"
                />
              </ws-select>
            </ws-form-item>
            <!--车长-->
            <ws-form-item
              label="不含车头车长（米）"
              span="1"
              prop="carLength"
              class="forlist"
            >
              <el-select
                v-model="item.carLength"
                placeholder=""
                class="typeselect"
                @change="selectcarLength"
                filterable
                clearable
                allow-create
                default-first-option
              >
                <el-option
                  v-for="item in carLengthList"
                  :key="item.constKey"
                  :label="item.constValue"
                  :value="item.constValue"
                />
              </el-select>
            </ws-form-item>
            <!--载重-->
            <ws-form-item label="载重" span="1" prop="carLoad" class="forlist">
              <ws-input
                v-model="item.carLoad"
                placeholder="请输入载重"
                maxlength="100"
                size="small"
              />
            </ws-form-item>

            <!--出厂年份-->
            <ws-form-item
              label="出厂年份"
              span="1"
              prop="yearManufacture"
              class="forlist"
            >
              <ws-input
                v-model="item.yearManufacture"
                placeholder="请输入年份"
                maxlength="100"
                size="small"
              />
            </ws-form-item>
          </ws-info-table>
        </div>
      </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 freightspace1"
      >
        <div class="gathering">
          <div class="driver">
            收款人账户信息-{{ index + 1 }}
            <img
              width="22"
              height="22"
              class="add"
              @click="add1"
              src="../../../public/img/add.png"
              alt=""
            />
            <img
              width="22"
              height="22"
              class="del"
              @click="del1(index)"
              src="../../../public/img/del.png"
              alt=""
            />
          </div>
          <ws-info-table class="el-table">
            <!--账户类型-->
            <ws-form-item
              label="账户类型"
              span="1"
              prop="contractNo"
              class="el-car bg-right"
            >
              <el-radio v-model="item.accountTypeFlag" label="1"
                >私人账号</el-radio
              >
              <el-radio v-model="item.accountTypeFlag" label="2"
                >企业账户</el-radio
              >
            </ws-form-item>
            <!--账号-->
            <ws-form-item label="账号" span="1" prop="bankCard" class="el-car">
              <ws-input
                v-model="item.bankCard"
                placeholder="请输入账号"
                maxlength="100"
                size="small"
              />
              <el-upload
                action="https://www.zthymaoyi.com/upload/admin"
                :show-file-list="false"
                :on-success="
                  (res, file) => {
                    uploadSuccessHandle1(index, res, file)
                  }
                "
                class="avatar-uploader"
                accept=".jpg, .jpeg, .png, .gif"
                ><img
                  width="18"
                  height="20"
                  style="
                    vertical-align: text-top;
                    position: relative;
                    top: -1px;
                  "
                  src="../../../public/img/fujian.png"
                  alt=""
                />
              </el-upload>
            </ws-form-item>
            <!--开户行-->
            <ws-form-item
              label="开户行"
              span="1"
              prop="bankDeposit"
              class="el-car"
            >
              <ws-input
                v-model="item.bankDeposit"
                placeholder="请输入开户行"
                maxlength="100"
                size="small"
              />
            </ws-form-item>
            <!--姓名-->
            <ws-form-item
              label="姓名"
              v-if="item.accountTypeFlag == 1"
              span="1"
              prop="payeeName"
              class="el-car"
              width="150px"
            >
              <ws-input
                v-model="item.payeeName"
                placeholder="请输入姓名"
                maxlength="100"
                size="small"
              />
            </ws-form-item>
            <!--企业名称-->
            <ws-form-item
              label="企业名称"
              v-else
              span="1"
              prop="compName"
              class="el-car"
              width="150px"
            >
              <ws-input
                v-model="item.compName"
                placeholder="请输入企业名称"
                maxlength="100"
                size="small"
              />
            </ws-form-item>

            <!--身份证号-->
            <ws-form-item
              label="身份证号"
              v-if="item.accountTypeFlag == 1"
              span="1"
              prop="payeeNumberCard"
              class="el-car"
            >
              <ws-input
                v-model="item.payeeNumberCard"
                placeholder="请输入身份证号"
                maxlength="100"
                size="small"
              />
              <el-upload
                action="https://www.zthymaoyi.com/upload/admin"
                :show-file-list="false"
                :on-success="
                  (res, file) => {
                    uploadSuccessHandle(index, res, file)
                  }
                "
                class="avatar-uploader"
                accept=".jpg, .jpeg, .png, .gif"
                ><img
                  width="18"
                  height="20"
                  style="
                    vertical-align: text-top;
                    position: relative;
                    top: -1px;
                  "
                  src="../../../public/img/fujian.png"
                  alt=""
                />
              </el-upload>
            </ws-form-item>
            <ws-form-item
              class="el-car"
              label="开户支行"
              span="1"
              prop="bankDepositBranch"
            >
              <ws-select
                v-model="item.bankDepositBranch"
                placeholder=""
                class="typeselect"
                @change="
                  (value) => {
                    selectbankDepositBranch(value, index)
                  }
                "
              >
                <ws-option
                  v-for="(items, index) in item.bankDepositBranchList"
                  :key="index"
                  :label="items"
                  :value="items"
                />
              </ws-select>
            </ws-form-item>
          </ws-info-table>
        </div>
      </div>
    </ws-form>
    <ws-form
      ref="deptBudgetList"
      :rules="mainReportAdd"
      :model="deptBudgetList"
    >
      <div class="flex">
        <div>
          <el-upload
            action="https://www.zthymaoyi.com/upload/admin"
            :show-file-list="false"
            :on-success="uploadSuccessHandletravel"
            class="avatar-uploader"
            accept=".jpg, .jpeg, .png, .gif"
            ><el-button class="upload button" size="small" type="primary"
              >行驶证</el-button
            >
          </el-upload>
          <img
            v-show="addressUrls.travel"
            width="100"
            height="100"
            :src="addressUrls.travel"
            alt=""
          />
        </div>
        <div>
          <el-upload
            action="https://www.zthymaoyi.com/upload/admin"
            :show-file-list="false"
            :on-success="uploadSuccessHandledrive"
            class="avatar-uploader"
            accept=".jpg, .jpeg, .png, .gif"
            ><el-button class="upload button" size="small" type="primary"
              >驾驶证</el-button
            >
          </el-upload>
          <img
            v-if="addressUrls.drive"
            width="100"
            height="100"
            :src="addressUrls.drive"
            alt=""
          />
        </div>
        <div>
          <el-upload
            action="https://www.zthymaoyi.com/upload/admin"
            :show-file-list="false"
            :on-success="uploadSuccessHandleway"
            class="avatar-uploader"
            accept=".jpg, .jpeg, .png, .gif"
            ><el-button class="upload button-green" size="small" type="primary"
              >道路运营证</el-button
            >
          </el-upload>
          <img
            v-if="addressUrls.way"
            width="100"
            height="100"
            :src="addressUrls.way"
            alt=""
          />
        </div>
        <div>
          <el-upload
            action="https://www.zthymaoyi.com/upload/admin"
            :show-file-list="false"
            :on-success="uploadSuccessHandlequalification"
            class="avatar-uploader"
            accept=".jpg, .jpeg, .png, .gif"
            ><el-button class="upload button-green" size="small" type="primary"
              >从业资格证</el-button
            >
          </el-upload>
          <img
            v-if="addressUrls.qualification"
            width="100"
            height="100"
            :src="addressUrls.qualification"
            alt=""
          />
        </div>
        <div>
          <el-upload
            action="https://www.zthymaoyi.com/upload/admin"
            :show-file-list="false"
            :on-success="uploadSuccessHandleidentityjust"
            class="avatar-uploader"
            accept=".jpg, .jpeg, .png, .gif"
            ><el-button class="upload button-yellow" size="small" type="primary"
              >身份证正面</el-button
            >
          </el-upload>
          <img
            v-if="addressUrls.identityjust"
            width="100"
            height="100"
            :src="addressUrls.identityjust"
            alt=""
          />
        </div>
        <div>
          <el-upload
            action="https://www.zthymaoyi.com/upload/admin"
            :show-file-list="false"
            :on-success="uploadSuccessHandleidentityagainst"
            class="avatar-uploader"
            accept=".jpg, .jpeg, .png, .gif"
            ><el-button class="upload button-yellow" size="small" type="primary"
              >身份证反面</el-button
            >
          </el-upload>
          <img
            v-if="addressUrls.identityagainst"
            width="100"
            height="100"
            :src="addressUrls.identityagainst"
            alt=""
          />
        </div>
      </div>
    </ws-form>
    <!-- 提交 -->
    <div style="text-align: right; padding: 10px" class="center">
      <el-button
        class="bg-bottom"
        type="primary"
        size="small"
        @click="submit(deptBudgetList)"
        >提交</el-button
      >
    </div>
  </div>
</template>
<script>
import { provinceAndCityData, CodeToText } from 'element-china-area-data'
import { packList } from '@/model/contarct/index'
import { getidentity, getbank, addDriver } from '@/model/transport/index'
import WsUpload from '@/components/WsUpload'
import mapDrag from '@/components/mapdrag/mapdrag'
import { dayjs, fmoney, EventBus } from 'base-core-lib'
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,
      selectedOptions: [],
      window: '',
      district: null,
      citylist: [],
      compId: localStorage.getItem('ws-pf_compId'),
      mainReportAdd: {},
      size: 10,
      value1: '',
      unitList: [],
      accessoryBankTFs: false,
      addressUrls: {},
      freightspace: [
        {
          carNumber: '',
          carModel: '高栏',
          carModelKey: '1',
          carLength: '13',
          carLengthKey: '1',
          carLoad: '',
          yearManufacture: '',
        },
      ],
      freightspace1: [
        {
          accountTypeFlag: '1',
          payeeName: '',
          payeeNumberCard: '',
          compName: '',
          bankDeposit: '',
          addressUrlArray: [],
          bankCard: '',
        },
      ],
      name: '',
      age: '',
    }
  },
  activated() {
    this.loaddata()
    this.showType = this.isShow
  },
  computed: {},
  methods: {
    cardchange(e) {
      if (e.length == 15 || e.length == 18) {
        this.IdCard(e)
      }
    },
    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() {
      // 车型
      packList({ constId: 'TRAN1' })
        .toPromise()
        .then((response) => {
          this.carModelList = response
        })
      // 车长
      packList({ constId: 'TRAN2' })
        .toPromise()
        .then((response) => {
          this.carLengthList = response
        })
    },
    uploadSuccessHandle(index, e, fileList) {
      console.log(index, e, fileList)
      const that = this

      getidentity({ personImg: e.url })
        .toPromise()
        .then((response) => {
          for (var i = 0; i < this.freightspace1.length; i++) {
            if (i == index) {
              this.freightspace1[i].cardAddressUrl = e.url
              this.freightspace1[i].payeeName = response.recPerson
              this.freightspace1[i].payeeNumberCard = response.recPersonNo
            }
          }
        })
    },
    uploadSuccessHandle1(index, e, fileList) {
      console.log(index, e, fileList)
      const that = this
      // this.deptBudgetList.cardAddressUrl = e.url
      getbank({ bankImg: e.url })
        .toPromise()
        .then((response) => {
          for (var i = 0; i < this.freightspace1.length; i++) {
            if (i == index) {
              this.freightspace1[i].payeeAddressUrl = e.url
              this.freightspace1[i].bankCard = response.bankNo
              this.freightspace1[i].bankDeposit = response.bankName
              this.freightspace1[i].bankDepositBranchList =
                response.bankNameZhihang
            }
          }
        })
    },
    uploadSuccessHandletravel(e) {
      this.$set(this.addressUrls, 'travel', e.url)
    },
    uploadSuccessHandledrive(e) {
      this.$set(this.addressUrls, 'drive', e.url)
    },
    uploadSuccessHandleway(e) {
      this.$set(this.addressUrls, 'way', e.url)
      this.addressUrls.way = e.url
    },
    uploadSuccessHandlequalification(e) {
      this.$set(this.addressUrls, 'qualification', e.url)
    },
    uploadSuccessHandleidentityjust(e) {
      this.$set(this.addressUrls, 'identityjust', e.url)
    },
    uploadSuccessHandleidentityagainst(e) {
      this.$set(this.addressUrls, 'identityagainst', e.url)
    },
    selectbankDepositBranch(e, index) {
      this.freightspace1[index].bankDepositBranch = e
    },

    // 关闭 dialog时 处理文件url 初始化upload组件
    handleClose() {
      this.dialogViewSpareMoney = false
    },
    add() {
      this.freightspace.push({
        carNumber: '',
        carModel: '高栏',
        carModelKey: '1',
        carLength: '13',
        carLengthKey: '1',
        carLoad: '',
        yearManufacture: '',
      })
    },
    del(index) {
      if (this.freightspace.length > 1) {
        this.freightspace.splice(index, 1)
      }
    },
    add1() {
      this.freightspace1.push({
        accountTypeFlag: '1',
        payeeName: '',
        payeeNumberCard: '',
        compName: '',
        bankDeposit: '',
        bankCard: '',
        addressUrlArray: [],
      })
    },
    del1(index) {
      if (this.freightspace1.length > 1) {
        this.freightspace1.splice(index, 1)
      }
    },
    identitycardfujian(item) {},
    handleChange(value) {
      this.selectedOptions = value
    },
    returnsales() {
      this.deptBudgetList = {}
      this.freightspace = [
        {
          carNumber: '',
          carModel: '高栏',
          carModelKey: '1',
          carLength: '13',
          carLengthKey: '1',
          carLoad: '',
          yearManufacture: '',
        },
      ]
      this.freightspace1 = [
        {
          accountTypeFlag: '1',
          payeeName: '',
          payeeNumberCard: '',
          compName: '',
          bankDeposit: '',
          addressUrlArray: [],
          bankCard: '',
        },
      ]
      this.addressUrls = {},
      this.selectedOptions = [],
      this.$router.go(-1)
    },
    // confirmPosition() {
    //   this.draggable = false
    // },
    // 上传附件
    uploadSuccess(data, files, url) {
      console.log(data, files, url)

      // this.deptBudgetList.
      // this.formData.append('files', files)
      // this.feedbackObj.uploadNameAttachment = data.appendixName
      // this.feedbackObj.pathUploadAttachment = data.appendixPath
      // // this.newAppendixs = files
      // this.onChangeFlag = true
    },
    selectcarModel(e) {
      for (var i = 0; i < this.carModelList.length; i++) {
        if (this.carModelList[i].constValue == e) {
          this.deptBudgetList.carModelKey = this.carModelList[i].constKey
        }
      }
    },
    selectcarLength(e) {
      for (var i = 0; i < this.carLengthList.length; i++) {
        if (this.carLengthList[i].constValue == e) {
          this.deptBudgetList.carLengthKey = this.carLengthList[i].constKey
        }
      }
    },
    onChange(files) {
      this.fileNum = files
      this.$refs.upload.handleSaveBill().then((res) => {
        console.log(files)
      })
    },

    submit() {
      if (!this.deptBudgetList.driverName) {
        EventBus.$emit('error', '司机姓名不能为空')
        return
      }
      if (
        this.deptBudgetList.driverName.length < 2 ||
        this.deptBudgetList.driverName.length > 10
      ) {
        EventBus.$emit('error', '司机姓名输入错误')
        return
      }
      if (!this.deptBudgetList.driverPhone) {
        EventBus.$emit('error', '司机手机不能为空')
        return
      }
      if (this.deptBudgetList.driverPhone.length != 11) {
        console.log(this.deptBudgetList.driverPhone.length)
        EventBus.$emit('error', '司机手机号输入有误')
        return
      }
      // if (!this.deptBudgetList.numberCard) {
      //   EventBus.$emit('error', '司机身份证不能为空')
      //   return
      // }
      // if (this.deptBudgetList.numberCard.length != 18) {
      //   EventBus.$emit('error', '司机身份证号输入错误')
      //   return
      // }
      for (var i = 0; i < this.freightspace.length; i++) {
        if (this.freightspace[i].carNumber == '') {
          EventBus.$emit('error', '车牌号不能为空')
          return
        }
        if (this.freightspace[i].carNumber.length != 7) {
          EventBus.$emit('error', '车牌号输入错误')
          return
        }
        // if (this.freightspace[i].carLoad == '') {
        //   EventBus.$emit('error', '载重不能为空')
        //   return
        // }
        // if (this.freightspace[i].carLength > 50) {
        //   EventBus.$emit('error', '载重量输入错误')
        //   return
        // }
        // if (this.freightspace[i].yearManufacture == '') {
        //   EventBus.$emit('error', '出厂年份不能为空')
        //   return
        // }
        // if (this.freightspace[i].yearManufacture.length != 4) {
        //   EventBus.$emit('error', '出厂年份输入错误')
        //   return
        // }
      }
      // for (var i = 0; i < this.freightspace1.length; i++) {
      //   if (this.freightspace1[i].bankCard == '') {
      //     EventBus.$emit('error', '银行卡账号不能为空')
      //     return
      //   }
      //   if (this.freightspace1[i].bankDeposit == '') {
      //     EventBus.$emit('error', '开户行不能为空')
      //     return
      //   }
      //   if (this.freightspace1[i].bankDepositBranch == '') {
      //     EventBus.$emit('error', '开户支行不能为空')
      //     return
      //   }
      //   if (
      //     this.freightspace1[i].accountTypeFlag == 1 &&
      //     this.freightspace1[i].payeeName == ''
      //   ) {
      //     EventBus.$emit('error', '收款人姓名不能为空')
      //     return
      //   }
      //   if (
      //     this.freightspace1[i].accountTypeFlag == 1 &&
      //     this.freightspace1[i].payeeNumberCard == ''
      //   ) {
      //     EventBus.$emit('error', '收款人身份证号码不能为空')
      //     return
      //   }
      //   if (
      //     (this.freightspace1[i].accountTypeFlag == 1 &&
      //       this.freightspace1[i].payeeName.length < 2) ||
      //     (this.freightspace1[i].accountTypeFlag == 1 &&
      //       this.freightspace1[i].payeeName.length > 10)
      //   ) {
      //     EventBus.$emit('error', '收款人姓名输入错误')
      //     return
      //   }
      //   console.log(this.freightspace1[i].payeeNumberCard != 18)
      //   if (
      //     this.freightspace1[i].accountTypeFlag == 1 &&
      //     this.freightspace1[i].payeeNumberCard.length != 18
      //   ) {
      //     EventBus.$emit('error', '收款人身份证号输入错误')
      //     return
      //   }
      //   if (
      //     this.freightspace1[i].accountTypeFlag == 2 &&
      //     this.freightspace1[i].compName == ''
      //   ) {
      //     EventBus.$emit('error', '企业名称不能为空')
      //     return
      //   }
      //   if (
      //     (this.freightspace1[i].accountTypeFlag == 2 &&
      //       this.freightspace1[i].compName.length < 2) ||
      //     (this.freightspace1[i].accountTypeFlag == 2 &&
      //       this.freightspace1[i].compName.length > 30)
      //   ) {
      //     EventBus.$emit('error', '企业名称输入有误')
      //     return
      //   }
      // }
      // if (!this.addressUrls.travel) {
      //   EventBus.$emit('error', '行驶证不能为空')
      //   return
      // }
      // if (!this.addressUrls.drive) {
      //   EventBus.$emit('error', '驾驶证不能为空')
      //   return
      // }
      if (!this.addressUrls.way) {
        this.addressUrls.way='$'
      }
      if (!this.addressUrls.qualification) {
        this.addressUrls.qualification='$'
      }
      // if (!this.addressUrls.identityjust) {
      //   EventBus.$emit('error', '身份证正面不能为空')
      //   return
      // }
      // if (!this.addressUrls.identityagainst) {
      //   EventBus.$emit('error', '身份证反面不能为空')
      //   return
      // }
      var arr = []
      var arr1=[]
      for (let key in this.addressUrls) {
        if(key=='identityjust'||key=='identityagainst'){
          arr.push(this.addressUrls[key])
        }else{
          arr1.push(this.addressUrls[key])
        }
      }

      this.$refs.deptBudgetList.validate((valid) => {
        if (valid) {
          this.deptBudgetList.compId = localStorage.getItem('ws-pf_compId')
          this.deptBudgetList.residentCityProvincial =
            CodeToText[this.selectedOptions[0]]
          this.deptBudgetList.residentCityMunicipal =
            CodeToText[this.selectedOptions[1]]
          this.deptBudgetList.addressUrl = arr1.toString()
          this.deptBudgetList.cardAddressUrl = arr.toString()
          this.deptBudgetList.driverCarInfoList = this.freightspace
          this.deptBudgetList.driverPayeeInfoList = this.freightspace1
          addDriver(this.deptBudgetList)
            .toPromise()
            .then((response) => {
              this.$message.success('添加成功')
              this.deptBudgetList = {}
              this.freightspace = [
                {
                  carNumber: '',
                  carModel: '高栏',
                  carModelKey: '1',
                  carLength: '13',
                  carLengthKey: '1',
                  carLoad: '',
                  yearManufacture: '',
                },
              ]
              this.freightspace1 = [
                {
                  accountTypeFlag: '1',
                  payeeName: '',
                  payeeNumberCard: '',
                  compName: '',
                  bankDeposit: '',
                  addressUrlArray: [],
                  bankCard: '',
                },
              ],
              this.addressUrls = {},
              this.selectedOptions = [],
              this.$router.go(-1)
            })
        } else {
          EventBus.$emit('error', this.$t('showMessage.asteriskRequired'))
          return false
        }
      })
    },
    resetForm(deptBudgetList) {
      this.$refs[deptBudgetList].resetFields()
    },
  },
}
</script>

<style lang="scss" scoped>
.position {
  position: relative;
  background: #f6f7fc;
  height: 124px;
  margin-top: 20px;
  border: 1px solid #d8dce6;
  border-radius: 3px;
}
.add,
.del {
  position: absolute;
  top: 10px;
  cursor: pointer;
  margin-left: 17px;
}
.del {
  margin-left: 50px;
}
.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;
}
.readonly {
  position: relative;
}
.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;
}
.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;
      }
    }
  }
}
.avatar-uploader {
  margin: 0 5px;
}
.collapse-bottom {
  margin-bottom: 20px;
}
.input-main .textarea .el-textarea__inner {
  width: 100%;
  z-index: 1;
}
.el-form-item__label {
  text-align: center;
}

// 控制select为只读的时候显示样式
/deep/.ws-class-table-col {
  height: auto;
  padding: 0px 2px;
  /deep/.el-input__inner {
    padding: 0px 2px;
  }
}
.winseaview-view {
  padding: 0 0 20px;
}
.container {
  overflow: scroll;
  height: 93vh;
}
/deep/.ws-info-table .el-form-item .el-form-item__label {
  // width: 110px;
  width: 50%;
  text-align: center;
}
/deep/.ws-info-table .el-form-item {
  width: 25%;
}
.el-form {
  margin-top: 50px;
}
.readonly {
  width: 16%;
}
.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.33%;
  border-top: 1px solid #d8dce6;
  border-bottom: 0px;
  background: #f6f7fc;
}
.trucks {
  color: #69708c;
  border: 1px solid #d8dce6;
  padding: 12px;
  border-radius: 3px;
  // margin: 8px 0;
  border: 0px;
  font-size: 14px;
  color: #8890b1;
  // width: 100%;
}
/deep/.trucks .ws-info-table,
/deep/.trucks .ws-info-table .el-form-item,
/deep/.trucks .ws-info-table .el-form-item .el-form-item__content {
  border: none;
  background: #f6f7fc;
  border-radius: 4px;
}
/deep/.trucks .el-table__expanded-cell,
/deep/.trucks .ws-info-table .el-form-item .el-form-item__label,
/deep/.trucks .ws-info-table .el-form-item .el-form-item__content {
  background: transparent;
}
/deep/.trucks .ws-info-table .el-form-item .el-form-item__label {
  color: #8890b1;
}
/deep/.trucks .el-table:before {
  height: 0;
}
.gathering {
  background: #f5f7fa;
}
/deep/.gathering .ws-info-table {
  border-left: none;
  border: none;
}
/deep/.gathering .driver {
  padding: 10px;
}
.driver {
  color: #5473e8;
  line-height: 20px;
  font-size: 14px;
}
/deep/.gathering .el-form-item .el-form-item__label {
  background: #f5f7fa;
  text-align: center;
  border-right: 1px solid #d8dce6;
  width: 140px;
}
/deep/.gathering .ws-info-table .el-form-item .el-form-item__content {
  border: none;
  background: #f6f7fc;
}
/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: none;
}
/deep/.gathering .ws-info-table .el-form-item.compname {
  width: 100%;
}
.button.el-button--primary,
.button-green.el-button--primary,
.button-yellow.el-button--primary {
  height: 28px;
  background: #edf1ff;
  border-radius: 4px;
  color: #5473e8;
  font-size: 12px;
  text-align: center;
  line-height: 28px;
  margin: 0 10px;
  padding: 0 10px;
  border: 1px solid transparent;
}
.button-green.el-button--primary {
  background: #ecf8f9;
  color: #50cad4;
}
.button-yellow.el-button--primary {
  background: #fff6eb;
  color: #ff9f24;
}
.el-button--primary {
  background: #5878e8;
  border-color: #5878e8;
}
.drivermessage {
  position: relative;
}
.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-title {
  position: relative;
  padding: 10px;
  font-weight: 600;
}
.bg-left {
  padding-left: 30px;
}
.bg-right {
  padding-right: 10px;
  text-align: right;
}
.bg-bottom {
  margin: 15px 0px;
}
.small-title::before {
  position: absolute;
  content: '';
  display: block;
  background: #5473e8;
  width: 4px;
  height: 14px;
  left: 0px;
  top: 13px;
  padding: 4px 2px;
}
.small,
.big {
  color: #ccc;
  line-height: 16px;
  position: absolute;
  right: -50px;
  top: 44px;
  border: 1px solid #ccc;
  padding: 5px 10px;
  border-radius: 20px;
}
.big {
  color: #f46060;
  background: #ffeeee;
}
</style>