sh-view 2.8.1 → 2.8.2

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

@@ -1,289 +1,289 @@
-<template>
-	<sh-result v-if="queryErrorText" class="sh-tree-result" type="error" :title="false" :text="queryErrorText"></sh-result>
-	<vxe-grid
-		v-else
-		ref="tableRef"
-		:key="renderKey"
-		:class="{ 'sh-vxe-tree-table': true, 'is--hidecheck': globalConfig.checkHide }"
-		v-bind="tableConfigIn"
-		@radio-change="onRadioChange"
-		@checkbox-change="onSelectionChange"
-		@checkbox-all="onSelectionChange">
-		<template #treeNodeCell="scoped">
-			<span>{{ getTreeNodeCellContent(scoped) }}</span>
-		</template>
-		<template #empty>
-			<sh-empty :icon="emptyIcon" :content="emptyText"></sh-empty>
-		</template>
-	</vxe-grid>
-</template>
-
-<script>
-import { defineComponent, computed, getCurrentInstance, ref, watch, onMounted } from 'vue'
-// 树组件表格默认配置
-const tableConfigDefault = {
-	autoResize: true,
-	stripe: false,
-	size: 'small', //  medium / small / mini
-	border: 'inner',
-	showHeader: false,
-	showFooter: false,
-	showOverflow: true,
-	resizeConfig: {
-		refreshDelay: 100
-	},
-	columnConfig: {
-		width: 120
-	},
-	scrollX: {
-		enabled: true,
-		gt: 20
-	},
-	scrollY: {
-		enabled: true,
-		gt: 20
-	}
-}
-import mixinProps from '../mixin/treeProps'
-export default defineComponent({
-	name: 'TableTree',
-	props: {
-		...mixinProps
-	},
-	emits: ['select', 'datacall'],
-	setup(props, context) {
-		const { proxy } = getCurrentInstance()
-		const { $vUtils, $http, $vxePluginNames } = proxy
-		const { emit, slots } = context
-
-		const tableRef = ref()
-		const renderKey = ref(1)
-		const filterData = ref(null)
-		const treeServerComplate = ref(false)
-		const treeLoading = ref(false)
-		const treeData = ref(props.options)
-		const treeValue = ref([])
-		const queryCacheParams = ref(null)
-		const queryErrorText = ref(null)
-
-		const checkWidth = computed(() => {
-			return props.globalConfig.columns ? props.globalConfig?.defaultWidth || 150 : '100%'
-		})
-		const checkColumnProps = computed(() => {
-			let resultProps = { field: props.labelField, width: checkWidth.value, type: props.multiple ? 'checkbox' : 'radio', treeNode: true, slots: { default: 'treeNodeCell' } }
-			resultProps.title = props.labelTitle || props.multiple ? '全部' : ''
-			return resultProps
-		})
-		const tableProps = computed(() => {
-			return {
-				height: props.isSelect ? '100%' : props.height,
-				size: props.size,
-				loading: props.loading || treeLoading.value,
-				data: filterData.value || treeData.value,
-				columns: [checkColumnProps.value].concat(props.globalConfig?.columns || [])
-			}
-		})
-		const tableConfigIn = computed(() => {
-			let resultConfig = {
-				rowConfig: { isCurrent: false, keyField: props.nodeKey },
-				radioConfig: { checkRowKey: props.modelValue[0], labelField: props.labelField, checkMethod: tableCheckMethods },
-				checkboxConfig: { checkRowKeys: props.modelValue, labelField: props.labelField, checkMethod: tableCheckMethods },
-				treeConfig: { rowField: props.nodeKey },
-				editConfig: { enabled: false }
-			}
-			resultConfig = $vUtils.merge(resultConfig, tableConfigDefault, props.globalConfig)
-			if (props.multiple) {
-				if (props.globalConfig.hasAll) resultConfig.showHeader = true
-				resultConfig.radioConfig = null
-			} else {
-				resultConfig.checkboxConfig = null
-			}
-			return Object.assign(resultConfig, tableProps.value)
-		})
-
-		const initMounted = async () => {
-			// 初始化获取服务配置数据
-			await getServerConfigDataSourse()
-			initSelection()
-		}
-		// 获取请求配置数据
-		const getServerConfigDataSourse = async () => {
-			const { serverConfig, serverParams, parseParams, serverCache, valueData, globalConfig, multiple, nodeKey, labelField } = props
-			if (!serverConfig.url) {
-				treeServerComplate.value = true
-				return true
-			}
-			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.value, params)) {
-				treeServerComplate.value = false
-			}
-			if (serverCache && treeServerComplate.value) {
-				return true
-			}
-			queryErrorText.value = null
-			queryCacheParams.value = params
-			treeLoading.value = 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 treeResData = treeAllNode.concat(treeRes.data)
-					if (globalConfig?.treeConfig?.transform) {
-						treeResData = $vUtils.toTreeArray(treeResData, { clear: true })
-					}
-					treeData.value = treeResData
-				} else {
-					throw new Error(`树节点信息获取失败：${treeRes?.message}`)
-				}
-			} catch (e) {
-				queryErrorText.value = e.message || e
-			}
-			treeLoading.value = false
-			treeServerComplate.value = true
-		}
-		const initSelection = isWatch => {
-			let { modelValue, isSelect } = props
-			let nodeKey = props.nodeKey || 'id'
-			setTimeout(() => {
-				if (!tableRef.value || !modelValue?.length) return
-				if (isWatch) {
-					if (!$vUtils.isEqual(modelValue, treeValue.value)) renderKey.value++
-				} else {
-					tableRef.value.scrollToRow({ [nodeKey]: modelValue[0] })
-				}
-			})
-		}
-		// 单选框变化
-		const onRadioChange = obj => {
-			let nodeKey = props.nodeKey || 'id'
-			let { newValue } = obj
-			let selectedKeys = []
-			if (newValue && (newValue[nodeKey] || newValue[nodeKey] === 0)) {
-				selectedKeys.push(newValue[nodeKey])
-			}
-			treeSelectedChange(selectedKeys, newValue ? [newValue] : [], obj)
-		}
-		// 复选框变化
-		const onSelectionChange = obj => {
-			let nodeKey = props.nodeKey || 'id'
-			let { records = [] } = obj
-			let selectedKeys = []
-			if (Array.isArray(records) && records.length > 0) {
-				selectedKeys = records.map(item => item[nodeKey])
-			}
-			treeSelectedChange(selectedKeys, records, obj)
-		}
-		// 树变化提交
-		const treeSelectedChange = (selectedKeys, selectedRows, obj) => {
-			treeValue.value = selectedKeys
-			emit('select', selectedKeys, selectedRows, obj)
-		}
-		// 全局搜索过滤事件
-		const handleMyTableFilter = text => {
-			const { labelField, labelFormat } = props
-			let filterText = $vUtils.toValueString(text).trim().toLowerCase()
-			let searchData = null
-			if (filterText) {
-				let noSearchArr = ['$vGlobalOption', '$vImg', '$vCheckbox', '$vRadio', '$vUpload', '$vCode', 'seq', 'checkbox', 'radio']
-				const searchProps = [{ rkey: labelField, rname: '', rprops: {}, format: labelFormat }]
-				let tableColumnsAll = tableRef.value.getColumns()
-				tableColumnsAll.forEach(col => {
-					let renderObj = col.cellRender || col.editRender || col.itemRender
-					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) })
-					}
-				})
-				searchData = $vUtils.searchTree(treeData.value, row => {
-					return searchProps.some(item => {
-						let cellValue = $vUtils.get(row, item.rkey)
-						let { rtext } = $vUtils.formatRender(cellValue, item.rkey, row, item.rname, item.rprops, proxy)
-						return $vUtils.trim(rtext).toLowerCase().indexOf(filterText) > -1
-					})
-				})
-			}
-			if (filterData.value === null && !filterText) {
-				return
-			}
-			filterData.value = searchData
-			if (filterData.value && filterData.value.length > 0) {
-				tableRef.value.setTreeExpand(filterData.value[0], true)
-			}
-		}
-		// 获取选中的数据
-		const getSelectionData = () => {
-			return tableRef.value.getCheckboxRecords()
-		}
-		const tableCheckMethods = ({ row }) => {
-			if (props.isLeaf && !props.multiple) {
-				return +row.isleaf === 1 || +row.isLeaf === 1
-			}
-			return true
-		}
-		const getTreeNodeCellContent = ({ row, column }) => {
-			if (props.labelFormat) {
-				return $vUtils.format(props.labelFormat, row)
-			}
-			return $vUtils.get(row, column.property)
-		}
-
-		const filterChangeDebounce = $vUtils.debounce(handleMyTableFilter, 500)
-
-		watch(
-			() => props.modelValue,
-			() => {
-				initSelection(true)
-			}
-		)
-		watch(
-			() => props.filterText,
-			nv => {
-				filterChangeDebounce(nv)
-			},
-			{ deep: true, immediate: true }
-		)
-		watch(
-			() => props.options,
-			nv => {
-				treeData.value = nv
-			},
-			{ immediate: true }
-		)
-		watch(
-			() => treeData.value,
-			nv => {
-				emit('datacall', nv)
-			},
-			{ immediate: true }
-		)
-
-		onMounted(() => {
-			initMounted()
-		})
-
-		return {
-			tableRef,
-			renderKey,
-			treeServerComplate,
-			queryErrorText,
-			tableConfigIn,
-			onRadioChange,
-			onSelectionChange,
-			getTreeNodeCellContent
-		}
-	}
-})
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+	<sh-result v-if="queryErrorText" class="sh-tree-result" type="error" :title="false" :text="queryErrorText"></sh-result>
+	<vxe-grid
+		v-else
+		ref="tableRef"
+		:key="renderKey"
+		:class="{ 'sh-vxe-tree-table': true, 'is--hidecheck': globalConfig.checkHide }"
+		v-bind="tableConfigIn"
+		@radio-change="onRadioChange"
+		@checkbox-change="onSelectionChange"
+		@checkbox-all="onSelectionChange">
+		<template #treeNodeCell="scoped">
+			<span>{{ getTreeNodeCellContent(scoped) }}</span>
+		</template>
+		<template #empty>
+			<sh-empty :icon="emptyIcon" :content="emptyText"></sh-empty>
+		</template>
+	</vxe-grid>
+</template>
+
+<script>
+import { defineComponent, computed, getCurrentInstance, ref, watch, onMounted } from 'vue'
+// 树组件表格默认配置
+const tableConfigDefault = {
+	autoResize: true,
+	stripe: false,
+	size: 'small', //  medium / small / mini
+	border: 'inner',
+	showHeader: false,
+	showFooter: false,
+	showOverflow: true,
+	resizeConfig: {
+		refreshDelay: 100
+	},
+	columnConfig: {
+		width: 120
+	},
+	scrollX: {
+		enabled: true,
+		gt: 20
+	},
+	scrollY: {
+		enabled: true,
+		gt: 20
+	}
+}
+import mixinProps from '../mixin/treeProps'
+export default defineComponent({
+	name: 'TableTree',
+	props: {
+		...mixinProps
+	},
+	emits: ['select', 'datacall'],
+	setup(props, context) {
+		const { proxy } = getCurrentInstance()
+		const { $vUtils, $http, $vxePluginNames } = proxy
+		const { emit, slots } = context
+
+		const tableRef = ref()
+		const renderKey = ref(1)
+		const filterData = ref(null)
+		const treeServerComplate = ref(false)
+		const treeLoading = ref(false)
+		const treeData = ref(props.options)
+		const treeValue = ref([])
+		const queryCacheParams = ref(null)
+		const queryErrorText = ref(null)
+
+		const checkWidth = computed(() => {
+			return props.globalConfig.columns ? props.globalConfig?.defaultWidth || 150 : '100%'
+		})
+		const checkColumnProps = computed(() => {
+			let resultProps = { field: props.labelField, width: checkWidth.value, type: props.multiple ? 'checkbox' : 'radio', treeNode: true, slots: { default: 'treeNodeCell' } }
+			resultProps.title = props.labelTitle || props.multiple ? '全部' : ''
+			return resultProps
+		})
+		const tableProps = computed(() => {
+			return {
+				height: props.isSelect ? '100%' : props.height,
+				size: props.size,
+				loading: props.loading || treeLoading.value,
+				data: filterData.value || treeData.value,
+				columns: [checkColumnProps.value].concat(props.globalConfig?.columns || [])
+			}
+		})
+		const tableConfigIn = computed(() => {
+			let resultConfig = {
+				rowConfig: { isCurrent: false, keyField: props.nodeKey },
+				radioConfig: { checkRowKey: props.modelValue[0], labelField: props.labelField, checkMethod: tableCheckMethods },
+				checkboxConfig: { checkRowKeys: props.modelValue, labelField: props.labelField, checkMethod: tableCheckMethods },
+				treeConfig: { rowField: props.nodeKey },
+				editConfig: { enabled: false }
+			}
+			resultConfig = $vUtils.merge(resultConfig, tableConfigDefault, props.globalConfig)
+			if (props.multiple) {
+				if (props.globalConfig.hasAll) resultConfig.showHeader = true
+				resultConfig.radioConfig = null
+			} else {
+				resultConfig.checkboxConfig = null
+			}
+			return Object.assign(resultConfig, tableProps.value)
+		})
+
+		const initMounted = async () => {
+			// 初始化获取服务配置数据
+			await getServerConfigDataSourse()
+			initSelection()
+		}
+		// 获取请求配置数据
+		const getServerConfigDataSourse = async () => {
+			const { serverConfig, serverParams, parseParams, serverCache, valueData, globalConfig, multiple, nodeKey, labelField } = props
+			if (!serverConfig.url) {
+				treeServerComplate.value = true
+				return true
+			}
+			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.value, params)) {
+				treeServerComplate.value = false
+			}
+			if (serverCache && treeServerComplate.value) {
+				return true
+			}
+			queryErrorText.value = null
+			queryCacheParams.value = params
+			treeLoading.value = 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 treeResData = treeAllNode.concat(treeRes.data)
+					if (globalConfig?.treeConfig?.transform) {
+						treeResData = $vUtils.toTreeArray(treeResData, { clear: true })
+					}
+					treeData.value = treeResData
+				} else {
+					throw new Error(`树节点信息获取失败：${treeRes?.message}`)
+				}
+			} catch (e) {
+				queryErrorText.value = e.message || e
+			}
+			treeLoading.value = false
+			treeServerComplate.value = true
+		}
+		const initSelection = isWatch => {
+			let { modelValue, isSelect } = props
+			let nodeKey = props.nodeKey || 'id'
+			setTimeout(() => {
+				if (!tableRef.value || !modelValue?.length) return
+				if (isWatch) {
+					if (!$vUtils.isEqual(modelValue, treeValue.value)) renderKey.value++
+				} else {
+					tableRef.value.scrollToRow({ [nodeKey]: modelValue[0] })
+				}
+			})
+		}
+		// 单选框变化
+		const onRadioChange = obj => {
+			let nodeKey = props.nodeKey || 'id'
+			let { newValue } = obj
+			let selectedKeys = []
+			if (newValue && (newValue[nodeKey] || newValue[nodeKey] === 0)) {
+				selectedKeys.push(newValue[nodeKey])
+			}
+			treeSelectedChange(selectedKeys, newValue ? [newValue] : [], obj)
+		}
+		// 复选框变化
+		const onSelectionChange = obj => {
+			let nodeKey = props.nodeKey || 'id'
+			let { records = [] } = obj
+			let selectedKeys = []
+			if (Array.isArray(records) && records.length > 0) {
+				selectedKeys = records.map(item => item[nodeKey])
+			}
+			treeSelectedChange(selectedKeys, records, obj)
+		}
+		// 树变化提交
+		const treeSelectedChange = (selectedKeys, selectedRows, obj) => {
+			treeValue.value = selectedKeys
+			emit('select', selectedKeys, selectedRows, obj)
+		}
+		// 全局搜索过滤事件
+		const handleMyTableFilter = text => {
+			const { labelField, labelFormat } = props
+			let filterText = $vUtils.toValueString(text).trim().toLowerCase()
+			let searchData = null
+			if (filterText) {
+				let noSearchArr = ['$vGlobalOption', '$vImg', '$vCheckbox', '$vRadio', '$vUpload', '$vCode', 'seq', 'checkbox', 'radio']
+				const searchProps = [{ rkey: labelField, rname: '', rprops: {}, format: labelFormat }]
+				let tableColumnsAll = tableRef.value.getColumns()
+				tableColumnsAll.forEach(col => {
+					let renderObj = col.cellRender || col.editRender || col.itemRender
+					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) })
+					}
+				})
+				searchData = $vUtils.searchTree(treeData.value, row => {
+					return searchProps.some(item => {
+						let cellValue = $vUtils.get(row, item.rkey)
+						let { rtext } = $vUtils.formatRender(cellValue, item.rkey, row, item.rname, item.rprops, proxy)
+						return $vUtils.trim(rtext).toLowerCase().indexOf(filterText) > -1
+					})
+				})
+			}
+			if (filterData.value === null && !filterText) {
+				return
+			}
+			filterData.value = searchData
+			if (filterData.value && filterData.value.length > 0) {
+				tableRef.value.setTreeExpand(filterData.value[0], true)
+			}
+		}
+		// 获取选中的数据
+		const getSelectionData = () => {
+			return tableRef.value.getCheckboxRecords()
+		}
+		const tableCheckMethods = ({ row }) => {
+			if (props.isLeaf && !props.multiple) {
+				return +row.isleaf === 1 || +row.isLeaf === 1
+			}
+			return true
+		}
+		const getTreeNodeCellContent = ({ row, column }) => {
+			if (props.labelFormat) {
+				return $vUtils.format(props.labelFormat, row)
+			}
+			return $vUtils.get(row, column.property)
+		}
+
+		const filterChangeDebounce = $vUtils.debounce(handleMyTableFilter, 500)
+
+		watch(
+			() => props.modelValue,
+			() => {
+				initSelection(true)
+			}
+		)
+		watch(
+			() => props.filterText,
+			nv => {
+				filterChangeDebounce(nv)
+			},
+			{ deep: true, immediate: true }
+		)
+		watch(
+			() => props.options,
+			nv => {
+				treeData.value = nv
+			},
+			{ immediate: true }
+		)
+		watch(
+			() => treeData.value,
+			nv => {
+				emit('datacall', nv)
+			},
+			{ immediate: true }
+		)
+
+		onMounted(() => {
+			initMounted()
+		})
+
+		return {
+			tableRef,
+			renderKey,
+			treeServerComplate,
+			queryErrorText,
+			tableConfigIn,
+			onRadioChange,
+			onSelectionChange,
+			getTreeNodeCellContent
+		}
+	}
+})
+</script>
+
+<style lang="scss" scoped></style>