qa-prevention-gwj-vue/src/views/accident/records/components/addOrEdit.vue

<template>
  <div class="app-container">
    <el-form
      ref="form"
      :model="infoForm"
      :rules="rules"
      label-width="180px"
      style="width: 900px"
    >
      <el-form-item :label-width="formLabelWidth" label="事故案号" prop="incidentNumber">
        <el-input v-model="infoForm.incidentNumber" :disabled="isDisabled" autocomplete="off" />
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="事故名称" prop="incidentName">
        <el-input v-model="infoForm.incidentName" :disabled="isDisabled" autocomplete="off" />
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="事故类型" prop="incidentType">
        <el-select v-model="infoForm.incidentType" :disabled="isDisabled" placeholder="请选择">
          <el-option v-for="item in incidentTypes" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="事故级别" prop="incidentLevel">
        <el-select v-model="infoForm.incidentLevel" :disabled="isDisabled" placeholder="请选择">
          <el-option v-for="item in incidentLevels" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="事故发生地点" prop="location">
        <el-input v-model="infoForm.location" :disabled="isDisabled" autocomplete="off"/>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="事故发生时间" prop="incidentDate">
        <el-date-picker
          :disabled="isDisabled"
          v-model="infoForm.incidentDate"
          type="date"
          placeholder="选择事故发生时间"
          style="width: 100%;"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"/>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="直接经济损失" prop="directLoss">
        <el-input v-model="infoForm.directLoss" :disabled="isDisabled" type="number" autocomplete="off"/>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="受伤人数" prop="injured">
        <el-input v-model="infoForm.injured" :disabled="isDisabled" type="number" autocomplete="off"/>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="死亡人数" prop="fatalities">
        <el-input v-model="infoForm.fatalities" :disabled="isDisabled" type="number" autocomplete="off"/>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="重伤人数" prop="seriouslyInjured">
        <el-input v-model="infoForm.seriouslyInjured" :disabled="isDisabled" type="number" autocomplete="off"/>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="事故起因" prop="cause">
        <el-input v-model="infoForm.cause" :disabled="isDisabled" autocomplete="off"/>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="事故概述" prop="summary">
        <el-input v-model="infoForm.summary" :disabled="isDisabled" autocomplete="off"/>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="事故照片" prop="photos">
        <el-upload
          ref="upload"
          :disabled="isDisabled"
          :file-list.sync="infoForm.photos"
          :multiple="false"
          :auto-upload="true"
          :limit="limitNum"
          :on-remove="handleRemovePicture"
          :on-preview="handlePictureCardPreview"
          :before-upload="beforeAccidentUpload"
          :on-error="handleError"
          :on-exceed="handleExceed"
          name="file"
          action="#"
          accept=".jpg,.jpeg,.png"
          list-type="picture-card">
          <i class="el-icon-plus" />
        </el-upload>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="原因分析及责任认定" prop="analysis">
        <el-input v-model="infoForm.analysis" :disabled="isDisabled" autocomplete="off"/>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="考核建议" prop="suggestions">
        <el-input v-model="infoForm.suggestions" :disabled="isDisabled" autocomplete="off"/>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="整改措施" prop="measures">
        <el-input v-model="infoForm.measures" :disabled="isDisabled" autocomplete="off"/>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="填表人" prop="creator">
        <el-input v-model="infoForm.creator" :disabled="isDisabled" autocomplete="off"/>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="报出日期" prop="reportDate">
        <el-date-picker
          v-model="infoForm.reportDate"
          :disabled="isDisabled"
          type="date"
          placeholder="请选择报出日期"
          style="width: 100%;"
          format="yyyy-MM-dd HH:mm:ss"
          value-format="yyyy-MM-dd HH:mm:ss"
        />
      </el-form-item>
    </el-form>

    <el-dialog :visible.sync="dialogImgVisible">
      <img :src="dialogImageUrl" width="100%" alt="">
    </el-dialog>

    <div class="ui-height" />
    <div class="ui-foot">
      <el-button
        type="primary"
        icon="el-icon-arrow-left"
        plain
        @click="goBack">返回</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { requestFN } from '../../../../utils/request'
