@pubinfo-nightly/module-rbac 2025.11.14

package/src/views/resource/hooks/useLayoutForm.ts

@@ -0,0 +1,57 @@
+import type { Ref } from 'vue';
+import type { Form } from '../interface';
+import type { CustomMetaLayout } from '../model';
+import { RESOURCE_TYPE } from '../enum';
+
+/**
+ * 需要判断是否显示布局配置项
+ * 因为这是后续增加的一个功能，所以在之前是没有的。
+ * 这就意味着，对于已有的数据，如果没有 layout 字段，则默认都显示
+ * @param form 资源表单对象
+ */
+export function useLayoutForm(form: Ref<Form>) {
+  // 仅在 资源类型 为 内嵌 的时候显示布局配置项
+  const show = computed(() => {
+    const type = form.value.type as RESOURCE_TYPE;
+    return [RESOURCE_TYPE.APP, RESOURCE_TYPE.DYNAMIC_APP].includes(type);
+  });
+
+  /**
+   * 在这里是为了让 LayoutForm 的 v-model 绑定有一个稳定的对象引用
+   * 避免直接绑定 form.value.meta.layout 导致的引用变化问题
+   *
+   * @step-1 在这里会判断 layout 是否存在，不存在则创建默认值
+   *
+   * @step-2 有可能 layout 是有部分字段缺失的，所以需要补全，
+   * 虽然这可能不会存在，但是这需要在我们的考虑范围之内
+   *
+   */
+  const layoutForm = computed<CustomMetaLayout>(() => {
+    // 如果没有 layout 字段，则默认都显示
+    if (!form.value.meta?.layout) {
+      return {
+        header: true,
+        sidebar: true,
+        tabs: true,
+        toolbar: true,
+      };
+    }
+    // 如果 layout 存在，但有部分字段缺失，则补全
+    const defaultLayout: CustomMetaLayout = {
+      header: true,
+      sidebar: true,
+      tabs: true,
+      toolbar: true,
+    };
+    form.value.meta.layout = {
+      ...defaultLayout,
+      ...form.value.meta.layout,
+    };
+    return form.value.meta.layout;
+  });
+
+  return {
+    show,
+    layoutForm,
+  };
+}

package/src/views/resource/hooks/useMetaForm.ts

