fj-dc-ui/.svn/pristine/5a/5a3cf34dd72b218dcc779884dce81f8fc37dd989.svn-base

<template>
    <div>
        <el-row class="mb10">
            <el-col :span="24">整改问题：</el-col>
        </el-row>
        <el-row class="mb10">
            <el-col :span="24">
                <el-table
                        :data="tableDataZgWt"
                        border
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="name"
                            label="项目"
                            min-width="180"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="pblmNm"
                            label="问题名称"
                            min-width="180"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="note"
                            label="问题描述"
                            min-width="180"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            label="严重程度"
                            min-width="120"
                            show-overflow-tooltip>
                        <template slot-scope="scope">
                            <p v-if="scope.row.pblmPasi == 0"><span class="inspPblmCate"
                                                                    style="background: #27C19F;">一般</span></p>
                            <p v-if="scope.row.pblmPasi == 1"><span class="inspPblmCate"
                                                                    style="background: #E6A23C;">较重</span></p>
                            <p v-if="scope.row.pblmPasi == 2"><span class="inspPblmCate"
                                                                    style="background: #F56C6C;">严重</span></p>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row class="mb10" :gutter="20">
            <el-col :span="4">反馈记录：</el-col>
            <el-col :span="20">
                <el-button type="primary" @click="addData">增加行</el-button>
                <el-button type="primary" @click="delData">删除行</el-button>
            </el-col>
        </el-row>
        <el-row class="mb10">
            <el-col :span="24">
                <el-table
                        :data="tableDataFkJl"
                        ref="tableDataFkJl"
                        :height="tableHeight"
                        border
                        stripe
                        style="width: 100%"
                        @selection-change='selectRow'>
                    <el-table-column type="selection" width="45" align="center"></el-table-column>
                    <el-table-column type="index" fixed min-width="80" :index="getIndex" label="序号"
                                     show-overflow-tooltip align="center"></el-table-column>
                    <el-table-column
                            header-align="center"
                            align="center"
                            min-width="200"
                            label="反馈时间"
                            prop="intm"
                    ></el-table-column>
                    <el-table-column
                            prop="rectConc"
                            label="整改状态"
                            min-width="180"
                            show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span v-if="scope.row.rectConc == 1">整改中</span>
                            <span v-if="scope.row.rectConc == 2">未整改</span>
                            <span v-if="scope.row.rectConc == 3">已整改</span>
                            <span v-if="scope.row.rectConc == 4">不具备整改条件</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="city"
                            label="反馈详情"
                            min-width="120"
                            show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="problemEditFk(scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="批复时间"
                            min-width="180"
                            prop="replyTm"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            label="批复意见"
                            min-width="180"
                            prop="replyState">
                        <template slot-scope="scope">
                            <span v-if="scope.row.replyState == 1">通过</span>
                            <span v-if="scope.row.replyState == 0">不通过</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="inspPblmCate"
                            label="批复意见说明"
                            min-width="120"
                            show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="problemSeePf(scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <!--编辑反馈详情-->
        <addRectify v-if="zgfkDialog" @dialogClose="dialogClose" :listId="rowId" :listPlmbId="listPlmbId"></addRectify>
        <!--查看反馈详情-->
        <el-dialog title="查看反馈" width="60%" :visible.sync="dialogDetailVisible" :close-on-click-modal="false"
                   :modal-append-to-body="true" :append-to-body="true">
            <problem-detail :problemId="rowId"></problem-detail>
        </el-dialog>
        <!--批复意见编辑-->
        <reply v-if="pfYjDialog" @dialogClose="dialogClose" :rowPblRowId="rowPblRowId"></reply>
        <!--查看批复详情-->
        <el-dialog title="查看批复" width="40%" :visible.sync="dialogDetailPfVisible" :close-on-click-modal="false"
                   :modal-append-to-body="true" :append-to-body="true">
            <problemDetailPf :problemId="rowPblRowId"></problemDetailPf>
        </el-dialog>
    </div>

