You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

687 lines
24 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<div class="container">
<!-- 查询配置 -->
<div style="padding: 0px 20px">
<div ref="lxHeader">
<LxHeader icon="md-apps" text="事故上报" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
<div slot="content"></div>
<slot>
<div>
<Input style="width: 200px; margin-right: 10px" v-model="searchFields.KeyWord" placeholder="关键字搜索" />
<!-- <DatePicker type="datetimerange" v-model="" @on-ok="handleOk"
format="yyyy-MM-dd HH:mm" placeholder="事故的发生时间范围" style="width: 300px"></DatePicker> -->
<el-date-picker class="searchdate" v-model="searchFields.dateRange" @change="handleOk"
value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始发生时间"
end-placeholder="结束发生时间">
</el-date-picker>
<Button type="primary" @click="search" style="margin-left: 10px">查询</Button>
<Button type="primary" @click="edit()" style="margin-left: 10px">新增</Button>
</div>
</slot>
</LxHeader>
</div>
<div ref="lxTable" class="table-tree">
<el-table :data="tableData" class="v-table" :height="tableHeight" style="width: 100%">
<el-table-column type="index" fixed width="50" align="center" fixed="left"> </el-table-column>
<el-table-column :prop="column.field" :fixed="column.fixed" :align="column.align"
v-for="(column,index) in columns" :label="column.title" :width="column.width">
<template slot-scope="scope">
<div v-if="column.type == 'img'">
<img v-for="(file, vIndex) in getFilePath( scope.row[column.field], column)" :key="vIndex"
@click="viewImg(scope.row, column, file.path)" class="table-img" :src="file.path" />
</div>
<div v-else-if="column.type=='format'">
<div v-if="column.field=='hurt_count'">
{{"受伤"+scope.row["hurt_count"]+"人 死亡"+scope.row["die_count"]+"人 失踪"+scope.row["miss_count"]+"人"}}
</div>
<div v-if="column.field=='is_fail'">
<el-tag>
{{scope.row["is_fail"]=="1"?"是":"否"}}
</el-tag>
</div>
</div>
<div v-else-if="column.type=='formats'">
<div v-if="column.field=='admin'||column.field=='department'||column.field=='maintenance_department'">
{{scope.row[column.field]?scope.row[column.field].name:""}}
</div>
</div>
<div v-else-if="column.type=='opt'">
<Button ghost size="small" @click="edit(scope.row)" type="primary"
style="margin-left: 10px;">编辑</Button>
<Button ghost size="small" @click="del(scope.row)" type="error" style="margin-left: 10px;">删除</Button>
</div>
<div v-else>{{scope.row[column.field]}}</div>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination @current-change="handleCurrentChange" :current-page="paginations.page"
:page-size="paginations.page_size" background layout="prev, pager, next" :total="paginations.total">
</el-pagination>
</div>
</div>
</div>
<el-dialog title="事故编辑" :visible.sync="dialogFormVisible" fullscreen width="90%">
<div class="dialogConcent" :style="{height:clientHeight+'px'}">
<el-scrollbar style="flex: 1">
<el-form :model="form" :rules="rules" ref="form">
<div style="padding: 20px 0px;" class="form-sub-title">
<span>基础信息
</span>
</div>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="事发单位" prop="unit" label-position="right" :label-width="formLabelWidth">
<el-input v-model="form.unit" placeholder="请填写事发单位" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8" :offset="8">
<el-form-item label="事发时间" prop="happen_date" label-position="right" :label-width="formLabelWidth">
<el-date-picker style="width:100%" v-model="form.happen_date" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" placeholder="选择事发时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="事故类别" prop="type" label-position="right" :label-width="formLabelWidth">
<el-select style="width:100%" v-model="form.type" placeholder="请选择事故类别">
<el-option v-for="item in parameters.accidentType" :key="item.id" :label="item.value"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8" :offset="8">
<el-form-item label="上报时间" prop="report_date" label-position="right" :label-width="formLabelWidth">
<el-date-picker style="width:100%" v-model="form.report_date" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" placeholder="选择上报时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="事发地点" prop="address" label-position="right" :label-width="formLabelWidth">
<el-input v-model="form.address" placeholder="请填写事发地点" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="事故等级" prop="level" label-position="right" :label-width="formLabelWidth">
<el-select style="width:100%" v-model="form.level" placeholder="请选择事故等级">
<el-option v-for="item in parameters.accidentLevel" :key="item.id" :label="item.value"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="事故未遂" prop="is_fail" label-position="right" :label-width="formLabelWidth">
<el-radio-group v-model="form.is_fail">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="伤亡情况" label-position="right" :label-width="formLabelWidth">
<div style="display: flex; align-items: center;">
<el-input v-model="form.hurt_count" style="width: 180px;" placeholder="人数" autocomplete="off">
<template slot="prepend">伤</template>
<template slot="append">人</template>
</el-input>
<el-input v-model="form.die_count" style="width: 180px;margin-left: 20px;" placeholder="人数"
autocomplete="off">
<template slot="prepend">亡</template>
<template slot="append">人</template>
</el-input>
<el-input v-model="form.miss_count" style="width: 240px;margin-left: 20px;" placeholder=" 人数"
autocomplete="off"> <template slot="prepend">下落不明</template>
<template slot="append">人</template>
</el-input>
</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="初步估算直接经济损失" prop="economic_loss">
<el-input v-model="form.economic_loss" placeholder="请填写金额" style="width: 180px;" autocomplete="off">
<template slot="append">元</template>
</el-input>
</el-form-item>
</el-col>
</el-row>
<div style="padding: 20px 0px;" class="form-sub-title">
<span>详细信息
</span>
</div>
<el-form-item label="事发单位情况">
<el-input type="textarea" v-model="form.unit_overview" style="width: 98%;"></el-input>
<el-upload class="upload-demo" :on-success="handlesuccess" :data="uploadOther" :action="action"
:on-remove="handleRemove" :before-remove="beforeRemove" :on-exceed="handleExceed"
:file-list="fileList.unit_overview_files">
<el-button size="small" type="primary" @click="toupload('unit_overview_files_list')">点击上传</el-button>
</el-upload>
</el-form-item>
<el-form-item label="事故发生的时间地点以及现场的情况">
<el-input type="textarea" v-model="form.scene_condition" style="width: 98%;"></el-input>
<el-upload class="upload-demo" :on-success="handlesuccess" :data="uploadOther" :action="action"
:on-remove="handleRemove" :before-remove="beforeRemove" :on-exceed="handleExceed"
:file-list="fileList.scene_condition_files">
<el-button size="small" type="primary" @click="toupload('scene_condition_files_list')">点击上传</el-button>
</el-upload>
</el-form-item>
<el-form-item label="事故已经造成或者可能造成的伤亡人数 ( 包括下落不明的人数 ) 和初步估计的直接经济损失">
<el-input type="textarea" v-model="form.consequence" style="width: 98%;"></el-input>
<el-upload class="upload-demo" :on-success="handlesuccess" :data="uploadOther" :action="action"
:on-remove="handleRemove" :before-remove="beforeRemove" :on-exceed="handleExceed"
:file-list="fileList.consequence_file">
<el-button size="small" type="primary" @click="toupload('consequence_file_list')">点击上传</el-button>
</el-upload>
</el-form-item>
<el-form-item label="已采取的措施">
<el-input type="textarea" v-model="form.measure" style="width: 98%;"></el-input>
<el-upload class="upload-demo" :on-success="handlesuccess" :data="uploadOther" :action="action"
:on-remove="handleRemove" :before-remove="beforeRemove" :on-exceed="handleExceed"
:file-list="fileList.measure_file">
<el-button size="small" type="primary" @click="toupload('measure_file_list')">点击上传</el-button>
</el-upload>
</el-form-item>
<el-form-item label="其他需要报告的情况">
<el-input type="textarea" v-model="form.other" style="width: 98%;"></el-input>
<el-upload class="upload-demo" :on-success="handlesuccess" :data="uploadOther" :action="action"
:on-remove="handleRemove" :before-remove="beforeRemove" :on-exceed="handleExceed"
:file-list="fileList.other_file">
<el-button size="small" type="primary" @click="toupload('other_file_list')">点击上传</el-button>
</el-upload>
</el-form-item>
</el-form>
</el-scrollbar>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="resetForm('form')">取 消</el-button>
<el-button type="primary" v-preventReClick @click="submitForm('form')"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
getToken
} from '@/utils/auth'
import LxHeader from "@/components/LxHeader/index.vue";
import Tinymce from '@/components/Tinymce';
import {
getparameteritem
} from "../../api/system/dictionary.js"
import {
save,
store,
del,
get,
listaccident
} from "../../api/accident/index.js";
import {
listdept
} from "../../api/system/department.js"
export default {
components: {
LxHeader,
Tinymce
},
data() {
return {
action: `${process.env.VUE_APP_BASE_API}api/admin/upload-file`,
touploadType: "",
checkAll: false,
isIndeterminate: true,
parameters: {
accidentType: [],
accidentLevel: []
},
paginations: {
page: 1,
page_size: 15,
total: 0
},
tableHeight: 0,
dialogFormVisible: false,
formLabelWidth: "120px",
clientHeight: 0,
form: {
id: "",
unit: "",
happen_date: "",
report_date: "",
address: "",
hurt_count: 0,
die_count: 0,
miss_count: 0,
economic_loss: "0",
level: "",
is_fail: 1,
type: "",
unit_overview: "",
scene_condition: "",
consequence: "",
measure: "",
other: "",
unit_overview_files_list: [],
scene_condition_files_list: [],
consequence_file_list: [],
measure_file_list: [],
other_file_list: [],
},
fileList: {
unit_overview_files: [],
scene_condition_files: [],
consequence_file: [],
measure_file: [],
other_file: []
},
tableData: [],
rules: {
title: [{
required: true,
message: '请输入标题',
trigger: 'blur'
}],
department_list: [{
required: true,
message: '请选择科室',
trigger: 'blur'
}],
daterange: [{
required: true,
message: '请选择日期区间',
trigger: 'blur'
}]
},
indexUrl: "/api/admin/task/index",
tableHeight: 900,
searchFields: {
KeyWord: "",
dateRange: ['', '']
},
columns: [{
field: "unit",
title: "事发单位",
type: "string",
width: 240
},
{
field: "happen_date",
title: "事发时间",
type: "date",
width: 180,
align: "center"
},
{
field: "report_date",
title: "上报时间",
type: "date",
width: 180,
align: "center"
},
{
field: "economic_loss",
title: "预估经济损失",
width: 120,
align: "right"
},
{
field: "level_name",
title: "事故等级",
width: 120,
align: "center"
},
{
field: "type_name",
title: "事故类型",
width: 120,
align: "center"
},
{
field: "hurt_count",
title: "伤亡情况",
type: "format",
width: 240,
align: "left"
},
{
field: "scene_condition",
title: "现场情况",
align: "left",
width: 240
},
{
field: "created_at",
title: "创建时间",
type: "string",
width: 180,
align: "center"
},
{
field: "admin",
title: "创建人",
type: "formats",
width: 120,
align: "center"
},
{
field: "department",
title: "创建人科室",
type: "formats",
width: 120,
align: "center"
},
{
field: "操作",
title: "操作",
width: 220,
type: "opt",
fixed: "right"
}
],
uploadOther: {
token: ""
},
deptOptions: [],
all_files: []
}
},
created() {
this.uploadOther.token = getToken();
this.loadDeptOptions();
this.initLoad();
this.load();
},
methods: {
handleOk(val) {
this.searchFields.happen_date_start = val ? val[0] : ""
this.searchFields.happen_date_end = val ? val[1] : ""
},
toupload(type) {
console.log(type)
this.touploadType = type;
},
loadDeptOptions() {
listdept().
then((res) => {
this.deptOptions = res;
}).catch(error => {
console.log(error)
reject(error)
})
},
handleCheckAllChange(val) {
console.log(val)
let options = [];
for (var m of this.deptOptions) {
options.push(m.id);
}
this.form.department_list = val ? options : [];
this.isIndeterminate = false;
},
handleCheckedDeptChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.deptOptions.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.deptOptions.length;
},
initLoad() {
var that = this;
var clientHeight = document.documentElement.clientHeight
var lxHeader_height = 96.5; //查询 头部
var paginationHeight = 37; //分页的高度
var topHeight = 50; //页面 头部
let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
that.tableHeight = tableHeight;
//加载自定义参数
getparameteritem("accidentLevel").then(res => {
this.parameters.accidentLevel = res.detail;
});
//加载自定义参数
getparameteritem("accidentType").then(res => {
this.parameters.accidentType = res.detail;
});
},
handleCurrentChange(page) {
this.paginations.page = page;
this.load();
},
search() {
this.paginations.page = 1;
this.load();
},
load() {
listaccident({
page: this.paginations.page,
page_size: this.paginations.page_size,
keyword: this.searchFields.KeyWord,
happen_date_start: this.searchFields.happen_date_start,
happen_date_end: this.searchFields.happen_date_end
}).then(res => {
this.tableData = res.data;
this.paginations.total = res.total
}).catch(error => {
})
},
del(obj) {
var that = this;
if (obj) {
this.$Modal.confirm({
title: '确认要删除数据?',
onOk: () => {
del(obj.id).then(response => {
this.$Message.success('操作成功');
that.load();
}).catch(error => {
console.log(error)
reject(error)
})
},
onCancel: () => {
//this.$Message.info('Clicked cancel');
}
});
}
},
show(obj) {
this.clientHeight = document.documentElement.clientHeight - 84 - 110;
this.dialogViewVisible = true;
this.info(obj);
},
info(obj) {
var that = this;
get(obj.id).then(res => {
let result = Object.assign(that.form, res);
that.form = result;
that.form.type = parseInt(result.type);
Object.keys(this.fileList).map(key => {
if (result[key].length != 0) {
let _files = [];
for (var mod of result[key]) {
let m = Object.assign({}, mod.files);
m.name = mod.files.original_name;
_files.push(m);
m.touploadType = key;
that.all_files.push(m);
}
that.fileList[key] = _files;
}
})
}).catch(error => {
//reject(error)
})
},
edit(obj) {
var that = this;
this.form = this.$options.data().form;
that.fileList.consequence_file = [];
that.fileList.measure_file = [];
that.fileList.other_file = [];
that.fileList.scene_condition_files = [];
that.fileList.unit_overview_files = [];
this.clientHeight = document.documentElement.clientHeight - 84 - 110;
if (obj) {
that.info(obj);
} else {}
this.dialogFormVisible = true;
},
submitForm(formName) {
var that = this;
this.$refs[formName].validate((valid) => {
if (valid) {
if (that.form.id) {
save(that.form).then(response => {
//console.log(response)
this.$Message.success('操作成功');
that.load();
that.dialogFormVisible = false;
}).catch(error => {
//reject(error)
})
} else {
store(that.form).then(response => {
//console.log(response)
this.$Message.success('操作成功');
that.load();
that.dialogFormVisible = false;
}).catch(error => {
//reject(error)
})
}
that.fileList.consequence_file = [];
that.fileList.measure_file = [];
that.fileList.other_file = [];
that.fileList.scene_condition_files = [];
that.fileList.unit_overview_files = [];
} else {
this.$Message.error('数据校验失败');
console.log('error submit!!');
return false;
}
});
},
handleRemove(file, fileList) {
var _touploadType = this.all_files.filter((x) => {
return x.uid == file.uid;
})[0].touploadType;
console.log(_touploadType);
var type = 1;
let listUrl = [];
for (var m of fileList) {
if (m.response)
listUrl.push({
upload_id: m.response.id,
type: type
});
else
listUrl.push({
upload_id: m.id,
type: type
});
}
this.form[_touploadType] = listUrl;
},
handleExceed(files, fileList) {},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${ file.name }`);
},
handlesuccess(response, file, fileList) {
//console.log(response,file,fileList);
let listUrl = [];
var type = 1;
Object.keys(this.fileList).map((key, index) => {
if (this.touploadType == key)
type = index + 1
})
for (var m of fileList) {
if (m.response)
listUrl.push({
upload_id: m.response.id,
type: type
});
else
listUrl.push({
upload_id: m.id,
type: type
});
}
file.touploadType = this.touploadType;
this.all_files.push(file);
this.form[this.touploadType] = listUrl;
},
resetForm(formName) {
var that = this;
this.$refs[formName].resetFields();
that.dialogFormVisible = false;
},
}
}
</script>
<style>
.dialogConcent {
overflow-y: auto;
overflow-x: hidden !important;
}
.searchdate {
height: 32px;
vertical-align: middle;
}
.searchdate.el-date-editor .el-range__icon {
line-height: 25px;
}
.searchdate.el-date-editor .el-range-separator {
line-height: 25px;
}
</style>