119

src/views/ums/role/allocResource.vue

@@ -1,187 +1,303 @@
 <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>
-  import {fetchAllResourceList} from '@/api/resource';
+// 从 @/api/resource 模块中导入获取所有资源列表数据的 API 函数
-  import {listAllCate} from '@/api/resourceCategory';
+import {fetchAllResourceList} from '@/api/resource';
-  import {allocResource,listResourceByRole} from '@/api/role';
+// 从 @/api/resourceCategory 模块中导入获取所有资源分类列表数据的 API 函数
+import {listAllCate} from '@/api/resourceCategory';
+// 从 @/api/role 模块中导入分配资源以及根据角色获取已分配资源列表的 API 函数
+import {allocResource, listResourceByRole} from '@/api/role';
 
-  export default {
+export default {
-    name: "allocResource",
+  name: "allocResource",
-    data() {
+  data() {
-      return {
+    return {
-        roleId: null,
+      // 存储当前操作的角色 ID，初始值为 null，后续从路由参数中获取赋值
-        allResource: null,
+      roleId: null,
-        allResourceCate: null
+      // 用于存储所有资源数据，初始值为 null，后续通过 API 获取并赋值
-      };
+      allResource: null,
-    },
+      // 用于存储所有资源分类数据，初始值为 null，后续通过 API 获取并赋值
-    created() {
+      allResourceCate: null
-      this.roleId = this.$route.query.roleId;
+    };
-      this.getAllResourceCateList();
+  },
-    },
+  created() {
-    methods: {
+    // 从路由参数中获取角色 ID，并赋值给 roleId 属性，用于后续相关操作的参数传递等
-      getAllResourceList() {
+    this.roleId = this.$route.query.roleId;
-        fetchAllResourceList().then(response => {
+    // 调用获取所有资源分类列表数据的方法，用于初始化相关数据
-          this.allResource = response.data;
+    this.getAllResourceCateList();
-          for (let i = 0; i < this.allResource.length; i++) {
+  },
-            this.allResource[i].checked = false;
+  methods: {
-          }
+    // 方法用于获取所有资源列表数据
-          this.getResourceByRole(this.roleId);
+    getAllResourceList() {
-        });
+      // 调用获取所有资源列表数据的 API 函数，该函数返回一个 Promise，成功获取数据后进行如下处理
-      },
+      fetchAllResourceList().then(response => {
-      getAllResourceCateList() {
+        // 将获取到的资源列表数据赋值给 allResource 属性，用于后续操作和页面展示
-        listAllCate().then(response => {
+        this.allResource = response.data;
-          this.allResourceCate = response.data;
+        // 循环遍历所有资源数据，将每个资源对象的 checked 属性初始化为 false，表示初始未选中状态
-          for (let i = 0; i < this.allResourceCate.length; i++) {
-            this.allResourceCate[i].checked = false;
-          }
-          this.getAllResourceList();
-        });
-      },
-      getResourceByCate(categoryId) {
-        let cateResource = [];
-        if (this.allResource == null) return null;
         for (let i = 0; i < this.allResource.length; i++) {
-          let resource = this.allResource[i];
+          this.allResource[i].checked = false;
-          if (resource.categoryId === categoryId) {
-            cateResource.push(resource);
-          }
-        }
-        return cateResource;
-      },
-      getResourceByRole(roleId){
-        listResourceByRole(roleId).then(response=>{
-          let allocResource = response.data;
-          this.allResource.forEach(item=>{
-            item.checked = this.getResourceChecked(item.id,allocResource);
-          });
-          this.allResourceCate.forEach(item=>{
-            item.checked = this.isAllChecked(item.id);
-          });
-          this.$forceUpdate();
-        });
-      },
-      getResourceChecked(resourceId,allocResource){
-        if(allocResource==null||allocResource.length===0) return false;
-        for(let i=0;i<allocResource.length;i++){
-          if(allocResource[i].id===resourceId){
-            return true;
-          }
-        }
-        return false;
-      },
-      isIndeterminate(categoryId) {
-        let cateResources = this.getResourceByCate(categoryId);
-        if (cateResources == null) return false;
-        let checkedCount = 0;
-        for (let i = 0; i < cateResources.length; i++) {
-          if (cateResources[i].checked === true) {
-            checkedCount++;
-          }
         }
-        return !(checkedCount === 0 || checkedCount === cateResources.length);
+        // 调用根据角色获取已分配资源的方法，传入当前角色 ID，用于设置对应资源的选中状态等操作
-      },
+        this.getResourceByRole(this.roleId);
-      isAllChecked(categoryId) {
+      });
-        let cateResources = this.getResourceByCate(categoryId);
+    },
-        if (cateResources == null) return false;
+    // 方法用于获取所有资源分类列表数据，并进一步获取资源列表数据
-        let checkedCount = 0;
+    getAllResourceCateList() {
-        for (let i = 0; i < cateResources.length; i++) {
+      // 调用获取所有资源分类列表数据的 API 函数，该函数返回一个 Promise，成功获取数据后进行如下处理
-          if (cateResources[i].checked === true) {
+      listAllCate().then(response => {
-            checkedCount++;
+        // 将获取到的资源分类列表数据赋值给 allResourceCate 属性，用于后续操作和页面展示
-          }
+        this.allResourceCate = response.data;
+        // 循环遍历所有资源分类数据，将每个资源分类对象的 checked 属性初始化为 false，表示初始未选中状态
+        for (let i = 0; i < this.allResourceCate.length; i++) {
+          this.allResourceCate[i].checked = false;
         }
-        if(checkedCount===0){
+        // 调用获取所有资源列表数据的方法，以进一步完善数据初始化流程
-          return 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 checkedCount === cateResources.length;
+      }
-      },
+      return cateResource;
-      handleSave() {
+    },
-        this.$confirm('是否分配资源？', '提示', {
+    // 方法根据角色 ID 获取该角色已分配的资源，并设置相关资源和资源分类的选中状态
-          confirmButtonText: '确定',
+    getResourceByRole(roleId) {
-          cancelButtonText: '取消',
+      // 调用根据角色获取已分配资源列表的 API 函数，传入角色 ID，该函数返回一个 Promise，成功获取数据后进行如下处理
-          type: 'warning'
+      listResourceByRole(roleId).then(response => {
-        }).then(() => {
+        // 获取到的已分配资源列表数据赋值给 allocResource 变量，方便后续操作
-          let checkedResourceIds = new Set();
+        let allocResource = response.data;
-          if (this.allResource != null && this.allResource.length > 0) {
+        // 循环遍历所有资源数据，调用 getResourceChecked 方法设置每个资源的选中状态
-            this.allResource.forEach(item => {
-              if (item.checked) {
-                checkedResourceIds.add(item.id);
-              }
-            });
-          }
-          let params = new URLSearchParams();
-          params.append("roleId", this.roleId);
-          params.append("resourceIds", Array.from(checkedResourceIds));
-          allocResource(params).then(response => {
-            this.$message({
-              message: '分配成功',
-              type: 'success',
-              duration: 1000
-            });
-            this.$router.back();
-          })
-        })
-      },
-      handleClear() {
-        this.allResourceCate.forEach(item => {
-          item.checked = false;
-        });
         this.allResource.forEach(item => {
-          item.checked = false;
+          item.checked = this.getResourceChecked(item.id, allocResource);
+        });
+        // 循环遍历所有资源分类数据，调用 isAllChecked 方法设置每个资源分类的选中状态
+        this.allResourceCate.forEach(item => {
+          item.checked = this.isAllChecked(item.id);
         });
+        // 强制更新组件，确保数据变化能及时在页面上反映出来（可能因为数据嵌套较深等情况需要手动触发更新）
         this.$forceUpdate();
-      },
+      });
-      handleCheckAllChange(cate) {
+    },
-        let cateResources = this.getResourceByCate(cate.id);
+    // 方法判断给定资源 ID 的资源是否在已分配资源列表中，返回对应的布尔值（是否选中状态）
-        for (let i = 0; i < cateResources.length; i++) {
+    getResourceChecked(resourceId, allocResource) {
-          cateResources[i].checked = cate.checked;
+      // 如果已分配资源列表为空，则直接返回 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;
         }
-        this.$forceUpdate();
+      }
-      },
+      return false;
-      handleCheckChange(resource) {
+    },
-        this.allResourceCate.forEach(item=>{
+    // 方法判断给定资源分类下的资源选中状态是否为不确定（部分选中），返回对应的布尔值
-          if(item.id===resource.categoryId){
+    isIndeterminate(categoryId) {
-            item.checked = this.isAllChecked(resource.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() {
+      // 创建一个 Set 数据结构，用于存储选中资源的 ID，可自动去重
+      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);
           }
         });
-        this.$forceUpdate();
       }
+      // 创建 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();
     }
   }
+}
 </script>
 
 <style scoped>
-  .table-layout {
+/* 定义了名为 'table-layout' 的类选择器样式规则，用于设置布局相关的样式 */
-    padding: 20px;
+.table-layout {
-    border-left: 1px solid #DCDFE6;
+  /* 设置内边距为 20px，使内部元素有合适的间距 */
-    border-right: 1px solid #DCDFE6;
+  padding: 20px;
-    border-bottom: 1px solid #DCDFE6;
+  /* 设置左边框样式，颜色为 #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;
+.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;
+}
 </style>