@pubinfo/module-rbac 2.0.0-beta.3

package/src/views/resource/index.vue

@@ -0,0 +1,237 @@
+<script setup lang="tsx">
+import type { ProColumns } from '@pubinfo/pro-components';
+import type { AddForm, TreeNode } from './interface';
+import { getRbacResourceResourceDelete, getRbacResourceResourceTree } from '@/api/modules/rbac';
+import { ProTable } from '@pubinfo/pro-components';
+import { Badge, message, Modal } from 'ant-design-vue';
+import { cloneDeep } from 'lodash-es';
+import { PubinfoIcon } from 'pubinfo';
+import ResourceEdit from './components/ResourceEdit.vue';
+import RoleRelation from './components/RoleRelation.vue';
+import { ACTION, RESOURCE_TYPE, resourceOptions } from './enum';
+
+defineOptions({
+  name: 'Resource',
+});
+
+const { auth } = useAuth();
+
+const columns: ProColumns<TreeNode> = [
+  {
+    valueType: 'a-input',
+    width: 200,
+    title: '资源名称',
+    dataIndex: 'name',
+    ellipsis: true,
+    fieldProps: {
+      placeholder: '请输入资源名称',
+      allowClear: true,
+    },
+  },
+  {
+    valueType: 'a-input',
+    title: '资源编码',
+    dataIndex: 'code',
+    ellipsis: true,
+    fieldProps: {
+      placeholder: '请输入资源编码',
+      allowClear: true,
+    },
+  },
+  {
+    valueType: 'a-select',
+    title: '资源类型',
+    dataIndex: 'type',
+    fieldProps: {
+      placeholder: '请选择资源类型',
+      allowClear: true,
+      options: resourceOptions,
+    },
+    customRender({ text }) {
+      const icon = ['', 'app', 'index', 'menu', 'btn', 'nonmenu'];
+      return (
+        <div class="flex items-center space-x-1">
+          <PubinfoIcon name={`resource-${icon[text]}`} class="text-xl" />
+          <span>{resourceOptions.find(item => item.value === text)?.label}</span>
+        </div>
+      );
+    },
+  },
+  {
+    valueType: 'a-select',
+    title: '是否启用',
+    dataIndex: 'enable',
+    width: 100,
+    fieldProps: {
+      placeholder: '请选择是否启用',
+      allowClear: true,
+      options: [
+        { value: 1, label: '是' },
+        { value: 0, label: '否' },
+      ],
+    },
+    customRender({ text }) {
+      return (
+        text
+          ? <Badge status="success" text="是" />
+          : <Badge status="error" text="否" />
+      );
+    },
+  },
+  {
+    title: '权限标识',
+    dataIndex: 'permissionCode',
+    ellipsis: true,
+    hideInSearch: true,
+  },
+  {
+    title: '排序',
+    dataIndex: 'sort',
+    hideInSearch: true,
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    fixed: 'right',
+    width: 320,
+    hideInSearch: true,
+    hideInTable() {
+      return !auth([
+        'resource_role_relation',
+        'resource_add_child',
+        'resource_edit',
+        'resource_remove',
+      ]);
+    },
+  },
+];
+
+function recursiveTreeMap<T extends { children?: T[] }>(tree: T[], fn: (node: T) => any) {
+  return tree?.map((node) => {
+    node.children = node.children && recursiveTreeMap(node.children, fn);
+    return fn(node);
+  }) ?? [];
+}
+
+const tableRef = ref();
+const dataSource = computed(() => tableRef.value?.dataSource ?? []);
+function getTreeData() {
+  tableRef.value.reload();
+}
+
+async function request(query: any) {
+  const { pageSize, current, enabled, ...rest } = cloneDeep(query);
+  const params: AddForm = {
+    ...rest,
+    enabled: Boolean(enabled),
+  };
+  const dataSource = await getRbacResourceResourceTree(params, {
+    transform(data) {
+      return recursiveTreeMap<TreeNode>(data?.data ?? [], (node) => {
+        return node.leaf ? { ...node, children: undefined } : node;
+      }) as TreeNode[];
+    },
+  });
+
+  return {
+    success: true,
+    data: dataSource,
+  };
+}
+
+const editRef = ref();
+const relationRef = ref();
+function onAction(key: string, record?: TreeNode) {
+  switch (key) {
+    case ACTION.ROLE_RELATION:
+      relationRef.value.open(record);
+      break;
+
+    case ACTION.ADD:
+      editRef.value.open(key);
+      break;
+
+    case ACTION.ADD_CHILD:
+      editRef.value.open(key, record);
+      break;
+
+    case ACTION.EDIT:
+      editRef.value.open(key, record);
+      break;
+
+    case ACTION.REMOVE:
+      if (!record?.leaf) {
+        message.info('非叶子节点不能删除');
+        return;
+      }
+      Modal.confirm({
+        title: '删除',
+        content: '确定要删除该资源吗？',
+        async onOk() {
+          const res = await getRbacResourceResourceDelete({ id: record?.id as string });
+          if (res.success) {
+            message.success('删除成功');
+            getTreeData();
+          }
+        },
+      });
+      break;
+  }
+}
+</script>
+
+<template>
+  <div
+    w-full
+    h-full
+    py-10px
+    px-10px
+  >
+    <ProTable
+      ref="tableRef"
+      row-key="id"
+      :columns="columns"
+      :request="request"
+      :pagination="false"
+      :scroll="{ x: 1024 }"
+      auto-height
+    >
+      <template #toolbar>
+        <a-button v-auth="'resource_app_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.ROLE_RELATION, record)">
+              <PubinfoIcon name="view" class="mr-1 text-base" />
+              <span>{{ ACTION.ROLE_RELATION }}</span>
+            </a>
+            <a
+              v-if="record.type !== RESOURCE_TYPE.BUTTON"
+              v-auth="'resource_add_child'"
+              class="flex items-center"
+              @click="onAction(ACTION.ADD_CHILD, record)"
+            >
+              <PubinfoIcon name="add-child" class="mr-1 text-base" />
+              <span>{{ ACTION.ADD_CHILD }}</span>
+            </a>
+            <a v-auth="'resource_edit'" class="flex items-center" @click="onAction(ACTION.EDIT, record)">
+              <PubinfoIcon name="edit" class="mr-1 text-base" />
+              <span>{{ ACTION.EDIT }}</span>
+            </a>
+            <span v-auth="'resource_remove'" class="flex items-center text-red-500 hover:cursor-pointer hover:opacity-80" @click="onAction(ACTION.REMOVE, record)">
+              <PubinfoIcon name="remove" class="mr-1 text-base" />
+              <span>{{ ACTION.REMOVE }}</span>
+            </span>
+          </a-space>
+        </template>
+      </template>
+    </ProTable>
+    <ResourceEdit ref="editRef" :data-source="dataSource" @submit="getTreeData" />
+    <RoleRelation ref="relationRef" />
+  </div>
+</template>

