yiliangyiyun-pc/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="flex">
        <div class="driver">司机信息</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>
        {{ age }}岁
      </div>
    </ws-form>

    <ws-form
      ref="deptBudgetList"
      :rules="mainReportAdd"
      :model="deptBudgetList"
    >
      <div
        style="width: 100%"
        class="flex position"
        v-for="(item, index) in freightspace"
      >
        <div class="flex">
          <div class="driver">货车信息-{{ index + 1 }}</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"
            >
              <ws-select
                v-model="item.carLength"
                placeholder=""
                class="typeselect"
                @change="selectcarLength"
              >
                <ws-option
                  v-for="item in carLengthList"
                  :key="item.constKey"
                  :label="item.constValue"
                  :value="item.constValue"
                />
              </ws-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>
          <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>
      </div>
    </ws-form>
    <ws-form
      ref="deptBudgetList"
      :rules="mainReportAdd"
      :model="deptBudgetList"
    >
      <div
        style="width: 100%"
        class="flex position"
        v-for="(item, index) in freightspace1"
      >
        <div class="flex">
          <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"
            >
              <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 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>
          <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>
      </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" 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" 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" 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" 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" 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" 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'
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: {},
      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
        })
    },
    confirmPositioncity() {
      this.listDate.level = 'city'
      this.listDate.country = this.name
    },
    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.$router.push({ path: 'tranManagementDriver' })
    },
    // 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() {
      var arr = []
      for (let key in this.addressUrls) {
        arr.push(this.addressUrls[key])
      }
      this.$refs.deptBudgetList.validate((valid) => {
        if (valid) {
          this.deptBudgetList.compId = sessionStorage.getItem('ws-pf_compId')
          this.deptBudgetList.residentCityProvincial =
            CodeToText[this.selectedOptions[0]]
          this.deptBudgetList.residentCityMunicipal =
            CodeToText[this.selectedOptions[1]]
          this.deptBudgetList.addressUrl = arr.toString()
          this.deptBudgetList.driverCarInfoList = this.freightspace
          this.deptBudgetList.driverPayeeInfoList = this.freightspace1
          console.log(this.deptBudgetList)
          addDriver(this.deptBudgetList)
            .toPromise()
            .then((response) => {
              this.$message.success('添加成功')
              this.deptBudgetList = {}
              this.$router.push({ path: 'tranManagementDriver' })
            })
        } else {
          EventBus.$emit('error', this.$t('showMessage.asteriskRequired'))
          return false
        }
      })
    },
    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;
}
.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;
}
/deep/.ws-info-table .el-form-item .el-form-item__content {
  padding: 0 25px;
  border-left: 1px solid #cdd2dc;
  background: #fafbfc;
}
/deep/.ws-info-table .el-form-item .el-form-item__label {
  width: 140px;
  text-align: center;
  background: #f0f2f6;
  // border: 1px solid #cdd2dc;
}
.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;
}
.bg-left {
  padding-left: 30px;
}
.bg-right {
  padding-right: 10px;
  text-align: right;
}
.bg-bottom {
  margin: 15px 0px;
}
.wenzi {
  width: 900px;
  margin: 0 auto;
}
.wenzi h3 {
  display: inline-block;
  left: 10px;
}
.wenzi p {
  display: inline-block;
}
.center {
  width: 900px;
  margin: 0 auto;
}
.el-form-item__label {
  text-align: center;
}
.el-table {
  width: 1240px;
}
.ce {
  width: 900px;
  margin: 0 auto;
}
.driver {
  width: 120px;
  margin-top: 10px;
  font-weight: bold;
}

// 控制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: 80px;
}
/deep/.ws-info-table .el-form-item {
  width: 25%;
}
.el-textarea__inner {
  display: none;
}
.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.3%;
}
</style>