mali-applet-ui 0.2.67 → 0.2.69

package/components/ml-echarts/ml-echarts.vue

@@ -7,7 +7,7 @@
 <script>
 import XEUtils from 'xe-utils'
 import WxCanvas from './wx-canvas';
-import * as echarts from './echarts';
+import * as echarts from './echarts.simple.min.js';
 
 function wrapTouch(event) {
 	for (let i = 0; i < event.touches.length; ++i) {

package/components/ml-file-upload/file-handle.js

@@ -0,0 +1,52 @@
+function normalizeChooseAndUploadFileRes(res, fileType) {
+	debugger
+	res.tempFiles.forEach((item) => {
+		if (!item.name) {
+			item.name = item.path.substring(item.path.lastIndexOf('/') + 1)
+		}
+		if (fileType) {
+			item.fileType = fileType
+		}
+	})
+	return res
+}
+
+export function uploadImageFiles(opts) {
+	return new Promise((resolve, reject) => {
+		uni.chooseImage({
+			count: opts.count || 9,
+			sizeType: opts.sizeType || ['original', 'compressed'],
+			sourceType: opts.sourceType || ['album', 'camera'],
+			extension: opts.extension,
+			success(res) {
+				resolve(normalizeChooseAndUploadFileRes(res, 'image'));
+			},
+			fail(res) {
+				reject(res)
+			}
+		})
+	})
+}
+
+export function uploadAllFiles(opts) {
+	return new Promise((resolve, reject) => {
+		let chooseFile = uni.chooseFile;
+		if (typeof wx !== 'undefined' && typeof wx.chooseMessageFile === 'function') {
+			chooseFile = wx.chooseMessageFile
+		}
+		if (typeof chooseFile == 'function') {
+			return reject({})
+		}
+		chooseFile({
+			type: 'all',
+			count: opts.count || 9,
+			extension: opts.extension,
+			success(res) {
+				resolve(normalizeChooseAndUploadFileRes(res));
+			},
+			fail(res) {
+				reject(res)
+			}
+		})
+	})
+}

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

@@ -0,0 +1,519 @@
+<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="aspectFill" :src="getUrl(item)" @click="previewEvent(item, index)"></image>
+				<view class="ml-upload-image-del-btn">
+					<ml-icon name="close" />
+				</view>
+			</view>
+			<view class="ml-upload-image-add">
+				<view class="ml-upload-image-add-btn" @tap="chooseImage">
+					<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-item">
+				<view class="ml-upload-file-icon">
+					<ml-icon name="file-txt" />
+				</view>
+				<view class="ml-upload-file-info">
+					<view class="ml-upload-file-name"></view>
+					<view></view>
+				</view>
+			</view>
+			<view class="ml-upload-file-add">
+				<view class="ml-upload-file-add-btn" @tap="chooseFile">
+					<view class="ml-upload-file-add-icon">
+						<ml-icon name="add" />
+					</view>
+					<view class="ml-upload-file-add-text">添加附件</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import XEUtils from 'xe-utils'
+import globalStore from '../../config/store'
+import { uploadImageFiles } from './file-handle'
+	
+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
+					});
+				}
+			})
+		},
+		chooseImage () {
+			const uploadMethod = this.uploadFile ? this.uploadFile : (globalStore.upload ? globalStore.upload.uploadFile : null)
+			uploadImageFiles({}).then(res => {
+				const { tempFiles } = res
+				debugger
+				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.selectUniFileList.push(...list)
+					this.fileList.push(...list)
+					this.isUpdate = true
+					this.updateModel()
+					debugger
+				}).catch((e) => {
+					debugger
+				})
+			})
+		},
+		chooseFile () {
+			const uploadMethod = this.uploadFile ? this.uploadFile : (globalStore.upload ? globalStore.upload.uploadFile : null)
+			uploadImageFiles({}).then(res => {
+				const { tempFiles } = res
+				debugger
+				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.selectUniFileList.push(...list)
+					this.fileList.push(...list)
+					this.isUpdate = true
+					this.updateModel()
+					debugger
+				}).catch((e) => {
+					debugger
+				})
+			})
+		}
+	}
+}
+</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 {
+		position: relative;
+		width: 100rpx;
+		height: 100rpx;
+		margin: 20rpx;
+	}
+	.ml-upload-image-del-btn {
+		position: absolute;
+		right: 0;
+		top: 0;
+		border-radius: 50%;
+	}
+	.ml-upload-image-img {
+		border-radius: $ml-border-radius;
+	}
+}
+.ml-upload-file-list {
+	.ml-upload-file-item {
+		display: block;
+	}
+	.ml-upload-file-icon {
+		flex-shrink: 0;
+	}
+	.ml-upload-file-info {
+		flex-grow: 1;
+		.ml-upload-file-name {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+	.ml-upload-file-add-btn {
+		display: flex;
+		flex-direction: row;
+	}
+}
+</style>

package/components/ml-list-item/ml-list-item.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-list-item" :class="[className || '', itemType ? `type-${itemType}` : '', {'is-padding': padding, 'is-vertical': itemVertical}]" :style="styles" @click="clickEvent" @tap="tapEvent">
+  <view class="ml-list-item" :class="[className || '', itemType ? `type-${itemType}` : '', {'is-padding': padding, 'is-vertical': itemVertical, 'is-disabled': disabled}]" :style="styles" @click="clickEvent" @tap="tapEvent">
     <view v-if="itemType === 'checkbox'" class="ml-list-checkbox-icon">
       <ml-checkbox :value="hasCheckedChecked" :disabled="disabled"></ml-checkbox>
     </view>
@@ -155,6 +155,12 @@ export default {
   padding: 20rpx;
   border-radius: $ml-border-radius;
   background: #ffffff;
+  &.is-disabled {
+    opacity: 0.5;
+    // #ifdef H5
+    cursor: no-drop;
+    // #endif
+  }
   &.is-padding {
     margin-bottom: 20rpx;
   }

package/components/ml-list-menu-item/ml-list-menu-item.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="ml-list-menu-item" :class="[className || '', itemType ? `type-${itemType}` : '', {'is-vertical': itemVertical}]" @click="clickEvent" @tap="tapEvent">
+  <view class="ml-list-menu-item" :class="[className || '', itemType ? `type-${itemType}` : '', {'is-vertical': itemVertical, 'is-disabled': disabled}]" @click="clickEvent" @tap="tapEvent">
     <view v-if="itemType === 'checkbox'" class="ml-list-menu-checkbox-icon">
       <ml-checkbox :value="hasCheckedChecked" :disabled="disabled"></ml-checkbox>
     </view>
@@ -157,6 +157,12 @@ export default {
   font-size: 30rpx;
   padding: 10rpx 20rpx;
   background: #ffffff;
+  &.is-disabled {
+    opacity: 0.5;
+    // #ifdef H5
+    cursor: no-drop;
+    // #endif
+  }
   &:first-child {
     border-top: 1px solid #e5e5e5;
   }