角色管理模块功能对接

src/api/role/index.ts

@@ -106,6 +106,23 @@ export function roleMenuTreeSelect(roleId) {
     url: '/system/menu/roleMenuTreeSelect/' + roleId,
     method: 'get'
   })
+}
+ /** 根据角色ID查询菜单下拉树结构 无按钮 */
+export function roleMenuTreeSelectMC(roleId) {
+  return request({
+    url: '/system/menu/treeSelectMC/' + roleId,
+    method: 'get'
+  })
+}
+/**
+ * 查询角色详细
+ *
+ */
+export function getRole(businessId:any) {
+  return request({
+    url: '/system/role/detail/' + businessId,
+    method: 'get'
+  })
 }
 /**
  * 添加角色

src/api/role/types.ts

@@ -15,7 +15,23 @@ export interface RoleQuery extends PageQuery {
    */
   flag?: string;
 }
-
+/**
+ * 数据权限信息参数
+ */
+export interface permForm {
+  /**
+   * 角色名称
+   */
+  roleName?: string;
+  /**
+   * 菜单名称
+   */
+  menuName?: string;
+  /**
+   * 权限范围
+   */
+  dataScope?: string;
+}
 /**
  * 角色分页对象
  */

src/views/system/role/index.vue

@@ -9,11 +9,12 @@ import {
   updateRoleMenus,
   changeRoleStatus,
   treeSelect,
-  roleMenuTreeSelect
+  roleMenuTreeSelect,
+  getRole, roleMenuTreeSelectMC
 } from "@/api/role";
 import { getMenuOptions } from "@/api/menu";
