From e76056d14fe76bb4eca4bce5fe0b1bfef4bed210 Mon Sep 17 00:00:00 2001
From: wyt <1955803161@qq.com>
Date: Wed, 29 Oct 2025 15:05:23 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=B4=E9=9B=A8=E7=9E=B3=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E4=BA=86=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../aurora-admin/src/views/role/Role.vue      | 400 +++++++++++-------
 1 file changed, 247 insertions(+), 153 deletions(-)

diff --git a/aurora-vue/aurora-admin/src/views/role/Role.vue b/aurora-vue/aurora-admin/src/views/role/Role.vue
index 2c221ab..0fe8e61 100644
--- a/aurora-vue/aurora-admin/src/views/role/Role.vue
+++ b/aurora-vue/aurora-admin/src/views/role/Role.vue
@@ -1,110 +1,150 @@
 <template>
+  <!-- 主卡片容器，包裹用于包裹整个角色管理页面内容 -->
   <el-card class="main-card">
+    <!-- 页面标题，使用当前路由名称作为标题 -->
     <div class="title">{{ this.$route.name }}</div>
+
+    <!-- 操作按钮和搜索区域容器 -->
     <div class="operation-container">
-      <el-button type="primary" size="small" icon="el-icon-plus" @click="openMenuModel(null)"> 新增 </el-button>
-      <el-button
-        type="danger"
-        size="small"
-        icon="el-icon-delete"
-        :disabled="this.roleIds.length == 0"
-        @click="isDelete = true">
-        批量删除
-      </el-button>
+      <!-- 新增角色按钮 -->
+      <el-button type="primary" size="small" icon="el-icon-plus" @click="openModel(null)"> 新增 </el-button>
+
+      <!-- 搜索区域，居右显示 -->
       <div style="margin-left: auto">
+        <!-- 搜索输入框，支持回车搜索 -->
         <el-input
-          v-model="keywords"
-          prefix-icon="el-icon-search"
-          size="small"
-          placeholder="请输入角色名"
-          style="width: 200px"
-          @keyup.enter.native="searchRoles" />
-        <el-button type="primary" size="small" icon="el-icon-search" style="margin-left: 1rem" @click="searchRoles">
+            v-model="keywords"
+            prefix-icon="el-icon-search"
+            size="small"
+            placeholder="请输入角色名"
+            style="width: 200px"
+            @keyup.enter.native="listRoles" />
+        <!-- 搜索按钮 -->
+        <el-button type="primary" size="small" icon="el-icon-search" style="margin-left: 1rem" @click="listRoles">
           搜索
         </el-button>
       </div>
     </div>
+
+    <!-- 角色列表表格，加载时显示loading状态，支持选择功能 -->
     <el-table border :data="roles" @selection-change="selectionChange" v-loading="loading">
+      <!-- 选择列 -->
       <el-table-column type="selection" width="55" />
-      <el-table-column prop="roleName" label="角色名" align="center" />
-      <el-table-column prop="roleLabel" label="权限标签" align="center">
+
+      <!-- 角色名称列 -->
+      <el-table-column prop="roleName" label="角色名称" align="center" />
+
+      <!-- 角色权限标识列 -->
+      <el-table-column prop="roleKey" label="权限标识" align="center" />
+
+      <!-- 角色排序列 -->
+      <el-table-column prop="roleSort" label="排序" align="center" />
+
+      <!-- 角色状态列，使用开关控制 -->
+      <el-table-column prop="status" label="状态" align="center" width="100">
         <template slot-scope="scope">
-          <el-tag>
-            {{ scope.row.roleName }}
-          </el-tag>
+          <el-switch
+              v-model="scope.row.status"
+              active-color="#13ce66"
+              inactive-color="#F4F4F5"
+              :active-value="1"  <!-- 1表示启用状态 -->
+          :inactive-value="0"  <!-- 0表示禁用状态 -->
+          @change="changeStatus(scope.row)" />  <!-- 状态变化时触发的事件 -->
         </template>
       </el-table-column>