@@ -0,0 +1,130 @@
+import type { Ref } from 'vue';
+import type { Form } from '../interface';
+import { RESOURCE_TYPE } from '../enum';
+import { defaultMeta } from '../model';
+
+export function useMetaForm(form: Ref<Form>) {
+  const show = computed(() => {
+    const type = form.value.type as RESOURCE_TYPE;
+
+    return {
+      dataPermission: [RESOURCE_TYPE.BUTTON, RESOURCE_TYPE.MENU, RESOURCE_TYPE.NON_MENU].includes(type),
+
+      // 开发模式选项可见性：只在应用或动态应用中显示
+      devMode: [RESOURCE_TYPE.APP, RESOURCE_TYPE.DYNAMIC_APP].includes(type),
+
+      // 缓存标签页和固定标签页选项可见性：只在菜单中显示
+      cacheAndPin: [RESOURCE_TYPE.MENU].includes(type),
+
+      // 侧边栏显示选项可见性：应用和动态应用不显示此选项
+      sidebar: ![RESOURCE_TYPE.APP, RESOURCE_TYPE.DYNAMIC_APP, RESOURCE_TYPE.BUTTON, RESOURCE_TYPE.NON_MENU].includes(type),
+
+      // 标签栏显示选项可见性：应用、动态应用和目录不显示此选项
+      tabbar: ![RESOURCE_TYPE.APP, RESOURCE_TYPE.DYNAMIC_APP, RESOURCE_TYPE.INDEX, RESOURCE_TYPE.BUTTON].includes(type),
+
+      breadcrumb: ![RESOURCE_TYPE.BUTTON].includes(type),
+
+      dynamic: [RESOURCE_TYPE.IFRAME, RESOURCE_TYPE.LINK].includes(type),
+
+      iframe: [RESOURCE_TYPE.IFRAME].includes(type),
+    };
+  });
+
+  // 监听资源类型变化，自动重置不适用的配置项
+  watch(
+    () => form.value.type,
+    (newType, oldType) => {
+      // 只有在资源类型真正改变时才执行重置逻辑
+      if (newType !== oldType && newType && oldType) {
+        resetIncompatibleOptions();
+      }
+    },
+    { immediate: false },
+  );
+
+  // 监听开发模式状态变化，自动处理开发模式文本
+  watch(
+    () => form.value.meta?.isDev,
+    (newIsDev, oldIsDev) => {
+      // 当开发模式从开启变为关闭时，重置文本
+      if (oldIsDev === true && newIsDev === false) {
+        if (form.value.meta) {
+          form.value.meta.devText = defaultMeta.devText;
+        }
+      }
+      // 当首次开启开发模式且文本为空时，设置默认文本
+      if (oldIsDev === false && newIsDev === true) {
+        if (form.value.meta && !form.value.meta.devText) {
+          form.value.meta.devText = defaultMeta.devText;
+        }
+      }
+    },
+    { immediate: false },
+  );
+
+  // 根据当前资源类型重置不适用的配置项
+  function resetIncompatibleOptions() {
+    if (!form.value.meta) {
+      form.value.meta = { ...defaultMeta };
+    }
+
+    // 设置 cache 相关值
+    if (form.value.meta.cache) {
+      const cache = form.value.meta.cache;
+
+      if (typeof cache === 'boolean') {
+        form.value.meta.cache = cache;
+      }
+
+      if (typeof cache === 'string') {
+        form.value.meta.cacheName = cache;
+        form.value.meta.cache = true;
+      }
+
+      if (Array.isArray(cache)) {
+        form.value.meta.cacheName = cache.join(',');
+        form.value.meta.cache = true;
+      }
+    }
+
+    if (form.value.meta.noCache && Array.isArray(form.value.meta.noCache)) {
+      form.value.meta.noCache = form.value.meta.noCache.join(',');
+    }
+
+    // 如果当前资源类型不支持开发模式，则重置为false
+    if (!show.value.devMode) {
+      form.value.meta.isDev = false;
+      // 重置开发模式文本
+      form.value.meta.devText = defaultMeta.devText;
+    }
+
+    // 如果开发模式被关闭，重置开发模式文本为默认值
+    if (!form.value.meta.isDev) {
+      form.value.meta.devText = defaultMeta.devText;
+    }
+
+    // 如果当前资源类型不支持缓存和固定标签页，则重置为false
+    if (!show.value.cacheAndPin) {
+      form.value.meta.cache = false;
+      form.value.meta.pin = false;
+    }
+
+    // 如果当前资源类型不支持侧边栏显示，则重置为true（默认显示）
+    if (!show.value.sidebar) {
+      form.value.meta.sidebar = true;
+    }
+
+    // 如果当前资源类型不支持标签栏显示，则重置为true（默认显示）
+    if (!show.value.tabbar) {
+      form.value.meta.tabbar = true;
+    }
+
+    // 当应用或动态应用开启开发模式时，需要确保其子路由不会被注册到vue-router
+    // 这个逻辑主要在路由生成阶段处理，此处仅做数据一致性保证
+  }
+
+  return {
+    show,
+    resetIncompatibleOptions,
+  };
+}

package/src/views/resource/index.vue

@@ -0,0 +1,261 @@
+<script setup lang="tsx">
+import type { ProColumns } from '@pubinfo/pro-components';
+import type { AddForm, TreeNode } from './interface';
+import { SwapOutlined } from '@ant-design/icons-vue';
+import { ProTable } from '@pubinfo/pro-components';
+import { Badge, message, Modal, Tag } from 'ant-design-vue';
+import { cloneDeep } from 'lodash-es';
+import { PubinfoIcon } from 'pubinfo-nightly';
+import { getRbacResourceResourceDelete, getRbacResourceResourceTree } from '@/api/modules/rbac';
+import ImportExport from './components/ImportExport.vue';
+import ResourceEdit from './components/ResourceEdit.vue';
+import RoleRelation from './components/RoleRelation.vue';
+import { ACTION, RESOURCE_COLOR, 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-select',
+    title: '资源类型',
+    dataIndex: 'type',
+    fieldProps: {
+      placeholder: '请选择资源类型',
+      allowClear: true,
+      options: resourceOptions,
+    },
+    customRender({ text }) {
+      return (
+        <div class="flex items-center space-x-1">
+          <Tag color={RESOURCE_COLOR[text]} bordered={false}>{resourceOptions.find(item => item.value === text)?.label}</Tag>
+        </div>
+      );
+    },
+  },
+  {
+    valueType: 'a-input',
+    title: '资源编码',
+    dataIndex: 'code',
+    ellipsis: true,
+    fieldProps: {
+      placeholder: '请输入资源编码',
+      allowClear: true,
+    },
+  },
+  {
+    title: '资源路径',
+    dataIndex: 'meta',
+    ellipsis: true,
+    hideInSearch: true,
+    customRender({ text }) {
+      return text?.url || '-';
+    },
+  },
+  {
+    title: '接口权限',
+    dataIndex: 'permissionCode',
+    ellipsis: true,
+    hideInSearch: true,
+  },
+  {
+    valueType: 'a-select',
+    title: '是否启用',
+    dataIndex: 'enable',
+    width: 80,
+    align: 'center',
+    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: 'sort',
+    width: 60,
+    align: 'center',
+    hideInSearch: true,
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    fixed: 'right',
+    width: 300,
+    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, ...rest } = cloneDeep(query);
+  const params: AddForm = {
+    ...rest,
+  };
+  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();
+const importExportRef = 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.IMPORT_EXPORT:
+      importExportRef.value.open();
+      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: 1280 }"
+      auto-height
+    >
+      <template #toolbar>
+        <a-space>
+          <a-button v-auth="'resource_app_add'" type="primary" @click="onAction(ACTION.ADD)">
+            <PlusCircleOutlined />
+            {{ ACTION.ADD }}
+          </a-button>
+
+          <a-button @click="onAction(ACTION.IMPORT_EXPORT)">
+            <SwapOutlined />
+            {{ ACTION.IMPORT_EXPORT }}
+          </a-button>
+        </a-space>
+      </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="![RESOURCE_TYPE.BUTTON, RESOURCE_TYPE.IFRAME, RESOURCE_TYPE.LINK].includes(record.type)"
+              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" />
+    <ImportExport ref="importExportRef" :data-source="dataSource" @submit="getTreeData" />
+  </div>
+</template>

