sh-view 2.7.8 → 2.8.0

package/packages/components/{global-components/sh-tree → sh-tree}/index.vue

@@ -1,217 +1,228 @@
-<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>
-				</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
-		}
-		// 回调focus事件
-		const emitFocus = obj => {
-			emit('focus', obj)
-		}
-		// 回调change事件
-		const emitChange = () => {
-			emitValue()
-			emit('change', selectedKeys.value, selectedData.value)
-		}
-		// 回调blur事件
-		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>
+<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">
+						<table-tree v-if="pulldownDrop" v-bind="tableTreeProps" @datacall="onDataCall" @select="onChange"></table-tree>
+					</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([])
+		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
+					let endStrs = ['Id', '_id']
+					endStrs.forEach(end => {
+						if (field.endsWith(end)) {
+							prefixKey = field.replace(end, '')
+						}
+					})
+					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.find(row => row[nodeKey] === 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
+		}
+		// 回调focus事件
+		const emitFocus = obj => {
+			emit('focus', obj)
+		}
+		// 回调change事件
+		const emitChange = () => {
+			emitValue()
+			emit('change', selectedKeys.value, selectedData.value)
+		}
+		// 回调blur事件
+		const emitBlur = () => {
+			emit('blur', selectedKeys.value, selectedData.value)
+		}
+		// 回调双向绑定
+		const emitValue = () => {
+			emit('update:modelValue', selectedKeys.value)
+		}
+
+		watch(
+			() => props.modelValue,
+			value => {
+				if (pulldownDrop.value) return
+				if ($vUtils.isNone(value)) {
+					selectedKeys.value = []
+				} else {
+					selectedKeys.value = Array.isArray(value) ? value : [value]
+				}
+			},
+			{
+				immediate: true,
+				deep: 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 → sh-tree}/mixin/treeProps.js

@@ -1,6 +1,6 @@
 export default {
 	modelValue: {
-		type: Array,
+		type: [Array, String],
 		default() {
 			return []
 		}

package/packages/index.js

@@ -1,39 +1,39 @@
-import packageConfig from '../package.json'
-import { utils, notice } from 'sh-tools'
-import { VueMasonryPlugin } from 'vue-masonry'
-import directive from './directive/index'
-import vxeTable from './vxeTable/index'
-import globalComponents from './components/index'
-import mixin from './mixin/index'
-import './css/index'
-
-// 全局公共封装组件
-const install = function (root, option = {}) {
-	if (install.installed) return
-	root.config.globalProperties.$vUtils = utils
-	root.config.globalProperties.$Notice = notice
-	root.mixin(mixin)
-	root.use(VueMasonryPlugin, option)
-	root.use(directive)
-	root.use(vxeTable, option)
-	root.use(globalComponents, option)
-}
-
-const ShUI = {
-	name: packageConfig.name,
-	version: packageConfig.version,
-	install
-}
-
-let consInfo = ''
-let defaultBg = 'padding: 5px; color: #111; background: #f5f7f9; font-weight: bold;'
-let tagBg1 = 'padding: 5px; color: #fff; background: #8e2eff; font-weight: bold;'
-let tagBg2 = 'padding: 5px; color: #333; background: #ffee2e; font-weight: bold;'
-if ((window.navigator.language || window.navigator.browserLanguage).toLowerCase() === 'zh-cn') {
-	consInfo = `%c由%c${ShUI.name}%c提供技术支持，版本%c${ShUI.version}%c`
-} else {
-	consInfo = `%cPowered by%c${ShUI.name}%c，version%c${ShUI.version}%c`
-}
-console.info(consInfo, defaultBg, tagBg1, defaultBg, tagBg2, defaultBg)
-
-export default ShUI
+import packageConfig from '../package.json'
+import { utils, notice } from 'sh-tools'
+import { VueMasonryPlugin } from 'vue-masonry'
+import directive from './directive/index'
+import vxeTable from './vxeTable/index'
+import components from './components/index'
+import mixin from './mixin/index'
+import './css/index'
+
+// 全局公共封装组件
+const install = function (root, option = {}) {
+	if (install.installed) return
+	root.config.globalProperties.$vUtils = utils
+	root.config.globalProperties.$Notice = notice
+	root.mixin(mixin)
+	root.use(VueMasonryPlugin, option)
+	root.use(directive)
+	root.use(vxeTable, option)
+	root.use(components, option)
+}
+
+const ShUI = {
+	name: packageConfig.name,
+	version: packageConfig.version,
+	install
+}
+
+let consInfo = ''
+let defaultBg = 'padding: 5px; color: #111; background: #f5f7f9; font-weight: bold;'
+let tagBg1 = 'padding: 5px; color: #fff; background: #8e2eff; font-weight: bold;'
+let tagBg2 = 'padding: 5px; color: #333; background: #ffee2e; font-weight: bold;'
+if ((window.navigator.language || window.navigator.browserLanguage).toLowerCase() === 'zh-cn') {
+	consInfo = `%c由%c${ShUI.name}%c提供技术支持，版本%c${ShUI.version}%c`
+} else {
+	consInfo = `%cPowered by%c${ShUI.name}%c，version%c${ShUI.version}%c`
+}
+console.info(consInfo, defaultBg, tagBg1, defaultBg, tagBg2, defaultBg)
+
+export default ShUI