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

204 lines
8.1 KiB
Vue
Raw Normal View History

2024-09-06 18:17:09 +08:00
<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.hiddenPartList" placeholder="请选择">
<el-option
v-for="item in hiddenPartList"
:key="item.id"
:label="item.type"
: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.type"
: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
:limit="1"
:multiple="false"
action=""
list-type="picture-card"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件且不超过500kb</div>
</el-upload> -->
<el-upload
ref="upload"
:file-list="photos"
: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>
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',
hiddenPartList: [], // 事故类型字典
incidentLevels: [], // 事故等级字典
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' }]
}
}
},
methods: {
handleRemovePicture() {},
handleChangeIMG() {},
handlePictureCardPreview() {},
beforeHiddenUpload() {},
/**
* 返回到列表页面
*/
goBack() {
this.$parent.activeName = 'List'
},
/**
* 表单确认按钮
*/
confirm() {}
}
}
</script>
<style scoped lang="scss"></style>