@pubinfo/module-rbac 2.0.0-beta.3

package/src/views/region/enum.ts

@@ -0,0 +1,24 @@
+export enum ACTION {
+  /** 新增 */
+  ADD = '新增',
+  /** 编辑 */
+  EDIT = '编辑',
+  /** 删除 */
+  REMOVE = '删除',
+  /** 新建下级 */
+  ADDNEXT = '新建下级',
+}
+
+export enum RANGE {
+  /** 省 */
+  PROVINCE = '1',
+  /** 市 */
+  CITY = '2',
+  /** 区/县 */
+  COUNTY = '3',
+}
+export const rangeOptions = [
+  { label: '省', value: RANGE.PROVINCE },
+  { label: '市', value: RANGE.CITY },
+  { label: '区/县', value: RANGE.COUNTY },
+];

package/src/views/region/index.vue

@@ -0,0 +1,246 @@
+<script setup lang="tsx">
+import type { ProColumns } from '@pubinfo/pro-components';
+import type { Key } from 'ant-design-vue/es/vc-table/interface';
+import { getRegionDeleteRegionByCode, getRegionGetListByParentId } from '@/api/modules/assist';
+import { ProTable } from '@pubinfo/pro-components';
+import { message, Modal } from 'ant-design-vue';
+import { cloneDeep } from 'lodash-es';
+import DrawerRegion from './components/drawerRegion.vue';
+import { ACTION } from './enum';
+
+defineOptions({
+  name: 'RegionManage',
+});
+const { auth } = useAuth();
+
+type TreeNode = API.PubRegion & {
+  children?: TreeNode[]
+};
+const query = ref<API.getRegionGetListByParentIdParams>({ parentId: '' });
+
+const data: Ref<TreeNode[]> = ref([]);
+const chilData = ref<TreeNode>({});
+
+const tableRef = ref<typeof ProTable>();
+const drawerRegionRef = ref<InstanceType<typeof DrawerRegion>>();
+
+// 刷新数据展开未重置的问题
+const expandedRowKeys = ref<Key[]>([]);
+function expandedRowsChange(expandedRows: Key[]): void {
+  expandedRowKeys.value = expandedRows;
+}
+
+const columns: ProColumns<TreeNode> = [
+  {
+    minWidth: 240,
+    title: '区域名称',
+    dataIndex: 'name',
+    ellipsis: true,
+  },
+  {
+    minWidth: 100,
+    title: '区域范围',
+    dataIndex: 'type',
+  },
+  {
+    minWidth: 140,
+    title: '行政区划编码',
+    dataIndex: 'code',
+    ellipsis: true,
+  },
+  {
+    minWidth: 100,
+    title: '区域编码',
+    dataIndex: 'regionCode',
+  },
+  {
+    minWidth: 100,
+    title: '显示顺序',
+    dataIndex: 'sort',
+  },
+  {
+    hideInSearch: true,
+    title: '操作',
+    dataIndex: 'action',
+    width: 240,
+    fixed: 'right',
+    hideInTable() {
+      return !auth([
+        'region_add_child',
+        'region_edit',
+        'region_remove',
+      ]);
+    },
+  },
+];
+
+function onAction(key: string, record?: TreeNode): void {
+  switch (key) {
+    case ACTION.ADDNEXT:
+      query.value.parentId = record!.id;
+      chilData.value = record!;
+      drawerRegionRef.value?.open(key, record);
+      break;
+    case ACTION.ADD:
+      query.value.parentId = '';
+      chilData.value = {};
+      drawerRegionRef.value?.open(key);
+      break;
+    case ACTION.EDIT:
+      query.value.parentId = record!.parentId;
+      chilData.value = getNodeById(data.value, query.value.parentId!);
+      drawerRegionRef.value?.open(key, record);
+      break;
+    case ACTION.REMOVE:
+      query.value.parentId = record!.parentId;
+      chilData.value = getNodeById(data.value, query.value.parentId!);
+      Modal.confirm({
+        title: '删除',
+        content: '确定要删除该区域吗？',
+        onOk() {
+          getRegionDeleteRegionByCode({ code: record!.code! })
+            .then((res: API.ResponseDataBoolean) => {
+              if (res.success) {
+                message.success('删除成功');
+                getRegionData();
+              }
+            });
+        },
+      });
+      break;
+  }
+}
+
+/* 获取表格数据 */
+async function request() {
+  const res = await getRegionGetListByParentId({
+    ...query.value,
+  });
+  if (Object.keys(chilData.value).length > 0) {
+    const length = res.data!.length;
+    if (length > 0) {
+      chilData.value.children = res.data?.map((e: API.PubRegion) => {
+        return {
+          ...e,
+          children: e.isLeaf ? undefined : [],
+        };
+      }) as TreeNode[];
+    }
+    else {
+      chilData.value.children = undefined;
+    }
+  }
+  else {
+    expandedRowKeys.value = [];
+    data.value = res.data?.map((e: API.PubRegion) => {
+      return {
+        ...e,
+        children: e.isLeaf ? undefined : [],
+      };
+    }) as TreeNode[];
+  }
+  return {
+    success: true,
+    data: data.value,
+  };
+}
+
+/* 表格中父节点展开 */
+function expand(flag: boolean, data: TreeNode) {
+  const dataTemp = cloneDeep(data);
+  if (flag) {
+    if (dataTemp.children?.length === 0) {
+      query.value.parentId = data.id;
+      chilData.value = data;
+      tableRef.value?.fetch();
+    }
+  }
+}
+
+/* 新建或者编辑后刷新列表 */
+function getRegionData() {
+  tableRef.value?.reload();
+}
+
+/* 获取某节点的信息 */
+function getNodeById(nodes: TreeNode[], id: string): any {
+  for (const node of nodes) {
+    if (node.id === id) {
+      return node;
+    }
+    if (node.children) {
+      const foundNode = getNodeById(node.children, id);
+      if (foundNode) {
+        return foundNode;
+      }
+    }
+  }
+  return undefined;
+}
+</script>
+
+<template>
+  <div
+    w-full
+    h-full
+    py-10px
+    px-10px
+  >
+    <ProTable
+      ref="tableRef"
+      row-key="id"
+      :search="false"
+      :request="request"
+      :columns="columns"
+      :data-source="data"
+      :pagination="false"
+      auto-height
+      :expanded-row-keys="expandedRowKeys"
+      :scroll="{ x: 1100 }"
+      @expanded-rows-change="expandedRowsChange"
+      @expand="expand"
+    >
+      <template #toolbar>
+        <a-button v-auth="'region_add'" type="primary" @click="onAction(ACTION.ADD)">
+          <PlusCircleOutlined />
+          {{ ACTION.ADD }}
+        </a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'action'">
+          <a-space>
+            <a
+              v-auth="'region_add_child'"
+              class="flex items-center"
+              @click="onAction(ACTION.ADDNEXT, record)"
+            >
+              <PubinfoIcon name="add-child" class="text-base" />
+              <span class="ml-4px">{{ ACTION.ADDNEXT }}</span>
+            </a>
+            <a
+              v-auth="'region_edit'"
+              class="flex items-center"
+              @click="onAction(ACTION.EDIT, record)"
+            >
+              <PubinfoIcon name="edit" class="text-base" />
+              <span class="ml-4px">{{ ACTION.EDIT }}</span>
+            </a>
+            <span
+              v-auth="'region_remove'"
+              class="flex items-center text-red-500 hover:cursor-pointer hover:opacity-80"
+              @click="onAction(ACTION.REMOVE, record)"
+            >
+              <PubinfoIcon name="remove" class="text-base" />
+              <span class="ml-4px">{{ ACTION.REMOVE }}</span>
+            </span>
+          </a-space>
+        </template>
+      </template>
+    </ProTable>
+    <DrawerRegion
+      ref="drawerRegionRef"
+      :tree-data="data"
+      @submit="getRegionData()"
+    />
+  </div>
+</template>