-      <el-table-column prop="createTime" label="创建时间" width="150" align="center">
+
+      <!-- 创建时间列，使用date过滤器格式化时间 -->
+      <el-table-column prop="createTime" label="创建时间" align="center">
         <template slot-scope="scope">
           <i class="el-icon-time" style="margin-right: 5px" />
           {{ scope.row.createTime | date }}
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" width="220">
+
+      <!-- 操作列 -->
+      <el-table-column label="操作" align="center" width="200">
         <template slot-scope="scope">
-          <el-button type="text" size="mini" @click="openMenuModel(scope.row)">
-            <i class="el-icon-edit" /> 菜单权限
-          </el-button>
-          <el-button type="text" size="mini" @click="openResourceModel(scope.row)">
-            <i class="el-icon-folder-checked" /> 资源权限
-          </el-button>
-          <el-popconfirm title="确定删除吗？" style="margin-left: 10px" @confirm="deleteRoles(scope.row.id)">
-            <el-button size="mini" type="text" slot="reference"> <i class="el-icon-delete" /> 删除 </el-button>
+          <!-- 权限分配按钮 -->
+          <el-button type="primary" size="mini" @click="openAuthModel(scope.row)"> 权限 </el-button>
+
+          <!-- 编辑按钮 -->
+          <el-button type="success" size="mini" @click="openModel(scope.row)"> 编辑 </el-button>
+
+          <!-- 删除确认弹窗触发器 -->
+          <el-popconfirm title="确定删除吗？" style="margin-left: 1rem" @confirm="deleteRole(scope.row.id)">
+            <el-button size="mini" type="danger" slot="reference"> 删除 </el-button>
           </el-popconfirm>
         </template>
       </el-table-column>
     </el-table>
+
+    <!-- 分页组件 -->
     <el-pagination
-      class="pagination-container"
-      background
-      @size-change="sizeChange"
-      @current-change="currentChange"
-      :current-page="current"
-      :page-size="size"
-      :total="count"
-      :page-sizes="[10, 20]"
-      layout="total, sizes, prev, pager, next, jumper" />
-    <el-dialog :visible.sync="roleMenu" width="30%">
-      <div class="dialog-title-container" slot="title" ref="roleTitle" />
-      <el-form label-width="80px" size="medium" :model="roleForm">
-        <el-form-item label="角色名">
-          <el-input v-model="roleForm.roleName" style="width: 250px" />
-        </el-form-item>
-        <el-form-item label="菜单权限">
-          <el-tree :data="menus" :default-checked-keys="roleForm.menuIds" show-checkbox node-key="id" ref="menuTree" />
-        </el-form-item>
-      </el-form>
+        class="pagination-container"
+        background
+        @size-change="sizeChange"  <!-- 每页条数改变事件 -->
+    @current-change="currentChange"  <!-- 当前页码改变事件 -->
+    :current-page="current"  <!-- 当前页码 -->
+    :page-size="size"  <!-- 每页条数 -->
+    :total="count"  <!-- 总条数 -->
+    :page-sizes="[10, 20]"  <!-- 可选每页条数 -->
+    layout="total, sizes, prev, pager, next, jumper" />  <!-- 分页布局 -->
+
+    <!-- 批量删除确认弹窗 -->
+    <el-dialog :visible.sync="isDelete" width="30%">
+      <div class="dialog-title-container" slot="title"><i class="el-icon-warning" style="color: #ff9900" />提示</div>
+      <div style="font-size: 1rem">是否删除选中项？</div>
       <div slot="footer">
-        <el-button @click="roleMenu = false">取 消</el-button>
-        <el-button type="primary" @click="saveOrUpdateRoleMenu"> 确 定 </el-button>
+        <el-button @click="isDelete = false">取 消</el-button>
+        <el-button type="primary" @click="deleteRole(null)"> 确 定 </el-button>
       </div>
     </el-dialog>
-    <el-dialog :visible.sync="roleResource" width="30%" top="9vh">
-      <div class="dialog-title-container" slot="title">修改资源权限</div>
+
+    <!-- 新增/编辑角色弹窗 -->
+    <el-dialog :visible.sync="addOrEdit" width="30%">
+      <div class="dialog-title-container" slot="title" ref="roleTitle" />  <!-- 弹窗标题，动态设置 -->
       <el-form label-width="80px" size="medium" :model="roleForm">
