mali-applet-ui 1.1.89 → 1.1.91
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.
|
@@ -18,6 +18,11 @@ export default {
|
|
|
18
18
|
zIndex: [Number, String],
|
|
19
19
|
backgroundColor: String
|
|
20
20
|
},
|
|
21
|
+
data () {
|
|
22
|
+
return {
|
|
23
|
+
isActive: true
|
|
24
|
+
}
|
|
25
|
+
},
|
|
21
26
|
provide () {
|
|
22
27
|
return {
|
|
23
28
|
$pageFixedBottom: this
|
|
@@ -53,34 +58,38 @@ export default {
|
|
|
53
58
|
}
|
|
54
59
|
},
|
|
55
60
|
mounted () {
|
|
56
|
-
this.
|
|
61
|
+
this.isActive = true
|
|
62
|
+
this.startUpdateStyle()
|
|
57
63
|
},
|
|
58
64
|
beforeDestroy () {
|
|
65
|
+
clearTimeout(this.usTimeout)
|
|
66
|
+
this.isActive = false
|
|
59
67
|
if (this.layout && this.layout.setPaddingBottom) {
|
|
60
68
|
this.layout.setPaddingBottom('')
|
|
61
69
|
}
|
|
62
70
|
},
|
|
71
|
+
destroyed () {
|
|
72
|
+
this.isActive = false
|
|
73
|
+
},
|
|
63
74
|
methods: {
|
|
64
|
-
|
|
65
|
-
this
|
|
66
|
-
this.calculateStyle(
|
|
67
|
-
this.
|
|
68
|
-
|
|
69
|
-
this.calculateStyle(300)
|
|
70
|
-
this.calculateStyle(800)
|
|
71
|
-
this.calculateStyle(1500)
|
|
72
|
-
this.calculateStyle(4000)
|
|
73
|
-
})
|
|
75
|
+
startUpdateStyle () {
|
|
76
|
+
if (this.isActive) {
|
|
77
|
+
this.calculateStyle()
|
|
78
|
+
this.usTimeout = setTimeout(() => this.startUpdateStyle(), 1000)
|
|
79
|
+
}
|
|
74
80
|
},
|
|
75
|
-
|
|
81
|
+
updateStyle () {
|
|
76
82
|
setTimeout(() => {
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
83
|
+
this.calculateStyle()
|
|
84
|
+
}, 100)
|
|
85
|
+
},
|
|
86
|
+
calculateStyle () {
|
|
87
|
+
const query = uni.createSelectorQuery().in(this)
|
|
88
|
+
query.select('.ml-fixed-footer-warpper').boundingClientRect((data) => {
|
|
89
|
+
if (data && data.height && this.layout && this.layout.setPaddingBottom) {
|
|
90
|
+
this.layout.setPaddingBottom(`${data.height}px`)
|
|
91
|
+
}
|
|
92
|
+
}).exec()
|
|
84
93
|
}
|
|
85
94
|
}
|
|
86
95
|
}
|
|
@@ -16,6 +16,11 @@ export default {
|
|
|
16
16
|
},
|
|
17
17
|
backgroundColor: String
|
|
18
18
|
},
|
|
19
|
+
data () {
|
|
20
|
+
return {
|
|
21
|
+
isActive: true
|
|
22
|
+
}
|
|
23
|
+
},
|
|
19
24
|
provide () {
|
|
20
25
|
return {
|
|
21
26
|
$pageFixedTop: this
|
|
@@ -49,34 +54,38 @@ export default {
|
|
|
49
54
|
}
|
|
50
55
|
},
|
|
51
56
|
mounted () {
|
|
52
|
-
this.
|
|
57
|
+
this.isActive = true
|
|
58
|
+
this.startUpdateStyle()
|
|
53
59
|
},
|
|
54
60
|
beforeDestroy () {
|
|
61
|
+
clearTimeout(this.usTimeout)
|
|
62
|
+
this.isActive = false
|
|
55
63
|
if (this.layout && this.layout.setPaddingTop) {
|
|
56
64
|
this.layout.setPaddingTop('')
|
|
57
65
|
}
|
|
58
66
|
},
|
|
67
|
+
destroyed () {
|
|
68
|
+
this.isActive = false
|
|
69
|
+
},
|
|
59
70
|
methods: {
|
|
60
|
-
|
|
61
|
-
this
|
|
62
|
-
this.calculateStyle(
|
|
63
|
-
this.
|
|
64
|
-
|
|
65
|
-
this.calculateStyle(300)
|
|
66
|
-
this.calculateStyle(800)
|
|
67
|
-
this.calculateStyle(1500)
|
|
68
|
-
this.calculateStyle(4000)
|
|
69
|
-
})
|
|
71
|
+
startUpdateStyle () {
|
|
72
|
+
if (this.isActive) {
|
|
73
|
+
this.calculateStyle()
|
|
74
|
+
this.usTimeout = setTimeout(() => this.startUpdateStyle(), 1000)
|
|
75
|
+
}
|
|
70
76
|
},
|
|
71
|
-
|
|
77
|
+
updateStyle () {
|
|
72
78
|
setTimeout(() => {
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
79
|
+
this.calculateStyle()
|
|
80
|
+
}, 100)
|
|
81
|
+
},
|
|
82
|
+
calculateStyle () {
|
|
83
|
+
const query = uni.createSelectorQuery().in(this)
|
|
84
|
+
query.select('.ml-fixed-header-warpper').boundingClientRect((data) => {
|
|
85
|
+
if (data && data.height && this.layout && this.layout.setPaddingTop) {
|
|
86
|
+
this.layout.setPaddingTop(`${data.height}px`)
|
|
87
|
+
}
|
|
88
|
+
}).exec()
|
|
80
89
|
}
|
|
81
90
|
}
|
|
82
91
|
}
|
|
@@ -1,31 +1,33 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<view class="ml-upload" :class="[className || '', {'is-loading': loading}]">
|
|
3
3
|
<!-- 上传图片 -->
|
|
4
|
-
<view v-if="mediatype === 'image' || platformEnv.isDDMP" class="ml-upload-image-list">
|
|
5
|
-
<view class="ml-upload-image-
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
<ml-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
<template v-if="!isFromReadonly && !isLimit">
|
|
12
|
-
<view v-if="hasForm" class="ml-upload-image-form-add-btn" @tap="chooseEvent">
|
|
13
|
-
<ml-icon v-if="loading" name="loading" roll />
|
|
14
|
-
<ml-icon v-else name="add-circle" />
|
|
4
|
+
<view v-if="mediatype === 'image' || platformEnv.isDDMP" class="ml-upload-image-list-warpper">
|
|
5
|
+
<view class="ml-upload-image-list-body">
|
|
6
|
+
<view class="ml-upload-image-item" v-for="(item, index) in fileList" :key="index">
|
|
7
|
+
<image class="ml-upload-image-img" mode="aspectFill" :src="getThumbnailUrl(item)" @tap="previewImageEvent(item)"></image>
|
|
8
|
+
<view v-if="!isFromReadonly" class="ml-upload-image-del-btn" @tap="removeEvent(item)">
|
|
9
|
+
<ml-icon name="close" />
|
|
10
|
+
</view>
|
|
15
11
|
</view>
|
|
16
|
-
<
|
|
17
|
-
<view class="ml-upload-image-add-btn" @tap="chooseEvent">
|
|
18
|
-
<
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
12
|
+
<template v-if="!isFromReadonly && !isLimit">
|
|
13
|
+
<view v-if="hasForm" class="ml-upload-image-form-add-btn" @tap="chooseEvent">
|
|
14
|
+
<ml-icon v-if="loading" name="loading" roll />
|
|
15
|
+
<ml-icon v-else name="add-circle" />
|
|
16
|
+
</view>
|
|
17
|
+
<view v-else class="ml-upload-image-add">
|
|
18
|
+
<view class="ml-upload-image-add-btn" @tap="chooseEvent">
|
|
19
|
+
<view class="ml-upload-image-add-icon">
|
|
20
|
+
<ml-icon v-if="loading" name="loading" roll />
|
|
21
|
+
<ml-icon v-else name="add" />
|
|
22
|
+
<view v-if="loading" class="ml-upload-image-add-loading-text">上传中...</view>
|
|
23
|
+
</view>
|
|
22
24
|
</view>
|
|
23
25
|
</view>
|
|
24
|
-
</
|
|
25
|
-
</
|
|
26
|
+
</template>
|
|
27
|
+
</view>
|
|
26
28
|
</view>
|
|
27
29
|
<!-- 上传文件 -->
|
|
28
|
-
<view v-else class="ml-upload-file-list">
|
|
30
|
+
<view v-else class="ml-upload-file-list-warpper">
|
|
29
31
|
<template v-if="!isFromReadonly && !isLimit">
|
|
30
32
|
<view v-if="hasForm" class="ml-upload-file-form-add-btn" @tap="chooseEvent">
|
|
31
33
|
<ml-icon v-if="loading" name="loading" roll />
|
|
@@ -42,22 +44,55 @@
|
|
|
42
44
|
</view>
|
|
43
45
|
</view>
|
|
44
46
|
</template>
|
|
45
|
-
<view class="ml-upload-file-
|
|
46
|
-
<view class="ml-upload-
|
|
47
|
-
<view class="ml-upload-
|
|
48
|
-
<ml-
|
|
47
|
+
<view v-if="autoGroup" class="ml-upload-file-group-warpper">
|
|
48
|
+
<view class="ml-upload-image-list-body">
|
|
49
|
+
<view class="ml-upload-image-item" v-for="(item, index) in fileGroup.imgData" :key="index">
|
|
50
|
+
<image class="ml-upload-image-img" mode="aspectFill" :src="getThumbnailUrl(item)" @tap="previewImageEvent(item)"></image>
|
|
51
|
+
<view v-if="!isFromReadonly" class="ml-upload-image-del-btn" @tap="removeEvent(item)">
|
|
52
|
+
<ml-icon name="close" />
|
|
53
|
+
</view>
|
|
49
54
|
</view>
|
|
50
55
|
</view>
|
|
51
|
-
<view class="ml-upload-file-
|
|
52
|
-
<view class="ml-upload-file-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
+
<view class="ml-upload-file-list-body">
|
|
57
|
+
<view class="ml-upload-file-item" v-for="(item, index) in fileGroup.fileData" :key="index">
|
|
58
|
+
<view class="ml-upload-file-left">
|
|
59
|
+
<view class="ml-upload-file-icon">
|
|
60
|
+
<ml-icon :name="getFileIcon(item)" />
|
|
61
|
+
</view>
|
|
62
|
+
</view>
|
|
63
|
+
<view class="ml-upload-file-info">
|
|
64
|
+
<view class="ml-upload-file-name">{{ item[nameField] }}</view>
|
|
65
|
+
<view class="ml-upload-file-desc">
|
|
66
|
+
<ml-button v-if="preview && previewTypes.includes(item[typeField])" status="primary" type="text" size="small" @click="previewDocs(item)">预览</ml-button>
|
|
67
|
+
<ml-button status="primary" type="text" size="small" @click="downloadEvent(item)">下载</ml-button>
|
|
68
|
+
</view>
|
|
69
|
+
</view>
|
|
70
|
+
<view v-if="!isFromReadonly" class="ml-upload-file-right">
|
|
71
|
+
<view class="ml-upload-file-del-btn" @tap="removeEvent(item)">
|
|
72
|
+
<ml-icon name="close" />
|
|
73
|
+
</view>
|
|
74
|
+
</view>
|
|
56
75
|
</view>
|
|
57
76
|
</view>
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
77
|
+
</view>
|
|
78
|
+
<view v-else class="ml-upload-file-list-body">
|
|
79
|
+
<view class="ml-upload-file-item" v-for="(item, index) in fileList" :key="index">
|
|
80
|
+
<view class="ml-upload-file-left">
|
|
81
|
+
<view class="ml-upload-file-icon">
|
|
82
|
+
<ml-icon :name="getFileIcon(item)" />
|
|
83
|
+
</view>
|
|
84
|
+
</view>
|
|
85
|
+
<view class="ml-upload-file-info">
|
|
86
|
+
<view class="ml-upload-file-name">{{ item[nameField] }}</view>
|
|
87
|
+
<view class="ml-upload-file-desc">
|
|
88
|
+
<ml-button v-if="preview && previewTypes.includes(item[typeField])" status="primary" type="text" size="small" @click="previewDocs(item)">预览</ml-button>
|
|
89
|
+
<ml-button status="primary" type="text" size="small" @click="downloadEvent(item)">下载</ml-button>
|
|
90
|
+
</view>
|
|
91
|
+
</view>
|
|
92
|
+
<view v-if="!isFromReadonly" class="ml-upload-file-right">
|
|
93
|
+
<view class="ml-upload-file-del-btn" @tap="removeEvent(item)">
|
|
94
|
+
<ml-icon name="close" />
|
|
95
|
+
</view>
|
|
61
96
|
</view>
|
|
62
97
|
</view>
|
|
63
98
|
</view>
|
|
@@ -68,6 +103,7 @@
|
|
|
68
103
|
<script>
|
|
69
104
|
import globalStore from '../../../config/store'
|
|
70
105
|
import MaliUtils from '../../../utils'
|
|
106
|
+
import MaliLoading from '../../../modal/loading'
|
|
71
107
|
import XEUtils from 'xe-utils'
|
|
72
108
|
|
|
73
109
|
function normalizeChooseAndUploadFileRes (res, fileType) {
|
|
@@ -195,6 +231,10 @@ export default {
|
|
|
195
231
|
default: 'all'
|
|
196
232
|
},
|
|
197
233
|
uploadButtonText: String,
|
|
234
|
+
autoGroup: {
|
|
235
|
+
type: Boolean,
|
|
236
|
+
default: false
|
|
237
|
+
},
|
|
198
238
|
params: {
|
|
199
239
|
type: Object,
|
|
200
240
|
default: () => ({})
|
|
@@ -234,11 +274,26 @@ export default {
|
|
|
234
274
|
loading: false,
|
|
235
275
|
fileList: [],
|
|
236
276
|
docsTypes: ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx'],
|
|
237
|
-
imgTypes: ['
|
|
277
|
+
imgTypes: ['jpg', 'jpeg', 'png', 'gif'],
|
|
238
278
|
platformEnv: MaliUtils.getPlatformEnv()
|
|
239
279
|
}
|
|
240
280
|
},
|
|
241
281
|
computed: {
|
|
282
|
+
fileTypes () {
|
|
283
|
+
if (this.types && this.types.length) {
|
|
284
|
+
return this.types
|
|
285
|
+
}
|
|
286
|
+
if (this.mediatype === 'image') {
|
|
287
|
+
return this.imgTypes
|
|
288
|
+
}
|
|
289
|
+
return []
|
|
290
|
+
},
|
|
291
|
+
fileGroup () {
|
|
292
|
+
return {
|
|
293
|
+
imgData: this.fileList ? this.fileList.filter(item => this.hasImageType(item)) : [],
|
|
294
|
+
fileData: this.fileList ? this.fileList.filter(item => !this.hasImageType(item)) : []
|
|
295
|
+
}
|
|
296
|
+
},
|
|
242
297
|
hasForm () {
|
|
243
298
|
return !!this.form
|
|
244
299
|
},
|
|
@@ -346,6 +401,9 @@ export default {
|
|
|
346
401
|
this.$emit('input', value)
|
|
347
402
|
this.$emit('change', { value })
|
|
348
403
|
},
|
|
404
|
+
hasImageType (item) {
|
|
405
|
+
return this.imgTypes.includes(XEUtils.toValueString(item[this.typeField]).toLowerCase())
|
|
406
|
+
},
|
|
349
407
|
removeEvent (item) {
|
|
350
408
|
this.fileList = this.fileList.filter(obj => obj.tempPath !== item.tempPath)
|
|
351
409
|
const removeMethod = this.removeFile ? this.removeFile : (globalStore.upload ? globalStore.upload.removeFile : null)
|
|
@@ -383,7 +441,7 @@ export default {
|
|
|
383
441
|
}
|
|
384
442
|
return item[this.urlField]
|
|
385
443
|
},
|
|
386
|
-
previewImageEvent (item
|
|
444
|
+
previewImageEvent (item) {
|
|
387
445
|
if (!this.preview) {
|
|
388
446
|
return
|
|
389
447
|
}
|
|
@@ -391,8 +449,10 @@ export default {
|
|
|
391
449
|
return
|
|
392
450
|
}
|
|
393
451
|
this.previewStatus = true
|
|
452
|
+
const index = XEUtils.findIndexOf(this.imageList, obj => obj[this.urlField] === item[this.urlField])
|
|
453
|
+
MaliLoading.show()
|
|
394
454
|
Promise.all(
|
|
395
|
-
this.
|
|
455
|
+
this.imageList.map(fileItem => {
|
|
396
456
|
return new Promise((resolve) => {
|
|
397
457
|
uni.downloadFile({
|
|
398
458
|
url: this.getUrl(fileItem),
|
|
@@ -410,11 +470,14 @@ export default {
|
|
|
410
470
|
})
|
|
411
471
|
})
|
|
412
472
|
).then(res => {
|
|
473
|
+
MaliLoading.hide()
|
|
413
474
|
uni.previewImage({
|
|
414
475
|
current: index,
|
|
415
476
|
urls: res.map(item => item.url)
|
|
416
477
|
})
|
|
417
478
|
this.previewStatus = false
|
|
479
|
+
}).catch(() => {
|
|
480
|
+
MaliLoading.hide()
|
|
418
481
|
})
|
|
419
482
|
},
|
|
420
483
|
previewImg (item) {
|
|
@@ -584,7 +647,7 @@ export default {
|
|
|
584
647
|
</script>
|
|
585
648
|
|
|
586
649
|
<style lang="scss">
|
|
587
|
-
.ml-upload-image-list {
|
|
650
|
+
.ml-upload-image-list-body {
|
|
588
651
|
position: relative;
|
|
589
652
|
display: flex;
|
|
590
653
|
flex-direction: row;
|
|
@@ -639,8 +702,12 @@ export default {
|
|
|
639
702
|
border-radius: $ml-border-radius;
|
|
640
703
|
}
|
|
641
704
|
}
|
|
642
|
-
.ml-upload-file-list {
|
|
643
|
-
|
|
705
|
+
.ml-upload-file-list-warpper {
|
|
706
|
+
.ml-upload-file-list-body {
|
|
707
|
+
position: relative;
|
|
708
|
+
max-height: 450rpx;
|
|
709
|
+
overflow: auto;
|
|
710
|
+
}
|
|
644
711
|
.ml-upload-file-add,
|
|
645
712
|
.ml-upload-file-item {
|
|
646
713
|
margin: 10rpx 0;
|