package/src/views/resource/components/ResourceEdit.vue

@@ -0,0 +1,209 @@
+<script setup lang="ts">
+import type { Rule } from 'ant-design-vue/es/form';
+import type { FormExpose } from 'ant-design-vue/es/form/Form';
+import type { AddForm, EditForm, Form, TreeNode } from '../interface';
+import { getRbacResourceInfo, postRbacResourceAddResource, postRbacResourceResourceUpdate } from '@/api/modules/rbac';
+import { DATA_PERMISSION_TYPE, dataPermissionOptions } from '@/views/data-permission/enum';
+import { useToggle } from '@vueuse/core';
+import { message } from 'ant-design-vue';
+import { cloneDeep } from 'lodash-es';
+import { ACTION, RESOURCE_TYPE, resourceOptions } from '../enum';
+
+defineOptions({
+  name: 'ResourceEdit',
+});
+
+const props = defineProps<{ dataSource: TreeNode[] }>();
+const emit = defineEmits(['submit']);
+
+const [open, setOpen] = useToggle(false);
+const formRef = ref<FormExpose>();
+const form = ref<Partial<Form>>({});
+const state = reactive<{
+  title: string
+  record: TreeNode
+  initData: Partial<Form>
+}>({
+  title: '',
+  record: {},
+  initData: {
+    type: RESOURCE_TYPE.APP,
+    sort: 0,
+    enable: true,
+    enableDataPermission: false,
+    dataPermissionType: DATA_PERMISSION_TYPE.ALL,
+  },
+});
+
+const rules: Record<string, Rule[]> = {
+  name: [{ required: true, message: '请输入资源名称', trigger: 'blur' }],
+  type: [{ required: true, message: '请选择资源类型', trigger: 'change' }],
+  code: [{ required: true, message: '请输入资源编码', trigger: 'blur' }],
+  sort: [{ type: 'number', required: true, message: '请输入排序', trigger: 'blur' }],
+  enable: [{ type: 'boolean', required: true, message: '请选择是否启用', trigger: 'change' }],
+};
+
+const parentNode = computed(() => {
+  return recursiveTreeFind(props.dataSource, node => node.id === form.value.parentId);
+});
+function recursiveTreeFind<T extends { children?: T[] }>(tree: T[], fn: (node: T) => boolean) {
+  const list = [...tree];
+  for (const node of list) {
+    if (fn(node)) {
+      return node;
+    }
+    if (node.children) {
+      list.push(...node.children);
+    }
+  }
+  return null;
+}
+
+const resourceComputedOptions = computed(() => {
+  switch (parentNode.value?.type) {
+    case RESOURCE_TYPE.APP:
+    case RESOURCE_TYPE.INDEX:
+      return resourceOptions.filter(node => node.value !== RESOURCE_TYPE.APP);
+
+    case RESOURCE_TYPE.MENU:
+    case RESOURCE_TYPE.NON_MENU:
+      return resourceOptions.filter(node => (node.value === RESOURCE_TYPE.BUTTON || node.value === RESOURCE_TYPE.NON_MENU));
+
+    case RESOURCE_TYPE.BUTTON:
+      return [];
+
+    default:
+      return resourceOptions.filter(node => node.value === RESOURCE_TYPE.APP);
+  }
+});
+
+const dataPermissionVisible = computed(() => {
+  return form.value.type === RESOURCE_TYPE.BUTTON || form.value.type === RESOURCE_TYPE.MENU || form.value.type === RESOURCE_TYPE.NON_MENU;
+});
+
+async function onOpen(key: ACTION, record?: Form) {
+  state.title = key;
+  form.value = cloneDeep(state.initData);
+  setOpen(true);
+
+  if (key === ACTION.ADD_CHILD) {
+    form.value.parentId = record?.id as string;
+    form.value.type = resourceComputedOptions.value[0].value;
+  }
+
+  if (key === ACTION.EDIT) {
+    const res = await getRbacResourceInfo({ id: record?.id as string });
+    if (res.success) {
+      form.value = res.data ?? {};
+    }
+  }
+}
+
+const [loading, setLoading] = useToggle(false);
+function onSubmit() {
+  formRef.value?.validate().then(() => {
+    const params = {
+      ...form.value,
+    };
+
+    // app, 目录等不参与数据权限筛选
+    if (!dataPermissionVisible.value) {
+      params.enableDataPermission = false;
+    }
+
+    const promise
+      = state.title === ACTION.EDIT
+        ? postRbacResourceResourceUpdate(params as EditForm)
+        : postRbacResourceAddResource({ parentId: '', ...params } as AddForm);
+    setLoading(true);
+    promise
+      .then((res) => {
+        if (res?.success) {
+          message.success(`${state.title}成功！`);
+          setOpen(false);
+          emit('submit');
+        }
+      })
+      .finally(() => setLoading(false));
+  });
+}
+
+defineExpose({
+  open: onOpen,
+});
+</script>
+
+<template>
+  <a-drawer
+    v-model:open="open"
+    :title="state.title"
+    placement="right"
+    :width="520"
+    destroy-on-close
+    :footer-style="{ textAlign: 'right' }"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="{ span: 6 }"
+    >
+      <a-form-item v-if="parentNode?.name" name="parentId">
+        <template #label>
+          <DatabaseOutlined class="mr-1" />
+          父资源
+        </template>
+        {{ parentNode?.name }}
+      </a-form-item>
+      <a-form-item label="资源名称" name="name">
+        <a-input v-model:value="form.name" placeholder="请输入资源名称" :maxlength="128" />
+      </a-form-item>
+      <a-form-item label="资源类型" name="type">
+        <a-radio-group
+          v-model:value="form.type"
+          :options="resourceComputedOptions"
+          option-type="button"
+          button-style="solid"
+        />
+      </a-form-item>
+      <a-form-item label="资源编码" name="code">
+        <a-input v-model:value="form.code" placeholder="请输入资源编码" :maxlength="50" />
+      </a-form-item>
+      <a-form-item label="显示顺序" name="sort">
+        <a-input-number v-model:value="form.sort" :max="999" />
+      </a-form-item>
+      <a-form-item label="是否启用" name="enable">
+        <a-switch v-model:checked="form.enable" />
+      </a-form-item>
+      <a-form-item label="权限标识" name="permissionCode">
+        <a-input v-model:value="form.permissionCode" placeholder="请输入权限标识" :maxlength="128" />
+      </a-form-item>
+      <a-form-item label="描述" name="description">
+        <a-textarea
+          v-model:value="form.description"
+          placeholder="请输入描述"
+          :maxlength="255"
+          :auto-size="{ minRows: 2 }"
+          show-count
+        />
+      </a-form-item>
+      <a-form-item v-if="dataPermissionVisible" label="启用数据权限" name="enableDataPermission">
+        <a-switch v-model:checked="form.enableDataPermission" />
+      </a-form-item>
+      <a-form-item v-if="dataPermissionVisible && form.enableDataPermission" label="数据权限规则" name="dataPermissionType">
+        <a-select v-model:value="form.dataPermissionType" :options="dataPermissionOptions" />
+      </a-form-item>
+    </a-form>
+
+    <template #footer>
+      <a-space>
+        <a-button @click="setOpen(false)">
+          取消
+        </a-button>
+        <a-button type="primary" :loading="loading" @click="onSubmit()">
+          提交
+        </a-button>
+      </a-space>
+    </template>
+  </a-drawer>
+</template>

