fusions-ui 1.2.7 → 1.2.8

package/components/upload/src/composables/use-upload.ts

@@ -0,0 +1,388 @@
+import { getCurrentInstance, ref, computed, nextTick, inject, type SetupContext, watch, onMounted } from 'vue';
+import type { UploadProps, UploadEmits } from '../upload';
+import { chooseUploadFile, uploadCloudFiles } from '../../../../utils/chooseUploadFile';
+import { getExtname, getFilesAndIsMax, getFileData } from '../utils';
+
+export const useUpload = (props: UploadProps, $emit: SetupContext<UploadEmits>['emit']) => {
+	const instance = getCurrentInstance();
+	const files = ref<any[]>([]);
+	const localValue = ref([]);
+	const noSpace = ref(false);
+	const prop = ref('');
+	const isReset = ref(false);
+	const form = inject<any>('FuForm', null);
+	const formItem = inject<any>('FuFormItem', null);
+	
+	const filesList = computed(() => {
+	    return files.value
+	});
+	
+	const showType = computed(() => {
+		if (props.fileType === 'image') {
+			return props.mode
+		}
+		return 'list'
+	});
+	
+	// 处理最大上传数量
+	const countLength = computed(() => {
+		if (props.returnType === 'object' || !props.maxCount) {
+			return 1
+		}
+		return Math.min(Number(props.maxCount), 9)
+	});
+	
+	/**
+	 * 公开用户使用，清空文件
+	 * @param {Object} index
+	 */
+	const clearFiles = (index?: number) => {
+		if (index !== 0 && !index) {
+			files.value = [];
+			nextTick(() => {
+				setEmit()
+			})
+		} else {
+			files.value.splice(index, 1)
+		}
+		nextTick(() => {
+			setEmit()
+		})
+	};
+	
+	/**
+	 * 公开用户使用，继续上传
+	 */
+	const upload = () => {
+		let readyFiles = [];
+		files.value.forEach((item) => {
+			if (item.status === 'ready' || item.status === 'error') {
+				readyFiles.push(Object.assign({}, item))
+			}
+		})
+		return uploadFiles(files)
+	};
+	
+	const setValue = async (newVal: any) => {
+		const newData =  async (item: any) => {
+			const reg = /cloud:\/\/([\w.]+\/?)\S*/;
+			let url = '';
+			if(item.fileID) {
+				url = item.fileID;
+			} else {
+				url = item.url;
+			}
+			if(reg.test(url)) {
+				item.fileID = url;
+				item.url = await getTempFileURL(url);
+			}
+			if(item.url) item.path = item.url;
+			return item
+		}
+		if (props.returnType === 'object') {
+			if (newVal) {
+				await newData(newVal)
+			} else {
+				newVal = {};
+			}
+		} else {
+			if (!newVal) newVal = [];
+			for(let i =0 ;i < newVal.length ;i++){
+				let item = newVal[i];
+				await newData(item)
+			}
+		}
+		localValue.value = newVal;
+		if (form && formItem &&!isReset.value) {
+			isReset.value = false;
+			form.setValue(prop.value, localValue.value)
+		}
+		let filesData = Object.keys(newVal).length > 0 ? newVal : [];
+		files.value = [].concat(filesData)
+	};
+	
+	/**
+	 * 选择文件
+	 */
+	const choose = () => {
+		if (props.disabled) return
+		if (files.value.length >= Number(countLength.value) && showType.value !== 'grid' && props.returnType === 'array') {
+			uni.showToast({
+				title: `您最多选择 ${countLength.value} 个文件`,
+				icon: 'none'
+			})
+			return
+		}
+		chooseFiles()
+	};
+	
+	/**
+	 * 选择文件并上传
+	 */
+	const chooseFiles = () => {
+		const _extname = getExtname(props.fileExtname as string | string[]);
+		// 获取后缀
+		(uniCloud as any).chooseAndUploadFile({
+			type: props.fileType,
+			compressed: props.compressed,
+			sizeType: props.sizeType,
+			sourceType: props.sourceType,
+			// 如果为空，video 有问题
+			extension: _extname.length > 0 ? _extname : undefined,
+			count: countLength.value - files.value.length, // 默认9
+			onChooseFile: chooseFileCallback,
+			onUploadProgress: (progressEvent: any) => {
+				setProgress(progressEvent, progressEvent.index)
+			}
+		}).then((res: any) => {
+			setSuccessAndError(res.tempFiles)
+		}).catch((err: any) => {
+			console.log('选择失败', err)
+		})
+	};
+	
+	/**
+	 * 选择文件回调
+	 * @param {Object} res
+	 */
+	const chooseFileCallback = async (res: any) => {
+		const _extname = getExtname(props.fileExtname as string | string[]);
+		const isOne = (Number(countLength.value) === 1 && props.disablePreview && !props.disabled) || props.returnType === 'object'
+		// 如果这有一个文件 ，需要清空本地缓存数据
+		if (isOne) {
+			files.value = [];
+		}
+	
+		let { filePaths, files: selectedFiles } = getFilesAndIsMax(res, _extname)
+		if (!(_extname && _extname.length > 0)) {
+			filePaths = res.tempFilePaths;
+			selectedFiles = res.tempFiles;
+		}
+	
+		let currentData = [];
+		for (let i = 0; i < selectedFiles.length; i++) {
+			if (countLength.value - files.value.length <= 0) break
+			selectedFiles[i].uuid = Date.now();
+			let filedata = await getFileData(selectedFiles[i], props.fileType)
+			filedata.progress = 0;
+			filedata.status = 'ready';
+			files.value.push(filedata)
+			currentData.push({
+				...filedata,
+				file: selectedFiles[i]
+			})
+		}
+		$emit('select', {
+			tempFiles: currentData,
+			tempFilePaths: filePaths
+		})
+		res.tempFiles = files;
+		// 停止自动上传
+		if (!props.autoUpload || noSpace.value) {
+			res.tempFiles = [];
+		}
+	};
+	
+	/**
+	 * 批量上传
+	 * @param {Object} files 上传数组
+	 * @param {String|Number} max 最大上传数量（默认 5）
+	 */
+	const uploadFiles = (files: any, max: number = 5) => {
+		files = [].concat(files)
+		return uploadCloudFiles.call(instance, files, max, (res: any) => {
+			setProgress(res, res.index, true)
+		}).then((result: any) => {
+			setSuccessAndError(result)
+			return result;
+		}).catch((err: any) => {
+			console.log(err)
+		})
+	};
+	
+	/**
+	 * 成功或失败
+	 */
+	const setSuccessAndError = async (res: any) => {
+		let successData = [];
+		let errorData = [];
+		let tempFilePath = [];
+		let errorTempFilePath = [];
+		for (let i = 0; i < res.length; i++) {
+			const item = res[i];
+			const index = item.uuid? files.value.findIndex(f => f.uuid === item.uuid): item.index;
+			if (index === -1 || !files.value[index]) break
+			if (item.errMsg === 'request:fail') {
+				files.value[index].url = item.path;
+				files.value[index].status = 'error';
+				files.value[index].errMsg = item.errMsg;
+				errorData.push(files.value[index])
+				errorTempFilePath.push(files.value[index].url)
+			} else {
+				files.value[index].errMsg = '';
+				files.value[index].fileID = item.url;
+				const reg = /cloud:\/\/([\w.]+\/?)\S*/
+				if (reg.test(item.url)) {
+					files.value[index].url = await getTempFileURL(item.url)
+				}else{
+					files.value[index].url = item.url;
+				}
+				files.value[index].status = 'success';
+				files.value[index].progress += 1
+				successData.push(files.value[index])
+				tempFilePath.push(files.value[index].fileID)
+			}
+		}
+	
+		if (successData.length > 0) {
+			setEmit()
+			// 状态改变返回
+			$emit('success', {
+				tempFiles: backObject(successData),
+				tempFilePaths: tempFilePath
+			})
+		}
+	
+		if (errorData.length > 0) {
+			$emit('fail', {
+				tempFiles: backObject(errorData),
+				tempFilePaths: errorTempFilePath
+			})
+		}
+	};
+	
+	/**
+	 * 获取进度
+	 * @param {Object} progressEvent
+	 * @param {Object} index
+	 * @param {Object} type
+	 */
+	const setProgress = (progressEvent: any, index: number, type?: boolean) => {
+		const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+		let _index = index;
+		if (!type) {
+			_index = files.value.findIndex(item => item.uuid === progressEvent.tempFile.uuid);
+		}
+		if (_index === -1 || !files.value[_index]) return
+		// 100 就会消失，-1 是为了让进度条消失
+		files.value[_index].progress = percentCompleted - 1;
+		// 上传中
+		$emit('progress', {
+			index: _index,
+			progress: parseInt(String(percentCompleted)),
+			tempFile: files.value[_index]
+		})
+	};
+	
+	/**
+	 * 删除文件
+	 * @param {Object} index
+	 */
+	const delFile = (index: number) => {
+		$emit('delete', {
+			tempFile: files.value[index],
+			tempFilePath: files.value[index].url
+		})
+		files.value.splice(index, 1)
+		nextTick(() => {
+			setEmit()
+		})
+	};
+	
+	/**
+	 * 获取文件名和后缀
+	 * @param {Object} name
+	 */
+	const getFileExt = (name: string) => {
+		const lastLen = name.lastIndexOf('.');
+		const len = name.length;
+		return {
+			name: name.substring(0, lastLen),
+			ext: name.substring(lastLen + 1, len)
+		}
+	};
+	
+	/**
+	 * 处理返回事件
+	 */
+	const setEmit = () => {
+		let data = [];
+		if (props.returnType === 'object') {
+			data = backObject(files.value)[0];
+			localValue.value = data? data: null;
+		} else {
+			data = backObject(files.value);
+			if (!localValue.value) {
+				localValue.value = [];
+			}
+			localValue.value = [...data];
+		}
+		$emit('update:modelValue', localValue.value)
+		$emit('input', localValue.value)
+	};
+	
+	/**
+	 * 处理返回参数
+	 * @param {Object} files
+	 */
+	const backObject = (files: any) => {
+		let newFilesData = [];
+		files.forEach((item: any) => {
+			newFilesData.push({
+				extname: item.extname,
+				fileType: item.fileType,
+				image: item.image,
+				name: item.name,
+				path: item.path,
+				size: item.size,
+				fileID: item.fileID,
+				url: item.url,
+				// 修改删除一个文件后不能再上传的bug, #694
+				uuid: item.uuid,
+				status: item.status,
+				cloudPath: item.cloudPath
+			})
+		})
+		return newFilesData
+	};
+	
+	const getTempFileURL = async (fileList: any) => {
+		fileList = {
+			fileList: [].concat(fileList)
+		};
+		const urls = await uniCloud.getTempFileURL(fileList);
+		return urls.fileList[0].tempFileURL || ''
+	};
+	
+	// 生命周期
+	onMounted(() => {
+		// 兼容不开通服务空间的情况
+		if (!(uniCloud as any).config || !(uniCloud as any).config.provider) {
+			noSpace.value = true;
+			(uniCloud as any).chooseAndUploadFile = chooseUploadFile;
+		}
+		
+		if (form && formItem) {
+		  if (formItem.prop) {
+				prop.value = formItem.prop
+				form.childrens?.push(instance)
+		  }
+		}
+	});
+	
+	// watch监听事件
+	watch(() => props.modelValue, (newVal) => {
+		setValue(newVal)
+	}, { immediate: true })
+	
+	return {
+		filesList,
+		showType,
+		countLength,
+		clearFiles,
+		upload,
+		uploadFiles,
+		choose,
+		delFile
+	}
+}

