@pubinfo/module-rbac 2.0.0-beta.10

package/src/views/role/index.vue

@@ -0,0 +1,183 @@
+<script setup lang="tsx">
+import type { ProColumns } from '@pubinfo/pro-components';
+import { getRbacRoleRoleDelete, postRbacRoleRolePage } from '@/api/modules/rbac';
+import { ProTable } from '@pubinfo/pro-components';
+import { Badge, message, Modal } from 'ant-design-vue';
+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,91 @@
+<script setup lang="ts">
+import type { ProColumns } from '@pubinfo/pro-components';
+import type { TreeNode } from '../interface';
+import { postRbacRoleRoleUserPage } from '@/api/modules/rbac';
+import { ProTable } from '@pubinfo/pro-components';
+import { useToggle } from '@vueuse/core';
+import { theme } from 'ant-design-vue';
+
+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 lang="scss" scoped>
+:deep(.ant-drawer-body) {
+  padding-right: 0;
+  padding-left: 0;
+}
+</style>

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

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import type { Rule } from 'ant-design-vue/es/form';
+import type { FormExpose } from 'ant-design-vue/es/form/Form';
+import { getRbacPubRoleGroupGetById, postRbacPubRoleGroupSave, postRbacPubRoleGroupUpdate } from '@/api/modules/rbac';
+import { useToggle } from '@vueuse/core';
+import { message } from 'ant-design-vue';
+import { ACTION } from '../enum';
+import RoleSelect from './roleSelect.vue';
+
+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() {
+  roleModelRef.value.open(selectedRoles.value.map(item => item.id));
+}
+function onRoleSelected(data: API.PubRole[]) {
+  form.value.roleIds = data.map(item => item.id).join(',');
+  selectedRoles.value = 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="是否启用">
+        <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>
+    <RoleSelect ref="roleModelRef" @select="onRoleSelected" />
+  </a-drawer>
+</template>

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

@@ -0,0 +1,224 @@
+<script setup lang="ts">
+import { getRbacRoleRoleList } from '@/api/modules/rbac';
+import { SearchOutlined } from '@ant-design/icons-vue';
+import { useToggle } from '@vueuse/core';
+
+defineOptions({
+  name: 'RoleSelect',
+});
+
+const emit = defineEmits(['select']);
+
+const loading = ref(false);
+
+const checkedKeys: Ref<string[]> = ref([]);
+const rightItems: Ref<API.PubRole[]> = ref([]);
+const roleData = ref<API.PubRole[]>([]);
+const searchContent = ref('');
+const open = defineModel<boolean>('open');
+
+const setOpen = useToggle(open);
+watch(() => checkedKeys.value, (val) => {
+  rightItems.value = val.reduce((acc: API.PubRole[], ite: string) => {
+    const temp = roleData.value.find(item => item.id === ite) || {};
+    acc.push(temp);
+    return acc;
+  }, []);
+}, { deep: true });
+
+async function onOpen(ids: string[]) {
+  loading.value = true;
+  const res = await getRbacRoleRoleList();
+  loading.value = false;
+  roleData.value = res.data || [];
+  checkedKeys.value = [...ids];
+  setOpen(true);
+}
+
+function clearAllChecked() {
+  checkedKeys.value = [];
+}
+
+function handleCloseTag(removedTagId: string) {
+  const index = checkedKeys.value.findIndex(item => item === removedTagId);
+  if (index >= 0) {
+    checkedKeys.value.splice(index, 1);
+  }
+}
+
+function notifySelect() {
+  emit('select', rightItems.value);
+  setOpen(false);
+}
+
+function filterName() {
+  return roleData.value.filter(item => item.name?.includes(searchContent.value));
+}
+
+defineExpose({
+  open: onOpen,
+});
+</script>
+
+<template>
+  <a-modal
+    v-model:open="open"
+    class="custom_modal"
+    title="角色选择"
+    :mask-closable="false"
+    :width="750"
+  >
+    <div class="h-340px border-1px border-solid flex flex-row border_color">
+      <div class="w-360px flex flex-col">
+        <div class="w-full h-34px bg-[#F2F3F5] flex px-15px items-center justify-between text-[#1D2129] dark:bg-[#1D2129] dark:text-[#F2F3F5]">
+          <div class="">
+            全部角色
+          </div>
+          <div>{{ checkedKeys.length }}/{{ roleData.length }}</div>
+        </div>
+        <div class="flex-1 overflow-hidden py-10px px-10px">
+          <a-input v-model:value="searchContent" placeholder="请输入" allow-clear @change="filterName">
+            <template #prefix>
+              <SearchOutlined />
+            </template>
+          </a-input>
+          <div class="overflow-y-auto overflow-x-hidden h-[calc(100%-30px)] mt-10px">
+            <a-spin v-if="loading" />
+            <a-checkbox-group v-model:value="checkedKeys">
+              <div v-for="ite in filterName()" :key="ite.id" class="w-full py-10px bodb">
+                <a-checkbox :value="ite.id">
+                  <a-tooltip v-if="(ite.name || '').length > 22" :title="ite.name">
+                    {{ `${ite?.name?.slice(0, 22)}...` }}
+                  </a-tooltip>
+                  <span v-else>{{ ite.name }}</span>
+                </a-checkbox>
+              </div>
+            </a-checkbox-group>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex-1 flex flex-col border-solid border-0px border-l-1px border_color">
+        <div class="w-full h-34px bg-[#F2F3F5] flex px-15px items-center justify-between text-[#1D2129] dark:bg-[#1D2129] dark:text-[#F2F3F5]">
+          <div class="">
+            已选角色
+          </div>
+          <div class="cursor-pointer text-[#165DFF]" @click="clearAllChecked">
+            清空
+          </div>
+        </div>
+        <div class="flex-1 p-10px overflow-auto">
+          <div v-for="item in rightItems" :key="item.id" class="inline-block mb-6px max-w-300px">
+            <a-tooltip v-if="(item.name || '').length > 20" :title="item.name">
+              <a-tag class="custom_tag bg-[#e8f3ff] dark:bg-[#141414]" closable @close="handleCloseTag(item.id || '')">
+                {{ `${item?.name?.slice(0, 20)}...` }}
+              </a-tag>
+            </a-tooltip>
+            <a-tag
+              v-else
+              class="custom_tag bg-[#e8f3ff] dark:bg-[#141414]"
+              closable
+              @close="handleCloseTag(item.id || '')"
+            >
+              {{ item.name }}
+            </a-tag>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <a-button @click="setOpen(false)">
+        取消
+      </a-button>
+      <a-button type="primary" @click="notifySelect">
+        确定
+      </a-button>
+    </template>
+  </a-modal>
+</template>
+
+<style lang="scss" scoped>
+.border_color {
+  border-color: #e5e6eb;
+}
+
+[data-theme="dark"] {
+  .border_color {
+    border-color: rgb(253 253 253 / 12%);
+  }
+}
+
+.border_c {
+  border: 1px dashed #ccc;
+  border-radius: 10px;
+}
+
+:deep(.ant-dropdown-link) {
+  padding: 4px 6px;
+  font-size: 12px;
+  border-radius: 2px;
+  transform: scale(0.7);
+}
+</style>
+
+<style lang='scss' scoped>
+.custom_modal {
+  :deep(.ant-modal-content) {
+    padding: 0;
+    border-radius: 0;
+  }
+
+  :deep(.ant-modal-header) {
+    padding: 12px 16px;
+    margin-bottom: 0;
+    border-bottom: 1px solid #e5e6eb;
+  }
+
+  :deep(.ant-modal-title) {
+    font-size: 16px;
+    font-weight: 500;
+    color: #1d2129;
+  }
+
+  :deep(.ant-modal-body) {
+    padding: 16px;
+  }
+
+  .bodb {
+    border-bottom: 1px solid #e5e6eb;
+  }
+
+  :deep(.ant-modal-footer) {
+    padding: 16px;
+    border-top: 1px solid #e5e6eb;
+
+    .ant-btn {
+      border-radius: 2px;
+    }
+  }
+}
+
+:deep(.ant-tree-checkbox) {
+  margin-block-start: 0;
+  margin-inline-end: 2px;
+}
+
+:deep(.ant-tree-checkbox + span .ant-tree-iconEle) {
+  margin-right: 4px;
+}
+
+.custom_tag {
+  padding: 3px 8px;
+  border-width: 0;
+  border-radius: 2px;
+
+  :deep(.ant-tag-close-icon) {
+    color: rgb(22 93 255 / 60%);
+
+    &:hover {
+      color: #165dff;
+    }
+  }
+}
+</style>

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 },
+];