cy-element-ui 1.0.40 → 1.0.41

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cy-element-ui",
-	"version": "1.0.40",
+	"version": "1.0.41",
 	"description": "基于ElementUI开发的组件",
 	"main": "lib/element-ui.common.js",
 	"files": [
@@ -22,11 +22,11 @@
 		"build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
 		"build:umd": "node build/bin/build-locale.js",
 		"clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage",
-		"deploy:build": "npm run build:file && cross-env NODE_ENV=production webpack --config build/webpack.demo.js && echo element.eleme.io>>examples/element-ui/CNAME",
+		"deploy:build": "npm run build:file && cross-env NODE_ENV=production NODE_OPTIONS=--openssl-legacy-provider webpack --config build/webpack.demo.js && echo element.eleme.io>>examples/element-ui/CNAME",
 		"deploy:extension": "cross-env NODE_ENV=production webpack --config build/webpack.extension.js",
 		"dev": "npm run bootstrap && npm run build:file && cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js",
 		"dev:play": "npm run build:file && cross-env NODE_ENV=development PLAY_ENV=true webpack-dev-server --config build/webpack.demo.js",
-		"dist": "npm run clean && npm run build:file && npm run lint && webpack --config build/webpack.conf.js && webpack --config build/webpack.common.js && webpack --config build/webpack.component.js && npm run build:utils && npm run build:umd && npm run build:theme",
+		"dist": "npm run clean && npm run build:file && npm run lint && cross-env NODE_OPTIONS=--openssl-legacy-provider webpack --config build/webpack.conf.js && cross-env NODE_OPTIONS=--openssl-legacy-provider webpack --config build/webpack.common.js && cross-env NODE_OPTIONS=--openssl-legacy-provider webpack --config build/webpack.component.js && npm run build:utils && npm run build:umd && npm run build:theme",
 		"lint": "eslint src/**/* test/**/* packages/**/* build/**/* --quiet",
 		"pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh && node build/bin/gen-indices.js",
 		"test": "npm run lint && npm run build:theme && cross-env CI_ENV=/dev/ BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
@@ -91,7 +91,6 @@
 		"babel-plugin-transform-vue-jsx": "^3.7.0",
 		"babel-preset-env": "^1.7.0",
 		"babel-preset-stage-2": "^6.24.1",
-		"babel-regenerator-runtime": "^6.5.0",
 		"chai": "^4.2.0",
 		"chokidar": "^1.7.0",
 		"copy-webpack-plugin": "^5.0.0",
@@ -133,11 +132,11 @@
 		"markdown-it-container": "^2.0.0",
 		"mini-css-extract-plugin": "^0.4.1",
 		"mocha": "^6.0.2",
-		"sass": "^1.32.0",
 		"optimize-css-assets-webpack-plugin": "^5.0.1",
 		"postcss": "^7.0.14",
 		"progress-bar-webpack-plugin": "^1.11.0",
 		"rimraf": "^2.5.4",
+		"sass": "^1.32.0",
 		"sass-loader": "^8.0.0",
 		"select-version-cli": "^0.0.2",
 		"shelljs": "^0.10.0",

package/packages/input-number/src/input-number.vue

@@ -5,13 +5,13 @@
 			'el-input-number',
 			inputNumberSize ? 'el-input-number--' + inputNumberSize : '',
 			{ 'is-disabled': inputNumberDisabled },
-			{ 'is-without-controls': !controls },
+			{ 'is-without-controls': !showControls },
 			{ 'is-controls-right': controlsAtRight }
 		]">
 		<span
 			class="el-input-number__decrease"
 			role="button"
-			v-if="controls"
+			v-if="showControls"
 			v-repeat-click="decrease"
 			:class="{'is-disabled': minDisabled}"
 			@keydown.enter="decrease">
@@ -20,7 +20,7 @@
 		<span
 			class="el-input-number__increase"
 			role="button"
