@pubinfo-nightly/module-rbac 2025.11.14

package/src/views/role/components/drawerRole.vue

@@ -0,0 +1,191 @@
+<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 { SelectedResourceInfo } from '@/components/ResourceSelector/hooks/useAppAndResource';
+import { useToggle } from '@vueuse/core';
+import { message } from 'ant-design-vue';
+import { getRbacRoleInfo, postRbacRoleAddRole, postRbacRoleRoleUpdate } from '@/api/modules/rbac';
+import useAppAndResource from '@/components/ResourceSelector/hooks/useAppAndResource';
+import ResourceSelector from '@/components/ResourceSelector/index.vue';
+import { ACTION, kjOptions } from '../enum';
+
+defineOptions({
+  name: 'DrawerRole',
+});
+
+const emit = defineEmits(['submit']);
+
+const {
+  resourceModelRef,
+  selectedResources,
+  updateTreeDataAndResourceMap,
+  setSelectedResources,
+  updateSelectedResources,
+  clearSelectedResources,
+  openResourceModel,
+} = useAppAndResource();
+
+const rules: Record<string, Rule[]> = {
+  name: [
+    { required: true, message: '请输入名称', trigger: 'change' },
+    { min: 2, max: 32, message: '角色名称长度不能少于2位，不能超过32位', trigger: 'change' },
+  ],
+  code: [
+    { required: true, message: '请输入编号', trigger: 'change' },
+    { min: 2, max: 32, message: '角色编码长度不能少于2位，不能超过32位', trigger: 'change' },
+  ],
+  viewScope: [{ required: true, message: '请选择可见范围', trigger: 'change' }],
+  resourceIds: [{ required: true, validator: resourceValidate, trigger: ['blur', 'change'] }],
+};
+
+function resourceValidate(_: unknown, value: string[]) {
+  if (value && value.length > 0) {
+    return Promise.resolve();
+  }
+  return Promise.reject(new Error('请选择所属资源'));
+}
+
+const state = reactive<{ title: string, type: string }>({
+  title: '',
+  type: '',
+});
+const [open, setOpen] = useToggle(false);
+const formRef = ref<FormExpose>();
+const form = ref<Partial<API.PubRoleAddDto>>({ enable: true });
+
+async function onOpen(key: ACTION, record?: API.PubRoleResourceBo) {
+  state.title = key;
+  if (key === ACTION.EDIT) {
+    const res = await getRbacRoleInfo({ id: record?.id as string });
+    if (res.success) {
+      form.value = res.data ?? {};
+
+      await updateTreeDataAndResourceMap('');
+      if (form.value.resourceIds) {
+        updateSelectedResources(form.value.resourceIds);
+      }
+    }
+  }
+  else {
+    form.value = {
+      enable: true,
+    };
+    clearSelectedResources();
+    await updateTreeDataAndResourceMap('');
+  }
+  setOpen(true);
+}
+
+const [loading, setLoading] = useToggle(false);
+
+function onSubmit() {
+  const request = state.title === ACTION.EDIT ? postRbacRoleRoleUpdate : postRbacRoleAddRole;
+  formRef.value?.validate().then(() => {
+    setLoading(true);
+    const params: any = { ...form.value };
+    request(params)
+      .then((res) => {
+        if (res.success) {
+          message.success(`${state.title}成功！`);
+          setOpen(false);
+          emit('submit');
+        }
+      })
+      .finally(() => setLoading(false));
+  });
+}
+function close() {
+  form.value = {
+    enable: true,
+  };
+  setOpen(false);
+}
+
+function chooseResource() {
+  if (form.value.resourceIds) {
+    openResourceModel(form.value.resourceIds);
+  }
+  else {
+    openResourceModel([]);
+  }
+}
+
+function onResourceSelected(data: SelectedResourceInfo[]) {
+  form.value.resourceIds = data.map(item => item.id);
+  setSelectedResources(data);
+}
+
+defineExpose({
+  open: onOpen,
+});
+</script>
+
+<template>
+  <a-drawer
+    v-model:open="open"
+    :title="`${state.title}角色`"
+    placement="right"
+    :width="600"
+    destroy-on-close
+    :footer-style="{ textAlign: 'right' }"
+    @close="close"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="{ span: 4 }"
+    >
+      <a-form-item label="角色名称" name="name">
+        <a-input v-model:value="form.name" :maxlength="32" />
+      </a-form-item>
+
+      <a-form-item label="角色编号" name="code">
+        <a-input v-model:value="form.code" :disabled="state.title === ACTION.EDIT" :maxlength="32" />
+      </a-form-item>
+      <a-form-item label="可见范围" name="viewScope">
+        <a-select v-model:value="form.viewScope" :options="kjOptions" />
+      </a-form-item>
+
+      <a-form-item label="是否启用">
+        <a-switch v-model:checked="form.enable" />
+      </a-form-item>
+
+      <a-form-item label="角色描述">
+        <a-textarea
+          v-model:value="form.description"
+          :maxlength="250"
+          show-count
+        />
+      </a-form-item>
+      <a-form-item label="所属资源" name="resourceIds">
+        <a-button type="primary" @click="chooseResource">
+          编辑资源
+        </a-button>
+        <div class="pt-10px">
+          <template v-for="item in selectedResources" :key="item">
+            <a-tooltip v-if="item.name.length > 20" :title="item.name">
+              <span class="inline-block mb-6px mr-6px bg-[#E8F3FF] rounded-2px px-8px py-3px whitespace-nowrap dark:bg-[#141414]">
+                {{ `${item.name.slice(0, 20)}...` }}
+              </span>
+            </a-tooltip>
+            <span v-else class="inline-block mb-6px mr-6px bg-[#E8F3FF] rounded-2px px-8px py-3px whitespace-nowrap dark:bg-[#141414]">
+              {{ item.name }}
+            </span>
+          </template>
+        </div>
+      </a-form-item>
+    </a-form>
+    <template #footer>
+      <a-space>
+        <a-button @click="close">
+          取消
+        </a-button>
+        <a-button type="primary" :loading="loading" @click="onSubmit()">
+          提交
+        </a-button>
+      </a-space>
+    </template>
+    <ResourceSelector ref="resourceModelRef" @select="onResourceSelected" />
+  </a-drawer>
+</template>

