feat:角色权限

sub-government-affairs-service/src/apis/system/auth.js

@@ -0,0 +1,49 @@
+import request from '@/utils/axios';
+
+/**
+ * @Title: 查询角色已授权用户列表
+ */
+export function AuthUserList(params = {}) {
+  return request('/system/role/authUser/allocatedList', {
+    method: 'GET',
+    params,
+  });
+}
+
+/**
+ * @Title: 查询角色未授权用户列表
+ */
+export function UnAuthUserList(params = {}) {
+  return request('/system/role/authUser/unallocatedList', {
+    method: 'GET',
+    params,
+  });
+}
+
+// 取消用户授权角色
+export function AuthUserCancel(data) {
+  return request('/system/role/authUser/cancel', {
+    method: 'PUT',
+    data,
+  });
+}
+
+/**
+ * @Title: 批量取消用户授权角色
+ */
+export function AuthUserCancelAll(params = {}) {
+  return request('/system/role/authUser/cancelAll', {
+    method: 'PUT',
+    params,
+  });
+}
+
+/**
+ * @Title: 授权用户选择
+ */
+export function AuthUserSelectAll(params = {}) {
+  return request('/system/role/authUser/selectAll', {
+    method: 'PUT',
+    params,
+  });
+}

sub-government-affairs-service/src/apis/system/role.js

@@ -0,0 +1,78 @@
+import request from '@/utils/axios';
+
+/**
+ * @Title: 列表
+ */
+export function GetEntityList(params = {}) {
+  return request('/system/role/list', {
+    method: 'GET',
+    params,
+  });
+}
+
+/**
+ * @Title: 新增
+ */
+export function AddEntity(data = {}) {
+  return request('/system/role', {
+    method: 'POST',
+    data,
+  });
+}
+
+/**
+ * @Title: 修改
+ */
+export function UpdateEntity(data = {}) {
+  return request('/system/role', {
+    method: 'PUT',
+    data,
+  });
+}
+
+/**
+ * @Title: 删除
+ */
+export function DeleteEntity(params = {}) {
+  return request(`/system/role/${params.id}`, {
+    method: 'DELETE',
+  });
+}
+
+/**
+ * @Title: 角色状态修改
+ */
+export function UpdateStatus(data = {}) {
+  return request('/system/role/changeStatus', {
+    method: 'PUT',
+    data,
+  });
+}
+
+/**
+ * @Title: 查询角色详细
+ */
+export function GetRole(roleId) {
+  return request(`/system/role/${roleId}`, {
+    method: 'GET',
+  });
+}
+
+/**
+ * @Title: 根据角色ID查询部门树结构
+ */
+export function GetRoleDept(roleId) {
+  return request(`/system/role/deptTree/${roleId}`, {
+    method: 'GET',
+  });
+}
+
+/**
+ * @Title: 角色菜单权限
+ */
+export function UpdateDataScope(data = {}) {
+  return request('/system/role/dataScope', {
+    method: 'PUT',
+    data,
+  });
+}

sub-government-affairs-service/src/apis/system/user.js

@@ -0,0 +1 @@
+import request from '@/utils/axios';

sub-government-affairs-service/src/router/modules/system.js

@@ -20,18 +20,18 @@ export default [
         name: 'system-dict',
         meta: { title: '字典管理', icon: 'Document' },
       },
+      {
+        path: '/sub-government-affairs-service/system-role',
+        component: () => import('@/views/system/role/index.vue'),
+        name: 'system-role',
+        meta: { title: '角色管理', icon: 'Document' },
+      },
       {
         path: '/sub-government-affairs-service/system-menu',
         component: () => import('@/views/system/menu/index.vue'),
         name: 'system-menu',
         meta: { title: '菜单管理', icon: 'Document' },
       },
-      // {
-      //   path: '/sub-government-affairs-service/system-dept',
-      //   component: () => import('@/views/system/dept/index.vue'),
-      //   name: 'system-dept',
-      //   meta: { title: '部门管理', icon: 'Document' },
-      // },
     ],
   },
 ];

sub-government-affairs-service/src/views/system/role/index.vue

