【机构】再次优化大数据下的机构授权接口、界面体验

snowy-admin-web/src/components/XnOrgSelector/index.vue

@@ -36,6 +36,7 @@
 						:tree-data="treeData"
 						:field-names="treeFieldNames"
 						:load-data="onLoadData"
+						:height="treeHeight"
 						@select="treeSelect"
 					>
 					</a-tree>
@@ -153,7 +154,7 @@
 	import { message } from 'ant-design-vue'
 	import { remove, isEmpty, cloneDeep } from 'lodash-es'
 	import userCenterApi from '@/api/sys/userCenterApi'
-	import { useSlots } from 'vue'
+	import { useSlots, triggerRef } from 'vue'
 	// 弹窗是否打开
 	const visible = ref(false)
 	// 主表格common
@@ -252,11 +253,12 @@
 	const current = ref(0) // 当前页数
 	const pageSize = ref(10) // 每页条数
 	const total = ref(0) // 数据总数
+	const treeHeight = ref(400)
 
 	// 懒加载子节点
 	const onLoadData = (treeNode) => {
 		return new Promise((resolve) => {
-			if (typeof props.orgTreeLazyApi !== 'function' || treeNode.dataRef.children) {
+			if (typeof props.orgTreeLazyApi !== 'function' || treeNode.dataRef.children || treeNode.dataRef.isLeaf) {
 				resolve()
 				return
 			}
@@ -271,7 +273,7 @@
 							isLeaf: item.isLeaf === undefined ? false : item.isLeaf
 						}
 					})
-					treeData.value = [...treeData.value]
+					triggerRef(treeData)
 					resolve()
 				})
 		})
@@ -321,6 +323,8 @@
 			return
 		}
 		visible.value = true
+		// 动态计算树高度，适配不同屏幕
+		treeHeight.value = Math.min(Math.max(window.innerHeight - 350, 250), 460)
 		// 获取机构树
 		if (typeof props.orgTreeLazyApi === 'function') {
 			props

snowy-admin-web/src/components/XnPositionSelector/index.vue

@@ -36,6 +36,7 @@
 						:tree-data="treeData"
 						:field-names="treeFieldNames"
 						:load-data="onLoadData"
+						:height="treeHeight"
 						@select="treeSelect"
 					>
 					</a-tree>
@@ -153,7 +154,7 @@
 	import { message } from 'ant-design-vue'
 	import { remove, isEmpty, cloneDeep } from 'lodash-es'
 	import userCenterApi from '@/api/sys/userCenterApi'
-	import { useSlots } from 'vue'
+	import { useSlots, triggerRef } from 'vue'
 	// 弹窗是否打开
 	const visible = ref(false)
 	// 主表格common
@@ -248,11 +249,12 @@
 	const current = ref(0) // 当前页数
 	const pageSize = ref(10) // 每页条数
 	const total = ref(0) // 数据总数
+	const treeHeight = ref(400)
 
 	// 懒加载子节点
 	const onLoadData = (treeNode) => {
 		return new Promise((resolve) => {
-			if (typeof props.orgTreeLazyApi !== 'function' || treeNode.dataRef.children) {
+			if (typeof props.orgTreeLazyApi !== 'function' || treeNode.dataRef.children || treeNode.dataRef.isLeaf) {
 				resolve()
 				return
 			}
@@ -267,7 +269,7 @@
 							isLeaf: item.isLeaf === undefined ? false : item.isLeaf
 						}
 					})
-					treeData.value = [...treeData.value]
+					triggerRef(treeData)
 					resolve()
 				})
 		})
@@ -317,6 +319,8 @@
 			return
 		}
 		visible.value = true
