cy-element-ui 1.0.4 → 1.0.5

package/packages/fileUpload/src/main.vue

@@ -0,0 +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 '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: '/design/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>

package/packages/footer/src/main.vue

@@ -5,16 +5,16 @@
 </template>
 
 <script>
-	export default {
-		name: 'ElFooter',
+export default {
+	name: 'ElFooter',
 
-		componentName: 'ElFooter',
+	componentName: 'ElFooter',
 
-		props: {
-			height: {
-				type: String,
-				default: '60px'
-			}
+	props: {
+		height: {
+			type: String,
+			default: '60px'
 		}
-	};
+	}
+};
 </script>