@@ -0,0 +1,566 @@
+<template>
+  <div class="custom-page">
+    <avue-crud
+      ref="crudRef"
+      v-model:search="state.query"
+      v-model:page="state.pageData"
+      :table-loading="state.loading"
+      :data="state.data"
+      :option="state.options"
+      @refresh-change="refreshChange"
+      @search-reset="searchChange"
+      @search-change="searchChange"
+      @selection-change="selectionChange"
+      @current-change="currentChange"
+      @size-change="sizeChange"
+      @row-save="rowSave"
+      @row-update="rowUpdate"
+      @row-del="rowDel"
+    >
+      <template #status="{ row }">
+        <el-tag v-if="row.status == 0" type="success">启用</el-tag>
+        <el-tag v-if="row.status == 1" type="danger">禁用</el-tag>
+      </template>
+
+      <template #menuCheckStrictly-form="{ column, value, type }">
+        <el-checkbox v-model="state.menuExpand" @change="onCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
+        <el-checkbox v-model="state.menuNodeAll" @change="onCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
+        <el-checkbox v-model="menuCheckStrictly" @change="onCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
+        <el-tree
+          ref="menuRef"
+          class="tree-border"
+          show-checkbox
+          node-key="id"
+          empty-text="加载中，请稍候"
+          :data="state.menuOptions"
+          :check-strictly="!menuCheckStrictly"
+          :props="state.defaultProps"
+        ></el-tree>
+      </template>
+
+      <template #menu="scope">
+        <custom-table-operate :show="scope.row.roleId !== 1" :actions="state.options.actions" :data="scope" />
+      </template>
+    </avue-crud>
+
+    <el-dialog
+      v-model="state.visible"
+      draggable
+      append-to-body
+      title="分配数据权限"
+      class="avue-dialog"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      @close="state.visible = false"
+    >
+      <avue-form ref="formRef" v-model="state.form" :option="state.formOptions">
+        <template #deptCheckStrictly="{ column, value, type }">
+          <el-checkbox v-model="state.deptExpand" @change="onCheckedTreeExpand($event, 'dept')">展开/折叠</el-checkbox>
+          <el-checkbox v-model="state.deptNodeAll" @change="onCheckedTreeNodeAll($event, 'dept')">全选/全不选</el-checkbox>
+          <el-checkbox v-model="state.form.deptCheckStrictly" @change="onCheckedTreeConnect($event, 'dept')">父子联动</el-checkbox>
+          <el-tree
+            ref="deptRef"
+            class="tree-border"
+            show-checkbox
+            node-key="id"
+            empty-text="加载中，请稍候"
+            :data="state.deptOptions"
+            :check-strictly="!state.form.deptCheckStrictly"
+            :props="state.defaultProps"
+          ></el-tree>
+        </template>
+      </avue-form>
+      <div class="avue-dialog__footer avue-dialog__footer--right">
+        <el-button type="primary" icon="CircleCheck" @click="rowScopeSave">确 定</el-button>
+        <el-button icon="CircleClose" @click="state.visible = false">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import { computed, onMounted, reactive, ref, nextTick, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { useApp } from '@/hooks';
+import { CRUD_OPTIONS } from '@/config';
+import { isEmpty } from '@/utils';
+import { GetEntityList, AddEntity, UpdateEntity, DeleteEntity, UpdateStatus, GetRoleDept, UpdateDataScope } from '@/apis/system/role';
+import { GetMenuTree, GetRoleMenu } from '@/apis/system/menu';
+
+const app = useApp();
+const router = useRouter();
+const crudRef = ref(null);
+const menuRef = ref(null);
+const formRef = ref(null);
+const deptRef = ref(null);
+const state = reactive({
+  loading: false,
+  query: {
+    current: 1,
+    size: 10,
+  },
+  selection: [],
+  options: {
+    ...CRUD_OPTIONS,
+    selection: false,
+    column: [
+      {
+        label: '角色名称',
+        prop: 'roleName',
+        search: true,
+        rules: {
+          required: true,
+          message: '请输入',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '权限字符',
+        prop: 'roleKey',
+        rules: {
+          required: true,
+          message: '请输入',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '状态',
+        prop: 'status',
+        type: 'select',
+        search: true,
+        dicData: [
+          {
+            label: '启用',
+            value: '0',
+          },
+          {
+            label: '禁用',
+            value: '1',
+          },
+        ],
+        value: '0',
+        rules: {
+          required: true,
+          message: '请选择',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '排序',
+        prop: 'roleSort',
+        type: 'number',
+        rules: {
+          required: true,
+          message: '请输入',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '菜单权限',
+        prop: 'menuCheckStrictly',
+        hide: true,
+        formSlot: true,
+        viewDisplay: false,
+        span: 24,
+      },
+      {
+        label: '备注',
+        prop: 'remark',
+        type: 'textarea',
+        span: 24,
+        rows: 4,
+        overHidden: true,
+        width: 200,
+      },
+    ],
+    actions: [
+      {
+        name: '查看',
+        icon: 'view',
+        event: ({ row }) => rowView(row),
+      },
+      {
+        name: '编辑',
+        icon: 'edit',
+        event: ({ row }) => rowEdit(row),
+      },
+      {
+        type: 'primary',
+        name: ({ row }) => {
+          return row.status == 0 ? '禁用' : '启用';
+        },
+        icon: ({ row }) => {
+          return row.status == 0 ? 'turnOff' : 'open';
+        },
+        event: ({ row }) => rowStatus(row),
+      },
+      {
+        name: '数据权限',
+        icon: 'lock',
+        event: ({ row }) => rowScope(row),
+      },
+      {
+        name: '分配用户',
+        icon: 'user',
+        event: ({ row }) => rowUser(row),
+      },
+      {
+        type: 'danger',
+        name: '删除',
+        icon: 'delete',
+        event: ({ row }) => rowDel(row),
+      },
+    ],
+  },
+  pageData: {
+    total: 0,
+    currentPage: 1,
+    pageSize: 10,
+  },
+  data: [],
+  menuExpand: false,
+  menuNodeAll: false,
+  menuOptions: [],
+  deptExpand: true,
+  deptNodeAll: false,
+  deptOptions: [],
+  defaultProps: {
+    children: 'children',
+    label: 'label',
+  },
+  visible: false,
+  form: {},
+  formOptions: {
+    column: [
+      {
+        label: '角色名称',
+        prop: 'roleName',
+        disabled: true,
+      },
+      {
+        label: '权限字符',
+        prop: 'roleKey',
+        disabled: true,
+      },
+      {
+        label: '权限字符',
+        prop: 'dataScope',
+        type: 'select',
+        dicData: [
+          {
+            value: '1',
+            label: '全部数据权限',
+          },
+          {
+            value: '2',
+            label: '自定数据权限',
+          },
+          {
+            value: '3',
+            label: '本部门数据权限',
+          },
+          {
+            value: '4',
+            label: '本部门及以下数据权限',
+          },
+          {
+            value: '5',
+            label: '仅本人数据权限',
+          },
+        ],
+      },
+      {
+        label: '数据权限',
+        prop: 'deptCheckStrictly',
+        span: 24,
+      },
+    ],
+    submitBtn: false,
+    emptyBtn: false,
+  },
+});
+const menuCheckStrictly = computed(() => crudRef.value.tableForm.menuCheckStrictly);
+
+// 加载
+const loadData = () => {
+  state.loading = true;
+  GetEntityList(state.query)
+    .then((res) => {
+      if (res.code === 200) {
+        const { current, size, total, records } = res.data;
+        state.data = records;
+        state.pageData = {
+          currentPage: current || 1,
+          pageSize: size || 10,
+          total: total,
+        };
+      }
+    })
+    .catch((err) => {
+      app.$message.error(err.msg);
+      state.data = [];
+    })
+    .finally(() => {
+      state.loading = false;
+    });
+};
+
+loadData();
+
+const getMenu = () => {
+  GetMenuTree().then((res) => {
+    if (res.code === 200) {
+      state.menuOptions = res.data;
+    }
+  });
+};
+
+onMounted(() => {
+  getMenu();
+});
+
+// 页数
+const currentChange = (current) => {
+  state.query.current = current;
+  loadData();
+};
+
+// 条数
+const sizeChange = (size) => {
+  state.query.size = size;
+  loadData();
+};
+
+// 搜索
+const searchChange = (params, done) => {
+  if (done) done();
+  state.query = params;
+  state.query.current = 1;
+  loadData();
+};
+
+// 刷新
+const refreshChange = () => {
+  loadData();
+  app.$message.success('刷新成功');
+};
+
+// 选择
+const selectionChange = (rows) => {
+  state.selection = rows;
+};
+
+// 查看
+const rowView = (row) => {
+  crudRef.value.rowView(row);
+};
+
+// 启用、禁用
+const rowStatus = (row) => {
+  let status = row.status == 1 ? 0 : 1;
+  UpdateStatus({ roleId: row.roleId, status })
+    .then((res) => {
+      if (res.code === 200) {
+        app.$message.success('状态更改成功！');
+        loadData();
+      }
+    })
+    .catch((err) => {
+      app.$message.error(err.msg);
+    });
+};
+
+// 树权限（展开/折叠）
+const onCheckedTreeExpand = (value, type) => {
+  if (type == 'menu') {
+    const treeList = state.menuOptions;
+    for (let i = 0; i < treeList.length; i++) {
+      menuRef.value.store.nodesMap[treeList[i].id].expanded = value;
+    }
+  } else if (type == 'dept') {
+    const treeList = state.deptOptions;
+    for (let i = 0; i < treeList.length; i++) {
+      deptRef.value.store.nodesMap[treeList[i].id].expanded = value;
+    }
+  }
+};
+
+// 树权限（全选/全不选）
+const onCheckedTreeNodeAll = (value, type) => {
+  if (type == 'menu') {
+    menuRef.value.setCheckedNodes(value ? state.menuOptions : []);
+  } else if (type == 'dept') {
+    deptRef.value.setCheckedNodes(value ? state.deptOptions : []);
+  }
+};
+
+// 树权限（父子联动）
+const onCheckedTreeConnect = (value, type) => {
+  if (type == 'menu') {
+    crudRef.value.tableForm.menuCheckStrictly = value ? true : false;
+  } else if (type == 'dept') {
+    state.form.deptCheckStrictly = value ? true : false;
+  }
+};
+
+// 所有菜单节点数据
+const getMenuAllCheckedKeys = () => {
+  let checkedKeys = menuRef.value.getCheckedKeys();
+  let halfCheckedKeys = menuRef.value.getHalfCheckedKeys();
+  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
+  return checkedKeys;
+};
+
+// 所有部门节点数据
+const getDeptAllCheckedKeys = () => {
+  let checkedKeys = deptRef.value.getCheckedKeys();
+  let halfCheckedKeys = deptRef.value.getHalfCheckedKeys();
+  checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
+  return checkedKeys;
+};
+
+// 根据角色ID查询菜单树结构
+const getRoleMenuTreeselect = (roleId) => {
+  return GetRoleMenu(roleId).then((res) => {
+    state.menuOptions = res.menus;
+    return res;
+  });
+};
+
+// 根据角色ID查询部门树结构
+const getRoleDeptTreeselect = (roleId) => {
+  return GetRoleDept(roleId).then((res) => {
+    state.deptOptions = res.depts;
+    return res;
+  });
+};
+
+// 权限范围
+watch(
+  () => state.form.dataScope,
+  (val) => {
+    state.formOptions.column[3].display = val === '2' ? true : false;
+  }
+);
+
+// 数据权限
+const rowScope = async (row) => {
+  const roleDept = getRoleDeptTreeselect(row.roleId);
+  state.form = { ...row };
+  state.visible = true;
+  nextTick(() => {
+    roleDept.then((res) => {
+      deptRef.value && deptRef.value.setCheckedKeys(res.checkedKeys);
+    });
+  });
+};
+
+const rowScopeSave = () => {
+  if (state.form?.roleId) {
+    state.form.deptIds = getDeptAllCheckedKeys();
+    UpdateDataScope(state.form)
+      .then((res) => {
+        if (res.code === 200) {
+          app.$message.success('更新成功！');
+          state.visible = false;
+          loadData();
+        }
+      })
+      .catch((err) => {
+        app.$message.error(err.msg);
+      });
+  }
+};
+
+// 分配用户
+const rowUser = (row) => {
+  // router.push({
+  //   path: '/sub-government-affairs-service/system-auth-user',
+  //   query: { id: row.roleId },
+  // });
+};
+
+// 新增
+const rowSave = (row, done, loading) => {
+  row.menuIds = getMenuAllCheckedKeys();
+  AddEntity(row)
+    .then((res) => {
+      if (res.code === 200) {
+        app.$message.success('添加成功！');
+        done();
+        loadData();
+      }
+    })
+    .catch((err) => {
+      app.$message.error(err.msg);
+    })
+    .finally(() => {
+      loading();
+    });
+};
+
+// 编辑
+const rowEdit = (row) => {
+  const roleMenu = getRoleMenuTreeselect(row.roleId);
+  nextTick(() => {
+    roleMenu.then((res) => {
+      const checkedKeys = res.checkedKeys;
+      checkedKeys.forEach((v) => {
+        nextTick(() => {
+          menuRef.value.setChecked(v, true, false);
+        });
+      });
+    });
+  });
+  crudRef.value.rowEdit(row);
+};
+const rowUpdate = (row, index, done, loading) => {
+  row.menuIds = getMenuAllCheckedKeys();
+  UpdateEntity(row)
+    .then((res) => {
+      if (res.code === 200) {
+        app.$message.success('更新成功！');
+        done();
+        loadData();
+      }
+    })
+    .catch((err) => {
+      app.$message.error(err.msg);
+    })
+    .finally(() => {
+      loading();
+    });
+};
+
+// 删除
+const rowDel = (row, index, done) => {
+  if (isEmpty(row)) return;
+  app
+    .$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    .then(() => {
+      DeleteEntity({ id: row.roleId })
+        .then((res) => {
+          if (res.code === 200) {
+            app.$message.success('删除成功！');
+            loadData();
+          }
+        })
+        .catch((err) => {
+          app.$message.error(err.msg);
+        });
+    })
+    .catch(() => {});
+};
+</script>
+<style lang="scss" scoped>
+.tree-border {
+  margin-top: 5px;
+  border: 1px solid #e5e6e7;
+  min-height: 200px;
+  background: #ffffff none;
+  border-radius: 4px;
+}
+</style>