sh-view 1.5.2

package/packages/components/global-components/sh-vxe-tree/components/table-tree.vue

@@ -0,0 +1,251 @@
+<template>
+	<vxe-grid
+		ref="vxeTreeTable"
+		v-bind="tableConfigIn"
+		:class="{ 'sh-vxe-tree-table': true, 'is--hidecheck': globalConfig.checkHide }"
+		:height="height"
+		:size="size"
+		:loading="loading"
+		:columns="tableColumns"
+		:data="filterData || tableData"
+		:row-config="rowConfigIn"
+		:radio-config="radioConfigIn"
+		:checkbox-config="checkboxConfigIn"
+		:pager-config="pagerConfigIn"
+		:tree-config="treeConfigIn"
+		@radio-change="onRadioChange"
+		@checkbox-change="onSelectionChange"
+		@checkbox-all="onSelectionChange"
+		@checkbox-range-end="onSelectionChange">
+		<template #treeNodeCell="scoped">
+			<span>{{ getTreeNodeCellContent(scoped) }}</span>
+		</template>
+		<template #empty>
+			<sh-empty :no-data-icon="parentProps.noDataIcon" :no-data-text="parentProps.noDataText"></sh-empty>
+		</template>
+	</vxe-grid>
+</template>
+
+<script>
+import defaultData from '../mixin/defaultData'
+export default {
+	name: 'TableTree',
+	props: {
+		parentProps: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		isSelect: {
+			type: Boolean
+		},
+		loading: {
+			type: Boolean
+		},
+		height: {
+			type: [Number, String],
+			default: 'auto'
+		},
+		filterText: {
+			type: String
+		},
+		size: {
+			type: String,
+			default: 'medium' //  medium / small / mini
+		},
+		globalConfig: {
+			type: Object,
+			default() {
+				return {}
+			}
+		},
+		tableData: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		selectedKeys: {
+			type: Array,
+			default() {
+				return []
+			}
+		}
+	},
+	emits: ['select'],
+	data() {
+		return {
+			...defaultData,
+			filterData: null,
+			filterChangeDebounce: this.$vUtils.debounce(this.handleMyTableFilter, 500)
+		}
+	},
+	computed: {
+		multiple() {
+			return this.parentProps.multiple || false
+		},
+		tableConfigIn() {
+			return Object.assign({ rowId: this.parentProps.nodeKey, showHeader: !!(this.globalConfig.hasAll && this.multiple) }, this.tableConfigDefault, this.globalConfig.tableConfig)
+		},
+		pagerConfigIn() {
+			return Object.assign({ enabled: false }, this.globalConfig.pagerConfig)
+		},
+		rowConfigIn() {
+			return Object.assign({ isCurrent: false }, this.tableConfigIn.rowConfig, { keyField: this.parentProps.nodeKey })
+		},
+		radioConfigIn() {
+			return Object.assign({ labelField: this.parentProps.labelField, checkRowKey: this.selectedKeys[0], checkMethod: this.tableCheckMethods }, this.globalConfig.radioConfig)
+		},
+		checkboxConfigIn() {
+			return Object.assign({ labelField: this.parentProps.labelField, checkRowKeys: this.selectedKeys, checkMethod: this.tableCheckMethods }, this.globalConfig.checkboxConfig)
+		},
+		treeConfigIn() {
+			return Object.assign({ rowField: this.parentProps.nodeKey, transform: this.globalConfig.transform }, this.globalConfig.treeConfig)
+		},
+		tableColumns() {
+			let { globalConfig, isSelect, multiple, checkboxConfigIn, radioConfigIn, parentProps } = this
+			let colWidth = globalConfig.columns ? (isSelect ? 280 : '70%') : 0
+			let defaultColumns = [
+				{
+					field: multiple ? checkboxConfigIn.labelField : radioConfigIn.labelField,
+					title: parentProps.labelTitle || (multiple ? '全部' : ''),
+					type: parentProps.disabled ? 'html' : multiple ? 'checkbox' : 'radio',
+					treeNode: true,
+					width: colWidth,
+					slots: { default: 'treeNodeCell' }
+				}
+			]
+			return defaultColumns.concat(globalConfig.columns || [])
+		}
+	},
+	watch: {
+		selectedKeys: {
+			handler(newvalue, oldValue) {},
+			deep: true
+		},
+		filterText: {
+			handler(newvalue, oldValue) {
+				this.filterChangeDebounce(newvalue)
+			},
+			deep: true,
+			immediate: true
+		}
+	},
+	created() {},
+	mounted() {
+		this.initMounted()
+	},
+	beforeUnmount() {},
+	methods: {
+		tableRef() {
+			return this.$refs.vxeTreeTable
+		},
+		initMounted() {
+			this.initSelection()
+		},
+		initSelection() {
+			const that = this
+			let nodeKey = that.parentProps.nodeKey || 'id'
+			setTimeout(() => {
+				if (that.selectedKeys && that.selectedKeys.length > 0) {
+					that.tableRef().scrollToRow({ [nodeKey]: that.selectedKeys[0] })
+				}
+				// // 初始化单选还是多选
+				// if (that.multiple) {
+				// 	let records = that.tableRef().getCheckboxRecords()
+				// 	if (records && records.length > 0) {
+				// 		that.onSelectionChange({ records: records })
+				// 	}
+				// } else {
+				// 	let records = that.tableRef().getRadioRecord()
+				// 	if (records) {
+				// 		that.onSelectionChange({ records: [records] })
+				// 	}
+				// }
+			})
+		},
+		// 单选框变化
+		onRadioChange(obj) {
+			const that = this
+			let nodeKey = that.parentProps.nodeKey || 'id'
+			let { newValue } = obj
+			let selectedKeys = []
+			if (newValue && (newValue[nodeKey] || newValue[nodeKey] === 0)) {
+				selectedKeys.push(newValue[nodeKey])
+			}
+			that.treeSelectedChange(selectedKeys, newValue ? [newValue] : [], obj)
+		},
+		// 复选框变化
+		onSelectionChange(obj) {
+			const that = this
+			let nodeKey = that.parentProps.nodeKey || 'id'
+			let { records = [] } = obj
+			let selectedKeys = []
+			if (Array.isArray(records) && records.length > 0) {
+				records.forEach(item => {
+					selectedKeys.push(item[nodeKey])
+				})
+			}
+			that.treeSelectedChange(selectedKeys, records, obj)
+		},
+		// 全局搜索过滤事件
+		handleMyTableFilter(text) {
+			const that = this
+			let filterText = that.$vUtils.toValueString(text).trim().toLowerCase()
+			let filterData = null
+			if (filterText) {
+				const searchProps = [{ rkey: that.parentProps.labelField, format: that.parentProps.labelFormat }]
+				let tableColumnsAll = that.tableRef().getColumns()
+				tableColumnsAll.forEach(col => {
+					let renderObj = col.cellRender || col.editRender || col.itemRender
+					let noSearchArr = ['$vGlobalOption', '$vImg', '$vCheckbox', '$vRadio', '$vUpload', '$vCode', 'seq', 'checkbox', 'radio']
+					if (col.property && renderObj && renderObj.name && !noSearchArr.includes(renderObj.name) && !noSearchArr.includes(col.type)) {
+						searchProps.push({ rkey: col.property, rname: renderObj.name, rprops: Object.assign({}, renderObj.props, col.rprops) })
+					}
+				})
+				filterData = that.$vUtils.searchTree(that.tableData, row => {
+					return searchProps.some(item => {
+						let cellValue = item.format ? that.$vUtils.format(item.format, row) : that.$vUtils.get(row, item.rkey)
+						if (that.$vxePluginNames.expendRenders && that.$vxePluginNames.expendRenders.includes(item.rname)) {
+							let { rtext } = that.$vUtils.formatRender(cellValue, item.rkey, row, item.rname, item.rprops, that)
+							return String(rtext).toLowerCase().indexOf(filterText) > -1
+						}
+						return that.$vUtils.trim(cellValue).toLowerCase().indexOf(filterText) > -1
+					})
+				})
+			}
+			if (that.filterData === null && !filterText) {
+				return
+			}
+			that.filterData = filterData
+			if (filterData && filterData.length > 0) {
+				that.tableRef().setTreeExpand(filterData[0], true)
+			}
+		},
+		// 获取选中的数据
+		getSelectionData() {
+			return this.tableRef().getCheckboxRecords()
+		},
+		// 树变化提交
+		async treeSelectedChange(selectedKeys, selectedRows, obj) {
+			this.$emit('select', selectedKeys, selectedRows, obj)
+		},
+		tableCheckMethods({ row }) {
+			if (this.parentProps.isLeaf && !this.parentProps.multiple) {
+				return +row.isleaf === 1 || +row.isLeaf === 1
+			}
+			return true
+		},
+		getTreeNodeCellContent({ row, column }) {
+			let { labelFormat, field } = this.parentProps
+			if (labelFormat) {
+				return this.$vUtils.format(labelFormat, row)
+			}
+			return this.$vUtils.get(row, column.property)
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped></style>

package/packages/components/global-components/sh-vxe-tree/css/index.scss

@@ -0,0 +1,20 @@
+.sh-vxe-tree{
+    position: relative;
+    width: 100%;
+    .vxe-input{
+        width: 100%;
+    }
+}
+
+.sh-vxe-tree-table{
+    .is--disabled.vxe-radio, .vxe-table--render-default .is--disabled.vxe-cell--radio,
+    .is--disabled.vxe-checkbox, .vxe-table--render-default .is--disabled.vxe-cell--checkbox{
+        color: inherit;
+    }
+}
+
+.sh-vxe-tree-result{
+    position: relative;
+    top: 50%;
+    transform: translateY(-60%);
+}

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

@@ -0,0 +1,85 @@
+<template>
+	<div class="sh-vxe-tree" :style="{ height: shVxeTableHeight }">
+		<component
+			:is="curCompunent"
+			ref="vxe-tree-child"
+			v-bind="$props"
+			:selected-keys="selectedKeys"
+			:global-config="treeGlobalConfig"
+			@change="treeSelectedChange"
+			@focus="treeSelectedFocus"
+			@blur="treeSelectedBlur"></component>
+	</div>
+</template>
+
+<script>
+import vxeDirectTree from './vxe-direct-tree'
+import vxeSelectTree from './vxe-select-tree'
+import props from './js/props'
+export default {
+	name: 'ShTree',
+	components: {
+		vxeDirectTree,
+		vxeSelectTree
+	},
+	props: {
+		...props
+	},
+	emits: ['update:modelValue', 'change', 'focus', 'blur'],
+	data() {
+		return {
+			selectedKeys: [],
+			selectionData: []
+		}
+	},
+	computed: {
+		curCompunent() {
+			return this.isSelect ? 'vxeSelectTree' : 'vxeDirectTree'
+		},
+		shVxeTableHeight() {
+			return this.height === '100%' || this.height === 'auto' ? '100%' : 'auto'
+		},
+		treeGlobalConfig() {
+			return Object.assign({ treeFilter: true }, this.globalConfig)
+		}
+	},
+	watch: {
+		modelValue: {
+			handler(newvalue, oldValue) {
+				this.selectedKeys = newvalue
+			},
+			deep: true,
+			immediate: true
+		}
+	},
+	created() {},
+	mounted() {},
+	methods: {
+		// 初始化
+		initCreated() {},
+		// 树节点获取焦点事件
+		treeSelectedFocus() {
+			this.$emit('focus', this.selectedKeys || [], this.selectionData || [])
+		},
+		// 树节点选择变换事件
+		treeSelectedChange(selectedKeys, selectedRows, obj) {
+			this.selectedKeys = selectedKeys
+			this.selectionData = selectedRows
+			this.$emit('update:modelValue', selectedKeys, selectedRows, obj)
+			this.$emit('change', selectedKeys, selectedRows, obj)
+		},
+		// 树收起下拉回调blur方法
+		treeSelectedBlur(obj) {
+			this.$emit('blur', this.selectedKeys || [], this.selectionData || [])
+		},
+		// 获取选中数据
+		getSelectionData() {
+			return this.selectionData
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+@import 'css/index.scss';
+</style>

package/packages/components/global-components/sh-vxe-tree/js/props.js

@@ -0,0 +1,120 @@
+export default {
+	modelValue: {
+		type: Array,
+		default() {
+			return []
+		}
+	},
+	height: {
+		type: [Number, String],
+		default: 'auto'
+	},
+	nodeKey: {
+		type: String,
+		default: 'id'
+	},
+	valueKeys: {
+		type: Array
+	},
+	valueData: {
+		type: Object,
+		default() {
+			return {}
+		}
+	},
+	format: {
+		type: String
+	},
+	field: {
+		type: String
+	},
+	isSelect: {
+		type: Boolean
+	},
+	isLeaf: {
+		type: Boolean
+	},
+	disabled: {
+		type: Boolean
+	},
+	level: {
+		type: Number,
+		default: -1
+	},
+	split: {
+		type: String,
+		default: ','
+	},
+	size: {
+		type: String,
+		default: 'small' //  medium / small / mini
+	},
+	placeholder: {
+		type: String,
+		default: '请选择'
+	},
+	labelField: {
+		type: String,
+		default: 'label'
+	},
+	labelFormat: {
+		type: String,
+		default: ''
+	},
+	labelTitle: {
+		type: String
+	},
+	filterText: {
+		type: String
+	},
+	loading: {
+		type: Boolean
+	},
+	multiple: {
+		type: Boolean
+	},
+	globalConfig: {
+		type: Object,
+		default() {
+			return {}
+		}
+	},
+	treeColumns: {
+		type: Array,
+		default() {
+			return []
+		}
+	},
+	options: {
+		type: Array,
+		default() {
+			return []
+		}
+	},
+	serverCache: {
+		// 请求数据是否缓存，不缓存则每次下拉重新加载
+		type: Boolean,
+		default: true
+	},
+	serverConfig: {
+		type: Object,
+		default() {
+			return {
+				type: 'post',
+				url: ''
+			}
+		}
+	},
+	serverParams: {
+		type: Object,
+		default() {
+			return {}
+		}
+	},
+	parseParams: {
+		type: Function,
+		default() {
+			return {}
+		}
+	}
+}

package/packages/components/global-components/sh-vxe-tree/js/treeMethods.js

@@ -0,0 +1,171 @@
+const shMethods = {
+	// 加载初始化
+	initMounted() {
+		if (!this.initServer) {
+			// 初始化获取服务配置数据
+			this.getServerConfigDataSourse()
+		}
+	},
+	// 初始化赋值
+	initValue(value = []) {
+		let { valueData, options, multiple, format, field, split, labelField, treeData, $vUtils } = this
+		let treeSelectValue, treeSelectedData
+		try {
+			if (value && Array.isArray(value) && value.length > 0 && treeData && treeData.length > 0) {
+				let selectRows = this.getSelectRowsByValue(value)
+				let selectValues = selectRows.map(item => 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(value.length), (item, itemIndex) => {
+							let result = { [field]: value[itemIndex] }
+							formatKeys.forEach(key => {
+								result[key] = $vUtils.get(valueData, `${key}[${itemIndex}]`)
+							})
+							return result
+						})
+						selectValues = formatSourceList.map(item => $vUtils.format(dataformat, item))
+					} else {
+						selectValues = [$vUtils.format(dataformat, valueData)]
+					}
+				}
+				treeSelectValue = selectValues.join(split)
+				treeSelectedData = selectRows
+			} else {
+				treeSelectValue = ''
+				treeSelectedData = []
+			}
+		} catch (e) {
+			console.warn('初始化树值失败！')
+		}
+		this.treeSelectValue = treeSelectValue
+		this.treeSelectedData = treeSelectedData
+	},
+	// 树节点选择变换事件
+	treeSelectedChange(selectedKeys, selectedRows, obj) {
+		let emitFlag = true
+		let { labelField, split, multiple } = this
+		if (selectedRows && Array.isArray(selectedRows) && selectedRows.length > 0) {
+			let selectLabels = []
+			selectedRows.forEach(item => {
+				selectLabels.push(item[labelField])
+			})
+			this.treeSelectValue = selectLabels.join(split)
+		} else {
+			this.treeSelectValue = ''
+		}
+		this.treeSelectedData = selectedRows
+		if (!emitFlag) {
+			return
+		}
+		this.$emit('change', selectedKeys, selectedRows, obj)
+		if (this.$refs.vxeTreeSelect && !multiple && obj.$table) {
+			this.vxeTreePullHide()
+		}
+	},
+	// 获取请求配置数据
+	async getServerConfigDataSourse() {
+		const that = this
+		if (!that.serverConfig.url) {
+			that.treeServerComplate = true
+			return
+		}
+		let serverParams = that.$vUtils.clone(that.serverParams, true)
+		if (typeof that.parseParams === 'function') {
+			serverParams = that.parseParams(serverParams)
+		}
+		let serveFormatConditions = ''
+		Object.keys(serverParams).forEach(key => {
+			if (that.$vUtils.getFormatKeys(key).length > 0) {
+				serverParams[key] = that.$vUtils.format(serverParams[key], that.valueData)
+				serveFormatConditions += serverParams[key]
+			}
+		})
+		if (that.queryConditions !== serveFormatConditions) {
+			that.treeServerComplate = false
+		}
+		if (that.serverCache && that.treeServerComplate) {
+			return
+		}
+		that.queryErrorText = null
+		that.queryConditions = serveFormatConditions
+		that.treeLoading = true
+		let reqOptions = {
+			baseURL: that.serverConfig.baseURL
+		}
+		try {
+			let method = that.serverConfig?.type ? that.serverConfig.type.toLowerCase() : 'post'
+			let treeRes = await that.$http[method](that.serverConfig.url, serverParams, reqOptions)
+			if (treeRes && (treeRes.code === '100000' || +treeRes.code === 10000)) {
+				let treeAllNode = that.globalConfig.hasAll && !that.multiple ? [{ [this.nodeKey]: '', [this.labelField]: '全部', isleaf: 1, code: '' }] : []
+				let treeData = treeAllNode.concat(treeRes.data)
+				if (that.globalConfig.transform) {
+					treeData = that.$vUtils.toTreeArray(treeData, { clear: true })
+				}
+				that.treeData = treeData
+			} else {
+				throw new Error(`树节点信息获取失败：${treeRes?.message}`)
+			}
+		} catch (e) {
+			that.queryErrorText = e.message || e
+		}
+		that.treeLoading = false
+		that.treeServerComplate = true
+	}
+}
+
+const toolMethods = {
+	// 根据选中子级查找父级
+	getParentByChild(key, childKey = 'children', childNode, datas, resultArr = []) {
+		let allLineData = this.getDataJsonToLine(key, childKey, datas)
+		let curNode = allLineData.find(item => item[key] === childNode[key])
+		let findParentNodes = function (curNode, alldata, result = []) {
+			alldata.forEach(al => {
+				if (curNode['pid'] === al[key]) {
+					result.push(al)
+					if (al['pid']) {
+						findParentNodes(al, alldata, result)
+					}
+				}
+			})
+			return result
+		}
+		return findParentNodes(curNode, allLineData)
+	},
+	// 将复杂结构Tree转为平行结构
+	getDataJsonToLine(key = 'id', childKey = 'children', datas = [], resultArr = [], parentNode) {
+		let copyData = JSON.parse(JSON.stringify(datas))
+		copyData.forEach(item => {
+			resultArr.push(item)
+			if (item[childKey] && Array.isArray(item[childKey]) && item[childKey].length > 0) {
+				this.getDataJsonToLine(key, childKey, item[childKey], resultArr, item)
+			}
+			if (parentNode) {
+				item['pid'] = parentNode[key]
+			}
+			// if (item[childKey]) delete item[childKey]
+		})
+		return resultArr
+	},
+	// 根据选中值返回选中节点信息
+	getSelectRowsByValue(value) {
+		const that = this
+		let childKey = (that.globalConfig.treeConfig && that.globalConfig.treeConfig.children) || 'children'
+		let records = this.getDataJsonToLine(that.nodeKey, childKey, that.treeData)
+		let selectRows = []
+		records.forEach(node => {
+			if (node[that.nodeKey] && value.includes(node[that.nodeKey])) {
+				selectRows.push(node)
+			}
+		})
+		return selectRows
+	}
+}
+
+export default {
+	...shMethods,
+	...toolMethods
+}

package/packages/components/global-components/sh-vxe-tree/mixin/defaultData.js

@@ -0,0 +1,48 @@
+export default {
+	// 输入框全局配置
+	inputConfigDefault: {
+		clearable: true,
+		controls: false,
+		transfer: false,
+		suffixIcon: 'vxe-icon-caret-down'
+	},
+	// 过滤框全局配置
+	filterInputConfigDefault: {
+		prefixIcon: 'vxe-icon-search',
+		placeholder: '搜索',
+		clearable: true,
+		controls: false,
+		transfer: true
+	},
+	// 下拉框全局配置
+	selectConfigDefault: {
+		placement: 'bottom',
+		destroyOnClose: true,
+		transfer: true,
+		treeFilter: true
+	},
+	// 树组件表格全局配置
+	tableConfigDefault: {
+		autoResize: false,
+		syncResize: true,
+		stripe: false,
+		size: 'small', //  medium / small / mini
+		border: 'inner',
+		showFooter: false,
+		showOverflow: true,
+		pagerConfig: false,
+		scrollX: {
+			enabled: true,
+			gt: 20
+		},
+		scrollY: {
+			enabled: true,
+			gt: 20
+		}
+	},
+	// 扩展展示配置
+	showConfigDefault: {
+		showParent: false,
+		split: '/'
+	}
+}