TransViewer.vue

<template>
  <div :style="{height:innerHeight+'px'}">
      <el-container style="height:100%">
        <el-aside width="300px" style="height:100%;overflow:auto;">
        <el-tree
            :props="props"
            :load="loadNode"
            @node-click="onModelSelect"
            :default-expanded-keys="['root']"
            :highlight-current="true"		
            lazy
            >
             <span class="custom-tree-node" slot-scope="{ node, data }">
                <img :src="getModuleIcon(node,data)" class="moduleIcon"/>
                
                <span :title="data.typeName">{{ node.label.toLowerCase() }}</span>
             </span>
        </el-tree>
        </el-aside>
        <el-main style="padding:0;padding-left:5px;height:100%">
            <struct-show 
                :fields="fields"
                :initList="rules.initList"
                :ruleList="rules.ruleList"
                :checkList="rules.checkList"
                :defaultList="rules.defaultList"
                :globalList="rules.globalList"
                :staticList="rules.staticList"
            >
            </struct-show>
        </el-main>
    </el-container>
  </div>
</template>

<script>
import Service from "./Service"
import StructShow from "./StructShow"

export default {
    props:['trans','innerHeight'],
    components:{StructShow},
    data(){
        return {
            props:{
                label: 'name',
                children: 'modules',
                isLeaf: 'leaf'
            },
            fields:[],
            rules:{
                initList:[],
                ruleList:[],
                checkList:[],
                defaultList:[],
                globalList:[],
                staticList:[]
            }
        }
    },
    mounted(){
        this.updateModel(this.trans)
    },
    methods:{
        async updateModel(modelPath){
            let rtndata = await Service.viewModelData(modelPath)
            if(rtndata.respCode == SUCCESS){
                this.fields = rtndata.data.fields
                this.rules.initList = rtndata.data.rules.initList
                this.rules.ruleList = rtndata.data.rules.ruletList
                this.rules.checkList = rtndata.data.rules.checkList
                this.rules.defaultList = rtndata.data.rules.defaultList
                this.rules.globalList = rtndata.data.rules.globalList
                this.rules.staticList = rtndata.data.rules.staticList
            }
        },
        async loadNode(node, resolve){
            if (node.level === 0) {
               return resolve([{name:this.splitItem(this.trans).title,id:"root",typeName:this.trans}])
            }
            else{
                let rtndata = await Service.viewModelData(node.data.typeName)
                if(rtndata.respCode == SUCCESS){
                    let fields = rtndata.data.fields.filter(item=>item.type!=0 && item.type!=4).map(item=>{
                        let splitItem = this.splitItem(item.typeName);
                        item.name = splitItem.title+":"+item.name
                        item.singleName = splitItem.title
                        if(item.typeName.endsWith(".bo." + item.singleName)){
                            item.leaf = true
                        }
                        else if(item.typeName.endsWith("IModule")){
                            item.leaf = true
                        }
                        return item;
                    })
                    return resolve(fields)
                }
            }
        },
        onModelSelect(model){
            //更新结构显示
            this.updateModel(model.typeName)
        },
        splitItem(trans){
            let dotIdx = trans.lastIndexOf(".");
            let title = trans.substring(dotIdx+1);
            return {title,name:trans}
        },
        getModuleIcon(node,data){
            if(node.level == 1){
                return require("~/assets/model/transactionIcon.png");
            }
            if(data.typeName.endsWith(".bo." + data.singleName)){
                return require("~/assets/model/moduleSingleIcon.png");
            }
            else if(data.type == 2){
                return require("~/assets/model/moduleListIcon.png");
            }
            else if(data.type == 3){
                return require("~/assets/model/moduleArgumentIcon.png");
            }
            return require("~/assets/model/moduleIcon.png")
        }
    },
    computed:{
        simpleFields(){
            return this.fields.filter(item=>item.type === 0 && !item.typeName.endsWith("IPanel"))
        }
    }
}
</script>

<style>
    .moduleIcon{
        vertical-align:middle;
        margin-right:3px;
    }
</style>