cy-element-ui 1.0.57 → 1.0.59

package/packages/fileUpload/src/main.vue

@@ -1,430 +1,430 @@
-<template>
-	<div class="cy-file-upload">
-		<div class="cy-file-upload-btn-box">
-			<template v-if="showImportTemplate">
-				<!-- 下载模板按钮 -->
-				<el-button size="mini" type="success" :size="btnSize" class="cy-file-upload-uploader" style="margin-right: 10px;" @click="importTemplate">下载模板</el-button>
-			</template>
-			
-			<el-upload
-				v-if="!disabled"
-				:action="baseUrl + uploadFileUrl"
-				:before-upload="handleBeforeUpload"
-				:data="data"
-				:name="name"
-				:file-list="fileList"
-				:limit="limit"
-				:accept="fileAccept"
-				:on-error="handleUploadError"
-				:on-exceed="handleExceed"
-				:on-success="handleUploadSuccess"
-				:show-file-list="false"
-				:headers="headers"
-				class="cy-file-upload-uploader"
-				ref="upload"
-			>
-				<!-- 上传按钮 -->
-				<el-button :size="btnSize" :type="btnColor" :loading="downloadLoading" :icon="btnIcon" :plain="btnPlain">{{ btnText }}</el-button>
-			</el-upload>
-		</div>
-		
-		<!-- 上传提示 -->
-		<div class="el-upload__tip" slot="tip" v-if="showTip && !onlyBtn && !disabled">
-			请上传
-			<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b></template>
-			<template v-if="fileType && !fileType.includes('*')"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b></template>
-			的文件
-		</div>
-		
-		<!-- 文件列表 -->
-		<template v-if="!onlyBtn">
-			<ul v-if="!isThumbnail" class="cy-file-upload-list el-upload-list el-upload-list--text">
-				<li v-for="(file, index) in fileList" :key="file.id" class="el-upload-list__item ele-upload-list__item-content">
-					<el-link class="link_icon" :underline="false" @click.native="downloadAttach(file)">
-						<span class="el-icon-document"> {{ getFileName(file.file_name) }} </span>
-					</el-link>
-					<div class="ele-upload-list__item-content-action flex_shrink">
-						<el-link v-if="isDownload" :underline="false" @click="downloadAttach(file)" type="primary">下载</el-link>
-						<el-link v-if="isPreview" :underline="false" @click="previewFile(file)" type="primary">预览</el-link>
-						<el-link v-if="!disabled" :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
-					</div>
-				</li>
-			</ul>
-			
-			<!--			<FileTypeList-->
-			<!--				v-else-->
-			<!--				:list="fileList"-->
-			<!--				:disabled="disabled"-->
-			<!--				:isDownload="isDownload"-->
-			<!--				:isPreview="isPreview"-->
-			<!--				:imgRatio="imgRatio"-->
-			<!--				@download="downloadAttach"-->
-			<!--				@click="previewFile"-->
-			<!--				@delete="handleDelete"-->
-			<!--			></FileTypeList>-->
-		</template>
-	</div>
-</template>
-
-<script>
-import ElUpload from 'cy-element-ui/packages/upload';
-import ElLink from 'cy-element-ui/packages/link';
-import ElButton from 'cy-element-ui/packages/button';
-
-export default {
-	name: 'CyFileUpload',
-	component: [
-		ElUpload,
-		ElLink,
-		ElButton,
-	],
-	props: {
-		// 值
-		value: {
-			type: [Array, String],
-			default: () => [],
-		},
-		// 数量限制
-		limit: {
-			type: Number,
-			default: 1000,
-		},
-		// 大小限制(MB)
-		fileSize: {
-			type: Number,
-			default: 1000,
-		},
-		// 文件类型, ['*']不限制文件类型， 例如['png', 'jpg', 'jpeg']
-		fileType: {
-			type: Array,
-			default: () => ['jpg', 'jpeg', 'png', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf'],
-		},
-		// 是否显示提示
-		isShowTip: {
-			type: Boolean,
-			default: true
-		},
-		// 上传的图片服务器地址
-		uploadFileUrl: {
-			type: String,
-			default: '/system/resource_file/upload_file'
-		},
-		// 请求参数
-		data: {
-			type: Object,
-			default: () => {
-				return {}
-			}
-		},
-		// 上传时的文件字段名
-		name: {
-			type: String,
-			default: 'file'
-		},
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		// 是否显示预览按钮
-		isPreview: {
-			type: Boolean,
-			default: true
-		},
-		// 只显示上传按钮
-		onlyBtn: {
-			type: Boolean,
-			default: false
-		},
-		// 上传按钮 文字
-		btnText: {
-			type: String,
-			default: '选取文件'
-		},
-		// 上传按钮 大小
-		btnSize: {
-			type: String,
-			default: 'mini'
-		},
-		// 上传按钮 颜色
-		btnColor: {
-			type: String,
-			default: 'primary'
-		},
-		// 上传按钮 图标
-		btnIcon: {
-			type: String,
-			default: ''
-		},
-		// 上传按钮 是否为朴素按钮
-		btnPlain: {
-			type: Boolean,
-			default: false
-		},
-		// 是否显示上传成功提示
-		isSuccessMsg: {
-			type: Boolean,
-			default: true
-		},
-		// 是否显示下载模板按钮
-		showImportTemplate: {
-			type: Boolean,
-			default: false
-		},
-		// 下载模板地址
-		importTemplateName: {
-			type: String,
-			default: 'template.xls'
-		},
-		// 列表是否以缩略图展示
-		isThumbnail: {
-			type: Boolean,
-			default: false
-		},
-		// 图片预览压缩率0-1，仅isThumbnail为true有效
-		imgRatio: {
-			type: Number,
-			default: 1
-		},
-		// 是否允许下载
-		isDownload: {
-			type: Boolean,
-			default: true,
-		},
-		// 删除前回调, 必须为Promise
-		deleteBefore: {
-			type: Function,
-		},
-	
-		// 服务器转发代理规则，匹配请求路径的前缀
-		baseUrl: {
-			type: String,
-			default: ''
-		},
-		// 获取token的方法
-		getToken: {
-			type: Function,
-			default: () => {
-				return ''
-			}
-		},
-		// 下载接口方法，必须返回一个Promise
-		fileDownLoad: {
-			type: Function,
-			default: () => Promise.resolve()
-		},
-		// 文件预览方法
-		getFilePreviewUrl: {
-			type: Function,
-			default: () => {
-				return ''
-			}
-		}
-	},
-	data() {
-		return {
-			fileList: [],
-			downloadLoading: false,
-		};
-	},
-	watch: {
-		value: {
-			handler(val) {
-				if (val) {
-					if (typeof val === 'string') {
-						this.fileList = [{
-							file_name: this.getFileName(val),
-							file_path: val,
-							id: this.createUUID(),
-						}];
-					} else {
-						this.fileList = val.map(item => {
-							return Object.assign({}, item);
-						});
-					}
-				} else {
-					this.fileList = [];
-					return [];
-				}
-			},
-			deep: true,
-			immediate: true
-		}
-	},
-	computed: {
-		// 是否显示提示
-		showTip() {
-			return this.isShowTip && ((this.fileType && !this.fileType.includes('*')) || this.fileSize);
-		},
-		fileAccept() {
-			let arr = this.fileType.includes('*') ? [] : this.fileType.map(item => '.' + item);
-			return arr.join()
-		},
-		headers() {
-			return {
-				Authorization: 'Bearer ' + this.getToken(),
-			}
-		}
-	},
-	methods: {
-		/**
-		 * 上传前校检格式和大小
-		 */
-		handleBeforeUpload(file) {
-			this.downloadLoading = true;
-			// 校检文件类型
-			if (this.fileType && !this.fileType.includes('*')) {
-				let fileExtension = this.getFileExtension(file.name);
-				if (!this.fileType.includes(fileExtension)) {
-					this.$message.error(`文件格式不正确, 请上传${ this.fileType.join('/') }格式文件!`);
-					this.downloadLoading = false;
-					return false;
-				}
-			}
-			// 校检文件大小
-			if (this.fileSize) {
-				const isLt = file.size / 1024 / 1024 < this.fileSize;
-				if (!isLt) {
-					this.$message.error(`上传文件大小不能超过 ${ this.fileSize } MB!`);
-					this.downloadLoading = false;
-					return false;
-				}
-			}
-			return true;
-		},
-		
-		/**
-		 * 文件个数超出
-		 */
-		handleExceed() {
-			if (this.limit === 1) {
-				this.$message.error('只能上传单个文件!');
-			} else {
-				this.$message.error(`上传文件数量不能超过 ${ this.limit } 个!`);
-			}
-			this.downloadLoading = false;
-		},
-		
-		/**
-		 * 上传失败
-		 */
-		handleUploadError(err) {
-			this.$message.error('上传失败, 请重试');
-			this.downloadLoading = false;
-		},
-		
-		/**
-		 * 上传成功回调
-		 */
-		handleUploadSuccess(res, file) {
-			if (res.code !== 200) {
-				this.$message.error(res.msg);
-			} else {
-				if (this.isSuccessMsg) this.$message.success('上传成功');
-				this.fileList.push(res.data);
-			}
-			this.downloadLoading = false;
-			this.$emit('input', this.fileList);
-		},
-		
-		/**
-		 * 删除文件
-		 */
-		async handleDelete(index) {
-			if (this.deleteBefore) {
-				try {
-					const res = await this.deleteBefore(this.fileList[index], index);
-					if (!res) return;
-				} catch (e) {
-					console.log(e);
-					return;
-				}
-			}
-			this.fileList.splice(index, 1);
-			this.$emit('input', this.fileList);
-		},
-		
-		/**
-		 * 获取文件名称
-		 */
-		getFileName(name) {
-			if (name.lastIndexOf('/') > -1) {
-				return name.slice(name.lastIndexOf('/') + 1).toLowerCase();
-			} else {
-				return name;
-			}
-		},
-		
-		/**
-		 * 获取文件类型，后缀
-		 */
-		getFileExtension(name) {
-			if (name.lastIndexOf('.') > -1) {
-				return name.slice(name.lastIndexOf('.') + 1).toLowerCase();
-			}
-			return ''
-		},
-		
-		/**
-		 * 查看 预览
-		 */
-		previewFile(file) {
-			window.open(this.getFilePreviewUrl(file));
-		},
-		
-		/**
-		 * 附件下载
-		 * */
-		downloadAttach(file) {
-			if (!this.isDownload) return;
-			
-			let { id, file_name, file_type } = file;
-			this.downloadLoading = true;
-			this.fileDownLoad(id).then(res => {
-				const blob = new Blob([res]);
-				if ('download' in document.createElement('a')) {
-					const link = document.createElement('a');
-					link.download = file_name;
-					link.style.display = 'none';
-					link.href = URL.createObjectURL(blob);
-					document.body.appendChild(link);
-					link.click();
-					URL.revokeObjectURL(link.href);
-					document.body.removeChild(link);
-				} else {
-					navigator.msSaveBlob(blob, file_name);
-				}
-				this.downloadLoading = false;
-			})
-				.catch((err) => {
-					this.downloadLoading = false;
-					console.log(err);
-					this.$message.error('文件下载失败！');
-				});
-		},
-		
-		/**
-		 * 下载模板操作
-		 */
-		importTemplate() {
-			const link = document.createElement('a');
-			link.style.display = 'none';
-			link.setAttribute('href', '/static/' + this.importTemplateName);
-			link.download = this.importTemplateName; // 下载的文件名
-			document.body.appendChild(link);
-			link.click();
-			document.body.removeChild(link);
-		},
-		
-		/**
-		 * 自定义生成UUID
-		 */
-		createUUID() {
-			return 'xxxxxxxx-xxxx-4xxx-xxxx-xxxxxxxxxxxx'.replace(/[x]/g, c => {
-				let r = Math.random() * 16 | 0;
-				let	v = c === 'x' ? r : (r & 0x3 | 0x8);
-				return v.toString(16);
-			})
-		}
-	}
-}
-</script>
+<template>
+	<div class="cy-file-upload">
+		<div class="cy-file-upload-btn-box">
+			<template v-if="showImportTemplate">
+				<!-- 下载模板按钮 -->
+				<el-button size="mini" type="success" :size="btnSize" class="cy-file-upload-uploader" style="margin-right: 10px;" @click="importTemplate">下载模板</el-button>
+			</template>
+			
+			<el-upload
+				v-if="!disabled"
+				:action="baseUrl + uploadFileUrl"
+				:before-upload="handleBeforeUpload"
+				:data="data"
+				:name="name"
+				:file-list="fileList"
+				:limit="limit"
+				:accept="fileAccept"
+				:on-error="handleUploadError"
+				:on-exceed="handleExceed"
+				:on-success="handleUploadSuccess"
+				:show-file-list="false"
+				:headers="headers"
+				class="cy-file-upload-uploader"
+				ref="upload"
+			>
+				<!-- 上传按钮 -->
+				<el-button :size="btnSize" :type="btnColor" :loading="downloadLoading" :icon="btnIcon" :plain="btnPlain">{{ btnText }}</el-button>
+			</el-upload>
+		</div>
+		
+		<!-- 上传提示 -->
+		<div class="el-upload__tip" slot="tip" v-if="showTip && !onlyBtn && !disabled">
+			请上传
+			<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b></template>
+			<template v-if="fileType && !fileType.includes('*')"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b></template>
+			的文件
+		</div>
+		
+		<!-- 文件列表 -->
+		<template v-if="!onlyBtn">
+			<ul v-if="!isThumbnail" class="cy-file-upload-list el-upload-list el-upload-list--text">
+				<li v-for="(file, index) in fileList" :key="file.id" class="el-upload-list__item ele-upload-list__item-content">
+					<el-link class="link_icon" :underline="false" @click.native="downloadAttach(file)">
+						<span class="el-icon-document"> {{ getFileName(file.file_name) }} </span>
+					</el-link>
+					<div class="ele-upload-list__item-content-action flex_shrink">
+						<el-link v-if="isDownload" :underline="false" @click="downloadAttach(file)" type="primary">下载</el-link>
+						<el-link v-if="isPreview" :underline="false" @click="previewFile(file)" type="primary">预览</el-link>
+						<el-link v-if="!disabled" :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
+					</div>
+				</li>
+			</ul>
+			
+			<!--			<FileTypeList-->
+			<!--				v-else-->
+			<!--				:list="fileList"-->
+			<!--				:disabled="disabled"-->
+			<!--				:isDownload="isDownload"-->
+			<!--				:isPreview="isPreview"-->
+			<!--				:imgRatio="imgRatio"-->
+			<!--				@download="downloadAttach"-->
+			<!--				@click="previewFile"-->
+			<!--				@delete="handleDelete"-->
+			<!--			></FileTypeList>-->
+		</template>
+	</div>
+</template>
+
+<script>
+import ElUpload from 'element-ui/packages/upload';
+import ElLink from 'element-ui/packages/link';
+import ElButton from 'element-ui/packages/button';
+
+export default {
+	name: 'CyFileUpload',
+	component: [
+		ElUpload,
+		ElLink,
+		ElButton,
+	],
+	props: {
+		// 值
+		value: {
+			type: [Array, String],
+			default: () => [],
+		},
+		// 数量限制
+		limit: {
+			type: Number,
+			default: 1000,
+		},
+		// 大小限制(MB)
+		fileSize: {
+			type: Number,
+			default: 1000,
+		},
+		// 文件类型, ['*']不限制文件类型， 例如['png', 'jpg', 'jpeg']
+		fileType: {
+			type: Array,
+			default: () => ['jpg', 'jpeg', 'png', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf'],
+		},
+		// 是否显示提示
+		isShowTip: {
+			type: Boolean,
+			default: true
+		},
+		// 上传的图片服务器地址
+		uploadFileUrl: {
+			type: String,
+			default: '/system/resource_file/upload_file'
+		},
+		// 请求参数
+		data: {
+			type: Object,
+			default: () => {
+				return {}
+			}
+		},
+		// 上传时的文件字段名
+		name: {
+			type: String,
+			default: 'file'
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		// 是否显示预览按钮
+		isPreview: {
+			type: Boolean,
+			default: true
+		},
+		// 只显示上传按钮
+		onlyBtn: {
+			type: Boolean,
+			default: false
+		},
+		// 上传按钮 文字
+		btnText: {
+			type: String,
+			default: '选取文件'
+		},
+		// 上传按钮 大小
+		btnSize: {
+			type: String,
+			default: 'mini'
+		},
+		// 上传按钮 颜色
+		btnColor: {
+			type: String,
+			default: 'primary'
+		},
+		// 上传按钮 图标
+		btnIcon: {
+			type: String,
+			default: ''
+		},
+		// 上传按钮 是否为朴素按钮
+		btnPlain: {
+			type: Boolean,
+			default: false
+		},
+		// 是否显示上传成功提示
+		isSuccessMsg: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示下载模板按钮
+		showImportTemplate: {
+			type: Boolean,
+			default: false
+		},
+		// 下载模板地址
+		importTemplateName: {
+			type: String,
+			default: 'template.xls'
+		},
+		// 列表是否以缩略图展示
+		isThumbnail: {
+			type: Boolean,
+			default: false
+		},
+		// 图片预览压缩率0-1，仅isThumbnail为true有效
+		imgRatio: {
+			type: Number,
+			default: 1
+		},
+		// 是否允许下载
+		isDownload: {
+			type: Boolean,
+			default: true,
+		},
+		// 删除前回调, 必须为Promise
+		deleteBefore: {
+			type: Function,
+		},
+	
+		// 服务器转发代理规则，匹配请求路径的前缀
+		baseUrl: {
+			type: String,
+			default: ''
+		},
+		// 获取token的方法
+		getToken: {
+			type: Function,
+			default: () => {
+				return ''
+			}
+		},
+		// 下载接口方法，必须返回一个Promise
+		fileDownLoad: {
+			type: Function,
+			default: () => Promise.resolve()
+		},
+		// 文件预览方法
+		getFilePreviewUrl: {
+			type: Function,
+			default: () => {
+				return ''
+			}
+		}
+	},
+	data() {
+		return {
+			fileList: [],
+			downloadLoading: false,
+		};
+	},
+	watch: {
+		value: {
+			handler(val) {
+				if (val) {
+					if (typeof val === 'string') {
+						this.fileList = [{
+							file_name: this.getFileName(val),
+							file_path: val,
+							id: this.createUUID(),
+						}];
+					} else {
+						this.fileList = val.map(item => {
+							return Object.assign({}, item);
+						});
+					}
+				} else {
+					this.fileList = [];
+					return [];
+				}
+			},
+			deep: true,
+			immediate: true
+		}
+	},
+	computed: {
+		// 是否显示提示
+		showTip() {
+			return this.isShowTip && ((this.fileType && !this.fileType.includes('*')) || this.fileSize);
+		},
+		fileAccept() {
+			let arr = this.fileType.includes('*') ? [] : this.fileType.map(item => '.' + item);
+			return arr.join()
+		},
+		headers() {
+			return {
+				Authorization: 'Bearer ' + this.getToken(),
+			}
+		}
+	},
+	methods: {
+		/**
+		 * 上传前校检格式和大小
+		 */
+		handleBeforeUpload(file) {
+			this.downloadLoading = true;
+			// 校检文件类型
+			if (this.fileType && !this.fileType.includes('*')) {
+				let fileExtension = this.getFileExtension(file.name);
+				if (!this.fileType.includes(fileExtension)) {
+					this.$message.error(`文件格式不正确, 请上传${ this.fileType.join('/') }格式文件!`);
+					this.downloadLoading = false;
+					return false;
+				}
+			}
+			// 校检文件大小
+			if (this.fileSize) {
+				const isLt = file.size / 1024 / 1024 < this.fileSize;
+				if (!isLt) {
+					this.$message.error(`上传文件大小不能超过 ${ this.fileSize } MB!`);
+					this.downloadLoading = false;
+					return false;
+				}
+			}
+			return true;
+		},
+		
+		/**
+		 * 文件个数超出
+		 */
+		handleExceed() {
+			if (this.limit === 1) {
+				this.$message.error('只能上传单个文件!');
+			} else {
+				this.$message.error(`上传文件数量不能超过 ${ this.limit } 个!`);
+			}
+			this.downloadLoading = false;
+		},
+		
+		/**
+		 * 上传失败
+		 */
+		handleUploadError(err) {
+			this.$message.error('上传失败, 请重试');
+			this.downloadLoading = false;
+		},
+		
+		/**
+		 * 上传成功回调
+		 */
+		handleUploadSuccess(res, file) {
+			if (res.code !== 200) {
+				this.$message.error(res.msg);
+			} else {
+				if (this.isSuccessMsg) this.$message.success('上传成功');
+				this.fileList.push(res.data);
+			}
+			this.downloadLoading = false;
+			this.$emit('input', this.fileList);
+		},
+		
+		/**
+		 * 删除文件
+		 */
+		async handleDelete(index) {
+			if (this.deleteBefore) {
+				try {
+					const res = await this.deleteBefore(this.fileList[index], index);
+					if (!res) return;
+				} catch (e) {
+					console.log(e);
+					return;
+				}
+			}
+			this.fileList.splice(index, 1);
+			this.$emit('input', this.fileList);
+		},
+		
+		/**
+		 * 获取文件名称
+		 */
+		getFileName(name) {
+			if (name.lastIndexOf('/') > -1) {
+				return name.slice(name.lastIndexOf('/') + 1).toLowerCase();
+			} else {
+				return name;
+			}
+		},
+		
+		/**
+		 * 获取文件类型，后缀
+		 */
+		getFileExtension(name) {
+			if (name.lastIndexOf('.') > -1) {
+				return name.slice(name.lastIndexOf('.') + 1).toLowerCase();
+			}
+			return ''
+		},
+		
+		/**
+		 * 查看 预览
+		 */
+		previewFile(file) {
+			window.open(this.getFilePreviewUrl(file));
+		},
+		
+		/**
+		 * 附件下载
+		 * */
+		downloadAttach(file) {
+			if (!this.isDownload) return;
+			
+			let { id, file_name, file_type } = file;
+			this.downloadLoading = true;
+			this.fileDownLoad(id).then(res => {
+				const blob = new Blob([res]);
+				if ('download' in document.createElement('a')) {
+					const link = document.createElement('a');
+					link.download = file_name;
+					link.style.display = 'none';
+					link.href = URL.createObjectURL(blob);
+					document.body.appendChild(link);
+					link.click();
+					URL.revokeObjectURL(link.href);
+					document.body.removeChild(link);
+				} else {
+					navigator.msSaveBlob(blob, file_name);
+				}
+				this.downloadLoading = false;
+			})
+				.catch((err) => {
+					this.downloadLoading = false;
+					console.log(err);
+					this.$message.error('文件下载失败！');
+				});
+		},
+		
+		/**
+		 * 下载模板操作
+		 */
+		importTemplate() {
+			const link = document.createElement('a');
+			link.style.display = 'none';
+			link.setAttribute('href', '/static/' + this.importTemplateName);
+			link.download = this.importTemplateName; // 下载的文件名
+			document.body.appendChild(link);
+			link.click();
+			document.body.removeChild(link);
+		},
+		
+		/**
+		 * 自定义生成UUID
+		 */
+		createUUID() {
+			return 'xxxxxxxx-xxxx-4xxx-xxxx-xxxxxxxxxxxx'.replace(/[x]/g, c => {
+				let r = Math.random() * 16 | 0;
+				let	v = c === 'x' ? r : (r & 0x3 | 0x8);
+				return v.toString(16);
+			})
+		}
+	}
+}
+</script>