✨ 角色数据权限配置并移除用户侧数据权限

角色权限弹窗支持按菜单批量设置数据范围；用户管理去掉组织/客商权限配置；角色别名改为角色标识。 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-10-27 04:05:02 +08:00
parent d6bcb12c20
commit 4c117d87a5
4 changed files with 209 additions and 166 deletions
@@ -0,0 +1,19 @@
+import request from '@/axios';
+
+export const getRoleMenuDataScopeTree = roleId => {
+  return request({
+    url: '/blade-system/role-menu-data-scope/tree',
+    method: 'get',
+    params: {
+      roleId,
+    },
+  });
+};
+
+export const submitRoleMenuDataScope = data => {
+  return request({
+    url: '/blade-system/role-menu-data-scope/submit',
+    method: 'post',
+    data,
+  });
+};
@@ -315,29 +315,6 @@ export const userOption = safe => {
              { label: '承运商', value: 2 },
            ],
          },
-          {
-            label: '数据权限范围',
-            prop: 'dataScopeRange',
-            type: 'radio',
-            span: 24,
-            value: 1,
-            dicData: [
-              { label: '仅所属组织', value: 1 },
-              { label: '全部组织', value: 2 },
-              { label: '自定义', value: 3 },
-            ],
-          },
-          {
-            label: '数据层级范围',
-            prop: 'dataLevelRange',
-            type: 'radio',
-            span: 24,
-            value: 1,
-            dicData: [
-              { label: '包含下级', value: 1 },
-              { label: '仅本级', value: 2 },
-            ],
-          },
          {
            label: '备注',
            prop: 'remark',
@@ -50,7 +50,7 @@
      title="角色权限配置"
      append-to-body
      v-model="box"
-      width="345px"
+      width="960px"
      @close="handleDialogClose"
    >
      <el-tabs type="border-card">
@@ -100,41 +100,26 @@
            align="middle"
            style="margin-bottom: 12px; background: #f5f7fa; padding: 6px 10px; border-radius: 4px"
          >
-            <span style="display: inline-flex; align-items: center">
-              <el-switch
-                v-model="dataScopeLinked"
-                active-text="节点联动"
-                size="small"
-                @change="handleLinkedChange('treeDataScope')"
-              />
-              <el-tooltip content="开启后勾选父节点会自动勾选所有子节点，关闭则可独立勾选任意节点" placement="top">
-                <el-icon style="margin-left: 4px; color: #909399; cursor: pointer"><el-icon-question-filled /></el-icon>
-              </el-tooltip>
-            </span>
-            <el-button-group>
-              <el-button
-                size="small"
-                plain
-                @click="handleSelectAll('treeDataScope', dataScopeGrantList)"
-                >全选</el-button
-              >
-              <el-button
-                size="small"
-                plain
-                @click="handleInvertSelect('treeDataScope', dataScopeGrantList, dataScopeLinked)"
-                >反选</el-button
-              >
-            </el-button-group>
+            <span style="color: #606266; font-size: 13px"
+              >勾选多个菜单后点击「设置」，可批量配置数据权限；设置后菜单旁展示当前范围</span
+            >
+            <el-button type="primary" size="small" @click="openDataScopeSetting">设置</el-button>
          </el-row>
          <el-tree
-            :data="dataScopeGrantList"
+            :data="roleDataScopeMenuTree"
            show-checkbox
-            :check-strictly="!dataScopeLinked"
            node-key="id"
-            ref="treeDataScope"
-            :default-checked-keys="dataScopeTreeObj"
+            ref="treeRoleDataScope"
            :props="props"
          >
+            <template #default="{ data }">
+              <span class="role-data-scope-node">
+                <span>{{ data.title }}</span>
+                <span v-if="getMenuScopeLabel(data.id)" class="role-data-scope-tag"
+                  >【{{ getMenuScopeLabel(data.id) }}】</span
+                >
+              </span>
+            </template>
          </el-tree>
        </el-tab-pane>
        <el-tab-pane label="接口权限">
@@ -188,6 +173,45 @@
        </span>
      </template>
    </el-dialog>
+
+    <el-dialog
+      title="数据权限设置"
+      append-to-body
+      v-model="dataScopeSettingBox"
+      width="560px"
+      class="role-data-scope-setting-dialog"
+    >
+      <el-form label-position="right" label-width="auto">
+        <el-form-item label="角色名称">
+          <el-input v-model="dataScopeSetting.roleName" disabled />
+        </el-form-item>
+        <el-form-item label="数据权限">
+          <el-radio-group v-model="dataScopeSetting.scopeType">
+            <el-radio :value="1">所在部门及下级</el-radio>
+            <el-radio :value="2">全部组织</el-radio>
+            <el-radio :value="3">本人创建</el-radio>
+            <el-radio :value="4">自定义组织</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-if="Number(dataScopeSetting.scopeType) === 4" label="组织">
+          <el-tree
+            ref="treeCustomDept"
+            :data="deptTree"
+            show-checkbox
+            node-key="id"
+            default-expand-all
+            :props="{ label: 'title', children: 'children' }"
+            style="width: 100%; max-height: 320px; overflow: auto; border: 1px solid #ebeef5; padding: 8px"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dataScopeSettingBox = false">取消</el-button>
+          <el-button type="primary" @click="submitDataScopeSetting">保存</el-button>
+        </span>
+      </template>
+    </el-dialog>
  </basic-container>
 </template>

@@ -196,37 +220,44 @@ import {
  add,
  getList,
  getRole,
-  getRoleAlias,
  getRoleTreeById,
  grant,
  grantTree,
  remove,
  update,
 } from '@/api/system/role';
+import { getRoleMenuDataScopeTree, submitRoleMenuDataScope } from '@/api/system/roleDataScope';
+import { getDeptTree } from '@/api/system/dept';
 import { mapGetters } from 'vuex';
 import website from '@/config/website';
-import { validatenull } from '@/utils/validate';

 export default {
  data() {
    return {
      form: {},
      box: false,
+      dataScopeSettingBox: false,
      props: {
        label: 'title',
        value: 'key',
      },
      menuGrantList: [],
-      dataScopeGrantList: [],
      apiScopeGrantList: [],
      apiGrantList: [],
      menuTreeObj: [],
-      dataScopeTreeObj: [],
      apiScopeTreeObj: [],
      menuLinked: false,
-      dataScopeLinked: false,
      apiScopeLinked: false,
      currentRoleIds: [],
+      currentRoleName: '',
+      roleDataScopeMenuTree: [],
+      roleDataScopeMap: {},
+      deptTree: [],
+      dataScopeSetting: {
+        roleName: '',
+        scopeType: 2,
+        menuIds: [],
+      },
      selectionList: [],
      query: {},
      loading: true,
@@ -309,32 +340,19 @@ export default {
            ],
          },
          {
-            label: '角色别名',
-            labelTip: '用于权限校验与标注的属性,可手动录入也可点击现有别名快速录入',
+            label: '角色标识',
+            labelTip: '用于权限校验与标注的属性',
            prop: 'roleAlias',
            search: true,
            span: 24,
            rules: [
              {
                required: true,
-                message: '请输入角色别名',
+                message: '请输入角色标识',
                trigger: 'blur',
              },
            ],
          },
-          {
-            label: '现有别名',
-            labelTip: '当前系统已存在的角色别名,点击可快速录入',
-            prop: 'currentAlias',
-            type: 'radio',
-            dicData: [],
-            props: {
-              label: 'roleName',
-              value: 'roleAlias',
-            },
-            hide: true,
-            span: 24,
-          },
          {
            label: '角色排序',
            prop: 'sort',
@@ -378,14 +396,6 @@ export default {
      return ids;
    },
  },
-  watch: {
-    'form.currentAlias'() {
-      const alias = this.form.currentAlias;
-      if (!validatenull(alias)) {
-        this.form.roleAlias = alias;
-      }
-    },
-  },
  methods: {
    initData(roleId) {
      getRoleTreeById(roleId).then(res => {
@@ -452,9 +462,9 @@ export default {
    },
    submit() {
      const menuList = this.$refs.treeMenu.getCheckedKeys();
-      const dataScopeList = this.$refs.treeDataScope.getCheckedKeys();
      const apiScopeList = this.$refs.treeApiScope.getCheckedKeys();
-      grant(this.currentRoleIds, menuList, dataScopeList, apiScopeList).then(() => {
+      // 数据权限已改为角色菜单配置；传 null 跳过原生 dataScope 更新，避免误清历史配置
+      grant(this.currentRoleIds, menuList, null, apiScopeList).then(() => {
        this.box = false;
        this.$message({
          type: 'success',
@@ -465,6 +475,84 @@ export default {
        this.onLoad(this.page);
      });
    },
+    getMenuScopeLabel(menuId) {
+      const scope = this.roleDataScopeMap[String(menuId)];
+      return scope ? scope.scopeTypeName : '';
+    },
+    loadRoleDataScopeTree(roleId) {
+      return getRoleMenuDataScopeTree(roleId).then(res => {
+        const data = res.data.data || {};
+        this.currentRoleName = data.roleName || '';
+        this.roleDataScopeMenuTree = data.menuTree || [];
+        const scopeMap = {};
+        (data.scopes || []).forEach(item => {
+          scopeMap[String(item.menuId)] = item;
+        });
+        this.roleDataScopeMap = scopeMap;
+      });
+    },
+    openDataScopeSetting() {
+      const tree = this.$refs.treeRoleDataScope;
+      if (!tree) {
+        return;
+      }
+      const menuIds = tree.getCheckedKeys();
+      if (!menuIds || menuIds.length === 0) {
+        this.$message.warning('请先勾选要设置的菜单');
+        return;
+      }
+      this.dataScopeSetting = {
+        roleName: this.currentRoleName,
+        scopeType: 2,
+        menuIds,
+      };
+      const loadDept =
+        this.deptTree && this.deptTree.length
+          ? Promise.resolve()
+          : getDeptTree(this.userInfo.tenantId).then(res => {
+              this.deptTree = res.data.data || [];
+            });
+      loadDept.then(() => {
+        this.dataScopeSettingBox = true;
+        this.$nextTick(() => {
+          if (this.$refs.treeCustomDept) {
+            this.$refs.treeCustomDept.setCheckedKeys([]);
+          }
+        });
+      });
+    },
+    submitDataScopeSetting() {
+      const roleId = this.currentRoleIds && this.currentRoleIds[0];
+      if (!roleId) {
+        this.$message.warning('角色信息异常，请重新打开权限配置');
+        return;
+      }
+      const scopeType = Number(this.dataScopeSetting.scopeType || 2);
+      let deptIds = [];
+      if (scopeType === 4) {
+        deptIds = this.$refs.treeCustomDept ? this.$refs.treeCustomDept.getCheckedKeys() : [];
+        if (!deptIds.length) {
+          this.$message.warning('自定义组织时请勾选组织');
+          return;
+        }
+      }
+      submitRoleMenuDataScope({
+        roleId,
+        menuIds: this.dataScopeSetting.menuIds,
+        scopeType,
+        deptIds,
+      }).then(() => {
+        this.$message.success('数据权限设置成功');
+        this.dataScopeSettingBox = false;
+        this.loadRoleDataScopeTree(roleId).then(() => {
+          this.$nextTick(() => {
+            if (this.$refs.treeRoleDataScope) {
+              this.$refs.treeRoleDataScope.setCheckedKeys([]);
+            }
+          });
+        });
+      });
+    },
    rowSave(row, done, loading) {
      add(this.withTenantId(row)).then(
        () => {
@@ -547,10 +635,6 @@ export default {
          this.form.parentId = '';
        }
      }
-      getRoleAlias().then(res => {
-        const column = this.findColumn(this.option.column, 'currentAlias');
-        column.dicData = res.data.data;
-      });
      done();
    },
    handleRole() {
@@ -563,58 +647,52 @@ export default {
        return;
      }
      this.menuTreeObj = [];
-      this.dataScopeTreeObj = [];
      this.apiScopeTreeObj = [];
-      // 保存当前要配置权限的角色ID
      this.currentRoleIds = this.idsArray;
-      grantTree().then(res => {
-        this.menuGrantList = res.data.data.menu;
-        this.dataScopeGrantList = res.data.data.dataScope;
-        this.apiScopeGrantList = res.data.data.apiScope;
-        getRole(this.ids).then(res => {
-          this.menuTreeObj = res.data.data.menu;
-          this.dataScopeTreeObj = res.data.data.dataScope;
-          this.apiScopeTreeObj = res.data.data.apiScope;
-          this.box = true;
-          this.$nextTick(() => {
-            this.applyCheckedKeys('treeMenu', this.menuTreeObj);
-            this.applyCheckedKeys('treeDataScope', this.dataScopeTreeObj);
-            this.applyCheckedKeys('treeApiScope', this.apiScopeTreeObj);
-          });
+      this.currentRoleName = (this.selectionList[0] && this.selectionList[0].roleName) || '';
+      const roleId = this.currentRoleIds[0];
+      Promise.all([grantTree(), getRole(this.ids), this.loadRoleDataScopeTree(roleId)]).then(results => {
+        const grantRes = results[0];
+        const roleRes = results[1];
+        this.menuGrantList = grantRes.data.data.menu;
+        this.apiScopeGrantList = grantRes.data.data.apiScope;
+        this.menuTreeObj = roleRes.data.data.menu;
+        this.apiScopeTreeObj = roleRes.data.data.apiScope;
+        this.box = true;
+        this.$nextTick(() => {
+          this.applyCheckedKeys('treeMenu', this.menuTreeObj);
+          this.applyCheckedKeys('treeApiScope', this.apiScopeTreeObj);
        });
      });
    },
    handleRowRole(row) {
      this.menuTreeObj = [];
-      this.dataScopeTreeObj = [];
      this.apiScopeTreeObj = [];
-      // 保存当前要配置权限的角色ID（单个行操作）
      this.currentRoleIds = [row.id];
-      grantTree().then(res => {
-        this.menuGrantList = res.data.data.menu;
-        this.dataScopeGrantList = res.data.data.dataScope;
-        this.apiScopeGrantList = res.data.data.apiScope;
-        getRole(row.id).then(res => {
-          this.menuTreeObj = res.data.data.menu;
-          this.dataScopeTreeObj = res.data.data.dataScope;
-          this.apiScopeTreeObj = res.data.data.apiScope;
-          this.box = true;
-          this.$nextTick(() => {
-            this.applyCheckedKeys('treeMenu', this.menuTreeObj);
-            this.applyCheckedKeys('treeDataScope', this.dataScopeTreeObj);
-            this.applyCheckedKeys('treeApiScope', this.apiScopeTreeObj);
-          });
+      this.currentRoleName = row.roleName || '';
+      Promise.all([grantTree(), getRole(row.id), this.loadRoleDataScopeTree(row.id)]).then(results => {
+        const grantRes = results[0];
+        const roleRes = results[1];
+        this.menuGrantList = grantRes.data.data.menu;
+        this.apiScopeGrantList = grantRes.data.data.apiScope;
+        this.menuTreeObj = roleRes.data.data.menu;
+        this.apiScopeTreeObj = roleRes.data.data.apiScope;
+        this.box = true;
+        this.$nextTick(() => {
+          this.applyCheckedKeys('treeMenu', this.menuTreeObj);
+          this.applyCheckedKeys('treeApiScope', this.apiScopeTreeObj);
        });
      });
    },
    handleDialogClose() {
-      // 对话框关闭时清空选择状态和权限树数据
      this.menuTreeObj = [];
-      this.dataScopeTreeObj = [];
      this.apiScopeTreeObj = [];
      this.menuLinked = false;
-      this.dataScopeLinked = false;
      this.apiScopeLinked = false;
+      this.roleDataScopeMenuTree = [];
+      this.roleDataScopeMap = {};
+      this.currentRoleName = '';
+      this.dataScopeSettingBox = false;
      this.selectionClear();
    },
    handleDelete() {
@@ -659,3 +737,15 @@ export default {
  },
 };
 </script>
+
+<style scoped>
+.role-data-scope-node {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+.role-data-scope-tag {
+  color: #409eff;
+  font-size: 12px;
+}
+</style>
@@ -175,8 +175,6 @@
                <el-col :span="6"><el-form-item label="工号"><el-input v-model="form.code" :disabled="isUserViewMode" /></el-form-item></el-col>
                <el-col :span="6"><el-form-item label="OA登录名"><el-input v-model="form.oaLoginId" :disabled="isUserViewMode" maxlength="128" placeholder="请输入OA登录名" /></el-form-item></el-col>
                <el-col :span="6"><el-form-item label="人员类别"><el-select v-model="form.personCategory" :disabled="isUserViewMode"><el-option label="内部员工" :value="1" /><el-option label="承运商" :value="2" /></el-select></el-form-item></el-col>
-                <el-col :span="18"><el-form-item label="数据权限范围"><el-radio-group v-model="form.dataScopeRange" :disabled="isUserViewMode"><el-radio :value="1">仅所属组织</el-radio><el-radio :value="2">全部组织</el-radio><el-radio :value="3">自定义</el-radio></el-radio-group></el-form-item></el-col>
-                <el-col :span="18"><el-form-item label="数据层级范围"><el-radio-group v-model="form.dataLevelRange" :disabled="isUserViewMode"><el-radio :value="1">包含下级</el-radio><el-radio :value="2">仅本级</el-radio></el-radio-group></el-form-item></el-col>
                <el-col :span="24">
                  <el-form-item label="备注">
                    <el-input
@@ -202,13 +200,6 @@
                <el-table-column v-if="!isUserViewMode" label="操作" width="90"><template #default="{ row }"><el-link type="danger" @click="removeFormRole(row.id)">删除</el-link></template></el-table-column>
              </el-table>
            </el-tab-pane>
-            <el-tab-pane v-if="form.dataScopeRange === 3" label="数据权限">
-              <el-tree :data="permissionDeptTree" show-checkbox node-key="id" :default-checked-keys="form.dataScopeDeptIds || []" :props="{ label: 'title', children: 'children' }" @check="handleDataScopeCheck" />
-            </el-tab-pane>
-            <el-tab-pane label="客商权限">
-              <div class="permission-toolbar customer-toolbar"><el-checkbox v-model="form.includeNewCustomer" :true-value="1" :false-value="0" :disabled="isUserViewMode">包含新增的客商</el-checkbox></div>
-              <el-table ref="customerTable" :data="customerList" border @selection-change="handleCustomerSelection"><el-table-column type="selection" width="55" :selectable="isCustomerSelectable" /><el-table-column prop="customerCode" label="客商编码" /><el-table-column prop="fullName" label="客商名称" /></el-table>
-            </el-tab-pane>
          </el-tabs>
          <template #footer>
            <span v-if="isUserViewMode" class="dialog-footer">
@@ -407,7 +398,6 @@ import {
  auditRefuse,
  setLeader,
  getLeaderList,
-  getCustomerOptions,
 } from '@/api/system/user';
 import { exportBlob } from '@/api/common';
 import { getDeptTree } from '@/api/system/dept';
@@ -477,7 +467,6 @@ export default {
      treeData: [],
      permissionDeptTree: [],
      postList: [],
-      customerList: [],
      treeOption: treeOption,
      userOption: userOption(this),
      data: [],
@@ -952,9 +941,6 @@ export default {
        const column = this.findColumn(this.userOption.group, 'leaderId');
        column.dicData = res.data.data;
      });
-      getCustomerOptions().then(res => {
-        this.customerList = res.data.data || [];
-      });
    },
    // 由部门 id 反查「根 → 该节点」的 id 路径，供级联回显（找不到返回 null）
    findDeptPath(id, tree = this.permissionDeptTree, parents = []) {
@@ -1000,21 +986,6 @@ export default {
        .split(this.form.roleId || '')
        .filter(id => String(id) !== String(roleId));
    },
-    handleDataScopeCheck(_, checked) {
-      if (this.isUserViewMode) {
-        return;
-      }
-      this.form.dataScopeDeptIds = checked.checkedKeys;
-    },
-    handleCustomerSelection(rows) {
-      if (this.isUserViewMode) {
-        return;
-      }
-      this.form.customerIds = rows.map(row => row.id);
-    },
-    isCustomerSelectable() {
-      return !this.isUserViewMode;
-    },
    normalizeSexDisplay(sex) {
      if (sex === -1 || sex === '-1' || sex === '' || sex === null || sex === undefined) {
        return undefined;
@@ -1065,13 +1036,8 @@ export default {
          deptId: [],
          code: '',
          personCategory: 1,
-          dataScopeRange: 1,
-          dataLevelRange: 1,
          remark: '',
          roleId: '',
-          dataScopeDeptIds: [],
-          customerIds: [],
-          includeNewCustomer: 0,
        };
        this.userDialog = true;
        this.$nextTick(() => this.$refs.userFormRef && this.$refs.userFormRef.clearValidate());
@@ -1085,22 +1051,13 @@ export default {
          deptId: Array.isArray(deptIds) ? deptIds : [],
          postId: func.split(user.postId || '')[0] || '',
          roleId: func.join(user.roleId || ''),
-          dataScopeDeptIds: user.dataScopeDeptIds || [],
-          customerIds: user.customerIds || [],
-          includeNewCustomer: user.includeNewCustomer || 0,
          personCategory: user.personCategory || 1,
-          dataScopeRange: user.dataScopeRange || 1,
-          dataLevelRange: user.dataLevelRange || 1,
          sex: this.normalizeSexDisplay(user.sex),
        };
        this.sensitiveManager.saveInitialData(this.form);
        this.userDialog = true;
        this.$nextTick(() => {
          this.$refs.userFormRef && this.$refs.userFormRef.clearValidate();
-          (this.form.customerIds || []).forEach(id => {
-            const customer = this.customerList.find(item => String(item.id) === String(id));
-            if (customer) this.$refs.customerTable && this.$refs.customerTable.toggleRowSelection(customer, true);
-          });
        });
      });
    },