增加模型浏览器

src/routers/index.js

@@ -7,6 +7,7 @@ import Layout from "../views/Layout";
 import BusRouter from "../views/Business/BusRouter";
 import ReviewRouter from "../views/Review/ReviewRouter";
 import DocRouter from "../views/Docpan/DocRouter";
+import ModelViewer from "../views/ModeViewer"
 
 Vue.use(VueRouter);
 
@@ -55,6 +56,7 @@ export const routes = [
     { path: "/display", component: Display, children: DisplayRouter },
     { path: "/login", component: Login, name: "Login" },
     { path: "/docpan", component: () => import("../views/Docpan"), children: DocRouter },
+    { path: "/model/viewer",component:ModelViewer},
 ];
 
 const rootRouter = new VueRouter({

src/service/Api.js

@@ -126,7 +126,7 @@ export default class Api
     static _get(url,data)
     {
         // return this._post(url,data,"get");
-        return requestManager.pushRequest(this._post.bind(this, BASE_URI+url, data, "get"))
+        return requestManager.pushRequest(this._post.bind(this, url, data, "get"))
     }
     static post(url,data)
     {

src/views/ModeViewer/Service.js

+import Api from "~/service/Api"
+
+const prefix = "gjjs/business"
+const cache = {}
+
+function viewAllTrans(){
+    return Api.pget(`/${prefix}/model/view/all`)    
+}
+
+async function viewModelData(trans){
+    if(cache.trans){
+        return new Promise(resolve=>resolve(cache.trans))
+    }
+    let rtndata = Api.pget(`/${prefix}/model/view/${trans}`)
+    if(rtndata.respCode == SUCCESS){
+        cache[trans] = rtndata
+    }
+    return rtndata   
+}
+
+export default {viewAllTrans,viewModelData}
\ No newline at end of file

src/views/ModeViewer/StructShow.vue

+<template>
+    <div class="structShow">
+            <div class="structFields">
+                <el-table
+                    size="medium"
+                    :data="simpleFields"
+                    height="300px"
+                    style="width: 100%">
+                    <el-table-column
+                        prop="name"
+                        label="Datafields"
+                        width="200">
+                    </el-table-column>
+                    <el-table-column
+                        prop="typeName"
+                        label="Data Type"
+                       >
+                    </el-table-column>
+                </el-table>
+            </div>
+            <div class="structRules">
+                <!-- tree -->
+                <b>Rules:</b>
+                <br/>
+                <el-tree
+                    :data="ruleData"
+                >
+                    <span class="custom-tree-node" slot-scope="{ node, data }">
+                        <img :src="getRuleIcon(node,data)" class="ruleIcon"/>
+                        <span :title="data.methodName">{{ node.label }}</span>
+                    </span>
+                </el-tree>
+            </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props:{
+        fields:{
+            type: Array,
+            default:()=>[]
+        },
+        initList:{
+            type: Array,
+            default:()=>[]
+        },
+        ruleList:{
+            type: Array,
+            default:()=>[]
+        },
+        checkList:{
+            type: Array,
+            default:()=>[]
+        },
+        defaultList:{
+            type: Array,
+            default:()=>[]
+        },
+        globalList:{
+            type: Array,
+            default:()=>[]
+        },
+        staticList:{
+            type: Array,
+            default:()=>[]
+        },
+    },
+    data(){
+        return {
+            
+        }
+    },
+    methods:{
+        getRuleIcon(node,data){
+            if(node.level == 1){
+                if(data.id == "0"){
+                    return require("~/assets/model/ruleFunctionGroup.gif")
+                }else if(data.id == "1"){
+                    return require("~/assets/model/ruleFunctionGroup.gif")
+                }else if(data.id == "2"){
+                    return require("~/assets/model/ruleDefaultGroup.gif")
+                }else if(data.id == "3"){
+                    return require("~/assets/model/ruleDefaultGroup.gif")
+                }else if(data.id == "4"){
+                    return require("~/assets/model/ruleCheckGroup.gif")
+                }else if(data.id == "5"){
+                    return require("~/assets/model/ruleEventGroup.gif")
+                }
+            }else{
+                if(data.ruleType == "GLOBAL"){
+                    return require("~/assets/model/ruleFunction.gif")
+                }else if(data.ruleType == "STATIC"){
+                    return require("~/assets/model/ruleFunction.gif")
+                }else if(data.ruleType == "INIT"){
+                    return require("~/assets/model/ruleInit.gif")
+                }else if(data.ruleType == "DEFAULT"){
+                    return require("~/assets/model/ruleDefault.gif")
+                }else if(data.ruleType == "CHECK"){
+                    return require("~/assets/model/ruleCheck.gif")
+                }else if(data.ruleType == "RULE"){
+                    return require("~/assets/model/ruleEvent.gif")
+                }
+            }
+        }
+    },
+    mounted(){
+
+    },
+    computed:{
+        simpleFields(){
+            return this.fields.filter(item=>item.type === 0 && !item.typeName.endsWith("IPanel"))
+        },
+        ruleData(){
+           const rules = []
+           const globalNode = {id:"0",label:"global"} 
+           const initNode = {id:"2",label:"init"}
+           const defaultNode = {id:"3",label:"default"}
+           const staticNode = {id:"1",label:"static"}
+           const ruleNode = {id:"5",label:"rule"} 
+           const checkNode = {id:"4",label:"check"} 
+           rules.push(globalNode)
+           rules.push(staticNode)
+           rules.push(initNode)
+           rules.push(defaultNode)
+           rules.push(checkNode)
+           rules.push(ruleNode)
+           globalNode.children = this.globalList.map((ruleItem,idx)=>{
+               return {id:globalNode.id+idx,ruleType:"GLOBAL",label:ruleItem.methodName}
+           }); 
+           initNode.children = this.initList.map((ruleItem,idx)=>{
+               return {id:initNode.id+idx,ruleType:"INIT",label:`\\<order=${ruleItem.order},method=${ruleItem.methodName}>`}
+           }); 
+           defaultNode.children = this.defaultList.map((ruleItem,idx)=>{
+               return {id:defaultNode.id+idx,ruleType:"DEFAULT",label:`${ruleItem.dotPath.replace(/\./g,"\\")}<order=${ruleItem.order},method=${ruleItem.methodName}>`}
+           }); 
+           checkNode.children = this.checkList.map((ruleItem,idx)=>{
+               return {id:checkNode.id+idx,ruleType:"CHECK",label:`${ruleItem.dotPath.replace(/\./g,"\\")}<order=${ruleItem.order},method=${ruleItem.methodName}>`}
+           }); 
+           ruleNode.children = this.ruleList.map((ruleItem,idx)=>{
+               return {id:ruleNode.id+idx,ruleType:"RULE",label:`${ruleItem.dotPath.replace(/\./g,"\\")}<order=${ruleItem.order},method=${ruleItem.methodName}>`}
+           }); 
+           staticNode.children = this.staticList.map((ruleItem,idx)=>{
+               return {id:staticNode.id+idx,ruleType:"STATIC",label:ruleItem.methodName}
+           }); 
+           return rules
+        }
+    }
+}
+</script>
+
+<style>
+.structShow{
+    display: flex;
+    flex-direction: column;
+    height:100%;
+}
+.structShow .structFields{
+    flex: 2;
+}
+.structShow .structRules{
+    flex: 3;
+    overflow: auto;
+}
+
+</style>
\ No newline at end of file

src/views/ModeViewer/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>
\ No newline at end of file

src/views/ModeViewer/index.vue

+<template>
+  <div style="height:100%">
+      <el-container style="height:100%">
+        <el-aside width="300px" style="height:100%">
+            <el-input v-model="input" size="medium" :placeholder="`交易总数:${transList.length}，输入交易码快速筛选`"></el-input>
+            <div class="transList">
+                <el-table :data="transItemList" row-class-name="transRow" @row-dblclick="onTransOpen"	 stripe  
+                
+                :show-header="false"
+                style="width: 100%;">
+                    <el-table-column prop="title" label="交易列表">
+                        <template slot-scope="scope">
+                            <span>
+                                <b>{{scope.row.title}}</b>
+                                <span>{{`(${scope.row.name})`}}</span>
+                            </span>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+        </el-aside>
+        <el-main style="padding:0;padding-left:5px;">
+            <el-tabs v-model="curTrans" type="card" size="medium"  closable @edit="handleTabsEdit">
+                <el-tab-pane
+                    :key="item.name"
+                    v-for="(item) in transOpened"
+                    :label="item.title"
+                    :name="item.name"
+                >
+                    <trans-viewer :trans="item.name" :innerHeight="innerHeight"></trans-viewer>
+                </el-tab-pane>
+            </el-tabs>
+        </el-main>
+      </el-container>
+  </div>
+</template>
+
+<script>
+import Service from "./Service"
+import TransViewer from "./TransViewer"
+export default {
+    components:{TransViewer},
+    data(){
+        return {
+            transList:[],
+            curTrans:"",
+            input:"",
+            transOpened:[],
+            innerHeight:300
+        }
+    },
+    methods:{
+        handleTabsEdit(targetName, action){
+            if (action === 'remove') {
+                let tabs = this.transOpened;
+                let activeName = this.curTrans;
+                if (activeName === targetName) {
+                    tabs.forEach((tab, index) => {
+                    if (tab.name === targetName) {
+                        let nextTab = tabs[index + 1] || tabs[index - 1];
+                        if (nextTab) {
+                        activeName = nextTab.name;
+                        }
+                    }
+                    });
+                }
+                
+                this.curTrans = activeName;
+                this.transOpened = tabs.filter(tab => tab.name !== targetName);
+            }
+        },
+        splitItem(trans){
+            let dotIdx = trans.lastIndexOf(".");
+            let title = trans.substring(dotIdx+1);
+            return {title,name:trans}
+        },
+        onTransOpen(row){
+        // alert(row.title)
+            if(this.transOpened.filter(item=>item.name == row.name).length==0){
+                this.transOpened.push({...row})
+            }
+            this.curTrans = row.name
+        },
+        calcInnerHeight(){
+            this.innerHeight = this.$el.clientHeight - 60
+        }
+    },
+    async mounted(){
+        window.addEventListener("resize",this.calcInnerHeight)
+        this.calcInnerHeight()
+        let rtndata = await Service.viewAllTrans()
+        if(rtndata.respCode == SUCCESS){
+            this.transList = rtndata.data.sort()
+            if(this.transList.length>0){
+                let first = this.transList[0];
+                this.curTrans = first
+                this.transOpened.push(this.splitItem(first))
+            }
+        }
+    },
+    beforeDestroy(){
+        window.removeEventListener("resize",this.calcInnerHeight)
+    },
+    computed:{
+        transItemList(){
+            return this.transList.map(item=>{
+                return this.splitItem(item)
+            }).filter(item=>{
+                return !this.input || (this.input && item.title.toLowerCase().indexOf(this.input.toLowerCase())>-1)
+            })
+        }
+    }
+}
+</script>
+
+<style>
+    .transList {
+        height: calc(100% - 40px);
+        overflow: auto;
+    }
+    .transRow{
+        cursor: pointer;
+        color: deepskyblue;
+        text-indent: 1em;
+    }
+</style>
\ No newline at end of file