<template>
|
<basic-container>
|
<avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" ref="crud" @row-del="rowDel"
|
v-model="form" :permission="permissionList" @row-update="rowUpdate" @row-save="rowSave"
|
:before-open="beforeOpen" @search-change="searchChange" @search-reset="searchReset"
|
@selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
|
@refresh-change="refreshChange" @on-load="onLoad">
|
<template slot="menuLeft">
|
<div class="tab-list">
|
<div :class="{ 'choose': typeStatus == 3 }" @click="changeType(3)">全部</div>
|
<div :class="{ 'choose': typeStatus == 1 }" @click="changeType(1)">待审核</div>
|
<div :class="{ 'choose': typeStatus == 2 }" @click="changeType(2)">已审核</div>
|
</div>
|
<el-button type="warning" size="small" plain icon="el-icon-download" @click="handleExport">导出
|
</el-button>
|
</template>
|
|
<template slot-scope="{row, size}" slot="status">
|
<el-tag :size="size" :type="showConfirmFlag(row.status).type">{{ showConfirmFlag(row.status).text
|
}}</el-tag>
|
</template>
|
<template slot-scope="{type,size,row }" slot="menu">
|
<el-button icon="el-icon-detail" :size="size" :type="type" @click.stop="getDetail(row)">
|
详情
|
</el-button>
|
<el-button icon="el-icon-detail" :size="size" :type="type" @click.stop="goAudit(row)"
|
:disabled="row.status != 1">审核</el-button>
|
</template>
|
</avue-crud>
|
<el-drawer title="整改情况详情" :visible.sync="isDetail" :append-to-body="true" size="46%" direction="rtl">
|
<div class="title">
|
<div class="icon">{{ refreshNum }}</div>
|
基础信息
|
</div>
|
<div class="basic-info">
|
<div class="info-item">
|
<div class="info-name">场所名称</div>
|
<div class="info-value">{{ rowDetail.placeName }}</div>
|
</div>
|
<div class="info-item">
|
<div class="info-name">场所类型</div>
|
<div class="info-value">{{ rowDetail.$nineType }}</div>
|
</div>
|
<div class="info-item">
|
<div class="info-name">检查人</div>
|
<div class="info-value">{{ rowDetail.name }}</div>
|
</div>
|
<div class="info-item">
|
<div class="info-name">检查时间</div>
|
<div class="info-value">{{ rowDetail.createTime }}</div>
|
</div>
|
</div>
|
<div class="title">
|
<div class="icon"></div>
|
检查记录
|
</div>
|
|
<div class="question-list" v-for="(tItem, tIndex) in rowDetail.qTypeList" :key='tIndex'>
|
<div class="question-type" @click="flodQL(tIndex)">
|
<div class="type-name">
|
{{ CNNum[tIndex] }}、{{ tItem.questionName }}
|
</div>
|
<div class="icon-box"><i class="el-icon-arrow-down" v-show="tItem.isShowQList"></i><i
|
class="el-icon-arrow-up" v-show="!tItem.isShowQList"></i></div>
|
</div>
|
<div class="question-item" v-for="(item, index) in tItem.questionList" :key='index'
|
v-show="tItem.isShowQList">
|
<div class="question-name">
|
<div class="key">{{ index + 1 }}、{{ item.itemsNameTitle }}</div>
|
<div class="value"><el-radio v-model="radio" label="1" disabled>存在</el-radio>
|
<el-radio v-model="radio" label="2" disabled>不存在</el-radio>
|
</div>
|
</div>
|
<div class="yh-pic-box">
|
<div class="yh-pic-name">
|
隐患图片
|
</div>
|
<div class="yh-pic-list">
|
<div class="pic-item" v-for="pic in item.imageUrlsList">
|
<el-image style="width: 100px; height: 100px" :src="pic" :fit="fit"></el-image>
|
</div>
|
</div>
|
</div>
|
<div class="yh-remark">
|
<div class="yh-remark-name">
|
隐患描述
|
</div>
|
<div class="yh-remark-value">
|
{{ item.remark }}
|
</div>
|
</div>
|
<div class="yh-pic-box">
|
<div class="yh-pic-name">
|
整改后图片
|
</div>
|
<div class="yh-pic-list">
|
<div class="pic-item" v-for="pic in item.rectificationImageUrlsList">
|
<el-image style="width: 100px; height: 100px" :src="pic" :fit="fit"></el-image>
|
</div>
|
</div>
|
</div>
|
<div class="yh-remark">
|
<div class="yh-remark-name">
|
整改后描述
|
</div>
|
<div class="yh-remark-value">
|
{{ item.rectificationRemark }}
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="question-list" v-show="rowDetail.isShowRemarkTitle">
|
<div class="question-type" @click="flodRM()">
|
<div class="type-name">
|
{{ CNNum[rowDetail.remarkNo] }}、其他隐患问题
|
</div>
|
<div class="icon-box"><i class="el-icon-arrow-down" v-show="rowDetail.isShowRemark"></i><i
|
class="el-icon-arrow-up" v-show="!rowDetail.isShowRemark"></i></div>
|
</div>
|
<div class="remark-box" v-show="rowDetail.isShowRemark">{{ rowDetail.remark }}</div>
|
</div>
|
</el-drawer>
|
<!-- 审核弹窗 -->
|
<el-dialog :visible.sync="visible" append-to-body destroy-on-close title="审核" width="30%"
|
custom-class="flow-design-dialog" :before-close="handleClose">
|
<el-form ref="auditForm" :model="auditForm" :rules="auditRules">
|
<el-form-item label="审核结论：" prop="status">
|
<el-radio-group v-model="auditForm.status">
|
<el-radio :label="2">通过</el-radio>
|
<el-radio :label="3">不通过</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="不通过原因：" prop="reasonFailure" v-if="auditForm.status == 3">
|
<el-input type="textarea" v-model="auditForm.reasonFailure"></el-input>
|
</el-form-item>
|
</el-form>
|
<div style="display:flex;justify-content:center">
|
<el-button @click="submitAudit" size="small" type="primary">保 存</el-button>
|
<el-button @click="cancelAudit" size="small">取 消</el-button>
|
</div>
|
</el-dialog>
|
</basic-container>
|
</template>
|
|
<script>
|
import {
|
mapGetters
|
} from "vuex"
|
import {
|
getZGQKList, getPatrolGroupTree, applyRectification
|
} from "@/api/publicSecurity/ninePlaceManage"
|
import NProgress from 'nprogress'
|
import 'nprogress/nprogress.css'
|
import Qs from "qs"
|
import {
|
exportBlob
|
} from "@/api/common"
|
import {
|
getToken
|
} from '@/util/auth'
|
import {
|
downloadXls
|
} from "@/util/util"
|
import {
|
dateNow
|
} from "@/util/date"
|
import website from '@/config/website'
|
|
export default {
|
data () {
|
return {
|
auditRules: {
|
status: [{ required: true, message: "必填" }],
|
reasonFailure: [{ required: true, message: "必填" }],
|
},
|
auditForm: {},
|
visible: false,
|
typeStatus: 1,
|
isDetail: false,
|
rowDetail: [],
|
form: {},
|
query: {},
|
loading: true,
|
|
page: {
|
pageSize: 10,
|
currentPage: 1,
|
total: 0,
|
},
|
datetime: "",
|
selectionList: [],
|
option: {
|
height: "auto",
|
calcHeight: 54,
|
dialogWidth: 950,
|
tip: false,
|
searchShow: true,
|
searchMenuSpan: 3,
|
menu: true,
|
menuWidth: 120,
|
border: true,
|
index: true,
|
editBtn: false,
|
delBtn: false,
|
addBtn: false,
|
refreshBtn: false,
|
searchShowBtn: false,
|
columnBtn: false,
|
dialogClickModal: false,
|
column: [{
|
label: "场所名称",
|
prop: "placeName",
|
align: 'center',
|
search: true,
|
searchSpan: 4,
|
searchLabelWidth: 76,
|
}, {
|
label: "场所地址",
|
prop: "addressName",
|
align: 'center',
|
search: true,
|
searchSpan: 4,
|
searchLabelWidth: 96,
|
}, {
|
label: "场所类别",
|
prop: "nineType",
|
align: 'center',
|
dicUrl: "/api/blade-system/dict-biz/tree?code=nineType",
|
props: {
|
label: "title",
|
value: "key",
|
},
|
type: 'select',
|
search: true,
|
searchSpan: 4,
|
searchLabelWidth: 96,
|
}, {
|
label: "存在安全隐患或违法行为",
|
prop: "hiddenDanger",
|
align: 'center',
|
width: 280
|
}, {
|
label: "是否下发《责令改正通知书》或是否处罚",
|
prop: "rectificationNoticeFlag",
|
align: 'center',
|
dicData: [
|
{
|
label: "否",
|
value: 1,
|
},
|
{
|
label: "是",
|
value: 2,
|
}
|
],
|
width: 140
|
},
|
{
|
label: "是否整改完毕",
|
prop: "rectificationFlag",
|
align: 'center',
|
dicData: [
|
{
|
label: "否",
|
value: 1,
|
},
|
{
|
label: "是",
|
value: 2,
|
}
|
],
|
type: 'select',
|
search: true,
|
searchSpan: 4,
|
searchLabelWidth: 124,
|
width: 100
|
}, {
|
label: "完成整改时限",
|
prop: "rectificationEndTime",
|
align: 'center',
|
width: 100
|
}, {
|
label: "检查时间",
|
prop: "createTime",
|
align: 'center',
|
width: 100
|
}, {
|
label: "派出所名称",
|
prop: "deptName",
|
align: 'center',
|
search: true,
|
searchSpan: 4,
|
searchLabelWidth: 106,
|
}, {
|
label: "审核状态",
|
prop: "status",
|
align: 'center',
|
dicData: [
|
{
|
label: "待审核",
|
value: 1,
|
},
|
{
|
label: "审核通过",
|
value: 2,
|
},
|
{
|
label: "审核不通过",
|
value: 3,
|
},
|
{
|
label: "待上报",
|
value: 4,
|
}
|
],
|
search: false,
|
searchSpan: 4,
|
searchLabelWidth: 106,
|
}, {
|
label: "检查时间",
|
prop: "dateRange",
|
type: "daterange",
|
format: "yyyy-MM-dd",
|
valueFormat: "yyyy-MM-dd",
|
searchRange: true,
|
startPlaceholder: '开始日期',
|
endPlaceholder: '结束日期',
|
align: 'center',
|
search: true,
|
hide: true,
|
searchSpan: 5,
|
searchLabelWidth: 76,
|
}],
|
},
|
data: [],
|
refreshNum: 1,
|
radio: '1',
|
questionTypeList: [],
|
CNNum: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二', '十三', '十四', '十五']
|
}
|
},
|
|
computed: {
|
...mapGetters(["permission", "userInfo"]),
|
permissionList () {
|
return {
|
addBtn: this.vaildData(this.permission.place_add, true),
|
viewBtn: this.vaildData(this.permission.place_view, true),
|
delBtn: this.vaildData(this.permission.place_delete, true),
|
editBtn: this.vaildData(this.permission.place_edit, true),
|
}
|
},
|
ids () {
|
let ids = []
|
this.selectionList.forEach((ele) => {
|
ids.push(ele.id)
|
})
|
return ids.join(",")
|
},
|
|
showConfirmFlag () {
|
return (data) => {
|
let tags = {
|
text: '',
|
type: ''
|
}
|
if (data == 1) {
|
tags = {
|
text: '待审核',
|
type: 'warning'
|
}
|
} else if (data == 2) {
|
tags = {
|
text: '审核通过',
|
type: 'success'
|
}
|
} else if (data == 3) {
|
tags = {
|
text: '审核不通过',
|
type: 'danger'
|
}
|
} else if (data == 4) {
|
tags = {
|
text: '待上报',
|
type: 'info'
|
}
|
}
|
|
return tags
|
}
|
}
|
},
|
|
created () {
|
this.getPatrolGroupTree()
|
},
|
|
methods: {
|
// 弹窗关闭回调
|
handleClose () {
|
this.cancelAudit()
|
},
|
|
// 取消审核
|
cancelAudit () {
|
this.visible = false
|
this.auditForm = {}
|
this.$refs.auditForm.resetFields()
|
},
|
|
// 确认提交审核
|
submitAudit () {
|
this.$refs.auditForm.validate((valid) => {
|
if (valid) {
|
applyRectification(Object.assign(this.auditParams, this.auditForm)).then(res => {
|
if (res.data.code == 200) {
|
this.$message.warning("审核成功")
|
this.onLoad(this.page)
|
this.cancelAudit()
|
}
|
})
|
} else {
|
return false
|
}
|
})
|
},
|
|
// 审核按钮
|
goAudit (row) {
|
this.auditParams = {
|
id: row.id,
|
taskId: row.taskId
|
}
|
this.visible = true
|
},
|
|
// 折叠问题列表
|
flodQL (index) {
|
this.rowDetail.qTypeList[index].isShowQList = !this.rowDetail.qTypeList[index].isShowQList
|
this.refreshNum += 1
|
},
|
|
// 折叠其他
|
flodRM () {
|
this.rowDetail.isShowRemark = !this.rowDetail.isShowRemark
|
this.refreshNum += 1
|
},
|
|
// 对数组按属性分组
|
groupBy (arr, key) {
|
return arr.reduce((acc, curr) => {
|
(acc[curr[key]] = acc[curr[key]] || []).push(curr)
|
return acc
|
}, {})
|
},
|
|
// 获取问题类型
|
getPatrolGroupTree () {
|
getPatrolGroupTree().then(res => {
|
this.questionTypeList = res.data.data
|
})
|
},
|
|
getDetail (row) {
|
if (row.patrolRecordVOList) {
|
row.patrolRecordVOList.forEach(item => {
|
item.imageUrlsList = []
|
item.rectificationImageUrlsList = []
|
if (item.imageUrls) {
|
item.imageUrlsList = item.imageUrls.split(',').map(ele => {
|
return website.minioUrl + ele
|
})
|
|
}
|
if (item.rectificationImageUrls) {
|
item.rectificationImageUrlsList = item.rectificationImageUrls.split(',').map(ele => {
|
return website.minioUrl + ele
|
})
|
}
|
// 查询问题类型
|
this.questionTypeList.forEach(qItem => {
|
qItem.children.forEach(qChild => {
|
if (qChild.id == item.itemId) {
|
item.qType = qItem.title
|
item.itemsNameTitle = qChild.title
|
}
|
})
|
})
|
})
|
}
|
// 把相同类型问题分组
|
let obj = this.groupBy(row.patrolRecordVOList, 'qType')
|
let arr = Object.entries(obj)
|
let newArr = []
|
arr.forEach(part => {
|
newArr.push({ questionName: part[0], questionList: part[1], isShowQList: true })
|
})
|
row.qTypeList = newArr
|
row.remarkNo = newArr.length
|
row.isShowRemarkTitle = row.remark ? true : false
|
row.isShowRemark = true
|
this.rowDetail = row
|
this.isDetail = true
|
},
|
|
changeType (type) {
|
this.typeStatus = type
|
this.page.currentPage = 1
|
this.onLoad(this.page)
|
},
|
|
handleExport () {
|
this.$confirm("是否导出整改情况数据?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
}).then(() => {
|
NProgress.start()
|
var data = {
|
...this.query
|
}
|
data = Qs.stringify(data)
|
exportBlob(
|
`/api/blade-taskPlaceRectification/taskPlaceRectification/exportRectificationStatistics?${this.website.tokenHeader}=${getToken()}&` + data
|
).then(res => {
|
downloadXls(res.data, `整改情况${dateNow()}.xlsx`)
|
NProgress.done()
|
})
|
})
|
},
|
|
rowSave (row, done, loading) {
|
if (row.imageUrls.length > 0) {
|
var urls = []
|
var split = row.imageUrls.split(",").filter(item => item != '')
|
split.forEach(url => {
|
var names = url.split("jczz/")
|
urls.push(names[1])
|
})
|
row.imageUrls = urls.join(",")
|
}
|
|
let label = row.label
|
|
if (row.smallLabel != '') {
|
label = label + ',' + row.smallLabel
|
}
|
|
delete row.smallLabel
|
|
add({
|
...row,
|
label
|
}).then(
|
() => {
|
this.onLoad(this.page)
|
this.$message({
|
type: "success",
|
message: "操作成功!",
|
})
|
done()
|
},
|
(error) => {
|
window.console.log(error)
|
loading()
|
}
|
)
|
},
|
|
rowUpdate (row, index, done, loading) {
|
if (row.imageUrls.length > 0) {
|
var urls = []
|
var split = row.imageUrls.split(",").filter(item => item != '')
|
split.forEach(url => {
|
var names = url.split("jczz/")
|
urls.push(names[1])
|
})
|
row.imageUrls = urls.join(",")
|
}
|
|
let label = row.label
|
|
if (row.smallLabel != '') {
|
label = label + ',' + row.smallLabel
|
}
|
|
delete row.smallLabel
|
|
update({
|
...row,
|
label
|
}).then(
|
() => {
|
this.onLoad(this.page)
|
this.$message({
|
type: "success",
|
message: "操作成功!",
|
})
|
done()
|
},
|
(error) => {
|
window.console.log(error)
|
loading()
|
}
|
)
|
},
|
|
rowDel (row) {
|
this.$confirm("确定将选择数据删除?", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
row.isDeleted = 1
|
return removeTask(row)
|
})
|
.then(() => {
|
this.onLoad(this.page)
|
|
this.$message({
|
type: "success",
|
message: "操作成功!",
|
})
|
})
|
},
|
|
searchReset () {
|
this.query = {}
|
this.onLoad(this.page)
|
},
|
|
searchChange (params, done) {
|
let dateRange = params.dateRange
|
if (params.dateRange) {
|
params.startTime = dateRange[0]
|
params.endTime = dateRange[1]
|
delete params.dateRange
|
}
|
this.query = params
|
this.page.currentPage = 1
|
this.onLoad(this.page)
|
done()
|
},
|
|
selectionChange (list) {
|
this.selectionList = list
|
},
|
|
selectionClear () {
|
this.selectionList = []
|
this.$nextTick(() => {
|
this.$refs.crud && this.$refs.crud.toggleSelection()
|
})
|
},
|
|
handleDelete () {
|
if (this.selectionList.length === 0) {
|
this.$message.warning("请选择至少一条数据")
|
return
|
}
|
this.$confirm("确定将选择数据删除?", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
return remove(this.ids)
|
})
|
.then(() => {
|
this.onLoad(this.page)
|
this.$message({
|
type: "success",
|
message: "操作成功!",
|
})
|
this.$refs.crud.toggleSelection()
|
})
|
},
|
|
beforeOpen (done, type) {
|
// if (["edit", "view"].includes(type)) {
|
|
// } else {
|
// done()
|
// }
|
},
|
|
currentChange (currentPage) {
|
this.page.currentPage = currentPage
|
},
|
|
sizeChange (pageSize) {
|
this.page.pageSize = pageSize
|
},
|
|
refreshChange () {
|
// this.onLoad(this.page, this.query)
|
},
|
|
onLoad (page, params = {}) {
|
this.loading = true
|
if (this.typeStatus == 1) {
|
this.query.status = '1'
|
} else if (this.typeStatus == 2) {
|
this.query.status = '2'
|
} else if (this.typeStatus == 3) {
|
this.query.status = ''
|
}
|
if ('startTime' in this.query) {
|
this.query.startTime += ' 00:00:00'
|
}
|
if ('endTime' in this.query) {
|
this.query.endTime += ' 23:59:59'
|
}
|
getZGQKList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
|
console.log('getZGQKList', res.data.data)
|
const data = res.data.data
|
data.records.forEach(item => {
|
item.createTime = item.createTime ? item.createTime.slice(0, 10) : ''
|
item.rectificationEndTime = item.rectificationEndTime ? item.rectificationEndTime.slice(0, 10) : ''
|
})
|
this.page.total = data.total
|
this.data = data.records
|
this.loading = false
|
this.selectionClear()
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.avue-upload__icon {
|
line-height: 6;
|
}
|
|
.tab-list {
|
display: flex;
|
margin-right: 6px;
|
border: 1px solid #dcdfe6;
|
color: #606266;
|
border-radius: 4px;
|
height: 34px;
|
|
&>div {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 60px;
|
cursor: pointer;
|
font-size: 12px;
|
}
|
|
&>div:nth-child(2) {
|
border-left: 1px solid #dcdfe6;
|
border-right: 1px solid #dcdfe6;
|
}
|
|
.choose {
|
color: #FFF;
|
background-color: #409dfe;
|
}
|
}
|
|
:deep(.avue-crud__left) {
|
display: flex;
|
align-items: center;
|
}
|
|
:deep(.el-drawer__header) {
|
margin-bottom: 10px;
|
}
|
|
:deep(.el-radio__input.is-disabled+span.el-radio__label) {
|
color: #000;
|
}
|
|
:deep(.el-radio__input.is-checked+.el-radio__label) {
|
color: #409EFF !important;
|
}
|
|
:deep(.el-radio__input.is-checked .el-radio__inner::after) {
|
background-color: #FFF;
|
}
|
|
:deep(.el-radio__input.is-checked .el-radio__inner) {
|
background-color: #409EFF;
|
}
|
|
.title {
|
margin: 10px;
|
height: 40px;
|
background-color: #eee;
|
display: flex;
|
align-items: center;
|
|
.icon {
|
width: 4px;
|
height: 18px;
|
background-color: #409dfe;
|
margin: 0 10px;
|
color: transparent;
|
}
|
}
|
|
.basic-info {
|
padding: 0 20px;
|
|
.info-item {
|
display: flex;
|
padding: 10px;
|
|
.info-name {
|
width: 100px;
|
display: flex;
|
align-items: center;
|
}
|
|
.info-value {
|
display: flex;
|
align-items: center;
|
}
|
}
|
}
|
|
.question-list {
|
padding: 0 20px;
|
|
.question-type {
|
height: 60px;
|
display: flex;
|
align-items: center;
|
cursor: pointer;
|
justify-content: space-between;
|
padding-right: 20px;
|
|
.type-name {}
|
|
.icon-box {}
|
}
|
|
.question-item {
|
margin-bottom: 20px;
|
padding: 10px;
|
background: #f5f7fa;
|
border-radius: 8px;
|
|
&>div {
|
margin: 14px 0;
|
}
|
|
.question-name {
|
display: flex;
|
|
.key {
|
width: 80%;
|
word-break: break-all;
|
}
|
|
.value {
|
width: 20%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
|
.yh-pic-box {
|
display: flex;
|
height: 100px;
|
|
.yh-pic-name {
|
width: 100px;
|
display: flex;
|
align-items: center;
|
justify-content: left;
|
}
|
|
.yh-pic-list {
|
width: 0;
|
flex: 1;
|
display: flex;
|
}
|
}
|
|
.yh-remark {
|
display: flex;
|
|
.yh-remark-name {
|
width: 100px;
|
display: flex;
|
align-items: center;
|
justify-content: left;
|
}
|
|
.yh-remark-value {
|
word-break: break-all;
|
}
|
}
|
}
|
|
.remark-box {
|
padding: 10px;
|
background-color: #f5f7fa;
|
border-radius: 8px;
|
min-height: 40px;
|
margin-bottom: 20px;
|
}
|
}
|
</style>
|
