119

src/views/ums/role/allocResource.vue

@@ -1,172 +1,248 @@
 <template>
+  <!-- 使用 el-card 组件创建一个表单容器卡片，设置阴影效果为无 -->
   <el-card class="form-container" shadow="never">
+    <!-- 使用 v-for 指令循环遍历 allResourceCate 数组中的每个元素（cate），同时传递索引（index） -->
+    <!-- 根据索引判断是否添加 'top-line' 类名（第一个元素添加，用于样式区分，可能是添加顶部边框之类的效果），并设置了唯一的 key 值 -->
     <div v-for="(cate,index) in allResourceCate" :class="index===0?'top-line':null" :key="'cate'+cate.id">
+      <!-- el-row 组件，添加了 'table-layout' 类名用于样式布局，设置了背景颜色 -->
       <el-row class="table-layout" style="background: #F2F6FC;">
+        <!-- el-checkbox 复选框组件，双向绑定 cate 对象的 checked 属性，通过调用 isIndeterminate 方法设置不确定状态，绑定 change 事件到 handleCheckAllChange 方法 -->
+        <!-- 复选框显示的文本为 cate 对象的 name 属性值 -->
         <el-checkbox v-model="cate.checked"
                      :indeterminate="isIndeterminate(cate.id)"
                      @change="handleCheckAllChange(cate)">
           {{cate.name}}
         </el-checkbox>
       </el-row>
+      <!-- 另一个 el-row 组件，同样添加了 'table-layout' 类名用于样式布局 -->
       <el-row class="table-layout">
+        <!-- 使用 v-for 指令循环遍历当前分类（cate）下的资源列表（通过 getResourceByCate 方法获取），每个资源对应一个 el-checkbox 组件 -->
+        <!-- 设置了 el-col 组件的占比为 8，给每个复选框添加了上下内边距为 4px 的样式 -->
         <el-col :span="8" v-for="resource in getResourceByCate(cate.id)" :key="resource.id" style="padding: 4px 0">
+          <!-- el-checkbox 复选框组件，双向绑定 resource 对象的 checked 属性，绑定 change 事件到 handleCheckChange 方法 -->
+          <!-- 复选框显示的文本为 resource 对象的 name 属性值 -->
           <el-checkbox v-model="resource.checked" @change="handleCheckChange(resource)">
             {{resource.name}}
           </el-checkbox>
         </el-col>
       </el-row>
     </div>
+    <!-- 包含两个按钮的 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>
+// 从 @/api/resource 模块中导入获取所有资源列表数据的 API 函数
 import {fetchAllResourceList} from '@/api/resource';
+// 从 @/api/resourceCategory 模块中导入获取所有资源分类列表数据的 API 函数
 import {listAllCate} from '@/api/resourceCategory';
