@epxing/business 5.3.0-beta.2 → 5.3.0-beta.4

package/src/base/RoleGroupManage.vue

@@ -0,0 +1,1160 @@
+<template>
+  <div class="rgm-page">
+    <div class="split">
+      <!-- 左：角色组列表 -->
+      <div class="split__left">
+        <div class="v9-card">
+          <div class="v9-block-title">角色组</div>
+          <div class="group-list">
+            <div
+              v-for="g in groupList"
+              :key="g.ID"
+              :class="['grp-item', { 'is-active': g.ID === curGroupId }]"
+              @click="selectGroup(g.ID)"
+            >
+              <div class="grp-item__body">
+                <div class="grp-item__name">{{ g.NAME }}</div>
+                <div class="grp-item__meta">{{ g.CODE }} · {{ g.roleCount }} 个角色 · 已授 {{ g.userCount }} 人</div>
+              </div>
+              <div class="grp-item__ops">
+                <button class="v9-btn v9-btn--text" @click.stop="openGroupForm(g)">编辑</button>
+                <button class="v9-btn v9-btn--text is-danger" @click.stop="openDelGroup(g)">删除</button>
+              </div>
+            </div>
+          </div>
+          <button class="v9-btn v9-btn--default grp-add-btn" @click="openGroupForm(null)">
+            <i class="el-icon-plus"></i> 新建角色组
+          </button>
+        </div>
+        <div class="v9-form-item__tip grp-left-tip">角色组为租户级定义，不属于任何业务系统；一个角色同一时间只能属于一个角色组。</div>
+      </div>
+
+      <!-- 右：组详情 -->
+      <div class="split__right">
+        <!-- 未选组 -->
+        <div v-if="!curGroup" class="v9-card">
+          <div class="v9-empty">
+            <i class="el-icon-box v9-empty__icon"></i>
+            <div>请先新建角色组</div>
+          </div>
+        </div>
+
+        <template v-else>
+          <!-- 重新应用提示条（G-04，历史差量兜底：正常流程加角色已自动补授） -->
+          <div v-if="pendingApply && pendingApply.length && curGroup.userCount > 0" class="tipbar tipbar--info">
+            <i class="el-icon-info"></i>
+            <div class="tipbar__main">检测到 {{ pendingApply.length }} 个角色的历史差量：已通过本组授权的 {{ curGroup.userCount }} 个用户尚未获得这些角色，可手动补授。</div>
+            <button class="v9-btn v9-btn--primary" @click="applyGroup">应用到 {{ curGroup.userCount }} 个用户</button>
+          </div>
+
+          <!-- 组信息 -->
+          <div class="v9-card">
+            <div class="v9-block-title">组信息</div>
+            <table class="v9-desc-table">
+              <tbody>
+                <tr>
+                  <th>组名称</th><td>{{ curGroup.NAME }}</td>
+                  <th>组编码</th><td>{{ curGroup.CODE }}</td>
+                  <th>排序号</th><td>{{ curGroup.ORDER_NUM }}</td>
+                </tr>
+                <tr>
+                  <th>描述</th><td colspan="5">{{ curGroup.DESC || '—' }}</td>
+                </tr>
+              </tbody>
+            </table>
+            <div class="grp-edit-row">
+              <button class="v9-btn v9-btn--default" @click="openGroupForm(curGroup)"><i class="el-icon-edit"></i> 编辑</button>
+            </div>
+          </div>
+
+          <!-- 组概况统计 -->
+          <div class="v9-figure-grid v9-figure-grid--3">
+            <div class="v9-figure">
+              <div class="v9-figure__label">组内角色</div>
+              <div class="v9-figure__value">{{ curGroup.roleCount }}</div>
+            </div>
+            <div class="v9-figure">
+              <div class="v9-figure__label">已授权用户</div>
+              <div class="v9-figure__value">{{ curGroup.userCount }}</div>
+            </div>
+            <div class="v9-figure">
+              <div class="v9-figure__label">覆盖系统</div>
+              <div class="v9-figure__value">{{ detail.sysCount }}</div>
+            </div>
+          </div>
+
+          <!-- 组内角色 / 已授权用户页签 -->
+          <div class="v9-card">
+            <div class="v9-tabs">
+              <div :class="['v9-tabs__item', { 'is-active': activeTab === 'roles' }]" @click="switchGroupTab('roles')">组内角色（{{ curGroup.roleCount }}）</div>
+              <div :class="['v9-tabs__item', { 'is-active': activeTab === 'users' }]" @click="switchGroupTab('users')">已授权用户（{{ curGroup.userCount }}）</div>
+            </div>
+
+            <!-- 页签一：组内角色 -->
+            <div v-show="activeTab === 'roles'" class="grp-tab-body">
+              <div class="grp-tab-toolbar">
+                <button class="v9-btn v9-btn--primary" @click="openPickRole"><i class="el-icon-plus"></i> 添加角色</button>
+                <span class="v9-form-item__tip grp-inline-tip">组不需要覆盖全部系统，内容按需；组内新增角色自动补授已授权用户，移除角色自动按位收回</span>
+              </div>
+              <div v-if="!groupRoles.length" class="v9-empty">
+                <i class="el-icon-box v9-empty__icon"></i>
+                <div>组内暂无角色，点击「添加角色」开始</div>
+              </div>
+              <table v-else class="v9-table">
+                <thead>
+                  <tr>
+                    <th style="width:60px">序号</th>
+                    <th>角色名称</th>
+                    <th>所属系统</th>
+                    <th>角色编码</th>
+                    <th style="width:100px">操作</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="(r, i) in groupRoles" :key="r.ID">
+                    <td>{{ i + 1 }}</td>
+                    <td>{{ r.NAME }}</td>
+                    <td><i :class="r.systemIcon" class="grp-sys-icon"></i>{{ r.SYSTEM_NAME }}</td>
+                    <td><span class="v9-tag v9-tag--info">{{ r.CODE }}</span></td>
+                    <td><button class="v9-btn v9-btn--text is-danger" @click="openRemoveRole(r)">移除</button></td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+
+            <!-- 页签二：已授权用户 -->
+            <div v-show="activeTab === 'users'" class="grp-tab-body">
+              <div class="grp-tab-toolbar">
+                <button class="v9-btn v9-btn--primary" @click="openAddUser"><i class="el-icon-plus"></i> 添加用户</button>
+                <span class="v9-form-item__tip grp-inline-tip">添加后用户立即获得组内全部角色；后续组内新增角色也会自动补授这些用户</span>
+              </div>
+              <div v-if="!groupUsers.length" class="v9-empty">
+                <i class="el-icon-box v9-empty__icon"></i>
+                <div>暂无通过本组授权的用户，点击「添加用户」开始</div>
+              </div>
+              <template v-else>
+                <table class="v9-table">
+                  <thead>
+                    <tr>
+                      <th style="width:60px">序号</th>
+                      <th>姓名</th>
+                      <th>工作证号</th>
+                      <th>部门</th>
+                      <th>持有本组角色数</th>
+                      <th style="width:160px">操作</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr v-for="(u, i) in groupUsers" :key="u.ID">
+                      <td>{{ i + 1 }}</td>
+                      <td>{{ u.NAME }}</td>
+                      <td>{{ u.USER_NO }}</td>
+                      <td>{{ u.DEPT_NAME }}</td>
+                      <td>{{ u.roleCount }}</td>
+                      <td><button class="v9-btn v9-btn--text is-danger" @click="openRemoveUser(u)">移除</button></td>
+                    </tr>
+                  </tbody>
+                </table>
+                <div class="v9-form-item__tip grp-table-foot-tip">按组来源（SOURCE_GROUP）反查，用于影响面评估与审计。</div>
+              </template>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <!-- ================= 弹窗：新建 / 编辑角色组 ================= -->
+    <div v-if="dlg.groupForm" class="v9-overlay" @click.self="dlg.groupForm = false">
+      <div class="v9-dialog">
+        <div class="v9-dialog__header">
+          <span>{{ formGroup.ID ? '编辑角色组' : '新建角色组' }}</span>
+          <span class="v9-dialog__close" @click="dlg.groupForm = false"><i class="el-icon-close"></i></span>
+        </div>
+        <div class="v9-dialog__body">
+          <div class="v9-form-item">
+            <label class="v9-form-item__label is-required">组名称</label>
+            <input v-model="formGroup.NAME" :class="['v9-input', { 'is-error': formErr.name }]" placeholder="租户内唯一，如：教师">
+            <div v-if="formErr.name" class="v9-form-item__error">组名称必填且不能与现有组重复</div>
+          </div>
+          <div class="v9-form-item">
+            <label class="v9-form-item__label is-required">组编码</label>
+            <input v-model="formGroup.CODE" :class="['v9-input', { 'is-error': formErr.code }]" placeholder="大小写字母 / 下划线，如：TEACHER">
+            <div v-if="formErr.code" class="v9-form-item__error">编码必填，仅限大小写字母、数字与下划线，且不能重复</div>
+          </div>
+          <div class="v9-form-item">
+            <label class="v9-form-item__label">描述</label>
+            <input v-model="formGroup.DESC" class="v9-input" placeholder="组的业务含义，授权人可见">
+          </div>
+          <div class="v9-form-item">
+            <label class="v9-form-item__label">排序号</label>
+            <input v-model="formGroup.ORDER_NUM" class="v9-input">
+          </div>
+        </div>
+        <div class="v9-dialog__footer">
+          <button class="v9-btn v9-btn--default" @click="dlg.groupForm = false">取消</button>
+          <button class="v9-btn v9-btn--primary" @click="saveGroupForm">保存</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- ================= 弹窗：添加角色（按系统分组 + 单组归属置灰） ================= -->
+    <div v-if="dlg.pickRole" class="v9-overlay" @click.self="dlg.pickRole = false">
+      <div class="v9-dialog v9-dialog--lg">
+        <div class="v9-dialog__header">
+          <span>向「{{ curGroup && curGroup.NAME }}」添加角色</span>
+          <span class="v9-dialog__close" @click="dlg.pickRole = false"><i class="el-icon-close"></i></span>
+        </div>
+        <div class="v9-dialog__body">
+          <div class="v9-form-item__tip pick-tip">按系统分组展示本租户全部可选角色（含租户公共角色），可跨系统勾选；已属于其他组的角色置灰，保存时后端同样会校验拦截（角色单组归属）。</div>
+          <div class="pick-scroll">
+            <div v-for="sys in selectableRoles" :key="sys.SYSTEM" class="pick-group">
+              <div class="pick-group__title"><i :class="sys.icon"></i>{{ sys.SYSTEM_NAME }}</div>
+              <label
+                v-for="r in sys.roles"
+                :key="r.ID"
+                :class="['pick-item', { 'is-disabled': r.disabled }]"
+              >
+                <input
+                  v-model="selRoleIds"
+                  type="checkbox"
+                  :value="r.ID"
+                  :disabled="r.disabled"
+                >
+                <span class="pick-item__name">{{ r.NAME }}</span>
+                <span class="v9-tag v9-tag--info">{{ r.CODE }}</span>
+                <span v-if="r.inGroup" class="v9-tag v9-tag--success">已在组内</span>
+                <span v-else-if="r.ownerGroupName" class="v9-tag v9-tag--warning">已属组 {{ r.ownerGroupName }}</span>
+              </label>
+            </div>
+          </div>
+        </div>
+        <div class="v9-dialog__footer">
+          <span class="v9-form-item__tip pick-count">{{ pickCountText }}</span>
+          <button class="v9-btn v9-btn--default" @click="dlg.pickRole = false">取消</button>
+          <button class="v9-btn v9-btn--primary" @click="savePickRole">加入组内</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- ================= 弹窗：移除角色（移出并收回，按位） ================= -->
+    <div v-if="dlg.removeRole" class="v9-overlay" @click.self="dlg.removeRole = false">
+      <div class="v9-dialog">
+        <div class="v9-dialog__header">
+          <span>移出并收回：「{{ rmRole.label }}」</span>
+          <span class="v9-dialog__close" @click="dlg.removeRole = false"><i class="el-icon-close"></i></span>
+        </div>
+        <div class="v9-dialog__body">
+          <div class="tipbar tipbar--warn">
+            <i class="el-icon-warning-outline"></i>
+            <div class="tipbar__main">该角色已通过本组授予 <b>{{ rmRole.total }}</b> 个用户（{{ rmRole.total - rmRole.withManual }} 条仅组来源、{{ rmRole.withManual }} 条另有手工授予）</div>
+          </div>
+          <div class="v9-form-item__tip">移出后按位收回该角色的组来源：同时有手工授予的绑定仅清除组来源、记录保留；仅组来源的绑定整条删除、权限收回。</div>
+        </div>
+        <div class="v9-dialog__footer">
+          <button class="v9-btn v9-btn--default" @click="dlg.removeRole = false">取消</button>
+          <button class="v9-btn v9-btn--primary" @click="doRemoveRole">移出并收回</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- ================= 弹窗：删除角色组 ================= -->
+    <div v-if="dlg.delGroup" class="v9-overlay" @click.self="dlg.delGroup = false">
+      <div class="v9-dialog">
+        <div class="v9-dialog__header">
+          <span>删除角色组「{{ delGroupData.NAME }}」</span>
+          <span class="v9-dialog__close" @click="dlg.delGroup = false"><i class="el-icon-close"></i></span>
+        </div>
+        <div class="v9-dialog__body">
+          <div class="tipbar tipbar--danger del-tipbar">
+            <i class="el-icon-warning-outline"></i>
+            <div class="tipbar__main">删除组不可恢复。已通过本组授予的授权将按位收回：</div>
+          </div>
+          <table class="v9-desc-table del-impact">
+            <tbody>
+              <tr><th>仅组来源绑定</th><td>{{ delGroupData.onlyGroup }} 条 → 整条删除（权限收回）</td></tr>
+              <tr><th>组 + 手工并存绑定</th><td>{{ delGroupData.both }} 条 → 仅清除组来源，手工授权保留</td></tr>
+              <tr><th>涉及用户</th><td>{{ delGroupData.userCount }} 人</td></tr>
+            </tbody>
+          </table>
+          <div class="v9-form-item__tip">同时持有手工授予的绑定仅清除组来源、记录保留，手工授权不受影响；仅组来源的绑定整条删除。</div>
+        </div>
+        <div class="v9-dialog__footer">
+          <button class="v9-btn v9-btn--default" @click="dlg.delGroup = false">取消</button>
+          <button class="v9-btn v9-btn--danger" @click="doDelGroup"><i class="el-icon-delete"></i> 删除并收回授权</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- ================= 弹窗：向组添加用户 ================= -->
+    <div v-if="dlg.addUser" class="v9-overlay" @click.self="dlg.addUser = false">
+      <div class="v9-dialog v9-dialog--md">
+        <div class="v9-dialog__header">
+          <span>向「{{ curGroup && curGroup.NAME }}」添加用户</span>
+          <span class="v9-dialog__close" @click="dlg.addUser = false"><i class="el-icon-close"></i></span>
+        </div>
+        <div class="v9-dialog__body">
+          <div class="v9-form-item__tip pick-tip">选中用户将立即获得组内全部角色（物化展开写入用户角色绑定，权限即时生效）；已手工授予的角色会并列保留手工来源，不跳过、不覆盖。</div>
+          <div class="v9-input-wrap au-search">
+            <span class="v9-input-prefix"><i class="el-icon-search"></i></span>
+            <input v-model="addUserKeyword" class="v9-input" placeholder="输入姓名、工号过滤" @input="filterAddUser">
+          </div>
+          <div class="pick-scroll au-scroll" v-loading="addUserLoading">
+            <template v-if="selectableUsers.length">
+              <label
+                v-for="u in selectableUsers"
+                :key="u.ID"
+                :class="['pick-item', { 'is-disabled': u.inGroup }]"
+              >
+                <input
+                  v-model="selUserIds"
+                  type="checkbox"
+                  :value="u.ID"
+                  :disabled="u.inGroup"
+                >
+                <span class="pick-item__name">{{ u.NAME }}</span>
+                <span class="v9-tag v9-tag--info">{{ u.USER_NO }}</span>
+                <span class="v9-form-item__tip grp-inline-tip">{{ u.DEPT_NAME }}</span>
+                <span v-if="u.inGroup" class="v9-tag v9-tag--success">已在本组</span>
+              </label>
+            </template>
+            <div v-else class="v9-empty">
+              <i class="el-icon-search v9-empty__icon"></i>
+              <div>没有匹配的用户</div>
+            </div>
+          </div>
+          <el-pagination
+            v-if="addUserTotal > addUserLimit"
+            small
+            layout="prev, pager, next"
+            v-model:current-page="addUserPage"
+            :page-size="addUserLimit"
+            :total="addUserTotal"
+            @current-change="handleAddUserPage"
+          />
+        </div>
+        <div class="v9-dialog__footer">
+          <span class="v9-form-item__tip pick-count">{{ userCountText }}</span>
+          <button class="v9-btn v9-btn--default" @click="dlg.addUser = false">取消</button>
+          <button class="v9-btn v9-btn--primary" @click="doAddUsers"><i class="el-icon-circle-plus"></i> 授予组内全部角色</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- ================= 弹窗：从组移除用户 ================= -->
+    <div v-if="dlg.removeUser" class="v9-overlay" @click.self="dlg.removeUser = false">
+      <div class="v9-dialog">
+        <div class="v9-dialog__header">
+          <span>从「{{ curGroup && curGroup.NAME }}」移除「{{ rmUser.label }}」</span>
+          <span class="v9-dialog__close" @click="dlg.removeUser = false"><i class="el-icon-close"></i></span>
+        </div>
+        <div class="v9-dialog__body">
+          <table class="v9-desc-table ru-impact">
+            <tbody>
+              <tr><th>通过本组持有的角色</th><td>{{ rmUser.total }} 个</td></tr>
+              <tr><th>仅组来源</th><td>{{ rmUser.total - rmUser.withManual }} 个 → 整条删除（权限收回）</td></tr>
+              <tr><th>另有手工授予</th><td>{{ rmUser.withManual }} 个 → 仅清除组来源，手工权限保留</td></tr>
+            </tbody>
+          </table>
+          <div class="v9-form-item__tip">按位收回：另有手工授予的角色仅清除组来源、手工权限保留；仅组来源的角色整条删除、权限收回。</div>
+        </div>
+        <div class="v9-dialog__footer">
+          <button class="v9-btn v9-btn--default" @click="dlg.removeUser = false">取消</button>
+          <button class="v9-btn v9-btn--danger" @click="doRemoveUser"><i class="el-icon-delete"></i> 移除并收回</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 轻提示 -->
+    <div class="toast-box">
+      <div v-if="toast.show" :class="['v9-message', toastClass]">
+        <i :class="toastIcon" class="v9-message__icon"></i>
+        <span>{{ toast.text }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import component from '@epxing/core/src/mixins/component.js'
+
+export default {
+  name: 'epx-role-group-manage',
+  mixins: [component],
+  data () {
+    return {
+      curGroupId: '', // 当前查看的组
+      groupList: [], // 组列表（含 roleCount / userCount 聚合）
+      curGroup: null, // 当前组基本信息
+      detail: { sysCount: 0 }, // 组详情附加统计
+      groupRoles: [], // 组内角色
+      groupUsers: [], // 已授权用户
+      activeTab: 'roles', // 当前页签
+      pendingApply: [], // 本次新增待重新应用的角色
+      // 弹窗开关
+      dlg: {
+        groupForm: false,
+        pickRole: false,
+        removeRole: false,
+        delGroup: false,
+        addUser: false,
+        removeUser: false
+      },
+      // 新建/编辑表单
+      formGroup: { ID: '', NAME: '', CODE: '', DESC: '', ORDER_NUM: 100 },
+      formErr: { name: false, code: false },
+      // 添加角色
+      selectableRoles: [], // 按系统分组
+      selRoleIds: [],
+      // 移除角色
+      rmRole: { id: '', label: '', total: 0, withManual: 0 },
+      // 删除组
+      delGroupData: { ID: '', NAME: '', onlyGroup: 0, both: 0, userCount: 0 },
+      // 添加用户（后端分页，避免租户用户量大时全量渲染拖垮页面）
+      selectableUsers: [],
+      selUserIds: [],
+      addUserKeyword: '',
+      addUserTotal: 0,
+      addUserPage: 1,
+      addUserLimit: 50,
+      addUserLoading: false,
+      addUserTimer: null,
+      // 移除用户
+      rmUser: { id: '', label: '', total: 0, withManual: 0 },
+      // 轻提示
+      toast: { show: false, type: 'success', text: '' },
+      toastTimer: null
+    }
+  },
+  computed: {
+    pickCountText () {
+      return this.selRoleIds.length ? '已选 ' + this.selRoleIds.length + ' 个角色' : '尚未选择角色'
+    },
+    userCountText () {
+      return this.selUserIds.length ? '已选 ' + this.selUserIds.length + ' 个用户' : '尚未选择用户'
+    },
+    toastClass () {
+      return { success: 'v9-message--success', error: 'v9-message--error', warn: 'v9-message--warning', info: 'v9-message--info' }[this.toast.type] || 'v9-message--info'
+    },
+    toastIcon () {
+      return { success: 'el-icon-success', error: 'el-icon-error', warn: 'el-icon-warning-outline', info: 'el-icon-info' }[this.toast.type] || 'el-icon-info'
+    }
+  },
+  created () {
+    this.getGroupList(() => {
+      // 支持从绑定追溯页带组 ID 进入
+      const qid = this.$query && this.$query.groupId
+      if (qid && this.groupList.some(g => g.ID === qid)) {
+        this.selectGroup(qid)
+      } else if (this.groupList.length) {
+        this.selectGroup(this.groupList[0].ID)
+      }
+    })
+  },
+  methods: {
+    msg (type, text) {
+      this.toast = { show: true, type, text }
+      clearTimeout(this.toastTimer)
+      this.toastTimer = setTimeout(() => { this.toast.show = false }, type === 'error' ? 6000 : 3600)
+    },
+    // ---------- 数据加载 ----------
+    getGroupList (cb) {
+      this.$http.$request({ action: 'getGroupList', entityId: 'FM_ROLE_GROUP' })
+        .then(data => {
+          this.groupList = data.groups || []
+          cb && cb()
+        })
+        .catch(err => this.msg('error', err.message || '获取角色组列表失败'))
+    },
+    getGroupDetail () {
+      if (!this.curGroupId) return
+      this.$http.$request({ action: 'getGroupDetail', entityId: 'FM_ROLE_GROUP', groupId: this.curGroupId })
+        .then(data => {
+          this.curGroup = data.group || null
+          this.groupRoles = data.roles || []
+          this.groupUsers = data.users || []
+          this.detail.sysCount = (data.stats && data.stats.sysCount) || 0
+          this.pendingApply = data.pendingApply || []
+        })
+        .catch(err => this.msg('error', err.message || '获取组详情失败'))
+    },
+    selectGroup (gid) {
+      this.curGroupId = gid
+      this.activeTab = 'roles'
+      this.getGroupList()
+      this.getGroupDetail()
+    },
+    switchGroupTab (tab) {
+      this.activeTab = tab
+    },
+    // ---------- 新建 / 编辑组 ----------
+    openGroupForm (g) {
+      this.formGroup = g
+        ? { ID: g.ID, NAME: g.NAME, CODE: g.CODE, DESC: g.DESC || '', ORDER_NUM: g.ORDER_NUM }
+        : { ID: '', NAME: '', CODE: '', DESC: '', ORDER_NUM: 100 }
+      this.formErr = { name: false, code: false }
+      this.dlg.groupForm = true
+    },
+    saveGroupForm () {
+      const name = (this.formGroup.NAME || '').trim()
+      const code = (this.formGroup.CODE || '').trim()
+      this.formErr.name = !name
+      this.formErr.code = !/^[A-Za-z][A-Za-z0-9_]*$/.test(code)
+      if (this.formErr.name || this.formErr.code) return
+      this.$http.$request({
+        action: 'saveGroup',
+        entityId: 'FM_ROLE_GROUP',
+        'bean.ID': this.formGroup.ID || '',
+        'bean.NAME': name,
+        'bean.CODE': code,
+        'bean.DESC': (this.formGroup.DESC || '').trim(),
+        'bean.ORDER_NUM': parseInt(this.formGroup.ORDER_NUM, 10) || 0
+      })
+        .then(() => {
+          const isNew = !this.formGroup.ID
+          this.dlg.groupForm = false
+          this.getGroupList(() => {
+            if (isNew) {
+              // 新建后定位到新组，引导添加角色
+              const created = this.groupList[this.groupList.length - 1]
+              if (created) this.selectGroup(created.ID)
+            } else {
+              this.getGroupDetail()
+            }
+          })
+          this.msg('success', '角色组「' + name + '」' + (isNew ? '已创建，接下来向组内添加角色' : '已保存'))
+        })
+        .catch(err => {
+          // 后端唯一性校验拦截
+          const msgText = err.message || ''
+          if (msgText.indexOf('名称') >= 0) this.formErr.name = true
+          if (msgText.indexOf('编码') >= 0) this.formErr.code = true
+          this.msg('error', msgText || '保存失败')
+        })
+    },
+    // ---------- 添加角色 ----------
+    openPickRole () {
+      this.selRoleIds = []
+      this.$http.$request({ action: 'getSelectableRoles', entityId: 'FM_ROLE_GROUP', groupId: this.curGroupId })
+        .then(data => {
+          this.selectableRoles = data.systems || []
+          this.dlg.pickRole = true
+        })
+        .catch(err => this.msg('error', err.message || '获取可选角色失败'))
+    },
+    savePickRole () {
+      if (!this.selRoleIds.length) { this.msg('warn', '请先勾选要加入的角色'); return }
+      this.$http.$request({
+        action: 'addRolesToGroup',
+        entityId: 'FM_ROLE_GROUP',
+        groupId: this.curGroupId,
+        roleIds: this.selRoleIds.join(',')
+      })
+        .then(data => {
+          this.dlg.pickRole = false
+          this.getGroupList()
+          this.getGroupDetail()
+          this.msg('success', '已加入 ' + this.selRoleIds.length + ' 个角色' + (data.appliedCreated ? '，已自动补授给本组已授权用户（新建绑定 ' + data.appliedCreated + ' 条）' : ''))
+        })
+        .catch(err => this.msg('error', err.message || '保存被拦截（角色单组归属校验）'))
+    },
+    // ---------- 移除角色（按位收回） ----------
+    openRemoveRole (r) {
+      this.$http.$request({
+        action: 'getRemoveRoleImpact',
+        entityId: 'FM_ROLE_GROUP',
+        groupId: this.curGroupId,
+        roleId: r.ID
+      })
+        .then(data => {
+          this.rmRole = { id: r.ID, label: r.NAME + '（' + r.SYSTEM_NAME + '）', total: data.total || 0, withManual: data.withManual || 0 }
+          this.dlg.removeRole = true
+        })
+        .catch(err => this.msg('error', err.message || '获取影响统计失败'))
+    },
+    doRemoveRole () {
+      this.$http.$request({
+        action: 'removeRoleFromGroup',
+        entityId: 'FM_ROLE_GROUP',
+        groupId: this.curGroupId,
+        roleId: this.rmRole.id
+      })
+        .then(data => {
+          this.dlg.removeRole = false
+          this.getGroupList()
+          this.getGroupDetail()
+          this.msg('success', '「' + this.rmRole.label + '」已移出并收回组来源：整条删除 ' + (data.removed || 0) + ' 条；另有手工授予的 ' + (data.kept || 0) + ' 条仅清组位、绑定保留', 6000)
+        })
+        .catch(err => this.msg('error', err.message || '移除失败'))
+    },
+    // ---------- 重新应用（差量补绑） ----------
+    applyGroup () {
+      this.$http.$request({ action: 'applyGroup', entityId: 'FM_ROLE_GROUP', groupId: this.curGroupId })
+        .then(data => {
+          this.getGroupDetail()
+          this.msg('success', '已按发起时刻的组内角色与用户快照补绑：新建 ' + (data.created || 0) + ' 条，判重跳过 ' + (data.skipped || 0) + ' 条')
+        })
+        .catch(err => this.msg('error', err.message || '重新应用失败'))
+    },
+    // ---------- 删除组（按位收回） ----------
+    openDelGroup (g) {
+      this.$http.$request({ action: 'getDeleteGroupImpact', entityId: 'FM_ROLE_GROUP', groupId: g.ID })
+        .then(data => {
+          this.delGroupData = {
+            ID: g.ID,
+            NAME: g.NAME,
+            onlyGroup: data.onlyGroup || 0,
+            both: data.both || 0,
+            userCount: data.userCount || 0
+          }
+          this.dlg.delGroup = true
+        })
+        .catch(err => this.msg('error', err.message || '获取影响统计失败'))
+    },
+    doDelGroup () {
+      this.$http.$request({ action: 'deleteGroup', entityId: 'FM_ROLE_GROUP', groupId: this.delGroupData.ID })
+        .then(data => {
+          this.dlg.delGroup = false
+          this.msg('success', '角色组「' + this.delGroupData.NAME + '」已删除：收回绑定 ' + (data.removed || 0) + ' 条，另有手工授予的 ' + (data.kept || 0) + ' 条仅清组位、记录保留', 6000)
+          this.curGroupId = ''
+          this.curGroup = null
+          this.getGroupList(() => {
+            if (this.groupList.length) this.selectGroup(this.groupList[0].ID)
+          })
+        })
+        .catch(err => this.msg('error', err.message || '删除失败'))
+    },
+    // ---------- 添加用户（物化展开） ----------
+    openAddUser () {
+      this.selUserIds = []
+      this.addUserKeyword = ''
+      this.addUserPage = 1
+      this.getSelectableUsers()
+      this.dlg.addUser = true
+    },
+    getSelectableUsers () {
+      this.addUserLoading = true
+      this.$http.$request({
+        action: 'getSelectableUsers',
+        entityId: 'FM_ROLE_GROUP',
+        groupId: this.curGroupId,
+        keyword: this.addUserKeyword,
+        page: this.addUserPage,
+        limit: this.addUserLimit
+      })
+        .then(data => {
+          this.selectableUsers = data.users || []
+          this.addUserTotal = data.total || 0
+        })
+        .catch(err => this.msg('error', err.message || '获取用户失败'))
+        .finally(() => { this.addUserLoading = false })
+    },
+    filterAddUser () {
+      // 输入防抖：每敲一键都全量检索会打爆后端
+      clearTimeout(this.addUserTimer)
+      this.addUserTimer = setTimeout(() => {
+        this.addUserPage = 1
+        this.getSelectableUsers()
+      }, 300)
+    },
+    handleAddUserPage (page) {
+      this.addUserPage = page
+      this.getSelectableUsers()
+    },
+    doAddUsers () {
+      if (!this.selUserIds.length) { this.msg('warn', '请先勾选要添加的用户'); return }
+      this.$http.$request({
+        action: 'addUsersToGroup',
+        entityId: 'FM_ROLE_GROUP',
+        groupId: this.curGroupId,
+        userIds: this.selUserIds.join(',')
+      })
+        .then(data => {
+          this.dlg.addUser = false
+          this.getGroupList()
+          this.getGroupDetail()
+          const both = data.both ? '其中 ' + data.both + ' 个角色另有手工授予，已并列保留（两来源并存）' : ''
+          this.msg('success', '已添加 ' + this.selUserIds.length + ' 个用户并展开组内角色：新建 ' + (data.created || 0) + ' 条，组位置为本组 ' + (data.moved || 0) + ' 条，判重跳过 ' + (data.skipped || 0) + ' 条。' + both, 6000)
+        })
+        .catch(err => this.msg('error', err.message || '添加失败'))
+    },
+    // ---------- 移除用户（按位收回） ----------
+    openRemoveUser (u) {
+      this.$http.$request({
+        action: 'getRemoveUserImpact',
+        entityId: 'FM_ROLE_GROUP',
+        groupId: this.curGroupId,
+        userId: u.ID
+      })
+        .then(data => {
+          this.rmUser = { id: u.ID, label: u.NAME + '（' + u.USER_NO + '）', total: data.total || 0, withManual: data.withManual || 0 }
+          this.dlg.removeUser = true
+        })
+        .catch(err => this.msg('error', err.message || '获取影响统计失败'))
+    },
+    doRemoveUser () {
+      this.$http.$request({
+        action: 'removeUserFromGroup',
+        entityId: 'FM_ROLE_GROUP',
+        groupId: this.curGroupId,
+        userId: this.rmUser.id
+      })
+        .then(data => {
+          this.dlg.removeUser = false
+          this.getGroupList()
+          this.getGroupDetail()
+          this.msg('success', '已移除该用户：整条删除 ' + (data.removed || 0) + ' 条；另有手工授予的 ' + (data.kept || 0) + ' 条仅清组位、绑定保留', 6000)
+        })
+        .catch(err => this.msg('error', err.message || '移除失败'))
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+/* ===== 以下样式值均取自原型 V9 设计系统，保持逐项一致 ===== */
+.rgm-page {
+  min-height: 100%;
+  padding: 24px;
+  background: var(--epx-bg-card, #f2f3f7);
+  font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--epx-text, #444);
+}
+
+/* 左右布局 */
+.split {
+  display: flex;
+  gap: 16px;
+  align-items: flex-start;
+}
+.split__left { flex: 0 0 280px; }
+.split__right { flex: 1 1 auto; min-width: 0; }
+@media (max-width: 992px) {
+  .split { flex-direction: column; }
+  .split__left { flex: none; width: 100%; }
+}
+
+/* 卡片 */
+.v9-card {
+  background: var(--epx-bg-card, #fff);
+  border-radius: 4px;
+  padding: 24px;
+}
+/* 区块标题（主题色竖条） */
+.v9-block-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--epx-text, #222);
+  margin-bottom: 16px;
+  &::before {
+    content: '';
+    width: 4px;
+    height: 16px;
+    border-radius: 2px;
+    background: #0874e7;
+  }
+}
+
+/* 组列表项 */
+.group-list { display: flex; flex-direction: column; gap: 2px; }
+.grp-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  border-left: 3px solid transparent;
+  &:hover {
+    background: var(--epx-bg-card, #f5f7fa);
+    .grp-item__ops { visibility: visible; }
+  }
+  &.is-active {
+    background: var(--epx-bg, #e6f6ff);
+    border-left-color: var(--el-color-primary, #0874e7);
+  }
+}
+.grp-item__name { font-weight: 500; color: var(--epx-text, #222); }
+.grp-item__meta { font-size: 12px; color: var(--epx-text-secondary, #888); margin-top: 2px; }
+.grp-item__ops { margin-left: auto; visibility: hidden; white-space: nowrap; }
+.grp-add-btn { width: 100%; margin-top: 12px; }
+.grp-left-tip { margin-top: 8px; }
+
+/* 按钮 */
+.v9-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 16px;
+  font-size: 14px;
+  line-height: 1;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  background: var(--epx-bg-card, #fff);
+  color: var(--epx-text, #444);
+  outline: none;
+  font-family: inherit;
+  &--default {
+    background: var(--epx-bg-card, #fff);
+    border-color: var(--epx-border, #dcdfe6);
+    color: var(--epx-text, #444);
+    &:hover { color: var(--el-color-primary, #0874e7); border-color: var(--epx-border, #82cbff); background: var(--epx-bg, #e6f6ff); }
+  }
+  &--primary {
+    background: #0874e7;
+    color: #fff;
+    &:hover { background: var(--epx-bg, #2f95f5); }
+    &:active { background: #0057c2; }
+  }
+  &--danger {
+    background: var(--epx-bg, #f56c6c);
+    color: #fff;
+    &:hover { background: var(--epx-bg, #f78989); }
+    &:active { background: var(--epx-bg, #dd6161); }
+  }
+  &--text {
+    background: transparent;
+    border-color: transparent;
+    color: var(--el-color-primary, #0874e7);
+    padding: 0 4px;
+    height: auto;
+    &:hover { color: var(--epx-text-secondary, #2f95f5); background: transparent; }
+    &.is-danger { color: var(--el-color-danger, #f56c6c); }
+  }
+}
+
+/* 提示条 */
+.tipbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-radius: 4px;
+  font-size: 14px;
+  margin-bottom: 16px;
+  &--info { background: var(--epx-bg, #e6f6ff); color: var(--el-color-primary, #0874e7); }
+  &--warn { background: var(--epx-bg-card, #fdf6ec); color: var(--epx-text-secondary, #e6a23a); }
+  &--danger { background: var(--epx-bg-card, #fef0f0); color: var(--el-color-danger, #f56c6c); }
+  .tipbar__main { flex: 1; }
+  b { font-weight: 600; }
+}
+
+/* 数字统计卡 */
+.v9-figure-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+.v9-figure {
+  background: var(--epx-bg-card, #f5f7fa);
+  border-radius: 4px;
+  padding: 16px;
+  min-width: 0;
+  transition: box-shadow 0.15s, background 0.15s;
+  &:hover { box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08), 0 2px 6px -2px rgba(17, 24, 39, 0.05); }
+}
+.v9-figure__label {
+  font-size: 12px;
+  color: var(--epx-text-secondary, #888);
+  margin-bottom: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.v9-figure__value {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--epx-text, #222);
+  line-height: 28px;
+}
+@media (max-width: 1100px) {
+  .v9-figure-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+
+/* 下划线页签 */
+.v9-tabs {
+  display: flex;
+  gap: 24px;
+  border-bottom: 1px solid var(--epx-border, #e4e7ed);
+}
+.v9-tabs__item {
+  position: relative;
+  padding: 12px 0;
+  cursor: pointer;
+  color: var(--epx-text, #444);
+  &.is-active {
+    color: var(--el-color-primary, #0874e7);
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: -1px;
+      height: 2px;
+      background: #0874e7;
+    }
+  }
+}
+.grp-tab-body { margin-top: 16px; }
+.grp-tab-toolbar { margin-bottom: 12px; display: flex; align-items: center; }
+.grp-inline-tip { display: inline; margin-left: 12px; margin-top: 0; }
+.grp-sys-icon { margin-right: 4px; }
+.grp-table-foot-tip { margin-top: 8px; }
+.grp-edit-row { margin-top: 12px; }
+
+/* 表格 */
+.v9-table {
+  width: 100%;
+  border-collapse: collapse;
+  background: var(--epx-bg-card, #fff);
+  font-size: 14px;
+  th, td {
+    padding: 0 16px;
+    height: 48px;
+    text-align: left;
+    border-bottom: 1px solid var(--epx-border, #e4e7ed);
+  }
+  thead th {
+    background: var(--epx-bg-card, #f2f3f7);
+    color: var(--epx-text, #444);
+    font-weight: 500;
+    white-space: nowrap;
+  }
+  tbody td { color: var(--epx-text, #444); }
+  tbody tr:hover > td { background: var(--epx-bg, #e6f6ff); }
+}
+
+/* 描述型表格 */
+.v9-desc-table {
+  width: 100%;
+  border-collapse: collapse;
+  border: 1px solid var(--epx-border, #e4e7ed);
+  th {
+    width: 120px;
+    text-align: right;
+    padding: 12px 16px;
+    background: var(--epx-bg-card, #f5f7fa);
+    color: var(--epx-text, #444);
+    font-weight: 400;
+    border: 1px solid var(--epx-border, #e4e7ed);
+    vertical-align: middle;
+  }
+  td {
+    padding: 12px 16px;
+    color: var(--epx-text, #222);
+    border: 1px solid var(--epx-border, #e4e7ed);
+    vertical-align: middle;
+  }
+}
+
+/* 标签 */
+.v9-tag {
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  padding: 0 8px;
+  font-size: 12px;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  line-height: 1;
+  &--primary { background: var(--epx-bg, #e6f6ff); color: var(--el-color-primary, #0874e7); border-color: var(--epx-border, #82cbff); }
+  &--success { background: var(--epx-bg-card, #f0f9eb); color: var(--epx-text-secondary, #67c23a); border-color: var(--epx-border, #c2e7b0); }
+  &--warning { background: var(--epx-bg-card, #fdf6ec); color: var(--epx-text-secondary, #e6a23a); border-color: var(--epx-border, #f5dab1); }
+  &--danger { background: var(--epx-bg-card, #fef0f0); color: var(--el-color-danger, #f56c6c); border-color: var(--epx-border, #fab6b6); }
+  &--info { background: var(--epx-bg-card, #f4f4f5); color: var(--epx-text-secondary, #888); border-color: var(--epx-border, #e9e9eb); }
+}
+
+/* 空状态 */
+.v9-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 0;
+  color: var(--epx-text-secondary, #888);
+  gap: 12px;
+}
+.v9-empty__icon { font-size: 64px; color: var(--epx-text-secondary, #c0c4cc); }
+
+/* 表单 */
+.v9-form-item { margin-bottom: 16px; }
+.v9-form-item__label {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 14px;
+  color: var(--epx-text, #444);
+  &.is-required::before {
+    content: '*';
+    color: var(--el-color-danger, #f56c6c);
+    margin-right: 4px;
+  }
+}
+.v9-form-item__error { margin-top: 4px; font-size: 12px; color: var(--el-color-danger, #f56c6c); }
+.v9-form-item__tip { margin-top: 4px; font-size: 12px; color: var(--epx-text-secondary, #888); }
+
+/* 输入框 */
+.v9-input {
+  width: 100%;
+  height: 32px;
+  padding: 0 12px;
+  font-size: 14px;
+  color: var(--epx-text, #444);
+  background: var(--epx-bg-card, #fff);
+  border: 1px solid var(--epx-border, #dcdfe6);
+  border-radius: 4px;
+  outline: none;
+  font-family: inherit;
+  transition: border-color 0.15s, box-shadow 0.15s;
+  &::placeholder { color: var(--epx-text-secondary, #aaa); }
+  &:hover { border-color: var(--epx-border, #c0c4cc); }
+  &:focus { border-color: var(--epx-border, #0874e7); box-shadow: 0 0 0 3px rgba(8, 116, 231, 0.15); }
+  &.is-error { border-color: var(--epx-border, #f56c6c); }
+}
+.v9-input-wrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  .v9-input { padding-left: 32px; }
+  .v9-input-prefix {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 12px;
+    display: inline-flex;
+    align-items: center;
+    height: 16px;
+    font-size: 16px;
+    line-height: 1;
+    color: var(--epx-text-secondary, #888);
+    pointer-events: none;
+  }
+}
+
+/* 弹窗 */
+.v9-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2000;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 15vh;
+}
+.v9-dialog {
+  background: var(--epx-bg-card, #fff);
+  width: 520px;
+  max-width: 90vw;
+  border-radius: 8px;
+  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.10), 0 6px 12px -4px rgba(17, 24, 39, 0.06);
+  overflow: hidden;
+  &--md { width: 680px; }
+  &--lg { width: 900px; }
+}
+.v9-dialog__header {
+  height: 56px;
+  display: flex;
+  align-items: center;
+  padding: 0 24px;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--epx-text, #222);
+}
+.v9-dialog__close {
+  margin-left: auto;
+  cursor: pointer;
+  color: var(--epx-text-secondary, #888);
+  font-size: 18px;
+}
+.v9-dialog__body {
+  padding: 20px 24px;
+  color: var(--epx-text, #444);
+}
+.v9-dialog__footer {
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 0 24px;
+}
+
+/* 角色选择器（按系统分组） */
+.pick-tip { margin-bottom: 12px; margin-top: 0; }
+.pick-scroll { max-height: 380px; overflow: auto; }
+.pick-group { margin-bottom: 16px; }
+.pick-group__title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 500;
+  color: var(--epx-text, #222);
+  padding: 8px 0;
+  border-bottom: 1px solid var(--epx-border, #e4e7ed);
+  margin-bottom: 8px;
+  i { color: var(--epx-text, #5c6066); }
+}
+.pick-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 8px 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  &:hover { background: var(--epx-bg-card, #f5f7fa); }
+  &.is-disabled {
+    color: var(--epx-text-secondary, #aaa);
+    cursor: not-allowed;
+    background: transparent;
+    &:hover { background: transparent; }
+  }
+}
+.pick-item__name { min-width: 120px; }
+.pick-count { flex: 1; margin-top: 0; }
+
+/* 添加用户 */
+.au-search { margin-bottom: 12px; }
+.au-scroll { max-height: 320px; }
+.ru-impact { margin-bottom: 16px; }
+.del-tipbar { margin-bottom: 12px; }
+.del-impact { margin-bottom: 12px; }
+
+/* 轻提示 */
+.toast-box {
+  position: fixed;
+  top: 76px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 3000;
+  max-width: 640px;
+}
+.v9-message {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  max-width: 640px;
+  padding: 10px 16px;
+  border-radius: 4px;
+  font-size: 14px;
+  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08), 0 2px 6px -2px rgba(17, 24, 39, 0.05);
+  &--success { background: var(--epx-bg-card, #f0f9eb); color: var(--epx-text, #444); .v9-message__icon { color: var(--epx-text-secondary, #67c23a); } }
+  &--warning { background: var(--epx-bg-card, #fdf6ec); color: var(--epx-text, #444); .v9-message__icon { color: var(--epx-text-secondary, #e6a23a); } }
+  &--error { background: var(--epx-bg-card, #fef0f0); color: var(--epx-text, #444); .v9-message__icon { color: var(--el-color-danger, #f56c6c); } }
+  &--info { background: var(--epx-bg, #edf2fc); color: var(--epx-text, #444); .v9-message__icon { color: var(--el-color-primary, #0874e7); } }
+}
+</style>