mali-applet-ui 0.2.71 → 0.2.72

package/components/ml-upload/ml-upload.vue

@@ -1,33 +1,58 @@
 <template>
 	<view class="ml-upload" :class="[className || '']">
-		<view v-if="isFromReadonly">
-			<view v-if="mediatype === 'image'" class="ml-upload-image-list">
-				<view class="ml-upload-file-item" v-for="(item, index) in value" :key="index">
-					<image class="ml-upload-file-img" mode="aspectFill" :src="getUrl(item)" @click="previewEvent(item, index)"></image>
+		<!-- 上传图片 -->
+		<view v-if="mediatype === 'image'" class="ml-upload-image-list">
+			<view class="ml-upload-image-item" v-for="(item, index) in fileList" :key="index">
+				<image class="ml-upload-image-img" mode="aspectFit" :src="getUrl(item)" @click="previewImageEvent(item, index)"></image>
+				<view class="ml-upload-image-del-btn" @click="removeEvent(item)">
+					<ml-icon name="close" />
 				</view>
 			</view>
-			<view v-else class="ml-upload-file-list">
-				<view class="ml-upload-file-item" v-for="(item, index) in value" :key="index">
-					<view class="ml-upload-file-name" @click="downloadEvent(item)">{{ item[nameField] }}</view>
+			<view v-if="!isFromReadonly" class="ml-upload-image-add">
+				<view class="ml-upload-image-add-btn" @tap="chooseEvent">
+					<view class="ml-upload-image-add-icon">
+						<ml-icon name="add" />
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 上传文件 -->
+		<view v-else class="ml-upload-file-list">
+			<view v-if="!isFromReadonly" class="ml-upload-file-add">
+				<view class="ml-upload-file-add-btn" @tap="chooseEvent">
+					<text class="ml-upload-file-add-icon">
+						<ml-icon name="add" />
+					</text>
+					<text>添加文件</text>
+				</view>
+			</view>
+			<view class="ml-upload-file-item" v-for="(item, index) in fileList" :key="index">
+				<view class="ml-upload-file-left">
+					<view class="ml-upload-file-icon">
+						<ml-icon :name="getFileIcon(item)" />
+					</view>
+				</view>
+				<view class="ml-upload-file-info">
+					<view class="ml-upload-file-name">{{ item[nameField] }}</view>
+					<view class="ml-upload-file-desc">
+						<ml-button v-if="docsTypes.includes(item[typeField])" status="primary" type="text" @click="previewDocs(item)">预览</ml-button>
+						<ml-button status="primary" type="text" @click="downloadEvent(item)">下载</ml-button>
+					</view>
+				</view>
+				<view class="ml-upload-file-right">
+					<view class="ml-upload-file-del-btn" @click="removeEvent(item)">
+						<ml-icon name="close" />
+					</view>
 				</view>
 			</view>
 		</view>
-		<uni-file-picker
-			v-else
-			v-model="selectUniFileList" 
-			:limit="limit"
-			file-mediatype="image"
-			:image-styles="imageStyles"
-			:auto-upload="false"
-			@select="selectFile"
-			@delete="removeEvent">
-		</uni-file-picker>
 	</view>
 </template>
 
 <script>
 import XEUtils from 'xe-utils'
 import globalStore from '../../config/store'
