118

src/views/ums/role/allocMenu.vue

@@ -1,5 +1,8 @@
 <template>
+  <!-- 使用 el-card 组件创建一个表单容器卡片，设置阴影效果为无 -->
   <el-card class="form-container" shadow="never">
+    <!-- el-tree 组件，用于展示树形结构的数据，绑定了 menuTreeList 数据作为树的数据源 -->
+    <!-- 显示复选框，默认展开所有节点，设置节点的唯一标识键为 'id'，添加了引用名 'tree'，高亮当前选中节点，并配置了节点属性映射 -->
     <el-tree
       :data="menuTreeList"
       show-checkbox
@@ -9,93 +12,126 @@
       highlight-current
       :props="defaultProps">
     </el-tree>
+    <!-- 包含两个按钮的 div 容器，设置了顶部外边距为 20px，并使其内容居中对齐 -->
     <div style="margin-top: 20px" align="center">
+      <!-- 保存按钮，类型为主要（primary），点击时调用 handleSave 方法 -->
       <el-button type="primary" @click="handleSave()">保存</el-button>
+      <!-- 清空按钮，点击时调用 handleClear 方法 -->
       <el-button @click="handleClear()">清空</el-button>
     </div>
-
   </el-card>
 </template>
 
 <script>
-  import {fetchTreeList} from '@/api/menu';
+// 从 @/api/menu 模块中导入获取树形菜单列表数据的 API 函数
-  import {listMenuByRole,allocMenu} from '@/api/role';
+import {fetchTreeList} from '@/api/menu';
+// 从 @/api/role 模块中导入根据角色获取菜单列表以及分配菜单的 API 函数
+import {listMenuByRole, allocMenu} from '@/api/role';
 
