fj-dc-ui/.svn/pristine/b1/b17aab830be7eefecbdde3941fbde71532bab0b7.svn-base

<template>
    <div>
        <el-container>
            <!-- <el-aside
                width="318px"
                style="border-right:2px solid #d5d5ff;float:left;height:calc(100vh - 100px)">
                <div class="tree" style="height: 100%;width: 100%;overflow: auto;display: inline-flex;">
                    <el-tree
                    :highlight-current="true"
                    style="height:100%;"
                    :data="treeData"
                    node-key="id"
                    show-checkbox
                    @check-change="handleCheckChange"
                    ref="jigou_tree">
                    <div class="custom-tree-node" slot-scope="{ node, data }">
                        <span style="float:left;">
                        {{ data.pnm}}
                        </span>
                        <div style="float:right;display: flex;justify-content: flex-end;align-items: center;width:50%;">
                            <span style="color:blue;width:80px;"></span>
                        </div>
                    </div>
                </el-tree>
                </div>
            </el-aside> -->
            <el-main style="margin:0px;padding:10px;overflow-y:hidden;">
                <div class="search_wrapper">
                    <el-form :inline="true" :model="problemSearch" class="demo-form-inline">
                        <el-form-item label="问题标题">
                            <el-input type="input" v-model.trim="problemSearch.cpTitle" clearable style="width: 140px"></el-input>
                        </el-form-item>
                        <el-form-item label="问题描述">
                            <el-input type="input" v-model.trim="problemSearch.cpDesc" clearable style="width: 140px"></el-input>
                        </el-form-item>
                        <el-form-item label="发现时间">
                            <el-date-picker
                                v-model="findTime"
                                type="daterange"
                                clearable
                                value-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="上报人">
                            <el-input type="input" v-model.trim="problemSearch.cpResnm" clearable style="width: 140px"></el-input>
                        </el-form-item>
                    </el-form>
                    <div>
                        <el-button style="color:rgba(255,255,255,1);float:right;margin-right:10px;"
                            type="primary"
                            icon="el-icon-plus"
                            @click="toAddProblem">添 加
                        </el-button>
                        <el-button style="color:rgba(255,255,255,1);float:right;margin-right:10px;"
                            type="primary"
                            icon="el-icon-search"
                            @click="search">查 询
                        </el-button>
                    </div>
                </div>
                <el-table
                    v-loading="loading"
                    :data="tableData"
                    border
                    :height="tableHeight"
                    style="width: 100%">
                    <el-table-column
                    fixed
                    label="序号"
                    type="index"
                    width="50">
                        <template slot-scope="scope">
                            {{ (pageIndex - 1) * pageSize + (scope.$index + 1) }}
                        </template>
                    </el-table-column>
                    <el-table-column
                    fixed
                    prop="cpTitle"
                    show-overflow-tooltip
                    label="问题标题"
                    min-width="160">
                    </el-table-column>
                    <el-table-column
                    show-overflow-tooltip
                    prop="cpDesc"
                    label="问题描述"
                    min-width="250">
                    </el-table-column>
                    <el-table-column
                    show-overflow-tooltip
                    prop="cpLgtd"
                    label="经度"
                    min-width="100">
                    </el-table-column>
                    <el-table-column
                    show-overflow-tooltip
                    prop="cpLttd"
                    label="纬度"
                    min-width="100">
                    </el-table-column>
                    <el-table-column
                    prop="cpIttm"
                    label="记录时间"
                    min-width="150">
                    </el-table-column>
                    <el-table-column
                    prop="cpResnm"
                    label="上报人"
                    min-width="100">
                    </el-table-column>
                    <!-- <el-table-column
                    label="有无多媒体"
                    min-width="100">
                        <template slot-scope="scope">
                            <p v-if="scope.row.fileList">是</p>
                            <p v-else>否</p>
                        </template>
                    </el-table-column> -->
                    <el-table-column
                    fixed="right"
                    label="操作"
                    min-width="100">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" v-if="ownPriv('manage')" @click="toEditProblem(scope.row)"></el-button>
                        <el-button type="text" icon="el-icon-view"  title="查看详情"@click="toShowDetail(scope.row)"></el-button>
                        <el-button type="text" icon="el-icon-delete"  title="删除问题" @click="deteleProblem(scope.row)" v-if="ownPriv('manage')"></el-button>
                    </template>
                    </el-table-column>
                </el-table>
                <el-pagination :pager-count="5" :current-page="pageIndex" background
                :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
                :page-sizes="[10, 20, 50, 100]"
                @current-change="pageIndexChange" @size-change="handleSizeChange"
                ></el-pagination>
            </el-main>
        </el-container>
        <!-- 添加问题弹窗 -->
        <el-dialog
            :title="dialogType + '问题'"
            width="50%"
            :visible.sync="add_dialogVisible">
            <el-form ref="form" :model="problemForm" label-width="160px">
                <el-form-item label="问题标题">
                    <el-input v-model="problemForm.cpTitle"></el-input>
                </el-form-item>
                <el-form-item label="问题描述">
                    <el-input v-model="problemForm.cpDesc"></el-input>
                </el-form-item>
                <el-form-item label="问题所在位置经度">
                    <el-input v-model="problemForm.cpLgtd"></el-input>
                </el-form-item>
                <el-form-item label="问题所在位置纬度">
                    <el-input v-model="problemForm.cpLttd"></el-input>
                </el-form-item>
                <el-form-item label="相关文件">
                    <upload ref="uploadFile" :url="`/pdcApi/file/insert?bizId=`" @uploadOver="removeNewSupervision"></upload>
                </el-form-item>
                <el-form-item style="margin-top: 50px">
                    <el-button type="primary" @click="addProblem" style="width: 100px;float:right">保存</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 修改弹窗 -->
        <problem-modify :editId="cpId" v-if="showModifyDialog" @closeEditDialog="handleClose"></problem-modify>
        <!-- 详情弹框 -->
        <el-dialog
            class="outerDialog custom_dialog"
            title="问题详情"
            width="60%"
            v-if="supervisionDetailsVisible"
            :visible.sync="supervisionDetailsVisible">
            <problem-detail ref="xianqing" :problemId="cpId"></problem-detail>
            <span slot="footer">
            <el-button style="margin-top:5px;" @click="supervisionDetailsVisible = false">返回</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import {tongYongList,deleteTongYong,gettongYongDetail} from '@api/duChaAPI.js'