-        <el-form-item label="角色名">
-          <el-input v-model="roleForm.roleName" style="width: 250px" />
+        <el-form-item label="角色名称">
+          <el-input v-model="roleForm.roleName" style="width: 220px" />
+        </el-form-item>
+        <el-form-item label="权限标识">
+          <el-input v-model="roleForm.roleKey" style="width: 220px" />
+        </el-form-item>
+        <el-form-item label="显示排序">
+          <el-input-number v-model="roleForm.roleSort" controls-position="right" :min="1" :max="100" />
         </el-form-item>
-        <el-form-item label="资源权限">
-          <el-tree
-            :data="resources"
-            :default-checked-keys="roleForm.resourceIds"
-            show-checkbox
-            node-key="id"
-            ref="resourceTree" />
+        <el-form-item label="角色状态">
+          <el-radio-group v-model="roleForm.status">
+            <el-radio :label="1">启用</el-radio>
+            <el-radio :label="0">禁用</el-radio>
+          </el-radio-group>
         </el-form-item>
       </el-form>
       <div slot="footer">
-        <el-button @click="roleResource = false">取 消</el-button>
-        <el-button type="primary" @click="saveOrUpdateRoleResource"> 确 定 </el-button>
+        <el-button @click="addOrEdit = false">取 消</el-button>
+        <el-button type="primary" @click="addOrEditRole"> 确 定 </el-button>
       </div>
     </el-dialog>
-    <el-dialog :visible.sync="isDelete" width="30%">
-      <div class="dialog-title-container" slot="title"><i class="el-icon-warning" style="color: #ff9900" />提示</div>
-      <div style="font-size: 1rem">是否删除选中项？</div>
+
+    <!-- 角色权限分配弹窗 -->
+    <el-dialog :visible.sync="authDialog" width="40%" height="600px">
+      <div class="dialog-title-container" slot="title">
+        <i class="el-icon-lock" /> 角色权限
+      </div>
+      <!-- 权限树形结构选择器 -->
+      <el-tree
+          ref="tree"
+          :data="resources"  <!-- 权限数据 -->
+      show-checkbox  <!-- 显示复选框 -->
+      node-key="id"  <!-- 节点唯一标识 -->
+      :default-checked-keys="checkedKeys"  <!-- 默认选中的节点ID数组 -->
+      :props="defaultProps"  <!-- 树形结构配置 -->
+      :expand-on-click-node="false"  <!-- 点击节点不展开，只通过图标展开 -->
+      :check-strictly="false"  <!-- 父子节点关联选择 -->
+      />
       <div slot="footer">
-        <el-button @click="isDelete = false">取 消</el-button>
-        <el-button type="primary" @click="deleteRoles(null)"> 确 定 </el-button>
+        <el-button @click="authDialog = false">取 消</el-button>
+        <el-button type="primary" @click="saveAuth"> 确 定 </el-button>
       </div>
     </el-dialog>
   </el-card>
