cy-element-ui 1.0.26 → 1.0.28

package/packages/fileUpload/index.js

@@ -1,8 +0,0 @@
-import FileUpload from './src/main';
-
-/* istanbul ignore next */
-FileUpload.install = function(Vue) {
-	Vue.component(FileUpload.name, FileUpload);
-};
-
-export default FileUpload;

package/packages/fileUpload/src/main.vue

@@ -1,430 +0,0 @@
-<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/subTitle/index.js

@@ -1,8 +0,0 @@
-import SubTitle from './src/main';
-
-/* istanbul ignore next */
-SubTitle.install = function(Vue) {
-	Vue.component(SubTitle.name, SubTitle);
-};
-
-export default SubTitle;

package/packages/subTitle/src/main.vue

@@ -1,33 +0,0 @@
-<template>
-	<div class="cy-sub-title" :style="lineColorStyle">
-		<div class="left">
-			<slot>{{ title }}</slot>
-		</div>
-		
-		<div class="right">
-			<slot name="right"></slot>
-		</div>
-	</div>
-</template>
-
-<script>
-export default {
-	name: 'CySubTitle',
-	props: {
-		title: {
-			type: String,
-			default: ''
-		},
-		
-		lineColor: {
-			type: String,
-			default: ''
-		}
-	},
-	computed: {
-		lineColorStyle() {
-			return this.lineColor ? `border-color: ${ this.lineColor };` : ''
-		}
-	},
-};
-</script>

package/packages/tabDialog/index.js

@@ -1,23 +0,0 @@
-import TabDialog from './src/main';
-import dialogDrag from './src/dialog/drag'
-import dialogDragWidth from './src/dialog/dragWidth'
-import dialogDragHeight from './src/dialog/dragHeight'
-
-export const TabDialogDirective = (Vue) => {
-	// 注册指令
-	Vue.directive('dialogDrag', dialogDrag)
-	Vue.directive('dialogDragWidth', dialogDragWidth)
-	Vue.directive('dialogDragHeight', dialogDragHeight)
-}
-
-/* istanbul ignore next */
-TabDialog.install = function(Vue) {
-	// 注册组件
-	Vue.component(TabDialog.name, TabDialog);
-	// 注册指令
-	Vue.directive('dialogDrag', dialogDrag)
-	Vue.directive('dialogDragWidth', dialogDragWidth)
-	Vue.directive('dialogDragHeight', dialogDragHeight)
-};
-
-export default TabDialog;

package/packages/tabDialog/src/dialog/drag.js

@@ -1,63 +0,0 @@
-/**
- * v-dialogDrag 弹窗拖拽
- * Copyright (c) 2019 ruoyi
- */
-
-export default {
-	bind(el, binding, vnode, oldVnode) {
-		const value = binding.value
-		if (value === false) return
-		// 获取拖拽内容头部
-		const dialogHeaderEl = el.querySelector('.el-dialog__header')
-		const dragDom = el.querySelector('.el-dialog')
-		dialogHeaderEl.style.cursor = 'move'
-		// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
-		const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
-		dragDom.style.position = 'absolute'
-		dragDom.style.marginTop = 0
-		let width = dragDom.style.width
-		if (width.includes('%')) {
-			width = +document.body.clientWidth * (+width.replace(/\%/g, '') / 100)
-		} else {
-			width = +width.replace(/\px/g, '')
-		}
-		dragDom.style.left = `${ (document.body.clientWidth - width) / 2 }px`
-		// 鼠标按下事件
-		dialogHeaderEl.onmousedown = (e) => {
-			// 鼠标按下，计算当前元素距离可视区的距离 (鼠标点击位置距离可视窗口的距离)
-			const disX = e.clientX - dialogHeaderEl.offsetLeft
-			const disY = e.clientY - dialogHeaderEl.offsetTop
-
-			// 获取到的值带px 正则匹配替换
-			let styL, styT
-
-			// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
-			if (sty.left.includes('%')) {
-				styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
-				styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
-			} else {
-				styL = +sty.left.replace(/\px/g, '')
-				styT = +sty.top.replace(/\px/g, '')
-			}
-
-			// 鼠标拖拽事件
-			document.onmousemove = function(e) {
-				// 通过事件委托，计算移动的距离 （开始拖拽至结束拖拽的距离）
-				const l = e.clientX - disX
-				const t = e.clientY - disY
-
-				let finallyL = l + styL
-				let finallyT = t + styT
-
-				// 移动当前元素
-				dragDom.style.left = `${ finallyL }px`
-				dragDom.style.top = `${ finallyT }px`
-			}
-
-			document.onmouseup = function(e) {
-				document.onmousemove = null
-				document.onmouseup = null
-			}
-		}
-	}
-}

package/packages/tabDialog/src/dialog/dragHeight.js

@@ -1,34 +0,0 @@
-/**
- * v-dialogDragWidth 可拖动弹窗高度（右下角）
- * Copyright (c) 2019 ruoyi
- */
-
-export default {
-	bind(el) {
-		const dragDom = el.querySelector('.el-dialog')
-		const lineEl = document.createElement('div')
-		lineEl.style = 'width: 6px; background: inherit; height: 10px; position: absolute; right: 0; bottom: 0; margin: auto; z-index: 1; cursor: nwse-resize;'
-		lineEl.addEventListener('mousedown',
-			function(e) {
-				// 鼠标按下，计算当前元素距离可视区的距离
-				const disX = e.clientX - el.offsetLeft
-				const disY = e.clientY - el.offsetTop
-				// 当前宽度 高度
-				const curWidth = dragDom.offsetWidth
-				const curHeight = dragDom.offsetHeight
-				document.onmousemove = function(e) {
-					e.preventDefault() // 移动时禁用默认事件
-					// 通过事件委托，计算移动的距离
-					const xl = e.clientX - disX
-					const yl = e.clientY - disY
-					dragDom.style.width = `${ curWidth + xl }px`
-					dragDom.style.height = `${ curHeight + yl }px`
-				}
-				document.onmouseup = function(e) {
-					document.onmousemove = null
-					document.onmouseup = null
-				}
-			}, false)
-		dragDom.appendChild(lineEl)
-	}
-}

package/packages/tabDialog/src/dialog/dragWidth.js

@@ -1,30 +0,0 @@
-/**
- * v-dialogDragWidth 可拖动弹窗宽度（右侧边）
- * Copyright (c) 2019 ruoyi
- */
-
-export default {
-	bind(el) {
-		const dragDom = el.querySelector('.el-dialog')
-		const lineEl = document.createElement('div')
-		lineEl.style = 'width: 5px; background: inherit; height: 80%; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; z-index: 1; cursor: w-resize;'
-		lineEl.addEventListener('mousedown',
-			function(e) {
-				// 鼠标按下，计算当前元素距离可视区的距离
-				const disX = e.clientX - el.offsetLeft
-				// 当前宽度
-				const curWidth = dragDom.offsetWidth
-				document.onmousemove = function(e) {
-					e.preventDefault() // 移动时禁用默认事件
-					// 通过事件委托，计算移动的距离
-					const l = e.clientX - disX
-					dragDom.style.width = `${ curWidth + l }px`
-				}
-				document.onmouseup = function(e) {
-					document.onmousemove = null
-					document.onmouseup = null
-				}
-			}, false)
-		dragDom.appendChild(lineEl)
-	}
-}