import {dateFormat} from '@util/gw_date.js'
import request from '../../utils/gw_ajax_request.js'
import { hostUrl } from "@util/global_variable.js";
import problemModify from './supervisionModify_tongyong.vue'
import problemDetail from './supervisionDetails_tongyong.vue'
export default {
    props: [],
    data(){
        return{
            tableHeight: window.innerHeight - 200,
            tableData:[
                {
                    cpTitle: '',
                    cpDesc: '',
                    cpLgtd: '',
                    cpLttd: '',
                    cpIttm: '',
                    cpResnm: ''
                }
            ],
            problemSearch:{
                cpTitle: '',
                cpDesc: '',
                sttm: '',
                entm: '',
                cpResnm: '',
                pageSize: '20',
                pageNum: 1
            },
            problemForm:{
                cpTitle: '',
                cpDesc: '',
                cpLgtd: '',
                cpLttd: '',
                cpIttm: '',
                cpRes: '',  //填报人id
                cpResnm: '',  //填报人姓名
                fileList: []
            },
            cpId: '',
            pblmPointNum: '',
            pblmsTypeId: '',
            pblmId: '',
            imgList: [],
            videoList:[],
            audioList: [],
            pblmStat: '',
            gwComFiles: [],
            dialogType: '添加',
            dialogVisible: true,
            add_dialogVisible: false,
            checked: false,
            problemId: '',
            supervisionDetailsVisible:false,
            problemDeleteVisible: false,
            showModifyDialog: false,
            findTime: [],
            activeName: 'problem-detail',
            pageIndex: 1,
            pageSize: 20,
            total: 0,
            treeData: [],
            findUseOrgArray: [],
            treeNodeArray: [],
            loading: true,
            multipleSelection: [], // 已选
        }
    },
    computed: {
        persId() {
            return localStorage.getItem("userid")
                ? localStorage.getItem("userid")
                : "1098101939614724096";
        },
        persNm() {
            return localStorage.getItem("account")
                ? localStorage.getItem("account")
                : "";
        },
        hostUrl(){
            return hostUrl
        }
    },
    components: {
        upload: resolve => {
            require(["../../widgets/uploadFile.vue"], resolve);
        },
        problemModify: problemModify,
        problemDetail: problemDetail
    },
    mounted(){
        this.getLeftTreeData();
        this.searchList()
    },
    activated(){
        // this.getLeftTreeData();
        this.search();
        this.findParams = {
            adCode: "",
            pblmStat: "",
            persId: localStorage.getItem("userid")
        }
    },
    methods:{
        getLeftTreeData() {
            var _self = this;
            request.get("/dc/organization/base/getAllNode", {
                params: {
                    userId: this.persId,
                    orgType: "007"
                }
            }).then(res => {
                let data = res.data;
                data.forEach(ele => {
                    if (ele.pid == null || ele.pid == "") {
                        ele.pid = "007";
                    }
                });
                data = _self.getTrees(data);
                _self.treeData = data;
                console.log(data);
            });
        },
        search(){
            this.searchList()
        },
        searchList(){
            let _self = this;
            this.problemSearch.cpRes = this.persId
            if(this.findTime && this.findTime.length){
                this.problemSearch.sttm = this.findTime[0]
                this.problemSearch.entm = this.findTime[1]
            }else{
                this.problemSearch.sttm = ''
                this.problemSearch.entm = ''
            }
            this.problemSearch.pageSize = this.pageSize
            this.problemSearch.pageNum = this.pageIndex
            tongYongList(this.problemSearch).then(res => {
                _self.loading = false;
                if (res.success) {
                    this.tableData = res.data.list;
                    this.total = res.data.total;
                }
            });
        },
        toAddProblem(){
            this.add_dialogVisible = true
        },
        addProblem(){
            this.problemForm.cpRes = this.persId
            this.problemForm.cpResnm = this.persNm
            this.problemForm.cpIttm = dateFormat(new Date(),'yyyy-MM-dd hh:mm:ss')
            request.post('/biz/insp/compblm/insert',this.problemForm).then(res=>{
                if (res.success) {
                    this.pblmId = res.data.id;
                    this.gwComFiles = [];
                    this.searchList()
                    this.problemForm = {
                        cpTitle: '',
                        cpDesc: '',
                        cpLgtd: '',
                        cpLttd: ''
                    }
                    if (this.$refs.uploadFile.submitUpload(this.pblmId)) {
                        this.removeNewSupervision();
                    }
                }
            })
        },
        toEditProblem(row){
            this.dialogType = '修改'
            this.cpId = row.cpId
            this.showModifyDialog = true
        },
        // 查看详情
        toShowDetail(row){
            this.cpId = row.cpId
            this.supervisionDetailsVisible = true
        },
        // 删除弹窗
        deteleProblem(row) {
            this.cpId = row.cpId
            this.$confirm("确定删除该问题吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "返回",
                type: "warning"
            }).then(
                res => {
                    if (res === "confirm") {
                        request.post(`/biz/insp/compblm/delete/${this.cpId}`).then(res1 => {
                            if (res1.success) {
                                this.$message.success('删除成功');
                                this.searchList();
                            } else {
                                this.$message.success(res1.message);
                            }
                        });
                    }
                },
                res => {
                    console.log("返回");
                }
            );
        },
        removeNewSupervision(arg){
            if (arg) {
                var args = this.gwComFiles.concat(arg);
                this.updatefilelist(args);
            }
            this.$message.success('保存成功')
            this.add_dialogVisible = false
            this.gwComFiles = [];
            this.$refs.uploadFile.init();
        },
        updatefilelist(arg) {
            request.post('/dc/insp/pblm/update',{
                cpId: this.pblmId,
                fileList: arg
            }).then(res => {
                this.searchList()
                this.removeNewSupervision()
            });
        },
        handleClose(){
            this.searchList()
            this.showModifyDialog = false
        },
        handleDetailClick(tab, event) {
            console.log(tab, event);
        },
        pageIndexChange(val) {
            this.pageIndex = val;
            this.searchList();
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.searchList();
        },
        //格式化树形数据
        getTrees(list) {
            //@wxcwater重写方法 适应多个树
            let highLevelLength = 99;//预设最大节点id长度，目前最大应该为12，所以设置为99保证正常
            let _self =this;
            list.forEach((item,index)=>{
            item['pidLength'] = item.pid&&item.pid!=''?item.pid.length:0;
            if(highLevelLength>item.pidLength){
                highLevelLength = item.pidLength;
            }
            });
            console.log(highLevelLength);
            let heightLevelNode = [];
            list.forEach((item,index)=>{

            if(highLevelLength>=item.pidLength){
                heightLevelNode.push(item);
            }
            });

            list.forEach((item,index)=>{
                heightLevelNode.forEach((pItem)=>{
                _self.addTreeNode(pItem,item);
                });

            });
            console.log(heightLevelNode);
            return heightLevelNode;
        },
        addTreeNode:function(treeNode,leafNode){
            let _self = this;
            if(!treeNode.hasOwnProperty('children')){
                treeNode['children'] = [];
            }
            if(leafNode.pid == treeNode.id){
                treeNode.children.push(leafNode);
                return;
            }
            treeNode.children.forEach((item) => {
                _self.addTreeNode(item,leafNode);
            });
        },
        handleCheckChange(data, checked, indeterminate) {
            let cNarray = this.$refs["jigou_tree"].getCheckedNodes();
            console.log(cNarray);
            this.treeNodeArray = cNarray;
        },
        // 已选择项
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        exportExcel() {
            let _self = this;
            request.get("/dc/organization/base/getAllNode", {
                params: {
                    userId: this.persId,
                    orgType: "007"
                }
            }).then(res => {
                let orgAllNode = res.data;

                let data = _self.findParams;
                data.pageNum = _self.pageIndex;
                data.pageSize = _self.pageSize;
                data.villType = "9";
                data.pType = "7";
                _self.treeNodeArray.forEach(item => {
                    console.log(item);
                    if (item.id.length < 12) {
                        orgAllNode.forEach(orgItem => {
                            if (orgItem.id.startsWith(item.id)) {
                            _self.findUseOrgArray.push(orgItem.id);
                            }
                        });
                    } else {
                        _self.findUseOrgArray.push(item.id);
                    }
                });
                var xhr = new XMLHttpRequest();
                xhr.open("post", "/pdcApi/dc/insp/pblm/page/keyReg/export", true);
                xhr.responseType = "blob";
                xhr.setRequestHeader(
                    "Content-Type",
                    "application/json;charset=utf-8"
                );
                xhr.setRequestHeader(
                    "persId",
                    localStorage.getItem("userid") ? localStorage.getItem("userid") : ""
                );
                xhr.onload = function() {
                    if (this.status == 200) {
                    var blob = this.response;
                    var a = document.createElement("a");
                    var url = window.URL.createObjectURL(blob);
                    a.href = url;
                    //设置文件名称
                    a.download = "水利工程运行问题列表.xls";
                    a.click();
                    }
                };
                xhr.send(JSON.stringify(data));
            });
        },
        exportWord() {
            let _self = this;
            request.get("/dc/organization/base/getAllNode", {
                params: {
                    userId: this.persId,
                    orgType: "007"
                }
            }).then(res => {
                let orgAllNode = res.data;

                let data = _self.findParams;
                data.pageNum = _self.pageIndex;
                data.pageSize = _self.pageSize;
                data.villType = "9";
                data.pType = "7";
                _self.treeNodeArray.forEach(item => {
                    if (item.id.length < 12) {
                    orgAllNode.forEach(orgItem => {
                        if (orgItem.id.startsWith(item.id)) {
                        _self.findUseOrgArray.push(orgItem.id);
                        }
                    });
                    } else {
                    _self.findUseOrgArray.push(item.id);
                    }
                });
                        //下载word文档2
                request.post('/keyReg/doc',data).then(res=>{
                    if(res.success){
                        console.log(this.response)
                        var a = document.createElement('a');
                        a.href = `${this.hostUrl}${res.data.downloadPath}`;
                        //设置文件名称
                        a.download = '水利工程运行问题详情.doc';
                        a.click();
                        // window.open(`${this.hostUrl}${res.data.downloadPath}`)
                    }else{
                        _self.$mesage.error(res.message)
                    }
                }).catch(res=>{
                    _self.$mesage.error(res.message)
                })
            });
        },
    },
    watch:{

    },
}
</script>
<style lang="scss">
    .search_wrapper{
        display: flex;
        justify-content: space-between;
        min-height: 60px;
        div:last-child{
            min-width: 160px;
        }
    }
    .slide-line{
        width: 96%;
        margin-left: 3%;
        height: 1px;
        margin-bottom: 10px;
        border-bottom: dashed 1px #DCDFE6;
    }
    .detail_dialog .el-dialog__body{
        padding: 0 20px 30px;
    }
</style>