</template>
<script>
    import problemDetail from './problemDetail_fkxq.vue'
    import problemDetailPf from './problemDetail_pfxq.vue'
    import request from '@util/gw_ajax_request.js'
    import addRectify from './addRectify'
    import reply from './reply'
    import {dateFormat} from '../../../utils/gw_date';

    export default {

        props: ["problemId", "pblmListId"],   //
        data() {
            //这里存放数据
            return {
                dialogFormVisible: true,
                tableDataZgWt: [],
                tableDataFkJl: [],
                selectlistRow: [],
                pageSize: 10,
                pageNum: 1,
                tableHeight: window.innerHeight * .4,
                zgfkDialog: false,
                pfYjDialog: false,
                rowPblRowId: '',
                rowId: '',
                dialogDetailVisible: false,
                dialogDetailPfVisible: false,
                listPlmbId: "",
                ifMinistriesAgencies: false
            };
        },
        components: {
            addRectify,
            problemDetail,
            problemDetailPf,
            reply
        },
        computed: {
            persId() {
                return localStorage.getItem("userid") ? localStorage.getItem("userid") : "1098101939614724096";
            },
        },
        //监控data中的数据变化
        watch: {
            problemId(n, o) {
                if (n) {
                    this.problemId = n;
                    this.getDataFkJl();
                }
            }
        },
        //方法集合
        methods: {
            async getDataFkJl() {
                this.tableDataZgWt = [];
                await request.get(`/tac/pblm/rect/plmb/aps/getPlmbApsByListPlmbId/${this.pblmListId}`).then(res => {
                    if (res.success) {
                        this.tableDataFkJl = res.data;
                        this.tableDataFkJl.forEach(item => {
                            item.intm = dateFormat(item.intm, "yyyy-MM-dd");
                            item.replyTm = dateFormat(item.replyTm, "yyyy-MM-dd");
                            item.uptm = dateFormat(item.uptm, "yyyy-MM-dd");
                        })
                        console.log(this.tableDataFkJl);
                    }
                })
                await request.get(`/tac/pblm/rect/list/plmb/${this.problemId}`).then(res => {
                    this.tableDataZgWt.push(res.data);
                });
            },
            //取消
            closeDialog() {
                this.$emit('closeDialog')
            },

            getIndex(index) {
                return (index + this.pageSize * (this.pageNum - 1)) + 1
            },
            // 获取表格选中时的数据
            selectRow(val) {
                this.selectlistRow = val
            },
            // 增加行
            addData() {
                var data = {
                    "listPlmbId": this.problemId
                }
                this.$nextTick(() => {
                    this.tableDataFkJl.unshift(data);
                })
            },
            // 删除方法
            // 删除选中行
            delData() {
                if (this.selectlistRow.length === 0) {
                    this.$message.warning("请勾选要删除的记录");
                    return;
                }
                this.tableDataFkJl.splice(this.selectlistRow, this.selectlistRow.length);
                // 删除完数据之后清除勾选框
                this.$refs.tableDataFkJl.clearSelection();
            },
            //反馈编辑
            problemEditFk(row) {
                this.rowId = row.id;
                this.listPlmbId = row.listPlmbId;
                this.zgfkDialog = true;
            },
            dialogClose() {
                this.zgfkDialog = false;
                this.pfYjDialog = false;
            },
            //  批复意见说明查看
            problemSeePf(row) {
                this.rowPblRowId = row.listPlmbId;
                this.dialogDetailPfVisible = true;
            }

        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {

        },
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
            this.$nextTick(() => {
                console.log(this.problemId);
                this.getDataFkJl();
            })

        }
    }
</script>
<style scoped>
    .mb10 {
        margin-bottom: 10px;
    }
    .inspPblmCate {
        padding: 2px 10px;
        border-radius: 10px;
        color: #ffffff;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    }
</style>