Warehouse_management_lc_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
          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" placeholder="车牌号"></el-input>
      </el-form-item>
      <el-form-item label="驾驶员" prop="carNum" style="width: 325px">
        <el-input v-model="dataFormD.carNum" style="width: 200px" placeholder="驾驶员"></el-input>
      </el-form-item>
      <el-form-item label="挂号" prop="hangNum" style="width: 325px">
        <el-input v-model="dataFormD.hangNum" style="width: 200px" placeholder="挂号"></el-input>
      </el-form-item>
      <el-form-item label="燃油类型" prop="fuelType" style="width: 325px">
        <el-input v-model="dataFormD.fuelType" style="width: 200px" placeholder="燃油类型"></el-input>
      </el-form-item>
      <el-form-item label="车辆类型" prop="carType" style="width: 325px">
        <el-input v-model="dataFormD.carType" style="width: 200px" placeholder="车辆类型"></el-input>
      </el-form-item>
      <el-form-item label="车辆名称" prop="carName" style="width: 325px">
        <el-input v-model="dataFormD.carName" style="width: 200px" placeholder="车辆名称"></el-input>
      </el-form-item>
      <el-form-item label="车辆品牌" prop="carBrand" style="width: 325px">
        <el-input v-model="dataFormD.carBrand" style="width: 200px" placeholder="车辆品牌"></el-input>
      </el-form-item>
      <el-form-item label="制造单位" prop="manufactureUnit" style="width: 325px">
        <el-input v-model="dataFormD.manufactureUnit" style="width: 200px" placeholder="制造单位"></el-input>
      </el-form-item>
      <el-form-item label="发证机关" prop="officeOfCertificate" style="width: 325px">
        <el-input v-model="dataFormD.officeOfCertificate" style="width: 200px" placeholder="发证机关"></el-input>
      </el-form-item>
      <el-form-item label="牵引车辆型号" prop="pullCarType" style="width: 325px">
        <el-input v-model="dataFormD.pullCarType" style="width: 200px" placeholder="牵引车辆型号"></el-input>
      </el-form-item>
      <el-form-item label="牵引车车架号" prop="pullCarShelfNum" style="width: 325px">
        <el-input v-model="dataFormD.pullCarShelfNum" style="width: 200px" placeholder="牵引车车架号"></el-input>
      </el-form-item>
      <el-form-item label="挂车型号" prop="mountCarType" style="width: 325px">
        <el-input v-model="dataFormD.mountCarType" style="width: 200px" placeholder="挂车型号"></el-input>
      </el-form-item>
      <el-form-item label="挂车车架号" prop="mountCarNum" style="width: 325px">
        <el-input v-model="dataFormD.mountCarNum" style="width: 200px" placeholder="挂车车架号"></el-input>
      </el-form-item>
      <el-form-item label="发动机型号" prop="engine" style="width: 325px">
        <el-input v-model="dataFormD.engine" style="width: 200px" placeholder="发动机型号"></el-input>
      </el-form-item>
      <el-form-item label="核载人数" prop="carLoadPersion" style="width: 325px">
        <el-input v-model="dataFormD.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="dataFormD.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="dataFormD.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="dataFormD.abandonDate"
          type="date"
          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" 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" 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" 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" placeholder="装备质量kg"></el-input>
      </el-form-item>
    </el-form>
    <el-collapse accordion>
      <el-form label-width="125px">
        <el-collapse-item title="图片上传">
          <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url" alt=""
              >
              <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-collapse-item>
      </el-form>
    </el-collapse>
    <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>
import { preservation, company, lookOver } from '@/api/fleet/carManage'
import { getToken } from '@/utils/auth'

export default {
  props: {
    dataForm: {
      type: Object,
      require: false
    }
  },
  data() {
    return {
      disabled: false,
      fTmsorderbillsattachs: [
        {
          attachName: '',
          attachUrl: '',
          actId: '1'
        }, {
          attachName: '',
          attachUrl: '',
          actId: '2'
        }, {
          attachName: '',
          attachUrl: '',
          actId: '3'
        }, {
          attachName: '',
          attachUrl: '',
          actId: '4'
        }, {
          attachName: '',
          attachUrl: '',
          actId: '5'
        }, {
          attachName: '',
          attachUrl: '',
          actId: '6'
        }, {
          attachName: '',
          attachUrl: '',
          actId: '7'
        }, {
          attachName: '',
          attachUrl: '',
          actId: '8'
        }, {
          attachName: '',
          attachUrl: '',
          actId: '9'
        }
      ],
      imageUrl: '',
      dataFormD: {},
      visible: false,
      loading: 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: [],
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  methods: {
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      console.log(file)
      // this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    handleAvatarSuccess(id,res,file) {
      console.log(id)
      console.log(res)
      console.log(file)
      if (res){
        console.log(id)
        // switch (id) {
        //   case 1:
        //     this.fTmsorderbillsattachs[0].actId = id
        //     this.fTmsorderbillsattachs[0].attachName = res.fileName
        //     this.fTmsorderbillsattachs[0].attachUrl = res.url
        //     break
        //   case 2:
        //     this.fTmsorderbillsattachs[1].actId = id
        //     this.fTmsorderbillsattachs[1].attachName = res.fileName
        //     this.fTmsorderbillsattachs[1].attachUrl = res.url
        //     break
        //   case 3:
        //     this.fTmsorderbillsattachs[2].actId = id
        //     this.fTmsorderbillsattachs[2].attachName = res.fileName
        //     this.fTmsorderbillsattachs[2].attachUrl = res.url
        //     break
        //   case 4:
        //     this.fTmsorderbillsattachs[3].actId = id
        //     this.fTmsorderbillsattachs[3].attachName = res.fileName
        //     this.fTmsorderbillsattachs[3].attachUrl = res.url
        //     break
        //   case 5:
        //     this.fTmsorderbillsattachs[4].actId = id
        //     this.fTmsorderbillsattachs[4].attachName = res.fileName
        //     this.fTmsorderbillsattachs[4].attachUrl = res.url
        //     break
        //   case 6:
        //     this.fTmsorderbillsattachs[5].actId = id
        //     this.fTmsorderbillsattachs[5].attachName = res.fileName
        //     this.fTmsorderbillsattachs[5].attachUrl = res.url
        //     break
        //   case 7:
        //     this.fTmsorderbillsattachs[6].actId = id
        //     this.fTmsorderbillsattachs[6].attachName = res.fileName
        //     this.fTmsorderbillsattachs[6].attachUrl = res.url
        //     break
        //   case 8:
        //     this.fTmsorderbillsattachs[7].actId = id
        //     this.fTmsorderbillsattachs[7].attachName = res.fileName
        //     this.fTmsorderbillsattachs[7].attachUrl = res.url
        //     break
        //   case 9:
        //     this.fTmsorderbillsattachs[8].actId = id
        //     this.fTmsorderbillsattachs[8].attachName = res.fileName
        //     this.fTmsorderbillsattachs[8].attachUrl = res.url
        //     break
        //   default:
        //     this.$message.error('未知错误请刷新后再试');
        // }
      }
    },
    init() {
      console.log(this.fTmsorderbillsattachs)
      this.visible = true
      console.log(this.dataForm)
      if (this.dataForm.Id) {
        lookOver(this.dataForm.Id).then(data => {
          console.log(data)
          this.dataFormD = data.data
        })
      }
    },
    handleSelect(query) {
      company(query).then(data => {
        console.log(data)
        this.optionsProjectTypeItem = data.rows
      })
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          preservation(this.dataForm).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>