import { upload } from '@/utils/upload'

export default {
  data() {
    return {
      config: config,
      infoForm: {
        id: '', // 主键ID
        incidentNumber: '', // 事故案号
        incidentName: '', // 事故名称
        incidentType: null, // 事故类型
        companyName: '', // 所属公司
        incidentLevel: '', // 事故级别
        incidentNature: '', // 事故性质
        location: '', // 事故发生地点
        incidentDate: null, // 事故发生时间
        directLoss: '', // 直接经济损失（万元）
        injured: null, // 受伤人数
        fatalities: null, // 死亡人数
        seriouslyInjured: null, // 重伤人数
        cause: '', // 事故起因
        summary: '', // 事故概述
        photos: [], // 事故照片
        analysis: '', // 原因分析及责任认定
        suggestions: '', // 考核建议
        measures: '', // 整改措施
        creator: '', // 填表人
        reportDate: null // 报出日期
      },
      formLabelWidth: '140px',
      /** 事故类型 */
      incidentTypes: [],
      /** 事故等级 */
      incidentLevels: [],
      tableName: '',
      /** 图片上传限制个数 */
      limitNum: 1,
      /** 预览图片地址 */
      dialogImageUrl: '',
      allowRemove: true, // 添加一个控制标志
      /** 预览弹窗 */
      dialogImgVisible: false,
      rules: {
        incidentNumber: [{ required: true, message: '事故案号不能为空', trigger: 'blur' }],
        incidentName: [{ required: true, message: '事故名称不能为空', trigger: 'blur' }],
        HIDDENTYPE: [{ required: true, message: '事故类型不能为空', trigger: 'blur' }],
        incidentType: [{ required: true, message: '隐患类型不能为空', trigger: 'blur' }],
        incidentLevel: [{ required: true, message: '事故级别不能为空', trigger: 'blur' }],
        incidentNature: [{ required: true, message: '事故性质不能为空', trigger: 'blur' }],
        location: [{ required: true, message: '事故发生地点不能为空', trigger: 'blur' }],
        incidentDate: [{ required: true, message: '事故发生时间不能为空', trigger: 'blur' }],
        directLoss: [{ required: true, message: '直接经济损失（万元）不能为空', trigger: 'blur' }],
        injured: [{ required: true, message: '受伤人数不能为空', trigger: 'blur' }],
        seriouslyInjured: [{ required: true, message: '隐患类型不能为空', trigger: 'blur' }],
        cause: [{ required: true, message: '事故起因不能为空', trigger: 'blur' }],
        summary: [{ required: true, message: '事故概述不能为空', trigger: 'blur' }],
        photos: [{ required: true, message: '事故照片不能为空', trigger: 'blur' }],
        analysis: [{ required: true, message: '原因分析及责任认定不能为空', trigger: 'blur' }],
        suggestions: [{ required: true, message: '考核建议不能为空', trigger: 'blur' }],
        measures: [{ required: true, message: '整改措施不能为空', trigger: 'blur' }],
        creator: [{ required: true, message: '填表人不能为空', trigger: 'blur' }],
        reportDate: [{ required: true, message: '报出日期不能为空', trigger: 'blur' }]
      }
    }
  },

  computed: {
    isDisabled() {
      return this.$parent.tableName === '查看'
    }
  },

  created() {
    this.getDict()
    const id = this.$parent.id
    this.tableName = this.$parent.tableName
    if (id == null || id === '') {
      this.infoForm = this.$options.data().infoForm
    } else {
      // 若有数据项的ID, 则请求接口并回显表单
      requestFN('/accident/' + id, {}).then((data) => {
        this.infoForm = data.info
        this.getFileImageBinaray(data.info.photos)
      }).catch((e) => {
      })
    }
  },

  methods: {
    /**
     * 文件列表移除文件时的钩子
     */
    handleRemovePicture(file) {
      if (file.remotePathName) {
        requestFN(`/accident/delete/photos/${file.remotePathName}`).then((res) => {
          if (res.result === 'success') {
            this.infoForm.photos = []
            this.$message({
              message: '文件删除成功',
              type: 'info',
              duration: 2000
            })
          }
        })
      }
    },

    /**
     * 单独查询图片流文件
     */
    getFileImageBinaray(fileName) {
      requestFN(`/accident/view/photos`, { path: fileName }).then((res) => {
        console.log('res :>> ', res)
      })
    },

    /**
     * 点击文件列表中已上传的文件时的钩子
     */
    handlePictureCardPreview(file) {
      this.dialogImgVisible = true
      this.dialogImageUrl = file.url
    },

    /**
     * 文件上传失败时的钩子处理
     */
    handleError(err, file, fileList) {
      this.$message({
        message: `${file.name}上传失败, 请稍后重试`,
        type: 'error',
        duration: 2000
      })
    },

    /**
     * 文件超出个数限制的钩子处理
     */
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 ${this.limitNum} 个文件,本次选择了 ${files.length} 个文件`)
    },

    /**
     * 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
     */
    beforeAccidentUpload(file) {
      if (!file) {
        this.$message({
          message: '请上传图片',
          type: 'error'
        })
        return false
      }
      const types = ['image/jpeg', 'image/jpg', 'image/png']
      const isImage = types.includes(file.type)
      if (!isImage) {
        this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
        return false
      } else {
        const formData = new FormData()
        formData.append('file', file)
        upload('/accident/import/photos', formData).then((data) => {
          if (data.result === 'success') {
            this.infoForm.photos = [{
              name: file.name,
              url: URL.createObjectURL(file),
              remotePathName: data.path
            }]
          }
        })
        return false
      }
    },

    /**
     * 返回到列表页面
     */
    goBack() {
      this.handleResetInitForm()
      this.image = []
      this.dialogImageUrl = ''
      this.$parent.activeName = 'List'
    },

    /**
     * 表单清空处理
     */
    handleResetInitForm() {
      this.infoForm = {
        id: '', // 主键ID
        incidentNumber: '', // 事故案号
        incidentName: '', // 事故名称
        incidentType: null, // 事故类型
        companyName: '', // 所属公司
        incidentLevel: '', // 事故级别
        incidentNature: '', // 事故性质
        location: '', // 事故发生地点
        incidentDate: null, // 事故发生时间
        directLoss: '', // 直接经济损失（万元）
        injured: null, // 受伤人数
        fatalities: null, // 死亡人数
        seriouslyInjured: null, // 重伤人数
        cause: '', // 事故起因
        summary: '', // 事故概述
        photos: [], // 事故照片
        analysis: '', // 原因分析及责任认定
        suggestions: '', // 考核建议
        measures: '', // 整改措施
        creator: '', // 填表人
        reportDate: null // 报出日期
      }
    },

    /**
     * 表单确认按钮
     */
    confirm() {
      const params = {
        ...this.infoForm,
        photos: this.infoForm.photos[0].remotePathName
      }
      requestFN('/accident' + (this.tableName === '修改' ? '/update' : '/save'), params)
        .then((response) => {
          // 删除成功后的处理
          this.$message.success(this.tableName + '成功')
          this.infoForm = this.$options.data().infoForm
          this.$parent.activeName = 'List'
          // eslint-disable-next-line handle-callback-err
        }).catch((error) => {
          this.$message.error(this.tableName + '失败')
        })
    },

    /**
     * 获取字典
     */
    getDict() {
      const url = '/dictionaries/listSelectTree'
      requestFN(url,
        {
          DICTIONARIES_ID: '8d4140a900184b60836ad1a6490fd510'
        }
      ).then((data) => {
        this.incidentTypes = JSON.parse(data.zTreeNodes)
      })
      requestFN(url,
        {
          DICTIONARIES_ID: 'b61a1edc59c0430c8741c5f51aa26c3c'
        }
      ).then((data) => {
        this.incidentLevels = JSON.parse(data.zTreeNodes)
      })
    }
  }
}
</script>

<style scoped lang="scss"></style>