-  export default {
+export default {
   name: "allocMenu",
   data() {
     return {
+      // 用于存储树形菜单列表数据，初始值为空数组，后续通过 API 获取并赋值
       menuTreeList: [],
+      // 配置 el-tree 组件节点属性的映射对象，指定子节点属性名为 'children'，节点显示文本对应的属性名为 'title'
       defaultProps: {
         children: 'children',
         label: 'title'
       },
-        roleId:null
+      // 存储当前操作的角色 ID，初始值为 null，后续从路由参数中获取赋值
+      roleId: null
     };
   },
   created() {
+    // 从路由参数中获取角色 ID，并赋值给 roleId 属性，用于后续相关操作的参数传递等
     this.roleId = this.$route.query.roleId;
+    // 调用获取树形菜单列表数据的方法，用于初始化页面上的树形菜单展示
     this.treeList();
+    // 调用根据角色获取菜单列表的方法，传入获取到的角色 ID，用于后续设置已选中的菜单节点等操作
     this.getRoleMenu(this.roleId);
   },
   methods: {
     treeList() {
+      // 调用获取树形菜单列表数据的 API 函数，该函数返回一个 Promise，成功获取数据后将响应数据中的菜单列表赋值给 menuTreeList 属性，用于在 el-tree 组件中展示树形菜单结构
       fetchTreeList().then(response => {
         this.menuTreeList = response.data;
       });
     },
-      getRoleMenu(roleId){
+    getRoleMenu(roleId) {
-        listMenuByRole(roleId).then(response=>{
+      // 调用根据角色获取菜单列表的 API 函数，传入角色 ID，该函数返回一个 Promise，成功获取数据后进行如下处理
+      listMenuByRole(roleId).then(response => {
+        // 获取到的菜单列表数据赋值给 menuList 变量，方便后续操作
         let menuList = response.data;
-          let checkedMenuIds=[];
+        // 用于存储已选中的菜单 ID 的数组，初始为空
-          if(menuList!=null&&menuList.length>0){
+        let checkedMenuIds = [];
-            for(let i=0;i<menuList.length;i++){
+        // 判断菜单列表不为空且有数据时，进行循环遍历
+        if (menuList!= null && menuList.length > 0) {
+          for (let i = 0; i < menuList.length; i++) {
+            // 取出每一个菜单对象
             let menu = menuList[i];
-              if(menu.parentId!==0){
+            // 如果菜单的上级菜单 ID 不等于 0（意味着不是顶级菜单，可能是需要关注的子菜单等情况），将其 ID 添加到已选中菜单 ID 数组中
+            if (menu.parentId!== 0) {
               checkedMenuIds.push(menu.id);
             }
           }
         }
+        // 通过 el-tree 组件的引用（通过 ref='tree' 获取），设置已选中的节点对应的菜单 ID 数组，用于在页面上展示对应角色已分配的菜单节点为选中状态
         this.$refs.tree.setCheckedKeys(checkedMenuIds);
       });
     },
     handleSave() {
+      // 获取 el-tree 组件中当前被选中的所有节点，这些节点包含了菜单相关的详细信息
       let checkedNodes = this.$refs.tree.getCheckedNodes();
-        let checkedMenuIds=new Set();
+      // 使用 Set 数据结构来存储选中菜单的 ID，用于去重（避免重复添加相同的菜单 ID）
-        if(checkedNodes!=null&&checkedNodes.length>0){
+      let checkedMenuIds = new Set();
-          for(let i=0;i<checkedNodes.length;i++){
+      // 判断获取到的选中节点不为空且有数据时，进行循环遍历
+      if (checkedNodes!= null && checkedNodes.length > 0) {
+        for (let i = 0; i < checkedNodes.length; i++) {
+          // 取出每一个选中的节点对象
           let checkedNode = checkedNodes[i];
+          // 将选中节点的 ID 添加到 Set 集合中
           checkedMenuIds.add(checkedNode.id);
-            if(checkedNode.parentId!==0){
+          // 如果选中节点的上级菜单 ID 不等于 0（同样考虑到相关联的上级菜单也需要处理等情况），将上级菜单 ID 也添加到 Set 集合中
+          if (checkedNode.parentId!== 0) {
             checkedMenuIds.add(checkedNode.parentId);
           }
         }
       }
+      // 弹出确认框，询问是否分配菜单，提供确定和取消按钮供用户选择
       this.$confirm('是否分配菜单？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
-        }).then(()=>{
+      }).then(() => {
+        // 创建 URLSearchParams 对象，用于构建请求参数，通常用于向服务器传递数据
         let params = new URLSearchParams();
-          params.append("roleId",this.roleId);
+        // 将当前角色 ID 添加到请求参数中
-          params.append("menuIds",Array.from(checkedMenuIds));
+        params.append("roleId", this.roleId);
+        // 将处理后的选中菜单 ID 数组（通过 Array.from 转换为普通数组）添加到请求参数中
+        params.append("menuIds", Array.from(checkedMenuIds));
+        // 调用分配菜单的 API 函数，传入构建好的请求参数，该函数返回一个 Promise，成功分配菜单后进行如下处理
         allocMenu(params).then(response => {
+          // 显示分配成功的提示消息，消息类型为成功（success），停留 1000 毫秒
           this.$message({
             message: '分配成功',
             type: 'success',
             duration: 1000
           });
+          // 通过路由导航返回上一页，一般用于完成操作后回到之前的页面
           this.$router.back();
         })
       })
     },
     handleClear() {
+      // 通过 el-tree 组件的引用，将已选中的节点对应的菜单 ID 数组设置为空数组，即清空所有已选中的菜单节点状态
       this.$refs.tree.setCheckedKeys([]);
     }
   }
-  }
+}
 </script>
-
 <style scoped>
-
+/* 当前 CSS 部分为空，可在此处添加针对当前组件（allocMenu 组件）的样式规则，
+例如设置 el-tree 组件的样式，像节点的字体、颜色、间距等，以及按钮的样式，包括按钮的大小、颜色、边框等，
+scoped 属性表示样式仅作用于当前组件内的元素，避免样式冲突 */
 </style>