yiliangyiyun-pc-jj/src/views/tranManagement/tranManagementDriverEdit.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="drivermessage">
        <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
              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 }}
            <img
              width="22"
              height="22"
              class="add"
              @click="add"
              src="../../../public/img/add.png"
              alt
            />
            <img
              width="22"
              height="22"
              class="del"
              @click="del(item, 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="
                  (value) => {
                    selectcarModel(value, index)
                  }
                "
              >
                <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="
                  (value) => {
                    selectcarLength(value, index)
                  }
                "
              >
                <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>
        </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 deptBudgetList.driverPayeeInfoList"
      >
        <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(item, 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 label="开户支行" span="1" prop="bankDepositBranch" class="el-car">
              <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,
  TextToCode
} from 'element-china-area-data'
import {
  lookDriver,
  deltrancar,
  deltranprocess,
  getidentity,
  getbank,
  packList,
  editdriver
} 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: [],
      window: '',
      district: null,
      citylist: [],
      compId: sessionStorage.getItem('ws-pf_compId'),
      mainReportAdd: {},
      appendixIdsAdd: '',
      size: 10,
      value1: '',
      fileList:[],
      unitList: [],
      accessoryBankTFs: false,
      freightspace: [
        {
          carNumber: '',
          carModel: '高栏',
          carModelKey: '1',
          carLength: '13',
          carLengthKey: '1',
          carLoad: '',
          yearManufacture: ''
        }
      ],
      freightspace1: [
        {
          accountTypeFlag: '1',
          cardAddressUrl: '',
          cardAddressUrlArray: [],
          payeeName: '',
          payeeNumberCard: '',
          compName: '',
          bankDeposit: '',
          bankCard: ''
        }
      ],
      name: '',
      age: '',
      addressUrls: {}
    }
  },
  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.selectedOptions.push()
          for (var i = 0; i < response.driverPayeeInfoList.length; i++) {
            if (response.driverPayeeInfoList[i].cardAddressUrl != null) {
              response.driverPayeeInfoList[
                i
              ].cardAddressUrlArray = response.driverPayeeInfoList[
                i
              ].cardAddressUrl.split(',')
            } else {
              response.driverPayeeInfoList[i].cardAddressUrlArray = []
            }
          }
          this.IdCard(response.numberCard)
          console.log(this.age)
          this.deptBudgetList = Object.assign({}, response)
          var tmp = []
          tmp[0] = TextToCode[this.deptBudgetList.residentCityProvincial].code

          tmp[1] =
            TextToCode[this.deptBudgetList.residentCityProvincial][
              this.deptBudgetList.residentCityMunicipal
            ].code
          this.selectedOptions = tmp
           
        })
      console.log(11111)
      // 车型
      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.deptBudgetList.driverPayeeInfoList.length;
            i++
          ) {
            if (i == index) {
              this.deptBudgetList.driverPayeeInfoList[i].cardAddressUrl = e.url
              this.deptBudgetList.driverPayeeInfoList[i].payeeName =
                response.recPerson
              this.deptBudgetList.driverPayeeInfoList[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.deptBudgetList.driverPayeeInfoList.length;
            i++
          ) {
            if (i == index) {
              this.deptBudgetList.driverPayeeInfoList[i].payeeAddressUrl = e.url
              this.deptBudgetList.driverPayeeInfoList[i].bankCard =
                response.bankNo
              this.deptBudgetList.driverPayeeInfoList[i].bankDeposit =
                response.bankName
              this.deptBudgetList.driverPayeeInfoList[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)
    },
    // 关闭 dialog时 处理文件url 初始化upload组件
    handleClose() {
      this.dialogViewSpareMoney = false
    },
    add() {
      this.deptBudgetList.driverCarInfoList.push({
        carNumber: '',
        carModel: '高栏',
        carModelKey: '1',
        carLength: '13',
        carLengthKey: '1',
        carLoad: '',
        yearManufacture: ''
      })
    },
    del(row, index) {
      if (this.deptBudgetList.driverCarInfoList.length > 1) {
        if (row.id) {
          deltrancar({ id: row.id })
            .toPromise()
            .then(response => {
              this.$message.success('删除成功')
            })
        }
        this.deptBudgetList.driverCarInfoList.splice(index, 1)
      }
    },
    add1() {
      this.deptBudgetList.driverPayeeInfoList.push({
        accountTypeFlag: '1',
        cardAddressUrl: '',
        cardAddressUrlArray: [],
        payeeName: '',
        payeeNumberCard: '',
        compName: '',
        bankDeposit: '',
        bankCard: ''
      })
    },
    del1(row, index) {
      if (this.deptBudgetList.driverPayeeInfoList.length > 1) {
        if (row.id) {
          deltranprocess({ id: row.id })
            .toPromise()
            .then(response => {
              this.$message.success('删除成功')
            })
        }
        this.deptBudgetList.driverPayeeInfoList.splice(index, 1)
      }
    },
    identitycardfujian(item) {},
    handleChange(value) {
      this.selectedOptions = value
      console.log(this.selectedOptions)
    },
    returnsales() {
      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, index) {
      for (var i = 0; i < this.carModelList.length; i++) {
        if (this.carModelList[i].constValue == e) {
          this.deptBudgetList.driverCarInfoList[
            index
          ].carModelKey = this.carModelList[i].constKey
        }
      }
    },
    selectcarLength(e, index) {
      for (var i = 0; i < this.carLengthList.length; i++) {
        if (this.carLengthList[i].constValue == e) {
          this.deptBudgetList.driverCarInfoList[
            index
          ].carLengthKey = this.carLengthList[i].constKey
        }
      }
    },
    selectbankDepositBranch(e, index) {
      console.log(e, index)
      this.deptBudgetList.driverPayeeInfoList[index].bankDepositBranch = e
    },
    onChange(files) {
      this.fileNum = files
      this.$refs.upload.handleSaveBill().then(res => {
        console.log(files)
      })
    },

    submit() {
      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]]
          editdriver(this.deptBudgetList)
            .toPromise()
            .then(response => {
              
              this.$message.success('添加成功')
              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;
}
.add,
.del {
  position: absolute;
  margin-left: 23px;
  top: 27px;
  cursor: pointer;
}
.del {
  margin-left: 70px;
}
.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;
}
.title::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 30px;
  background: #5473e8;
  position: absolute;
  left: 0;
}
//蓝标
.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;
}
.el-col {
  background: #f6f7fc;
}
/deep/.ws-info-table .el-form-item .el-form-item__content {
  padding: 0 25px;
  border-left: 1px solid #cdd2dc;
}
/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;
      }
    }
  }
}
.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;
}
.ce {
  width: 900px;
  margin: 0 auto;
}
.driver {
  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;
}
.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.el-car.el-form-item--small {
  width: 33.333%;
}
.trucks {
  color: #69708c;
  border: 1px solid #d8dce6;
  width: 100%;
  padding: 12px;
  border-radius: 3px;
  margin: 10px 0;
  background: #f6f7fc;
}
/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;
}
/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: #f6f7fc;
}
/deep/.trucks .ws-info-table .el-form-item .el-form-item__label {
  color: #8890b1;
}
/deep/.trucks .el-table:before {
  height: 0;
}
.gathering {
  background: #f5f7fa;
  border: 1px solid #d8dce6;
  border-radius: 3px;
  width: 100%;
  margin-top: 15px;
}
/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.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,
.big {
  color: #ccc;
  line-height: 16px;
  position: absolute;
  right: -50px;
  top: 6px;
  border: 1px solid #ccc;
  padding: 5px 10px;
  border-radius: 20px;
}
.big {
  color: #f46060;
  background: #ffeeee;
}
</style>