sh-view 1.7.5 → 2.0.0

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

@@ -1,233 +0,0 @@
-<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 {}
-			}
-		},
-		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({ 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, multiple, checkboxConfigIn, radioConfigIn, parentProps } = this
-			let defaultColumn = {
-				field: multiple ? checkboxConfigIn.labelField : radioConfigIn.labelField,
-				title: parentProps.labelTitle || (multiple ? '全部' : ''),
-				type: parentProps.disabled ? 'html' : multiple ? 'checkbox' : 'radio',
-				treeNode: true,
-				width: globalConfig.columns ? globalConfig?.defaultWidth || 150 : '100%',
-				slots: { default: 'treeNodeCell' }
-			}
-			return [defaultColumn].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] })
-				}
-			})
-		},
-		// 单选框变化
-		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

@@ -1,20 +0,0 @@
-.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

@@ -1,85 +0,0 @@
-<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.vue'
-import vxeSelectTree from './vxe-select-tree.vue'
-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, initServer: !this.isSelect }, 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

@@ -1,120 +0,0 @@
-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

@@ -1,169 +0,0 @@
-const shMethods = {
-	// 加载初始化
-	initMounted() {
-		if (this.globalConfig?.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 { serverConfig, serverParams, parseParams, queryCacheParams, serverCache, valueData, globalConfig, multiple, nodeKey, labelField, $vUtils, $http } = this
-		if (!serverConfig.url) {
-			this.treeServerComplate = true
-			return
-		}
-		let params = $vUtils.clone(serverParams, true)
-		if (parseParams && typeof parseParams === 'function') {
-			params = parseParams(params)
-		}
-		Object.keys(params).forEach(key => {
-			if ($vUtils.getFormatKeys(params[key]).length > 0) {
-				params[key] = $vUtils.format(params[key], valueData)
-			}
-		})
-		if (!$vUtils.isEqual(queryCacheParams, params)) {
-			this.treeServerComplate = false
-		}
-		if (serverCache && this.treeServerComplate) {
-			return
-		}
-		this.queryErrorText = null
-		this.queryCacheParams = params
-		this.treeLoading = true
-		let reqOptions = {
-			baseURL: serverConfig.baseURL
-		}
-		try {
-			let method = serverConfig?.type ? serverConfig.type.toLowerCase() : 'post'
-			let treeRes = await $http[method](serverConfig.url, params, reqOptions)
-			if (treeRes && [10000, 100000].includes(+treeRes.code)) {
-				let treeAllNode = globalConfig?.hasAll && !multiple ? [{ [nodeKey]: 0, [labelField]: '全部', isleaf: 1, code: '' }] : []
-				let treeData = treeAllNode.concat(treeRes.data)
-				if (globalConfig.transform) {
-					treeData = $vUtils.toTreeArray(treeData, { clear: true })
-				}
-				this.treeData = treeData
-			} else {
-				throw new Error(`树节点信息获取失败：${treeRes?.message}`)
-			}
-		} catch (e) {
-			this.queryErrorText = e.message || e
-		}
-		this.treeLoading = false
-		this.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.childrenField) || '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

@@ -1,54 +0,0 @@
-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: true,
-		syncResize: true,
-		stripe: false,
-		size: 'small', //  medium / small / mini
-		border: 'inner',
-		showFooter: false,
-		showOverflow: true,
-		pagerConfig: false,
-		resizeConfig: {
-			refreshDelay: 50
-		},
-		columnConfig: {
-			width: 120
-		},
-		scrollX: {
-			enabled: true,
-			gt: 20
-		},
-		scrollY: {
-			enabled: true,
-			gt: 20
-		}
-	},
-	// 扩展展示配置
-	showConfigDefault: {
-		showParent: false,
-		split: '/'
-	}
-}