@pubinfo-nightly/module-rbac 2025.11.14

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 { ProTable } from '@pubinfo/pro-components';
+import { Badge, message, Modal, Popover, Space } from 'ant-design-vue';
+import { getRbacUserUserDelete, postRbacUserUserPage, putRbacUserResetPassword } from '@/api/modules/rbac';
+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>;
+
+export 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,
+};

package/src/views/watermark_setting/index.vue

@@ -0,0 +1,229 @@
+<script setup lang="ts">
+import { message } from 'ant-design-vue';
+import { updateWatermark } from 'pubinfo-nightly';
+import { postSysconfigAddOrEidtSysThemeStyleConfig } from '@/api/modules/configData';
+import { useSettingsStore } from '@/stores';
+import AnimationItem from '../components/animation_item.vue';
+import {
+  darkEnableData,
+  lightEnableData,
+} from './animationData.ts';
+
+defineOptions({
+  name: 'WatermarkSetting',
+});
+
+const VNodes = defineComponent({
+  props: {
+    vnodes: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  setup(props) {
+    return () => props.vnodes;
+  },
+});
+
+const settingsStore = useSettingsStore();
+
+const animateItem = ref();
+
+function play() {
+  if (animateItem.value) {
+    animateItem.value?.play();
+  }
+}
+
+function stop() {
+  if (animateItem.value) {
+    animateItem.value?.stop();
+  }
+}
+
+const watermarkForm = ref({
+  text: settingsStore.globalSettings.watermark.text,
+  x: settingsStore.globalSettings.watermark.x,
+  y: settingsStore.globalSettings.watermark.y,
+  x_space: settingsStore.globalSettings.watermark.x_space,
+  y_space: settingsStore.globalSettings.watermark.y_space,
+  alpha: settingsStore.globalSettings.watermark.alpha,
+  width: settingsStore.globalSettings.watermark.width,
+  enable: settingsStore.globalSettings.watermark.enable,
+});
+
+const options = reactive([{
+  label: '组织名称',
+  value: 'O',
+}, {
+  label: '用户名称',
+  value: 'U',
+}, {
+  label: '组织名称 用户名称',
+  value: 'OU',
+}]);
+const name = ref('');
+function addItem(e: any) {
+  e.preventDefault();
+  if (name.value) {
+    options.push({
+      label: name.value,
+      value: name.value,
+    });
+    name.value = '';
+  }
+}
+
+function setStyle(jsonStr: string) {
+  postSysconfigAddOrEidtSysThemeStyleConfig({ content: jsonStr }).then((res: API.ResponseDataBoolean) => {
+    if (res.success) {
+      message.success('设置成功');
+      updateWatermark();
+    }
+  });
+}
+
+function onReset() {
+  watermarkForm.value = {
+    text: settingsStore.globalSettings.watermark.text,
+    x: settingsStore.globalSettings.watermark.x,
+    y: settingsStore.globalSettings.watermark.y,
+    x_space: settingsStore.globalSettings.watermark.x_space,
+    y_space: settingsStore.globalSettings.watermark.y_space,
+    alpha: settingsStore.globalSettings.watermark.alpha,
+    width: settingsStore.globalSettings.watermark.width,
+    enable: settingsStore.globalSettings.watermark.enable,
+  };
+}
+
+function onSubmit() {
+  settingsStore.globalSettings.watermark.text = watermarkForm.value.text;
+  settingsStore.globalSettings.watermark.width = watermarkForm.value.width;
+  settingsStore.globalSettings.watermark.x = watermarkForm.value.x;
+  settingsStore.globalSettings.watermark.y = watermarkForm.value.y;
+  settingsStore.globalSettings.watermark.x_space = watermarkForm.value.x_space;
+  settingsStore.globalSettings.watermark.y_space = watermarkForm.value.y_space;
+  settingsStore.globalSettings.watermark.alpha = watermarkForm.value.alpha;
+  settingsStore.globalSettings.watermark.enable = watermarkForm.value.enable;
+
+  const jsonStr = JSON.stringify({
+    watermark: {
+      text: watermarkForm.value.text,
+      width: watermarkForm.value.width,
+      x: watermarkForm.value.x,
+      y: watermarkForm.value.y,
+      x_space: watermarkForm.value.x_space,
+      y_space: watermarkForm.value.y_space,
+      alpha: watermarkForm.value.alpha,
+      enable: watermarkForm.value.enable,
+    },
+  });
+
+  setStyle(jsonStr);
+}
+</script>
+
+<template>
+  <div class="w-full h-full p-10px">
+    <div class="w-full h-full bg-white overflow-y-auto p-10px box-border dark:bg-[#141414]">
+      <div class="h-[38px] pl-[16px] flex flex-row items-center bar-header">
+        <PubinfoIcon name="icon_watermark" class="text-base mr-[6px]" :size="22" />
+        <span class="text-[16px] text-[#1d2129] dark:text-[#C9CDD4]">页面水印</span>
+      </div>
+      <div class="px-30px py-20px max-w-1300px flex flex-wrap">
+        <div
+          class="w-400px h-270px mr-60px mb-20px item_ani dark:bg-[#3a3e43]! dark:border-transparent!"
+          @mouseenter="play()"
+          @mouseleave="stop()"
+        >
+          <div class="h-full w-[75%] rounded-[8px] jb flex justify-center">
+            <AnimationItem
+              ref="animateItem"
+              :light-animation-data="lightEnableData"
+              :dark-animation-data="darkEnableData"
+            />
+          </div>
+        </div>
+        <div class="pt-0px">
+          <div class="flex items-center mb-20px w-560px">
+            <label class="w-90px mr-10px text-[#4E5969] text-[14px] dark:text-[#C9CDD4]">水印文案</label>
+            <a-select
+              v-model:value="watermarkForm.text"
+              class="flex-1"
+              :options="options.map(item => ({ ...item }))"
+            >
+              <template #dropdownRender="{ menuNode: menu }">
+                <VNodes :vnodes="menu" />
+                <a-divider style="margin: 4px 0;" />
+                <a-space style="padding: 4px 8px;">
+                  <a-input v-model:value="name" placeholder="输入你需要的内容" />
+                  <a-button type="text" @click="addItem">
+                    <template #icon>
+                      <plus-outlined />
+                    </template>
+                    增加选项
+                  </a-button>
+                </a-space>
+              </template>
+            </a-select>
+          </div>
+          <div class="flex items-center mb-20px w-560px">
+            <label class="w-90px mr-10px text-[#4E5969] text-[14px] dark:text-[#C9CDD4]">水印宽度</label>
+            <a-input-number v-model:value="watermarkForm.width" class="flex-1" :min="1" />
+          </div>
+          <div class="flex items-center mb-20px w-560px">
+            <label class="w-90px mr-10px text-[#4E5969] text-[14px] dark:text-[#C9CDD4]">水印起始位置</label>
+            <div class="flex-1">
+              <a-space>
+                <a-input-number v-model:value="watermarkForm.x" addon-before="x轴坐标" :min="1" />
+                <a-input-number v-model:value="watermarkForm.y" addon-before="y轴坐标" :min="1" />
+              </a-space>
+            </div>
+          </div>
+          <div class="flex items-center mb-20px w-560px">
+            <label class="w-90px mr-10px text-[#4E5969] text-[14px] dark:text-[#C9CDD4]">水印x轴间距</label>
+            <a-input-number v-model:value="watermarkForm.x_space" class="flex-1" :min="1" />
+          </div>
+          <div class="flex items-center mb-20px w-560px">
+            <label class="w-90px mr-10px text-[#4E5969] text-[14px] dark:text-[#C9CDD4]">水印y轴间距</label>
+            <a-input-number v-model:value="watermarkForm.y_space" class="flex-1" :min="1" />
+          </div>
+          <div class="flex items-center mb-20px w-560px">
+            <label class="w-90px mr-10px text-[#4E5969] text-[14px] dark:text-[#C9CDD4]">水印透明度</label>
+            <a-input-number v-model:value="watermarkForm.alpha" class="flex-1" :min="0" :step="0.01" />
+          </div>
+          <div class="flex items-center mb-20px w-560px">
+            <label class="w-90px mr-10px text-[#4E5969] text-[14px] dark:text-[#C9CDD4]">水印开启</label>
+            <a-switch v-model:checked="watermarkForm.enable" checked-children="开启" un-checked-children="关闭" />
+          </div>
+          <div class="flex items-center flex-row-reverse w-560px">
+            <a-button style="margin-left: 10px;" @click="onReset">
+              重置
+            </a-button>
+            <a-button type="primary" @click="onSubmit">
+              确定
+            </a-button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.item_ani {
+  --at-apply: flex flex-col pt-[26px] rounded-lg;
+  place-items: center center;
+  background-color: var(--g-bg);
+  border: 1px solid var(--g-tabbar-tab-hover-bg);
+}
+
+.item_ani .jb {
+  background: linear-gradient(180deg, var(--g-container-bg) 0%, #fff0 100%);
+}
+
+.bar-header {
+  background: var(--g-bg);
+}
+</style>