From 5744bb8f28aa6910721dbc79e5766daa201aea69 Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Sun, 04 Feb 2024 11:41:26 +0800
Subject: [PATCH] 整改情况详情弹窗
---
src/views/publicSecurity/ninePlaceManage/situationRectification.vue | 195 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 194 insertions(+), 1 deletions(-)
diff --git a/src/views/publicSecurity/ninePlaceManage/situationRectification.vue b/src/views/publicSecurity/ninePlaceManage/situationRectification.vue
index ccf9d06..f9be5b7 100644
--- a/src/views/publicSecurity/ninePlaceManage/situationRectification.vue
+++ b/src/views/publicSecurity/ninePlaceManage/situationRectification.vue
@@ -6,10 +6,70 @@
@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 == 2 }" @click="changeType(2)">待审核</div>
+ <div :class="{ 'choose': typeStatus == 1 }" @click="changeType(1)">已审核</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="getDetail(row)">
+ 审核
+ </el-button>
+ </template>
</avue-crud>
+ <el-drawer title="整改情况详情" :visible.sync="isDetail" :append-to-body="true" size="46%" direction="rtl">
+ <div class="question-list">
+ <div class="question-item" v-for="(item, index) in rowDetail" :key='index'>
+ <div class="question-name">
+ <div class="key">{{ index + 1 }}、{{ item.itemsName }}</div>
+ <div class="value">存在</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>
@@ -35,10 +95,14 @@
import {
dateNow
} from "@/util/date"
+import website from '@/config/website'
export default {
data () {
return {
+ typeStatus: 2,
+ isDetail: false,
+ rowDetail: [],
form: {},
query: {},
loading: true,
@@ -57,7 +121,7 @@
tip: false,
searchShow: true,
searchMenuSpan: 3,
- menu: false,
+ menu: true,
border: true,
index: true,
editBtn: false,
@@ -174,6 +238,33 @@
},
methods: {
+ 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.rowDetail = row.patrolRecordVOList
+ this.isDetail = true
+ },
+
+ changeType (type) {
+ this.typeStatus = type
+ this.onLoad(this.page)
+ },
+
handleExport () {
this.$confirm("是否导出整改情况数据?", "提示", {
confirmButtonText: "确定",
@@ -359,6 +450,11 @@
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
@@ -380,4 +476,101 @@
.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;
+}
+
+.question-list {
+ padding: 0 20px;
+
+ .question-item {
+ margin-bottom: 20px;
+ padding: 10px;
+ background: #eee;
+ 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>
--
Gitblit v1.9.3