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="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="125px">
          <el-form-item label="车队名称" prop="fleetCompanyId" style="width: 325px">
<!--            <el-input v-model="dataForm.fleetCompanyId" placeholder="车队id"></el-input>-->
            <el-select v-model="dataForm.fleetCompanyId" style="width: 200px" placeholder="请选择">
              <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="dataForm.carNum" style="width: 200px" placeholder="车牌号"></el-input>
          </el-form-item>
          <el-form-item label="驾驶员" prop="carNum" style="width: 325px">
            <el-input v-model="dataForm.carNum" style="width: 200px" placeholder="驾驶员"></el-input>
          </el-form-item>
          <el-form-item label="挂号" prop="hangNum" style="width: 325px">
            <el-input v-model="dataForm.hangNum" style="width: 200px" placeholder="挂号"></el-input>
          </el-form-item>
          <el-form-item label="燃油类型" prop="fuelType" style="width: 325px">
            <el-input v-model="dataForm.fuelType" style="width: 200px" placeholder="燃油类型"></el-input>
          </el-form-item>
          <el-form-item label="车辆类型" prop="carType" style="width: 325px">
            <el-input v-model="dataForm.carType" style="width: 200px" placeholder="车辆类型"></el-input>
          </el-form-item>
          <el-form-item label="车辆名称" prop="carName" style="width: 325px">
            <el-input v-model="dataForm.carName" style="width: 200px" placeholder="车辆名称"></el-input>
          </el-form-item>
          <el-form-item label="车辆品牌" prop="carBrand" style="width: 325px">
            <el-input v-model="dataForm.carBrand" style="width: 200px" placeholder="车辆品牌"></el-input>
          </el-form-item>
          <el-form-item label="制造单位" prop="manufactureUnit" style="width: 325px">
            <el-input v-model="dataForm.manufactureUnit" style="width: 200px" placeholder="制造单位"></el-input>
          </el-form-item>
          <el-form-item label="发证机关" prop="officeOfCertificate" style="width: 325px">
            <el-input v-model="dataForm.officeOfCertificate" style="width: 200px" placeholder="发证机关"></el-input>
          </el-form-item>
          <el-form-item label="牵引车辆型号" prop="pullCarType" style="width: 325px">
            <el-input v-model="dataForm.pullCarType" style="width: 200px" placeholder="牵引车辆型号"></el-input>
          </el-form-item>
          <el-form-item label="牵引车车架号" prop="pullCarShelfNum" style="width: 325px">
            <el-input v-model="dataForm.pullCarShelfNum" style="width: 200px" placeholder="牵引车车架号"></el-input>
          </el-form-item>
          <el-form-item label="挂车型号" prop="mountCarType" style="width: 325px">
            <el-input v-model="dataForm.mountCarType" style="width: 200px" placeholder="挂车型号"></el-input>
          </el-form-item>
          <el-form-item label="挂车车架号" prop="mountCarNum" style="width: 325px">
            <el-input v-model="dataForm.mountCarNum" style="width: 200px" placeholder="挂车车架号"></el-input>
          </el-form-item>
          <el-form-item label="发动机型号" prop="engine" style="width: 325px">
            <el-input v-model="dataForm.engine" style="width: 200px" placeholder="发动机型号"></el-input>
          </el-form-item>
          <el-form-item label="核载人数" prop="carLoadPersion" style="width: 325px">
            <el-input v-model="dataForm.carLoadPersion" style="width: 200px" 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="dataForm.buyCarDate"
              type="date"
              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="dataForm.regiestDate"
              type="date"
              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="dataForm.abandonDate"
              type="date"
              placeholder="创建时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="外阔尺寸mm" prop="outerSize" style="width: 325px">
            <el-input v-model="dataForm.outerSize" style="width: 200px" placeholder="外阔尺寸mm"></el-input>
          </el-form-item>
          <el-form-item label="总重量kg" prop="sumWeight" style="width: 325px">
            <el-input v-model="dataForm.sumWeight" style="width: 200px" placeholder="总重量kg"></el-input>
          </el-form-item>
          <el-form-item label="核定重量kg" prop="vouchWeight" style="width: 325px">
            <el-input v-model="dataForm.vouchWeight" style="width: 200px" placeholder="核定重量kg"></el-input>
          </el-form-item>
          <el-form-item label="装备质量kg" prop="equipWeight" style="width: 325px">
            <el-input v-model="dataForm.equipWeight" style="width: 200px" placeholder="装备质量kg"></el-input>
          </el-form-item>
      <el-collapse accordion>
        <el-collapse-item title="图片上传">
          <el-form-item label="行驶证头图片" prop="drivingLicenseSrc" style="width: 325px">
            <!--            <el-input v-model="dataForm.drivingLicenseSrc" placeholder="行驶证头src"></el-input>-->
            <el-upload
              class="upload-demo"
              :limit="1"
              :multiple="false"
              :action="uploadURL"
              :file-list="fileList"
              :headers = "uploadHeaders"
              :on-success="handleSuccess"
              :on-remove="handleRemove"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <!--              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
            </el-upload>
          </el-form-item>
          <el-form-item label="行驶证挂件图片" prop="drivingPendantSrc" style="width: 325px">
            <!--            <el-input v-model="dataForm.drivingPendantSrc" placeholder="行驶证挂件src"></el-input>-->
            <el-upload
              class="upload-demo"
              :limit="1"
              :multiple="false"
              :action="uploadURL"
              :file-list="fileList"
              :headers = "uploadHeaders"
              :on-success="handleSuccess1"
              :on-remove="handleRemove"
              list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
              <!--              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
            </el-upload>
          </el-form-item>
          <el-form-item label="运营证头图片" prop="operationLicenseSrc" style="width: 325px">
            <!--            <el-input v-model="dataForm.operationLicenseSrc" placeholder="运营证头src"></el-input>-->
            <el-upload
              class="upload-demo"
              :limit="1"
              :multiple="false"
              :action="uploadURL"
              :file-list="fileList"
              :headers = "uploadHeaders"
              :on-success="handleSuccess2"
              :on-remove="handleRemove"
              list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
              <!--              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
            </el-upload>
          </el-form-item>
          <el-form-item label="技术评定证书图片" prop="technologySrc" style="width: 325px">
            <!--            <el-input v-model="dataForm.technologySrc" placeholder="技术评定证书src"></el-input>-->
            <el-upload
              class="upload-demo"
              :limit="1"
              :multiple="false"
              :action="uploadURL"
              :file-list="fileList"
              :headers = "uploadHeaders"
              :on-success="handleSuccess3"
              :on-remove="handleRemove"
              list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
              <!--              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
            </el-upload>
          </el-form-item>
          <el-form-item label="营运挂载图片" prop="drivingLoadSrc" style="width: 325px">
            <!--            <el-input v-model="dataForm.drivingLoadSrc" placeholder="营运挂载src"></el-input>-->
            <el-upload
              class="upload-demo"
              :limit="1"
              :multiple="false"
              :action="uploadURL"
              :file-list="fileList"
              :headers = "uploadHeaders"
              :on-success="handleSuccess4"
              :on-remove="handleRemove"
              list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
              <!--              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
            </el-upload>
          </el-form-item>
          <el-form-item label="二级维护图片" prop="secondLvMaintainSrc" style="width: 325px">
            <!--            <el-input v-model="dataForm.secondLvMaintainSrc" placeholder="二级维护src"></el-input>-->
            <el-upload
              class="upload-demo"
              :limit="1"
              :multiple="false"
              :action="uploadURL"
              :file-list="fileList"
              :headers = "uploadHeaders"
              :on-success="handleSuccess5"
              :on-remove="handleRemove"
              list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
              <!--              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
            </el-upload>
          </el-form-item>
          <el-form-item label="交强险图片" prop="tafficConstranintInsuranceSrc" style="width: 325px">
            <!--            <el-input v-model="dataForm.tafficConstranintInsuranceSrc" placeholder="交强险src"></el-input>-->
            <el-upload
              class="upload-demo"
              :limit="1"
              :multiple="false"
              :action="uploadURL"
              :file-list="fileList"
              :headers = "uploadHeaders"
              :on-success="handleSuccess6"
              :on-remove="handleRemove"
              list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
              <!--              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
            </el-upload>
          </el-form-item>
          <el-form-item label="商业保险图片" prop="" style="width: 325px">
            <!--            <el-input v-model="dataForm.businessInsuranceSrc" placeholder="商业保险src"></el-input>-->
            <el-upload
              class="upload-demo"
              :limit="1"
              :multiple="false"
              :action="uploadURL"
              :file-list="fileList"
              :headers = "uploadHeaders"
              :on-success="handleSuccess7"
              :on-remove="handleRemove"
              list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
              <!--              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
            </el-upload>
          </el-form-item>
          <el-form-item label="承运人保险图片" prop="accpetCarrageInsuranceSrc" style="width: 325px">
            <!--            <el-input v-model="dataForm.accpetCarrageInsuranceSrc" placeholder="承运人保险src"></el-input>-->
            <el-upload
              class="upload-demo"
              :limit="1"
              :multiple="false"
              :action="uploadURL"
              :file-list="fileList"
              :headers = "uploadHeaders"
              :on-success="handleSuccess8"
              :on-remove="handleRemove"
              list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
              <!--              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
            </el-upload>
          </el-form-item>
        </el-collapse-item>
      </el-collapse>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    props: {
      dataForm: {
        type: Object,
        require: false
      }
    },
    data () {
      return {
        visible: false,
        msg: '',
        dataRule: {
          fleetCompanyId: [
            {required: true, message: '请输入车队id', trigger: 'blur'}
          ],
          carNum: [
            {required: true, message: '请输入车牌号', trigger: 'blur'}
          ]
        },
        optionsProjectTypeItem: [],
        fileList: [],
        uploadHeaders: {
          // localStorage.setItem('token', data.token)
          token: localStorage.getItem('token')
        },
        uploadURL: 'http://test.echepei.com/api/admin/fleet/carManage/uplodaImgForDrivingLicense'
      }
    },
    methods: {
      init () {
        this.visible = true
        this.needCondition()
      },
      // 获取下拉选项
      needCondition () {
        // this.$http({
        //   url: this.$http.adornUrl(`/fleet/companyMsg/list`),
        //   method: 'post'
        // }).then(({data}) => {
        //   if (data && data.code === 0) {
        //     this.optionsProjectTypeItem = data.list
        //   } else {
        //     this.$message.error(data.msg)
        //   }
        // })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/fleet/carManage/${!this.dataForm.id ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData(this.dataForm)
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }, // 图片上传回调
      handleSuccess (response) {
        // 这里可以写文件上传成功后的处理,但是一定要记得给imgPath赋值
        console.log(response)
        this.dataForm.drivingLicenseSrc = response.msg
      },
      handleSuccess1 (response) {
        // 这里可以写文件上传成功后的处理,但是一定要记得给imgPath赋值
        console.log(response)
        this.dataForm.drivingPendantSrc = response.msg
      },
      handleSuccess2 (response) {
        // 这里可以写文件上传成功后的处理,但是一定要记得给imgPath赋值
        console.log(response)
        this.dataForm.operationLicenseSrc = response.msg
      },
      handleSuccess3 (response) {
        // 这里可以写文件上传成功后的处理,但是一定要记得给imgPath赋值
        console.log(response)
        this.dataForm.technologySrc = response.msg
      },
      handleSuccess4 (response) {
        // 这里可以写文件上传成功后的处理,但是一定要记得给imgPath赋值
        console.log(response)
        this.dataForm.drivingLoadSrc = response.msg
      },
      handleSuccess5 (response) {
        // 这里可以写文件上传成功后的处理,但是一定要记得给imgPath赋值
        console.log(response)
        this.dataForm.secondLvMaintainSrc = response.msg
      },
      handleSuccess6 (response) {
        // 这里可以写文件上传成功后的处理,但是一定要记得给imgPath赋值
        console.log(response)
        this.dataForm.tafficConstranintInsuranceSrc = response.msg
      },
      handleSuccess7 (response) {
        // 这里可以写文件上传成功后的处理,但是一定要记得给imgPath赋值
        console.log(response)
        this.dataForm.businessInsuranceSrc = response.msg
      },
      handleSuccess8 (response) {
        // 这里可以写文件上传成功后的处理,但是一定要记得给imgPath赋值
        console.log(response)
        this.dataForm.accpetCarrageInsuranceSrc = response.msg
      },
      // 文件列表移除文件时的钩子
      handleRemove (response) {
        this.dataForm.imgPath = ''
      }
    }
  }
</script>
<style scoped>

.el-form-item {
  width: 49%;
  margin-bottom: 20px;
  display: inline-block;
}
.el-select {
  display: block;
}
.upload-demo {
  margin-left: 50px;
}
</style>