@@ -112,75 +152,102 @@
 
 <script>
 export default {
+  // 页面创建时执行
   created() {
+    // 从状态管理中获取角色页面的当前页码
     this.current = this.$store.state.pageState.role
+    // 加载角色列表数据
     this.listRoles()
   },
-  data: function () {
+  data() {
     return {
-      loading: true,
-      isDelete: false,
-      roles: [],
-      roleIds: [],
-      keywords: null,
-      current: 1,
-      size: 10,
-      count: 0,
-      roleMenu: false,
-      roleResource: false,
-      resources: [],
-      menus: [],
+      loading: true,  // 表格加载状态
+      isDelete: false,  // 批量删除弹窗显示状态
+      addOrEdit: false,  // 新增/编辑弹窗显示状态
+      authDialog: false,  // 权限分配弹窗显示状态
+      keywords: '',  // 搜索关键词（角色名）
+      roleIds: [],  // 选中的角色ID列表
+      roles: [],  // 角色列表数据
+      resources: [],  // 权限资源树形数据
+      checkedKeys: [],  // 已选中的权限ID数组
+      currentRoleId: null,  // 当前操作的角色ID（用于权限分配）
+      // 角色表单数据
       roleForm: {
-        roleName: '',
-        roleLabel: '',
-        resourceIds: [],
-        menuIds: []
-      }
+        id: null,  // 角色ID（编辑时使用）
+        roleName: '',  // 角色名称
+        roleKey: '',  // 权限标识
+        roleSort: 1,  // 排序号
+        status: 1  // 状态（1：启用，0：禁用）
+      },
+      // 树形结构配置
+      defaultProps: {
+        children: 'children',  // 子节点字段名
+        label: 'resourceName'  // 节点显示文本字段名
+      },
+      current: 1,  // 当前页码
+      size: 10,  // 每页条数
+      count: 0  // 总条数
     }
   },
   methods: {
-    searchRoles() {
-      this.current = 1
-      this.listRoles()
+    // 处理表格选择事件，收集选中的角色ID
+    selectionChange(roles) {
+      this.roleIds = []
+      roles.forEach((item) => {
+        this.roleIds.push(item.id)
+      })
+    },
+    // 搜索角色（重置页码为1）
+    listRoles() {
+      this.axios
+          .get('/api/admin/roles', {
+            params: {
+              current: this.current,
+              size: this.size,
+              keywords: this.keywords
+            }
+          })
+          .then(({ data }) => {
+            this.roles = data.data.records  // 角色列表数据
+            this.count = data.data.count  // 总条数
+            this.loading = false  // 关闭加载状态
+          })
     },
+    // 处理每页条数改变事件
     sizeChange(size) {
       this.size = size
       this.listRoles()
     },
+    // 处理当前页码改变事件
     currentChange(current) {
       this.current = current
+      // 更新状态管理中的角色页面页码
       this.$store.commit('updateRolePageState', current)
       this.listRoles()
     },
-    selectionChange(roles) {
-      this.roleIds = []
-      roles.forEach((item) => {
-        this.roleIds.push(item.id)
-      })
-    },
-    listRoles() {
-      this.axios
-        .get('/api/admin/roles', {
-          params: {
-            current: this.current,
-            size: this.size,
-            keywords: this.keywords
-          }
-        })
-        .then(({ data }) => {
-          this.roles = data.data.records
-          this.count = data.data.count
-          this.loading = false
-        })
-      this.axios.get('/api/admin/role/resources').then(({ data }) => {
-        this.resources = data.data
-      })
-      this.axios.get('/api/admin/role/menus').then(({ data }) => {
-        this.menus = data.data
+    // 改变角色状态（启用/禁用）
+    changeStatus(role) {
+      this.axios.post('/api/admin/roles', role).then(({ data }) => {
+        if (data.flag) {
+          // 操作成功提示
+          this.$notify.success({
+            title: '成功',
+            message: data.message
+          })
+          this.listRoles()  // 重新加载角色列表
+        } else {
+          // 操作失败提示
+          this.$notify.error({
+            title: '失败',
+            message: data.message
+          })
+        }
       })
     },
-    deleteRoles(id) {
-      var param = {}
+    // 删除角色（支持单个删除和批量删除）
+    deleteRole(id) {
+      let param = {}
+      // 批量删除时参数为选中的ID列表，单个删除时为单个ID
       if (id == null) {
         param = { data: this.roleIds }
       } else {
@@ -188,86 +255,113 @@ export default {
       }
       this.axios.delete('/api/admin/roles', param).then(({ data }) => {
         if (data.flag) {
+          // 删除成功提示
           this.$notify.success({
             title: '成功',
             message: data.message
           })
-          this.listRoles()
+          this.listRoles()  // 重新加载角色列表
         } else {
+          // 删除失败提示
           this.$notify.error({
             title: '失败',
             message: data.message
           })
         }
+        // 关闭删除弹窗
         this.isDelete = false
       })
     },
-    openMenuModel(role) {
-      this.$nextTick(function () {
-        this.$refs.menuTree.setCheckedKeys([])
-      })
-      this.$refs.roleTitle.innerHTML = role ? '修改角色' : '新增角色'
-      if (role != null) {
+    // 打开新增/编辑角色弹窗
+    openModel(role) {
+      if (role != null) {  // 编辑模式：复制角色数据到表单
         this.roleForm = JSON.parse(JSON.stringify(role))
-      } else {
+        this.$refs.roleTitle.innerHTML = '修改角色'  // 设置弹窗标题
+      } else {  // 新增模式：重置表单数据
         this.roleForm = {
+          id: null,
           roleName: '',
-          roleLabel: '',
-          resourceIds: [],
-          menuIds: []
+          roleKey: '',
+          roleSort: 1,
+          status: 1
         }
+        this.$refs.roleTitle.innerHTML = '添加角色'  // 设置弹窗标题
       }
-      this.roleMenu = true
+      // 显示弹窗
+      this.addOrEdit = true
     },
-    openResourceModel(role) {
-      this.$nextTick(function () {
-        this.$refs.resourceTree.setCheckedKeys([])
-      })
-      this.roleForm = JSON.parse(JSON.stringify(role))
-      this.roleResource = true
-    },
-    saveOrUpdateRoleResource() {
-      this.roleForm.menuIds = null
-      this.roleForm.resourceIds = this.$refs.resourceTree.getCheckedKeys()
-      this.axios.post('/api/admin/role', this.roleForm).then(({ data }) => {
+    // 新增或编辑角色提交
+    addOrEditRole() {
+      // 表单验证
+      if (this.roleForm.roleName.trim() === '') {
+        this.$message.error('角色名称不能为空')
+        return false
+      }
+      if (this.roleForm.roleKey.trim() === '') {
+        this.$message.error('权限标识不能为空')
+        return false
+      }
+      // 发送新增/编辑请求
+      this.axios.post('/api/admin/roles', this.roleForm).then(({ data }) => {
         if (data.flag) {
+          // 操作成功提示
           this.$notify.success({
             title: '成功',
             message: data.message
           })
-          this.listRoles()
+          this.listRoles()  // 重新加载角色列表
         } else {
+          // 操作失败提示
           this.$notify.error({
             title: '失败',
             message: data.message
           })
         }
-        this.roleResource = false
+        // 关闭弹窗
+        this.addOrEdit = false
       })
     },
-    saveOrUpdateRoleMenu() {
-      if (this.roleForm.roleName.trim() == '') {
-        this.$message.error('角色名不能为空')
-        return false
+    // 打开角色权限分配弹窗
+    openAuthModel(role) {
+      this.currentRoleId = role.id  // 记录当前角色ID
+      // 获取所有权限资源
+      this.axios.get('/api/admin/resources').then(({ data }) => {
+        this.resources = data.data  // 权限树形数据
+        // 获取当前角色已有的权限
+        this.axios.get('/api/admin/roles/' + role.id + '/resources').then(({ data }) => {
+          this.checkedKeys = data.data  // 已选中的权限ID数组
+          this.authDialog = true  // 显示权限分配弹窗
+        })
+      })
+    },
+    // 保存角色权限分配
+    saveAuth() {
+      // 获取所有选中的权限ID
+      const checkedKeys = this.$refs.tree.getCheckedKeys()
+      // 构建请求参数
+      const param = {
+        roleId: this.currentRoleId,
+        resourceIds: checkedKeys
       }
-      this.roleForm.resourceIds = null
-      this.roleForm.menuIds = this.$refs.menuTree.getCheckedKeys().concat(this.$refs.menuTree.getHalfCheckedKeys())
-      this.axios.post('/api/admin/role', this.roleForm).then(({ data }) => {
+      // 发送保存权限请求
+      this.axios.post('/api/admin/roles/resources', param).then(({ data }) => {
         if (data.flag) {
+          // 操作成功提示
           this.$notify.success({
             title: '成功',
             message: data.message
           })
-          this.listRoles()
         } else {
+          // 操作失败提示
           this.$notify.error({
             title: '失败',
             message: data.message
           })
         }
-        this.roleMenu = false
+        // 关闭权限分配弹窗
+        this.authDialog = false
       })
     }
   }
 }
-</script>
+</script>
\ No newline at end of file