+		// 动态计算树高度，适配不同屏幕
+		treeHeight.value = Math.min(Math.max(window.innerHeight - 350, 250), 460)
 		// 获取机构树
 		if (typeof props.orgTreeLazyApi === 'function') {
 			props

snowy-admin-web/src/components/XnRoleSelector/index.vue

@@ -36,6 +36,7 @@
 						:tree-data="treeData"
 						:field-names="treeFieldNames"
 						:load-data="onLoadData"
+						:height="treeHeight"
 						@select="treeSelect"
 					>
 					</a-tree>
@@ -154,7 +155,7 @@
 	import { message } from 'ant-design-vue'
 	import { remove, isEmpty, cloneDeep } from 'lodash-es'
 	import userCenterApi from '@/api/sys/userCenterApi'
-	import { useSlots } from 'vue'
+	import { useSlots, triggerRef, nextTick } from 'vue'
 	// 弹窗是否打开
 	const visible = ref(false)
 	// 主表格common
@@ -255,11 +256,12 @@
 	const current = ref(0) // 当前页数
 	const pageSize = ref(10) // 每页条数
 	const total = ref(0) // 数据总数
+	const treeHeight = ref(400)
 
 	// 懒加载子节点
 	const onLoadData = (treeNode) => {
 		return new Promise((resolve) => {
-			if (typeof props.orgTreeLazyApi !== 'function' || treeNode.dataRef.children) {
+			if (typeof props.orgTreeLazyApi !== 'function' || treeNode.dataRef.children || treeNode.dataRef.isLeaf) {
 				resolve()
 				return
 			}
@@ -274,7 +276,7 @@
 							isLeaf: item.isLeaf === undefined ? false : item.isLeaf
 						}
 					})
-					treeData.value = [...treeData.value]
+					triggerRef(treeData)
 					resolve()
 				})
 		})
@@ -324,6 +326,8 @@
 			return
 		}
 		visible.value = true
+		// 动态计算树高度，适配不同屏幕
+		treeHeight.value = Math.min(Math.max(window.innerHeight - 350, 250), 460)
 		// 获取机构树
 		if (typeof props.orgTreeLazyApi === 'function') {
 			props

snowy-admin-web/src/components/XnUserSelector/index.vue

@@ -43,6 +43,7 @@
 						:tree-data="treeData"
 						:field-names="treeFieldNames"
 						:load-data="onLoadData"
+						:height="treeHeight"
 						@select="treeSelect"
 					>
 					</a-tree>
@@ -163,6 +164,7 @@
 	import { message } from 'ant-design-vue'
 	import { remove, isEmpty, cloneDeep } from 'lodash-es'
 	import userCenterApi from '@/api/sys/userCenterApi'
+	import { triggerRef } from 'vue'
 	// 弹窗是否打开
 	const visible = ref(false)
 	const deleteShow = ref('')
@@ -261,6 +263,7 @@
 	const current = ref(0) // 当前页数
 	const pageSize = ref(10) // 每页条数
 	const total = ref(0) // 数据总数
+	const treeHeight = ref(400)
 	// 获取选中列表的api
 	const userListByIdList = (param) => {
 		if (typeof props.userListByIdListApi === 'function') {
@@ -287,7 +290,7 @@
 	// 懒加载子节点
 	const onLoadData = (treeNode) => {
 		return new Promise((resolve) => {
-			if (typeof props.orgTreeLazyApi !== 'function' || treeNode.dataRef.children) {
+			if (typeof props.orgTreeLazyApi !== 'function' || treeNode.dataRef.children || treeNode.dataRef.isLeaf) {
 				resolve()
 				return
 			}
@@ -302,7 +305,7 @@
 							isLeaf: item.isLeaf === undefined ? false : item.isLeaf
 						}
 					})
-					treeData.value = [...treeData.value]
+					triggerRef(treeData)
 					resolve()
 				})
 		})
@@ -315,6 +318,8 @@
 			return
 		}
 		visible.value = true
