cy-element-ui 1.0.0

package/packages/treeselect/src/main.vue

@@ -0,0 +1,331 @@
+<template>
+	<div class="cy-treeselect">
+		<el-popover v-model="popoverOpen" placement="bottom-start" width="300" trigger="click" :popper-class="popperClass" @show="popoverOpen = true" @hide="popoverOpen = false">
+			<div class="cy-treeselect-select-con">
+				<div v-if="showCheckStrictly" class="cy-treeselect-select-con-t">
+					<el-checkbox v-model="isCheckStrictly">父子节点联动</el-checkbox>
+				</div>
+				
+				<div class="cy-treeselect-select-con-c">
+					<el-tree
+						ref="tree"
+						:data="treeOptions"
+						:show-checkbox="multiple"
+						:node-key="defaultOptions.id"
+						:check-strictly="!isCheckStrictly"
+						:props="defaultOptions"
+						:expand-on-click-node="false"
+						:default-expand-all="defaultExpandAll"
+						@check="treeCheck"
+						@node-click="treeClick"
+					></el-tree>
+				</div>
+			</div>
+			
+			<div slot="reference" class="cy-treeselect-select" :class="size" :style="vStyle">
+				<div class="cy-treeselect-select-v">
+					<span v-if="checkedArr.length < 1" class="cy-treeselect-select-v-placeholder">{{ placeholder }}</span>
+					<span v-else>{{ checkedArr.map(item => item[defaultOptions.label]).join() }}</span>
+				</div>
+				
+				<div class="cy-treeselect-select-v-icon" @mouseenter="isClearIcon = true" @mouseleave="isClearIcon = false">
+					<i v-if="isClearIcon && clearable" class="el-icon-circle-close" @click.stop="handleClear"></i>
+					<i v-else class="el-icon-arrow-down cy-treeselect-select-v-arrow" :class="{ 'cy-treeselect-select-v-arrow-show': popoverOpen }"></i>
+				</div>
+			</div>
+		</el-popover>
+	</div>
+</template>
+
+<script>
+import ElCheckbox from 'element-ui/packages/checkbox';
+import ElPopover from 'element-ui/packages/popover';
+
+export default {
+	name: 'CyTreeselect',
+	mixins: [ElCheckbox, ElPopover],
+	model: {
+		prop: 'value',
+		event: 'change',
+	},
+	props: {
+		value: {
+			type: [String, Number, Array],
+			default: ''
+		},
+
+		options: {
+			type: Array,
+			default: []
+		},
+
+		placeholder: {
+			type: String,
+			default: ''
+		},
+
+		// 尺寸
+		size: {
+			type: String,
+		},
+
+		// 是否显示 父子节点是否联动 多选框
+		showCheckStrictly: {
+			type: Boolean,
+			default: true
+		},
+
+		// 父子节点是否联动
+		checkStrictly: {
+			type: Boolean,
+			default: true
+		},
+
+		// 是否显示清空按钮
+		clearable: {
+			type: Boolean,
+			default: false
+		},
+
+		// 是否多选
+		multiple: {
+			type: Boolean,
+			default: false,
+		},
+
+		// 默认数据参数选项
+		defaultOptions: {
+			type: Object,
+			default: () => {
+				return {
+					children: 'children',
+					label: 'label',
+					id: 'id'
+				}
+			}
+		},
+
+		// 树数据区域的样式
+		vStyle: {
+			type: [Array, String, Object],
+			default: ''
+		},
+
+		// 树数据区域外层popover的class
+		popperClass: {
+			type: String,
+			default: ''
+		},
+
+		// 是否默认展开所有节点
+		defaultExpandAll: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			isCheckStrictly: true, // 父子节点是否联动
+			popoverOpen: false, // 显示状态
+			isClearIcon: false, // 清空按钮显示状态
+
+			treeOptions: [], // 部门树列表
+			treeArr: [], // 部门列表
+		}
+	},
+	computed: {
+		// 当前选中的数组
+		checkedArr() {
+			if (this.multiple) {
+				let arr = [];
+				this.value && this.value.forEach(id => {
+					let cItem = this.treeArr.filter(tItem => tItem[this.defaultOptions.id] === id)[0];
+					if (cItem) arr.push(cItem);
+				})
+				return arr
+			} else {
+				let cItem = this.treeArr.filter(tItem => tItem[this.defaultOptions.id] === Number(this.value))[0];
+				return cItem ? [cItem] : []
+			}
+		}
+	},
+	watch: {
+		checkStrictly: {
+			immediate: true,
+			handler() {
+				this.isCheckStrictly = this.checkStrictly;
+			}
+		},
+
+		value: {
+			immediate: true,
+			deep: true,
+			handler() {
+				this.$nextTick(() => {
+					this.init();
+				})
+			}
+		},
+
+		options: {
+			deep: true,
+			immediate: true,
+			handler() {
+				this.treeOptions = this.options;
+				this.treeArr = this.turnFormatTreeData([], this.treeOptions, 0);
+			}
+		}
+	},
+	created() {
+
+	},
+	methods: {
+		init() {
+			// 初始化是根据value，设置已选中项
+			let arr = [];
+			if (this.multiple) {
+				arr = this.value ? this.value : [];
+			} else {
+				arr = this.value ? [this.value] : []
+			}
+			this.$nextTick(() => {
+				this.$refs.tree.setCheckedKeys(arr);
+			})
+		},
+
+		/**
+		 * 树复选框点击
+		 */
+		treeCheck(value, { checkedKeys, checkedNodes }) {
+			let arr = [];
+			arr = checkedNodes;
+			let idArr = arr.map(item => item[this.defaultOptions.id]);
+			// 返回id数组
+			this.$emit('change', this.multiple ? idArr : idArr[0], this.multiple ? arr : arr[0]);
+		},
+
+		/**
+		 * 树节点点击
+		 */
+		treeClick(value, node, event) {
+			if (this.multiple) return;
+
+			this.$emit('change', value.id, value);
+			this.popoverOpen = false;
+		},
+
+		/**
+		 * 清空
+		 */
+		handleClear() {
+			this.$emit('change', this.multiple ? [] : '', this.multiple ? [] : null);
+			this.$refs.tree.setCheckedKeys([]);
+		},
+
+		/**
+		 * 部门树 格式化为 单例数组
+		 */
+		turnFormatTreeData(arr, data, pId) {
+			data.forEach(item => {
+				let cItem = JSON.parse(JSON.stringify(item));
+				delete cItem[this.defaultOptions.children];
+				cItem.pId = pId;
+				arr.push(cItem);
+
+				if (item[this.defaultOptions.children] && item[this.defaultOptions.children].length > 0) {
+					this.turnFormatTreeData(arr, item[this.defaultOptions.children], item[this.defaultOptions.id]);
+				}
+			})
+			return arr
+		},
+	}
+};
+</script>
+
+<style scoped lang="scss">
+.cy-treeselect-select {
+	width: 217px;
+	height: 36px;
+	line-height: 36px;
+	border: 1px solid #DCDFE6;
+	border-radius: 4px;
+	padding: 0 29px 0 15px;
+	cursor: pointer;
+	overflow: hidden;
+	position: relative;
+	transition: all .3s;
+	
+	.cy-treeselect-select-v {
+		width: 100%;
+		color: #606266;
+		font-size: 14px;
+		white-space: nowrap;
+		overflow: auto;
+	}
+	
+	.cy-treeselect-select-v-placeholder {
+		color: #c0c4cc;
+	}
+	
+	.cy-treeselect-select-v-icon {
+		color: #C0C4CC;
+		position: absolute;
+		top: 0;
+		right: 9px;
+		
+		.cy-treeselect-select-v-arrow {
+			transform: rotateZ(0deg);
+			transition: all .3s;
+		}
+		
+		.cy-treeselect-select-v-arrow-show {
+			transform: rotateZ(-180deg);
+		}
+	}
+}
+
+.cy-treeselect-select.small {
+	height: 32px;
+	line-height: 32px;
+	
+	.cy-treeselect-select-v {
+		font-size: 13px;
+	}
+}
+
+.cy-treeselect-select.mini {
+	height: 28px;
+	line-height: 28px;
+	
+	.cy-treeselect-select-v {
+		font-size: 12px;
+	}
+}
+
+.cy-treeselect-select:hover {
+	border-color: #C0C4CC;
+}
+
+.cy-treeselect-select-con-t {
+	padding-bottom: 5px;
+	margin-bottom: 5px;
+	border-bottom: 1px solid #DCDFE6;
+}
+
+.cy-treeselect-select-con-c {
+	max-height: 300px;
+	overflow: auto;
+}
+
+.el-form-item--medium .el-form-item--content .cy-treeselect {
+	width: 100%;
+	height: 36px;
+	display: flex;
+	align-items: center;
+	
+	> span {
+		display: inline-block;
+		width: 100%;
+	}
+}
+</style>

