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="110px"
      style="width: 800px"
    >
      <el-form-item :label-width="formLabelWidth" label="事故案号">
        <el-input v-model="infoForm.incidentNumber" autocomplete="off" />
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="事故名称">
        <el-input v-model="infoForm.incidentName" autocomplete="off" />
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="事故类型">
        <el-select v-model="infoForm.incidentTypes" 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="事故级别">
        <el-select v-model="infoForm.incidentLevels" 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="事故发生地点">
        <el-input v-model="infoForm.location" autocomplete="off"/>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="事故发生时间">
        <el-date-picker
          v-model="infoForm.incidentDate"
          type="date"
          placeholder="选择日期"
          style="width: 100%;"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd HH:mm:ss"/>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="直接经济损失">
        <el-input v-model="infoForm.directLoss" type="number" autocomplete="off"/>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="受伤人数">
        <el-input v-model="infoForm.injured" type="number" autocomplete="off"/>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="死亡人数">
        <el-input v-model="infoForm.fatalities" type="number" autocomplete="off"/>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="重伤人数">
        <el-input v-model="infoForm.seriouslyInjured" type="number" autocomplete="off"/>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="事故起因">
        <el-input v-model="infoForm.cause" autocomplete="off"/>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="事故概述">
        <el-input v-model="infoForm.summary" autocomplete="off"/>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="事故照片">
        <el-upload
          ref="upload"
          :file-list="image"
          :multiple="false"
          :limit="1"
          :on-remove="handleRemovePicture"
          :on-change="handleChangeIMG"
          :on-preview="handlePictureCardPreview"
          :before-upload="beforeHiddenUpload"
          :auto-upload="false"
          class="avatar-uploader"
          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="原因分析及责任认定">
        <el-input v-model="infoForm.analysis" autocomplete="off"/>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="考核建议">
        <el-input v-model="infoForm.suggestions" autocomplete="off"/>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="整改措施">
        <el-input v-model="infoForm.measures" autocomplete="off"/>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="填表人">
        <el-input v-model="infoForm.creator" autocomplete="off"/>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" label="报出日期">
        <el-date-picker
          v-model="infoForm.reportDate"
          type="date"
          placeholder="选择日期"
          style="width: 100%;"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd HH:mm:ss"/>
      </el-form-item>
    </el-form>

    <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'

export default {
  data() {
    return {
      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: '',
      /** 图片文件 */
      image: null,
      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' }]
      }
    }
  },

  created() {
    this.getDict()
    const id = this.$parent.id
    this.tableName = this.$parent.tableName
    if (id == null || id === '') {
      this.infoForm = this.$options.data().infoForm
    } else {
      requestFN('/accident/' + id, {}).then((data) => {
        this.infoForm = data.info
      }).catch((e) => {
        this.listLoading = false
      })
    }
  },

  methods: {
    handleRemovePicture() {},

    handleChangeIMG() {},

    handlePictureCardPreview() {},

    beforeHiddenUpload() {},
    /**
     * 返回到列表页面
     */
    goBack() {
      this.$parent.activeName = 'List'
    },

    /**
     * 表单确认按钮
     */
    confirm() {
      requestFN('/accident' + (this.tableName === '修改' ? '/update' : '/save'), this.infoForm)
        .then((response) => {
          // 删除成功后的处理
          this.$message.success(this.tableName + '成功')
          this.getList() // 重新获取数据
          this.infoForm = this.$options.data().infoForm
          // 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>