sh-view 2.9.8 → 2.9.10

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

@@ -1,29 +1,35 @@
 <template>
-	<sh-result v-if="queryErrorText" class="sh-tree-result" type="error" :title="false" :text="queryErrorText"></sh-result>
-	<vxe-grid
-		v-else
+	<vxe-table
 		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>
+		<vxe-column :field="labelField" :title="labelTitle || multiple ? '全部' : ''" :width="checkWidth" :type="multiple ? 'checkbox' : 'radio'" treeNode>
+			<template #default="scoped">
+				<span>{{ getTreeNodeCellContent(scoped) }}</span>
+			</template>
+		</vxe-column>
+		<template v-if="globalConfig.columns && globalConfig.columns.length > 0">
+			<template v-for="column in globalConfig.columns" :key="column.field">
+				<vxe-column v-bind="column"></vxe-column>
+			</template>
 		</template>
 		<template #empty>
 			<sh-empty :icon="emptyIcon" :content="emptyText"></sh-empty>
 		</template>
-	</vxe-grid>
+	</vxe-table>
 </template>
 
 <script>
 import { defineComponent, computed, getCurrentInstance, ref, watch, onMounted } from 'vue'
 // 树组件表格默认配置
 const tableConfigDefault = {
+	fit: true,
 	autoResize: true,
 	stripe: false,
+	minHeight: 80,
 	size: 'small', //  medium / small / mini
 	border: 'inner',
 	showHeader: false,
@@ -31,8 +37,8 @@ const tableConfigDefault = {
 	showOverflow: true,
 	resizeConfig: { refreshDelay: 100 },
 	columnConfig: { width: 120 },
-	scrollX: { enabled: true, gt: 20 },
-	scrollY: { enabled: true, gt: 20 }
+	virtualXConfig: { enabled: true, gt: 20 },
+	virtualYConfig: { enabled: true, gt: 20 }
 }
 import mixinProps from '../mixin/treeProps'
 export default defineComponent({
@@ -47,37 +53,27 @@ export default defineComponent({
 		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 || [])
+				loading: props.loading,
+				data: filterData.value || props.options
 			}
 		})
+
 		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 },
+				rowConfig: { keyField: props.nodeKey },
+				radioConfig: { labelField: props.labelField, checkMethod: tableCheckMethods },
+				checkboxConfig: { labelField: props.labelField, checkMethod: tableCheckMethods },
 				treeConfig: { rowField: props.nodeKey },
 				editConfig: { enabled: false }
 			}
@@ -91,68 +87,31 @@ export default defineComponent({
 			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
+		const initSelection = () => {
+			let { modelValue, multiple } = 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] })
+				let tableFullData = tableRef.value.getTableData().fullData
+				let checkRows = []
+				$vUtils.eachTree(tableFullData, item => {
+					if (props.modelValue.includes(item[nodeKey])) {
+						checkRows.push(item)
+					}
+				})
+				// 找到第一个选中节点的所有父级，进行展开
+				if (checkRows.length > 0) {
+					let expendNode = checkRows[0]
+					let checkParent = $vUtils.findTree(tableFullData, item => item[nodeKey] === expendNode[nodeKey])
+					let parentNodes = checkParent.nodes.filter(item => item[nodeKey] !== expendNode[nodeKey])
+					tableRef.value.setTreeExpand(parentNodes, true)
+					if (multiple) {
+						tableRef.value.setCheckboxRow(checkRows, true)
+					} else {
+						tableRef.value.setRadioRow(checkRows[0])
+					}
 				}
+				tableRef.value.scrollToRow({ [nodeKey]: modelValue[0] })
 			})
 		}
 		// 单选框变化
