fj-dc-ui/.svn/pristine/15/15d88b3a93a85b3f13db2f08cd53ae8d1cb6c44c.svn-base

<template>
    <el-container>
        <el-main style="padding: 10px 10px;" class="problem_view">
            <el-row :gutter="10">
                <el-col :span="10">
                    <el-input
                        clearable 
                        placeholder="输入关键字搜索"
                        v-model="filterText">
                    </el-input>
                    <el-tree
                        v-loading="showTree"
                        :highlight-current="true"
                        class="filter_tree"
                        icon-class="el-icon-document"
                        :data="treeDataLists"
                        :props="defaultProps"
                        :default-expand-all="true"
                        :filter-node-method="filterNode"
                        @node-click = 'treeNodeClickHandler'
                        ref="tree">
                    </el-tree>
                </el-col>
                <el-col :span="14">
                    <div class="read_wrapper">
                        <p><span>问题描述：</span>{{pblmsDesc}}</p>
                        <p><span>问题分类：</span>{{cateObjList}}</p>
                        <p><span>责任主体：</span>{{objSubjectList}}</p>
                        <p><span>相关法规：</span>{{relativeLaw}}</p>
                        <p><span>法规内容：</span></br>&#x3000;&#x3000;{{lawContent}}</p>
                    </div>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>
<script>
import request from '@util/gw_ajax_request.js'
export default {
    data(){
        return{
            showTree: true,
            treeDataLists: [
                {
                    label: '前期与设计',
                    value: 1,
                    children: [
                        {
                            label: '审批及设计过程程序符合性',
                            value: '1',
                            children: [
                                {
                                    label: '审批工作程序符合性',
                                    value: '1.1',
                                    children: [
                                        {
                                            label: '初步设计投资超过可研批复投资10%以上未履行相关手续',
                                            value: '1.1.1',
                                        },
                                        {
                                            label: '初步设计或实施方案未批复，主体工程已开工',
                                            value: '1.1.2',
                                        }
                                    ]
                                },
                                {
                                    label: '设计过程程序符合性',
                                    value: '1.2'
                                }
                            ]
                        },
                        {
                            label: '设计过程技术规范规程符合性',
                            value: '2',
                            children: [
                                {
                                    label: '基本资料收集',
                                    value: '2.1'
                                },
                                {
                                    label: '文件编制',
                                    value: '2.2'
                                },
                                {
                                    label: '设计变更',
                                    value: '2.3'
                                }
                            ]
                        }
                    ]
                },
                {
                    label: '建设管理',
                    value: 2,
                    children: [
                        {
                            label: '项目法人责任制',
                            value: 1,
                            children: [
                                {
                                    label: '项目法人组件',
                                    value: 1.1,
                                },
                                {
                                    label: '组织机构和职责',
                                    value: 1.2,
                                }
                            ]
                        }
                    ]
                }
            ],
            defaultProps: {
                children: 'children',
                label: 'class1Name'
            },
            filterText: '',
            pblmsDesc: '',
            objSubjectList: '',
            cateObjList: '',
            relativeLaw: '',
            lawContent: '',
            firstNode: null
        }
    },
    mounted(){
        this.getTreeData()
        setTimeout(()=>{
            this.showTree = false
        },5000)
    },
    methods:{
        getTreeData(){
            request.post('/tac/obj/pblmstb/tree',{}).then(res=>{
                if(res.success){
                    this.treeDataLists = res.data
                    this.firstNode = this.treeDataLists[0].children[0].children[0].children[0]
                    this.treeNodeClickHandler(this.firstNode)
                }else{
                    this.$message.error(res.message)
                }
            })
        },
        filterNode(value, data) {
            if (!value) return true;
            // console.log(data.class1Name.indexOf(value))
            if(data.class1Name){
                return data.class1Name.indexOf(value) !== -1;
            }
        },
        treeNodeClickHandler(data){
            request.get(`/tac/obj/pblmstb/${data.id}`).then(res=>{
                if(res.success){
                    this.pblmsDesc = res.data.pblmsDesc
                    this.relativeLaw = res.data.relativeLaw
                    this.lawContent = res.data.lawContent
                    let objSubjectList = res.data.objSubjectList
                    let subjectList = []
                    objSubjectList.forEach(ele=>{
                        subjectList.push(ele.subName)
                    })
                    this.objSubjectList = subjectList.join(',')

                    let cateObjList = res.data.cateObjList
                    let cateList = []
                    cateObjList.forEach(ele=>{
                        cateList.push(ele.desc)
                    })
                    this.cateObjList = cateList.join(',')
                }else{
                    this.$message.error(res.message)
                }
            })
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        },
    },
}
</script>
<style lang="scss">
    .filter_tree{
        height: calc(100vh - 140px);
        overflow: auto;
    }
    .read_wrapper{
        height: calc(100vh - 140px);
        overflow: auto;
        padding: 10px;
        margin-top: 30px;
        line-height: 40px;
        color: #333;
        span{
            font-weight: bold;
            color: #444;
        }
    }
    .problem_view .el-tree-node__expand-icon.expanded{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
</style>