@pubinfo/module-rbac 2.0.0-beta.3

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

@@ -0,0 +1,258 @@
+<script setup lang="ts">
+import { getRbacPubRoleGroupGetAll, getRbacPubRoleGroupGetById, 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 selectedGroupId = ref('');
+const roleGroupOptions = ref<API.PubRoleGroup[]>([]);
+const roleInGroup = ref<API.PubRole[]>([]);
+
+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 });
+watch(() => selectedGroupId.value, (val) => {
+  changeGroup(val);
+});
+async function onOpen(ids: string[]) {
+  // 获取所有角色组
+  const groupRes = await getRbacPubRoleGroupGetAll({ name: '' });
+  roleGroupOptions.value = groupRes.data || [];
+  selectedGroupId.value = '';
+  await changeGroup('');
+  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(v: API.PubRole) {
+  return roleInGroup.value.findIndex(item => item.id === v.id) > -1 && v.name?.includes(searchContent.value);
+}
+
+// 切换角色组
+async function changeGroup(value: string | undefined) {
+  loading.value = true;
+  if (value) {
+    const res = await getRbacPubRoleGroupGetById({ id: value });
+    loading.value = false;
+    roleInGroup.value = res.data?.roles || [];
+  }
+  else {
+    const res = await getRbacRoleRoleList();
+    loading.value = false;
+    roleData.value = res.data || [];
+    // 获取两个数组交集
+    roleInGroup.value = [...roleData.value].filter(x => [...(res.data || [])].some(y => y.id === x.id));
+  }
+}
+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="flex-1 overflow-hidden py-10px px-10px">
+          <a-input v-model:value="searchContent" placeholder="请输入" allow-clear>
+            <template #addonBefore>
+              <a-select v-model:value="selectedGroupId" style="width: 90px;">
+                <a-select-option value="">
+                  全部
+                </a-select-option>
+                <a-select-option v-for="item in roleGroupOptions" :key="item.id" :value="item.id">
+                  <a-tooltip :title="item.name">
+                    {{ item.name }}
+                  </a-tooltip>
+                </a-select-option>
+              </a-select>
+            </template>
+            <template #suffix>
+              <SearchOutlined />
+            </template>
+          </a-input>
+          <div class="overflow-y-auto overflow-x-hidden h-[calc(100%-30px)] mt-10px">
+            <a-spin v-if="loading" class="cent" />
+            <a-checkbox-group v-else v-model:value="checkedKeys" class="w-full">
+              <div v-for="ite in roleData" v-show="filterName(ite)" :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>
+.cent {
+  position: relative;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.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/user/enum.ts

@@ -0,0 +1,13 @@
+/** 操作按钮 */
+export enum ACTION {
+  /** 新建 */
+  ADD = '新建',
+  /** 重置密码 */
+  AUTHORIZE = '授权',
+  /** 重置密码 */
+  RESET_PASSWORD = '重置密码',
+  /** 修改 */
+  EDIT = '修改',
+  /** 删除 */
+  REMOVE = '删除',
+}

package/src/views/user/index.vue

@@ -0,0 +1,266 @@
+<script setup lang="tsx">
+import type { ProColumns } from '@pubinfo/pro-components';
+import type { EventDataNode } from 'ant-design-vue/es/tree';
+import type { CurrentOrg, Data, Query } from './interface';
+import { getRbacUserUserDelete, postRbacUserUserPage, putRbacUserResetPassword } from '@/api/modules/rbac';
+import { ProTable } from '@pubinfo/pro-components';
+import { Badge, message, Modal, Popover, Space } from 'ant-design-vue';
+import UserAuthorization from './components/UserAuthorization.vue';
+import UserEdit from './components/UserEdit.vue';
+import { ACTION } from './enum';
+
+defineOptions({
+  name: 'User',
+});
+
+const { auth } = useAuth();
+
+const columns: ProColumns<API.PubUserBo> = [
+  {
+    valueType: 'a-input',
+    bind: 'value',
+    title: '登录账号',
+    dataIndex: 'loginName',
+    ellipsis: true,
+    fieldProps: {
+      placeholder: '请输入',
+      allowClear: true,
+    },
+  },
+  {
+    valueType: 'a-input',
+    bind: 'value',
+    title: '真实姓名',
+    dataIndex: 'realName',
+    ellipsis: true,
+    fieldProps: {
+      placeholder: '请输入',
+      allowClear: true,
+    },
+  },
+  {
+    title: '手机号',
+    dataIndex: 'mobile',
+    ellipsis: true,
+    hideInSearch: true,
+  },
+  {
+    title: '组织名称',
+    dataIndex: 'userOrgList',
+    ellipsis: true,
+    hideInSearch: true,
+    customRender({ text: list }) {
+      return (
+        <Popover
+          placement="topLeft"
+          getPopupContainer={() => document.body}
+          v-slots={{
+            default: () => list?.map((item: API.PubUserOrgBo) => item.orgName).join(','),
+            content: () => (
+              <Space direction="vertical">
+                {list.map((item: API.PubUserOrgBo) => {
+                  return <Badge status={item.main ? 'processing' : 'success'} text={item.orgName} />;
+                })}
+              </Space>
+            ),
+          }}
+        />
+      );
+    },
+  },
+  {
+    title: '电子邮箱',
+    dataIndex: 'email',
+    ellipsis: true,
+    hideInSearch: true,
+  },
+  {
+    title: '是否启用',
+    dataIndex: 'enable',
+    width: 100,
+    hideInSearch: true,
+    customRender({ text }) {
+      return (
+        text
+          ? <Badge status="success" text="是" />
+          : <Badge status="error" text="否" />
+      );
+    },
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    fixed: 'right',
+    width: 280,
+    hideInSearch: true,
+    hideInTable() {
+      return !auth([
+        'user_authorize',
+        'user_reset_password',
+        'user_edit',
+        'user_remove',
+      ]);
+    },
+  },
+];
+
+const currentOrg = ref<CurrentOrg>({});
+const currentUser = ref<Data>({});
+const query = ref<Query>({});
+const tableRef = ref();
+async function request(params: any) {
+  const { current, pageSize, ...rest } = params;
+  const res = await postRbacUserUserPage({
+    currentPage: current,
+    pageSize,
+    orgId: currentOrg.value?.orgId,
+    ...query.value,
+    ...rest,
+  });
+  return {
+    success: res.success,
+    data: res.data?.records ?? [],
+    total: res.data?.total ?? 0,
+  };
+}
+
+function getUserData() {
+  tableRef.value.reload();
+}
+
+function onSelect(_: unknown, { node }: { node: EventDataNode & API.PubOrg }) {
+  if (node.selected) {
+    currentOrg.value = {};
+  }
+  else {
+    currentOrg.value = {
+      orgId: node.id,
+      orgName: node.name,
+    };
+  }
+
+  getUserData();
+}
+
+const editRef = ref();
+const authorizationRef = ref();
+function onAction(key: ACTION, record?: Data) {
+  switch (key) {
+    case ACTION.ADD:
+      editRef.value.open(key);
+      break;
+
+    case ACTION.AUTHORIZE:
+      if (record) {
+        currentUser.value = record;
+      }
+      if (authorizationRef.value && authorizationRef.value.open) {
+        authorizationRef.value.open();
+      }
+      break;
+
+    case ACTION.EDIT:
+      editRef.value.open(key, record);
+      break;
+
+    case ACTION.RESET_PASSWORD:
+      Modal.confirm({
+        title: '重置密码',
+        content: '确定要重置该用户密码吗？',
+        async onOk() {
+          const res = await putRbacUserResetPassword({ userId: record?.id as string });
+          if (res.success) {
+            message.success('重置密码成功');
+          }
+        },
+      });
+      break;
+
+    case ACTION.REMOVE: {
+      const hasMultiOrg = record?.userOrgList && record.userOrgList?.length > 1;
+      Modal.confirm({
+        title: '删除',
+        content: `确定要删除该用户吗？${hasMultiOrg ? '该用户存在多个组织下，若只需移除组织，请在编辑中操作。' : ''}`,
+        async onOk() {
+          const res = await getRbacUserUserDelete({ userId: record?.id as string });
+          if (res.success) {
+            message.success('删除成功');
+            getUserData();
+          }
+        },
+      });
+      break;
+    }
+  }
+}
+
+// 根据数据的业务逻辑判断是否按钮展示
+function isShow(key: ACTION, record: Data) {
+  // 租户管理员只有重置密码
+  if (record.userType === '2') {
+    return [ACTION.RESET_PASSWORD].includes(key);
+  }
+
+  return [ACTION.AUTHORIZE, ACTION.RESET_PASSWORD, ACTION.EDIT, ACTION.REMOVE].includes(key);
+}
+</script>
+
+<template>
+  <div
+    w-full
+    h-full
+    py-10px
+    px-10px
+    overflow-hidden
+  >
+    <a-row :gutter="[8, 8]" :wrap="false" class="h-full">
+      <a-col flex="320px" class="h-full overflow-hidden">
+        <OrgTree :select-keys="[query.orgId]" :bordered="false" auth="organization" @select="onSelect" />
+      </a-col>
+
+      <a-col flex="auto" class="h-full">
+        <ProTable
+          ref="tableRef"
+          :row-key="(record: any) => `${record.id}-${record.orgId}`"
+          :request="request"
+          :columns="columns"
+          :scroll="{ x: 800 }"
+          auto-height
+        >
+          <template #toolbar>
+            <a-button v-auth="'user_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-if="isShow(ACTION.AUTHORIZE, record)" v-auth="'user_authorize'" class="flex items-center" @click="onAction(ACTION.AUTHORIZE, record)">
+                  <PubinfoIcon name="authorize" mr-1 text-base />
+                  <span>{{ ACTION.AUTHORIZE }}</span>
+                </a>
+                <a v-if="isShow(ACTION.RESET_PASSWORD, record)" v-auth="'user_reset_password'" class="flex items-center" @click="onAction(ACTION.RESET_PASSWORD, record)">
+                  <PubinfoIcon name="i-ci-arrows-reload-01" mr-1 text-base />
+                  <span>{{ ACTION.RESET_PASSWORD }}</span>
+                </a>
+                <a v-if="isShow(ACTION.EDIT, record)" v-auth="'user_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-if="isShow(ACTION.REMOVE, record)" v-auth="'user_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>
+      </a-col>
+    </a-row>
+
+    <UserEdit ref="editRef" :current-org="currentOrg" @submit="getUserData" />
+    <UserAuthorization ref="authorizationRef" :user-id="currentUser.id || ''" />
+  </div>
+</template>

package/src/views/user/interface.ts

@@ -0,0 +1,43 @@
+export type Query = API.PubUserQueryDto;
+export type Data = API.PubUserBo;
+export type AddForm = API.PubUserAddDto & Record<string, unknown>;
+export type EditForm = API.PubUserUpdateDto & Record<string, unknown>;
+
+interface BaseSelect {
+  value: string
+  label: string
+}
+export type Form = Omit<API.PubUserBo, 'userOrgList'> & {
+  userOrgList: Array<Omit<API.PubUserOrgBo, 'roles' | 'posts'> & { positionList: BaseSelect[] }>
+};
+
+export interface CurrentOrg {
+  orgId?: string
+  orgName?: string
+}
+
+export interface AuthItem {
+  dataPermissionIds?: any[]
+  roleIds?: any[]
+  userId?: string
+  orgId: string
+  orgName: string
+  main: boolean
+  [key: string]: any
+}
+
+export interface SelectItem {
+  label: string
+  key: string
+}
+
+export type OptionItem = string | SelectItem;
+
+export interface ResultAuthItem {
+  dataPermissionIds: OptionItem[]
+  roleIds: OptionItem[]
+  userId: string
+  orgId: string
+  orgName: string
+  main: boolean
+}

package/src/views/watermark_setting/animationData.ts

@@ -0,0 +1,7 @@
+import darkEnableData from '@/assets/lottie/watermark/dark/enableWatermark.json?url';
+import lightEnableData from '@/assets/lottie/watermark/light/enableWatermark.json?url';
+
+export {
+  darkEnableData,
+  lightEnableData,
+};