package/components/upload/src/upload-file.ts

@@ -0,0 +1,84 @@
+import type { ExtractPropTypes } from 'vue';
+
+export const uploadFileProps = {
+	/**
+	 * @description 数组
+	 */
+	fileList: {
+		type: Array,
+		default: () => []
+	},
+	/**
+	 * @description 是否禁用
+	 * @default false
+	 */
+	disabled: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 是否显示删除图标
+	 */
+	delIcon: {
+		type: Boolean,
+		default: true
+	},
+	/**
+	 * @description 最大限制数量
+	 * @default 9
+	 */
+	maxCount: {
+		type: [Number, String],
+		default: 9
+	},
+	/**
+	 * @description list样式
+	 */
+	listStyles: {
+		type: Object,
+		default() {
+			return {
+				// 是否显示边框
+				border: true,
+				// 是否显示分隔线
+				dividline: true,
+				// 线条样式
+				borderStyle: {}
+			}
+		}
+	},
+	/**
+	 * @description 是否只读
+	 * @default false
+	 */
+	readonly: {
+		type: Boolean,
+		default: false
+	},
+	/**
+	 * @description 是否显示已上传的文件列表
+	 * @default true
+	 */
+	showFileList: {
+		type: Boolean,
+		default: true
+	}
+};
+
+export const uploadFileEmits = {
+	/**
+	  * @description 上传文件
+	  */
+	uploadFiles: (_e: any) => true,
+	/**
+	 * @description 选择文件
+	 */
+	choose: () => true,
+	/**
+	 * @description 删除文件
+	 */
+	delFile: (_e: any) => true
+};
+
+export type UploadFileProps = ExtractPropTypes<typeof uploadFileProps>;
+export type UploadFileEmits = typeof uploadFileEmits;

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

