Warehouse_management_ui/src/views/basicdata/fleet/carManage-add-or-update.vue

<template>
  <el-dialog
    :title="!dataForm.id ? '车辆注册' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible" width="80%"
  >
    <el-form :model="dataFormD" :rules="dataRule" ref="dataFormD" @keyup.enter.native="dataFormSubmit()"
             label-width="125px"
    >
      <el-form-item label="车队名称" prop="fleetCompanyId" style="width: 325px">
        <el-select
          v-model="dataFormD.fleetCompanyId"
          filterable
          remote
          :disabled="doNot"
          reserve-keyword
          placeholder="请输入关键词"
          :remote-method="handleSelect"
        >
          <el-option
            v-for="item in optionsProjectTypeItem"
            :key="item.id"
            :label="item.companyName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="车牌号" prop="carNum" style="width: 325px">
        <el-input v-model="dataFormD.carNum" style="width: 200px" :disabled="doNot" placeholder="车牌号"></el-input>
      </el-form-item>
      <el-form-item label="驾驶员" prop="carNum" style="width: 325px">
        <el-input v-model="dataFormD.driverName" style="width: 200px" :disabled="doNot" placeholder="驾驶员"></el-input>
      </el-form-item>
      <el-form-item label="挂号" prop="hangNum" style="width: 325px">
        <el-input v-model="dataFormD.hangNum" style="width: 200px" :disabled="doNot" placeholder="挂号"></el-input>
      </el-form-item>
      <el-form-item label="燃油类型" prop="fuelType" style="width: 325px">
        <el-input v-model="dataFormD.fuelType" style="width: 200px" :disabled="doNot" placeholder="燃油类型"></el-input>
      </el-form-item>
      <el-form-item label="车辆类型" prop="carType" style="width: 325px">
        <el-input v-model="dataFormD.carType" style="width: 200px" :disabled="doNot" placeholder="车辆类型"></el-input>
      </el-form-item>
      <el-form-item label="车辆名称" prop="carName" style="width: 325px">
        <el-input v-model="dataFormD.carName" style="width: 200px" :disabled="doNot" placeholder="车辆名称"></el-input>
      </el-form-item>
      <el-form-item label="车辆品牌" prop="carBrand" style="width: 325px">
        <el-input v-model="dataFormD.carBrand" style="width: 200px" :disabled="doNot" placeholder="车辆品牌"></el-input>
      </el-form-item>
      <el-form-item label="制造单位" prop="manufactureUnit" style="width: 325px">
        <el-input v-model="dataFormD.manufactureUnit" style="width: 200px" :disabled="doNot" placeholder="制造单位"></el-input>
      </el-form-item>
      <el-form-item label="发证机关" prop="officeOfCertificate" style="width: 325px">
        <el-input v-model="dataFormD.officeOfCertificate" style="width: 200px" :disabled="doNot" placeholder="发证机关"></el-input>
      </el-form-item>
      <el-form-item label="牵引车辆型号" prop="pullCarType" style="width: 325px">
        <el-input v-model="dataFormD.pullCarType" style="width: 200px" :disabled="doNot" placeholder="牵引车辆型号"></el-input>
      </el-form-item>
      <el-form-item label="牵引车车架号" prop="pullCarShelfNum" style="width: 325px">
        <el-input v-model="dataFormD.pullCarShelfNum" style="width: 200px" :disabled="doNot" placeholder="牵引车车架号"></el-input>
      </el-form-item>
      <el-form-item label="挂车型号" prop="mountCarType" style="width: 325px">
        <el-input v-model="dataFormD.mountCarType" style="width: 200px" :disabled="doNot" placeholder="挂车型号"></el-input>
      </el-form-item>
      <el-form-item label="挂车车架号" prop="mountCarNum" style="width: 325px">
        <el-input v-model="dataFormD.mountCarNum" style="width: 200px" :disabled="doNot" placeholder="挂车车架号"></el-input>
      </el-form-item>
      <el-form-item label="发动机型号" prop="engine" style="width: 325px">
        <el-input v-model="dataFormD.engine" style="width: 200px" :disabled="doNot" placeholder="发动机型号"></el-input>
      </el-form-item>
      <el-form-item label="核载人数" prop="carLoadPersion" style="width: 325px">
        <el-input v-model="dataFormD.carLoadPersion" style="width: 200px" :disabled="doNot" placeholder="核载人数"></el-input>
      </el-form-item>
      <el-form-item label="购车日期" prop="buyCarDate" style="width: 325px">
        <!--            <el-input v-model="dataForm.buyCarDate" placeholder="购车日期"></el-input>-->
        <el-date-picker
          style="width: 200px"
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="dataFormD.buyCarDate"
          type="date"
          :disabled="doNot"
          placeholder="创建时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="注册日期" prop="regiestDate" style="width: 325px">
        <!--            <el-input v-model="dataForm.regiestDate" placeholder="注册日期"></el-input>-->
        <el-date-picker
          style="width: 200px"
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="dataFormD.regiestDate"
          type="date"
          :disabled="doNot"
          placeholder="创建时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="报废日期" prop="abandonDate" style="width: 325px">
        <!--            <el-input v-model="dataForm.abandonDate" placeholder="报废日期"></el-input>-->
        <el-date-picker
          style="width: 200px"
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="dataFormD.abandonDate"
          type="date"
          :disabled="doNot"
          placeholder="创建时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="外阔尺寸mm" prop="outerSize" style="width: 325px">
        <el-input v-model="dataFormD.outerSize" style="width: 200px" :disabled="doNot" placeholder="外阔尺寸mm"></el-input>
      </el-form-item>
      <el-form-item label="总重量kg" prop="sumWeight" style="width: 325px">
        <el-input v-model="dataFormD.sumWeight" style="width: 200px" :disabled="doNot" placeholder="总重量kg"></el-input>
      </el-form-item>
      <el-form-item label="核定重量kg" prop="vouchWeight" style="width: 325px">
        <el-input v-model="dataFormD.vouchWeight" style="width: 200px" :disabled="doNot" placeholder="核定重量kg"></el-input>
      </el-form-item>
      <el-form-item label="装备质量kg" prop="equipWeight" style="width: 325px">
        <el-input v-model="dataFormD.equipWeight" style="width: 200px" :disabled="doNot" placeholder="装备质量kg"></el-input>
      </el-form-item>
    </el-form>
    <el-collapse accordion>
      <el-form label-width="200px">
        <el-collapse-item title="图片上传">
          <div style="width: 50%;float: left;">
            <el-form-item label="行驶证头图片" style="width: 100%;">
              <el-upload
                style="width: 300px;float:left;"
                :action="uploadImgUrl"
                :on-preview="handlePreview"
                :on-remove="(res,file)=>{handleRemove(0,res,file)}"
                :before-remove="beforeRemove"
                :on-success="(res,file)=>{handleAvatarSuccess(1,res,file)}"
                multiple
                :limit="1"
                :headers="headers"
                :on-exceed="handleExceed">
                <el-button size="small" :disabled="doNot" type="primary">点击上传</el-button>
                <el-button size="small" :disabled="doNot" type="primary" v-if="fTmsorderbillsattachs[0].attachUrl" @click="preview(0)">预览</el-button>
              </el-upload>
              </el-form-item>
            <el-form-item label="运营证头图片" style="width: 100%;">
              <el-upload
                style="width: 300px"
                :action="uploadImgUrl"
                :on-preview="handlePreview"
                :on-remove="(res,file)=>{handleRemove(2,res,file)}"
                :before-remove="beforeRemove"
                :on-success="(res,file)=>{handleAvatarSuccess(3,res,file)}"
                multiple
                :limit="1"
                :headers="headers"
                :on-exceed="handleExceed">
                <el-button size="small" :disabled="doNot" type="primary">点击上传</el-button>
                <el-button size="small" :disabled="doNot" type="primary" v-if="fTmsorderbillsattachs[2].attachUrl" @click="preview(2)">预览</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item label="营运挂载图片" style="width: 100%;">
              <el-upload
                style="width: 300px"
                :action="uploadImgUrl"
                :on-preview="handlePreview"
                :on-remove="(res,file)=>{handleRemove(4,res,file)}"
                :before-remove="beforeRemove"
                :on-success="(res,file)=>{handleAvatarSuccess(5,res,file)}"
                multiple
                :limit="1"
                :headers="headers"
                :on-exceed="handleExceed">
                <el-button size="small" :disabled="doNot" type="primary">点击上传</el-button>
                <el-button size="small" :disabled="doNot" type="primary" v-if="fTmsorderbillsattachs[4].attachUrl" @click="preview(4)">预览</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item label="二级维护图片" style="width: 100%;">
              <el-upload
                style="width: 300px"
                :action="uploadImgUrl"
                :on-preview="handlePreview"
                :on-remove="(res,file)=>{handleRemove(6,res,file)}"
                :before-remove="beforeRemove"
                :on-success="(res,file)=>{handleAvatarSuccess(7,res,file)}"
                multiple
                :limit="1"
                :headers="headers"
                :on-exceed="handleExceed">
                <el-button size="small" :disabled="doNot" type="primary">点击上传</el-button>
                <el-button size="small" :disabled="doNot" type="primary" v-if="fTmsorderbillsattachs[6].attachUrl" @click="preview(6)">预览</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item label="承运人保险图片" style="width: 100%;">
              <el-upload
                style="width: 300px"
                :action="uploadImgUrl"
                :on-preview="handlePreview"
                :on-remove="(res,file)=>{handleRemove(8,res,file)}"
                :before-remove="beforeRemove"
                :on-success="(res,file)=>{handleAvatarSuccess(9,res,file)}"
                multiple
                :limit="1"
                :headers="headers"
                :on-exceed="handleExceed">
                <el-button size="small" :disabled="doNot" type="primary">点击上传</el-button>
                <el-button size="small" :disabled="doNot" type="primary" v-if="fTmsorderbillsattachs[8].attachUrl" @click="preview(8)">预览</el-button>
              </el-upload>
            </el-form-item>
          </div>
          <div style="width: 50%;float: left;">
            <el-form-item label="行驶证挂件图片" style="width: 100%;">
              <el-upload
                style="width: 300px"
                :action="uploadImgUrl"
                :on-preview="handlePreview"
                :on-remove="(res,file)=>{handleRemove(1,res,file)}"
                :before-remove="beforeRemove"
                :on-success="(res,file)=>{handleAvatarSuccess(2,res,file)}"
                multiple
                :limit="1"
                :headers="headers"
                :on-exceed="handleExceed">
                <el-button size="small" :disabled="doNot" type="primary">点击上传</el-button>
                <el-button size="small" :disabled="doNot" type="primary" v-if="fTmsorderbillsattachs[1].attachUrl" @click="preview(1)">预览</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item label="技术评定证书图片" style="width: 100%;">
              <el-upload
                style="width: 300px"
                :action="uploadImgUrl"
                :on-preview="handlePreview"
                :on-remove="(res,file)=>{handleRemove(3,res,file)}"
                :before-remove="beforeRemove"
                :on-success="(res,file)=>{handleAvatarSuccess(4,res,file)}"
                multiple
                :limit="1"
                :headers="headers"
                :on-exceed="handleExceed">
                <el-button size="small" :disabled="doNot" type="primary">点击上传</el-button>
                <el-button size="small" :disabled="doNot" type="primary" v-if="fTmsorderbillsattachs[3].attachUrl" @click="preview(3)">预览</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item label="二级维护图片" style="width: 100%;">
              <el-upload
                style="width: 300px"
                :action="uploadImgUrl"
                :on-preview="handlePreview"
                :on-remove="(res,file)=>{handleRemove(5,res,file)}"
                :before-remove="beforeRemove"
                :on-success="(res,file)=>{handleAvatarSuccess(6,res,file)}"
                multiple
                :limit="1"
                :headers="headers"
                :on-exceed="handleExceed">
                <el-button size="small" :disabled="doNot" type="primary">点击上传</el-button>
                <el-button size="small" :disabled="doNot" type="primary" v-if="fTmsorderbillsattachs[5].attachUrl" @click="preview(5)">预览</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item label="商业保险图片1" style="width: 100%;">
              <el-upload
                style="width: 300px"
                :action="uploadImgUrl"
                :on-preview="handlePreview"
                :on-remove="(res,file)=>{handleRemove(7,res,file)}"
                :before-remove="beforeRemove"
                :on-success="(res,file)=>{handleAvatarSuccess(8,res,file)}"
                multiple
                :limit="1"
                :headers="headers"
                :on-exceed="handleExceed">
                <el-button size="small" :disabled="doNot" type="primary">点击上传</el-button>
                <el-button size="small" :disabled="doNot" type="primary" v-if="fTmsorderbillsattachs[7].attachUrl" @click="preview(7)">预览</el-button>
              </el-upload>
            </el-form-item>
          </div>
        </el-collapse-item>
      </el-form>
    </el-collapse>
    <span slot="footer" class="dialog-footer">
      <el-button type="info" @click="handleUpdata">修改</el-button>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" :disabled="doNot" @click="dataFormSubmit">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { preservation, company, lookOver } from '@/api/fleet/carManage'
