大屏项目初始化

screen-vue/src/views/system/role/role.vue

@@ -63,13 +63,31 @@ const loading = ref(false)
 const menuTreeRef = ref(null)
 const selectedMenuIds = ref([])
 
+const getLeafNodeIds = (treeData, leafIds = []) => {
+  treeData.forEach(node => {
+    if (!node.children || node.children.length === 0) {
+      leafIds.push(String(node.id))
+    } else {
+      getLeafNodeIds(node.children, leafIds)
+    }
+  })
+  return leafIds
+}
+
+const filterOnlyLeafIds = (allIds, treeData) => {
+  const allLeafIds = getLeafNodeIds(treeData)
+  return allIds.filter(id => allLeafIds.includes(id))
+}
+
 const getTreeListData = async () => {
   try {
     const res = await getTreeMenuList()
     menuTreeData.value = res ?? []
+    return menuTreeData.value
   } catch (error) {
     console.error('加载菜单树失败：', error)
     menuTreeData.value = []
+    return []
   }
 }
 
@@ -90,21 +108,38 @@ const treeProps = reactive({
   disabled: 'disabled'
 })
 
+function getIndeterminateKeys(node) {
+  let keys = []
+  if (node.indeterminate) {
+    keys.push(node.key)
+  }
+  if (node.childNodes) {
+    node.childNodes.forEach(c => keys.push(...getIndeterminateKeys(c)))
+  }
+  return keys
+}
+
+function getCheckedAndIndeterminateKeys() {
+  if (!menuTreeRef.value) return []
+  const checked = menuTreeRef.value.getCheckedKeys(false)
+  const indeterminate = getIndeterminateKeys(menuTreeRef.value.root)
+  return [...new Set([...checked, ...indeterminate])]
+}
+
 onMounted(async () => {
   loading.value = true
   try {
-    const [_, roleMenuIds] = await Promise.all([
-      getTreeListData(),
-      getRoleMenuIds()
-    ])
-
+    const treeData = await getTreeListData()
+    const roleMenuIds = await getRoleMenuIds()
     const propsMenuIds = (props.formData?.menuIds ?? []).map(id => String(id)).filter(id => id)
-    const defaultCheckedIds = roleMenuIds.length > 0 ? roleMenuIds : propsMenuIds
-    if (defaultCheckedIds.length > 0) {
-      selectedMenuIds.value = [...defaultCheckedIds]
+    const allMenuIds = roleMenuIds.length > 0 ? roleMenuIds : propsMenuIds
+    const leafMenuIds = filterOnlyLeafIds(allMenuIds, treeData)
+
+    if (leafMenuIds.length > 0) {
+      selectedMenuIds.value = [...leafMenuIds]
       setTimeout(() => {
-        if (menuTreeRef.value && menuTreeData.value.length) {
-          menuTreeRef.value.setCheckedKeys(defaultCheckedIds, false)
+        if (menuTreeRef.value && treeData.length) {
+          menuTreeRef.value.setCheckedKeys(leafMenuIds, false)
         }
       }, 300)
     }
@@ -116,12 +151,14 @@ onMounted(async () => {
 })
 
 watch(() => props.formData.menuIds, (newVal) => {
-  if (!newVal || !newVal.length || !menuTreeRef.value) return
+  if (!newVal || !newVal.length || !menuTreeRef.value || !menuTreeData.value.length) return
   
-  const menuIds = newVal.map(id => String(id)).filter(id => id)
-  if (menuIds.length) {
-    selectedMenuIds.value = [...menuIds]
-    menuTreeRef.value.setCheckedKeys(menuIds, false)
+  const allMenuIds = newVal.map(id => String(id)).filter(id => id)
+  const leafMenuIds = filterOnlyLeafIds(allMenuIds, menuTreeData.value)
+  
+  if (leafMenuIds.length) {
+    selectedMenuIds.value = [...leafMenuIds]
+    menuTreeRef.value.setCheckedKeys(leafMenuIds, false)
   }
 }, { deep: true })
 
@@ -130,7 +167,7 @@ const handleCheck = () => {
   selectedMenuIds.value = menuTreeRef.value.getCheckedKeys(false)
 }
 
-const handleCheckChange = (data, checked, indeterminate) => {
+const handleCheckChange = () => {
   handleCheck()
 }
 
@@ -152,7 +189,7 @@ const resetForm = () => {
 defineExpose({ 
   validate, 
   resetForm,
-  getSelectedMenuIds: () => selectedMenuIds.value,
+  getSelectedMenuIds: () => getCheckedAndIndeterminateKeys(),
   getLeafMenuIds: () => menuTreeRef.value ? menuTreeRef.value.getCheckedKeys(true) : []
 })
 </script>