package/src/views/resource/components/RoleRelation.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import type { ColumnsType } from 'ant-design-vue/es/table';
+import type { TreeNode } from '../interface';
+import { getRbacResourceGetRoleListByResourceId } from '@/api/modules/rbac';
+import { useToggle } from '@vueuse/core';
+import { useRequest } from 'alova/client';
+import { theme } from 'ant-design-vue';
+
+defineOptions({
+  name: 'RoleRelation',
+});
+
+const { token } = theme.useToken();
+
+const [open, setOpen] = useToggle(false);
+const { loading, data: dataSource, send } = useRequest(
+  params => getRbacResourceGetRoleListByResourceId(params, {
+    transform(data) {
+      return data.data ?? [];
+    },
+  }),
+  { immediate: false },
+);
+
+const columns: ColumnsType<API.PubRoleBo> = [
+  {
+    title: '角色名称',
+    dataIndex: 'name',
+    ellipsis: true,
+  },
+  {
+    title: '创建人',
+    dataIndex: 'createUserName',
+    width: 180,
+    ellipsis: true,
+  },
+];
+
+function onOpen(record: TreeNode) {
+  setOpen(true);
+  send({ id: record.id });
+  computeTableHeight();
+}
+
+const tableHeight = computed(() => {
+  return window.innerHeight
+    - 57 // Drawer header
+    - 48 // Drawer padding
+    - 55 // Table header
+    - 64; // Table pagination
+});
+
+function computeTableHeightHandler() {
+  nextTick(() => {
+    const tableBody = document.querySelector('.role-relation')?.querySelector<HTMLElement>('.ant-table-body');
+    if (tableBody) {
+      tableBody.style.height = `${tableHeight.value}px`;
+    }
+  });
+}
+
+function computeTableHeight() {
+  nextTick(computeTableHeightHandler);
+}
+
+defineExpose({
+  open: onOpen,
+});
+</script>
+
+<template>
+  <a-drawer
+    v-model:open="open"
+    title="分配查看"
+    placement="right"
+    :width="520"
+    :footer-style="{ textAlign: 'right' }"
+  >
+    <a-table
+      row-key="id"
+      :loading="loading"
+      :columns="columns"
+      :data-source="dataSource"
+      :scroll="{ y: `${tableHeight}px` }"
+      :pagination="{ defaultPageSize: 20, showSizeChanger: true }"
+      class="role-relation"
+    >
+      <template #bodyCell="{ column, text }">
+        <template v-if="column.dataIndex === 'name'">
+          <div class="w-full truncate space-x-2">
+            <a-avatar size="small" :style="{ backgroundColor: token.colorPrimary }">
+              {{ text[0] }}
+            </a-avatar>
+            <span>{{ text }}</span>
+          </div>
+        </template>
+      </template>
+    </a-table>
+  </a-drawer>
+</template>

package/src/views/resource/enum.ts

@@ -0,0 +1,35 @@
+/** 操作按钮 */
+export enum ACTION {
+  /** 分配查看 */
+  ROLE_RELATION = '分配查看',
+  /** 新建 */
+  ADD = '新建',
+  /** 新建下级 */
+  ADD_CHILD = '新建下级',
+  /** 修改 */
+  EDIT = '修改',
+  /** 删除 */
+  REMOVE = '删除',
+}
+
+/** 资源类型 */
+export enum RESOURCE_TYPE {
+  /** 应用 */
+  APP = '1',
+  /** 目录 */
+  INDEX = '2',
+  /** 菜单 */
+  MENU = '3',
+  /** 按钮 */
+  BUTTON = '4',
+  /** 非菜单页 */
+  NON_MENU = '5',
+}
+
+export const resourceOptions = [
+  { label: '应用', value: RESOURCE_TYPE.APP },
+  { label: '目录', value: RESOURCE_TYPE.INDEX },
+  { label: '菜单', value: RESOURCE_TYPE.MENU },
+  { label: '按钮', value: RESOURCE_TYPE.BUTTON },
+  { label: '非菜单页', value: RESOURCE_TYPE.NON_MENU },
+];