@@ -182,7 +141,7 @@ export default defineComponent({
 		}
 		// 全局搜索过滤事件
 		const handleMyTableFilter = text => {
-			const { labelField, labelFormat } = props
+			const { labelField, labelFormat, options } = props
 			let filterText = $vUtils.toValueString(text).trim().toLowerCase()
 			let searchData = null
 			if (filterText) {
@@ -195,7 +154,7 @@ export default defineComponent({
 						searchProps.push({ rkey: col.property, rname: renderObj.name, rprops: Object.assign({}, renderObj.props, col.rprops) })
 					}
 				})
-				searchData = $vUtils.searchTree(treeData.value, row => {
+				searchData = $vUtils.searchTree(options, 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)
@@ -243,34 +202,15 @@ export default defineComponent({
 			},
 			{ 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,
+			checkWidth,
 			tableConfigIn,
 			onRadioChange,
 			onSelectionChange,
-			getTreeNodeCellContent
+			getTreeNodeCellContent,
+			initSelection
 		}
 	}
 })

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

@@ -12,7 +12,8 @@
 						<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>
+						<sh-result v-if="queryErrorText" class="sh-tree-result" type="error" :title="false" :text="queryErrorText"></sh-result>
+						<table-tree ref="tableTreeRef" v-else v-bind="tableTreeProps" @select="onChange"></table-tree>
 					</div>
 				</template>
 			</vxe-pulldown>
@@ -22,14 +23,15 @@
 				<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>
+				<sh-result v-if="queryErrorText" class="sh-tree-result" type="error" :title="false" :text="queryErrorText"></sh-result>
+				<table-tree ref="tableTreeRef" v-else v-bind="tableTreeProps" @select="onChange"></table-tree>
 			</div>
 		</template>
 	</div>
 </template>
 
 <script>
-import { defineComponent, computed, onBeforeMount, getCurrentInstance, ref, watch } from 'vue'
+import { defineComponent, computed, onMounted, getCurrentInstance, ref, watch } from 'vue'
 import './css/index.scss'
 import mixinProps from './mixin/treeProps'
 import tableTree from './components/table-tree.vue'
@@ -44,54 +46,38 @@ export default defineComponent({
 	emits: ['update:modelValue', 'change', 'focus', 'blur'],
 	setup(props, context) {
 		const { proxy } = getCurrentInstance()
-		const { $vUtils } = proxy
+		const { $vUtils, $http } = proxy
 		const { emit, slots } = context
 
 		const treeSelectRef = ref()
 		const treeSelectInputRef = ref()
 		const filterInputRef = ref()
+		const tableTreeRef = ref()
 		// 公共属性
 		const filterTextIn = ref(props.filterText)
 		const selectedKeys = ref([])
 		const selectedData = ref([])
 		const treeData = ref(props.options)
+		const treeServerComplate = ref(false)
+		const treeLoading = ref(false)
+		const isChange = ref(false)
+		const queryCacheParams = ref(null)
+		const queryErrorText = ref(null)
 		// 下拉专属属性
 		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, valueKeys, multiple, format, field, split, labelField, labelFormat } = props
-			let prefixKey = field
-			const endStrs = ['Id', '_id']
-			endStrs.forEach(end => {
-				if (String(field).endsWith(end)) {
-					prefixKey = field.replace(end, '')
-				}
-			})
-			if (valueKeys) {
-				const valueks = Array.isArray(valueKeys) ? valueKeys : valueKeys.split(',')
-				valueks.forEach(key => {
-					const keySplits = String(key).replace(/@/gi, prefixKey).split('=')
-					const toKey = keySplits[0]
-					const fromKey = keySplits[1] || toKey
-					let fromvalue = null
-					if (multiple) {
-						fromvalue = selectedData.value.map(item => $vUtils.get(item, fromKey))
-					} else {
-						fromvalue = $vUtils.get(selectedData.value[0], fromKey)
-					}
-					$vUtils.set(valueData, toKey, fromvalue)
-				})
-			}
-			if (selectedKeys.value && Array.isArray(selectedKeys.value) && selectedKeys.value.length > 0 && treeData.value && treeData.value.length > 0) {
+			let { multiple, format, split, labelField } = props
+			if (selectedKeys.value && Array.isArray(selectedKeys.value) && selectedKeys.value.length > 0) {
 				let selectRows = getSelectRowsByValue(selectedKeys.value)
 				let labelFieldList = selectRows.map(item => $vUtils.get(item, labelField))
-				if (labelFormat) {
+				if (format) {
 					if (multiple) {
-						labelFieldList = selectedData.value.map(item => $vUtils.format(labelFormat, item))
+						labelFieldList = selectedData.value.map(item => $vUtils.format(format, item))
 					} else {
-						labelFieldList = [$vUtils.format(labelFormat, selectedData.value[0])]
+						labelFieldList = [$vUtils.format(format, selectedData.value[0])]
 					}
 				}
 				return labelFieldList.join(split)
@@ -108,12 +94,67 @@ export default defineComponent({
 			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 })
+			return Object.assign({}, props, { options: treeData.value, loading: props.loading || treeLoading.value, filterText: filterTextIn.value, modelValue: selectedKeys.value })
 		})
 
+		const initMounted = async () => {
+			if (!props.isSelect) {
+				// 初始化获取服务配置数据
+				await getServerConfigDataSourse()
+			}
+		}
+
+		// 获取请求配置数据
+		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], Object.assign({}, valueData, { menuInfo: proxy.menuInfo, userInfo: proxy.userInfo }))
+				}
+			})
+			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 getSelectRowsByValue = keys => {
-			const { nodeKey, globalConfig } = props
+			const { nodeKey, globalConfig, valueData } = props
 			let childKey = (globalConfig.treeConfig && globalConfig.treeConfig.childrenField) || proxy.$vTableSetup?.table?.treeConfig?.childrenField || 'children'
 			let selectRows = []
 			$vUtils.eachTree(
@@ -125,6 +166,10 @@ export default defineComponent({
 				},
 				{ children: childKey }
 			)
+			// 为了数据回显，补入当前数据
+			if (valueData && valueData[nodeKey] && keys.includes(valueData[nodeKey]) && !selectRows.find(row => row[nodeKey] === valueData[nodeKey])) {
+				selectRows.push(valueData)
+			}
 			return selectRows
 		}
 		// 获取选中数据
@@ -138,9 +183,15 @@ export default defineComponent({
 			await treeSelectRef.value.togglePanel()
 			pulldownDrop.value = true
 			if (filterInputRef.value) filterInputRef.value.focus()
+			// 初始化获取服务配置数据
+			await getServerConfigDataSourse()
+			if (tableTreeRef.value) {
+				tableTreeRef.value.initSelection()
+			}
 		}
 		// 树节点选择变换事件
 		const onChange = async (keys, rows, obj) => {
+			isChange.value = true
 			if (props.isSelect) {
 				if (!props.multiple) {
 					pulldownDrop.value = false
@@ -167,18 +218,20 @@ export default defineComponent({
 		}
 		// 下拉数清除事件
 		const onClear = () => {
+			isChange.value = true
+			selectedKeys.value = []
+			selectedData.value = []
 			onHidePanel()
 		}
-		// 表格数据回调
-		const onDataCall = datas => {
-			treeData.value = datas
-		}
 		// 回调focus事件
 		const emitFocus = obj => {
 			emit('focus', obj)
 		}
 		// 回调change事件
 		const emitChange = () => {
+			if (!isChange.value) {
+				return
+			}
 			emitValue()
 			emit('change', selectedKeys.value, selectedData.value)
 		}
@@ -188,9 +241,37 @@ export default defineComponent({
 		}
 		// 回调双向绑定
 		const emitValue = () => {
+			const { valueData, valueKeys, multiple, field, split } = props
+			// 用于适配选择树形下拉给多个字段赋值
+			if (valueKeys && selectedData.value.length > 0) {
+				let prefixKey = field
+				const endStrs = ['Id', '_id']
+				endStrs.forEach(end => {
+					if (field.endsWith(end)) {
+						prefixKey = field.replace(end, '')
+					}
+				})
+				const valueks = Array.isArray(valueKeys) ? valueKeys : valueKeys.split(',')
+				valueks.forEach(key => {
+					const keySplits = String(key).replace(/@/gi, prefixKey).split('=')
+					const toKey = keySplits[0]
+					const fromKey = keySplits[1] || toKey
+					let fromvalue = null
+					if (multiple) {
+						fromvalue = selectedData.value.map(item => $vUtils.get(item, fromKey))
+					} else {
+						fromvalue = $vUtils.get(selectedData.value[0], fromKey)
+					}
+					$vUtils.set(valueData, toKey, fromvalue)
+				})
+			}
 			emit('update:modelValue', selectedKeys.value)
 		}
 
+		onMounted(() => {
+			initMounted()
+		})
+
 		watch(
 			() => props.modelValue,
 			value => {
@@ -206,11 +287,19 @@ export default defineComponent({
 				deep: true
 			}
 		)
+		watch(
+			() => props.options,
+			nv => {
+				treeData.value = nv
+			},
+			{ immediate: true }
+		)
 
 		return {
 			treeSelectRef,
 			treeSelectInputRef,
 			filterInputRef,
+			tableTreeRef,
 			wrapHeight,
 			selectConfigIn,
 			selectInputConfigIn,
@@ -218,12 +307,12 @@ export default defineComponent({
 			filterInputConfigIn,
 			pulldownDrop,
 			tableTreeProps,
+			queryErrorText,
 			selectLabels,
 			getSelectionData,
 			onFocus,
 			onClear,
 			onHidePanel,
-			onDataCall,
 			onChange
 		}
 	}

package/packages/css/theme.scss

@@ -42,6 +42,10 @@
 	--vxe-ui-input-placeholder-color: var(--placeholder-color);
 
 	--vxe-ui-table-header-background-color: var(--bg-layout-color);
+    --vxe-ui-table-cell-padding-default: 6px;
+    --vxe-ui-table-cell-padding-medium: 4px;
+    --vxe-ui-table-cell-padding-small: 2px;
+    --vxe-ui-table-cell-padding-mini: 1px;
 }
 
 // 默认主题

package/packages/vxeTable/css/index.scss

@@ -132,6 +132,23 @@ button:focus, .vxe-button.type--button:not(.is--disabled):focus{
 
 // 表格
 .vxe-table{
+    &.is--maximize{
+        padding: 0;
+    }
+    &.is--hidecheck{
+        .vxe-cell--checkbox,.vxe-cell--radio{
+            padding-left: 0;
+        }
+        .vxe-checkbox--label, .vxe-radio--label{
+            padding-left: 0;
+        }
+        .vxe-cell--radio .vxe-radio--icon, .vxe-radio .vxe-radio--icon,
+        .vxe-table--render-wrapper .vxe-cell .vxe-cell--checkbox .vxe-checkbox--icon{
+            width: 0;
+            overflow: hidden;
+            font-size: 0;
+        }
+    }
     &.vxe-table--render-default{
         font-family: inherit;
         color: inherit;
@@ -163,29 +180,6 @@ button:focus, .vxe-button.type--button:not(.is--disabled):focus{
     }
 }
 
-// 表格grid
-.vxe-grid{
-    &.is--maximize{
-        padding: 0;
-    }
-    &.is--hidecheck{
-        .vxe-table--render-default{
-            .vxe-cell--checkbox,.vxe-cell--radio{
-                padding-left: 0;
-            }
-            .vxe-checkbox--label, .vxe-radio--label{
-                padding-left: 0;
-            }
-            .vxe-cell--radio .vxe-radio--icon, .vxe-radio .vxe-radio--icon,
-            .vxe-table--render-wrapper .vxe-cell .vxe-cell--checkbox .vxe-checkbox--icon{
-                width: 0;
-                overflow: hidden;
-                font-size: 0;
-            }
-        }
-    }
-}
-
 // 渲染器
 .vxe-filter{
     &--wrap{
@@ -245,7 +239,7 @@ button:focus, .vxe-button.type--button:not(.is--disabled):focus{
 // 自定义渲染器样式
 .vxe-render--inner {
     display: inline-block;
-    .vxe-input, .vxe-select{
+    .vxe-input, .vxe-select, .vxe-number-input{
         width: 100%;
     }
     &.vxe-render--inner--readonly{