-			v-if="controls"
+			v-if="showControls"
 			v-repeat-click="increase"
 			:class="{'is-disabled': maxDisabled}"
 			@keydown.enter="increase">
@@ -159,7 +159,10 @@
 				}
 			},
 			controlsAtRight() {
-				return this.controls && this.controlsPosition === 'right';
+				return this.showControls && this.controlsPosition === 'right';
+			},
+			showControls() {
+				return this.controls && !this.$attrs['data-unit'];
 			},
 			_elFormItemSize() {
 				return (this.elFormItem || {}).elFormItemSize;

package/packages/selectDisplayInput/index.js

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

package/packages/selectDisplayInput/src/main.vue

@@ -0,0 +1,75 @@
+<template>
+	<div class="cy-select-display-input">
+		<div class="select_display_input_box" :class="{ text_active: cursor, cursor: cursor && value }" @click="handleInfo">
+			<div class="text"><span>{{ value }}</span></div>
+			<span v-if="!value" class="placeholder">{{ placeholder }}</span>
+			<i v-if="showDelete" class="el-icon-circle-close delete" @click.stop="handleDelete"></i>
+		</div>
+		<el-button v-if="showBtn" type="primary" @click="handleClick">{{ btnText }}</el-button>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'CySelectDisplayInput',
+	props: {
+		// 文本框 需要显示的内容
+		value: {
+			type: [Number, String],
+			default: ''
+		},
+
+		// 文本框 的提示文本
+		placeholder: {
+			type: String,
+			default: ''
+		},
+
+		// 选择按钮 的文字
+		btnText: {
+			type: String,
+			default: '选择'
+		},
+
+		// 选择按钮 的显示条件
+		showBtn: {
+			type: Boolean,
+			default: true
+		},
+
+		// 是否显示 删除按钮
+		showDelete: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {}
+	},
+	computed: {
+		// 文本框 是否需要点击，如果为true，输入框中的字体会变蓝并将鼠标变为小手
+		cursor() {
+			// 判断父组件是否坚挺了info事件
+			return this.$listeners.info;
+		}
+	},
+	created() {
+
+	},
+	methods: {
+	handleInfo() {
+		if (this.value) {
+			this.$emit('info');
+		}
+	},
+
+		handleClick() {
+			this.$emit('click');
+		},
+
+		handleDelete() {
+			this.$emit('delete');
+		}
+	}
+}
+</script>

package/packages/theme-cy/src/base.scss

@@ -0,0 +1,3 @@
+*, *::before, *::after {
+	box-sizing: border-box;
+}

package/packages/theme-cy/src/index.scss

@@ -4,3 +4,4 @@
 @import "./subTitle.scss";
 @import "./tabDialog.scss";
 @import "./treeSelect.scss";
+@import "./selectDisplayInput.scss";

package/packages/theme-cy/src/selectDisplayInput.scss

@@ -0,0 +1,76 @@
+@import "./base.scss";
+
+.cy-select-display-input {
+	display: flex;
+	position: relative;
+
+	& > .el-button {
+		flex-shrink: 0;
+		margin-left: 10px;
+		height: 36px;
+		padding: 9px 15px;
+	}
+}
+
+.select_display_input_box {
+	width: 100%;
+	height: 36px;
+	color: #888888;
+	background-color: #F5F7FA;
+	border: 1px solid #DCDFE6;
+	border-radius: 4px;
+	padding: 0 15px;
+	position: relative;
+	overflow: hidden;
+	display: flex;
+	align-items: center;
+
+	&.text_active {
+		color: #1890ff;
+	}
+
+	&.cursor {
+		cursor: pointer;
+	}
+
+	.text {
+		width: 100%;
+		line-height: 34px;
+		overflow: auto;
+
+		&::-webkit-scrollbar {
+			display: none;
+		}
+
+		span {
+			white-space: nowrap;
+		}
+	}
+
+	&.cursor .text:hover {
+		cursor: pointer;
+	}
+
+	.placeholder {
+		color: rgba(192, 196, 204, 0.5);
+		text-shadow: 0 0 1px #c0c4cc;
+		position: absolute;
+		top: 50%;
+		left: 15px;
+		transform: translateY(-50%);
+	}
+
+	.delete {
+		color: #ff4949;
+		position: absolute;
+		top: 50%;
+		right: 5px;
+		transform: translateY(-50%);
+		cursor: pointer;
+		z-index: 10;
+
+		&:hover {
+			color: rgba(255, 73, 73, 0.5);
+		}
+	}
+}

