fj-dc-ui/.svn/pristine/e7/e7a896471a9a5e80e7314cd9f2f5229796745fe4.svn-base

<!--  -->
<template>
    <div>
        <el-row>
            <el-col :span="leftWidth" style="padding: 0;border-right: 1px solid #dcdfe6;"
                :style="{'height': colHeight + 'px'}">
                <el-container>
                    <el-header style="height: 3vh;padding: 0 10px;line-height: 3vh;border-bottom:1px solid #dcdfe6;">
                        <strong>稽察任务</strong>
                    </el-header>
                    <el-main style="padding:10px 0;">
                        <el-row style="padding: 0 10px;">
                            <el-input clearable placeholder="点击下列选项或输入关键字搜索" v-model="filterText">
                            </el-input>
                        </el-row>
                        <el-row style="padding: 10px;">
                            <el-form :inline="true" size="mini" class="demo-form-inline">
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="年度">
                                            <el-select v-model="year" clearable style="width:100px;">
                                                <el-option :lable="item.year" :value="item.year" :key="item.id"
                                                    v-for="item in yearList"></el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="批次">
                                            <el-select v-model="batch" clearable style="width:100px;">
                                                <el-option :lable="item.batch" :value="item.batch" :key="item.id"
                                                    v-for="item in pcList"></el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-button type="primary" size="mini" @click="treeSearch">查询</el-button>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </el-row>
                        <el-row style="overflow-y:auto;padding: 0 10px;" :style="{'height': colHeight - 170 + 'px'}">
                            <el-tree :highlight-current="true" class="filter_tree" :data="treeDataLists"
                                :props="defaultProps" :default-expanded-keys="defaultExpanded"
                                :filter-node-method="filterNode" node-key="id" @node-click='treeNodeClickHandler'
                                ref="tree2">
                                <span class="custom-tree-node" slot-scope="{ node }">
                                    <el-tooltip v-if="node.isLeaf" class="item" effect="dark" :content="node.label"
                                        placement="top-start">
                                        <span>{{ node.label }}</span>
                                    </el-tooltip>
                                    <span v-else>{{ node.label }}</span>
                                </span>
                            </el-tree>
                        </el-row>
                    </el-main>
                </el-container>
            </el-col>
            <el-col :span="rightWidth" style="border-right: 1px solid #dcdfe6;position:relative;"
                :style="{'height': colHeight + 'px'}">
                <el-container style="flex-direction: column;">
                    <el-row style="">
                        <Profession ref="ProfessionRef" :reallMenuLists="reallMenuLists" :currentNodeId="currentNodeId"
                            :projectName="projectName + stateName"
                            @professionChildrenTableName="professionChildrenTableNameEvent">
                        </Profession>
                    </el-row>
                    <el-header style="background: #F5F9FC;font-size:large;height: 3.5vh;line-height:3.5vh;padding: 0;text-align:center;">
                        <strong>{{projectName + stateName + rightTableName}} </strong>
                    </el-header>
                    <el-main style="padding:0;overflow:hidden;display: flex;flex-direction: column;">
                        <div style="text-align: right;" v-if="isHb">
                            <el-select v-model="tbIf" clearable placeholder="请选择是否填报">
                                    <el-option v-for="(item,index) in tbIfList" :label="item.label" :value="item.value" :key="item.value"></el-option>
                            </el-select>
                            <el-button type="primary" @click="showBcqdFn1()">查询</el-button>
                            <el-button type="primary" style="margin-right: 20px;font-size: 14px" @click="showBcqdFn()">生成必查清单</el-button>
                        </div>
                        <component :is="curComponent" :type="professionType" :pertype="pertype" :objId="objId"
                            :currentNodeId="currentNodeId" :projectName="projectName" :rightTableName="rightTableName"
                             :backStatus="backStatus" :hasPriv="hasPriv"
                            :submitStatus="submitStatus" ref="componentRef" pageName="inspectionView"></component>
                    </el-main>
                </el-container>
                <div class="open_board">
                    <i class="el-icon-arrow-left" v-if="isOpen" @click="closeLeft"></i>
                    <i class="el-icon-arrow-right" v-else @click="openLeft"></i>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import Profession from './Profession';
    import request from '../../utils/gw_ajax_request'
    import problemView from './problemView.vue'
    import {
        getPerType,
    } from "../../api/InspectionReport.js";
    export default {
        //import引入的组件需要注入到对象中才能使用
        components: {
            Profession,//专业折叠面板组件
            problemView
        },
        data() {
            //这里存放数据
            return {
                stateName: '', //状态名称
                leftWidth: 5,
                rightWidth: 19,
                isOpen: true,
                defaultExpanded: [],//树默认展开节点数组
                curComponent: "problemView",
                professionType: '',//专业类型
                rightTableName: '必查清单',
                currentNodeId: '',//点击树的节点登记表ID
                inspGroupId: '',//点击树的节点组ID
                pertype: '',//稽察填报人员类型，用于控制表格上方菜单控制
                objId: '',//点击树节点的objId
                tableSrc: '',//报表的链接
                projectName: '',//点击树的工程名称
                colHeight: window.innerHeight - 90,
                filterText: '',
                year: "",
                batch: "",
                yearList: [],
                pcList: [],
                treeDataLists: [],
                defaultProps: {
                    children: 'children',
                    label: 'pnm'
                },
                backStatus: false,
                reallMenuLists: [],//菜单实际用的数组
                menuList: [//配置菜单用的数组
                    {
                        pType: '1',
                        index: '1',
                        title: '前期与设计',
                        menuDis: false,
                    },
                    {
                        pType: '2',
                        index: '2',
                        title: '建设管理',
                        menuDis: false,
                    },
                    {
                        pType: '3',
                        index: '3',
                        title: '计划下达与执行',
                        menuDis: false,
                    },
                    {
                        pType: '4',
                        index: '4',
                        title: '资金使用与管理',
                        menuDis: false,
                    },
                    {
                        pType: '5',
                        index: '5',
                        title: '工程质量',
                        menuDis: false,
                    },
                    {
                        pType: '6',
                        index: '6',
                        title: '工程安全',
                        menuDis: false,
                    },
                ],
                menuLists: [],

                submitStatus: '',
                // dailyRecordVisible: false,  //操作日志弹窗
                isClicked: false,
                ynList: [
                    {label: '是',value: '1'},
                    {label: '否',value: '0'},
                ],
                problemType: [
                    {label: '一般',value: '0'},
                    {label: '较重',value: '1'},
                    {label: '严重',value: '2'}
                ],
                problemViewshow:false,
                tbIf:'',
                tbIfList:[
                  {label: '全部',value: ''},
                  {label: '未填报',value: '0'},
                  {label: '已填报',value: '1'}
                ]
            };
        },
        //监听属性 类似于data概念
        computed: {
            persId() {
                return localStorage.getItem("userid")
                    ? localStorage.getItem("userid")
                    : "1098101939614724096";
            },
            hasPriv() {
                return this.ownPriv('manage')
            },
            isHb(){
                if(localStorage.getItem('currentRlcode').substring(0,2)=="42"){
                    return true;
                }else{
                    return false;
                }
            }
        },
        //监控data中的数据变化
        watch: {
            filterText(val) {
                this.$refs.tree2.filter(val);
            },
        },
        //方法集合
        methods: {
            async getYearPc() {
                await request.post(`/tac/insp/year/list`, {}).then(res => {
                    if (res.success) {
                        this.$nextTick(() => {
                            this.yearList = res.data;
                        })
                    }
                })
                request.post(`/tac/insp/batch/list`, {}).then(res => {
                    if (res.success) {
                        this.pcList = res.data;
                    }
                })
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.pnm.indexOf(value) !== -1;
            },
            //获取左侧树数据
            getTreeData: function () {
                let _self = this;
                request.post(`/tac/insp/year/batch/obj/getObjTreeListV2`, {
                    "persId": _self.persId,
                    "year": _self.year,
                    "batch": _self.batch
                }).then(res => {
                    _self.treeDataLists = res.data.children;
                })

            },
            findChildren (data) {
                if (data.hasOwnProperty('children')) {
                    if(data.children && data.children.length > 0){
                        this.findChildren(data.children[0])
                    } else {
                        this.currentNodeId = data.id
                        this.defaultExpanded =  [data.pid]
                        // this.defaultCheckedKeys = [this.currentNodeId]
                        this.projectName =  data.pnm
                        this.$nextTick(()=>{
                            this.$refs.tree2.setCurrentKey(this.currentNodeId);
                        })
                    }
                }else {
                    this.currentNodeId = data.id
                    this.defaultExpanded =  [data.pid]
                    // this.defaultCheckedKeys = [this.currentNodeId]
                    this.projectName =  data.pnm
                    this.$nextTick(()=>{
                        this.$refs.tree2.setCurrentKey(this.currentNodeId);
                    })
                }
            },
            //左侧树搜索
            treeSearch() {
                this.getTreeData();
            },
            //树节点点击事件
            treeNodeClickHandler: function (data, node, tree) {
                if (node.childNodes.length == 0) {
                    console.log(node.parent.data.pid)
                    let dataState = node.data.state;
                    this.projectName = data.pnm;
                    this.currentNodeId = data.id;
                    this.objId = data.objId;
                    this.inspGroupId = node.parent.data.pid;
                    this.reallMenuLists = [];
                    this.getMenu(dataState);
                    this.$nextTick(()=>{
                      this.showBcqdFn1()
                    })
                } else {
                    return;
                }
            },
            getMenu: function (dataState) {
                let _self = this;
                let thisType = true;
                getPerType(_self.inspGroupId, _self.persId).then((res) => {
                    console.log(res);
                    _self.pertype = res.data.pertype;
                    res.data.forEach(ele => {
                        if (ele.pertype == '11' || ele.pertype == '12' || ele.pertype == '13' || ele.pertype == '14' || ele.pertype == '15' || ele.pertype == '16') {
                            _self.reallMenuLists.push(_self.menuLists[Number(ele.pertype) - 11]);
                            thisType = true;
                        } else {
                            _self.reallMenuLists = _self.menuLists;
                            thisType = false;
                            return;
                        }
                    })
                    if (thisType) {
                        _self.reallMenuLists.push(_self.menuLists[6]);
                        if (_self.menuLists[7]) {
                            _self.reallMenuLists.push(_self.menuLists[7]);
                        }
                    }
                    console.log(_self.reallMenuLists);
                });
            },
            //中间专业导航后处理
            professionChildrenTableNameEvent(item) {
                this.professionType = item.type;//专业类型
                this.$nextTick(()=>{
                  this.showBcqdFn1()
                })
            },
            closeLeft() {
                this.isOpen = false
                this.leftWidth = 0
                this.rightWidth = 24
            },
            openLeft() {
                this.isOpen = true
                this.leftWidth = 5
                this.rightWidth = 19
            },
            showBcqdFn(){
              if(!this.currentNodeId){
                this.$message.warning('请先在左侧选择工程！');
                return
              }
              if(!this.professionType){
                this.$message.warning('请选择专业类型');
                return
              }
              this.$refs.componentRef.getProblemList(this.tbIf)
            },
            showBcqdFn1(){
              if(!this.currentNodeId){
                this.$message.warning('请先在左侧选择工程！');
                return
              }
              if(!this.professionType){
                this.$message.warning('请选择专业类型');
                return
              }
              this.$refs.componentRef.getProblemList1(this.tbIf)
            }

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

        },
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
            this.getTreeData();
            this.getMenu();
            this.menuLists = this.menuList;
            this.reallMenuLists = this.menuLists;
        },
        beforeCreate() { }, //生命周期 - 创建之前
        beforeMount() { }, //生命周期 - 挂载之前
        beforeUpdate() { }, //生命周期 - 更新之前
        updated() { }, //生命周期 - 更新之后
        beforeDestroy() { }, //生命周期 - 销毁之前
        destroyed() { }, //生命周期 - 销毁完成
        activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
    }
</script>
<style lang="scss">
    .filter_tree {
        .el-tree-node__label {
            color: #666;
            font-size: large;
        }
    }

    .filter_tree.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
        background-color: #c7e9fe;
    }

    .assistant_btn {
        position: absolute;
        bottom: -10px;
        right: 20px;
        z-index: 999;
    }

    .open_board {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 24px;
        height: 30px;
        line-height: 30px;
        border: solid 1px #ddd;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        text-align: center;
        background-color: #bbebff;
        cursor: pointer;
    }
</style>