sh-view 2.1.0 → 2.2.0

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

@@ -1,195 +1,218 @@
-<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>
+<template>
+	<div class="sh-tree" :class="[isSelect ? 'direct' : 'select']" :style="{ height: wrapHeight }">
+		<template v-if="isSelect">
+			<vxe-pulldown ref="treeSelectRef" class="sh-tree-select" v-bind="selectConfigIn" @hide-panel="onHidePanel">
+				<template #default>
+					<div class="sh-tree-select-input">
+						<vxe-input ref="treeSelectInputRef" :model-value="selectLabels" 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="filterInputRef" 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="filterInputRef" 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 { defineComponent, computed, onBeforeMount, getCurrentInstance, ref, watch } from 'vue'
+import './css/index.scss'
+import mixinProps from './mixin/treeProps'
+import tableTree from './components/table-tree.vue'
+export default defineComponent({
+	name: 'ShTree',
+	components: {
+		tableTree
+	},
+	props: {
+		...mixinProps
+	},
+	emits: ['update:modelValue', 'change', 'focus', 'blur'],
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils } = proxy
+		const { emit, slots } = context
+
+		const treeSelectRef = ref()
+		const treeSelectInputRef = ref()
+		const filterInputRef = ref()
+		// 公共属性
+		const filterTextIn = ref(props.filterText)
+		const selectedKeys = ref(props.modelValue)
+		const selectedData = ref([])
+		const treeData = ref(props.options)
+		// 下拉专属属性
+		const pulldownDrop = ref(false) // 由于hidePanel延迟350ms关闭，体验不好，这里使用自定义开关
+
+		const wrapHeight = computed(() => ([100, '100%', 'auto'].includes(props.height) ? '100%' : 'auto'))
+		const checkConfig = computed(() => ({ disabled: props.disabled, size: props.size }))
+		const selectLabels = computed(() => {
+			let { valueData, multiple, format, field, split, labelField } = props
+			if (selectedKeys.value && Array.isArray(selectedKeys.value) && selectedKeys.value.length > 0 && treeData.value && treeData.value.length > 0) {
+				let selectRows = getSelectRowsByValue(selectedKeys.value)
+				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.value.length), (item, itemIndex) => {
+							let result = { [field]: selectedKeys.value[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 ''
+		})
+		const selectConfigIn = computed(() => {
+			return Object.assign({ transfer: true, popupClassName: 'sh-tree-select-dropdown' }, props.globalConfig?.selectConfig, checkConfig.value)
+		})
+		const selectInputConfigIn = computed(() => {
+			return Object.assign({ clearable: true, controls: false, transfer: false, suffixIcon: 'vxe-icon-caret-down', placeholder: props.placeholder }, props.globalConfig?.inputConfig)
+		})
+		const filterInputConfigIn = computed(() => {
+			return Object.assign({ prefixIcon: 'vxe-icon-search', placeholder: '搜索', clearable: true, controls: false, transfer: true }, props.globalConfig?.filterInputConfig)
+		})
+		const tableTreeProps = computed(() => {
+			return Object.assign({}, props, { filterText: filterTextIn.value, modelValue: selectedKeys.value })
+		})
+
+		// 根据选中值返回选中节点信息
+		const getSelectRowsByValue = keys => {
+			const { nodeKey, globalConfig } = props
+			let childKey = (globalConfig.treeConfig && globalConfig.treeConfig.childrenField) || proxy.$vTableSetup?.table?.treeConfig?.childrenField || 'children'
+			let selectRows = []
+			$vUtils.eachTree(
+				treeData.value,
+				node => {
+					if (node[nodeKey] && keys.includes(node[nodeKey])) {
+						selectRows.push(node)
+					}
+				},
+				{ children: childKey }
+			)
+			return selectRows
+		}
+		// 获取选中数据
+		const getSelectionData = () => {
+			return selectedData.value
+		}
+		// 树节点获取焦点事件
+		const onFocus = async obj => {
+			emitFocus()
+			treeSelectInputRef.value.blur()
+			await treeSelectRef.value.togglePanel()
+			pulldownDrop.value = true
+			if (filterInputRef.value) filterInputRef.value.focus()
+		}
+		// 树节点选择变换事件
+		const onChange = async (keys, rows, obj) => {
+			if (props.isSelect) {
+				if (!props.multiple) {
+					pulldownDrop.value = false
+					selectedKeys.value = keys
+					selectedData.value = rows
+					await treeSelectRef.value.hidePanel()
+					onHidePanel()
+				} else {
+					selectedKeys.value = keys
+					selectedData.value = rows
+				}
+				return
+			}
+			selectedKeys.value = keys
+			selectedData.value = rows
+			emitChange()
+		}
+		// 树收起下拉回调方法
+		const onHidePanel = () => {
+			pulldownDrop.value = false
+			filterTextIn.value = ''
+			emitChange()
+			emitBlur()
+		}
+		// 下拉数清除事件
+		const onClear = () => {
+			onHidePanel()
+		}
+		// 表格数据回调
+		const onDataCall = datas => {
+			treeData.value = datas
+		}
+		// 回调fouces事件
+		const emitFocus = obj => {
+			emit('focus', obj)
+		}
+		// 回调change事件
+		const emitChange = () => {
+			emitValue()
+			emit('change', selectedKeys.value, selectedData.value)
+		}
+		// 回调fouces事件
+		const emitBlur = () => {
+			emit('blur', selectedKeys.value, selectedData.value)
+		}
+		// 回调双向绑定
+		const emitValue = () => {
+			emit('update:modelValue', selectedKeys.value)
+		}
+
+		watch(
+			() => props.modelValue,
+			value => {
+				if (pulldownDrop.value) return
+				selectedKeys.value = value
+			},
+			{
+				immediate: true
+			}
+		)
+
+		return {
+			treeSelectRef,
+			treeSelectInputRef,
+			filterInputRef,
+			wrapHeight,
+			selectConfigIn,
+			selectInputConfigIn,
+			filterTextIn,
+			filterInputConfigIn,
+			pulldownDrop,
+			tableTreeProps,
+			selectLabels,
+			getSelectionData,
+			onFocus,
+			onClear,
+			onHidePanel,
+			onDataCall,
+			onChange
+		}
+	}
+})
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -1,124 +1,122 @@
 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
+	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
 	}
 }