package/packages/theme-cy/src/treeSelect.scss

@@ -9,7 +9,7 @@
 .cy-tree-select-select {
 	width: 217px;
 	height: 36px;
-	line-height: 36px;
+	line-height: 34px;
 	border: 1px solid #DCDFE6;
 	border-radius: 4px;
 	padding: 0 29px 0 15px;
@@ -33,7 +33,8 @@
 	.cy-tree-select-select-v-icon {
 		color: #C0C4CC;
 		position: absolute;
-		top: 0;
+		top: 50%;
+		transform: translateY(-50%);
 		right: 9px;
 
 		.cy-tree-select-select-v-arrow {
@@ -49,7 +50,7 @@
 
 .cy-tree-select-select.small {
 	height: 32px;
-	line-height: 32px;
+	line-height: 30px;
 
 	.cy-tree-select-select-v {
 		font-size: 13px;
@@ -58,7 +59,7 @@
 
 .cy-tree-select-select.mini {
 	height: 28px;
-	line-height: 28px;
+	line-height: 26px;
 
 	.cy-tree-select-select-v {
 		font-size: 12px;
@@ -69,6 +70,10 @@
 	border-color: #C0C4CC;
 }
 
+.cy-tree-select-select-con-s {
+	padding-bottom: 8px;
+}
+
 .cy-tree-select-select-con-t {
 	padding-bottom: 5px;
 	margin-bottom: 5px;

package/packages/treeSelect/src/main.vue

@@ -2,6 +2,15 @@
 	<div class="cy-tree-select">
 		<el-popover v-model="popoverOpen" placement="bottom-start" width="300" trigger="click" :popper-class="popperClass" @show="popoverOpen = true" @hide="popoverOpen = false">
 			<div class="cy-tree-select-select-con">
+				<div v-if="filterable" class="cy-tree-select-select-con-s">
+					<el-input
+						v-model="filterText"
+						placeholder="搜索"
+						prefix-icon="el-icon-search"
+						clearable
+						size="small"
+					></el-input>
+				</div>
 				<div v-if="showCheckStrictly" class="cy-tree-select-select-con-t">
 					<el-checkbox v-model="isCheckStrictly">父子节点联动</el-checkbox>
 				</div>
@@ -16,6 +25,7 @@
 						:props="defaultOptions"
 						:expand-on-click-node="false"
 						:default-expand-all="defaultExpandAll"
+						:filter-node-method="filterNode"
 						@check="treeCheck"
 						@node-click="treeClick"
 					></el-tree>
@@ -72,6 +82,12 @@ export default {
 			type: String,
 		},
 
+		// 是否显示搜索框
+		filterable: {
+			type: Boolean,
+			default: false
+		},
+
 		// 是否显示 父子节点是否联动 多选框
 		showCheckStrictly: {
 			type: Boolean,
@@ -134,6 +150,8 @@ export default {
 
 			treeOptions: [], // 部门树列表
 			treeArr: [], // 部门列表
+			filterText: '', // 搜索关键词
+			matchedNodeIds: [], // 匹配的节点ID集合
 		}
 	},
 	computed: {
@@ -177,12 +195,73 @@ export default {
 				this.treeOptions = this.options;
 				this.treeArr = this.turnFormatTreeData([], this.treeOptions, 0);
 			}
+		},
+
+		filterText(val) {
+			if (val) {
+				// 先找出所有匹配的节点及其子节点
+				this.matchedNodeIds = this.findMatchedNodes(val, this.treeOptions);
+				// 执行过滤
+				this.$refs.tree.filter(val);
+				// 展开所有匹配的节点
+				this.$nextTick(() => {
+					this.expandMatchedNodes();
+				});
+			} else {
+				this.matchedNodeIds = [];
+				this.$refs.tree.filter(val);
+			}
 		}
 	},
 	created() {
 
 	},
 	methods: {
+		/**
+		 * 树节点过滤
+		 */
+		filterNode(value, data) {
+			if (!value) return true;
+			// 如果当前节点或其祖先节点匹配了，就显示
+			return this.matchedNodeIds.includes(data[this.defaultOptions.id]);
+		},
+
+		/**
+		 * 查找所有匹配的节点及其子节点ID
+		 */
+		findMatchedNodes(value, nodes, parentMatched = false) {
+			let matchedIds = [];
+
+			nodes.forEach(node => {
+				const currentNodeMatched = node[this.defaultOptions.label].indexOf(value) !== -1;
+				const shouldShow = currentNodeMatched || parentMatched;
+
+				if (shouldShow) {
+					matchedIds.push(node[this.defaultOptions.id]);
+				}
+
+				// 递归处理子节点，如果当前节点或其祖先匹配了，子节点也应该匹配
+				if (node[this.defaultOptions.children] && node[this.defaultOptions.children].length > 0) {
+					const childIds = this.findMatchedNodes(value, node[this.defaultOptions.children], shouldShow);
+					matchedIds = matchedIds.concat(childIds);
+				}
+			});
+
+			return matchedIds;
+		},
+
+		/**
+		 * 展开所有匹配的节点
+		 */
+		expandMatchedNodes() {
+			this.matchedNodeIds.forEach(nodeId => {
+				const treeNode = this.$refs.tree.store.nodesMap[nodeId];
+				if (treeNode) {
+					treeNode.expand();
+				}
+			});
+		},
+
 		init() {
 			// 初始化是根据value，设置已选中项
 			let arr = [];

package/src/index.js

@@ -92,7 +92,8 @@ import Result from '../packages/result/index.js';
 import TreeSelect from '../packages/treeSelect/index.js';
 import SubTitle from '../packages/subTitle/index.js';
 import TabDialog from '../packages/tabDialog/index.js';
-import FileUpload from '../packages/fileUpload/index.js';
+import FileUpload from '../packages/fileUpload/index.js';
+import SelectDisplayInput from '../packages/selectDisplayInput/index.js';
 import locale from 'element-ui/src/locale';
 import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
 
@@ -182,7 +183,8 @@ const components = [
 	DescriptionsItem,
 	Result,
 	SubTitle,
-	FileUpload,
+	FileUpload,
+	SelectDisplayInput,
 	CollapseTransition
 ];
 
@@ -316,5 +318,6 @@ export default {
 	TreeSelect,
 	SubTitle,
 	TabDialog,
-	FileUpload
+	FileUpload,
+	SelectDisplayInput
 };

package/types/element-ui.d.ts

@@ -94,7 +94,8 @@ import { CyTreeSelect } from './treeSelect'
 import { CySubTitle } from './subTitle'
 import { CyTabDialog } from './tabDialog'
 import { CyFileUpload } from './fileUpload'
-
+
+
 export interface InstallationOptions {
   locale: any,
   i18n: any,
@@ -397,3 +398,6 @@ export class TabDialog extends CyTabDialog {}
 
 /** FileUpload Component */
 export class FileUpload extends CyFileUpload {}
+
+/** SelectDisplayInput Component */
+export class SelectDisplayInput extends CySelectDisplayInput {}

package/types/selectDisplayInput.d.ts

@@ -0,0 +1,5 @@
+import { CyUIComponent } from './component'
+
+/** SelectDisplayInput Component */
+export declare class CySelectDisplayInput extends CyUIComponent {
+}