mali-applet-ui 1.0.97 → 1.0.99
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.
|
@@ -226,7 +226,7 @@ export default {
|
|
|
226
226
|
}
|
|
227
227
|
labels.forEach(val => {
|
|
228
228
|
const item = this.itemList.find(item => item.value === val)
|
|
229
|
-
if (item
|
|
229
|
+
if (item) {
|
|
230
230
|
if (checked) {
|
|
231
231
|
if (!this.selection.includes(val)) {
|
|
232
232
|
this.selection.push(val)
|
|
@@ -122,7 +122,7 @@ export default {
|
|
|
122
122
|
}
|
|
123
123
|
labels.forEach(val => {
|
|
124
124
|
const item = this.itemList.find(item => item.value === val)
|
|
125
|
-
if (item
|
|
125
|
+
if (item) {
|
|
126
126
|
if (checked) {
|
|
127
127
|
if (!this.selection.includes(val)) {
|
|
128
128
|
this.selection.push(val)
|
|
@@ -14,54 +14,72 @@
|
|
|
14
14
|
</view>
|
|
15
15
|
</scroll-view>
|
|
16
16
|
</view>
|
|
17
|
-
<
|
|
18
|
-
<view class="ml-tree-
|
|
19
|
-
<view class="ml-tree-
|
|
20
|
-
<view class="ml-tree-
|
|
21
|
-
<
|
|
22
|
-
|
|
17
|
+
<view class="ml-tree-container" :style="{ height: useContainerHeight }">
|
|
18
|
+
<scroll-view :scroll-y="true" class="ml-tree-scroll">
|
|
19
|
+
<view class="ml-tree-content">
|
|
20
|
+
<view class="ml-tree-node" v-if="cache && cache.length" @click="handleBack">
|
|
21
|
+
<view class="ml-tree-node__title back">
|
|
22
|
+
<ml-icon name="direction-left"></ml-icon>
|
|
23
|
+
<text class="ml-tree-node__text">返回</text>
|
|
24
|
+
</view>
|
|
23
25
|
</view>
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
26
|
+
<template v-if="showTree && showTree.length">
|
|
27
|
+
<view class="ml-tree-node" v-for="(item, index) in showTree" :key="index" @tap="handleClickEvent(item)">
|
|
28
|
+
<view class="ml-tree-node__action" v-if="check">
|
|
29
|
+
<ml-checkbox
|
|
30
|
+
:value="checkKey.indexOf(item[useProps.key]) > -1"
|
|
31
|
+
:indeterminate="indeterminate.indexOf(item[useProps.key]) > -1"
|
|
32
|
+
v-if="multiple"
|
|
33
|
+
@tap.stop
|
|
34
|
+
@change="handleChangeCheckbox(item)"></ml-checkbox>
|
|
35
|
+
<ml-radio
|
|
36
|
+
@tap.stop
|
|
37
|
+
:value="checkIndex"
|
|
38
|
+
:label="item[useProps.key]"
|
|
39
|
+
v-else
|
|
40
|
+
@change="handleChangeRadio"></ml-radio>
|
|
41
|
+
</view>
|
|
42
|
+
<MlTreeIcon
|
|
43
|
+
:margin-right="15"
|
|
44
|
+
@tap-icon.stop="handleClickIcon($event, item)"
|
|
45
|
+
:info="getPrefixIcon(item)"
|
|
46
|
+
/>
|
|
47
|
+
<view class="ml-tree-node__title">
|
|
48
|
+
<view class="nowrap">{{ item[useProps.label] || '' }}</view>
|
|
49
|
+
<view class="ml-tree-node__explain" v-if="item[useProps.explain]">{{ item[useProps.explain] }}</view>
|
|
50
|
+
</view>
|
|
51
|
+
<view class="ml-tree-node__extra">
|
|
52
|
+
<MlTreeIcon
|
|
53
|
+
:margin-right="15"
|
|
54
|
+
@tap-icon.stop="handleClickIcon($event, item)"
|
|
55
|
+
:info="getSuffixIcon(item)"
|
|
56
|
+
/>
|
|
57
|
+
<MlTreeIcon
|
|
58
|
+
:margin-right="15"
|
|
59
|
+
@tap-icon.stop="handleIntoChildren(item)"
|
|
60
|
+
v-if="(item.children && item.children.length) || (lazy && !item.isLeaf)"
|
|
61
|
+
:info="{ icon: 'arrow-right' }"
|
|
62
|
+
/>
|
|
63
|
+
</view>
|
|
64
|
+
</view>
|
|
65
|
+
</template>
|
|
66
|
+
<template v-else>
|
|
67
|
+
<view class="ml-tree-node" v-if="loading">
|
|
68
|
+
<view class="ml-tree-loading-tip">
|
|
69
|
+
<ml-icon name="loading" roll />
|
|
70
|
+
<text class="ml-tree-loading-text">加载中</text>
|
|
71
|
+
</view>
|
|
72
|
+
</view>
|
|
73
|
+
<ml-not-data
|
|
37
74
|
v-else
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
:info="getPrefixIcon(item)"
|
|
44
|
-
/>
|
|
45
|
-
<view class="ml-tree-node__title">
|
|
46
|
-
<view class="nowrap">{{ item[useProps.label] || '' }}</view>
|
|
47
|
-
<view class="ml-tree-node__explain" v-if="item[useProps.explain]">{{ item[useProps.explain] }}</view>
|
|
48
|
-
</view>
|
|
49
|
-
<view class="ml-tree-node__extra">
|
|
50
|
-
<MlTreeIcon
|
|
51
|
-
:margin-right="15"
|
|
52
|
-
@tap-icon.stop="handleClickIcon($event, item)"
|
|
53
|
-
:info="getSuffixIcon(item)"
|
|
54
|
-
/>
|
|
55
|
-
<MlTreeIcon
|
|
56
|
-
:margin-right="15"
|
|
57
|
-
@tap-icon.stop="handleIntoChildren(item)"
|
|
58
|
-
v-if="(item.children && item.children.length) || (lazy && !item.isLeaf)"
|
|
59
|
-
:info="{ icon: 'arrow-right' }"
|
|
60
|
-
/>
|
|
61
|
-
</view>
|
|
75
|
+
:emptyUrl="useEmpty.emptyUrl"
|
|
76
|
+
:emptyText="useEmpty.emptyText"
|
|
77
|
+
:emptyHint="useEmpty.emptyHint"
|
|
78
|
+
></ml-not-data>
|
|
79
|
+
</template>
|
|
62
80
|
</view>
|
|
63
|
-
</view>
|
|
64
|
-
</
|
|
81
|
+
</scroll-view>
|
|
82
|
+
</view>
|
|
65
83
|
</view>
|
|
66
84
|
</template>
|
|
67
85
|
|
|
@@ -90,6 +108,10 @@ export default {
|
|
|
90
108
|
type: Object,
|
|
91
109
|
default: () => ({})
|
|
92
110
|
},
|
|
111
|
+
empty: {
|
|
112
|
+
type: Object,
|
|
113
|
+
default: () => ({})
|
|
114
|
+
},
|
|
93
115
|
tree: {
|
|
94
116
|
type: Array,
|
|
95
117
|
default: () => []
|
|
@@ -111,6 +133,7 @@ export default {
|
|
|
111
133
|
return {
|
|
112
134
|
cache: [],
|
|
113
135
|
checkIndex: 0,
|
|
136
|
+
loading: true,
|
|
114
137
|
checkKey: [],
|
|
115
138
|
indeterminate: [],
|
|
116
139
|
defaultProps: {
|
|
@@ -120,6 +143,11 @@ export default {
|
|
|
120
143
|
explain: 'explain',
|
|
121
144
|
user: 'user',
|
|
122
145
|
isLeaf: 'isLeaf'
|
|
146
|
+
},
|
|
147
|
+
defaultEmpty: {
|
|
148
|
+
emptyUrl: '',
|
|
149
|
+
emptyText: '',
|
|
150
|
+
emptyHint: ''
|
|
123
151
|
}
|
|
124
152
|
}
|
|
125
153
|
},
|
|
@@ -132,6 +160,7 @@ export default {
|
|
|
132
160
|
computed: {
|
|
133
161
|
showTree () {
|
|
134
162
|
const { current, tree } = this
|
|
163
|
+
console.log(current)
|
|
135
164
|
if (current) {
|
|
136
165
|
return current.children
|
|
137
166
|
}
|
|
@@ -147,6 +176,9 @@ export default {
|
|
|
147
176
|
useProps () {
|
|
148
177
|
return { ...this.defaultProps, ...this.props }
|
|
149
178
|
},
|
|
179
|
+
useEmpty () {
|
|
180
|
+
return { ...this.defaultEmpty, ...this.empty }
|
|
181
|
+
},
|
|
150
182
|
useContainerHeight () {
|
|
151
183
|
const { breadcrumb, useHeight: height } = this
|
|
152
184
|
const h = height.indexOf('px') > -1 || height.indexOf('%') > -1 ? height : `${height}rpx`
|
|
@@ -171,15 +203,20 @@ export default {
|
|
|
171
203
|
},
|
|
172
204
|
methods: {
|
|
173
205
|
async handleIntoChildren (item) {
|
|
174
|
-
const { requestLazy } = this
|
|
175
|
-
if (!(item.children && item.children.length) && !item.isLeaf) {
|
|
206
|
+
const { requestLazy, lazy } = this
|
|
207
|
+
if (lazy && !(item.children && item.children.length) && !item.isLeaf) {
|
|
208
|
+
item.children = []
|
|
209
|
+
this.cache.push(item)
|
|
210
|
+
this.$emit('into', item)
|
|
176
211
|
// this.lazyLoading = true
|
|
177
212
|
await requestLazy(item)
|
|
178
213
|
// this.lazyLoading = false
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
214
|
+
this.cache.splice(this.cache.length - 1, 1, item)
|
|
215
|
+
} else {
|
|
216
|
+
if (item.children && item.children.length) {
|
|
217
|
+
this.cache.push(item)
|
|
218
|
+
this.$emit('into', this.cache[this.cache.length - 1])
|
|
219
|
+
}
|
|
183
220
|
}
|
|
184
221
|
},
|
|
185
222
|
reloadLazy () {
|
|
@@ -189,7 +226,9 @@ export default {
|
|
|
189
226
|
async requestLazy (current) {
|
|
190
227
|
const { lazyLoad, lazy, useProps } = this
|
|
191
228
|
if (lazy && lazyLoad) {
|
|
229
|
+
this.loading = true
|
|
192
230
|
const list = await lazyLoad.call(this.currVM, current)
|
|
231
|
+
this.loading = false
|
|
193
232
|
if (current) {
|
|
194
233
|
current[useProps.children] = list
|
|
195
234
|
} else {
|
|
@@ -391,47 +430,67 @@ export default {
|
|
|
391
430
|
.ml-tree-box {
|
|
392
431
|
background-color: #ffffff;
|
|
393
432
|
.ml-tree-container {
|
|
394
|
-
|
|
395
|
-
|
|
433
|
+
position: relative;
|
|
434
|
+
overflow: hidden;
|
|
435
|
+
.ml-tree-scroll {
|
|
436
|
+
height: 100%;
|
|
437
|
+
z-index: 2;
|
|
438
|
+
.ml-tree-content {
|
|
439
|
+
padding: 0 30rpx;
|
|
396
440
|
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
441
|
+
.ml-tree-node {
|
|
442
|
+
font-size: 34rpx;
|
|
443
|
+
display: flex;
|
|
444
|
+
align-items: center;
|
|
445
|
+
height: 116rpx;
|
|
446
|
+
border-bottom: 1rpx solid #efefef;
|
|
403
447
|
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
448
|
+
.ml-tree-node__title {
|
|
449
|
+
flex: 1;
|
|
450
|
+
width: 0;
|
|
451
|
+
.nowrap {
|
|
452
|
+
white-space: nowrap;
|
|
453
|
+
overflow: hidden;
|
|
454
|
+
text-overflow: ellipsis;
|
|
455
|
+
}
|
|
412
456
|
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
457
|
+
&.back {
|
|
458
|
+
color: #6e6e6e;
|
|
459
|
+
font-size: 26rpx;
|
|
460
|
+
}
|
|
417
461
|
|
|
418
|
-
|
|
419
|
-
|
|
462
|
+
.ml-tree-node__text {
|
|
463
|
+
margin: 0 10rpx;
|
|
464
|
+
}
|
|
465
|
+
.ml-tree-node__explain {
|
|
466
|
+
color: #989898;
|
|
467
|
+
font-size: 26rpx;
|
|
468
|
+
}
|
|
420
469
|
}
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
470
|
+
|
|
471
|
+
.ml-tree-node__extra {
|
|
472
|
+
display: flex;
|
|
473
|
+
align-items: center;
|
|
474
|
+
padding: 0 0 0 20rpx;
|
|
424
475
|
}
|
|
425
|
-
}
|
|
426
476
|
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
padding: 0 0 0 20rpx;
|
|
431
|
-
}
|
|
477
|
+
&:last-child {
|
|
478
|
+
border-bottom: none;
|
|
479
|
+
}
|
|
432
480
|
|
|
433
|
-
|
|
434
|
-
|
|
481
|
+
.ml-tree-loading-tip {
|
|
482
|
+
flex: 1;
|
|
483
|
+
text-align: center;
|
|
484
|
+
vertical-align: middle;
|
|
485
|
+
display: flex;
|
|
486
|
+
align-items: center;
|
|
487
|
+
justify-content: center;
|
|
488
|
+
.ml-tree-loading-text {
|
|
489
|
+
font-size: 26rpx;
|
|
490
|
+
color: #8a8686;
|
|
491
|
+
margin-left: 15rpx;
|
|
492
|
+
}
|
|
493
|
+
}
|
|
435
494
|
}
|
|
436
495
|
}
|
|
437
496
|
}
|