sh-view 1.7.6 → 2.0.0

package/packages/components/global-components/sh-tree/index.vue

@@ -0,0 +1,195 @@
+<template>
+	<div class="sh-tree" :class="[isSelect ? 'direct' : 'select']" :style="{ height: wrapHeight }">
+		<template v-if="isSelect">
+			<vxe-pulldown ref="treeSelect" class="sh-tree-select" v-bind="selectConfigIn" @hide-panel="onHidePanel">
+				<template #default>
+					<div class="sh-tree-select-input">
+						<vxe-input ref="treeSelectInput" :model-value="getTreeInputValue()" v-bind="selectInputConfigIn" readonly @focus="onFocus" @clear="onClear"></vxe-input>
+					</div>
+				</template>
+				<template #dropdown>
+					<div v-if="filter" class="sh-tree-filter">
+						<vxe-input ref="filterInput" v-model="filterTextIn" class="sh-tree-filter-input" v-bind="filterInputConfigIn"></vxe-input>
+					</div>
+					<div class="sh-tree-select-dropdown-content">
+						<table-tree v-if="pulldownDrop" v-bind="tableTreeProps" @datacall="onDataCall" @select="onChange"></table-tree>
+						<div v-else class="tree-skeleton"></div>
+					</div>
+				</template>
+			</vxe-pulldown>
+		</template>
+		<template v-else>
+			<div v-if="filter" class="sh-tree-filter">
+				<vxe-input ref="filterInput" v-model="filterTextIn" class="sh-tree-filter-input" v-bind="filterInputConfigIn"></vxe-input>
+			</div>
+			<div class="sh-tree-content" :class="{ 'has-filter': filter }">
+				<table-tree v-bind="tableTreeProps" @datacall="onDataCall" @select="onChange"></table-tree>
+			</div>
+		</template>
+	</div>
+</template>
+
+<script>
+import './css/index.scss'
+import mixinProps from './mixin/treeProps'
+import tableTree from './components/table-tree.vue'
+export default {
+	name: 'ShTree',
+	components: {
+		tableTree
+	},
+	mixins: [mixinProps],
+	emits: ['update:modelValue', 'change', 'focus', 'blur'],
+	data() {
+		return {
+			// 公共属性
+			filterTextIn: this.filterText,
+			selectedKeys: this.modelValue,
+			selectedData: [],
+			treeData: this.options,
+			// 下拉专属属性
+			pulldownDrop: false // 由于hidePanel延迟350ms关闭，体验不好，这里使用自定义开关
+		}
+	},
+	computed: {
+		wrapHeight() {
+			return [100, '100%', 'auto'].includes(this.height) ? '100%' : 'auto'
+		},
+		checkConfig() {
+			return { disabled: this.disabled, size: this.size }
+		},
+		selectConfigIn() {
+			return Object.assign({ transfer: true, popupClassName: 'sh-tree-select-dropdown' }, this.globalConfig.selectConfig, this.checkConfig)
+		},
+		selectInputConfigIn() {
+			return Object.assign({ clearable: true, controls: false, transfer: false, suffixIcon: 'vxe-icon-caret-down', placeholder: this.placeholder }, this.globalConfig.inputConfig)
+		},
+		filterInputConfigIn() {
+			return Object.assign({ prefixIcon: 'vxe-icon-search', placeholder: '搜索', clearable: true, controls: false, transfer: true }, this.globalConfig.filterInputConfig)
+		},
+		tableTreeProps() {
+			return Object.assign({}, this.$props, { filterText: this.filterTextIn, modelValue: this.selectedKeys })
+		}
+	},
+	watch: {
+		modelValue: {
+			handler(newvalue, oldValue) {
+				if (this.pulldownDrop) return
+				this.selectedKeys = newvalue
+			},
+			immediate: true
+		}
+	},
+	methods: {
+		// 下拉树值回显
+		getTreeInputValue() {
+			let { selectedKeys, valueData, multiple, format, field, split, labelField, treeData, $vUtils } = this
+			if (selectedKeys && Array.isArray(selectedKeys) && selectedKeys.length > 0 && treeData && treeData.length > 0) {
+				let selectRows = this.getSelectRowsByValue(selectedKeys)
+				let labelFieldList = selectRows.map(item => $vUtils.get(item, labelField))
+				if (format) {
+					let prefixKey = field.endsWith('Id') ? String(field).replace('Id', '') : field
+					let dataformat = format.replace(/@/gi, prefixKey)
+					if (multiple) {
+						let formatKeys = $vUtils.getFormatKeys(dataformat)
+						// 首先构建回显数据源，防止formayKeys值不全导致索引错乱
+						let formatSourceList = Array.from(new Array(selectedKeys.length), (item, itemIndex) => {
+							let result = { [field]: selectedKeys[itemIndex] }
+							formatKeys.forEach(key => {
+								result[key] = $vUtils.get(valueData, `${key}[${itemIndex}]`)
+							})
+							return result
+						})
+						labelFieldList = formatSourceList.map(item => $vUtils.format(dataformat, item))
+					} else {
+						labelFieldList = [$vUtils.format(dataformat, valueData)]
+					}
+				}
+				return labelFieldList.join(split)
+			}
+			return ''
+		},
+		// 根据选中值返回选中节点信息
+		getSelectRowsByValue(value) {
+			const { treeData, nodeKey, globalConfig, $vTableSetup, $vUtils } = this
+			let childKey = (globalConfig.treeConfig && globalConfig.treeConfig.childrenField) || $vTableSetup?.table?.treeConfig?.childrenField || 'children'
+			let selectRows = []
+			$vUtils.eachTree(
+				treeData,
+				node => {
+					if (node[nodeKey] && value.includes(node[nodeKey])) {
+						selectRows.push(node)
+					}
+				},
+				{ children: childKey }
+			)
+			return selectRows
+		},
+		// 获取选中数据
+		getSelectionData() {
+			return this.selectedData
+		},
+		// 树节点获取焦点事件
+		async onFocus(obj) {
+			this.emitFocus()
+			this.$refs.treeSelectInput.blur()
+			await this.$refs.treeSelect.togglePanel()
+			this.pulldownDrop = true
+			if (this.$refs.filterInput) this.$refs.filterInput.focus()
+		},
+		// 树节点选择变换事件
+		async onChange(selectedKeys, selectedRows, obj) {
+			if (this.isSelect) {
+				if (!this.multiple) {
+					this.pulldownDrop = false
+					this.selectedKeys = selectedKeys
+					this.selectionData = selectedRows
+					await this.$refs.treeSelect.hidePanel()
+					this.onHidePanel()
+				} else {
+					this.selectedKeys = selectedKeys
+					this.selectionData = selectedRows
+				}
+				return
+			}
+			this.selectedKeys = selectedKeys
+			this.selectionData = selectedRows
+			this.emitChange()
+		},
+		// 树收起下拉回调方法
+		onHidePanel() {
+			this.pulldownDrop = false
+			this.filterTextIn = ''
+			this.emitChange()
+			this.emitBlur()
+		},
+		// 下拉数清除事件
+		onClear() {
+			this.onHidePanel()
+		},
+		// 表格数据回调
+		onDataCall(datas) {
+			this.treeData = datas
+		},
+		// 回调fouces事件
+		emitFocus(obj) {
+			this.$emit('focus', obj)
+		},
+		// 回调change事件
+		emitChange() {
+			this.emitValue()
+			this.$emit('change', this.selectedKeys, this.selectionData)
+		},
+		// 回调fouces事件
+		emitBlur() {
+			this.$emit('blur', this.selectedKeys, this.selectionData)
+		},
+		// 回调双向绑定
+		emitValue() {
+			this.$emit('update:modelValue', this.selectedKeys)
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped></style>

package/packages/components/global-components/sh-tree/mixin/treeProps.js

@@ -0,0 +1,124 @@
+export default {
+	props: {
+		modelValue: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		isSelect: {
+			type: Boolean
+		},
+		nodeKey: {
+			type: String,
+			default: 'id' // 主键不支持多级（a.b类型，都主键了还点鸡毛）
+		},
+		valueKeys: {
+			type: Array
+		},
+		valueData: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		format: {
+			type: String
+		},
+		field: {
+			type: String
+		},
+		isLeaf: {
+			type: Boolean
+		},
+		disabled: {
+			type: Boolean
+		},
+		level: {
+			type: Number,
+			default: -1
+		},
+		size: {
+			type: String,
+			default: 'medium' //  medium / small / mini
+		},
+		height: {
+			type: [Number, String],
+			default: 'auto'
+		},
+		split: {
+			type: String,
+			default: ','
+		},
+		placeholder: {
+			type: String,
+			default: '请选择'
+		},
+		labelField: {
+			type: String,
+			default: 'label'
+		},
+		labelFormat: {
+			type: String,
+			default: ''
+		},
+		labelTitle: {
+			type: String
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		filter: {
+			type: Boolean,
+			default: true // 是否内部搜索
+		},
+		filterText: {
+			type: String
+		},
+		multiple: {
+			type: Boolean
+		},
+		globalConfig: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		options: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		serverCache: {
+			// 请求数据是否缓存，不缓存则每次下拉重新加载
+			type: Boolean,
+			default: true
+		},
+		serverConfig: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		serverParams: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		parseParams: {
+			type: Function,
+			default() {
+				return {}
+			}
+		},
+		emptyIcon: {
+			type: String
+		},
+		emptyText: {
+			type: String
+		}
+	}
+}