| | |
| | | @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="{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)" |
| | | v-show="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.itemsName }}</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> |
| | | <!-- 审核弹窗 --> |
| | | <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> |
| | | |
| | |
| | | mapGetters |
| | | } from "vuex" |
| | | import { |
| | | getZGQKList |
| | | getZGQKList, getPatrolGroupTree, applyRectification |
| | | } from "@/api/publicSecurity/ninePlaceManage" |
| | | import NProgress from 'nprogress' |
| | | import 'nprogress/nprogress.css' |
| | |
| | | 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, |
| | |
| | | tip: false, |
| | | searchShow: true, |
| | | searchMenuSpan: 3, |
| | | menu: false, |
| | | menu: true, |
| | | border: true, |
| | | index: true, |
| | | editBtn: false, |
| | |
| | | searchLabelWidth: 106, |
| | | }], |
| | | }, |
| | | data: [] |
| | | data: [], |
| | | refreshNum: 1, |
| | | radio: '1', |
| | | questionTypeList: [], |
| | | CNNum: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二', '十三', '十四', '十五'] |
| | | } |
| | | }, |
| | | |
| | |
| | | }, |
| | | |
| | | }, |
| | | |
| | | 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 |
| | | }, |
| | | |
| | | // 对数组按属性分组 |
| | | 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 |
| | | } |
| | | }) |
| | | }) |
| | | }) |
| | | } |
| | | // 把相同类型问题分组 |
| | | 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 |
| | | this.rowDetail = row |
| | | this.isDetail = true |
| | | }, |
| | | |
| | | changeType (type) { |
| | | this.typeStatus = type |
| | | this.onLoad(this.page) |
| | | }, |
| | | |
| | | handleExport () { |
| | | this.$confirm("是否导出整改情况数据?", "提示", { |
| | | confirmButtonText: "确定", |
| | |
| | | exportBlob( |
| | | `/api/blade-taskPlaceRectification/taskPlaceRectification/exportRectificationStatistics?${this.website.tokenHeader}=${getToken()}&` + data |
| | | ).then(res => { |
| | | console.log('exportBlob', res) |
| | | downloadXls(res.data, `整改情况${dateNow()}.xlsx`) |
| | | NProgress.done() |
| | | }) |
| | |
| | | |
| | | onLoad (page, params = {}) { |
| | | this.loading = true |
| | | if (this.typeStatus == 3) { |
| | | this.query.status = '' |
| | | } else { |
| | | this.query.status = this.typeStatus |
| | | } |
| | | getZGQKList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => { |
| | | console.log('getZGQKList', res.data.data) |
| | | const data = res.data.data |
| | |
| | | .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; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |