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
| <template>
| <div class="file-handling">
| <el-tabs type="border-card" v-model="activeName" style="height: 100%;">
| <el-tab-pane :label="item.name" :name="item.component" v-for="(item, index) in tabList" :key="index"
| style="height: 100%;">
| <component :is="item.component" :key="item.component"></component>
| </el-tab-pane>
| </el-tabs>
| </div>
| </template>
|
| <script>
| import FileList from './components/FileList.vue'
| import ControlledFileApplication from './components/ControlledFileApplication.vue'
| import DistributionCollectionRecord from './components/DistributionCollectionRecord.vue'
| import FileChangeRequest from './components/FileChangeRequest.vue'
| import FileObsoletionRequest from './components/FileObsoletionRequest.vue'
| export default {
| components: {
| FileList,
| ControlledFileApplication,
| DistributionCollectionRecord,
| FileChangeRequest,
| FileObsoletionRequest
| },
| data() {
| return {
| tabList: [
| {
| name: '文件清单',
| component: 'FileList'
| },
| {
| name: '文件受控申请',
| component: 'ControlledFileApplication'
| },
| {
| name: '发放回收记录',
| component: 'DistributionCollectionRecord'
| },
| {
| name: '文件变更申请',
| component: 'FileChangeRequest'
| },
| {
| name: '文件作废申请',
| component: 'FileObsoletionRequest'
| },
| ],
| activeName: 'FileList'
| };
| },
| }
| </script>
|
| <style scoped>
| .file-handling {
| margin-top: 10px;
| height: calc(100% - 20px);
| }
|
| >>>.el-tabs__content {
| height: 100%;
| padding: 0;
| padding-top: 10px;
| }
| </style>
|
|