package/src/views/role/enum.ts

@@ -0,0 +1,26 @@
+export enum ACTION {
+  ADD = '新增',
+  /** 编辑 */
+  EDIT = '修改',
+  /** 删除 */
+  REMOVE = '删除',
+  /** 分配查看 */
+  RESOURCE_RELATION = '分配查看',
+}
+
+export enum RESOURCE_TYPE {
+  OWNER = '1',
+  ALL = '2',
+}
+export enum ENABLE_TYPE {
+  ON = 1,
+  OFF = 0,
+}
+export const kjOptions = [
+  { label: '仅自己', value: RESOURCE_TYPE.OWNER },
+  { label: '全部可见', value: RESOURCE_TYPE.ALL },
+];
+export const enableOptons = [
+  { label: '正常', value: ENABLE_TYPE.ON },
+  { label: '关闭', value: ENABLE_TYPE.OFF },
+];

package/src/views/role/index.vue

@@ -0,0 +1,183 @@
+<script setup lang="tsx">
+import type { ProColumns } from '@pubinfo/pro-components';
+import { ProTable } from '@pubinfo/pro-components';
+import { Badge, message, Modal } from 'ant-design-vue';
+import { getRbacRoleRoleDelete, postRbacRoleRolePage } from '@/api/modules/rbac';
+import DrawerRole from './components/drawerRole.vue';
+import ResourceRelation from './components/ResourceRelation.vue';
+import { ACTION, kjOptions } from './enum';
+
+defineOptions({
+  name: 'Role',
+});
+
+const { auth } = useAuth();
+const tableRef = ref();
+const drawerRoleRef = ref();
+
+function getRoleData() {
+  tableRef.value.reload();
+}
+
+async function request(params: any) {
+  const { current, pageSize, ...rest } = params;
+  const res = await postRbacRoleRolePage({
+    currentPage: current,
+    pageSize,
+    ...rest,
+  });
+  return {
+    success: res.success,
+    data: res.data?.records ?? [],
+    total: res.data?.total ?? 0,
+  };
+}
+const columns: ProColumns<API.PubRole> = [
+  {
+    valueType: 'a-input',
+    bind: 'value',
+    minWidth: 200,
+    title: '角色名称',
+    dataIndex: 'name',
+    ellipsis: true,
+    fieldProps: {
+      placeholder: '请输入角色名称',
+      allowClear: true,
+    },
+  },
+  {
+    hideInSearch: true,
+    minWidth: 80,
+    title: '可见范围',
+    dataIndex: 'viewScope',
+    customRender: ({ text }: { text: string }) => {
+      return kjOptions.find(item => item.value === text)?.label;
+    },
+  },
+  {
+    hideInSearch: true,
+    minWidth: 80,
+    title: '创建人',
+    dataIndex: 'createUserName',
+
+  },
+  {
+    hideInSearch: true,
+    minWidth: 100,
+    title: '创建部门',
+    dataIndex: 'createOrgName',
+  },
+  {
+    hideInSearch: true,
+    minWidth: 100,
+    title: '创建时间',
+    dataIndex: 'createTime',
+  },
+  {
+    hideInSearch: true,
+    minWidth: 100,
+    title: '修改时间',
+    dataIndex: 'updateTime',
+  },
+  {
+    hideInSearch: true,
+    minWidth: 80,
+    title: '角色状态',
+    dataIndex: 'enable',
+    customRender: ({ text }: { text: boolean }) => {
+      return (
+        text
+          ? <Badge status="success" text="正常" />
+          : <Badge status="error" text="关闭" />
+      );
+    },
+  },
+  {
+    hideInSearch: true,
+    width: 240,
+    title: '操作',
+    dataIndex: 'action',
+    fixed: 'right',
+    hideInTable() {
+      return !auth([
+        'role_resource_relation',
+        'role_edit',
+        'role_remove',
+      ]);
+    },
+  },
+];
+const relationRef = ref();
+function onAction(key: string, record?: API.PubRole): void {
+  switch (key) {
+    case ACTION.RESOURCE_RELATION:
+      relationRef.value.open(record);
+      break;
+    case ACTION.EDIT:
+      drawerRoleRef.value.open(key, record);
+      break;
+    case ACTION.ADD:
+      drawerRoleRef.value.open(key);
+      break;
+    case ACTION.REMOVE:
+      Modal.confirm({
+        title: '删除',
+        content: '确定要删除该角色吗？',
+        onOk() {
+          getRbacRoleRoleDelete({ id: record?.id as string }).then((res) => {
+            if (res.success) {
+              message.success('删除成功');
+              getRoleData();
+            }
+          });
+        },
+      });
+      break;
+  }
+}
+</script>
+
+<template>
+  <div
+    py-10px
+    px-10px
+    w-full
+    h-full
+  >
+    <ProTable
+      ref="tableRef"
+      row-key="id"
+      :request="request"
+      :columns="columns"
+      auto-height
+      :scroll="{ x: 1100 }"
+    >
+      <template #toolbar>
+        <a-button v-auth="'role_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="'resource_role_relation'" class="flex items-center" @click="onAction(ACTION.RESOURCE_RELATION, record)">
+              <PubinfoIcon name="view" class="mr-1 text-base" />
+              <span>{{ ACTION.RESOURCE_RELATION }}</span>
+            </a>
+            <a v-auth="'role_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="'role_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>
+    <DrawerRole ref="drawerRoleRef" @submit="getRoleData()" />
+    <ResourceRelation ref="relationRef" />
+  </div>
+</template>

