113

src/views/ums/role/index.vue

@@ -1,9 +1,14 @@
-<template> 
+<template>
+  <!-- 整体的应用容器 div，用于包裹页面内的各个功能模块 -->
   <div class="app-container">
+    <!-- 筛选搜索区域的卡片容器，设置了阴影效果为无 -->
     <el-card class="filter-container" shadow="never">
       <div>
+        <!-- 搜索图标元素，使用了 el-icon-search 图标 -->
         <i class="el-icon-search"></i>
+        <!-- 筛选搜索的文字提示 -->
         <span>筛选搜索</span>
+        <!-- 查询搜索按钮，设置了样式为右浮动、按钮类型为主要（primary），点击时调用 handleSearchList 方法，按钮大小为 small -->
         <el-button
           style="float:right"
           type="primary"
@@ -11,6 +16,7 @@
           size="small">
           查询搜索
         </el-button>
+        <!-- 重置按钮，设置了样式为右浮动且距离右侧 15px，点击时调用 handleResetSearch 方法，按钮大小为 small -->
         <el-button
           style="float:right;margin-right: 15px"
           @click="handleResetSearch()"
@@ -19,38 +25,52 @@
         </el-button>
       </div>
       <div style="margin-top: 15px">
+        <!-- 内联表单，绑定了 listQuery 数据对象，表单大小为 small，标签宽度为 140px，用于设置筛选条件 -->
         <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
+          <!-- 表单项目，标签为“输入搜索：”，内部的输入框双向绑定 listQuery.keyword，设置了类名、占位符以及可清空功能 -->
           <el-form-item label="输入搜索：">
             <el-input v-model="listQuery.keyword" class="input-width" placeholder="角色名称" clearable></el-input>
           </el-form-item>
         </el-form>
       </div>
     </el-card>
+    <!-- 操作区域的卡片容器，设置了阴影效果为无 -->
     <el-card class="operate-container" shadow="never">
+      <!-- 图标元素，使用了 el-icon-tickets 图标 -->
       <i class="el-icon-tickets"></i>
+      <!-- 数据列表的文字提示 -->
       <span>数据列表</span>
+      <!-- 添加按钮，大小为 mini，添加了自定义类名 btn-add，点击时调用 handleAdd 方法，设置了左侧外边距为 20px -->
       <el-button size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">添加</el-button>
     </el-card>
+    <!-- 表格容器 div，用于放置展示角色数据的表格 -->
     <div class="table-container">
+      <!-- el-table 组件，用于展示角色数据列表，设置了引用名、绑定的数据、表格宽度、加载状态绑定以及边框等属性 -->
       <el-table ref="roleTable"
                 :data="list"
                 style="width: 100%;"
                 v-loading="listLoading" border>
+        <!-- 表格列，标签为“编号”，设置了宽度和内容居中对齐，通过插槽作用域展示对应行数据的 id 属性 -->
         <el-table-column label="编号" width="100" align="center">
           <template slot-scope="scope">{{scope.row.id}}</template>
         </el-table-column>
+        <!-- 表格列，标签为“角色名称”，内容居中对齐，通过插槽作用域展示对应行数据的 name 属性 -->
         <el-table-column label="角色名称" align="center">
           <template slot-scope="scope">{{scope.row.name}}</template>
         </el-table-column>
+        <!-- 表格列，标签为“描述”，内容居中对齐，通过插槽作用域展示对应行数据的 description 属性 -->
         <el-table-column label="描述" align="center">
           <template slot-scope="scope">{{scope.row.description}}</template>
         </el-table-column>
+        <!-- 表格列，标签为“用户数”，设置了宽度和内容居中对齐，通过插槽作用域展示对应行数据的 adminCount 属性 -->
         <el-table-column label="用户数"  width="100" align="center">
           <template slot-scope="scope">{{scope.row.adminCount}}</template>
         </el-table-column>
+        <!-- 表格列，标签为“添加时间”，设置了宽度和内容居中对齐，通过插槽作用域展示对应行数据的 createTime 属性，并使用 formatDateTime 过滤器对时间进行格式化展示 -->
         <el-table-column label="添加时间" width="160" align="center">
           <template slot-scope="scope">{{scope.row.createTime | formatDateTime}}</template>
         </el-table-column>
+        <!-- 表格列，标签为“是否启用”，设置了宽度和内容居中对齐，通过插槽作用域展示对应行数据的 status 属性，并使用 el-switch 组件进行切换操作，绑定了相关的事件和值 -->
         <el-table-column label="是否启用" width="140" align="center">
           <template slot-scope="scope">
             <el-switch
@@ -61,6 +81,7 @@
             </el-switch>
           </template>
         </el-table-column>
+        <!-- 表格列，标签为“操作”，设置了宽度和内容居中对齐，通过插槽作用域展示多个操作按钮，包括分配菜单、分配资源、编辑和删除按钮，分别绑定了对应的点击事件 -->
         <el-table-column label="操作" width="160" align="center">
           <template slot-scope="scope">
             <el-row>
@@ -88,7 +109,9 @@
         </el-table-column>
       </el-table>
     </div>
