@v2coding/ui 0.1.1 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/v2coding-ui.esm.js +2456 -615
- package/dist/v2coding-ui.min.js +1 -1
- package/dist/v2coding-ui.ssr.js +2450 -635
- package/package.json +1 -1
- package/src/components/fill-view/{index.vue → fill-view.vue} +0 -0
- package/src/components/head-menu/{index.vue → head-menu.vue} +1 -1
- package/src/components/head-menu/menu-item.vue +8 -12
- package/src/components/history/{index.vue → history.vue} +6 -5
- package/src/components/minimize/{index.vue → minimize.vue} +1 -1
- package/src/components/page/search-page.vue +202 -0
- package/src/components/scroll-view/scroll-view.vue +21 -21
- package/src/components/table/table.vue +8 -6
- package/src/components/field/field.upload.portrait.vue +0 -304
package/package.json
CHANGED
|
File without changes
|
|
@@ -31,20 +31,16 @@
|
|
|
31
31
|
return ['nav-menu-submenu-popup', this.theme].join(' ');
|
|
32
32
|
},
|
|
33
33
|
},
|
|
34
|
-
render() {
|
|
34
|
+
render(createElement) {
|
|
35
35
|
if (this.isLeaf) {
|
|
36
|
-
return (
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
</el-menu-item>
|
|
40
|
-
);
|
|
36
|
+
return createElement('el-menu-item', {props: {index: this.index, route: this.route}}, [
|
|
37
|
+
createElement('template', {slot: 'title'}, [this.item.name]),
|
|
38
|
+
]);
|
|
41
39
|
}
|
|
42
|
-
return (
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
</el-submenu>
|
|
47
|
-
);
|
|
40
|
+
return createElement('el-submenu', {props: {index: this.index, popperClass: this.popperClass, popperAppendToBody: false}}, [
|
|
41
|
+
createElement('template', {slot: 'title'}, [this.item.name]),
|
|
42
|
+
...this.item.children.map(child => createElement('head-menu-submenu', {key: child.id, props: {item: child}})),
|
|
43
|
+
]);
|
|
48
44
|
},
|
|
49
45
|
};
|
|
50
46
|
</script>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="history" v-show="visible">
|
|
3
|
-
<scroll-
|
|
3
|
+
<scroll-view ref="menus" class="history-tabs">
|
|
4
4
|
<div
|
|
5
5
|
v-for="item in items"
|
|
6
6
|
:key="item.path"
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
<span class="ellipsis" :title="item.title">{{ item.title }}</span>
|
|
11
11
|
<i class="el-icon-close" @click.stop="onTabRemove(item.path)"></i>
|
|
12
12
|
</div>
|
|
13
|
-
</scroll-
|
|
13
|
+
</scroll-view>
|
|
14
14
|
<div class="contextmenu" :style="contextmenu">
|
|
15
15
|
<div
|
|
16
16
|
class="modal"
|
|
@@ -54,8 +54,11 @@
|
|
|
54
54
|
</template>
|
|
55
55
|
|
|
56
56
|
<script>
|
|
57
|
+
import ScrollView from '../scroll-view/scroll-view';
|
|
58
|
+
|
|
57
59
|
export default {
|
|
58
|
-
name: "
|
|
60
|
+
name: "ui-history",
|
|
61
|
+
components: {ScrollView},
|
|
59
62
|
props: {
|
|
60
63
|
items: Array,
|
|
61
64
|
current: null,
|
|
@@ -159,8 +162,6 @@ export default {
|
|
|
159
162
|
</script>
|
|
160
163
|
|
|
161
164
|
<style lang="scss">
|
|
162
|
-
@import "../../assets/style/var";
|
|
163
|
-
|
|
164
165
|
.history {
|
|
165
166
|
flex: none;
|
|
166
167
|
height: 40px;
|
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<document-title :title="title">
|
|
3
|
+
<multipane class="router-search-page" >
|
|
4
|
+
<div class="page-search-conditions" :class="{collapse}" :style="searchConditionsStyle">
|
|
5
|
+
<div v-show="!collapse" class="search-content">
|
|
6
|
+
<slot name="search"></slot>
|
|
7
|
+
</div>
|
|
8
|
+
<div class="indicator" @click="toggleCollapse"></div>
|
|
9
|
+
</div>
|
|
10
|
+
<multipane-resizer v-show="!collapse"/>
|
|
11
|
+
<div class="page-search-content" :class="{'page-content-direction-row': direction === 'row'}">
|
|
12
|
+
<slot></slot>
|
|
13
|
+
</div>
|
|
14
|
+
</multipane>
|
|
15
|
+
</document-title>
|
|
16
|
+
</template>
|
|
17
|
+
|
|
18
|
+
<script>
|
|
19
|
+
import {Multipane, MultipaneResizer} from 'vue-multipane';
|
|
20
|
+
import DocumentTitle from '../document-title';
|
|
21
|
+
|
|
22
|
+
export default {
|
|
23
|
+
name: 'ui-search-page',
|
|
24
|
+
components: {
|
|
25
|
+
Multipane,
|
|
26
|
+
MultipaneResizer,
|
|
27
|
+
DocumentTitle,
|
|
28
|
+
},
|
|
29
|
+
props: {
|
|
30
|
+
value: {
|
|
31
|
+
type: String,
|
|
32
|
+
default: '360px',
|
|
33
|
+
},
|
|
34
|
+
min: {
|
|
35
|
+
type: String,
|
|
36
|
+
default: '200px',
|
|
37
|
+
},
|
|
38
|
+
max: {
|
|
39
|
+
type: String,
|
|
40
|
+
default: '600px',
|
|
41
|
+
},
|
|
42
|
+
direction: {
|
|
43
|
+
type: String,
|
|
44
|
+
validator: (val) => ['row', 'column'].includes(val),
|
|
45
|
+
default: 'column',
|
|
46
|
+
},
|
|
47
|
+
},
|
|
48
|
+
data() {
|
|
49
|
+
return {
|
|
50
|
+
collapse: false,
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
computed: {
|
|
54
|
+
title() {
|
|
55
|
+
return this.$route.meta.name || '';
|
|
56
|
+
},
|
|
57
|
+
searchConditionsStyle() {
|
|
58
|
+
let width = this.value;
|
|
59
|
+
let min = this.min;
|
|
60
|
+
if (this.collapse) {
|
|
61
|
+
min = 0;
|
|
62
|
+
width = 0;
|
|
63
|
+
}
|
|
64
|
+
return {
|
|
65
|
+
width: width,
|
|
66
|
+
minWidth: min,
|
|
67
|
+
maxWidth: this.max,
|
|
68
|
+
};
|
|
69
|
+
},
|
|
70
|
+
},
|
|
71
|
+
methods: {
|
|
72
|
+
toggleCollapse() {
|
|
73
|
+
this.collapse = !this.collapse;
|
|
74
|
+
},
|
|
75
|
+
},
|
|
76
|
+
};
|
|
77
|
+
</script>
|
|
78
|
+
|
|
79
|
+
<style lang="scss">
|
|
80
|
+
|
|
81
|
+
.router-search-page {
|
|
82
|
+
height: 100%;
|
|
83
|
+
|
|
84
|
+
.page-search-conditions {
|
|
85
|
+
display: flex;
|
|
86
|
+
flex-direction: column;
|
|
87
|
+
position: relative;
|
|
88
|
+
|
|
89
|
+
.search-content {
|
|
90
|
+
flex: 1;
|
|
91
|
+
display: flex;
|
|
92
|
+
flex-direction: column;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.indicator {
|
|
96
|
+
position: absolute;
|
|
97
|
+
top: 50%;
|
|
98
|
+
right: 0;
|
|
99
|
+
transform: translateY(-50%);
|
|
100
|
+
width: 14px;
|
|
101
|
+
height: 36px;
|
|
102
|
+
opacity: 0.3;
|
|
103
|
+
background-color: #ccc;
|
|
104
|
+
transition-duration: 200ms;
|
|
105
|
+
transition-property: background-color, opacity;
|
|
106
|
+
transition-timing-function: ease-in-out;
|
|
107
|
+
display: flex;
|
|
108
|
+
align-items: center;
|
|
109
|
+
justify-content: center;
|
|
110
|
+
flex-direction: column;
|
|
111
|
+
border-radius: 4px 0 0 4px;
|
|
112
|
+
cursor: pointer;
|
|
113
|
+
|
|
114
|
+
&:hover {
|
|
115
|
+
opacity: 1;
|
|
116
|
+
background-color: var(--color-primary);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
&:hover:before {
|
|
120
|
+
transform: rotate(24deg);
|
|
121
|
+
}
|
|
122
|
+
&:hover:after {
|
|
123
|
+
transform: rotate(-24deg);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
&::before,
|
|
127
|
+
&::after {
|
|
128
|
+
content: '';
|
|
129
|
+
display: block;
|
|
130
|
+
position: relative;
|
|
131
|
+
width: 2px;
|
|
132
|
+
height: 10px;
|
|
133
|
+
background-color: #fff;
|
|
134
|
+
transition: all 300ms ease-in-out;
|
|
135
|
+
}
|
|
136
|
+
&::before {
|
|
137
|
+
bottom: -1px;
|
|
138
|
+
}
|
|
139
|
+
&::after {
|
|
140
|
+
top: -1px;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
&.collapse {
|
|
145
|
+
z-index: 2;
|
|
146
|
+
|
|
147
|
+
.indicator {
|
|
148
|
+
border-radius: 0 4px 4px 0;
|
|
149
|
+
right: -14px;
|
|
150
|
+
|
|
151
|
+
&:hover:before {
|
|
152
|
+
transform: rotate(-24deg);
|
|
153
|
+
}
|
|
154
|
+
&:hover:after {
|
|
155
|
+
transform: rotate(24deg);
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.page-search-content {
|
|
162
|
+
flex: 1;
|
|
163
|
+
position: relative;
|
|
164
|
+
display: flex;
|
|
165
|
+
flex-direction: column;
|
|
166
|
+
overflow: auto;
|
|
167
|
+
|
|
168
|
+
&.page-search-content-direction-row {
|
|
169
|
+
flex-direction: row;
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
&.layout-v > .multipane-resizer {
|
|
174
|
+
margin: 0;
|
|
175
|
+
left: 0;
|
|
176
|
+
position: relative;
|
|
177
|
+
|
|
178
|
+
&.collapse {
|
|
179
|
+
display: none;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
&:before {
|
|
183
|
+
display: block;
|
|
184
|
+
content: "";
|
|
185
|
+
width: 3px;
|
|
186
|
+
height: 40px;
|
|
187
|
+
position: absolute;
|
|
188
|
+
top: 50%;
|
|
189
|
+
left: 50%;
|
|
190
|
+
transform: translate(-50%, -50%);
|
|
191
|
+
border-left: 1px solid #ccc;
|
|
192
|
+
border-right: 1px solid #ccc;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
&:hover {
|
|
196
|
+
&:before {
|
|
197
|
+
border-color: #999;
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
</style>
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div :class="['scroll-
|
|
3
|
-
<div :class="['scroll-
|
|
2
|
+
<div :class="['ui-scroll-view__nav-wrap', `is-${direction}`]">
|
|
3
|
+
<div :class="['ui-scroll-view__nav-control ui-scroll-view__nav-prev', scrollable ? 'ui-scroll-view__nav-active' : '', scrollable && scrollable.prev ? '' : 'is-disabled']" @click="scrollPrev">
|
|
4
4
|
<slot name="prev" :disabled="scrollable && !scrollable.prev"><div class="menu-nav-control"></div></slot>
|
|
5
5
|
</div>
|
|
6
|
-
<div ref="navScroll" class="scroll-
|
|
7
|
-
<div ref="nav" :class="['scroll-
|
|
6
|
+
<div ref="navScroll" class="ui-scroll-view__nav-scroll">
|
|
7
|
+
<div ref="nav" :class="['ui-scroll-view__nav', `is-${direction}`]" :style="navStyle">
|
|
8
8
|
<slot></slot>
|
|
9
9
|
</div>
|
|
10
10
|
</div>
|
|
11
|
-
<div :class="['scroll-
|
|
11
|
+
<div :class="['ui-scroll-view__nav-control ui-scroll-view__nav-next', scrollable ? 'ui-scroll-view__nav-active' : '', scrollable && scrollable.next ? '' : 'is-disabled']" @click="scrollNext">
|
|
12
12
|
<slot name="next" :disabled="scrollable && !scrollable.next"><div class="menu-nav-control"></div></slot>
|
|
13
13
|
</div>
|
|
14
14
|
</div>
|
|
@@ -22,7 +22,7 @@ const firstUpperCase = str => {
|
|
|
22
22
|
};
|
|
23
23
|
|
|
24
24
|
export default {
|
|
25
|
-
name: '
|
|
25
|
+
name: 'ui-scroll-view',
|
|
26
26
|
props: {
|
|
27
27
|
direction: {
|
|
28
28
|
type: String,
|
|
@@ -154,7 +154,7 @@ export default {
|
|
|
154
154
|
</script>
|
|
155
155
|
|
|
156
156
|
<style lang="less">
|
|
157
|
-
.scroll-
|
|
157
|
+
.ui-scroll-view__nav-wrap {
|
|
158
158
|
overflow: hidden;
|
|
159
159
|
position: relative;
|
|
160
160
|
display: flex;
|
|
@@ -169,10 +169,10 @@ export default {
|
|
|
169
169
|
flex-direction: column;
|
|
170
170
|
}
|
|
171
171
|
|
|
172
|
-
.scroll-
|
|
172
|
+
.ui-scroll-view__nav-scroll {
|
|
173
173
|
overflow: hidden;
|
|
174
174
|
|
|
175
|
-
.scroll-
|
|
175
|
+
.ui-scroll-view__nav {
|
|
176
176
|
position: relative;
|
|
177
177
|
transition: transform .3s;
|
|
178
178
|
display: flex;
|
|
@@ -189,7 +189,7 @@ export default {
|
|
|
189
189
|
}
|
|
190
190
|
}
|
|
191
191
|
|
|
192
|
-
&.is-row .scroll-
|
|
192
|
+
&.is-row .ui-scroll-view__nav-control {
|
|
193
193
|
flex: none;
|
|
194
194
|
width: 50px;
|
|
195
195
|
height: 100%;
|
|
@@ -200,7 +200,7 @@ export default {
|
|
|
200
200
|
justify-content: center;
|
|
201
201
|
visibility: hidden;
|
|
202
202
|
|
|
203
|
-
&.scroll-
|
|
203
|
+
&.ui-scroll-view__nav-active {
|
|
204
204
|
visibility: visible;
|
|
205
205
|
}
|
|
206
206
|
|
|
@@ -233,7 +233,7 @@ export default {
|
|
|
233
233
|
}
|
|
234
234
|
}
|
|
235
235
|
|
|
236
|
-
&.scroll-
|
|
236
|
+
&.ui-scroll-view__nav-prev {
|
|
237
237
|
.menu-nav-control::before {
|
|
238
238
|
transform: rotate(18deg);
|
|
239
239
|
}
|
|
@@ -243,7 +243,7 @@ export default {
|
|
|
243
243
|
}
|
|
244
244
|
}
|
|
245
245
|
|
|
246
|
-
&.scroll-
|
|
246
|
+
&.ui-scroll-view__nav-next {
|
|
247
247
|
.menu-nav-control::before {
|
|
248
248
|
transform: rotate(-18deg);
|
|
249
249
|
}
|
|
@@ -253,7 +253,7 @@ export default {
|
|
|
253
253
|
}
|
|
254
254
|
}
|
|
255
255
|
|
|
256
|
-
&.scroll-
|
|
256
|
+
&.ui-scroll-view__nav-prev:hover {
|
|
257
257
|
.menu-nav-control::before {
|
|
258
258
|
transform: rotate(30deg);
|
|
259
259
|
}
|
|
@@ -263,7 +263,7 @@ export default {
|
|
|
263
263
|
}
|
|
264
264
|
}
|
|
265
265
|
|
|
266
|
-
&.scroll-
|
|
266
|
+
&.ui-scroll-view__nav-next:hover {
|
|
267
267
|
.menu-nav-control::before {
|
|
268
268
|
transform: rotate(-30deg);
|
|
269
269
|
}
|
|
@@ -286,7 +286,7 @@ export default {
|
|
|
286
286
|
&.is-column {
|
|
287
287
|
height: 100%;
|
|
288
288
|
|
|
289
|
-
.scroll-
|
|
289
|
+
.ui-scroll-view__nav-control {
|
|
290
290
|
flex: none;
|
|
291
291
|
width: 100%;
|
|
292
292
|
height: 35px;
|
|
@@ -297,7 +297,7 @@ export default {
|
|
|
297
297
|
justify-content: center;
|
|
298
298
|
visibility: hidden;
|
|
299
299
|
|
|
300
|
-
&.scroll-
|
|
300
|
+
&.ui-scroll-view__nav-active {
|
|
301
301
|
visibility: visible;
|
|
302
302
|
}
|
|
303
303
|
|
|
@@ -330,7 +330,7 @@ export default {
|
|
|
330
330
|
}
|
|
331
331
|
}
|
|
332
332
|
|
|
333
|
-
&.scroll-
|
|
333
|
+
&.ui-scroll-view__nav-prev {
|
|
334
334
|
.menu-nav-control::before {
|
|
335
335
|
transform: rotate(-18deg);
|
|
336
336
|
}
|
|
@@ -340,7 +340,7 @@ export default {
|
|
|
340
340
|
}
|
|
341
341
|
}
|
|
342
342
|
|
|
343
|
-
&.scroll-
|
|
343
|
+
&.ui-scroll-view__nav-next {
|
|
344
344
|
.menu-nav-control::before {
|
|
345
345
|
transform: rotate(18deg);
|
|
346
346
|
}
|
|
@@ -350,7 +350,7 @@ export default {
|
|
|
350
350
|
}
|
|
351
351
|
}
|
|
352
352
|
|
|
353
|
-
&.scroll-
|
|
353
|
+
&.ui-scroll-view__nav-prev:hover {
|
|
354
354
|
.menu-nav-control::before {
|
|
355
355
|
transform: rotate(-30deg);
|
|
356
356
|
}
|
|
@@ -360,7 +360,7 @@ export default {
|
|
|
360
360
|
}
|
|
361
361
|
}
|
|
362
362
|
|
|
363
|
-
&.scroll-
|
|
363
|
+
&.ui-scroll-view__nav-next:hover {
|
|
364
364
|
.menu-nav-control::before {
|
|
365
365
|
transform: rotate(30deg);
|
|
366
366
|
}
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
</div>
|
|
21
21
|
</div>
|
|
22
22
|
</div>
|
|
23
|
-
<
|
|
23
|
+
<fill-view>
|
|
24
24
|
<el-table
|
|
25
25
|
ref="table"
|
|
26
26
|
height="100%"
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
<div class="ui-table-empty">暂无数据</div>
|
|
43
43
|
</template>
|
|
44
44
|
</el-table>
|
|
45
|
-
</
|
|
45
|
+
</fill-view>
|
|
46
46
|
<div v-show="hasPagination" class="footer-bar">
|
|
47
47
|
<slot name="footer-bar"/>
|
|
48
48
|
</div>
|
|
@@ -50,6 +50,7 @@
|
|
|
50
50
|
</div>
|
|
51
51
|
</template>
|
|
52
52
|
<script>
|
|
53
|
+
import FillView from '../fill-view/fill-view';
|
|
53
54
|
import ExportsMixin from '../exports/mixin';
|
|
54
55
|
import RemoteExportsDialog from '../exports/remote-exports-dialog';
|
|
55
56
|
|
|
@@ -595,12 +596,13 @@
|
|
|
595
596
|
// },
|
|
596
597
|
},
|
|
597
598
|
components: {
|
|
599
|
+
FillView,
|
|
598
600
|
RemoteExportsDialog,
|
|
599
601
|
Refresh: {
|
|
600
602
|
render(createElement) {
|
|
601
603
|
return createElement('el-tooltip', {props: {content: '刷新'}}, [
|
|
602
604
|
createElement('el-button', {
|
|
603
|
-
props: {icon: 'el-icon-
|
|
605
|
+
props: {icon: 'el-icon-refresh', size: 'mini', circle: true},
|
|
604
606
|
on: {click: this.$parent.reload},
|
|
605
607
|
}),
|
|
606
608
|
]);
|
|
@@ -610,7 +612,7 @@
|
|
|
610
612
|
render(createElement) {
|
|
611
613
|
return createElement('el-tooltip', {props: {content: '导出Excel'}}, [
|
|
612
614
|
createElement('el-button', {
|
|
613
|
-
props: {icon: 'el-icon-
|
|
615
|
+
props: {icon: 'el-icon-download', size: 'mini', circle: true},
|
|
614
616
|
on: {click: this.$parent.exportsRemote},
|
|
615
617
|
}),
|
|
616
618
|
]);
|
|
@@ -665,7 +667,7 @@
|
|
|
665
667
|
}
|
|
666
668
|
return createElement('el-tooltip', {props: {content: this.$parent.searchBarVisible ? '隐藏查询区域' : '显示查询区域'}}, [
|
|
667
669
|
createElement('el-button', {
|
|
668
|
-
props: {icon: 'el-icon-
|
|
670
|
+
props: {icon: 'el-icon-search', circle: true},
|
|
669
671
|
on: {click: this.$parent.toggleSearchBarVisible},
|
|
670
672
|
}),
|
|
671
673
|
]);
|
|
@@ -777,7 +779,7 @@
|
|
|
777
779
|
|
|
778
780
|
.ui-table-empty {
|
|
779
781
|
padding-top: 110px;
|
|
780
|
-
background: url("
|
|
782
|
+
background: url("../../assets/svg/empty.svg") center top no-repeat;
|
|
781
783
|
background-size: auto 100px;
|
|
782
784
|
color: rgba(0, 0, 0, 0.65);
|
|
783
785
|
font-size: 14px;
|