YbInfoLayout 信息页布局
上下结构，通常是上面是头部基础信息，下面是内容会出现滚动条区域
# 基本使用
标题 创建人：张三
其他信息
| 数据集名称 | 分类名称 |
|---|---|
| 广州医保病种分值盈亏分析 | 三级表分析 |
| 修改人 | 创建时间 |
| dong3 | 2023-09-28 14:22:21 |
| 修改时间 | 备注 |
| 2023-09-28 14:22:21 |
其他内容
<template>
<div style="height:400px">
<yb-info-layout title="标题">
<template #headerLeft>
<el-divider direction="vertical"></el-divider>
<span>创建人：张三</span>
<el-divider direction="vertical"></el-divider>
<el-popover placement="bottom-start" width="400" trigger="click">
<el-descriptions
title="其他信息"
direction="vertical"
:column="2"
border
>
<div slot="extra">
<el-button
v-show="!editInfoDoing"
type="primary"
size="mini"
@click="toggleEidtInfo"
>编辑</el-button
>
<el-button
v-show="editInfoDoing"
type="default"
size="mini"
@click="editInfoDoing = false"
>取消</el-button
>
<el-button
v-show="editInfoDoing"
type="primary"
size="mini"
@click="saveEidtInfo"
v-loading="leafDataLoading"
>保存</el-button
>
</div>
<el-descriptions-item label="数据集名称">
<el-input
size="mini"
v-model="editInfo.name"
v-if="editInfoDoing"
></el-input>
<span v-else>{{ activeDataset.name }}</span>
</el-descriptions-item>
<el-descriptions-item label="分类名称">
<el-input
size="mini"
v-model="editInfo.categoryName"
v-if="editInfoDoing"
>
</el-input>
<span v-else>{{ activeDataset.categoryName }}</span>
</el-descriptions-item>
<el-descriptions-item label="修改人"
>{{ activeDataset.updateByName
}}</el-descriptions-item
>
<el-descriptions-item label="创建时间"
>{{ activeDataset.createDate}}</el-descriptions-item
>
<el-descriptions-item label="修改时间"
>{{ activeDataset.updateDate }}
</el-descriptions-item>
<el-descriptions-item label="备注">
<el-input
size="mini"
v-model="editInfo.comments"
v-if="editInfoDoing"
>
</el-input>
<span v-else>{{ activeDataset.comments }}</span>
</el-descriptions-item>
</el-descriptions>
<i
slot="reference"
class="el-icon-info yb-info-layout-header-icon"
></i>
</el-popover>
</template>
<template #headerRight>
<el-button size="small" type="primary">编辑</el-button>
</template>
<div style="height:1000px;">其他内容</div>
</yb-info-layout>
</div>
</template>
<script>
export default {
data() {
return {
editInfoDoing: false,
editInfo: {
name: '',
categoryName: '',
comments: '',
},
activeDataset: {
createByName: 'dong3',
createDate: '2023-09-28 14:22:21',
updateBy: '26',
updateByName: 'dong3',
updateDate: '2023-09-28 14:22:21',
comments: null,
datasourceId: 11,
categoryName: '三级表分析',
datasetName: '广州医保病种分值盈亏分析',
originId: 169,
modelName: null,
sysDatasetType: null,
expIdMap: null,
name: '广州医保病种分值盈亏分析',
},
leafDataLoading: false,
};
},
methods: {
saveEidtInfo() {
this.activeDataset.name = this.editInfo.name;
this.activeDataset.categoryName = this.editInfo.categoryName;
this.activeDataset.comments = this.editInfo.comments;
this.editInfoDoing = false;
},
toggleEidtInfo() {
this.editInfo.name = this.activeDataset.name;
this.editInfo.categoryName = this.activeDataset.categoryName;
this.editInfo.comments = this.activeDataset.comments;
this.editInfoDoing = true;
},
},
};
</script>
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
127
128
129
130
131
132
133
134
135
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
127
128
129
130
131
132
133
134
135
显示 复制 复制
# 包含 el-tabs 时
给 el-tabs 添加 yb-tabs-layout类名，在 el-tabs 内再嵌套 el-tabs ， 给 el-tabs 添加 yb-tabs-layout-min类名
标题 创建人：张三
其他信息
| 数据集名称 | 分类名称 |
|---|---|
| 广州医保病种分值盈亏分析 | 三级表分析 |
| 修改人 | 创建时间 |
| dong3 | 2023-09-28 14:22:21 |
| 修改时间 | 备注 |
| 2023-09-28 14:22:21 |
一、一
<template>
<div style="height:400px">
<yb-info-layout title="标题" :headerMarginBottom="0">
<template #headerLeft>
<el-divider direction="vertical"></el-divider>
<span>创建人：张三</span>
<el-divider direction="vertical"></el-divider>
<el-popover placement="bottom-start" width="400" trigger="click">
<el-descriptions
title="其他信息"
direction="vertical"
:column="2"
border
>
<div slot="extra">
<el-button
v-show="!editInfoDoing"
type="primary"
size="mini"
@click="toggleEidtInfo"
>编辑</el-button
>
<el-button
v-show="editInfoDoing"
type="default"
size="mini"
@click="editInfoDoing = false"
>取消</el-button
>
<el-button
v-show="editInfoDoing"
type="primary"
size="mini"
@click="saveEidtInfo"
v-loading="leafDataLoading"
>保存</el-button
>
</div>
<el-descriptions-item label="数据集名称">
<el-input
size="mini"
v-model="editInfo.name"
v-if="editInfoDoing"
></el-input>
<span v-else>{{ activeDataset.name }}</span>
</el-descriptions-item>
<el-descriptions-item label="分类名称">
<el-input
size="mini"
v-model="editInfo.categoryName"
v-if="editInfoDoing"
>
</el-input>
<span v-else>{{ activeDataset.categoryName }}</span>
</el-descriptions-item>
<el-descriptions-item label="修改人"
>{{ activeDataset.updateByName
}}</el-descriptions-item
>
<el-descriptions-item label="创建时间"
>{{ activeDataset.createDate}}</el-descriptions-item
>
<el-descriptions-item label="修改时间"
>{{ activeDataset.updateDate }}
</el-descriptions-item>
<el-descriptions-item label="备注">
<el-input
size="mini"
v-model="editInfo.comments"
v-if="editInfoDoing"
>
</el-input>
<span v-else>{{ activeDataset.comments }}</span>
</el-descriptions-item>
</el-descriptions>
<i
slot="reference"
class="el-icon-info yb-info-layout-header-icon"
></i>
</el-popover>
</template>
<template #headerRight>
<el-button size="small" type="primary">编辑</el-button>
</template>
<el-tabs class="yb-tabs-layout" v-model="activeTab">
<el-tab-pane label="字段管理" name="datasetField" lazy>
<el-tabs class="yb-tabs-layout-min" v-model="activeTabmin">
<el-tab-pane label="用户" name="user" lazy>
<div style="height:1000px">一、一</div>
</el-tab-pane>
<el-tab-pane label="角色" name="role" lazy>
<div style="height:1000px">一、二</div>
</el-tab-pane>
<el-tab-pane label="科室" name="dept" lazy>
<div style="height:1000px">一、三</div>
</el-tab-pane>
</el-tabs>
</el-tab-pane>
<el-tab-pane label="列权限设置" name="colPermision" lazy>
<div style="height:1000px">二</div>
</el-tab-pane>
<el-tab-pane label="数据预览" name="previewData" lazy>
<div style="height:1000px">三</div>
</el-tab-pane>
</el-tabs>
</yb-info-layout>
</div>
</template>
<script>
export default {
data() {
return {
activeTab: 'datasetField',
activeTabmin: 'user',
editInfoDoing: false,
editInfo: {
name: '',
categoryName: '',
comments: '',
},
activeDataset: {
createByName: 'dong3',
createDate: '2023-09-28 14:22:21',
updateBy: '26',
updateByName: 'dong3',
updateDate: '2023-09-28 14:22:21',
comments: null,
datasourceId: 11,
categoryName: '三级表分析',
datasetName: '广州医保病种分值盈亏分析',
originId: 169,
modelName: null,
sysDatasetType: null,
expIdMap: null,
name: '广州医保病种分值盈亏分析',
},
leafDataLoading: false,
};
},
methods: {
saveEidtInfo() {
this.activeDataset.name = this.editInfo.name;
this.activeDataset.categoryName = this.editInfo.categoryName;
this.activeDataset.comments = this.editInfo.comments;
this.editInfoDoing = false;
},
toggleEidtInfo() {
this.editInfo.name = this.activeDataset.name;
this.editInfo.categoryName = this.activeDataset.categoryName;
this.editInfo.comments = this.activeDataset.comments;
this.editInfoDoing = true;
},
},
};
</script>
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
显示 复制 复制
# 在 yb-outscroll-tree 中使用
广东省
- 复制
- 删除
广东省
标题 创建人：张三
其他信息
| 数据集名称 | 分类名称 |
|---|---|
| 广州医保病种分值盈亏分析 | 三级表分析 |
| 修改人 | 创建时间 |
| dong3 | 2023-09-28 14:22:21 |
| 修改时间 | 备注 |
| 2023-09-28 14:22:21 |
一
<template>
<div style="position:relative;height:400px;" class="app-base-bg">
<div
style="height:100%;overflow:auto;padding:10px;box-sizing:border-box;"
>
<yb-outscroll-tree
ref="tree"
:treeProps="treeProps"
@current-change="treeNodeChange"
:limitCount="20"
allFixed
>
<!-- 显示横线时追加在横线右边的内容 -->
<template v-slot:after-node-label="{node,data}">
<!-- 给按钮添加 yb-grey-action-button 类名 -->
<el-button
class="yb-grey-action-button"
size="mini"
icon="el-icon-copy-document"
@click.stop
></el-button>
<el-dropdown
size="medium"
placement="bottom-start"
@command="handleDropdown($event, data)"
trigger="hover"
>
<el-button
class="yb-grey-action-button"
size="mini"
icon="el-icon-more"
@click.stop
style="margin-right:5px"
></el-button>
<el-dropdown-menu slot="dropdown">
<!-- 使用 yb-dropdown-menu-title 类名 -->
<div class="yb-dropdown-menu-title">
{{ node.label }}
</div>
<template>
<el-dropdown-item
icon="el-icon-copy-document"
command="copy"
>复制</el-dropdown-item
>
<el-dropdown-item
icon="el-icon-delete"
command="delete"
>删除</el-dropdown-item
>
</template>
</el-dropdown-menu>
</el-dropdown>
</template>
<yb-info-layout title="标题" :headerMarginBottom="0">
<template #headerLeft>
<el-divider direction="vertical"></el-divider>
<span>创建人：张三</span>
<el-divider direction="vertical"></el-divider>
<el-popover
placement="bottom-start"
width="400"
trigger="click"
>
<el-descriptions
title="其他信息"
direction="vertical"
:column="2"
border
>
<div slot="extra">
<el-button
v-show="!editInfoDoing"
type="primary"
size="mini"
@click="toggleEidtInfo"
>编辑</el-button
>
<el-button
v-show="editInfoDoing"
type="default"
size="mini"
@click="editInfoDoing = false"
>取消</el-button
>
<el-button
v-show="editInfoDoing"
type="primary"
size="mini"
@click="saveEidtInfo"
v-loading="leafDataLoading"
>保存</el-button
>
</div>
<el-descriptions-item label="数据集名称">
<el-input
size="mini"
v-model="editInfo.name"
v-if="editInfoDoing"
></el-input>
<span v-else>{{ activeDataset.name }}</span>
</el-descriptions-item>
<el-descriptions-item label="分类名称">
<el-input
size="mini"
v-model="editInfo.categoryName"
v-if="editInfoDoing"
>
</el-input>
<span v-else
>{{ activeDataset.categoryName }}</span
>
</el-descriptions-item>
<el-descriptions-item label="修改人"
>{{ activeDataset.updateByName
}}</el-descriptions-item
>
<el-descriptions-item label="创建时间"
>{{
activeDataset.createDate}}</el-descriptions-item
>
<el-descriptions-item label="修改时间"
>{{ activeDataset.updateDate }}
</el-descriptions-item>
<el-descriptions-item label="备注">
<el-input
size="mini"
v-model="editInfo.comments"
v-if="editInfoDoing"
>
</el-input>
<span v-else
>{{ activeDataset.comments }}</span
>
</el-descriptions-item>
</el-descriptions>
<i
slot="reference"
class="el-icon-info yb-info-layout-header-icon"
></i>
</el-popover>
</template>
<template #headerRight>
<el-button size="small" type="primary">编辑</el-button>
</template>
<el-tabs class="yb-tabs-layout" v-model="activeTab">
<el-tab-pane label="字段管理" name="datasetField" lazy>
<div style="height:1000px">一</div>
</el-tab-pane>
<el-tab-pane
label="列权限设置"
name="colPermision"
lazy
>
<div style="height:1000px">二</div>
</el-tab-pane>
<el-tab-pane label="数据预览" name="previewData" lazy>
<div style="height:1000px">三</div>
</el-tab-pane>
</el-tabs>
</yb-info-layout>
</yb-outscroll-tree>
</div>
</div>
</template>
<script>
const treeData = JSON.parse(
'[{"children":[{"dictName":"地市","id":"95a4e338b864dda3ca59ad82af9fa3ba","isLeaf":true,"itemName":"广州市","itemValue":"440100","children":[{"dictName":"区","id":"95a4e338b864dda3ca59ad82af9fa3ba22","isLeaf":true,"itemName":"海珠区","itemValue":"440100","children":[{"dictName":"街道","id":"95a4e338b864dda3ca59ad82af9fa3ba221","isLeaf":true,"itemName":"街道1","itemValue":"440100"},{"dictName":"街道","id":"95a4e338b864dda3ca59ad82af9fa3ba222","isLeaf":true,"itemName":"街道2","itemValue":"440100"}]},{"dictName":"区","id":"95a4e338b864dda3ca59ad82af9fa3ba22","isLeaf":true,"itemName":"天河区","itemValue":"440100"}]},{"dictKind":"city","dictName":"地市","id":"2797430bbac22e64cdcd612be5cc5609","isLeaf":true,"itemName":"韶关市","itemValue":"440200"},{"dictKind":"city","dictName":"地市","id":"b9261f14475ac2f890b9b534272552bb","isLeaf":true,"itemName":"深圳市","itemValue":"440300"},{"dictKind":"city","dictName":"地市","id":"a08eafed2fb10aee2937e16c0787e6a7","isLeaf":true,"itemName":"珠海市","itemValue":"440400"},{"dictKind":"city","dictName":"地市","id":"1373fc23215d121bc182eaa259b1eaf8","isLeaf":true,"itemName":"汕头市","itemValue":"440500"},{"dictKind":"city","dictName":"地市","id":"56a0b66b0c3023d69db7189cc4dec7c7","isLeaf":true,"itemName":"佛山市","itemValue":"440600"},{"dictKind":"city","dictName":"地市","id":"3597430bbac22e64cdcd612be5cc5609","isLeaf":true,"itemName":"江门市","itemValue":"440700"},{"dictKind":"city","dictName":"地市","id":"2777430bbac22e64cdcd612be5cc5609","isLeaf":true,"itemName":"湛江市","itemValue":"440800"},{"dictKind":"city","dictName":"地市","id":"2796430bbac22e64cdcd612be5cc5609","isLeaf":true,"itemName":"茂名市","itemValue":"440900"},{"dictKind":"city","dictName":"地市","id":"2790430bbac22e64cdcd612be5cc5609","isLeaf":true,"itemName":"肇庆市","itemValue":"441200"},{"dictKind":"city","dictName":"地市","id":"2790400bbac22e64cdcd612be5cc5609","isLeaf":true,"itemName":"惠州市","itemValue":"441300"},{"dictKind":"city","dictName":"地市","id":"2790490bbac22e64cdcd612be5cc5609","isLeaf":true,"itemName":"梅州市","itemValue":"441400"},{"dictKind":"city","dictName":"地市","id":"2790490bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"汕尾市","itemValue":"441500"},{"dictKind":"city","dictName":"地市","id":"2790590bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"河源市","itemValue":"441600"},{"dictKind":"city","dictName":"地市","id":"2791490bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"阳江市","itemValue":"441700"},{"dictKind":"city","dictName":"地市","id":"2792490bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"清远市","itemValue":"441800"},{"dictKind":"city","dictName":"地市","id":"2796490bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"东莞市","itemValue":"441900"},{"dictKind":"city","dictName":"地市","id":"2798490bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"中山市","itemValue":"442000"},{"dictKind":"city","dictName":"地市","id":"2799490bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"潮州市","itemValue":"445100"},{"dictKind":"city","dictName":"地市","id":"2790290bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"揭阳市","itemValue":"445200"},{"dictKind":"city","dictName":"地市","id":"2790990bbac29e64cdcd612be5cc5609","isLeaf":true,"itemName":"云浮市","itemValue":"445300"}],"dictName":"省份","id":"5c149e840f85351b7683021ea233852b","isLeaf":true,"itemName":"广东省"}]'
);
export default {
data() {
return {
treeProps: {
props: { label: 'itemName', children: 'children' },
data: treeData,
defaultExpandedKeys: [],
nodeKey: 'id',
showLabelLine: true,
showLine: false,
},
activeTab: 'datasetField',
editInfoDoing: false,
editInfo: {
name: '',
categoryName: '',
comments: '',
},
activeDataset: {
createByName: 'dong3',
createDate: '2023-09-28 14:22:21',
updateBy: '26',
updateByName: 'dong3',
updateDate: '2023-09-28 14:22:21',
comments: null,
datasourceId: 11,
categoryName: '三级表分析',
datasetName: '广州医保病种分值盈亏分析',
originId: 169,
modelName: null,
sysDatasetType: null,
expIdMap: null,
name: '广州医保病种分值盈亏分析',
},
leafDataLoading: false,
};
},
methods: {
treeNodeChange(nodeData, node) {
console.log(nodeData, node);
},
saveEidtInfo() {
this.activeDataset.name = this.editInfo.name;
this.activeDataset.categoryName = this.editInfo.categoryName;
this.activeDataset.comments = this.editInfo.comments;
this.editInfoDoing = false;
},
toggleEidtInfo() {
this.editInfo.name = this.activeDataset.name;
this.editInfo.categoryName = this.activeDataset.categoryName;
this.editInfo.comments = this.activeDataset.comments;
this.editInfoDoing = true;
},
handleDropdown(command) {
console.log(command);
},
},
};
</script>
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
显示 复制 复制
# Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| title | 标题 | string | - | - |
| headerMarginBottom | header 与 body 的间距 | number | - | 10 |
# 插槽
| 事件名称 | 说明 | 参数 |
|---|---|---|
| default | body 区域内容 | - |
| headerLeft | 头部左边区域内容 | - |
| headerCenter | 头部中间区域内容 | - |
| headerRight | 头部右边区域内容 | - |
上次更新: 2024/06/11, 17:45:22