整改情况详情弹窗

guanqb

2024-02-04 5744bb8f28aa6910721dbc79e5766daa201aea69

整改情况详情弹窗

 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>