package/packages/upload/index.js

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

package/packages/upload/src/ajax.js

@@ -0,0 +1,85 @@
+function getError(action, option, xhr) {
+	let msg;
+	if (xhr.response) {
+		msg = `${xhr.response.error || xhr.response}`;
+	} else if (xhr.responseText) {
+		msg = `${xhr.responseText}`;
+	} else {
+		msg = `fail to post ${action} ${xhr.status}`;
+	}
+
+	const err = new Error(msg);
+	err.status = xhr.status;
+	err.method = 'post';
+	err.url = action;
+	return err;
+}
+
+function getBody(xhr) {
+	const text = xhr.responseText || xhr.response;
+	if (!text) {
+		return text;
+	}
+
+	try {
+		return JSON.parse(text);
+	} catch (e) {
+		return text;
+	}
+}
+
+export default function upload(option) {
+	if (typeof XMLHttpRequest === 'undefined') {
+		return;
+	}
+
+	const xhr = new XMLHttpRequest();
+	const action = option.action;
+
+	if (xhr.upload) {
+		xhr.upload.onprogress = function progress(e) {
+			if (e.total > 0) {
+				e.percent = e.loaded / e.total * 100;
+			}
+			option.onProgress(e);
+		};
+	}
+
+	const formData = new FormData();
+
+	if (option.data) {
+		Object.keys(option.data).forEach(key => {
+			formData.append(key, option.data[key]);
+		});
+	}
+
+	formData.append(option.filename, option.file, option.file.name);
+
+	xhr.onerror = function error(e) {
+		option.onError(e);
+	};
+
+	xhr.onload = function onload() {
+		if (xhr.status < 200 || xhr.status >= 300) {
+			return option.onError(getError(action, option, xhr));
+		}
+
+		option.onSuccess(getBody(xhr));
+	};
+
+	xhr.open('post', action, true);
+
+	if (option.withCredentials && 'withCredentials' in xhr) {
+		xhr.withCredentials = true;
+	}
+
+	const headers = option.headers || {};
+
+	for (let item in headers) {
+		if (headers.hasOwnProperty(item) && headers[item] !== null) {
+			xhr.setRequestHeader(item, headers[item]);
+		}
+	}
+	xhr.send(formData);
+	return xhr;
+}