@@ -0,0 +1,193 @@
+<template>
+	<view class="fu-file-picker__files">
+		<view class="files-button" @click="chooseFile" v-if="fileList.length < maxCount && !readonly">
+			<slot></slot>
+		</view>
+		<view class="fu-file-picker__lists is-text-box" :style="borderStyle" v-if="fileList.length > 0 && showFileList">
+			<view 
+				class="fu-file-picker__lists-box" 
+				:class="{'files-border':index !== 0 && styles.dividline}"  
+				:style="index !== 0 && styles.dividline &&borderLineStyle" 
+				v-for="(item ,index) in fileList" 
+				:key="index">
+				<view class="fu-file-picker__item">
+					<view class="files__name">{{ (item as any).name }}</view>
+					<view class="icon-del-box icon-files" @click="chooseDelFile(index)" v-if="delIcon && !readonly">
+						<view class="icon-del icon-files"></view>
+						<view class="icon-del rotate"></view>
+					</view>
+				</view>
+				<view class="file-picker__progress" v-if="((item as any).progress && (item as any).progress !== 100) || (item as any).progress === 0">
+					<progress 
+						class="file-picker__progress-item" 
+						:percent="(item as any).progress === -1? 0: (item as any).progress" 
+						stroke-width="4"
+						:backgroundColor="(item as any).errMsg? '#fa585d':'#ececec'" />
+				</view>
+				<view class="file-picker__mask" @click.stop="uploadFiles(item,index)" v-if="(item as any).status === 'error'">
+					点击重试
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	/**
+	 * @property {Array} fileList 数组
+	 * @property {Boolean} disabled 是否禁用（默认 false）
+	 * @property {String | Number} maxCount 最大限制数量（默认 9）
+	 * @property {Object} listStyles 自定义样式
+	 * @property {Boolean} delIcon 是否显示删除图标（默认 true）
+	 * @property {Boolean} readonly 是否只读（默认 false）
+	 * @property {Boolean} showFileList 是否显示已上传的文件列表（默认 true）
+	 */
+	import { uploadFileEmits, uploadFileProps } from './upload-file';
+	import { useUploadFile, useUploadFileCustomStyle } from './composables';
+	
+	defineOptions({ name: 'UploadFile', options: { virtualHost: true } });
+	
+	const props = defineProps(uploadFileProps);
+	const $emit = defineEmits(uploadFileEmits);
+	
+	const {
+		uploadFiles,
+		chooseFile,
+		chooseDelFile
+	} = useUploadFile(props, $emit);
+	
+	const {
+		styles,
+		borderStyle,
+		borderLineStyle
+	} = useUploadFileCustomStyle(props);
+</script>
+
+<style lang="scss" scoped>
+	@use '../../../style/components.scss';
+	
+	.fu-file-picker__files {
+		@include components.flex(column);
+		justify-content: flex-start;
+	}
+
+	.fu-file-picker__lists {
+		position: relative;
+		margin-top: 5px;
+		overflow: hidden;
+	}
+
+	.file-picker__mask {
+		@include components.flex;
+		justify-content: center;
+		align-items: center;
+		position: absolute;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		color: #fff;
+		font-size: 14px;
+		background-color: rgba(0, 0, 0, 0.4);
+	}
+
+	.fu-file-picker__lists-box {
+		position: relative;
+	}
+
+	.fu-file-picker__item {
+		@include components.flex;
+		align-items: center;
+		padding: 8px 10px;
+		padding-right: 5px;
+		padding-left: 10px;
+	}
+
+	.files-border {
+		border-top: 1px #eeeeee solid;
+	}
+
+	.files__name {
+		flex: 1;
+		font-size: 14px;
+		color: #666666;
+		margin-right: 25px;
+		/* #ifndef APP-NVUE */
+		word-break: break-all;
+		word-wrap: break-word;
+		/* #endif */
+	}
+
+	.icon-files {
+		/* #ifndef APP-NVUE */
+		position: static;
+		background-color: initial;
+		/* #endif */
+	}
+
+	.is-list-card {
+		border: 1px #eee solid;
+		margin-bottom: 5px;
+		border-radius: 5px;
+		box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);
+		padding: 5px;
+	}
+
+	.files__image {
+		width: 40px;
+		height: 40px;
+		margin-right: 10px;
+	}
+
+	.header-image {
+		width: 100%;
+		height: 100%;
+	}
+
+	.is-text-box {
+		border: 1px #eeeeee solid;
+		border-radius: 5px;
+	}
+
+	.is-text-image {
+		width: 25px;
+		height: 25px;
+		margin-left: 5px;
+	}
+
+	.rotate {
+		position: absolute;
+		transform: rotate(90deg);
+	}
+
+	.icon-del-box {
+		@include components.flex;
+		/* #ifndef APP-NVUE */
+		margin: auto 0;
+		/* #endif */
+		align-items: center;
+		justify-content: center;
+		position: absolute;
+		top: 0px;
+		bottom: 0;
+		right: 5px;
+		height: 26px;
+		width: 26px;
+		z-index: 2;
+		transform: rotate(-45deg);
+	}
+
+	.icon-del {
+		width: 15px;
+		height: 1px;
+		background-color: #333;
+	}
+
+	/* #ifdef H5 */
+	@media all and (min-width: 768px) {
+		.fu-file-picker__files {
+			max-width: 375px;
+		}
+	}
+	/* #endif */
+</style>