package/src/views/resource/interface.ts

@@ -0,0 +1,10 @@
+import type { CustomMeta } from './model';
+
+export type Form = Omit<API.PubResource, 'meta'> & {
+  meta?: CustomMeta | API.PubResource['meta']
+};
+export type AddForm = API.PubResourceAddDto;
+export type EditForm = API.PubResourceUpdateDto;
+export type TreeNode = Form & {
+  children?: TreeNode[]
+};

package/src/views/resource/model.ts

@@ -0,0 +1,81 @@
+/**
+ * 默认的 meta.layout 对象
+ */
+export interface CustomMetaLayout {
+  header: boolean
+  sidebar: boolean
+  tabs: boolean
+  toolbar: boolean
+}
+
+/**
+ * 默认的 meta 对象
+ *
+ * @see https://github.com/wsypower/pubinfo/issues/16
+ *
+ * @param url vue-router 路径
+ * @param component 组件路径
+ * @param routeName 路由名称
+ * @param scope 组件所属模块
+ * @param activeMenu 激活路径
+ * @param isDev 是否正在开发
+ * @param devText 开发模式提示文本
+ * @param cache 是否缓存页面
+ * @param pin 是否固定在标签页
+ * @param sidebar 是否在侧边栏显示
+ * @param tabbar 是否在标签栏显示
+ * @param breadcrumb 是否在面包屑显示
+ * @param link 外链地址
+ * @param iframe 内嵌地址
+ * @param partyLogin 第三方登录配置
+ */
+export interface CustomMeta {
+  url: string
+  component: string
+  routeName: string
+  scope: string
+  activeMenu?: string
+  isDev: boolean
+  devText: string
+  cache: boolean | string | string[]
+  cacheName?: string
+  noCache?: string | string[]
+  pin: boolean
+  sidebar: boolean
+  tabbar: boolean
+  breadcrumb: boolean
+  link?: string
+  iframe?: string
+  iframeCache?: boolean
+  layout: CustomMetaLayout
+  partyLogin?: any[] // 第三方登录配置数据
+  custom?: any // 用户自定义meta数据
+}
+
+export const defaultMeta: CustomMeta = {
+  url: '',
+  component: '',
+  routeName: '',
+  scope: '',
+  activeMenu: undefined,
+  isDev: false,
+  devText: '该功能暂未上线,敬请期待！',
+  cache: false,
+  cacheName: undefined,
+  noCache: undefined,
+  pin: false,
+  sidebar: true,
+  tabbar: true,
+  breadcrumb: true,
+  link: undefined,
+  iframe: undefined,
+  iframeCache: false,
+  layout: {
+    header: true,
+    sidebar: true,
+    tabs: true,
+    toolbar: true,
+  },
+  partyLogin: undefined,
+  custom: undefined,
+};

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

@@ -0,0 +1,112 @@
+<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 { postRbacOrgRoleRoleOrgPage, postRbacRoleRoleUserPage } from '@/api/modules/rbac';
+
+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 scoped>
+:deep(.ant-drawer-body) {
+  --at-apply: px-0;
+}
+</style>