cy-element-ui 1.0.28 → 1.0.30

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/form/src/form-item.vue

@@ -13,7 +13,7 @@
 			:is-auto-width="labelStyle && labelStyle.width === 'auto'"
 			:update-all="form.labelWidth === 'auto'">
 			<label :for="labelFor" class="el-form-item__label" :style="labelStyle" v-if="label || $slots.label">
-				<slot name="label">{{label + form.labelSuffix}}</slot>
+				<slot name="label">{{ label + form.labelSuffix }}</slot>
 			</label>
 		</label-wrap>
 		<div class="el-form-item__content" :style="contentStyle">
@@ -31,7 +31,7 @@
 								: (elForm && elForm.inlineMessage || false)
 						}"
 					>
-						{{validateMessage}}
+						{{ validateMessage }}
 					</div>
 				</slot>
 			</transition>
@@ -288,7 +288,7 @@
 				this.validate('change');
 			},
 			updateComputedLabelWidth(width) {
-				this.computedLabelWidth = width ? `${width}px` : '';
+				this.computedLabelWidth = width ? `${ width }px` : '';
 			},
 			addValidateEvents() {
 				const rules = this.getRules();

package/packages/form/src/form.vue

@@ -64,7 +64,7 @@
 			autoLabelWidth() {
 				if (!this.potentialLabelWidthArr.length) return 0;
 				const max = Math.max(...this.potentialLabelWidthArr);
-				return max ? `${max}px` : '';
+				return max ? `${ max }px` : '';
 			}
 		},
 		data() {

package/packages/image/src/image-viewer.vue

@@ -70,7 +70,7 @@ const Mode = {
 const mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel';
 
 export default {
-	name: 'elImageViewer',
+	name: 'ElImageViewer',
 
 	props: {
 		urlList: {
@@ -135,10 +135,10 @@ export default {
 		imgStyle() {
 			const { scale, deg, offsetX, offsetY, enableTransition } = this.transform;
 			const style = {
-				transform: `scale(${scale}) rotate(${deg}deg)`,
+				transform: `scale(${ scale }) rotate(${ deg }deg)`,
 				transition: enableTransition ? 'transform .3s' : '',
-				'margin-left': `${offsetX}px`,
-				'margin-top': `${offsetY}px`
+				'margin-left': `${ offsetX }px`,
+				'margin-top': `${ offsetY }px`
 			};
 			if (this.mode === Mode.CONTAIN) {
 				style.maxWidth = style.maxHeight = '100%';

package/packages/infinite-scroll/src/main.js

@@ -66,7 +66,7 @@ const getScrollOptions = (el, vm) => {
 
 	return entries(attributes).reduce((map, [key, option]) => {
 		const { type, default: defaultValue } = option;
-		let value = el.getAttribute(`infinite-scroll-${key}`);
+		let value = el.getAttribute(`infinite-scroll-${ key }`);
 		value = isUndefined(vm[value]) ? value : vm[value];
 		switch (type) {
 			case Number:
@@ -113,8 +113,7 @@ const handleScroll = function(cb) {
 	} else if (observer) {
 		observer.disconnect();
 		this[scope].observer = null;
-	}
-
+	}
 };
 
 export default {

package/packages/input/src/calcTextareaHeight.js

@@ -44,7 +44,7 @@ function calculateNodeStyling(targetElement) {
 	);
 
 	const contextStyle = CONTEXT_STYLE
-		.map(name => `${name}:${style.getPropertyValue(name)}`)
+		.map(name => `${ name }:${ style.getPropertyValue(name) }`)
 		.join(';');
 
 	return { contextStyle, paddingSize, borderSize, boxSizing };
@@ -67,7 +67,7 @@ export default function calcTextareaHeight(
 		contextStyle
 	} = calculateNodeStyling(targetElement);
 
-	hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`);
+	hiddenTextarea.setAttribute('style', `${ contextStyle };${ HIDDEN_STYLE }`);
 	hiddenTextarea.value = targetElement.value || targetElement.placeholder || '';
 
 	let height = hiddenTextarea.scrollHeight;

package/packages/input/src/input.vue

@@ -1,16 +1,16 @@
 <template>
 	<div :class="[
-		type === 'textarea' ? 'el-textarea' : 'el-input',
-		inputSize ? 'el-input--' + inputSize : '',
-		{
-			'is-disabled': inputDisabled,
-			'is-exceed': inputExceed,
-			'el-input-group': $slots.prepend || $slots.append,
-			'el-input-group--append': $slots.append,
-			'el-input-group--prepend': $slots.prepend,
-			'el-input--prefix': $slots.prefix || prefixIcon,
-			'el-input--suffix': $slots.suffix || suffixIcon || clearable || showPassword
-		}
+			type === 'textarea' ? 'el-textarea' : 'el-input',
+			inputSize ? 'el-input--' + inputSize : '',
+			{
+				'is-disabled': inputDisabled,
+				'is-exceed': inputExceed,
+				'el-input-group': $slots.prepend || $slots.append,
+				'el-input-group--append': $slots.append,
+				'el-input-group--prepend': $slots.prepend,
+				'el-input--prefix': $slots.prefix || prefixIcon,
+				'el-input--suffix': $slots.suffix || suffixIcon || clearable || showPassword
+			}
 		]"
 		@mouseenter="hovering = true"
 		@mouseleave="hovering = false"
@@ -43,8 +43,8 @@
 			<span class="el-input__prefix" v-if="$slots.prefix || prefixIcon">
 				<slot name="prefix"></slot>
 				<i class="el-input__icon"
-					 v-if="prefixIcon"
-					 :class="prefixIcon">
+					v-if="prefixIcon"
+					:class="prefixIcon">
 				</i>
 			</span>
 			<!-- 后置内容 -->
@@ -373,7 +373,7 @@
 				this.$emit('change', event.target.value);
 			},
 			calcIconOffset(place) {
-				let elList = [].slice.call(this.$el.querySelectorAll(`.el-input__${place}`) || []);
+				let elList = [].slice.call(this.$el.querySelectorAll(`.el-input__${ place }`) || []);
 				if (!elList.length) return;
 				let el = null;
 				for (let i = 0; i < elList.length; i++) {
@@ -390,7 +390,7 @@
 
 				const pendant = pendantMap[place];
 				if (this.$slots[pendant]) {
-					el.style.transform = `translateX(${place === 'suffix' ? '-' : ''}${this.$el.querySelector(`.el-input-group__${pendant}`).offsetWidth}px)`;
+					el.style.transform = `translateX(${ place === 'suffix' ? '-' : '' }${ this.$el.querySelector(`.el-input-group__${ pendant }`).offsetWidth }px)`;
 				} else {
 					el.removeAttribute('style');
 				}

package/packages/menu/src/menu-item-group.vue

@@ -1,7 +1,7 @@
 <template>
 	<li class="el-menu-item-group">
 		<div class="el-menu-item-group__title" :style="{paddingLeft: levelPadding + 'px'}">
-			<template v-if="!$slots.title">{{title}}</template>
+			<template v-if="!$slots.title">{{ title }}</template>
 			<slot v-else name="title"></slot>
 		</div>
 		<ul>

package/packages/menu/src/menu.vue

@@ -7,7 +7,7 @@
 	export default {
 		name: 'ElMenu',
 
-		render (h) {
+		render(h) {
 			const component = (
 				<ul
 					role="menubar"
@@ -16,7 +16,7 @@
 					class={{
 						'el-menu--horizontal': this.mode === 'horizontal',
 						'el-menu--collapse': this.collapse,
-						"el-menu": true
+						'el-menu': true
 					}}
 				>
 					{ this.$slots.default }
@@ -139,8 +139,8 @@
 			}
 		},
 		watch: {
-			defaultActive(value){
-				if(!this.items[value]){
+			defaultActive(value) {
+				if (!this.items[value]) {
 					this.activeIndex = null
 				}
 				this.updateActiveIndex(value)

package/packages/menu/src/submenu.vue

@@ -178,8 +178,7 @@
 				}
 				this.dispatch('ElMenu', 'submenu-click', this);
 			},
-			handleMouseenter(event, showTimeout = this.showTimeout) {
-
+			handleMouseenter(event, showTimeout = this.showTimeout) {
 				if (!('ActiveXObject' in window) && event.type === 'focus' && !event.relatedTarget) {
 					return;
 				}
@@ -284,13 +283,13 @@
 					<div
 						ref="menu"
 						v-show={opened}
-						class={[`el-menu--${mode}`, popperClass]}
+						class={[`el-menu--${ mode }`, popperClass]}
 						on-mouseenter={($event) => this.handleMouseenter($event, 100)}
 						on-mouseleave={() => this.handleMouseleave(true)}
 						on-focus={($event) => this.handleMouseenter($event, 100)}>
 						<ul
 							role="menu"
-							class={['el-menu el-menu--popup', `el-menu--popup-${currentPlacement}`]}
+							class={['el-menu el-menu--popup', `el-menu--popup-${ currentPlacement }`]}
 							style={{ backgroundColor: rootMenu.backgroundColor || '' }}>
 							{$slots.default}
 						</ul>

package/packages/message/src/main.js

@@ -75,7 +75,7 @@ Message.close = function(id, userOnClose) {
 		}
 	}
 	if (len <= 1 || index === -1 || index > instances.length - 1) return;
-	for (let i = index; i < len - 1 ; i++) {
+	for (let i = index; i < len - 1; i++) {
 		let dom = instances[i].$el;
 		dom.style['top'] =
 			parseInt(dom.style['top'], 10) - removedHeight - 16 + 'px';

package/packages/notification/src/main.js

@@ -77,7 +77,7 @@ Notification.close = function(id, userOnClose) {
 	if (len <= 1) return;
 	const position = instance.position;
 	const removedHeight = instance.dom.offsetHeight;
-	for (let i = index; i < len - 1 ; i++) {
+	for (let i = index; i < len - 1; i++) {
 		if (instances[i].position === position) {
 			instances[i].dom.style[instance.verticalProperty] =
 				parseInt(instances[i].dom.style[instance.verticalProperty], 10) - removedHeight - 16 + 'px';

package/packages/pagination/src/pager.vue

@@ -134,7 +134,7 @@
 					}
 				} else if (showPrevMore && showNextMore) {
 					const offset = Math.floor(pagerCount / 2) - 1;
-					for (let i = currentPage - offset ; i <= currentPage + offset; i++) {
+					for (let i = currentPage - offset; i <= currentPage + offset; i++) {
 						array.push(i);
 					}
 				} else {