<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-scope="{row, size}" slot="principalPhone">
|
<el-button :size="size" type="text" @click="showStringDispose(row, 'principalPhoneflag')"
|
v-text="textDispose(row, 'principalPhoneflag', 'principalPhone')">
|
</el-button>
|
</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>
|
</template>
|
<template slot="menuLeft">
|
<el-button type="warning" size="small" plain icon="el-icon-download" @click="handleExport">导出
|
</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.nineTypeName }}</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>
|
</el-drawer>
|
|
</basic-container>
|
</template>
|
|
<script>
|
import {
|
getList,
|
remove,
|
update,
|
add,
|
getNotice,
|
upcomment
|
} from "@/api/patrol/placeChek"
|
|
import {
|
getPatrolGroupTree, getDictBizTree
|
} from "@/api/publicSecurity/ninePlaceManage"
|
|
import website from '@/config/website'
|
|
|
import {
|
getDistrictTree
|
} from "@/api/district/index"
|
|
import {
|
mapGetters
|
} from "vuex"
|
|
export default {
|
data () {
|
return {
|
isDetail: false,
|
form: {},
|
query: {},
|
loading: true,
|
page: {
|
pageSize: 10,
|
currentPage: 1,
|
total: 0,
|
},
|
datetime: "",
|
selectionList: [],
|
option: {
|
labelWidth: 120,
|
searchLabelWidth: 96,
|
searchShow: true,
|
searchMenuSpan: 3,
|
menuWidth: 100,
|
// menu: false,
|
height: "auto",
|
calcHeight: 54,
|
dialogWidth: 950,
|
tip: false,
|
border: true,
|
addBtn: false,
|
delBtn: false,
|
//stripe:true,
|
index: true,
|
editBtn: false,
|
viewBtn: false,
|
// selection: true,
|
excelBtn: true,
|
dialogClickModal: false,
|
column: [{
|
label: "所属街道",
|
prop: "streetName",
|
span: 24,
|
row: true,
|
searchSpan: 4,
|
search: true,
|
align: 'center'
|
},
|
{
|
label: "所属社区",
|
prop: "communityName",
|
span: 24,
|
row: true,
|
searchSpan: 4,
|
search: true,
|
width: 160,
|
overHidden: true,
|
align: 'center'
|
},
|
{
|
label: "所属网格",
|
prop: "gridName",
|
span: 24,
|
row: true,
|
searchSpan: 4,
|
search: true,
|
align: 'center'
|
},
|
{
|
label: "场所名称",
|
prop: "placeName",
|
span: 24,
|
row: true,
|
searchSpan: 4,
|
search: true,
|
align: 'center'
|
},
|
{
|
label: "场所隐患",
|
prop: "remark",
|
span: 24,
|
row: true,
|
searchSpan: 4,
|
align: 'center'
|
},
|
|
{
|
label: "场所负责人",
|
prop: "principal",
|
span: 24,
|
row: true,
|
searchSpan: 4,
|
search: true,
|
align: 'center'
|
},
|
|
{
|
label: "场所负责人电话",
|
prop: "principalPhone",
|
span: 24,
|
row: true,
|
slot: true,
|
searchSpan: 4,
|
align: 'center'
|
},
|
{
|
label: "场所地址",
|
prop: "location",
|
span: 24,
|
row: true,
|
searchSpan: 4,
|
searchLabelWidth: 46,
|
overHidden: true,
|
align: 'center'
|
},
|
{
|
width: 110,
|
label: "签名",
|
prop: "signaturePath",
|
type: "upload",
|
listType: "picture-img",
|
span: 24,
|
align: 'center'
|
},
|
{
|
label: "创建时间",
|
prop: "createTime",
|
span: 24,
|
row: true,
|
searchSpan: 4,
|
searchLabelWidth: 46,
|
align: 'center'
|
},
|
],
|
},
|
data: [],
|
|
districtTree: [],
|
rowDetail: [],
|
refreshNum: 1,
|
radio: '1',
|
questionTypeList: [],
|
CNNum: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二', '十三', '十四', '十五'],
|
nineTypeList: []
|
}
|
},
|
watch: {
|
"form.articleType": {
|
handler (val) {
|
if (val) {
|
var videoUrl = this.findObject(this.option.column, "videoUrl")
|
var content = this.findObject(this.option.column, "content")
|
if (val.indexOf('ksp') != -1) {
|
videoUrl.display = true
|
content.display = false
|
videoUrl.rules = [{
|
required: false,
|
message: "请选择视频",
|
trigger: "blur",
|
},]
|
} else {
|
videoUrl.display = false
|
content.display = true
|
videoUrl.rules = ""
|
}
|
}
|
},
|
immediate: true,
|
}
|
},
|
computed: {
|
...mapGetters(["permission", "userInfo"]),
|
permissionList () {
|
return {
|
addBtn: this.vaildData(this.permission.article_add, true),
|
viewBtn: this.vaildData(this.permission.article_view, true),
|
delBtn: this.vaildData(this.permission.article_delete, true),
|
editBtn: this.vaildData(this.permission.article_edit, true),
|
}
|
},
|
|
textDispose () {
|
return (row, flag, type) => {
|
if (row[flag] || row[type] == null) {
|
return row[type]
|
} else {
|
if (type == 'principalIdCard') {
|
return row[type].replace(/^(.{6})(?:\d+)(.{4})$/, "$1******$2")
|
} else {
|
return row[type].replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2")
|
}
|
}
|
}
|
}
|
|
},
|
|
created () {
|
this.getPatrolGroupTree()
|
this.getDictBizTree()
|
},
|
|
methods: {
|
handleExport () {
|
this.$confirm("是否导出档案管理数据?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
}).then(() => {
|
NProgress.start()
|
var data = {
|
...this.query
|
}
|
// data.isNine = 1
|
data = Qs.stringify(data)
|
exportBlob(
|
`/api/blade-place/place/exportNineType?${this.website.tokenHeader}=${getToken()}&` + data
|
).then(res => {
|
console.log('exportBlob', res)
|
downloadXls(res.data, `档案管理${dateNow()}.xlsx`)
|
NProgress.done()
|
})
|
})
|
},
|
|
showStringDispose (row, type) {
|
row[type] = !row[type]
|
},
|
|
// 点击展开收缩
|
flodQL (index) {
|
this.rowDetail.qTypeList[index].isShowQList = !this.rowDetail.qTypeList[index].isShowQList
|
this.refreshNum += 1
|
},
|
|
// 对数组按属性分组
|
groupBy (arr, key) {
|
return arr.reduce((acc, curr) => {
|
(acc[curr[key]] = acc[curr[key]] || []).push(curr)
|
return acc
|
}, {})
|
},
|
|
// 九小类型字典接口
|
getDictBizTree () {
|
getDictBizTree({ code: 'nineType' }).then(res => {
|
this.nineTypeList = res.data.data
|
})
|
},
|
|
// 九小类型转换
|
switchNineType (type) {
|
return this.nineTypeList.find(item => item.key === type) ? this.nineTypeList.find(item => item.key === type).title : ''
|
},
|
|
// 获取问题类型
|
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.nineTypeName = this.switchNineType(row.nineType)
|
this.rowDetail = row
|
this.isDetail = true
|
},
|
|
searchReset () {
|
this.query = {}
|
this.onLoad(this.page)
|
},
|
searchChange (params, done) {
|
this.query = params
|
this.page.currentPage = 1
|
this.onLoad(this.page, params)
|
done()
|
},
|
selectionChange (list) {
|
this.selectionList = list
|
},
|
selectionClear () {
|
this.selectionList = []
|
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)) {
|
getNotice(this.form.id).then((res) => {
|
let data = res.data.data
|
// data.forEach(item=>{
|
if (data.url.length > 0) {
|
var urls = []
|
var names = data.url.split(",")
|
names.forEach(name => {
|
urls.push(website.minioUrl + name)
|
})
|
data.url = urls.join(",")
|
}
|
data.articleList = JSON.parse(data.articleRange)
|
this.form = data
|
})
|
}
|
// con
|
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
|
getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then((res) => {
|
const data = {
|
...res.data.data,
|
records: res.data.data.records.map(item => {
|
return {
|
...item,
|
'createTime': item.createTime.slice(0, 16),
|
'principalPhoneflag': false,
|
}
|
})
|
}
|
data.records.forEach(item => {
|
if (item.signaturePath.length > 0) {
|
var urls = []
|
var names = item.signaturePath.split(",")
|
names.forEach(name => {
|
urls.push(website.minioUrl + name)
|
})
|
item.signaturePath = urls.join(",")
|
}
|
})
|
this.page.total = data.total
|
this.data = data.records
|
this.loading = false
|
this.selectionClear()
|
}).catch(err => {
|
setTimeout(() => {
|
this.loading = false
|
}, 300)
|
})
|
getDistrictTree({
|
filterFlag: 1
|
}).then((res) => {
|
const data = res.data.data
|
this.districtTree = data
|
const column = this.findObject(this.option.column, "articleList")
|
column.dicData = res.data.data
|
this.loading = false
|
}).catch(err => {
|
setTimeout(() => {
|
this.loading = false
|
}, 300)
|
})
|
},
|
updateFb (row) {
|
if (row.publish == "0") {
|
row.publish = "1"
|
} else {
|
row.publish = "0"
|
}
|
if (row.url.length > 0) {
|
var urls = []
|
var split = row.url.split(",")
|
split.forEach(url => {
|
var names = url.split("jczz/")
|
urls.push(names[1])
|
})
|
row.url = urls.join(",")
|
}
|
update(row).then(
|
() => {
|
this.onLoad(this.page)
|
this.$message({
|
type: "success",
|
message: "操作成功!",
|
})
|
done()
|
},
|
(error) => {
|
window.console.log(error)
|
loading()
|
}
|
)
|
},
|
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.avue-upload__icon {
|
line-height: 6;
|
}
|
|
: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;
|
}
|
|
:deep(.avue-crud__img) {
|
height: 30px !important;
|
}
|
|
.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;
|
}
|
}
|
}
|
}
|
</style>
|
