<template>
|
<div class="page-container page-safety colorfff">
|
<div class="nav">
|
<img
|
class="nav-icon"
|
:src="require('@/assets/safety/location.png')"
|
alt=""
|
/>
|
<div class="nav-content">
|
<span @click="toSafety">安全管理 </span>
|
<i class="el-icon el-icon-arrow-right"></i>
|
<span> 事故通报</span>
|
</div>
|
</div>
|
<div class="content">
|
<div class="filter-section">
|
<el-form :inline="true" :model="filterForm" ref="filterForm" class="g-table-filter">
|
<el-form-item label="描述">
|
<el-input
|
style="width: 154px"
|
v-model="filterForm.describe"
|
placeholder="回车查询"
|
@keypress.enter.native="handleChange"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="类型">
|
<el-select
|
style="width: 154px"
|
v-model="filterForm.type"
|
popper-class="safety-report-filter"
|
@change="handleChange"
|
>
|
<el-option
|
v-for="item in typeOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="状态">
|
<el-select
|
style="width: 154px"
|
v-model="filterForm.status"
|
popper-class="safety-report-filter"
|
@change="handleChange"
|
>
|
<el-option
|
v-for="item in statusOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="分公司">
|
<el-select
|
style="width: 154px"
|
v-model="filterForm.companyId"
|
popper-class="safety-report-filter"
|
@change="handleChange"
|
>
|
<el-option
|
v-for="item in companyList"
|
:key="item.companyNum"
|
:label="item.companyName"
|
:value="item.companyNum"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="时间筛选">
|
<el-date-picker
|
v-model="filterForm.accidentTime"
|
type="date"
|
placeholder=""
|
style="width: 154px"
|
:clearable="true"
|
@change="timeChange"
|
>
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="排序条件">
|
<el-select
|
style="width: 154px"
|
v-model="filterForm.orderField"
|
popper-class="safety-report-filter"
|
@change="handleChange"
|
>
|
<el-option
|
v-for="item in orderFieldOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option
|
>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="g-table">
|
<el-table
|
stripe
|
style="width: 100%"
|
header-row-class-name="table-header"
|
:height="'calc(100vh - 400px)'"
|
:data="reportList"
|
highlight-current-row
|
class="bs"
|
>
|
<el-table-column align="center" prop="accidentTime" label="时间">
|
<template slot-scope="scope">{{ getTime(scope.row.accidentTime) }}
|
</template
|
>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="companyName"
|
label="分公司"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="type"
|
label="事故类型"
|
>
|
<template v-slot:default="scope">
|
{{ typeMap[scope.row.type] }}
|
</template>
|
</el-table-column>
|
<el-table-column
|
align="center"
|
prop="lineName"
|
label="线路"
|
></el-table-column>
|
<el-table-column
|
align="center"
|
prop="describe"
|
label="描述"
|
></el-table-column>
|
<el-table-column align="center" prop="status" label="状态">
|
<template slot-scope="scope">
|
{{
|
scope.row.status == "1"
|
? "未审核"
|
: scope.row.status == "2"
|
? "忽略"
|
: "已审核"
|
}}
|
</template>
|
</el-table-column>
|
<el-table-column align="center" label="操作">
|
<template slot-scope="scope">
|
<el-button type="text" @click="dispatchReport(scope.row.id)"
|
v-if="getAuthBtn('assistant:safety:audit') && scope.row.status == '1'"
|
>审核
|
</el-button
|
>
|
<el-button type="text" @click="lookDetail(scope.row.id)"
|
>查看详情
|
</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="g-pagination">
|
<el-pagination
|
layout="prev, pager, next"
|
:total="total"
|
background
|
:current-page="filterForm.pageNum"
|
:page-size="filterForm.pageSize"
|
@current-change="pageChange"
|
></el-pagination>
|
</div>
|
</div>
|
</div>
|
<div class="mask" v-if="showDialog"></div>
|
<div class="dialog" v-if="showDialog">
|
<div class="title row">
|
<img
|
class="title-icon"
|
:src="require('@/assets/safety/icon_select.png')"
|
alt=""
|
/>
|
<span class="title-text">请选择下发单位</span>
|
</div>
|
<img
|
class="icon-close"
|
:src="require('@/assets/safety/icon_close_n.png')"
|
alt=""
|
@click="showDialog = false"
|
/>
|
|
<div class="tree-wrap">
|
<el-tree
|
:data="deptList"
|
show-checkbox
|
node-key="id"
|
:props="{ label: 'name' }"
|
:default-expanded-keys="['1']"
|
:indent="0"
|
>
|
</el-tree>
|
</div>
|
|
<div class="action-bar">
|
<div class="action-item orange pointer" @click="showDialog = false">
|
取消
|
</div>
|
<div class="action-item blue pointer">确认</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import moment from "moment";
|
|
export default {
|
name: "safetyAccidentReport",
|
data() {
|
return {
|
filterForm: {
|
describe: "",
|
status: "",
|
companyId: "",
|
order: "asc",
|
orderField: "",
|
accidentTime: "",
|
type: "",
|
pageSize: 20,
|
pageNum: 1,
|
},
|
total: 0,
|
reportList: [],
|
statusOptions: [
|
{value: "", label: "全部"},
|
{value: "1", label: "未审核"},
|
{value: "2", label: "忽略"},
|
{value: "3", label: "已审核"},
|
],
|
orderFieldOptions: [
|
{label: "事件时间", value: "accident_time"},
|
{label: "分公司", value: "company_id"},
|
{label: "默认排序", value: ""},
|
],
|
typeOptions: [
|
{label: "全部", value: ""},
|
{label: "直行事故", value: "1"},
|
{label: "追尾事故", value: "2"},
|
{label: "超车事故", value: "3"},
|
{label: "左转弯事故", value: "4"},
|
{label: "右转弯事故", value: "5"},
|
],
|
typeMap: {
|
1: '直行事故',
|
2: '追尾事故',
|
3: '超车事故',
|
4: '左转弯事故',
|
5: '右转弯事故'
|
},
|
companyList: [],
|
showDialog: false,
|
deptList: [],
|
defaultProps: {
|
children: "children",
|
label: "label",
|
},
|
authButton: []
|
};
|
},
|
created() {
|
this.getCompanyList();
|
// this.getDept();
|
this.getAuth();
|
},
|
activated() {
|
if (this.$route.query.status) {
|
this.filterForm.status = this.$route.query.status;
|
} else {
|
this.filterForm.status = "";
|
}
|
this.getList();
|
},
|
methods: {
|
getList() {
|
const params = {};
|
if (this.filterForm.describe) params.describe = this.filterForm.describe;
|
if (this.filterForm.type) params.type = this.filterForm.type;
|
if (this.filterForm.status) params.status = this.filterForm.status;
|
if (this.filterForm.companyId)
|
params.companyId = this.filterForm.companyId;
|
if (this.filterForm.accidentTime)
|
params.accidentTime = this.filterForm.accidentTime;
|
if (this.filterForm.orderField) {
|
params.orderField = this.filterForm.orderField;
|
params.order = this.filterForm.order;
|
}
|
this.$axios
|
.get(this.$Interface.accident.list, {
|
params: {
|
limit: this.filterForm.pageSize,
|
page: this.filterForm.pageNum,
|
...params,
|
},
|
})
|
.then((res) => {
|
this.reportList = res.data.list;
|
this.total = res.data.total;
|
});
|
},
|
pageChange(page) {
|
this.filterForm.pageNum = page;
|
this.getList();
|
},
|
lookDetail(id) {
|
this.$router.push("/safetyAccidentReportDetail?id=" + id);
|
},
|
toSafety() {
|
this.$router.go(-1);
|
},
|
handleChange() {
|
this.filterForm.pageNum = 1;
|
this.reportList = [];
|
this.getList();
|
},
|
dispatchReport(id) {
|
// this.showDialog = true;
|
this.id = id;
|
this.$confirm('确认完成此通报审核并下发？', '操作确认', {
|
type: 'warning'
|
}).then(res => {
|
this.$axios
|
.put(this.$Interface.accident.update, {
|
id: this.id,
|
status: 3,
|
})
|
.then((res) => {
|
this.$message({
|
type: "success",
|
message: "下发成功",
|
});
|
this.getList();
|
this.$forceUpdate()
|
});
|
}).catch(cancel => {
|
|
})
|
},
|
getCompanyList() {
|
this.$axios
|
.get(this.$Interface.companyList, {
|
params: {},
|
})
|
.then((res) => {
|
for (let i = 0; i < res.data.length; i++) {
|
if (res.data[i].companyNum == 1) {
|
res.data.splice(i, 1);
|
i--;
|
}
|
}
|
this.companyList = res.data;
|
this.companyList.unshift({
|
companyNum: "",
|
companyName: "全部",
|
});
|
});
|
},
|
timeChange() {
|
if (this.filterForm.accidentTime) {
|
this.filterForm.accidentTime = moment(
|
this.filterForm.accidentTime
|
).format("yyyy-MM-DD");
|
} else {
|
this.filterForm.accidentTime = "";
|
}
|
this.handleChange();
|
},
|
// getDept() {
|
// this.$axios.get(this.$Interface.deptList).then((_res) => {
|
// this.deptList = _res.data;
|
// });
|
// },
|
getTime(value) {
|
return moment(value).format('yyyy-MM-DD HH:mm:ss')
|
},
|
getAuth() {
|
this.$axios.get(this.$Interface.auth).then(res => {
|
console.log(res)
|
if (res.data && res.data.length > 0) {
|
this.authButton = res.data.map(item => item.permissions);
|
} else {
|
this.authButton = []
|
}
|
})
|
},
|
getAuthBtn(type) {
|
return this.authButton.includes(type);
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
@import url("../../assets/css/common.css");
|
|
@orange: #1cd1d3;
|
@blue: #3e89d3;
|
.page-container {
|
padding: 20px 30px;
|
padding-bottom: 0;
|
|
.nav {
|
display: flex;
|
font-size: 14px;
|
width: 100%;
|
height: 20px;
|
align-items: center;
|
|
.nav-icon {
|
width: 18px;
|
margin-left: 11px;
|
flex-shrink: 0;
|
margin-right: 11px;
|
}
|
|
.nav-content {
|
flex: 1;
|
}
|
}
|
|
.content {
|
margin-top: 16px;
|
|
.filter-section {
|
text-align: center;
|
}
|
}
|
|
.mask {
|
position: fixed;
|
top: 0;
|
left: 0;
|
z-index: 10;
|
width: 100vw;
|
height: 100vh;
|
background: rgba(0, 0, 0, 0.8);
|
}
|
|
.dialog {
|
width: 690px;
|
height: 768px;
|
opacity: 1;
|
background: linear-gradient(180deg, #06203f, #08141c);
|
border: 2px solid #2a488a;
|
margin: auto;
|
position: fixed;
|
top: 100px;
|
left: 0;
|
right: 0;
|
z-index: 100;
|
|
.title {
|
.title-icon {
|
margin: 17px 20px;
|
margin-right: 8px;
|
width: 20px;
|
}
|
}
|
|
.icon-close {
|
position: absolute;
|
top: 0;
|
right: -3px;
|
width: 42px;
|
cursor: pointer;
|
}
|
|
.tree-wrap {
|
margin: 62px 92px;
|
margin-bottom: 0;
|
|
/deep/ .el-icon-caret-right:before {
|
content: "" !important;
|
}
|
}
|
|
.action-bar {
|
position: absolute;
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
color: #fff;
|
font-size: 14px;
|
margin-top: 113px;
|
bottom: 60px;
|
|
.action-item:first-child {
|
margin-right: 96px;
|
}
|
|
.action-item {
|
padding: 8px 30px;
|
border-left: 2px solid;
|
border-right: 2px solid;
|
opacity: 0.8;
|
}
|
|
.orange {
|
border-color: @orange;
|
background-color: rgba(28, 209, 211, 0.1);
|
}
|
|
.blue {
|
border-color: @blue;
|
background-color: rgba(62, 137, 211, 0.1);
|
}
|
}
|
}
|
}
|
</style>
|