+    <!-- 分页容器 div，用于放置分页组件 -->
     <div class="pagination-container">
+      <!-- el-pagination 分页组件，设置了背景色、相关页面切换事件绑定、布局样式、当前页、每页数量、可选每页数量数组以及总记录数等属性 -->
       <el-pagination
         background
         @size-change="handleSizeChange"
@@ -100,22 +123,27 @@
         :total="total">
       </el-pagination>
     </div>
+    <!-- el-dialog 对话框组件，根据 isEdit 变量动态设置标题为“编辑角色”或“添加角色”，绑定了显示状态，设置了宽度 -->
     <el-dialog
       :title="isEdit?'编辑角色':'添加角色'"
       :visible.sync="dialogVisible"
       width="40%">
+      <!-- 对话框内的表单，绑定了 role 数据对象，设置了表单引用、标签宽度和大小 -->
       <el-form :model="role"
                ref="roleForm"
                label-width="150px" size="small">
+        <!-- 表单项目，标签为“角色名称：”，输入框双向绑定 role.name，并设置了宽度 -->
         <el-form-item label="角色名称：">
           <el-input v-model="role.name" style="width: 250px"></el-input>
         </el-form-item>
+        <!-- 表单项目，标签为“描述：”，输入框双向绑定 role.description，设置了文本域类型和行数以及宽度 -->
         <el-form-item label="描述：">
           <el-input v-model="role.description"
                     type="textarea"
                     :rows="5"
                     style="width: 250px"></el-input>
         </el-form-item>
+        <!-- 表单项目，标签为“是否启用：”，内部是一个单选按钮组，双向绑定 role.status，用于选择角色是否启用的状态 -->
         <el-form-item label="是否启用：">
           <el-radio-group v-model="role.status">
             <el-radio :label="1">是</el-radio>
@@ -123,6 +151,7 @@
           </el-radio-group>
         </el-form-item>
       </el-form>
+      <!-- 对话框底部的按钮区域，通过插槽定义了取消和确定按钮，分别绑定了对应的点击事件 -->
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false" size="small">取 消</el-button>
         <el-button type="primary" @click="handleDialogConfirm()" size="small">确 定</el-button>
@@ -131,14 +160,18 @@
   </div>
 </template>
 <script>
+// 从'@/api/role'模块中导入多个函数，这些函数应该是用于与后端API交互，执行获取角色列表、创建角色、更新角色、更新角色状态、删除角色等操作
 import {fetchList, createRole, updateRole, updateStatus, deleteRole} from '@/api/role';
+// 从'@/utils/date'模块中导入formatDate函数，用于格式化日期相关操作
 import {formatDate} from '@/utils/date';
 
+// 定义默认的列表查询参数对象，包含页码、每页数量、搜索关键词等信息，初始页码为1，每页显示5条数据，关键词初始为null
 const defaultListQuery = {
   pageNum: 1,
   pageSize: 5,
   keyword: null
 };
+// 定义默认的角色对象，包含角色的各个属性，如ID、名称、描述、管理员数量、状态等，初始ID和名称等都为null，管理员数量为0，状态默认为1
 const defaultRole = {
   id: null,
   name: null,
@@ -146,59 +179,79 @@
   adminCount: 0,
   status: 1
 };
