fj-dc-ui/.svn/pristine/9c/9c576bc8387ccbe16fbf3aa1bd81d8a1612b128f.svn-base

<template>
    <div class="add_pblm">
        <el-dialog :visible.sync="dialogFormEditorVisible" :close-on-click-modal="false" width="70%" @close="closeDialog">
            <h3 v-if="ifShiJi == '1'">待分发问题</h3>
            <h3 v-else>添加问题</h3>
            <div>
                <el-row :gutter="20" type="flex" style="margin-bottom: 10px;">
                    <el-col :span="20">
                        <el-form :inline="true" size="mini" class="demo-form-inline">
                            <el-form-item label="工程">
                                <el-input v-model="editorFormAll.name" clearable placeholder="请输入工程" style="width: 6vw"></el-input>
                            </el-form-item>
                            <el-form-item label="问题类别">
                                <el-input v-model="editorFormAll.inspPblmName" clearable placeholder="请输入问题类别" style="width: 6vw"></el-input>
                            </el-form-item>
                            <el-form-item label="严重程度">
                                <el-select v-model="editorFormAll.inspPblmCate" clearable placeholder="请选择">
                                    <el-option
                                            v-for="item in supervisionState"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="是否典型">
                                <el-select v-model="editorFormAll.ifCasePblm" clearable style="width: 6vw">
                                    <el-option label="是" value="1"></el-option>
                                    <el-option label="否" value="0"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="2" :offset=2 style="text-align: end;">
                        <el-button @click="searchAll" type="success">查询</el-button>
                    </el-col>
                </el-row>
                <div>
                    <el-table
                            :data="pblmListAll"
                            :height="tableHeight1"
                            style="width: 100%"
                            border
                            tooltip-effect="dark"
                            @selection-change="handleSelectionChange"
                            ref="multipleTable">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="工程名称"
                                min-width="50"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                prop="inspPblmName"
                                label="问题类别"
                                min-width="100"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                prop="inspPblmDesc"
                                label="问题描述"
                                min-width="100"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                label="严重程度"
                                min-width="50">
                            <template slot-scope="scope">
                                <p v-if="scope.row.inspPblmCate == 0"><span class="inspPblmCate" style="background: #27C19F;">一般</span></p>
                                <p v-if="scope.row.inspPblmCate == 1"><span class="inspPblmCate" style="background: #E6A23C;" >较重</span></p>
                                <p v-if="scope.row.inspPblmCate == 2"><span class="inspPblmCate" style="background: #F56C6C;" >严重</span></p>
                                <p v-if="scope.row.inspPblmCate == 3"><span class="inspPblmCate" style="background: #795548;">特别严重</span></p>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="是否典型"
                                min-width="50">
                            <template slot-scope="scope">
                                <p v-if="scope.row.ifCasePblm == 1">是</p>
                                <p v-if="scope.row.ifCasePblm == 0">否</p>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="inspPblmTm"
                                label="上报时间"
                                min-width="50">
                            <!--<template slot-scope="scope">-->
                                <!--<span v-if="scope.row.inspPblmTm">{{formatDate(scope.row.inspPblmTm)}}</span>-->
                            <!--</template>-->
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                min-width="50">
                            <template slot-scope="scope">
                                <el-button @click="toView(scope.row)" type="text" size="small" >查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <el-row style="margin-top: 10px;">
                    <!-- 分页 -->
                    <el-col :span="20" class="paginationWarpper">
                        <el-pagination
                                class="paginationCenter"
                                background
                                @size-change="handleSizeChange"
                                @current-change="pageIndexChange"
                                :current-page.sync="pageNum"
                                :page-sizes="[10, 20, 50, 100]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total"
                        ></el-pagination>
                    </el-col>
                    <el-col :span="4" style="text-align: end;">
                        <!--<el-button type="primary" @click="addPblmArray">添加</el-button>-->
                        <el-button type="primary" @click="sureToAdd">确定添加</el-button>
                    </el-col>
                </el-row>
            </div>
            <el-divider></el-divider>
            <h3 v-if="ifShiJi == '1'">已分发问题</h3>
            <h3 v-else>已选择的问题</h3>
            <div>
                <el-row :gutter="20" type="flex" style="margin-bottom: 10px;">
                    <el-col :span="20">
                        <el-form :inline="true" size="mini" class="demo-form-inline">
                            <!--<el-form-item label="工程">-->
                            <!--<el-input v-model="editorForm.name" clearable placeholder="请输入工程" style="width: 6vw"></el-input>-->
                            <!--</el-form-item>-->
                            <el-form-item label="问题类别">
                                <el-input v-model="editorForm.inspPblmName" clearable placeholder="请输入问题类别" style="width: 6vw"></el-input>
                            </el-form-item>
                            <el-form-item label="严重程度">
                                <el-select v-model="editorForm.inspPblmCate" clearable placeholder="请选择">
                                    <el-option
                                            v-for="item in supervisionState"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                            <!--<el-form-item label="是否典型">-->
                            <!--<el-select v-model="editorForm.state" clearable style="width: 6vw">-->
                            <!--<el-option label="未下发" value="0"></el-option>-->
                            <!--<el-option label="已下发" value="1"></el-option>-->
                            <!--<el-option label="已反馈" value="2"></el-option>-->
                            <!--</el-select>-->
                            <!--</el-form-item>-->
                        </el-form>
                    </el-col>
                    <el-col :span="2" :offset=2 style="text-align: end;">
                        <el-button @click="search" type="success">查询</el-button>
                    </el-col>
                </el-row>
                <div>
                    <el-table
                            :data="pblmList"
                            :height="tableHeight1"
                            style="width: 100%"
                            border
                            tooltip-effect="dark">
                        <el-table-column
                                prop="name"
                                label="工程名称"
                                min-width="100"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                prop="inspPblmName"
                                label="问题类别"
                                min-width="100"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                prop="inspPblmDesc"
                                label="问题描述"
                                min-width="100"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                prop="inspPblmCate"
                                label="严重程度"
                                min-width="50">
                            <template slot-scope="scope">
                                <p v-if="scope.row.inspPblmCate == 0"><span class="inspPblmCate" style="background: #27C19F;">一般</span></p>
                                <p v-if="scope.row.inspPblmCate == 1"><span class="inspPblmCate" style="background: #E6A23C;" >较重</span></p>
                                <p v-if="scope.row.inspPblmCate == 2"><span class="inspPblmCate" style="background: #F56C6C;" >严重</span></p>
                                <p v-if="scope.row.inspPblmCate == 3"><span class="inspPblmCate" style="background: #795548;">特别严重</span></p>
                            </template>
                        </el-table-column>
                        <!--<el-table-column-->
                        <!--prop="pblmSize"-->
                        <!--label="是否典型"-->
                        <!--min-width="50">-->
                        <!--</el-table-column>-->
                        <el-table-column
                                prop="inspPblmTm"
                                label="上报时间"
                                min-width="50">
                            <template slot-scope="scope">
                                <span v-if="scope.row.inspPblmTm">{{formatDate(scope.row.inspPblmTm)}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                min-width="100">
                            <template slot-scope="scope">
                                <el-button @click="toView(scope.row)" type="text" size="small" >查看</el-button>
                                <el-button @click="toDelete(scope.row)" type="text" size="small" >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-row style="margin-top: 10px;">
                        <!-- 分页 -->
                        <el-col :span="20" class="paginationWarpper">
                            <el-pagination
                                    class="paginationCenter"
                                    background
                                    @size-change="handleSizeChangeEditor"
                                    @current-change="pageIndexChangeEditor"
                                    :current-page.sync="editorForm.pageNum"
                                    :page-sizes="[10, 20, 50, 100]"
                                    :page-size="editorForm.pageSize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="totalEditor"
                            ></el-pagination>
                        </el-col>
                        <el-col :span="4" style="text-align: end;">
                        </el-col>
                    </el-row>
                </div>
            </div>
        </el-dialog>
        <!-- 详情弹框 -->
        <el-dialog
                class="outerDialog custom_dialog"
                title="问题详情"
                width="60%"
                :visible.sync="supervisionDetailsVisible"
                v-if="supervisionDetailsVisible"
        >
            <supervision-details ref="xianqing" :problemId="currentProblemId" :objType="objType"></supervision-details>
            <span slot="footer">
              <el-button style="margin-top:5px;" @click="supervisionDetailsVisible = false">返回</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import request from '@util/gw_ajax_request'
    import {dateFormat} from '@util/gw_date';
    export default {
        name: "addPblm",
        props:['RowId','supervisionState','objType','rectId','ifShiJi'],
        data (){
            return {
                dialogFormEditorVisible: true,
                formLabelWidth: '120px',
                pblmList: [],
                pblmListAll: [],
                tableHeight1: window.innerHeight * .2,
                editorForm: {
                    "rectId": null,
                    "inspPblmName": null,//问题类别
                    "inspPblmCate": null,//严重程度
                    "pageNum": 1,
                    "pageSize": 20,
                },
                editorFormAll: {
                    // "inspPblmType": null,//问题类别
                    "inspPblmCate": null,//严重程度
                    ifCasePblm: "",//是否典型
                    inspPblmName: "",//问题类别名称
                    objType: null,//类型
                    pageNum: null,
                    pageSize: null,
                    name: "",//工程名称
                    orgId: ""
                },
                pageNum: 1,
                pageSize: 20,
                total: null,
                totalEditor: null,
                multipleSelection: [],
                supervisionDetailsVisible: false,
                currentProblemId: null

            }
        },
        components:{
            //详情页
            supervisionDetails: resolve => {
                require(["./supervisionDetails.vue"], resolve);
            }
        },
        computed: {
            persId() {
                return localStorage.getItem("userid")
                    ? localStorage.getItem("userid")
                    : "1098101939614724096";
            }
        },
        mounted(){
            this.$nextTick(()=>{
                this.getPblmList();
                this.getDuChaTypePblm();
            })
        },

        methods:{
            closeDialog(){
                this.$emit('closeDialog');
            },
            //所有问题查看
            toView(row){
                // this.objType = row.sndType;
                this.currentProblemId = row.pblmId;
                this.supervisionDetailsVisible = true;
            },
            //删除问题
            toDelete(row){
                this.$confirm('确定要删除该问题, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.post(`/bis/insp/rect/pblm/delete/${row.id}`)
                        .then(res => {
                            if (res.success) {
                                this.$message.success("删除成功");
                                this.getPblmList();
                            } else {
                                this.$message.warning(res.message);
                            }
                        })
                        .catch(err => {
                            console.log(err);
                        })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //获取当前通知下督查对象下问题List
            getPblmList() {
                let obj = {
                    "rectId": this.RowId,//通知ID 必须
                    // "name":this.editorForm.name,//工程名称 非必传
                    "inspPblmName": this.editorForm.inspPblmName,
                    "inspPblmCate": this.editorForm.inspPblmCate,
                    "pageSize": this.editorForm.pageSize,
                    "pageNum": this.editorForm.pageNum
                }
                request.post(`/bis/insp/rect/pblm/getPageInfo`, obj)
                    .then(res => {
                        if (res.success) {
                            this.$nextTick(() => {
                                this.pblmList = res.data.list;
                                this.totalEditor = res.data.total;
                            })
                        } else {
                            this.$message.warning(res.message);
                        }
                    })
                    .catch(err => {
                        console.log(err);

                    })
            },

            //获取督查对象所有问题
            getDuChaTypePblm(){
                let _self = this;
                let data = _self.editorFormAll;
                data.pageNum = _self.pageNum;
                data.pageSize = _self.pageSize;
                data.objType = _self.objType;
                data.orgId = _self.rectId;
                request.post(`/dc/insp/pblm/chuzhi/pblmPage`,data)
                    .then(res =>{
                        if (res.success) {
                            _self.$nextTick(()=>{
                                _self.pblmListAll = res.data.list;
                                _self.total = res.data.total;
                            })
                        } else {
                            _self.$message.warning(res.success);
                        }
                    })
                    .catch(err =>{
                        console.log(err);
                    })
            },
            handleSizeChange(pageSize) {
                this.pageSize = pageSize;
                this.getDuChaTypePblm();
            },
            pageIndexChange(val) {
                this.pageNum = val;
                this.getDuChaTypePblm();
            },
            handleSizeChangeEditor(pageSize) {
                this.editorForm.pageSize = pageSize;
                this.getPblmList();
            },
            pageIndexChangeEditor(val) {
                this.editorForm.pageNum = val;
                this.getPblmList();
            },
            formatDate(timestamp) {
                return timestamp ? dateFormat(timestamp, 'yyyy-MM-dd') : "";
            },
            //    选中table数据
            handleSelectionChange(val) {
                this.multipleSelection = [];
                val.forEach((item,index)=>{
                    this.multipleSelection.push(
                        Object.assign({},item, {'rectId':this.RowId,'persId': this.persId})
                    )
                })
            },
            //全部问题搜索
            searchAll(){
                this.getDuChaTypePblm();
            },
            //    添加问题
            // addPblmArray(){
            //     this.$nextTick(()=>{
            //         this.pblmList.push(...this.multipleSelection);
            //     })
            // },
            //    新增加问题搜索
            search(){
                this.getPblmList();
            },
            //    确定添加
            sureToAdd(){
                if(this.multipleSelection.length){
                    request.post(`/bis/insp/rect/pblm/addList`,this.multipleSelection)
                        .then(res =>{
                            if(res.success){
                                this.$message.success("添加成功");
                                this.getPblmList();
                                this.$refs.multipleTable.clearSelection();
                            }else{
                                this.$message.warning(res.message);
                            }
                        })
                        .catch(err =>{
                            console.log(err);
                        })
                }else{
                    this.$message.warning("请选择需要添加的问题");
                }
            },
        }
    }
</script>

<style lang="scss" scoped>
    .add_pblm {
        h3{
            margin-bottom: 20px;
            font-size: 20px;
        }
        .inspPblmCate{
            padding: 2px 10px;
            color: #fff;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
        }
    }

</style>