修复报表的小问题

src/views/settings/permissions/RoleMenuSettings.vue

@@ -1,18 +1,30 @@
 <template>
   <div class="layout_container">
     <header>
-      <el-input style="width: 200px" v-model="searchRoleContent" placeholder="请输入角色名称"></el-input>
+      <el-input
+        style="width: 200px"
+        v-model="searchRoleContent"
+        placeholder="请输入角色名称"
+      ></el-input>
       <el-divider direction="vertical"></el-divider>
       <el-button type="primary" icon="Upload" @click="beforeSaveMenus">
-        {{ tabsVal === 'first' ? "菜单保存" : "报表保存" }}
+        {{ tabsVal === "first" ? "菜单保存" : "报表保存" }}
       </el-button>
     </header>
     <div class="layout_main layout_container layout-horizontal">
-      <div class="layout_main layout_el-table" style="padding-right:10px ">
-        <el-table :data="cptRoles" stripe highlight-current-row @row-click="handleClickRole">
+      <div class="layout_main layout_el-table" style="padding-right: 10px">
+        <el-table
+          :data="cptRoles"
+          stripe
+          highlight-current-row
+          @row-click="handleClickRole"
+        >
           <el-table-column prop="id" label="角色编号"></el-table-column>
           <el-table-column prop="name" label="角色名称"></el-table-column>
-          <el-table-column prop="createDatetime" label="创建时间"></el-table-column>
+          <el-table-column
+            prop="createDatetime"
+            label="创建时间"
+          ></el-table-column>
           <el-table-column prop="createStaff" label="创建人"></el-table-column>
         </el-table>
       </div>
@@ -20,26 +32,34 @@
         <el-tabs v-model="tabsVal" class="el-tabs__fill">
           <el-tab-pane label="菜单权限" name="first">
             <el-tree
-                ref="tree"
-                :data="menus"
-                :props="defaultProps"
-                :style="{ height: tableHeight - 40 - 15 + 'px', overflowY: 'scroll' }"
-                show-checkbox
-                node-key="id"
-                default-expand-all
+              ref="tree"
+              :data="menus"
+              :props="defaultProps"
+              :style="{
+                height: tableHeight - 40 - 15 + 'px',
+                overflowY: 'scroll',
+              }"
+              show-checkbox
+              node-key="id"
+              default-expand-all
             ></el-tree>
           </el-tab-pane>
           <el-tab-pane label="报表权限" name="second">
-            <el-tree :data="reportForms"
-                     show-checkbox
-                     node-key="id"
-                     ref="reportFormsTree"
-                     :style="{ height: tableHeight - 40 - 15 + 'px', overflowY: 'scroll' }">
-              <template #default="{node,data}">
+            <el-tree
+              :data="reportForms"
+              show-checkbox
+              node-key="id"
+              ref="reportFormsTree"
+              :style="{
+                height: tableHeight - 40 - 15 + 'px',
+                overflowY: 'scroll',
+              }"
+            >
+              <template #default="{ node, data }">
                 <div :id="'report_forms-' + data.id">
                   <el-icon>
-                    <Document v-if="data.type === 0"/>
-                    <Folder v-else/>
+                    <Document v-if="data.type === 0" />
+                    <Folder v-else />
                   </el-icon>
                   {{ data.name }}
                 </div>
@@ -53,101 +73,118 @@
 </template>
 
 <script setup lang="ts">
-import {computed, onMounted, ref} from 'vue'
-import {getAllRoles, getAllMenus, getRoleMenus, saveRoleMenus} from '@/api/settings/permission-settings'
-import {ElMessage, ElTree} from 'element-plus'
-import PageLayer from "@/layout/PageLayer";
-import {getPermissionsByUserCode, getReportCenterTree, setPermissions} from "@/api/base-data/report-center";
-import {Document, Folder} from "@element-plus/icons-vue";
-import {useCompRef} from "@/utils/useCompRef";
+import { computed, onMounted, ref } from "vue";
+import {
+  getAllMenus,
+  getAllRoles,
+  getRoleMenus,
+  saveRoleMenus,
+} from "@/api/settings/permission-settings";
+import { ElMessage, ElTree } from "element-plus";
+import {
+  getPermissionsByUserCode,
+  getReportCenterTree,
+  setPermissions,
+} from "@/api/base-data/report-center";
+import { Document, Folder } from "@element-plus/icons-vue";
+import { useCompRef } from "@/utils/useCompRef";
 
-const tableHeight = window.innerHeight - 10
+const tableHeight = window.innerHeight - 10;
 