+import { uploadAllFiles, uploadImageFiles } from './file-handle'
 	
 export default {
   name: 'MlUpload',
@@ -82,16 +107,7 @@ export default {
 	data () {
 		return {
 			fileList: [],
-			selectUniFileList: [],
-			imageStyles: {
-				// "height": 60,	// 边框高度
-				// "width": 60,	// 边框宽度
-				// "border":{ // 如果为 Boolean 值，可以控制边框显示与否
-				// 	"color":"transparent",		// 边框颜色
-				// 	"width":"1px",		// 边框宽度
-				// 	"style":"solid", 	// 边框样式
-				// }
-			},
+			docsTypes: ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx'],
 			imgTypes: ['png', 'jpg']
 		}
 	},
@@ -119,7 +135,7 @@ export default {
     }
 	},
 	watch: {
-		value (val) {
+		value () {
 			if (!this.isUpdate) {
 				this.isUpdate = true
 				this.loadList()
@@ -133,6 +149,25 @@ export default {
 		this.loadList()
 	},
 	methods: {
+		getFileIcon (item) {
+			switch (item[[this.typeField]]) {
+				case 'png':
+				case 'jpg':
+					return 'file-image'
+				case 'doc':
+				case 'docx':
+					return 'file-word'
+				case 'xls':
+				case 'xlsx':
+					return 'file-excel'
+				case 'ppt':
+				case 'pptx':
+					return 'file-ppt'
+				case 'pdf':
+					return 'file-pdf'
+			}
+			return 'file-txt'
+		},
 		loadList () {
 			if (this.simpleValue) {
 				this.fileList = this.urlList.map(url => {
@@ -151,21 +186,6 @@ export default {
 						tempPath: this.getUrl(obj)
 					}
 				})
-				this.selectUniFileList = this.urlList.map(url => {
-          const name = this.getUrlName(url)
-					const extname = this.getSuffix(name)
-					const obj = {
-						[this.nameField]: name,
-						[this.typeField]: extname,
-						[this.urlField]: url
-					}
-					return {
-						...obj,
-						name: name,
-						extname: extname,
-						url: this.getUrl(obj)
-					}
-				})
 				this.isUpdate = true
 				this.$emit('input', this.fileList)
 			} else {
@@ -173,14 +193,6 @@ export default {
 					item.tempPath = this.getUrl(item)
 					return item
 				})
-				this.selectUniFileList = this.value.map(item => {
-					return {
-						...item,
-						name: item[this.nameField],
-						extname: item[this.typeField],
-						url: this.getUrl(item)
-					}
-				})
 			}
 		},
 		updateModel () {
@@ -189,61 +201,8 @@ export default {
 		  this.$emit('input', this.fileList)
 			this.$emit('change', { value: this.simpleValue ? urlList : this.fileList })
 		},
-		async selectFile (e) {
-			const { tempFiles } = e
-			if (this.$loading) {
-				this.$loading.show('上传中')
-			}
-			const uploadMethod = this.uploadFile ? this.uploadFile : (globalStore.upload ? globalStore.upload.uploadFile : null)
-			Promise.all(
-				tempFiles.map(file => {
-      		const fileSuffix = this.getSuffix(file.name)
-					if (uploadMethod) {
-						return Promise.resolve(
-							uploadMethod.call(this.currVM, {
-								file,
-								params: this.params
-							})
-						).then(res => {
-							const item = {
-								...res,
-								[this.nameField]: res[this.nameField] || file.name,
-								[this.typeField]: res[this.typeField] || fileSuffix,
-								tempPath: file.path
-							}
-							this.selectUniFileList.push(file)
-							this.fileList.push(item)
-							this.isUpdate = true
-							this.updateModel()
-						})
-					} else {
-						const item = {
-							[this.nameField]: file.name,
-							[this.typeField]: file.extname,
-							[this.urlField]: file.path,
-							tempPath: file.path
-						}
-						this.selectUniFileList.push(file)
-						this.fileList.push(item)
-						this.isUpdate = true
-						this.updateModel()
-					}
-				})
-			).then(res => {
-				if (this.$loading) {
-					this.$loading.hide()
-				}
-			}).catch((e) => {
-				if (this.$loading) {
-					this.$loading.hide()
-				}
-			})
-		},
-		removeEvent (e) {
-			const { tempFilePath } = e
-			const item = this.fileList.find(item => item.tempPath === tempFilePath)
-			this.selectUniFileList = this.selectUniFileList.filter(item => item.url !== tempFilePath)
-			this.fileList = this.fileList.filter(item => item.tempPath !== tempFilePath)
+		removeEvent (item) {
+			this.fileList = this.fileList.filter(obj => obj.tempPath !== item.tempPath)
 			const removeMethod = this.removeFile ? this.removeFile : (globalStore.upload ? globalStore.upload.removeFile : null)
 			if (!item) {
 				console.error('删除出错！！！')
@@ -281,7 +240,7 @@ export default {
 		  }
 		  return suffix
 		},
-		previewEvent (item, index) {
+		previewImageEvent (item, index) {
 			if (this.previewStatus) {
 				return
 			}
@@ -327,40 +286,54 @@ export default {
 				}
 			})
 		},
+		previewDocs (item) {
+			// 仅支持文档和图片
+			const supportDocs = this.docsTypes.includes(item[this.typeField])
+			const supportImg = this.imgTypes.includes(item[this.typeField])
+			if (supportDocs || supportImg) {
+				uni.downloadFile({
+					url: this.getUrl(item), 
+					success: (downRes) => {
+						if (supportDocs) {
+							uni.openDocument({
+								filePath: downRes.tempFilePath,
+								showMenu: true,
+								success () {},
+								fail () {
+									uni.showModal({
+										content: '打开失败',
+										showCancel: false
+									})
+								}
+							})
+						} else if (supportImg) {
+							this.previewImg(item)
+						}
+					},
+					fail () {
+						uni.showModal({
+							content: '下载失败',
+							showCancel: false
+						})
+					}
+				})
+			}
+		},
 		downloadEvent (item) {
 			uni.downloadFile({
 				url: this.getUrl(item), 
 				success: (downRes) => {
-					// 仅支持类型
-					if (['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx'].includes(item[this.typeField])) {
-						uni.openDocument({
-							filePath: downRes.tempFilePath,
-							showMenu: true,
-							success (saveRes) {
-							},
-							fail () {
-								uni.showModal({
-									content: '打开失败',
-									showCancel: false
-								});
-							}
-						})
-					} else if (['png', 'jpg'].includes(item[this.typeField])) {
-						this.previewImg(item)
-					} else {
-						uni.saveFile({
-							tempFilePath: downRes.tempFilePath,
-							success: function(res) {
-								uni.showToast({
-									icon: 'none',
-									mask: true,
-									title: '文件已保存：' + res.savedFilePath, //保存路径
-									duration: 3000,
-								})
-							}
-						})
-
-					}
+					uni.saveFile({
+						tempFilePath: downRes.tempFilePath,
+						success: function(res) {
+							uni.showToast({
+								icon: 'none',
+								mask: true,
+								title: '文件已保存：' + res.savedFilePath, //保存路径
+								duration: 3000,
+							})
+						}
+					})
 				},
 				fail () {
 					uni.showModal({
@@ -369,6 +342,50 @@ export default {
 					});
 				}
 			})
+		},
+		chooseEvent () {
+			let chooseMethod = uploadAllFiles
+			if (this.mediatype === 'image') {
+				chooseMethod = uploadImageFiles
+			}
+			const uploadMethod = this.uploadFile ? this.uploadFile : (globalStore.upload ? globalStore.upload.uploadFile : null)
+			chooseMethod({
+				count: this.limit
+			}).then(res => {
+				const { tempFiles } = res
+				Promise.all(
+					tempFiles.map(file => {
+						const fileSuffix = this.getSuffix(file.name)
+						if (uploadMethod) {
+							return Promise.resolve(
+								uploadMethod.call(this.currVM, {
+									file,
+									params: this.params
+								})
+							).then(res => {
+								return {
+									...res,
+									[this.nameField]: res[this.nameField] || file.name,
+									[this.typeField]: res[this.typeField] || fileSuffix,
+									tempPath: file.path
+								}
+							})
+						}
+						return {
+							[this.nameField]: file.name,
+							[this.typeField]: file.extname,
+							[this.urlField]: file.path,
+							tempPath: file.path
+						}
+					})
+				).then(list => {
+					this.fileList.push(...list)
+					this.isUpdate = true
+					this.updateModel()
+				}).catch((e) => {
+					console.log(e)
+				})
+			})
 		}
 	}
 }
@@ -380,31 +397,105 @@ export default {
 	background: #fff;
 }
 .ml-upload-image-list {
-	.ml-upload-file-item {
-		display: inline-block;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	.ml-upload-image-item,
+	.ml-upload-image-add {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		position: relative;
 		width: 140rpx;
 		height: 140rpx;
-		padding: 0 10rpx;
+		text-align: center;
 	}
-	.ml-upload-file-img {
-		width: 100%;
-		height: 100%;
+	.ml-upload-image-del-btn {
+		position: absolute;
+		right: 0;
+		top: 0;
+		width: 40rpx;
+		height: 40rpx;
+		line-height: 40rpx;
+		font-size: 28rpx;
+		text-align: center;
+		border-radius: 50%;
+		color: #ffffff;
+		background: #c8c8c9;
+	}
+	.ml-upload-image-add-btn {
+		width: 120rpx;
+		height: 120rpx;
+		line-height: 120rpx;
+		font-size: 60rpx;
+		color: #c8c8c9;
+		border: 1px dashed #c8c8c9;
+		border-radius: $ml-border-radius;
+	}
+	.ml-upload-image-img {
+		width: 120rpx;
+		height: 120rpx;
+		line-height: 120rpx;
+		border-radius: $ml-border-radius;
 	}
 }
 .ml-upload-file-list {
-	display: block;
+	.ml-upload-file-add,
 	.ml-upload-file-item {
-		border: 1rpx solid rgba(39, 42, 48, 0.0200);
-		background-color: rgba(39, 42, 48, 0.0200);
-		margin: 10rpx 0;
+		margin: 20rpx 0;
+	}
+	.ml-upload-file-item {
+		display: flex;
+		flex-direction: row;
+	}
+	.ml-upload-file-item {
+		padding-bottom: 10rpx;
+		border-bottom: 1px solid #f1f1f1;
+	}
+	.ml-upload-file-left,
+	.ml-upload-file-right {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+	}
+	.ml-upload-file-add-btn {
+		height: 70rpx;
+		line-height: 70rpx;
+		text-align: center;
+		color: #8a8686;
+		border: 1px dashed #c8c8c9;
 		border-radius: $ml-border-radius;
-    padding: 20rpx;
 	}
-	.ml-upload-file-name {
-		width: 600rpx;
+	.ml-upload-file-del-btn {
+		width: 40rpx;
+		height: 40rpx;
+		line-height: 40rpx;
+		text-align: center;
+		font-size: 28rpx;
+		color: #ffffff;
+		background: #c8c8c9;
+		border-radius: 50%;
+	}
+	.ml-upload-file-left {
+		width: 80rpx;
+	}
+	.ml-upload-file-icon {
+		font-size: 60rpx;
+		color: #666666;
+	}
+	.ml-upload-file-info {
+		flex-grow: 1;
 		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
+		.ml-upload-file-name {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+	.ml-upload-file-right {
+		width: 60rpx;
 	}
 }
 </style>

package/components/ml-upload222/ml-upload.vue

@@ -0,0 +1,410 @@
+<template>
+	<view class="ml-upload" :class="[className || '']">
+		<view v-if="isFromReadonly">
+			<view v-if="mediatype === 'image'" class="ml-upload-image-list">
+				<view class="ml-upload-file-item" v-for="(item, index) in value" :key="index">
+					<image class="ml-upload-file-img" mode="aspectFill" :src="getUrl(item)" @click="previewEvent(item, index)"></image>
+				</view>
+			</view>
+			<view v-else class="ml-upload-file-list">
+				<view class="ml-upload-file-item" v-for="(item, index) in value" :key="index">
+					<view class="ml-upload-file-name" @click="downloadEvent(item)">{{ item[nameField] }}</view>
+				</view>
+			</view>
+		</view>
+		<uni-file-picker
+			v-else
+			v-model="selectUniFileList" 
+			:limit="limit"
+			file-mediatype="image"
+			:image-styles="imageStyles"
+			:auto-upload="false"
+			@select="selectFile"
+			@delete="removeEvent">
+		</uni-file-picker>
+	</view>
+</template>
+
+<script>
+import XEUtils from 'xe-utils'
+import globalStore from '../../config/store'
+	
+export default {
+  name: 'MlUpload',
+	props: {
+		value: {
+			type: Array,
+			default: () => ([])
+		},
+		urlList: {
+		  type: Array,
+		  default: () => ([])
+		},
+		simpleValue: {
+		  type: Boolean,
+		  default: false
+		},
+		readonly: {
+		  type: Boolean,
+		  default: false
+		},
+    limit: {
+      type: Number,
+      default: 9
+    },
+		className: String,
+		mediatype: {
+			type: String,
+			default: 'all'
+		},
+    params: {
+      type: Object,
+      default: () => ({})
+    },
+    fileProps: {
+      type: Object,
+      default: () => ({})
+    },
+		getFileUrl: Function,
+		uploadFile: Function,
+		removeFile: Function
+	},
+  inject: {
+    currVM: {
+      from: '$pageVM',
+      default: null
+    },
+    form: {
+      from: 'mlForm',
+      default: null
+    }
+  },
+	data () {
+		return {
+			fileList: [],
+			selectUniFileList: [],
+			imageStyles: {
+				// "height": 60,	// 边框高度
+				// "width": 60,	// 边框宽度
+				// "border":{ // 如果为 Boolean 值，可以控制边框显示与否
+				// 	"color":"transparent",		// 边框颜色
+				// 	"width":"1px",		// 边框宽度
+				// 	"style":"solid", 	// 边框样式
+				// }
+			},
+			imgTypes: ['png', 'jpg']
+		}
+	},
+	computed: {
+		isFromReadonly () {
+			if (this.readonly) {
+				return true
+			}
+			return this.form ? this.form.readonly : false
+		},
+    imageList () {
+      return this.value ? this.value.filter(item => this.imgTypes.includes(item[this.typeField])) : []
+    },
+    fieldMaps () {
+      return { ...globalStore.upload.fileProps, ...this.fileProps }
+    },
+    urlField () {
+      return this.fieldMaps.fileUrl || 'fileUrl'
+    },
+    typeField () {
+      return this.fieldMaps.fileType || 'fileType'
+    },
+    nameField () {
+      return this.fieldMaps.fileName || 'fileName'
+    }
+	},
+	watch: {
+		value (val) {
+			if (!this.isUpdate) {
+				this.isUpdate = true
+				this.loadList()
+			}
+		},
+		urlList () {
+		  this.loadList()
+		}
+	},
+	created () {
+		this.loadList()
+	},
+	methods: {
+		loadList () {
+			if (this.simpleValue) {
+				this.fileList = this.urlList.map(url => {
+          const name = this.getUrlName(url)
+					const obj = {
+						id: null,
+						[this.nameField]: name,
+						[this.typeField]: this.getSuffix(name),
+						[this.urlField]: url
+					}
+					return {
+						id: null,
+						[this.nameField]: name,
+						[this.typeField]: this.getSuffix(name),
+						[this.urlField]: url,
+						tempPath: this.getUrl(obj)
+					}
+				})
+				this.selectUniFileList = this.urlList.map(url => {
+          const name = this.getUrlName(url)
+					const extname = this.getSuffix(name)
+					const obj = {
+						[this.nameField]: name,
+						[this.typeField]: extname,
+						[this.urlField]: url
+					}
+					return {
+						...obj,
+						name: name,
+						extname: extname,
+						url: this.getUrl(obj)
+					}
+				})
+				this.isUpdate = true
+				this.$emit('input', this.fileList)
+			} else {
+				this.fileList = this.value.map(item => {
+					item.tempPath = this.getUrl(item)
+					return item
+				})
+				this.selectUniFileList = this.value.map(item => {
+					return {
+						...item,
+						name: item[this.nameField],
+						extname: item[this.typeField],
+						url: this.getUrl(item)
+					}
+				})
+			}
+		},
+		updateModel () {
+			const urlList = this.fileList.map(item => item[this.urlField])
+		  this.$emit('update:urlList', urlList)
+		  this.$emit('input', this.fileList)
+			this.$emit('change', { value: this.simpleValue ? urlList : this.fileList })
+		},
+		async selectFile (e) {
+			const { tempFiles } = e
+			if (this.$loading) {
+				this.$loading.show('上传中')
+			}
+			const uploadMethod = this.uploadFile ? this.uploadFile : (globalStore.upload ? globalStore.upload.uploadFile : null)
+			Promise.all(
+				tempFiles.map(file => {
+      		const fileSuffix = this.getSuffix(file.name)
+					if (uploadMethod) {
+						return Promise.resolve(
+							uploadMethod.call(this.currVM, {
+								file,
+								params: this.params
+							})
+						).then(res => {
+							const item = {
+								...res,
+								[this.nameField]: res[this.nameField] || file.name,
+								[this.typeField]: res[this.typeField] || fileSuffix,
+								tempPath: file.path
+							}
+							this.selectUniFileList.push(file)
+							this.fileList.push(item)
+							this.isUpdate = true
+							this.updateModel()
+						})
+					} else {
+						const item = {
+							[this.nameField]: file.name,
+							[this.typeField]: file.extname,
+							[this.urlField]: file.path,
+							tempPath: file.path
+						}
+						this.selectUniFileList.push(file)
+						this.fileList.push(item)
+						this.isUpdate = true
+						this.updateModel()
+					}
+				})
+			).then(res => {
+				if (this.$loading) {
+					this.$loading.hide()
+				}
+			}).catch((e) => {
+				if (this.$loading) {
+					this.$loading.hide()
+				}
+			})
+		},
+		removeEvent (e) {
+			const { tempFilePath } = e
+			const item = this.fileList.find(item => item.tempPath === tempFilePath)
+			this.selectUniFileList = this.selectUniFileList.filter(item => item.url !== tempFilePath)
+			this.fileList = this.fileList.filter(item => item.tempPath !== tempFilePath)
+			const removeMethod = this.removeFile ? this.removeFile : (globalStore.upload ? globalStore.upload.removeFile : null)
+			if (!item) {
+				console.error('删除出错！！！')
+			}
+			if (item && !item.id) {
+				if (removeMethod) {
+					removeMethod.call(this.currVM, {
+						item,
+						params: this.params
+					})
+				}
+			}
+			this.isUpdate = true
+			this.updateModel()
+		},
+    getUrl (item) {
+      const getFileMethod = this.getFileUrl ? this.getFileUrl : (globalStore.upload ? globalStore.upload.getFileUrl : null)
+      if (getFileMethod) {
+        return getFileMethod.call(this.currVM, {
+          item,
+          params: this.params
+        })
+      }
+      return item[this.urlField]
+    },
+    getUrlName (url) {
+      const urlRest = XEUtils.parseUrl(url)
+      return urlRest.pathname.split('/').slice(-1)[0] || ''
+    },
+		getSuffix (filename) {
+		  const pos = filename.lastIndexOf('.')
+		  let suffix = ''
+		  if (pos !== -1) {
+				suffix = filename.substring(pos + 1)
+		  }
+		  return suffix
+		},
+		previewEvent (item, index) {
+			if (this.previewStatus) {
+				return
+			}
+			this.previewStatus = true
+			Promise.all(
+				this.value.map(item => {
+					return new Promise((resolve) => {
+						uni.downloadFile({
+							url: this.getUrl(item), 
+							success: (downRes) => {
+								resolve({
+									url: downRes.tempFilePath
+								})
+							},
+							fail () {
+								resolve({
+									url: ''
+								})
+							}
+						})
+					})
+				})
+			).then(res => {
+				uni.previewImage({
+					current: index,
+					urls: res.map(item => item.url)
+				})
+				this.previewStatus = false
+			})
+		},
+		previewImg (item) {
+			uni.downloadFile({
+				url: this.getUrl(item), 
+				success: (downRes) => {
+					uni.previewImage({
+						urls: [
+							downRes.tempFilePath
+						],
+						longPressActions: {
+							itemList: ['保存图片']
+						}
+					})
+				}
+			})
+		},
+		downloadEvent (item) {
+			uni.downloadFile({
+				url: this.getUrl(item), 
+				success: (downRes) => {
+					// 仅支持类型
+					if (['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx'].includes(item[this.typeField])) {
+						uni.openDocument({
+							filePath: downRes.tempFilePath,
+							showMenu: true,
+							success (saveRes) {
+							},
+							fail () {
+								uni.showModal({
+									content: '打开失败',
+									showCancel: false
+								});
+							}
+						})
+					} else if (['png', 'jpg'].includes(item[this.typeField])) {
+						this.previewImg(item)
+					} else {
+						uni.saveFile({
+							tempFilePath: downRes.tempFilePath,
+							success: function(res) {
+								uni.showToast({
+									icon: 'none',
+									mask: true,
+									title: '文件已保存：' + res.savedFilePath, //保存路径
+									duration: 3000,
+								})
+							}
+						})
+
+					}
+				},
+				fail () {
+					uni.showModal({
+						content: '下载失败',
+						showCancel: false
+					});
+				}
+			})
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.ml-upload{
+	margin: 20rpx 0;
+	background: #fff;
+}
+.ml-upload-image-list {
+	.ml-upload-file-item {
+		display: inline-block;
+		width: 140rpx;
+		height: 140rpx;
+		padding: 0 10rpx;
+	}
+	.ml-upload-file-img {
+		width: 100%;
+		height: 100%;
+	}
+}
+.ml-upload-file-list {
+	display: block;
+	.ml-upload-file-item {
+		border: 1rpx solid rgba(39, 42, 48, 0.0200);
+		background-color: rgba(39, 42, 48, 0.0200);
+		margin: 10rpx 0;
+		border-radius: $ml-border-radius;
+    padding: 20rpx;
+	}
+	.ml-upload-file-name {
+		width: 600rpx;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mali-applet-ui",
-  "version": "0.2.71",
+  "version": "0.2.72",
   "description": "码里云小程序组件库",
   "scripts": {
     "release": "node script/release.js && npm publish"

package/utils/date.js

@@ -7,7 +7,7 @@ import XEUtils from 'xe-utils'
  * @returns
  */
 export function toDateString (date, format = 'yyyy-MM-dd HH:mm:ss') {
-  return XEUtils.toDateString(date, format.replace('YYYY', 'yyyy').replace('DD', 'dd'))
+  return XEUtils.toDateString(date, format.replace('YYYY', 'yyyy').replace('DD', 'dd').replace('D', 'd'))
 }
 
 /**

package/components/ml-file-upload/ml-file-upload.vue

@@ -1,480 +0,0 @@
-<template>
-	<view class="ml-upload" :class="[className || '']">
-		<!-- 上传图片 -->
-		<view v-if="mediatype === 'image'" class="ml-upload-image-list">
-			<view class="ml-upload-image-item" v-for="(item, index) in fileList" :key="index">
-				<image class="ml-upload-image-img" mode="aspectFit" :src="getUrl(item)" @click="previewImageEvent(item, index)"></image>
-				<view class="ml-upload-image-del-btn" @click="removeEvent(item)">
-					<ml-icon name="close" />
-				</view>
-			</view>
-			<view class="ml-upload-image-add">
-				<view class="ml-upload-image-add-btn" @tap="chooseEvent">
-					<view class="ml-upload-image-add-icon">
-						<ml-icon name="add" />
-					</view>
-				</view>
-			</view>
-		</view>
-		<!-- 上传文件 -->
-		<view v-else class="ml-upload-file-list">
-			<view class="ml-upload-file-add">
-				<view class="ml-upload-file-add-btn" @tap="chooseEvent">
-					<text class="ml-upload-file-add-icon">
-						<ml-icon name="add" />
-					</text>
-					<text>添加文件</text>
-				</view>
-			</view>
-			<view class="ml-upload-file-item" v-for="(item, index) in fileList" :key="index">
-				<view class="ml-upload-file-left">
-					<view class="ml-upload-file-icon">
-						<ml-icon name="file-txt" />
-					</view>
-				</view>
-				<view class="ml-upload-file-info">
-					<view class="ml-upload-file-name">{{ item[nameField] }}</view>
-					<view class="ml-upload-file-desc">
-						<ml-button status="primary" type="text" @click="previewDocs(item)">预览</ml-button>
-						<ml-button status="primary" type="text" @click="downloadEvent(item)">下载</ml-button>
-					</view>
-				</view>
-				<view class="ml-upload-file-right">
-					<view class="ml-upload-file-del-btn" @click="removeEvent(item)">
-						<ml-icon name="close" />
-					</view>
-				</view>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-import XEUtils from 'xe-utils'
-import globalStore from '../../config/store'
-import mlButton from '../ml-button/ml-button.vue'
-import { uploadAllFiles, uploadImageFiles } from './file-handle'
-	
-export default {
-  components: { mlButton },
-  name: 'MlUpload',
-	props: {
-		value: {
-			type: Array,
-			default: () => ([])
-		},
-		urlList: {
-		  type: Array,
-		  default: () => ([])
-		},
-		simpleValue: {
-		  type: Boolean,
-		  default: false
-		},
-		readonly: {
-		  type: Boolean,
-		  default: false
-		},
-    limit: {
-      type: Number,
-      default: 9
-    },
-		className: String,
-		mediatype: {
-			type: String,
-			default: 'all'
-		},
-    params: {
-      type: Object,
-      default: () => ({})
-    },
-    fileProps: {
-      type: Object,
-      default: () => ({})
-    },
-		getFileUrl: Function,
-		uploadFile: Function,
-		removeFile: Function
-	},
-  inject: {
-    currVM: {
-      from: '$pageVM',
-      default: null
-    },
-    form: {
-      from: 'mlForm',
-      default: null
-    }
-  },
-	data () {
-		return {
-			fileList: [],
-			docsTypes: ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx'],
-			imgTypes: ['png', 'jpg']
-		}
-	},
-	computed: {
-		isFromReadonly () {
-			if (this.readonly) {
-				return true
-			}
-			return this.form ? this.form.readonly : false
-		},
-    imageList () {
-      return this.value ? this.value.filter(item => this.imgTypes.includes(item[this.typeField])) : []
-    },
-    fieldMaps () {
-      return { ...globalStore.upload.fileProps, ...this.fileProps }
-    },
-    urlField () {
-      return this.fieldMaps.fileUrl || 'fileUrl'
-    },
-    typeField () {
-      return this.fieldMaps.fileType || 'fileType'
-    },
-    nameField () {
-      return this.fieldMaps.fileName || 'fileName'
-    }
-	},
-	watch: {
-		value () {
-			if (!this.isUpdate) {
-				this.isUpdate = true
-				this.loadList()
-			}
-		},
-		urlList () {
-		  this.loadList()
-		}
-	},
-	created () {
-		this.loadList()
-	},
-	methods: {
-		loadList () {
-			if (this.simpleValue) {
-				this.fileList = this.urlList.map(url => {
-          const name = this.getUrlName(url)
-					const obj = {
-						id: null,
-						[this.nameField]: name,
-						[this.typeField]: this.getSuffix(name),
-						[this.urlField]: url
-					}
-					return {
-						id: null,
-						[this.nameField]: name,
-						[this.typeField]: this.getSuffix(name),
-						[this.urlField]: url,
-						tempPath: this.getUrl(obj)
-					}
-				})
-				this.isUpdate = true
-				this.$emit('input', this.fileList)
-			} else {
-				this.fileList = this.value.map(item => {
-					item.tempPath = this.getUrl(item)
-					return item
-				})
-			}
-		},
-		updateModel () {
-			const urlList = this.fileList.map(item => item[this.urlField])
-		  this.$emit('update:urlList', urlList)
-		  this.$emit('input', this.fileList)
-			this.$emit('change', { value: this.simpleValue ? urlList : this.fileList })
-		},
-		removeEvent (item) {
-			this.fileList = this.fileList.filter(obj => obj.tempPath !== item.tempPath)
-			const removeMethod = this.removeFile ? this.removeFile : (globalStore.upload ? globalStore.upload.removeFile : null)
-			if (!item) {
-				console.error('删除出错！！！')
-			}
-			if (item && !item.id) {
-				if (removeMethod) {
-					removeMethod.call(this.currVM, {
-						item,
-						params: this.params
-					})
-				}
-			}
-			this.isUpdate = true
-			this.updateModel()
-		},
-    getUrl (item) {
-      const getFileMethod = this.getFileUrl ? this.getFileUrl : (globalStore.upload ? globalStore.upload.getFileUrl : null)
-      if (getFileMethod) {
-        return getFileMethod.call(this.currVM, {
-          item,
-          params: this.params
-        })
-      }
-      return item[this.urlField]
-    },
-    getUrlName (url) {
-      const urlRest = XEUtils.parseUrl(url)
-      return urlRest.pathname.split('/').slice(-1)[0] || ''
-    },
-		getSuffix (filename) {
-		  const pos = filename.lastIndexOf('.')
-		  let suffix = ''
-		  if (pos !== -1) {
-				suffix = filename.substring(pos + 1)
-		  }
-		  return suffix
-		},
-		previewImageEvent (item, index) {
-			if (this.previewStatus) {
-				return
-			}
-			this.previewStatus = true
-			Promise.all(
-				this.value.map(item => {
-					return new Promise((resolve) => {
-						uni.downloadFile({
-							url: this.getUrl(item), 
-							success: (downRes) => {
-								resolve({
-									url: downRes.tempFilePath
-								})
-							},
-							fail () {
-								resolve({
-									url: ''
-								})
-							}
-						})
-					})
-				})
-			).then(res => {
-				uni.previewImage({
-					current: index,
-					urls: res.map(item => item.url)
-				})
-				this.previewStatus = false
-			})
-		},
-		previewImg (item) {
-			uni.downloadFile({
-				url: this.getUrl(item), 
-				success: (downRes) => {
-					uni.previewImage({
-						urls: [
-							downRes.tempFilePath
-						],
-						longPressActions: {
-							itemList: ['保存图片']
-						}
-					})
-				}
-			})
-		},
-		previewDocs (item) {
-			// 仅支持文档和图片
-			const supportDocs = this.docsTypes.includes(item[this.typeField])
-			const supportImg = this.imgTypes.includes(item[this.typeField])
-			if (supportDocs || supportImg) {
-				uni.downloadFile({
-					url: this.getUrl(item), 
-					success: (downRes) => {
-						if (supportDocs) {
-							uni.openDocument({
-								filePath: downRes.tempFilePath,
-								showMenu: true,
-								success () {},
-								fail () {
-									uni.showModal({
-										content: '打开失败',
-										showCancel: false
-									})
-								}
-							})
-						} else if (supportImg) {
-							this.previewImg(item)
-						}
-					},
-					fail () {
-						uni.showModal({
-							content: '下载失败',
-							showCancel: false
-						})
-					}
-				})
-			}
-		},
-		downloadEvent (item) {
-			uni.downloadFile({
-				url: this.getUrl(item), 
-				success: (downRes) => {
-					uni.saveFile({
-						tempFilePath: downRes.tempFilePath,
-						success: function(res) {
-							uni.showToast({
-								icon: 'none',
-								mask: true,
-								title: '文件已保存：' + res.savedFilePath, //保存路径
-								duration: 3000,
-							})
-						}
-					})
-				},
-				fail () {
-					uni.showModal({
-						content: '下载失败',
-						showCancel: false
-					});
-				}
-			})
-		},
-		chooseEvent () {
-			let chooseMethod = uploadAllFiles
-			if (this.mediatype === 'image') {
-				chooseMethod = uploadImageFiles
-			}
-			const uploadMethod = this.uploadFile ? this.uploadFile : (globalStore.upload ? globalStore.upload.uploadFile : null)
-			chooseMethod({}).then(res => {
-				const { tempFiles } = res
-				Promise.all(
-					tempFiles.map(file => {
-						const fileSuffix = this.getSuffix(file.name)
-						if (uploadMethod) {
-							return Promise.resolve(
-								uploadMethod.call(this.currVM, {
-									file,
-									params: this.params
-								})
-							).then(res => {
-								return {
-									...res,
-									[this.nameField]: res[this.nameField] || file.name,
-									[this.typeField]: res[this.typeField] || fileSuffix,
-									tempPath: file.path
-								}
-							})
-						}
-						return {
-							[this.nameField]: file.name,
-							[this.typeField]: file.extname,
-							[this.urlField]: file.path,
-							tempPath: file.path
-						}
-					})
-				).then(list => {
-					this.fileList.push(...list)
-					this.isUpdate = true
-					this.updateModel()
-				}).catch((e) => {
-					console.log(e)
-				})
-			})
-		}
-	}
-}
-</script>
-
-<style lang="scss">
-.ml-upload{
-	margin: 20rpx 0;
-	background: #fff;
-}
-.ml-upload-image-list {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	.ml-upload-image-item,
-	.ml-upload-image-add {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		position: relative;
-		width: 140rpx;
-		height: 140rpx;
-		text-align: center;
-	}
-	.ml-upload-image-del-btn {
-		position: absolute;
-		right: 0;
-		top: 0;
-		width: 40rpx;
-		height: 40rpx;
-		line-height: 40rpx;
-		font-size: 28rpx;
-		text-align: center;
-		border-radius: 50%;
-		color: #ffffff;
-		background: #c8c8c9;
-	}
-	.ml-upload-image-add-btn {
-		width: 100rpx;
-		height: 100rpx;
-		line-height: 100rpx;
-		font-size: 60rpx;
-		color: #c8c8c9;
-		border: 1px solid #c8c8c9;
-		border-radius: 50%;
-	}
-	.ml-upload-image-img {
-		width: 120rpx;
-		height: 120rpx;
-		line-height: 120rpx;
-		border-radius: $ml-border-radius;
-	}
-}
-.ml-upload-file-list {
-	.ml-upload-file-add,
-	.ml-upload-file-item {
-		margin: 20rpx 0;
-	}
-	.ml-upload-file-item {
-		display: flex;
-		flex-direction: row;
-	}
-	.ml-upload-file-item {
-		padding-bottom: 10rpx;
-		border-bottom: 1px solid #f1f1f1;
-	}
-	.ml-upload-file-left,
-	.ml-upload-file-right {
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		justify-content: center;
-		flex-shrink: 0;
-	}
-	.ml-upload-file-add-btn {
-		height: 70rpx;
-		line-height: 70rpx;
-		text-align: center;
-		color: #8a8686;
-		border: 1px solid #c8c8c9;
-		border-radius: $ml-border-radius;
-	}
-	.ml-upload-file-del-btn {
-		width: 40rpx;
-		height: 40rpx;
-		line-height: 40rpx;
-		text-align: center;
-		font-size: 28rpx;
-		color: #ffffff;
-		background: #c8c8c9;
-		border-radius: 50%;
-	}
-	.ml-upload-file-left {
-		width: 80rpx;
-	}
-	.ml-upload-file-icon {
-		font-size: 60rpx;
-	}
-	.ml-upload-file-info {
-		flex-grow: 1;
-		.ml-upload-file-name {
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-		}
-	}
-	.ml-upload-file-right {
-		width: 60rpx;
-	}
-}
-</style>