1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<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>