fj-dc-ui/.svn/pristine/39/397697b4b0ca03839f0518ee3e6ce533ceffe8b8.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"
                        node-key="id"
                        :current-node-key="firstNode.id"
                        :data="treeDataLists"
                        :props="defaultProps"
                        :default-expand-all="true"
                        :filter-node-method="filterNode"
                        @node-click = 'treeNodeClickHandler'
                        ref="tree">
                      <div class="custom-tree-node" slot-scope="{ node, data }" style="width: calc(100% - 50px)">
                        <span v-if="data.children!=undefined" style="display: block;width: 100%;overflow: hidden;word-wrap: break-word;word-break: break-all;text-overflow: ellipsis;color:#333333;font-weight: bold" :title="node.label">{{ node.label}}</span>
                        <span v-else :title="node.label" style="display: block;width: 100%;overflow: hidden;word-wrap: break-word;word-break: break-all;text-overflow: ellipsis;">{{ node.label}}</span>
                      </div>
                    </el-tree>
                </el-col>
                <el-col :span="14">
                    <div class="read_law_wrapper">
                        <h4>{{lawTitle}}</h4>
                        <p class="doc_num">{{lawNum}}</p>
                        <p><pre>&#x3000;&#x3000;{{lawContent}}</pre></p>
                    </div>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>
<script>
import request from '@util/gw_ajax_request.js'
export default {
    props:['lawName'],
    data(){
        return{
            // 数据加载慢  使用loading模拟延迟加载
            showTree: true,
            treeDataLists: [
            ],
            defaultProps: {
                children: 'children',
                label: 'lawKeyword'
            },
            filterText: '',
            lawTitle: '',
            lawNum: '',
            lawContent: '',
            firstNode: null
        }
    },
    mounted(){
        this.getTreeData()
        setTimeout(()=>{
            this.showTree = false
        },3000)
    },
    methods:{
        getTreeData(){
            request.get('/tac/slb/law/index/tree').then(res=>{
                if(res.success){
                    let treeDataLists = res.data
                    treeDataLists.forEach(ele=>{
                        this.treeDataLists.push({docId:ele.docId,lawKeyword:ele.lawTitle,children:ele.children,id:'0'+ele.docId})
                    })
                    // 默认展示第一个子节点的内容
                    this.firstNode = this.treeDataLists[0].children[0]
                    this.treeNodeClickHandler(this.firstNode)
                    this.$nextTick(()=>{
                        this.filterText = this.lawName;
                    })
                }else{
                    this.$message.error(res.message)
                }
            })
        },
        // 树节点过滤方法
        filterNode(value, data) {
            if (!value) return true;
            // console.log(data.class1Name.indexOf(value))
            if(data.lawKeyword){
                return data.lawKeyword.indexOf(value) !== -1;
            }
        },
        treeNodeClickHandler(data){
            this.lawTitle = data.lawKeyword
            this.lawNum = data.lawModify
            this.lawContent = data.bookContent
            this.lawContent = this.lawContent.replace(this.lawTitle, '');
            this.lawContent = this.lawContent.replace(this.lawNum, '');
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
}
</script>
<style lang="scss">
    .filter_tree{
        height: calc(100vh - 140px);
        overflow: auto;
    }
    .el-tree /deep/ .current-node{
      width: 100%;
    }
    .el-tree /deep/ .current-node span{
      display: block;
      width: 100%;
      overflow: hidden;
      word-wrap: break-word;
      word-break: break-all;
      text-overflow: ellipsis;
    }
    .read_law_wrapper{
        height: calc(100vh - 140px);
        overflow: auto;
        padding: 10px;
        font-size: 16px;
        color: #333;
        h4{
            font-size: 18px;
            text-align: center;
        }
        .doc_num{
            color: #555;
            // margin-bottom: 20px;
            margin-top: 10px;
            font-size: 14px;
            text-align: center;
        }
        // pre {
        //     white-space: pre-wrap;
        //     word-wrap: break-word;
        //     font-size: 16px;
        // }
    }
    .problem_view .el-tree-node__expand-icon.expanded{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
</style>