-const searchRoleContent = ref('')
-const roles = ref([])
-const reportForms = ref([])
+const searchRoleContent = ref("");
+const roles = ref([]);
+const reportForms = ref([]);
 const cptRoles = computed(() => {
-  return roles.value.filter((item) => {
-    return item.name.indexOf(searchRoleContent.value) !== -1
-  })
-})
-const currentRole = ref({})
+  return roles.value.filter(item => {
+    return item.name.indexOf(searchRoleContent.value) !== -1;
+  });
+});
+const currentRole = ref({});
 
-const handleClickRole = (row) => {
-  currentRole.value = row
-  getRoleMenus(row.id).then((res) => {
-    tree.value.setCheckedKeys(res)
-  })
+const handleClickRole = row => {
+  currentRole.value = row;
+  getRoleMenus(row.id).then(res => {
+    tree.value.setCheckedKeys(res);
+  });
   getPermissionsByUserCode(row.id).then(res => {
+    const tmpData = [];
+
     for (let key in reportFormsTree.value.store.nodesMap) {
       reportFormsTree.value.store.nodesMap[key].expanded = res.includes(key);
+      const has = reportFormsTree.value.store.nodesMap[key].expanded;
+
+      if (has) {
+        const data = reportFormsTree.value.store.nodesMap[key];
+        if (data.childNodes.length === 0) {
+          tmpData.push(key);
+        }
+      }
     }
-    reportFormsTree.value.setCheckedKeys(res)
-  })
-}
+    reportFormsTree.value.setCheckedKeys(tmpData);
+  });
+};
 
-const tree = ref(null)
-const reportFormsTree = useCompRef(ElTree)
-const menus = ref([])
-const tabsVal = ref('second')
+const tree = ref(null);
+const reportFormsTree = useCompRef(ElTree);
+const menus = ref([]);
+const tabsVal = ref("second");
 const defaultProps = {
-  id: 'id',
-  children: 'children',
-  label: 'metaTitle',
-}
+  id: "id",
+  children: "children",
+  label: "metaTitle",
+};
 const beforeSaveMenus = () => {
   if (!currentRole.value.id) {
     ElMessage({
-      message: '请先选择角色！',
-      type: 'warning',
+      message: "请先选择角色！",
+      type: "warning",
       duration: 2500,
       showClose: true,
-    })
+    });
   } else {
-    if (tabsVal.value === 'first') {
-      saveRoleMenusFunc()
+    if (tabsVal.value === "first") {
+      saveRoleMenusFunc();
     } else {
-      saveReportForms()
+      saveReportForms();
     }
   }
-}
+};
 
 function saveReportForms() {
-  const halfCheckKeys = reportFormsTree.value.getHalfCheckedKeys()
-  const checkedKeys = reportFormsTree.value.getCheckedKeys()
-  let temp = [...checkedKeys, ...halfCheckKeys]
-  setPermissions({userCode: currentRole.value.id, ids: temp})
+  const halfCheckKeys = reportFormsTree.value.getHalfCheckedKeys();
+  const checkedKeys = reportFormsTree.value.getCheckedKeys();
+  let temp = [...checkedKeys, ...halfCheckKeys];
+  setPermissions({ userCode: currentRole.value.id, ids: temp });
 }
 
 function saveRoleMenusFunc() {
-  const checkedKeys = tree.value.getCheckedKeys()
-  const halfCheckKeys = tree.value.getHalfCheckedKeys()
-  halfCheckKeys.forEach((item) => checkedKeys.push(item))
+  const checkedKeys = tree.value.getCheckedKeys();
+  const halfCheckKeys = tree.value.getHalfCheckedKeys();
+  halfCheckKeys.forEach(item => checkedKeys.push(item));
 
   const param = {
     id: currentRole.value.id,
     menus: checkedKeys,
-  }
+  };
   saveRoleMenus(param).then(() => {
     ElMessage({
-      message: '保存成功',
-      type: 'success',
+      message: "保存成功",
+      type: "success",
       duration: 2500,
       showClose: true,
-    })
-  })
+    });
+  });
 }
 
 onMounted(() => {
-  getAllRoles().then((res) => {
-    roles.value = res
-  })
-  getAllMenus().then((res) => {
-    menus.value = res
-  })
+  getAllRoles().then(res => {
+    roles.value = res;
+  });
+  getAllMenus().then(res => {
+    menus.value = res;
+  });
   getReportCenterTree().then(res => {
-    reportForms.value = res
-  })
-})
-
+    reportForms.value = res;
+  });
+});
 </script>