package/src/views/resource/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/components/ResourceRelation.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import type { ProColumns } from '@pubinfo/pro-components';
+import type { TreeNode } from '../interface';
+import { postRbacOrgRoleRoleOrgPage, postRbacRoleRoleUserPage } from '@/api/modules/rbac';
+import { ProTable } from '@pubinfo/pro-components';
+import { useToggle } from '@vueuse/core';
+
+defineOptions({
+  name: 'ResourceRelation',
+});
+const options = ref(['用户自选角色', '组织基础角色']);
+const val = ref(options.value[0]);
+
+const [open, setOpen] = useToggle(false);
+const roleId = ref('');
+const protable = ref();
+function optionChange() {
+  protable.value.fetch();
+}
+async function request(params: any) {
+  params.pageSize = 15;
+  params.roleId = roleId.value;
+  const { current, pageSize, ...rest } = params;
+  const request = val.value === '用户自选角色' ? postRbacRoleRoleUserPage : postRbacOrgRoleRoleOrgPage;
+  const res = await request({
+    currentPage: current,
+    pageSize,
+    ...rest,
+  });
+  return {
+    success: res.success,
+    data: res.data?.records ?? [],
+    total: res.data?.total ?? 0,
+  };
+}
+const columns = computed<ProColumns<any>>(() => {
+  if (val.value === '用户自选角色') {
+    return [
+      {
+        title: '用户名称',
+        dataIndex: 'realName',
+        ellipsis: true,
+      },
+      {
+        title: '组织名称',
+        dataIndex: 'orgName',
+        ellipsis: true,
+      },
+    ];
+  }
+  else {
+    return [
+      {
+        title: '组织名称',
+        dataIndex: 'name',
+        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 }"
+  >
+    <div class="mb-20px p-x-15px">
+      <a-segmented v-model:value="val" block :options="options" @change="optionChange" />
+    </div>
+    <ProTable
+      ref="protable"
+      row-key="id"
+      :request="request"
+      :columns="columns"
+      :search="false"
+      :toolbar="false"
+      :auto-height="{ offset: 50 }"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'name'">
+          <div class="flex items-center">
+            <span class="mr-4px">{{ record.name }}</span>
+            <a-tag v-if="record.isInherit === '1'" color="processing">
+              及子组织
+            </a-tag>
+          </div>
+        </template>
+      </template>
+    </ProTable>
+  </a-drawer>
+</template>
+
+<style lang="scss" scoped>
+:deep(.ant-drawer-body) {
+  padding-right: 0;
+  padding-left: 0;
+}
+</style>

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

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import type { SelectedResourceInfo } from '@/components/ResourceSelector/hooks/useAppAndResource';
+import type { Rule } from 'ant-design-vue/es/form';
+import type { FormExpose } from 'ant-design-vue/es/form/Form';
+import { getRbacRoleInfo, postRbacRoleAddRole, postRbacRoleRoleUpdate } from '@/api/modules/rbac';
+import useAppAndResource from '@/components/ResourceSelector/hooks/useAppAndResource';
+import ResourceSelector from '@/components/ResourceSelector/index.vue';
+import { useToggle } from '@vueuse/core';
+import { message } from 'ant-design-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 },
+];