-
-import { RolePageVO, RoleForm, RoleQuery } from "@/api/role/types";
+import {handleTree} from '@/utils/common'
+import { RolePageVO, RoleForm, RoleQuery,permForm } from "@/api/role/types";
 import { commonField } from "@/utils/commonField";
 defineOptions({
   name: "Role",
@@ -27,6 +28,7 @@ const hasExportPerm = ref(['sys:role:export']);
 
 const queryFormRef = ref(ElForm);
 const roleFormRef = ref(ElForm);
+const formRef = ref(ElForm);
 const menuRef = ref(ElTree);
 
 const loading = ref(false);
@@ -39,6 +41,11 @@ const defaultProps = reactive({
   children: 'children',
   label: 'label'
 })
+const form = reactive<permForm>({
+  roleName: '',
+  menuName: '',
+  dataScope: '',
+})
 const queryParams = reactive<RoleQuery>({
   pageNum: 1,
   pageSize: 10,
@@ -53,6 +60,28 @@ const statusOptions = reactive([
     dictValue: '0'
   }
 ])
+const dataScopeOptions = reactive([
+  {
+    value: '1',
+    label: '全部数据权限'
+  },
+  {
+    value: '2',
+    label: '自定数据权限'
+  },
+  {
+    value: '3',
+    label: '本部门数据权限'
+  },
+  {
+    value: '4',
+    label: '本部门及以下数据权限'
+  },
+  {
+    value: '5',
+    label: '仅本人数据权限'
+  }
+])
 const roleList = ref<RolePageVO[]>();
 
 const dialog = reactive({
@@ -84,7 +113,7 @@ const rules = reactive({
   menuIds: [{ required: true, validator: validatePass, trigger: ["blur","change"]  }]
 });
 
-const menuDialogVisible = ref(false);
+const openDataScope = ref(false);
 
 const menuList = ref<OptionType[]>([]);
 
@@ -280,32 +309,16 @@ function handleDelete(row?: any) {
 }
 
 /** 打开分配菜单弹窗 */
-function openMenuDialog(row: RolePageVO) {
-  const roleId = row.id;
-  if (roleId) {
-    checkedRole = {
-      id: roleId,
-      name: row.name,
-    };
-    menuDialogVisible.value = true;
-    loading.value = true;
-
-    // 获取所有的菜单
-    getMenuOptions().then((response) => {
-      menuList.value = response.data;
-      // 回显角色已拥有的菜单
-      getRoleMenuIds(roleId)
-        .then(({ data }) => {
-          const checkedMenuIds = data;
-          checkedMenuIds.forEach((menuId) =>
-            menuRef.value.setChecked(menuId, true, false)
-          );
-        })
-        .finally(() => {
-          loading.value = false;
-        });
-    });
-  }
+function handleMenu(row: RolePageVO) {
+  const roleId = row.businessId;
+  // 查询菜单列表树形显示
+  roleMenuTreeSelectMC(roleId).then(res => {
+    menuList.value = handleTree(res.data, 'businessId','','','')
+    getRole(roleId).then(response => {
+      Object.assign(form, response.data);
+      openDataScope.value = true
+    })
+  })
 }
 
 /** 角色分配菜单保存提交 */
@@ -320,7 +333,7 @@ function handleRoleMenuSubmit() {
     updateRoleMenus(roleId, checkedMenuIds)
       .then(() => {
         ElMessage.success("分配权限成功");
-        menuDialogVisible.value = false;
+        openDataScope.value = false;
         resetQuery();
       })
       .finally(() => {
@@ -446,13 +459,14 @@ onMounted(() => {
               :size="commonField.size"
               @click="openDialog(scope.row.businessId)"
             >{{ commonField.updateName }}</el-button>
+            <!--              //数据权限-->
             <el-button
               v-hasPermi="hasDelPerm"
               :class="commonField.delClass"
               :type="commonField.typeParent"
               link
               :size="commonField.size"
-              @click="openMenuDialog(scope.row)"
+              @click="handleMenu(scope.row)"
             >{{ commonField.dataPower }}</el-button>
             <!--              //删除-->
             <el-button
@@ -530,30 +544,76 @@ onMounted(() => {
 
     <!-- 分配菜单弹窗  -->
     <el-dialog
-      v-model="menuDialogVisible"
-      :title="'【' + checkedRole.name + '】权限分配'"
+      v-model="openDataScope"
+      title="数据权限信息"
       width="800px"
+      @close="handleQuery"
     >
-      <el-scrollbar v-loading="loading" max-height="600px">
-        <el-tree
-          ref="menuRef"
-          node-key="value"
-          show-checkbox
-          :data="menuList"
-          :default-expand-all="true"
-        >
-          <template #default="{ data }">
-            {{ data.label }}
-          </template>
-        </el-tree>
-      </el-scrollbar>
-
+      <el-row>
+        <el-col :span="12">
+          <el-form ref="formRef" :model="form" label-width="70px">
+            <el-form-item label="角色名称">
+              <el-input v-model.trim="form.roleName" placeholder="请输入角色名称" show-word-limit :maxlength="30" :disabled="true" />
+            </el-form-item>
+            <el-table
+              highlight-current-row
+              :data="menuList"
+              row-key="businessId"
+              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+              default-expand-all
+              max-height="400px"
+            >
+              <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="230px" />
+              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                <template #default="scope">
+                  <el-button
+                    size="mini"
+                    type="text"
+                    @click="handleDataScope(scope.row)"
+                  >修改</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-form>
+        </el-col>
+        <el-col :span="12">
+          <el-form :model="form" label-width="80px">
+            <el-form-item label="菜单名称" prop="roleName">
+              <el-input v-model="form.menuName" placeholder="未选择菜单名称" disabled style="width: 300px" />
+            </el-form-item>
+            <el-form-item label="权限范围" style="width: 300px">
+              <el-select v-model="form.dataScope" style="width: 300px">
+                <el-option
+                  v-for="item in dataScopeOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item v-show="form.dataScope == 2" label="数据权限">
+              <el-tree
+                ref="dept"
+                class="tree-border"
+                :data="deptOptions"
+                show-checkbox
+                node-key="id"
+                check-strictly
+                empty-text="加载中，请稍后"
+                :props="defaultProps"
+                :default-expanded-keys="customSizeTree"
+                @check-change="handleDeptCheckChange"
+              />
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-row>
       <template #footer>
         <div class="dialog-footer">
           <el-button type="primary" @click="handleRoleMenuSubmit"
             >确 定</el-button
           >
-          <el-button @click="menuDialogVisible = false">取 消</el-button>
+          <el-button @click="openDataScope = false">取 消</el-button>
         </div>
       </template>
     </el-dialog>