+		// 动态计算树高度，适配不同屏幕
+		treeHeight.value = Math.min(Math.max(window.innerHeight - 350, 250), 460)
 		// 获取机构树
 		if (typeof props.orgTreeLazyApi === 'function') {
 			props

snowy-admin-web/src/views/biz/org/index.vue

@@ -2,8 +2,14 @@
 	<XnResizablePanel direction="row" :initial-size="300" :min-size="200" :max-size="500" :md="0">
 		<template #left>
 			<div ref="treeContainerRef" style="height: 100%">
+				<div
+					v-if="treeLoading && treeData.length === 0"
+					style="display: flex; height: 100%; align-items: center; justify-content: center"
+				>
+					<a-spin />
+				</div>
 				<a-tree
-					v-if="treeData.length > 0"
+					v-else-if="treeData.length > 0"
 					v-model:expandedKeys="defaultExpandedKeys"
 					:tree-data="treeData"
 					:field-names="treeFieldNames"
@@ -206,24 +212,31 @@
 		searchFormRef.value.resetFields()
 		tableRef.value.refresh(true)
 	}
+	const treeLoading = ref(true)
 	// 加载左侧的树
 	const loadTreeData = () => {
-		bizOrgApi.orgTreeLazy().then((res) => {
-			if (res !== null) {
-				treeData.value = res.map((item) => {
-					return {
-						...item,
-						isLeaf: item.isLeaf === undefined ? false : item.isLeaf
-					}
-				})
-				if (isEmpty(defaultExpandedKeys.value)) {
-					// 默认展开第一级
-					if (treeData.value.length > 0) {
-						defaultExpandedKeys.value.push(treeData.value[0].id)
+		treeLoading.value = true
+		bizOrgApi
+			.orgTreeLazy()
+			.then((res) => {
+				if (res !== null) {
+					treeData.value = res.map((item) => {
+						return {
+							...item,
+							isLeaf: item.isLeaf === undefined ? false : item.isLeaf
+						}
+					})
+					if (isEmpty(defaultExpandedKeys.value)) {
+						// 默认展开第一级
+						if (treeData.value.length > 0) {
+							defaultExpandedKeys.value.push(treeData.value[0].id)
+						}
 					}
 				}
-			}
-		})
+			})
+			.finally(() => {
+				treeLoading.value = false
+			})
 	}
 	loadTreeData()
 	// 懒加载子节点

snowy-admin-web/src/views/biz/position/index.vue

@@ -2,8 +2,14 @@
 	<XnResizablePanel direction="row" :initial-size="300" :min-size="200" :max-size="500" :md="0">
 		<template #left>
 			<div ref="treeContainerRef" style="height: 100%">
+				<div
+					v-if="treeLoading && treeData.length === 0"
+					style="display: flex; height: 100%; align-items: center; justify-content: center"
+				>
+					<a-spin />
+				</div>
 				<a-tree
-					v-if="treeData.length > 0"
+					v-else-if="treeData.length > 0"
 					v-model:expandedKeys="defaultExpandedKeys"
 					:tree-data="treeData"
 					:field-names="treeFieldNames"
@@ -197,27 +203,30 @@
 		searchFormRef.value.resetFields()
 		tableRef.value.refresh(true)
 	}
+	const treeLoading = ref(true)
 	// 加载左侧的树
 	const loadTreeData = () => {
-		bizOrgApi.orgTreeLazy().then((res) => {
-			if (res !== null) {
-				treeData.value = res.map((item) => {
-					return {
-						...item,
-						isLeaf: item.isLeaf === undefined ? false : item.isLeaf
-					}
-				})
-				if (isEmpty(defaultExpandedKeys.value)) {
-					// 默认展开顶级
-					treeData.value.forEach((item) => {
-						// 因为0的顶级
-						if (item.parentId === '0') {
-							defaultExpandedKeys.value.push(item.id)
+		treeLoading.value = true
+		bizOrgApi
+			.orgTreeLazy()
+			.then((res) => {
+				if (res !== null) {
+					treeData.value = res.map((item) => {
+						return {
+							...item,
+							isLeaf: item.isLeaf === undefined ? false : item.isLeaf
 						}
 					})
+					if (isEmpty(defaultExpandedKeys.value)) {
+						if (treeData.value.length > 0) {
+							defaultExpandedKeys.value.push(treeData.value[0].id)
+						}
+					}
 				}
-			}
-		})
+			})
+			.finally(() => {
+				treeLoading.value = false
+			})
 	}
 	loadTreeData()
 	// 懒加载子节点

snowy-admin-web/src/views/biz/user/index.vue

@@ -2,8 +2,14 @@
 	<XnResizablePanel direction="row" :initial-size="300" :min-size="200" :max-size="500" :md="0">
 		<template #left>
 			<div ref="treeContainerRef" style="height: 100%">
+				<div
+					v-if="treeLoading && treeData.length === 0"
+					style="display: flex; height: 100%; align-items: center; justify-content: center"
+				>
+					<a-spin />
+				</div>
 				<a-tree
-					v-if="treeData.length > 0"
+					v-else-if="treeData.length > 0"
 					v-model:expandedKeys="defaultExpandedKeys"
 					:tree-data="treeData"
 					:field-names="treeFieldNames"
@@ -272,27 +278,30 @@
 		searchFormRef.value.resetFields()
 		tableRef.value.refresh(true)
 	}
+	const treeLoading = ref(true)
 	// 加载左侧树
 	const loadTreeData = () => {
-		bizOrgApi.orgTreeLazy().then((res) => {
-			if (res !== null) {
-				treeData.value = res.map((item) => {
-					return {
-						...item,
-						isLeaf: item.isLeaf === undefined ? false : item.isLeaf
-					}
-				})
-				if (isEmpty(defaultExpandedKeys.value)) {
-					// 默认展开顶级
-				treeData.value.forEach((item) => {
-						// 因为0的顶级
-						if (item.parentId === '0') {
-							defaultExpandedKeys.value.push(item.id)
+		treeLoading.value = true
+		bizOrgApi
+			.orgTreeLazy()
+			.then((res) => {
+				if (res !== null) {
+					treeData.value = res.map((item) => {
+						return {
+							...item,
+							isLeaf: item.isLeaf === undefined ? false : item.isLeaf
 						}
 					})
+					if (isEmpty(defaultExpandedKeys.value)) {
+						if (treeData.value.length > 0) {
+							defaultExpandedKeys.value.push(treeData.value[0].id)
+						}
+					}
 				}
-			}
-		})
+			})
+			.finally(() => {
+				treeLoading.value = false
+			})
 	}
 	loadTreeData()
 	// 懒加载子节点

snowy-admin-web/src/views/sys/org/index.vue

@@ -2,8 +2,14 @@
 	<XnResizablePanel direction="row" :initial-size="300" :min-size="200" :max-size="500" :md="0">
 		<template #left>
 			<div ref="treeContainerRef" style="height: 100%">
+				<div
+					v-if="treeLoading && treeData.length === 0"
+					style="display: flex; height: 100%; align-items: center; justify-content: center"
+				>
+					<a-spin />
+				</div>
 				<a-tree
-					v-if="treeData.length > 0"
+					v-else-if="treeData.length > 0"
 					v-model:expandedKeys="defaultExpandedKeys"
 					:tree-data="treeData"
 					:field-names="treeFieldNames"
@@ -203,24 +209,31 @@
 		searchFormRef.value.resetFields()
 		tableRef.value.refresh(true)
 	}
+	const treeLoading = ref(true)
 	// 加载左侧的树
 	const loadTreeData = () => {
-		orgApi.orgTreeLazy().then((res) => {
-			if (res !== null) {
-				treeData.value = res.map((item) => {
-					return {
-						...item,
-						isLeaf: item.isLeaf === undefined ? false : item.isLeaf
-					}
-				})
-				if (isEmpty(defaultExpandedKeys.value)) {
-					// 默认展开第一级
-					if (treeData.value.length > 0) {
-						defaultExpandedKeys.value.push(treeData.value[0].id)
+		treeLoading.value = true
+		orgApi
+			.orgTreeLazy()
+			.then((res) => {
+				if (res !== null) {
+					treeData.value = res.map((item) => {
+						return {
+							...item,
+							isLeaf: item.isLeaf === undefined ? false : item.isLeaf
+						}
+					})
+					if (isEmpty(defaultExpandedKeys.value)) {
+						// 默认展开第一级
+						if (treeData.value.length > 0) {
+							defaultExpandedKeys.value.push(treeData.value[0].id)
+						}
 					}
 				}
-			}
-		})
+			})
+			.finally(() => {
+				treeLoading.value = false
+			})
 	}
 	loadTreeData()
 	// 懒加载子节点

snowy-admin-web/src/views/sys/position/index.vue

@@ -2,8 +2,14 @@
 	<XnResizablePanel direction="row" :initial-size="300" :min-size="200" :max-size="500" :md="0">
 		<template #left>
 			<div ref="treeContainerRef" style="height: 100%">
+				<div
+					v-if="treeLoading && treeData.length === 0"
+					style="display: flex; height: 100%; align-items: center; justify-content: center"
+				>
+					<a-spin />
+				</div>
 				<a-tree
-					v-if="treeData.length > 0"
+					v-else-if="treeData.length > 0"
 					v-model:expandedKeys="defaultExpandedKeys"
 					:tree-data="treeData"
 					:field-names="treeFieldNames"
@@ -194,23 +200,29 @@
 		searchFormRef.value.resetFields()
 		tableRef.value.refresh(true)
 	}
+	const treeLoading = ref(true)
 	// 加载左侧的树
-	orgApi.orgTreeLazy().then((res) => {
-		if (res !== null) {
-			treeData.value = res.map((item) => {
-				return {
-					...item,
-					isLeaf: item.isLeaf === undefined ? false : item.isLeaf
-				}
-			})
-			if (isEmpty(defaultExpandedKeys.value)) {
-				// 默认展开第一级
-				if (treeData.value.length > 0) {
-					defaultExpandedKeys.value.push(treeData.value[0].id)
+	orgApi
+		.orgTreeLazy()
+		.then((res) => {
+			if (res !== null) {
+				treeData.value = res.map((item) => {
+					return {
+						...item,
+						isLeaf: item.isLeaf === undefined ? false : item.isLeaf
+					}
+				})
+				if (isEmpty(defaultExpandedKeys.value)) {
+					// 默认展开第一级
+					if (treeData.value.length > 0) {
+						defaultExpandedKeys.value.push(treeData.value[0].id)
+					}
 				}
 			}
-		}
-	})
+		})
+		.finally(() => {
+			treeLoading.value = false
+		})
 	// 懒加载子节点
 	const onLoadData = (treeNode) => {
 		return new Promise((resolve) => {

snowy-admin-web/src/views/sys/role/index.vue

@@ -2,8 +2,14 @@
 	<XnResizablePanel direction="row" :initial-size="300" :min-size="200" :max-size="500" :md="0">
 		<template #left>
 			<div ref="treeContainerRef" style="height: 100%">
+				<div
+					v-if="treeLoading && treeData.length === 0"
+					style="display: flex; height: 100%; align-items: center; justify-content: center"
+				>
+					<a-spin />
+				</div>
 				<a-tree
-					v-if="treeData.length > 0"
+					v-else-if="treeData.length > 0"
 					v-model:expandedKeys="defaultExpandedKeys"
 					:tree-data="treeData"
 					:field-names="treeFieldNames"
@@ -244,38 +250,41 @@
 		delete searchFormState.value.category
 		tableRef.value.refresh(true)
 	}
+	const treeLoading = ref(true)
 	// 加载左侧的树
 	const loadTreeData = () => {
-		orgApi.orgTreeLazy().then((res) => {
-			if (res !== null) {
-				// 树中插入全局角色类型
-				const globalRoleType = [
-					{
-						id: 'GLOBAL',
-						parentId: '-1',
-						name: '全局',
-						isLeaf: true
+		treeLoading.value = true
+		orgApi
+			.orgTreeLazy()
+			.then((res) => {
+				if (res !== null) {
+					// 树中插入全局角色类型
+					const globalRoleType = [
+						{
+							id: 'GLOBAL',
+							parentId: '-1',
+							name: '全局',
+							isLeaf: true
+						}
+					]
+					treeData.value = globalRoleType.concat(
+						res.map((item) => {
+							return {
+								...item,
+								isLeaf: item.isLeaf === undefined ? false : item.isLeaf
+							}
+						})
+					)
+					if (isEmpty(defaultExpandedKeys.value)) {
+						if (treeData.value.length > 0) {
+							defaultExpandedKeys.value.push(treeData.value[0].id)
+						}
 					}
-				]
-				treeData.value = globalRoleType.concat(
-					res.map((item) => {
-						return {
-							...item,
-							isLeaf: item.isLeaf === undefined ? false : item.isLeaf
-						}
-					})
-				)
-				if (isEmpty(defaultExpandedKeys.value)) {
-					// 默认展开顶级
-					treeData.value.forEach((item) => {
-						// 因为0的顶级
-						if (item.parentId === '0') {
-							defaultExpandedKeys.value.push(item.id)
-						}
-					})
 				}
-			}
-		})
+			})
+			.finally(() => {
+				treeLoading.value = false
+			})
 	}
 	loadTreeData()
 	// 懒加载子节点

snowy-admin-web/src/views/sys/user/index.vue

@@ -2,8 +2,14 @@
 	<XnResizablePanel direction="row" :initial-size="300" :min-size="200" :max-size="500" :md="0">
 		<template #left>
 			<div ref="treeContainerRef" style="height: 100%">
+				<div
+					v-if="treeLoading && treeData.length === 0"
+					style="display: flex; height: 100%; align-items: center; justify-content: center"
+				>
+					<a-spin />
+				</div>
 				<a-tree
-					v-if="treeData.length > 0"
+					v-else-if="treeData.length > 0"
 					v-model:expandedKeys="defaultExpandedKeys"
 					:tree-data="treeData"
 					:field-names="treeFieldNames"
@@ -288,23 +294,29 @@
 			return res
 		})
 	}
+	const treeLoading = ref(true)
 	// 左侧树查询
-	orgApi.orgTreeLazy().then((res) => {
-		if (res !== null) {
-			treeData.value = res.map((item) => {
-				return {
-					...item,
-					isLeaf: item.isLeaf === undefined ? false : item.isLeaf
-				}
-			})
-			if (isEmpty(defaultExpandedKeys.value)) {
-				// 默认展开第一级
-				if (treeData.value.length > 0) {
-					defaultExpandedKeys.value.push(treeData.value[0].id)
+	orgApi
+		.orgTreeLazy()
+		.then((res) => {
+			if (res !== null) {
+				treeData.value = res.map((item) => {
+					return {
+						...item,
+						isLeaf: item.isLeaf === undefined ? false : item.isLeaf
+					}
+				})
+				if (isEmpty(defaultExpandedKeys.value)) {
+					// 默认展开第一级
+					if (treeData.value.length > 0) {
+						defaultExpandedKeys.value.push(treeData.value[0].id)
+					}
 				}
 			}
-		}
-	})
+		})
+		.finally(() => {
+			treeLoading.value = false
+		})
 	// 懒加载子节点
 	const onLoadData = (treeNode) => {
 		return new Promise((resolve) => {