+
 export default {
   name: 'roleList',
   data() {
     return {
+      // 列表查询参数，通过Object.assign创建一个新对象，避免直接修改默认值对象，初始值为defaultListQuery的副本
       listQuery: Object.assign({}, defaultListQuery),
+      // 用于存储获取到的角色列表数据，初始为null，后续通过API获取数据后赋值
       list: null,
+      // 用于存储角色列表的总数量，初始为null，同样通过API获取后赋值
       total: null,
+      // 表示列表数据是否正在加载的布尔值，true表示正在加载，false表示加载完成，初始为false
       listLoading: false,
+      // 控制对话框是否可见的布尔值，true表示对话框显示，false表示隐藏，初始为false
       dialogVisible: false,
+      // 当前操作的角色对象，初始为defaultRole的副本，在添加、编辑等操作时会重新赋值
       role: Object.assign({}, defaultRole),
+      // 表示当前操作是否为编辑操作的布尔值，true为编辑，false为添加，初始为false
       isEdit: false
     }
   },
+  // 在组件创建时调用，触发获取角色列表数据的操作
   created() {
     this.getList();
   },
   filters: {
+    // 日期时间格式化的过滤器函数，接收一个时间参数time
     formatDateTime(time) {
+      // 如果传入的时间参数为null或者空字符串，则返回'N/A'表示不可用
       if (time == null || time === '') {
         return 'N/A';
       }
+      // 将传入的时间参数转换为JavaScript的Date对象
       let date = new Date(time);
+      // 调用formatDate函数按照指定格式（'yyyy-MM-dd hh:mm:ss'）对日期进行格式化并返回
       return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
     }
   },
   methods: {
+    // 重置搜索条件的方法，将列表查询参数恢复为默认值，通过创建新对象避免直接修改默认对象
     handleResetSearch() {
       this.listQuery = Object.assign({}, defaultListQuery);
     },
+    // 处理搜索列表的方法，先将页码重置为1，然后调用获取列表数据的方法来重新获取符合搜索条件的数据
     handleSearchList() {
       this.listQuery.pageNum = 1;
       this.getList();
     },
+    // 处理每页显示数量改变的方法，先将页码重置为1，然后更新列表查询参数中的每页数量为传入的新值val，再调用获取列表数据的方法
     handleSizeChange(val) {
       this.listQuery.pageNum = 1;
       this.listQuery.pageSize = val;
       this.getList();
     },
+    // 处理当前页码改变的方法，更新列表查询参数中的页码为传入的新值val，然后调用获取列表数据的方法
     handleCurrentChange(val) {
       this.listQuery.pageNum = val;
       this.getList();
     },
+    // 处理添加角色操作的方法，将对话框设置为可见，标记当前操作为添加（非编辑），并将当前操作的角色对象重置为默认值副本
     handleAdd() {
       this.dialogVisible = true;
       this.isEdit = false;
       this.role = Object.assign({}, defaultRole);
     },
+    // 处理角色状态改变的方法，弹出确认框询问是否要修改状态
     handleStatusChange(index, row) {
       this.$confirm('是否要修改该状态?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
+        // 如果用户确认修改，调用updateStatus函数，传入角色ID和包含新状态的对象，成功后显示成功提示信息
         updateStatus(row.id, {status: row.status}).then(response => {
           this.$message({
             type: 'success',
@@ -206,6 +259,7 @@
           });
         });
       }).catch(() => {
+        // 如果用户取消修改，显示取消修改的提示信息，并重新获取列表数据以刷新界面显示
         this.$message({
           type: 'info',
           message: '取消修改'
@@ -213,6 +267,7 @@
         this.getList();
       });
     },
+    // 处理删除角色的方法，弹出确认框询问是否要删除角色
     handleDelete(index, row) {
       this.$confirm('是否要删除该角色?', '提示', {
         confirmButtonText: '确定',
@@ -220,9 +275,12 @@
         type: 'warning'
       }).then(() => {
         let ids = [];
+        // 将待删除角色的ID添加到数组中
         ids.push(row.id);
         let params = new URLSearchParams();
+        // 将角色ID数组添加到URLSearchParams对象中，用于传递给删除角色的API
         params.append("ids", ids);
+        // 调用deleteRole函数传递参数，成功删除后显示成功提示信息，并重新获取列表数据更新界面
         deleteRole(params).then(response => {
           this.$message({
             type: 'success',
@@ -232,17 +290,20 @@
         });
       });
     },
+    // 处理更新角色操作的方法，将对话框设置为可见，标记当前操作为编辑操作，并将当前操作的角色对象设置为传入的要编辑的角色数据副本
     handleUpdate(index, row) {
       this.dialogVisible = true;
       this.isEdit = true;
       this.role = Object.assign({}, row);
     },
+    // 处理对话框确认操作的方法，弹出确认框询问是否确认当前操作（添加或编辑）
     handleDialogConfirm() {
-        this.$confirm('是否要确认?', '提示', {
+      this.$confirm('是否要确认?', '提示', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
+        // 如果是编辑操作，调用updateRole函数传入角色ID和角色对象，成功后显示成功提示信息，关闭对话框并重新获取列表数据更新界面
         if (this.isEdit) {
           updateRole(this.role.id, this.role).then(response => {
             this.$message({
@@ -253,6 +314,7 @@
             this.getList();
           })
         } else {
+          // 如果是添加操作，调用createRole函数传入角色对象，成功后显示成功提示信息，关闭对话框并重新获取列表数据更新界面
           createRole(this.role).then(response => {
             this.$message({
               message: '添加成功！',
@@ -264,12 +326,15 @@
         }
       })
     },
+    // 处理选择菜单操作的方法，通过路由导航到'/ums/allocMenu'路径，并传递角色ID作为查询参数，应该是用于分配菜单相关功能
     handleSelectMenu(index, row) {
       this.$router.push({path: '/ums/allocMenu', query: {roleId: row.id}})
     },
+    // 处理选择资源操作的方法，通过路由导航到'/ums/allocResource'路径，并传递角色ID作为查询参数，应该是用于分配资源相关功能
     handleSelectResource(index, row) {
       this.$router.push({path: '/ums/allocResource', query: {roleId: row.id}})
     },
+    // 获取角色列表数据的方法，先将列表加载状态设置为正在加载，然后调用fetchList函数传入列表查询参数，获取到数据后更新列表数据、总数量，并将加载状态设置为完成
     getList() {
       this.listLoading = true;
       fetchList(this.listQuery).then(response => {
@@ -281,6 +346,8 @@
   }
 }
 </script>
-<style></style>
-
+<style>
+/* 当前 CSS 部分为空，这里可以添加针对当前组件（updateMenu 组件）的样式规则，比如设置整体布局样式、字体样式、颜色等，
+来对组件的外观进行定制化显示 */
+</style>