feat: 事故信息查询模块接口对接

hyx_2024-10-30_new
mengfanliang 2024-09-09 15:17:43 +08:00
parent 6e97caf3a4
commit d07eaa7cfc
4 changed files with 235 additions and 74 deletions

View File

@ -5,7 +5,7 @@
"author": "",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 192.168.0.125",
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"e2e": "node test/e2e/runner.js",

View File

@ -4,96 +4,105 @@
ref="form"
:model="infoForm"
:rules="rules"
label-width="110px"
style="width: 800px"
label-width="180px"
style="width: 900px"
>
<el-form-item :label-width="formLabelWidth" label="事故案号">
<el-input v-model="infoForm.incidentNumber" autocomplete="off" />
<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="事故名称">
<el-input v-model="infoForm.incidentName" autocomplete="off" />
<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="事故类型">
<el-select v-model="infoForm.incidentTypes" placeholder="请选择">
<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="事故级别">
<el-select v-model="infoForm.incidentLevels" placeholder="请选择">
<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="事故发生地点">
<el-input v-model="infoForm.location" autocomplete="off"/>
<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="事故发生时间">
<el-form-item :label-width="formLabelWidth" label="事故发生时间" prop="incidentDate">
<el-date-picker
:disabled="isDisabled"
v-model="infoForm.incidentDate"
type="date"
placeholder="选择日期"
placeholder="选择事故发生时间"
style="width: 100%;"
format="yyyy 年 MM 月 dd 日"
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="直接经济损失">
<el-input v-model="infoForm.directLoss" type="number" autocomplete="off"/>
<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="受伤人数">
<el-input v-model="infoForm.injured" type="number" autocomplete="off"/>
<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="死亡人数">
<el-input v-model="infoForm.fatalities" type="number" autocomplete="off"/>
<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="重伤人数">
<el-input v-model="infoForm.seriouslyInjured" type="number" autocomplete="off"/>
<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="事故起因">
<el-input v-model="infoForm.cause" autocomplete="off"/>
<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="事故概述">
<el-input v-model="infoForm.summary" autocomplete="off"/>
<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="事故照片">
<el-form-item :label-width="formLabelWidth" label="事故照片" prop="photos">
<el-upload
ref="upload"
:file-list="image"
:disabled="isDisabled"
:file-list.sync="infoForm.photos"
:multiple="false"
:limit="1"
:auto-upload="true"
:limit="limitNum"
:on-remove="handleRemovePicture"
:on-change="handleChangeIMG"
:on-preview="handlePictureCardPreview"
:before-upload="beforeHiddenUpload"
:auto-upload="false"
class="avatar-uploader"
: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="原因分析及责任认定">
<el-input v-model="infoForm.analysis" autocomplete="off"/>
<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="考核建议">
<el-input v-model="infoForm.suggestions" autocomplete="off"/>
<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="整改措施">
<el-input v-model="infoForm.measures" autocomplete="off"/>
<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="填表人">
<el-input v-model="infoForm.creator" autocomplete="off"/>
<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="报出日期">
<el-form-item :label-width="formLabelWidth" label="报出日期" prop="reportDate">
<el-date-picker
v-model="infoForm.reportDate"
:disabled="isDisabled"
type="date"
placeholder="选择日期"
placeholder="选择报出日期"
style="width: 100%;"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd HH:mm:ss"/>
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
@ -108,10 +117,12 @@
<script>
import { requestFN } from '../../../../utils/request'
import { upload } from '@/utils/upload'
export default {
data() {
return {
config: config,
infoForm: {
id: '', // ID
incidentNumber: '', //
@ -128,7 +139,7 @@ export default {
seriouslyInjured: null, //
cause: '', //
summary: '', //
photos: '', //
photos: [], //
analysis: '', //
suggestions: '', //
measures: '', //
@ -141,8 +152,13 @@ export default {
/** 事故等级 */
incidentLevels: [],
tableName: '',
/** 图片文件 */
image: null,
/** 图片上传限制个数 */
limitNum: 1,
/** 预览图片地址 */
dialogImageUrl: '',
allowRemove: true, //
/** 预览弹窗 */
dialogImgVisible: false,
rules: {
incidentNumber: [{ required: true, message: '事故案号不能为空', trigger: 'blur' }],
incidentName: [{ required: true, message: '事故名称不能为空', trigger: 'blur' }],
@ -167,6 +183,12 @@ export default {
}
},
computed: {
isDisabled() {
return this.$parent.tableName === '查看'
}
},
created() {
this.getDict()
const id = this.$parent.id
@ -174,39 +196,154 @@ export default {
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) => {
this.listLoading = false
})
}
},
methods: {
handleRemovePicture() {},
/**
* 文件列表移除文件时的钩子
*/
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
})
}
})
}
},
handleChangeIMG() {},
/**
* 单独查询图片流文件
*/
getFileImageBinaray(fileName) {
requestFN(`/accident/view/photos`, { path: fileName }).then((res) => {
console.log('res :>> ', res)
})
},
handlePictureCardPreview() {},
/**
* 点击文件列表中已上传的文件时的钩子
*/
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
}
},
beforeHiddenUpload() {},
/**
* 返回到列表页面
*/
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() {
requestFN('/accident' + (this.tableName === '修改' ? '/update' : '/save'), this.infoForm)
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.getList() //
this.infoForm = this.$options.data().infoForm
this.$parent.activeName = 'List'
// eslint-disable-next-line handle-callback-err
}).catch((error) => {
this.$message.error(this.tableName + '失败')

View File

@ -7,7 +7,7 @@
<el-input v-model="searchForm.incidentName" placeholder="请输入隐患描述" class="filter-item"/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-col :span="4">
<el-form-item label="发生时间" prop="incidentDates">
<el-date-picker
v-model="searchForm.incidentDates"
@ -50,7 +50,6 @@
<el-row :gutter="24">
<el-col :span="24">
<el-button type="primary" icon="el-icon-circle-plus" @click="goView('', '新增')">新增</el-button>
<el-button icon="el-icon-top-right" @click="handleExport"></el-button>
<el-button icon="el-icon-s-promotion" @click="handleAllExport"></el-button>
<el-button icon="el-icon-refresh-left" @click="handleRefresh"></el-button>
<el-button type="danger" icon="el-icon-delete-solid" @click="handleBatchDel"></el-button>
@ -74,16 +73,17 @@
<el-table-column label="所属公司" prop="companyName"/>
<el-table-column label="发生时间" prop="incidentDate"/>
<el-table-column label="发生地点" prop="location"/>
<el-table-column label="操作" width="100">
<el-table-column label="操作" width="300">
<template v-slot="{row}">
<el-button icon="el-icon-view" size="mini" @click="goView(row.id, '查看')">查看</el-button>
<el-button icon="el-icon-view" size="mini" @click="goView(row.id, '修改')">修改</el-button>
<el-button icon="el-icon-view" size="mini" @click="deleteRow(row.id)"></el-button>
<el-button icon="el-icon-edit" size="mini" @click="goEdit(row.id, '修改')">修改</el-button>
<el-button icon="el-icon-delete-solid" type="danger" size="mini" @click="deleteRow(row.id)"></el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- table 表格 end -->
<div class="pagination-group">
<pagination :total="listQuery.total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="searchList" />
</div>
@ -101,6 +101,7 @@ export default {
data() {
return {
config: config,
//
searchForm: {
/** 事故名称 */
@ -118,6 +119,8 @@ export default {
/** 事故等级 */
incidentLevel: ''
},
/** 当前选中行 */
multipleSelection: [],
/** 列表加载态 */
listLoading: false,
/** 源列表数据项 */
@ -179,7 +182,7 @@ export default {
},
/**
* 跳转页面
* 跳转查看详情页面
*/
goView(id, name) {
this.$parent.id = id
@ -187,6 +190,15 @@ export default {
this.$parent.activeName = 'AddOrEdit'
},
/**
* 跳转修改页面
*/
goEdit(id, name) {
this.$parent.id = id
this.$parent.tableName = name
this.$parent.activeName = 'AddOrEdit'
},
/**
* 删除行数据
*/
@ -207,6 +219,7 @@ export default {
requestFN(url).then((response) => {
//
this.$message.success('删除成功')
this.searchList()
// eslint-disable-next-line handle-callback-err
}).catch((error) => {
this.$message.error('删除失败')
@ -217,18 +230,24 @@ export default {
message: '已取消删除'
})
})
this.searchList()
},
/**
* 导出
*/
handleExport() {},
/**
* 全部导出
*/
handleAllExport() {},
handleAllExport() {
this.$confirm('确定要下载excel模板吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.listLoading = false
window.open(config.templatefileUrl + 'template/limitSpace.xls')
}).catch(() => {
this.listLoading = false
})
this.listLoading = false
},
/**
* 刷新
@ -236,7 +255,7 @@ export default {
handleRefresh() {
this.searchForm = this.$options.data().searchForm
this.searchList()
this.toggleSelection()
// this.toggleSelection()
},
/**
@ -264,7 +283,6 @@ export default {
requestFN(url).then((response) => {
//
this.$message.success('删除成功')
this.searchList() //
// eslint-disable-next-line handle-callback-err
}).catch((error) => {
this.$message.error('删除失败')
@ -302,4 +320,8 @@ export default {
}
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.pagination-group {
margin-top: 14px;
}
</style>

View File

@ -26,7 +26,9 @@ export default {
watch: {
activeName(val) {
if (val === 'List') {
this.$refs.List.getList()
this.$nextTick(() => {
this.$refs.List.searchList()
})
}
}
}