204 lines
8.1 KiB
Vue
204 lines
8.1 KiB
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.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>
|