cz-hjjc-oa/src/views/vehicle/components/AddVehicle.vue

<template>
  <div>
    <vxe-modal
      :value="isShow"
      show-footer
      title="车船管理"
      show-confirm-button
      :width="840"
      :height="620"
      esc-closable
      @input="e => $emit('update:isShow',e)"
    >
      <el-form ref="elForm" :model="form" :rules="rules" label-position="top" label-width="100">
        <el-form-item label="型号" prop="name" required>
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="号码" prop="license" required>
          <el-input v-model="form.license" />
        </el-form-item>
        <el-form-item label="驾驶员" prop="driver" required>
          <el-input v-model="form.driver" />
        </el-form-item>
        <el-form-item label="照片" prop="photo_file_id" required>
          <el-upload
            :action="action"
            :headers="{
              Authorization: `Bearer ${getToken()}`
            }"
            :file-list="fileList"
            :before-upload="beforePhotoUpload"
            list-type="picture"
            :limit="1"
            :on-success="photoSuccess"
            :on-remove="photoRemove"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10Mb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="上牌日期" prop="start_date">
          <el-date-picker v-model="form.start_date" style="width: 100%;" value-format="yyyy-MM-dd" />
        </el-form-item>
        <el-form-item label="保险到期日期" prop="insurance_expire">
          <el-date-picker v-model="form.insurance_expire" style="width: 100%;" value-format="yyyy-MM-dd" />
        </el-form-item>
        <el-form-item label="年检日期" prop="inspect_date">
          <el-date-picker v-model="form.inspect_date" style="width: 100%;" value-format="yyyy-MM-dd" />
        </el-form-item>
        <el-form-item label="保养日期" prop="maintain_expire">
          <el-date-picker v-model="form.maintain_expire" style="width: 100%;" value-format="yyyy-MM-dd" />
        </el-form-item>
        <el-form-item label="报废日期" prop="discard_date">
          <el-date-picker v-model="form.discard_date" style="width: 100%;" value-format="yyyy-MM-dd" />
        </el-form-item>
        <el-form-item label="所在部门" prop="department_id">
          <el-select v-model="form.department_id" style="width: 100%;">
            <el-option v-for="item in departments" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="归属结束日期" prop="end_date">
          <el-date-picker v-model="form.end_date" style="width: 100%;" value-format="yyyy-MM-dd" />
        </el-form-item>
        <el-form-item label="车辆状态" prop="status">
          <el-select v-model="form.status" style="width: 100%;">
            <el-option :value="1" label="正常可用" />
            <el-option :value="-1" label="维修中" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否开放精准预约" prop="is_open_detail">
          <el-select v-model="form.is_open_detail" style="width: 100%;">
            <el-option :value="1" label="开放" />
            <el-option :value="0" label="不开放" />
          </el-select>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button type="primary" :loading="loading" @click="submit">确认</el-button>
      </template>
    </vxe-modal>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { save } from '@/api/vehicle'
export default {
  props: {
    departments: {
      type: Array,
      default: () => []
    },
    isShow: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  data() {
    return {
      action: process.env.VUE_APP_UPLOAD_API,
      fileList: [],
      loading: false,
      form: {
        name: '',
        license: '',
        driver: '',
        photo_file_id: '',
        start_date: '',
        insurance_expire: '',
        maintain_expire: '',
        status: 1,
        department_id: '',
        discard_date: '',
        inspect_date: '',
        is_open_detail: 1,
        type: '',
        end_date: ''
      },
      rules: {
        name: [
          { required: true, message: '请填写型号' }
        ],
        license: [
          { required: true, message: '请填写号码' }
        ],
        driver: [
          { required: true, message: '请填写驾驶员' }
        ],
        photo_file_id: [
          { required: true, message: '请上传照片' }
        ]
      }
    }
  },
  computed: {},
  methods: {
    getToken,
    setType(type) {
      this.form.type = type
    },
    photoRemove() {
      this.form.photo_file_id = ''
    },
    photoSuccess(response, file, fileList) {
      this.fileList = fileList
      this.form.photo_file_id = this.fileList[0]?.response?.data?.id
    },
    beforePhotoUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt10M = file.size / 1024 / 1024 < 10

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt10M) {
        this.$message.error('上传头像图片大小不能超过 10MB!')
      }
      return isJPG && isLt10M
    },

    submit() {
      this.$refs['elForm'].validate(async valid => {
        if (valid) {
          this.loading = true
          try {
            await save(this.form)
            this.$message.success('新增成功')
            this.$emit('refresh')
            this.$emit('update:isShow', false)
            this.loading = false
            this.$refs['elForm'].resetFields()
          } catch (err) {
            this.loading = false
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px 20px;
}
</style>