package/src/views/role/interface.ts

@@ -0,0 +1,6 @@
+export type Form = API.PubResource;
+export type AddForm = API.PubResourceAddDto;
+export type EditForm = API.PubResourceUpdateDto;
+export type TreeNode = Form & {
+  children?: TreeNode[]
+};

package/src/views/role_group/components/ResourceRelation.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import type { ProColumns } from '@pubinfo/pro-components';
+import type { TreeNode } from '../interface';
+import { ProTable } from '@pubinfo/pro-components';
+import { useToggle } from '@vueuse/core';
+import { theme } from 'ant-design-vue';
+import { postRbacRoleRoleUserPage } from '@/api/modules/rbac';
+
+defineOptions({
+  name: 'ResourceRelation',
+});
+
+const { token } = theme.useToken();
+const [open, setOpen] = useToggle(false);
+const roleId = ref('');
+async function request(params: any) {
+  params.pageSize = 15;
+  params.roleId = roleId.value;
+  const { current, pageSize, ...rest } = params;
+  const res = await postRbacRoleRoleUserPage({
+    currentPage: current,
+    pageSize,
+    ...rest,
+  });
+  return {
+    success: res.success,
+    data: res.data?.records ?? [],
+    total: res.data?.total ?? 0,
+  };
+}
+const columns: ProColumns<any> = [
+  {
+    title: '用户名称',
+    dataIndex: 'realName',
+    ellipsis: true,
+  },
+  {
+    title: '组织名称',
+    dataIndex: 'orgName',
+    ellipsis: true,
+  },
+];
+
+function onOpen(record: TreeNode) {
+  roleId.value = record.id || '';
+  setOpen(true);
+}
+
+defineExpose({
+  open: onOpen,
+});
+</script>
+
+<template>
+  <a-drawer
+    v-model:open="open"
+    title="分配查看"
+    placement="right"
+    :width="720"
+    destroy-on-close
+    :footer-style="{ textAlign: 'right' }"
+    :body-style="{ paddingLeft: 0, paddingRight: 0 }"
+  >
+    <ProTable
+      row-key="id"
+      :request="request"
+      :columns="columns"
+      :search="false"
+      :toolbar="false"
+      auto-height
+    >
+      <template #bodyCell="{ column, text }">
+        <template v-if="column.dataIndex === 'realName'">
+          <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>
+    </ProTable>
+  </a-drawer>
+</template>
+
+<style scoped>
+:deep(.ant-drawer-body) {
+  --at-apply: px-0;
+}
+</style>