import { getToken } from '@/utils/auth'

export default {
  props: {
    dataForm: {
      type: Object,
      require: false
    }
  },
  data() {
    return {
      fTmsorderbillsattachs:[
        {attachUrl:'',attachName:'',actId:''},
        {attachUrl:'',attachName:'',actId:''},
        {attachUrl:'',attachName:'',actId:''},
        {attachUrl:'',attachName:'',actId:''},
        {attachUrl:'',attachName:'',actId:''},
        {attachUrl:'',attachName:'',actId:''},
        {attachUrl:'',attachName:'',actId:''},
        {attachUrl:'',attachName:'',actId:''},
        {attachUrl:'',attachName:'',actId:''},
      ],
      doNot:true,
      imageUrl: '',
      dataFormD: {},
      visible: false,
      msg: '',
      uploadImgUrl: process.env.VUE_APP_BASE_API + '/common/upload', // 上传的图片服务器地址
      headers: {
        Authorization: 'Bearer ' + getToken()
      },
      dataRule: {
        fleetCompanyId: [
          { required: true, message: '请输入车队id', trigger: 'blur' }
        ],
        carNum: [
          { required: true, message: '请输入车牌号', trigger: 'blur' }
        ]
      },
      optionsProjectTypeItem: [],
    }
  },
  methods: {
    handleUpdata(){
      this.doNot = false
    },
    handleAvatarSuccess(actid,res, file) {
      console.log(actid)
      switch (actid){
        case 1:
          this.simplification(0)
          break
        case 2:
          this.simplification(1)
          break
        case 3:
          this.simplification(2)
          break
        case 4:
          this.simplification(3)
          break
        case 5:
          this.simplification(4)
          break
        case 6:
          this.simplification(5)
          break
        case 7:
          this.simplification(6)
          break
        case 8:
          this.simplification(7)
          break
        case 9:
          this.simplification(8)
          break
        default:
          this.$message.error('未知错误，请稍后再试');
      }
    },
    simplification(index){
      this.fTmsorderbillsattachs[index].actId = actid
      this.fTmsorderbillsattachs[index].attachUrl = res.url
      this.fTmsorderbillsattachs[index].attachName = res.fileName
    },
    handleRemove(actid,file, fileList) {
      this.fTmsorderbillsattachs[actid].attachUrl = ''
      this.fTmsorderbillsattachs[actid].attachName = ''
      this.fTmsorderbillsattachs[actid].actId = ''
    },
    handlePreview(file) {
      this.$message.success('如需预览请点击预览');
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    init() {
      this.visible = true
      if (this.dataForm.Id) {
        lookOver(this.dataForm.Id).then(data => {
          this.doNot = true
          console.log(data)
          this.dataFormD = data.data.fleetCarManage
          this.fTmsorderbillsattachs = data.data.fTmsorderbillsattachs
          this.optionsProjectTypeItem = data.data.fleetCompanyMsg
          if (data.data.fleetCompanyMsg){
            this.handleSelect()
          }
        })
      }else {
        this.dataFormD = {
          fleetCompanyId:'',
          carNum:'',
          driverName:'',
          hangNum:'',
          fuelType:'',
          carType:'',
          carName:'',
          carBrand:'',
          manufactureUnit:'',
          officeOfCertificate:'',
          pullCarType:'',
          pullCarShelfNum:'',
          mountCarType:'',
          mountCarNum:'',
          engine:'',
          carLoadPersion:'',
          buyCarDate:'',
          regiestDate:'',
          abandonDate:'',
          outerSize:'',
          sumWeight:'',
          vouchWeight:'',
          equipWeight:''
        }
        this.fTmsorderbillsattachs = [{attachUrl:'',attachName:'',actId:''},
          {attachUrl:'',attachName:'',actId:''},
          {attachUrl:'',attachName:'',actId:''},
          {attachUrl:'',attachName:'',actId:''},
          {attachUrl:'',attachName:'',actId:''},
          {attachUrl:'',attachName:'',actId:''},
          {attachUrl:'',attachName:'',actId:''},
          {attachUrl:'',attachName:'',actId:''},
          {attachUrl:'',attachName:'',actId:''}]
        this.doNot = false
      }
    },
    preview(actid){
      console.log(this.fTmsorderbillsattachs)
      window.open(this.fTmsorderbillsattachs[actid].attachUrl)
    },
    handleSelect(query) {
      company(query).then(data => {
        console.log(data)
        this.optionsProjectTypeItem = data.rows
      })
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataFormD'].validate((valid) => {
        if (valid) {
          let formDatae = new window.FormData()
          formDatae.append('fTmsorderbillsattachs', JSON.stringify(this.fTmsorderbillsattachs))
          formDatae.append('fleetCarManage', JSON.stringify(this.dataFormD))
          preservation(formDatae).then(data => {
            if (data && data.code === 200) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  }
}
</script>
<style scoped>

.el-form-item {
  width: 49%;
  margin-bottom: 20px;
  display: inline-block;
}

.el-select {
  display: block;
}

.upload-demo {
  margin-left: 50px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>