+// 从 @/api/role 模块中导入分配资源以及根据角色获取已分配资源列表的 API 函数
 import {allocResource, listResourceByRole} from '@/api/role';
 
 export default {
   name: "allocResource",
   data() {
     return {
+      // 存储当前操作的角色 ID，初始值为 null，后续从路由参数中获取赋值
       roleId: null,
+      // 用于存储所有资源数据，初始值为 null，后续通过 API 获取并赋值
       allResource: null,
+      // 用于存储所有资源分类数据，初始值为 null，后续通过 API 获取并赋值
       allResourceCate: null
     };
   },
   created() {
+    // 从路由参数中获取角色 ID，并赋值给 roleId 属性，用于后续相关操作的参数传递等
     this.roleId = this.$route.query.roleId;
+    // 调用获取所有资源分类列表数据的方法，用于初始化相关数据
     this.getAllResourceCateList();
   },
   methods: {
+    // 方法用于获取所有资源列表数据
     getAllResourceList() {
+      // 调用获取所有资源列表数据的 API 函数，该函数返回一个 Promise，成功获取数据后进行如下处理
       fetchAllResourceList().then(response => {
+        // 将获取到的资源列表数据赋值给 allResource 属性，用于后续操作和页面展示
         this.allResource = response.data;
+        // 循环遍历所有资源数据，将每个资源对象的 checked 属性初始化为 false，表示初始未选中状态
         for (let i = 0; i < this.allResource.length; i++) {
           this.allResource[i].checked = false;
         }
+        // 调用根据角色获取已分配资源的方法，传入当前角色 ID，用于设置对应资源的选中状态等操作
         this.getResourceByRole(this.roleId);
       });
     },
+    // 方法用于获取所有资源分类列表数据，并进一步获取资源列表数据
     getAllResourceCateList() {
+      // 调用获取所有资源分类列表数据的 API 函数，该函数返回一个 Promise，成功获取数据后进行如下处理
       listAllCate().then(response => {
+        // 将获取到的资源分类列表数据赋值给 allResourceCate 属性，用于后续操作和页面展示
         this.allResourceCate = response.data;
+        // 循环遍历所有资源分类数据，将每个资源分类对象的 checked 属性初始化为 false，表示初始未选中状态
         for (let i = 0; i < this.allResourceCate.length; i++) {
           this.allResourceCate[i].checked = false;
         }
+        // 调用获取所有资源列表数据的方法，以进一步完善数据初始化流程
         this.getAllResourceList();
       });
     },
+    // 方法根据给定的资源分类 ID，从所有资源列表中筛选出属于该分类的资源列表并返回
     getResourceByCate(categoryId) {
+      // 用于存储属于指定分类的资源列表，初始为空数组
       let cateResource = [];
+      // 判断所有资源数据是否为空，如果为空则直接返回 null
       if (this.allResource == null) return null;
+      // 循环遍历所有资源数据
       for (let i = 0; i < this.allResource.length; i++) {
+        // 取出每一个资源对象
         let resource = this.allResource[i];
+        // 如果资源的分类 ID 与传入的分类 ID 相等，将该资源对象添加到属于该分类的资源列表中
         if (resource.categoryId === categoryId) {
           cateResource.push(resource);
         }
       }
       return cateResource;
     },
+    // 方法根据角色 ID 获取该角色已分配的资源，并设置相关资源和资源分类的选中状态
     getResourceByRole(roleId) {
+      // 调用根据角色获取已分配资源列表的 API 函数，传入角色 ID，该函数返回一个 Promise，成功获取数据后进行如下处理
       listResourceByRole(roleId).then(response => {
+        // 获取到的已分配资源列表数据赋值给 allocResource 变量，方便后续操作
         let allocResource = response.data;
+        // 循环遍历所有资源数据，调用 getResourceChecked 方法设置每个资源的选中状态
         this.allResource.forEach(item => {
           item.checked = this.getResourceChecked(item.id, allocResource);
         });
+        // 循环遍历所有资源分类数据，调用 isAllChecked 方法设置每个资源分类的选中状态
         this.allResourceCate.forEach(item => {
           item.checked = this.isAllChecked(item.id);
         });
+        // 强制更新组件，确保数据变化能及时在页面上反映出来（可能因为数据嵌套较深等情况需要手动触发更新）
         this.$forceUpdate();
       });
     },
+    // 方法判断给定资源 ID 的资源是否在已分配资源列表中，返回对应的布尔值（是否选中状态）
     getResourceChecked(resourceId, allocResource) {
+      // 如果已分配资源列表为空，则直接返回 false，表示未选中
       if (allocResource == null || allocResource.length === 0) return false;
+      // 循环遍历已分配资源列表
       for (let i = 0; i < allocResource.length; i++) {
+        // 如果找到资源 ID 匹配的已分配资源，返回 true，表示该资源已选中
         if (allocResource[i].id === resourceId) {
           return true;
         }
       }
       return false;
     },
+    // 方法判断给定资源分类下的资源选中状态是否为不确定（部分选中），返回对应的布尔值
     isIndeterminate(categoryId) {
+      // 获取给定资源分类下的资源列表
       let cateResources = this.getResourceByCate(categoryId);
+      // 如果资源列表为空，返回 false，表示不是不确定状态
       if (cateResources == null) return false;
+      // 用于统计已选中资源的数量，初始为 0
       let checkedCount = 0;
+      // 循环遍历资源列表，统计已选中资源的数量
       for (let i = 0; i < cateResources.length; i++) {
         if (cateResources[i].checked === true) {
           checkedCount++;
         }
       }
+      // 如果已选中资源数量既不是 0（全未选）也不是资源列表长度（全选），则返回 true，表示处于不确定状态
       return!(checkedCount === 0 || checkedCount === cateResources.length);
     },
+    // 方法判断给定资源分类下的资源是否全部选中，返回对应的布尔值
     isAllChecked(categoryId) {
+      // 获取给定资源分类下的资源列表
       let cateResources = this.getResourceByCate(categoryId);
+      // 如果资源列表为空，返回 false，表示未全部选中
       if (cateResources == null) return false;
+      // 用于统计已选中资源的数量，初始为 0
       let checkedCount = 0;
+      // 循环遍历资源列表，统计已选中资源的数量
       for (let i = 0; i < cateResources.length; i++) {
         if (cateResources[i].checked === true) {
           checkedCount++;
         }
       }
+      // 如果已选中资源数量为 0，直接返回 false，表示未全部选中
       if (checkedCount === 0) {
         return false;
       }
+      // 如果已选中资源数量等于资源列表长度，返回 true，表示全部选中
       return checkedCount === cateResources.length;
     },
+    // 方法用于处理保存资源分配的操作
     handleSave() {
-        this.$confirm('是否分配资源？', '提示', {
+      // 创建一个 Set 数据结构，用于存储选中资源的 ID，可自动去重
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
       let checkedResourceIds = new Set();
+      // 判断所有资源数据不为空且有数据时，进行循环遍历
       if (this.allResource!= null && this.allResource.length > 0) {
+        // 循环遍历所有资源数据，将选中资源（checked 属性为 true）的 ID 添加到 Set 集合中
         this.allResource.forEach(item => {
           if (item.checked) {
             checkedResourceIds.add(item.id);
           }
         });
       }
+      // 创建 URLSearchParams 对象，用于构建请求参数，通常用于向服务器传递数据
       let params = new URLSearchParams();
+      // 将当前角色 ID 添加到请求参数中
       params.append("roleId", this.roleId);
+      // 将处理后的选中资源 ID 集合（通过 Array.from 转换为普通数组）添加到请求参数中
       params.append("resourceIds", Array.from(checkedResourceIds));
+      // 调用分配资源的 API 函数，传入构建好的请求参数，该函数返回一个 Promise，成功分配资源后进行如下处理
       allocResource(params).then(response => {
+        // 显示分配成功的提示消息，消息类型为成功（success），停留 1000 毫秒
         this.$message({
           message: '分配成功',
           type: 'success',
           duration: 1000
         });
+        // 通过路由导航返回上一页，一般用于完成操作后回到之前的页面
         this.$router.back();
       })
-        })
     },
+    // 方法用于清空所有资源和资源分类的选中状态
     handleClear() {
+      // 循环遍历所有资源分类数据，将每个资源分类对象的 checked 属性设置为 false
       this.allResourceCate.forEach(item => {
         item.checked = false;
       });
+      // 循环遍历所有资源数据，将每个资源对象的 checked 属性设置为 false
       this.allResource.forEach(item => {
         item.checked = false;
       });
+      // 强制更新组件，确保页面上的显示状态能及时更新为未选中状态
       this.$forceUpdate();
     },
+    // 方法用于处理资源分类复选框全选/全不选状态改变的操作
     handleCheckAllChange(cate) {
+      // 获取当前资源分类下的资源列表
       let cateResources = this.getResourceByCate(cate.id);
+      // 循环遍历资源列表，将每个资源的选中状态设置为与资源分类复选框的选中状态一致
       for (let i = 0; i < cateResources.length; i++) {
         cateResources[i].checked = cate.checked;
       }
+      // 强制更新组件，确保页面上资源的选中状态能及时更新
       this.$forceUpdate();
     },
+    // 方法用于处理单个资源复选框选中状态改变的操作
     handleCheckChange(resource) {
+      // 循环遍历所有资源分类数据，找到与当前资源所属分类相同的资源分类对象
       this.allResourceCate.forEach(item => {
         if (item.id === resource.categoryId) {
+          // 根据该资源分类下的所有资源是否全部选中，更新资源分类复选框的选中状态
           item.checked = this.isAllChecked(resource.categoryId);
         }
       });
+      // 强制更新组件，确保页面上资源分类复选框的选中状态能及时更新
       this.$forceUpdate();
     }
   }
@@ -174,13 +250,53 @@
 </script>
 
 <style scoped>
+/* 定义了名为 'table-layout' 的类选择器样式规则，用于设置布局相关的样式 */
+.table-layout {
+  /* 设置内边距为 20px，使内部元素有合适的间距 */
+  padding: 20px;
+  /* 设置左边框样式，颜色为 #DCDFE6，线条样式为实线，宽度为 1px */
+  border-left: 1px solid #DCDFE6;
+  /* 设置右边框样式，与左边框相同 */
+  border-right: 1px solid #DCDFE6;
+  /* 设置下边框样式，与左右边框相同 */
+  border-bottom: 1px solid #DCDFE6;
+}
+
+/* 定义了名为 'top-line' 的类选择器样式规则，用于给元素添加顶部边框，可能用于区分不同部分等样式效果 */
+.top-line {
+  border-top: 1px solid #DCDFE6;
+}
+</style><style scoped>
+/* 定义了名为 'table-layout' 的类选择器样式规则，用于设置布局相关的样式 */
+.table-layout {
+  /* 设置内边距为 20px，使内部元素有合适的间距 */
+  padding: 20px;
+  /* 设置左边框样式，颜色为 #DCDFE6，线条样式为实线，宽度为 1px */
+  border-left: 1px solid #DCDFE6;
+  /* 设置右边框样式，与左边框相同 */
+  border-right: 1px solid #DCDFE6;
+  /* 设置下边框样式，与左右边框相同 */
+  border-bottom: 1px solid #DCDFE6;
+}
+
+/* 定义了名为 'top-line' 的类选择器样式规则，用于给元素添加顶部边框，可能用于区分不同部分等样式效果 */
+.top-line {
+  border-top: 1px solid #DCDFE6;
+}
+</style><style scoped>
+/* 定义了名为 'table-layout' 的类选择器样式规则，用于设置布局相关的样式 */
 .table-layout {
+  /* 设置内边距为 20px，使内部元素有合适的间距 */
   padding: 20px;
+  /* 设置左边框样式，颜色为 #DCDFE6，线条样式为实线，宽度为 1px */
   border-left: 1px solid #DCDFE6;
+  /* 设置右边框样式，与左边框相同 */
   border-right: 1px solid #DCDFE6;
+  /* 设置下边框样式，与左右边框相同 */
   border-bottom: 1px solid #DCDFE6;
 }
 
+/* 定义了名为 'top-line' 的类选择器样式规则，用于给元素添加顶部边框，可能用于区分不同部分等样式效果 */
 .top-line {
   border-top: 1px solid #DCDFE6;
 }