package/src/views/role_group/components/drawerRole.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import type { Rule } from 'ant-design-vue/es/form';
+import type { FormExpose } from 'ant-design-vue/es/form/Form';
+import { useToggle } from '@vueuse/core';
+import { message } from 'ant-design-vue';
+import { getRbacPubRoleGroupGetById, postRbacPubRoleGroupSave, postRbacPubRoleGroupUpdate } from '@/api/modules/rbac';
+import { RoleSelector } from '@/components/RoleSelector';
+import { ACTION } from '../enum';
+
+defineOptions({
+  name: 'DrawerRoleGroup',
+});
+
+const emit = defineEmits(['submit']);
+
+const rules: Record<string, Rule[]> = {
+  name: [{ required: true, message: '请输入名称', trigger: 'blur' },
+    { min: 2, max: 32, message: '角色组名称长度不能少于2位，不能超过32位', trigger: 'change' }],
+  roleIds: [{ required: true, validator: roleValidate, trigger: ['blur', 'change'] }],
+};
+
+function roleValidate(_: unknown, value: string[]) {
+  if (value && value.length > 0) {
+    return Promise.resolve();
+  }
+  return Promise.reject(new Error('请选择角色'));
+}
+
+const state = reactive<{ title: string }>({
+  title: '',
+});
+const [open, setOpen] = useToggle(false);
+const formRef = ref<FormExpose>();
+const form = ref<Partial<API.PubRoleGroupAddDto>>({ enable: true });
+const selectedRoles = ref<API.PubRole[]>([]);
+async function onOpen(key: ACTION, record?: API.PubRoleResourceBo) {
+  state.title = key;
+  if (key === ACTION.EDIT) {
+    const res = await getRbacPubRoleGroupGetById({ id: record?.id as string });
+    if (res.success) {
+      form.value = res.data ?? {};
+      selectedRoles.value = res.data?.roles || [];
+    }
+  }
+  else {
+    form.value = {
+      enable: true,
+    };
+    selectedRoles.value = [];
+  }
+  setOpen(true);
+}
+
+const [loading, setLoading] = useToggle(false);
+
+function onSubmit() {
+  const request = state.title === ACTION.EDIT ? postRbacPubRoleGroupUpdate : postRbacPubRoleGroupSave;
+  formRef.value?.validate().then(() => {
+    setLoading(true);
+    const params: any = { ...form.value };
+    request(params)
+      .then((res) => {
+        if (res.success) {
+          message.success(`${state.title}成功！`);
+          setOpen(false);
+          emit('submit');
+        }
+      })
+      .finally(() => setLoading(false));
+  });
+}
+function close() {
+  form.value = {
+    enable: true,
+  };
+  setOpen(false);
+}
+
+const roleModelRef = ref();
+function chooseRole() {
+  const selectedValue = selectedRoles.value.map(item => ({ value: item.id, label: item.name }));
+  roleModelRef.value.open(selectedValue);
+}
+function onRoleSelected(data: any[]) {
+  form.value.roleIds = data.map(item => item.value).join(',');
+  selectedRoles.value = data.map(e => ({ id: e.value, name: e.label }));
+}
+defineExpose({
+  open: onOpen,
+});
+</script>
+
+<template>
+  <a-drawer
+    v-model:open="open"
+    :title="`${state.title}角色组`"
+    placement="right"
+    :width="600"
+    destroy-on-close
+    :footer-style="{ textAlign: 'right' }"
+    @close="close"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="{ span: 4 }"
+    >
+      <a-form-item label="角色组名称" name="name">
+        <a-input v-model:value="form.name" :maxlength="32" />
+      </a-form-item>
+
+      <a-form-item label="是否启用">
+        <a-switch v-model:checked="form.enable" />
+      </a-form-item>
+
+      <a-form-item label="角色组描述">
+        <a-textarea
+          v-model:value="form.description"
+          :maxlength="250"
+          show-count
+        />
+      </a-form-item>
+      <a-form-item label="所属角色" name="roleIds">
+        <a-button type="primary" @click="chooseRole">
+          编辑角色
+        </a-button>
+        <div class="pt-10px">
+          <template v-for="item in selectedRoles" :key="item">
+            <a-tooltip v-if="(item?.name || '').length > 20" :title="item.name">
+              <span class="inline-block mb-6px mr-6px bg-[#E8F3FF] rounded-2px px-8px py-3px whitespace-nowrap dark:bg-[#141414]">
+                {{ `${item?.name?.slice(0, 20)}...` }}
+              </span>
+            </a-tooltip>
+            <span v-else class="inline-block mb-6px mr-6px bg-[#E8F3FF] rounded-2px px-8px py-3px whitespace-nowrap dark:bg-[#141414]">
+              {{ item.name }}
+            </span>
+          </template>
+        </div>
+      </a-form-item>
+    </a-form>
+    <template #footer>
+      <a-space>
+        <a-button @click="close">
+          取消
+        </a-button>
+        <a-button type="primary" :loading="loading" @click="onSubmit()">
+          提交
+        </a-button>
+      </a-space>
+    </template>
+    <RoleSelector ref="roleModelRef" @select="onRoleSelected" />
+  </a-drawer>
+</template>

package/src/views/role_group/enum.ts

@@ -0,0 +1,22 @@
+export enum ACTION {
+  ADD = '新增',
+  /** 编辑 */
+  EDIT = '修改',
+  /** 删除 */
+  REMOVE = '删除',
+  /** 分配查看 */
+  RESOURCE_RELATION = '分配查看',
+}
+
+export enum RESOURCE_TYPE {
+  OWNER = '1',
+  ALL = '2',
+}
+export enum ENABLE_TYPE {
+  ON = 1,
+  OFF = 0,
+}
+export const enableOptons = [
+  { label: '正常', value: ENABLE_TYPE.ON },
+  { label: '关闭', value: ENABLE_TYPE.OFF },
+];