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>
@@ -74,21 +95,23 @@
               </el-button>
             </el-row>
             <el-row>
-            <el-button size="mini"
-                       type="text"
-                       @click="handleUpdate(scope.$index, scope.row)">
-              编辑
-            </el-button>
-            <el-button size="mini"
-                       type="text"
-                       @click="handleDelete(scope.$index, scope.row)">删除
-            </el-button>
+              <el-button size="mini"
+                         type="text"
+                         @click="handleUpdate(scope.$index, scope.row)">
+                编辑
+              </el-button>
+              <el-button size="mini"
+                         type="text"
+                         @click="handleDelete(scope.$index, scope.row)">删除
+              </el-button>
             </el-row>
           </template>
         </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,156 +160,194 @@
   </div>
 </template>
 <script>
-  import {fetchList,createRole,updateRole,updateStatus,deleteRole} from '@/api/role';
-  import {formatDate} from '@/utils/date';
+// 从'@/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,
+  description: null,
+  adminCount: 0,
+  status: 1
+};
 
-  const defaultListQuery = {
-    pageNum: 1,
-    pageSize: 5,
-    keyword: null
-  };
-  const defaultRole = {
-    id: null,
-    name: null,
-    description: null,
-    adminCount: 0,
-    status: 1
-  };
-  export default {
-    name: 'roleList',
-    data() {
-      return {
-        listQuery: Object.assign({}, defaultListQuery),
-        list: null,
-        total: null,
-        listLoading: false,
-        dialogVisible: false,
-        role: Object.assign({}, defaultRole),
-        isEdit: false
+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);
     },
-    created() {
+    // 处理搜索列表的方法，先将页码重置为1，然后调用获取列表数据的方法来重新获取符合搜索条件的数据
+    handleSearchList() {
+      this.listQuery.pageNum = 1;
       this.getList();
     },
-    filters: {
-      formatDateTime(time) {
-        if (time == null || time === '') {
-          return 'N/A';
-        }
-        let date = new Date(time);
-        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
-      }
+    // 处理每页显示数量改变的方法，先将页码重置为1，然后更新列表查询参数中的每页数量为传入的新值val，再调用获取列表数据的方法
+    handleSizeChange(val) {
+      this.listQuery.pageNum = 1;
+      this.listQuery.pageSize = val;
+      this.getList();
     },
-    methods: {
-      handleResetSearch() {
-        this.listQuery = Object.assign({}, defaultListQuery);
-      },
-      handleSearchList() {
-        this.listQuery.pageNum = 1;
-        this.getList();
-      },
-      handleSizeChange(val) {
-        this.listQuery.pageNum = 1;
-        this.listQuery.pageSize = val;
-        this.getList();
-      },
-      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(row.id, {status: row.status}).then(response => {
-            this.$message({
-              type: 'success',
-              message: '修改成功!'
-            });
+    // 处理当前页码改变的方法，更新列表查询参数中的页码为传入的新值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',
+            message: '修改成功!'
           });
-        }).catch(() => {
+        });
+      }).catch(() => {
+        // 如果用户取消修改，显示取消修改的提示信息，并重新获取列表数据以刷新界面显示
+        this.$message({
+          type: 'info',
+          message: '取消修改'
+        });
+        this.getList();
+      });
+    },
+    // 处理删除角色的方法，弹出确认框询问是否要删除角色
+    handleDelete(index, row) {
+      this.$confirm('是否要删除该角色?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        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: 'info',
-            message: '取消修改'
+            type: 'success',
+            message: '删除成功!'
           });
           this.getList();
         });
-      },
-      handleDelete(index, row) {
-        this.$confirm('是否要删除该角色?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          let ids = [];
-          ids.push(row.id);
-          let params=new URLSearchParams();
-          params.append("ids",ids);
-          deleteRole(params).then(response => {
+      });
+    },
+    // 处理更新角色操作的方法，将对话框设置为可见，标记当前操作为编辑操作，并将当前操作的角色对象设置为传入的要编辑的角色数据副本
+    handleUpdate(index, row) {
+      this.dialogVisible = true;
+      this.isEdit = true;
+      this.role = Object.assign({}, row);
+    },
+    // 处理对话框确认操作的方法，弹出确认框询问是否确认当前操作（添加或编辑）
+    handleDialogConfirm() {
+      this.$confirm('是否要确认?', '提示', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 如果是编辑操作，调用updateRole函数传入角色ID和角色对象，成功后显示成功提示信息，关闭对话框并重新获取列表数据更新界面
+        if (this.isEdit) {
+          updateRole(this.role.id, this.role).then(response => {
             this.$message({
-              type: 'success',
-              message: '删除成功!'
+              message: '修改成功！',
+              type: 'success'
             });
+            this.dialogVisible = false;
             this.getList();
-          });
-        });
-      },
-      handleUpdate(index, row) {
-        this.dialogVisible = true;
-        this.isEdit = true;
-        this.role = Object.assign({},row);
-      },
-      handleDialogConfirm() {
-        this.$confirm('是否要确认?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          if (this.isEdit) {
-            updateRole(this.role.id,this.role).then(response => {
-              this.$message({
-                message: '修改成功！',
-                type: 'success'
-              });
-              this.dialogVisible =false;
-              this.getList();
-            })
-          } else {
-            createRole(this.role).then(response => {
-              this.$message({
-                message: '添加成功！',
-                type: 'success'
-              });
-              this.dialogVisible =false;
-              this.getList();
-            })
-          }
-        })
-      },
-      handleSelectMenu(index,row){
-        this.$router.push({path:'/ums/allocMenu',query:{roleId:row.id}})
-      },
-      handleSelectResource(index,row){
-        this.$router.push({path:'/ums/allocResource',query:{roleId:row.id}})
-      },
-      getList() {
-        this.listLoading = true;
-        fetchList(this.listQuery).then(response => {
-          this.listLoading = false;
-          this.list = response.data.list;
-          this.total = response.data.total;
-        });
-      }
+          })
+        } else {
+          // 如果是添加操作，调用createRole函数传入角色对象，成功后显示成功提示信息，关闭对话框并重新获取列表数据更新界面
+          createRole(this.role).then(response => {
+            this.$message({
+              message: '添加成功！',
+              type: 'success'
+            });
+            this.dialogVisible = false;
+            this.getList();
+          })
+        }
+      })
+    },
+    // 处理选择菜单操作的方法，通过路由导航到'/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 => {
+        this.listLoading = false;
+        this.list = response.data.list;
+        this.total = response.data.total;
+      });
     }
   }
+}
 </script>
-<style></style>
-
+<style>
+/* 当前 CSS 部分为空，这里可以添加针对当前组件（updateMenu 组件）的样式规则，比如设置整体布局样式、字体样式、颜色等，
+来对组件的外观进行定制化显示 */
+</style>