【底座】优化用户机构数据范围树的展示

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

@@ -23,7 +23,6 @@
 				checkable
 				check-strictly
 				:selectable="false"
-				:load-data="onLoadData"
 				@check="treeCheck"
 			>
 			</a-tree>
@@ -32,150 +31,129 @@
 </template>
 
 <script setup="props, context" name="userScopeDefineOrg">
-	import userApi from '@/api/sys/userApi'
+import userApi from '@/api/sys/userApi'
-	const visible = ref(false)
+const visible = ref(false)
-	let defaultExpandedKeys = ref([])
+let defaultExpandedKeys = ref([])
-	let checkedKeys = ref([])
+let checkedKeys = ref([])
-	const treeData = ref([])
+const treeData = ref([])
 
-	const getAllIds = (nodes) => {
+const getAllIds = (nodes) => {
-		const ids = []
+	const ids = []
-		const stack = [...nodes]
+	const stack = [...nodes]
-		while (stack.length) {
+	while (stack.length) {
-			const n = stack.pop()
+		const n = stack.pop()
-			if (n && n.id) ids.push(n.id)
+		if (n && n.id) ids.push(n.id)
-			if (n && n.children && n.children.length) {
+		if (n && n.children && n.children.length) {
-				for (let i = 0; i < n.children.length; i++) {
+			for (let i = 0; i < n.children.length; i++) {
-					stack.push(n.children[i])
+				stack.push(n.children[i])
+			}
+		}
+	}
+	return ids
+}
+
+const resultDataModel = {
+	dataScopeId: '',
+	defineOrgIdData: {
+		scopeCategory: 'SCOPE_ORG_DEFINE',
+		scopeDefineOrgIdList: []
+	}
+}
+
+// 打开此界面需要具体某条菜单的id跟选中的
+const onOpen = (id, checkKeys) => {
+	visible.value = true
+	resultDataModel.dataScopeId = id
+	// const treeData = data.data;
+	userApi.userOrgTreeSelector({ searchKey: '' }).then((res) => {
+		if (res !== null) {
+			treeData.value = res
+			// 赋值选中项
+			echoOrgSelectKeys(checkKeys)
+			// 默认展开2级
+			treeData.value.forEach((item) => {
+				// 因为0的顶级
+				if (item.parentId === '0') {
+					defaultExpandedKeys.value.push(item.id)
+					// 取到下级ID
+					if (item.children) {
+						item.children.forEach((items) => {
+							defaultExpandedKeys.value.push(items.id)
+						})
+					}
 				}
-			}
+			})
 		}
-		return ids
-	}
-
-	const resultDataModel = {
-		dataScopeId: '',
-		defineOrgIdData: {
-			scopeCategory: 'SCOPE_ORG_DEFINE',
-			scopeDefineOrgIdList: []
-		}
-	}
-
-	// 打开此界面需要具体某条菜单的id跟选中的
-	const onOpen = (id, checkKeys) => {
-		visible.value = true
-		resultDataModel.dataScopeId = id
-		// const treeData = data.data;
-		userApi.userOrgTreeSelector().then((res) => {
-			if (res !== null) {
-				treeData.value = res.map((item) => {
-					return {
-						...item,
-						isLeaf: item.isLeaf === undefined ? false : item.isLeaf
-					}
-				})
-				// 赋值选中项
-				echoOrgSelectKeys(checkKeys)
-				// 默认展开2级
-				treeData.value.forEach((item) => {
-					// 因为0的顶级
-					if (item.parentId === '0') {
-						defaultExpandedKeys.value.push(item.id)
-					}
-				})
-			}
-		})
-	}
-	const onLoadData = (treeNode) => {
-		return new Promise((resolve) => {
-			if (treeNode.dataRef.children) {
-				resolve()
-				return
-			}
-			userApi
-				.userOrgTreeSelector({
-					parentId: treeNode.dataRef.id
-				})
-				.then((res) => {
-					treeNode.dataRef.children = res.map((item) => {
-						return {
-							...item,
-							isLeaf: item.isLeaf === undefined ? false : item.isLeaf
-						}
-					})
-					treeData.value = [...treeData.value]
-					resolve()
-				})
-		})
-	}
-	const onClose = () => {
-		visible.value = false
-	}
-	// 回显机构的选中项
-	const echoOrgSelectKeys = (checkKeys) => {
-		checkedKeys.value = []
-		if (checkKeys && checkKeys.length > 0) {
-			checkKeys
-				.toString()
-				.split(',')
-				.forEach((key) => {
-					checkedKeys.value.push(key)
-				})
-		}
-		resultDataModel.defineOrgIdData.scopeDefineOrgIdList = checkedKeys.value
-	}
-	// 替换treeNode 中 title,key,children
-	const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
-
-	const treeCheck = (keysObj) => {
-		checkedKeys.value = keysObj.checked
-		resultDataModel.defineOrgIdData.scopeDefineOrgIdList = keysObj.checked
-	}
-
-	const getCurrentCheckedIds = () => {
-		if (Array.isArray(checkedKeys.value)) return checkedKeys.value
-		if (checkedKeys.value && Array.isArray(checkedKeys.value.checked)) return checkedKeys.value.checked
-		return []
-	}
-
-	const checkAll = () => {
-		const all = getAllIds(treeData.value)
-		checkedKeys.value = all
-		resultDataModel.defineOrgIdData.scopeDefineOrgIdList = all
-	}
-
-	const invertCheck = () => {
-		const all = getAllIds(treeData.value)
-		const current = getCurrentCheckedIds()
-		const set = new Set(current)
-		const next = all.filter((id) => !set.has(id))
-		checkedKeys.value = next
-		resultDataModel.defineOrgIdData.scopeDefineOrgIdList = next
-	}
-	// 定义emit事件
-	const emit = defineEmits({
-		click: null
 	})
-	const handleOk = () => {
+}
-		emit('click', resultDataModel)
+const onClose = () => {
-		visible.value = false
+	visible.value = false
+}
+// 回显机构的选中项
+const echoOrgSelectKeys = (checkKeys) => {
+	checkedKeys.value = []
+	if (checkKeys && checkKeys.length > 0) {
+		checkKeys
+			.toString()
+			.split(',')
+			.forEach((key) => {
+				checkedKeys.value.push(key)
+			})
 	}
+	resultDataModel.defineOrgIdData.scopeDefineOrgIdList = checkedKeys.value
+}
+// 替换treeNode 中 title,key,children
+const treeFieldNames = { children: 'children', title: 'name', key: 'id' }
 
-	defineExpose({
+const treeCheck = (keysObj) => {
-		onOpen
+	checkedKeys.value = keysObj.checked
-	})
+	resultDataModel.defineOrgIdData.scopeDefineOrgIdList = keysObj.checked
+}
+
+const getCurrentCheckedIds = () => {
+	if (Array.isArray(checkedKeys.value)) return checkedKeys.value
+	if (checkedKeys.value && Array.isArray(checkedKeys.value.checked)) return checkedKeys.value.checked
+	return []
+}
+
+const checkAll = () => {
+	const all = getAllIds(treeData.value)
+	checkedKeys.value = all
+	resultDataModel.defineOrgIdData.scopeDefineOrgIdList = all
+}
+
+const invertCheck = () => {
+	const all = getAllIds(treeData.value)
+	const current = getCurrentCheckedIds()
+	const set = new Set(current)
+	const next = all.filter((id) => !set.has(id))
+	checkedKeys.value = next
+	resultDataModel.defineOrgIdData.scopeDefineOrgIdList = next
+}
+// 定义emit事件
+const emit = defineEmits({
+	click: null
+})
+const handleOk = () => {
+	emit('click', resultDataModel)
+	visible.value = false
+}
+
+defineExpose({
+	onOpen
+})
 </script>
 
 <style lang="less">
-	// 穿梭框宽度重写
+// 穿梭框宽度重写
-	.ant-transfer-list {
+.ant-transfer-list {
-		width: 220px !important;
+	width: 220px !important;
-	}
+}
-	.scopeDefineOrgTreeDiv {
+.scopeDefineOrgTreeDiv {
-		max-height: 450px;
+	max-height: 450px;
-		overflow: auto;
+	overflow: auto;
-	}
+}
-	.scopeDefineOrgActions {
+.scopeDefineOrgActions {
-		margin-bottom: 8px;
+	margin-bottom: 8px;
-	}
+}
 </style>