@pubinfo-nightly/module-rbac 2025.11.14

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

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import type { Rule } from 'ant-design-vue/es/form';
+import type { FormExpose } from 'ant-design-vue/es/form/Form';
+import { useToggle } from '@vueuse/core';
+import { message } from 'ant-design-vue';
+import { getRbacOrgRoleGetByOrgId, postRbacOrgRoleSaveOrgRole } from '@/api/modules/rbac';
+import useAppAndResource from '@/components/ResourceSelector/hooks/useAppAndResource';
+import { RoleSelector } from '@/components/RoleSelector';
+
+defineOptions({
+  name: 'DrawerRole',
+});
+
+const emit = defineEmits(['submit']);
+
+const {
+  resourceModelRef,
+  selectedResources,
+  setSelectedResources,
+  openResourceModel,
+} = useAppAndResource();
+
+const rules: Record<string, Rule[]> = {
+  isInherit: [{ required: true, message: '请选择是否可继承', trigger: 'change' }],
+};
+
+const state = reactive<{ title: string, type: string }>({
+  title: '',
+  type: '',
+});
+const [open, setOpen] = useToggle(false);
+const formRef = ref<FormExpose>();
+const form = ref<Partial<API.PubOrgRoleBo>>({ isInherit: '0' });
+const orgId = ref('');
+async function onOpen(record?: API.PubRoleResourceBo) {
+  orgId.value = record?.id || '';
+  const fv = await getRbacOrgRoleGetByOrgId({ orgId: orgId.value });
+  form.value = fv.data || {};
+  setOpen(true);
+}
+
+const [loading, setLoading] = useToggle(false);
+
+const roleModelRef = ref();
+function chooseRole() {
+  const selectedValue = (form.value.roleList || []).map((item: API.PubRole) => ({ value: item.id, label: item.name }));
+  roleModelRef.value.open(selectedValue);
+}
+function onRoleSelected(data: any[]) {
+  form.value.roleList = data.map(e => ({ id: e.value, name: e.label }));
+}
+function onSubmit() {
+  formRef.value?.validate().then(() => {
+    setLoading(true);
+    const rIds = (form.value.roleList || []).map((item: API.PubRole) => {
+      // 在下拉框中选择之后，roleIds每一项的值会变成一个对象
+      if (typeof item === 'object' && item.id) {
+        return item.id;
+      }
+      // 若未更改过，其原始值是string，直接返回
+      return '';
+    });
+    postRbacOrgRoleSaveOrgRole({ orgId: orgId.value, roleIds: rIds.join(','), isInherit: form.value.isInherit || '0' })
+      .then((res) => {
+        if (res.success) {
+          message.success(`授权成功！`);
+          setOpen(false);
+          emit('submit');
+        }
+      })
+      .finally(() => setLoading(false));
+  });
+}
+function close() {
+  form.value = {
+    isInherit: '0',
+  };
+  setOpen(false);
+}
+
+defineExpose({
+  open: onOpen,
+});
+</script>
+
+<template>
+  <a-drawer
+    v-model:open="open"
+    title="组织角色授权"
+    placement="right"
+    :width="600"
+    destroy-on-close
+    :footer-style="{ textAlign: 'right' }"
+    @close="close"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-align="left"
+      :label-col="{ span: 4 }"
+    >
+      <a-form-item label="是否可继承" name="name">
+        <a-switch v-model:checked="form.isInherit" checked-value="1" un-checked-value="0" />
+        <!-- <a-radio-group v-model:value="form.isInherit">
+          <a-radio value="1">
+            是
+          </a-radio>
+          <a-radio value="0">
+            否
+          </a-radio>
+        </a-radio-group> -->
+      </a-form-item>
+      <a-form-item label="基础角色权限" name="roleList">
+        <a-button type="primary" @click="chooseRole">
+          选择角色
+        </a-button>
+      </a-form-item>
+      <a-form-item v-show="form.roleList && form.roleList.length > 0" label="已选角色">
+        <div class="mt-2px">
+          <template v-for="ite in form.roleList" :key="ite.id">
+            <a-tooltip v-if="(ite?.name || '').length > 20" :title="ite.name">
+              <span class="inline-block mb-6px mr-6px bg-[#E8F3FF] rounded-2px px-8px py-3px whitespace-nowrap dark:bg-[#141414]">
+                {{ `${ite?.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]">
+              {{ ite.name }}
+            </span>
+          </template>
+        </div>
+      </a-form-item>
+      <a-form-item v-show="form.inheritRoleList && form.inheritRoleList.length > 0" label="继承角色">
+        <div class="mt-2px">
+          <template v-for="ite in form.inheritRoleList" :key="ite.id">
+            <a-tooltip v-if="(ite?.name || '').length > 20" :title="ite.name">
+              <span class="inline-block mb-6px mr-6px bg-[#E8F3FF] rounded-2px px-8px py-3px whitespace-nowrap dark:bg-[#141414]">
+                {{ `${ite?.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]">
+              {{ ite.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>
+
+    <RoleSelector ref="roleModelRef" @select="onRoleSelected" />
+  </a-drawer>
+</template>

package/src/views/organization/enum.ts

@@ -0,0 +1,26 @@
+export enum ACTION {
+  AUTHORIZE = '授权',
+  ADD = '新增',
+  ADDNEXT = '新增下级',
+  /** 详情 */
+  EDIT = '编辑',
+  /** 删除 */
+  REMOVE = '删除',
+}
+
+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 },
+];

package/src/views/organization/index.vue

@@ -0,0 +1,497 @@
+<script setup lang="ts">
+import type { VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
+import { useToggle } from '@vueuse/core';
+import { Badge, message, Modal } from 'ant-design-vue';
+import { cloneDeep } from 'lodash-es';
+import { VxeColumn, VxeTable } from 'vxe-table';
+import { getRbacOrgDeleteOrg, getRbacOrgOrgListByParentId, getRbacOrgSearchTreeById, postRbacOrgSearch } from '@/api/modules/rbac';
+import DrawerOrganization from './components/drawerOrganization.vue';
+import DrawerRole from './components/drawerRole.vue';
+import { ACTION } from './enum';
+
+defineOptions({
+  name: 'Organization',
+});
+const VNodes = defineComponent({
+  props: {
+    vnodes: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  setup(props) {
+    return () => props.vnodes;
+  },
+});
+
+type ChilData = API.PubOrg & { children?: API.PubOrg[], hasChild?: boolean };
+
+const [loading, setLoading] = useToggle(false);
+/** 下拉查询的相关数据 start */
+const formState: Ref<API.OrgSearchQuery> = ref({ currentPage: 1, pageSize: 10, doSearchTotal: true });
+const searchId: Ref<string> = ref('');
+const searchText: Ref<string> = ref('');
+const selectOptions = ref<any[]>([]);
+const searchTotal: Ref<number> = ref(0);
+// 保留searchResultData，为了在查询状态下，当展开下一级时，使用的是查询结果的数据
+const searchResultData: Ref<ChilData[]> = ref([]);
+// 查询后的数据是需要全部展开的，所以除了最后一级之外其余全部存储在expandedRowKeys
+const expandedRowKeys = ref<string[]>([]);
+/** 下拉查询的相关数据 end */
+
+const query = ref<API.getRbacOrgOrgListByParentIdParams>({ parentId: '0' });
+
+const tableData = ref<ChilData[]>([]);
+
+const tableRef = ref<VxeTableInstance<ChilData>>();
+const DrawerOrganizationRef = ref();
+const DrawerRoleRef = ref();
+const isSearch = ref(false);
+let timeout: any;
+
+function handleZuZhiSearch(val: string) {
+  // console.log('--val:', val);
+  formState.value.currentPage = 1;
+  if (val.length > 0) {
+    searchText.value = val;
+    debounce(() => {
+      const params = { ...formState.value, keyWord: searchText.value };
+      getSelectData(params);
+    });
+  }
+  else {
+    selectOptions.value = [];
+    searchTotal.value = 0;
+  }
+}
+
+function getSelectData(params: any) {
+  postRbacOrgSearch(params).then((res: any) => {
+    if (res?.success) {
+      selectOptions.value = res.data.records.map((item: API.PubOrg) => {
+        return {
+          label: item.name,
+          value: item.id,
+          idPath: item.idPath,
+        };
+      });
+      searchTotal.value = res.data.total;
+    }
+  });
+}
+function debounce(callback: () => void, delay = 300): void {
+  clearTimeout(timeout);
+  timeout = setTimeout(() => {
+    callback();
+  }, delay);
+}
+
+function handleChange(): void {
+  const params = { ...formState.value, keyWord: searchText.value };
+  getSelectData(params);
+}
+
+function handleSelectChange(value: any): void {
+  // 当清空数据时，需要清空下拉数据
+  if (value === undefined) {
+    selectOptions.value = [];
+    searchTotal.value = 0;
+    formState.value.currentPage = 1;
+    searchId.value = '';
+  }
+}
+
+async function onSearch() {
+  if (searchId.value === '') {
+    isSearch.value = false;
+    generateData();
+  }
+  else {
+    const idPath = selectOptions.value.find(item => item.value === searchId.value).idPath;
+    expandedRowKeys.value = idPath.split(',');
+    // 删除当前最后一级节点，使其处于不展开的状态
+    expandedRowKeys.value.pop();
+    const res = await getRbacOrgSearchTreeById({ id: searchId.value });
+    searchResultData.value = addPropertyToTreeNodes([res.data!]);
+    tableData.value = cloneDeep(searchResultData.value);
+    tableRef.value?.reloadData(tableData.value);
+    if (expandedRowKeys.value.length > 0) {
+      expandedRowKeys.value.forEach((key) => {
+        setTimeout(() => {
+          const row = getNodeById(tableData.value, key);
+          tableRef.value?.reloadTreeExpand(row);
+        }, 200);
+      });
+    }
+  }
+}
+
+function addPropertyToTreeNodes(nodes: ChilData[]): ChilData[] {
+  return nodes.map((node) => {
+    // 为当前节点添加新属性
+    const newNode: ChilData = {
+      ...node,
+      hasChild: !node.leaf,
+    };
+
+    // 如果当前节点有子节点，递归调用addPropertyToTreeNodes
+    if (node.children && node.children.length > 0) {
+      newNode.children = addPropertyToTreeNodes(node.children);
+    }
+
+    return newNode;
+  });
+}
+
+function reset() {
+  searchId.value = '';
+  isSearch.value = false;
+  generateData();
+}
+
+async function generateData() {
+  expandedRowKeys.value = [];
+  setLoading(true);
+  try {
+    const res = await getRbacOrgOrgListByParentId({ parentId: '0' });
+    if (res?.success) {
+      tableData.value = res.data?.map((e: API.PubOrg) => {
+        return {
+          ...e,
+          children: [],
+          hasChild: !e.leaf,
+        };
+      }) ?? [];
+      tableRef.value?.reloadData(tableData.value);
+    }
+  }
+  finally {
+    setLoading(false);
+  }
+}
+
+generateData();
+
+const operateRow = ref<ChilData>({});
+const operateType = ref<string>('');
+
+async function updateData() {
+  if (operateType.value === ACTION.ADD) {
+    searchId.value = '';
+    isSearch.value = false;
+    generateData();
+  }
+
+  if (operateType.value === ACTION.ADDNEXT) {
+    if (operateRow.value.hasChild) {
+      tableRef.value?.setTreeExpand(operateRow.value.children, false);
+      tableRef.value?.reloadTreeExpand(operateRow.value);
+    }
+    // 没有子节点的新增下级需要刷新父节点，使其节点前面多一个加号
+    else {
+      const parentNode = getNodeById(tableData.value, operateRow.value.parentId!);
+      if (parentNode) {
+        tableRef.value?.setTreeExpand(parentNode.children, false);
+        tableRef.value?.reloadTreeExpand(parentNode);
+      }
+      else {
+        generateData();
+      }
+    }
+  }
+
+  // 编辑某一行数据后，把父节点关闭然后重新打开，页面数据才更新
+  if (operateType.value === ACTION.EDIT) {
+    const parentNode = getNodeById(tableData.value, operateRow.value.parentId!);
+    if (!parentNode) {
+      await generateData();
+      return;
+    }
+    tableRef.value?.setTreeExpand(parentNode.children, false);
+    tableRef.value?.reloadTreeExpand(parentNode);
+  }
+}
+/* 获取某节点的信息 */
+function getNodeById(nodes: any, id: string): any {
+  for (const node of nodes) {
+    if (node.id === id) {
+      return node;
+    }
+    if (node.children) {
+      const foundNode = getNodeById(node.children, id);
+      if (foundNode) {
+        return foundNode;
+      }
+    }
+  }
+  return undefined;
+}
+
+const treeConfig = reactive<VxeTablePropTypes.TreeConfig<ChilData>>({
+  lazy: true,
+  transform: true,
+  reserve: false,
+  rowField: 'id',
+  parentField: 'parentId',
+  hasChildField: 'hasChild',
+  childrenField: 'children',
+  iconOpen: 'vxe-icon-minus',
+  iconClose: 'vxe-icon-add',
+  loadMethod({ row }) {
+    if (expandedRowKeys.value.includes(row.id!)) {
+      return new Promise((resolve) => {
+        const node = getNodeById(searchResultData.value, row.id!);
+        const childs = cloneDeep(node.children);
+        resolve(childs);
+      });
+    }
+    else {
+    // 异步加载子节点
+      query.value.parentId = row.id;
+      return new Promise((resolve) => {
+        getRbacOrgOrgListByParentId({
+          ...query.value,
+        }).then((res: any) => {
+          if (res?.success) {
+            const childs = res.data?.map((e: ChilData) => {
+              return {
+                ...e,
+                hasChild: !e.leaf,
+              };
+            });
+            resolve(childs);
+          }
+        // console.log('*************', tableData.value);
+        });
+      });
+    }
+  },
+});
+function onAction(key: string, record?: ChilData): void {
+  operateType.value = key;
+  switch (key) {
+    case ACTION.AUTHORIZE:
+      DrawerRoleRef.value.open(record);
+      break;
+    case ACTION.ADDNEXT:
+      operateRow.value = record!;
+      DrawerOrganizationRef.value.open(key, record);
+      break;
+    case ACTION.ADD:
+      DrawerOrganizationRef.value.open(key);
+      break;
+    case ACTION.EDIT:
+      operateRow.value = record!;
+      DrawerOrganizationRef.value.open(key, record);
+      break;
+    case ACTION.REMOVE:
+      operateRow.value = record!;
+      // console.log('remove', operateRow.value, tableData.value);
+      Modal.confirm({
+        title: '删除',
+        content: '确定要删除该组织吗？',
+        onOk() {
+          getRbacOrgDeleteOrg({ id: record?.id as string }).then((res: API.ResponseDataVoid) => {
+            if (res.success) {
+              message.success('删除成功');
+              const parentRow = getNodeById(tableData.value, operateRow.value.parentId!);
+              if (parentRow) {
+                if (parentRow.children?.length > 1) {
+                  tableRef.value?.remove(operateRow.value);
+                }
+                else {
+                // 如果他的父节点只有一个子节点，那么刷新他的父节点的父节点，使其没有前面的加号
+                  const opRow = getNodeById(tableData.value, parentRow.parentId!);
+                  if (opRow) {
+                    tableRef.value?.setTreeExpand(opRow.children, false);
+                    tableRef.value?.reloadTreeExpand(opRow);
+                  }
+                  else {
+                    generateData();
+                  }
+                }
+              }
+              else {
+                generateData();
+              }
+            }
+          });
+        },
+      });
+
+      break;
+  }
+}
+</script>
+
+<template>
+  <div w-full h-full p-10px>
+    <div class="org_page bg-[#fff] dark:bg-[#141414]">
+      <div class="search_panel">
+        <div class="left">
+          <label class="dark:text-[#f7f7f7]">组织名称：</label>
+          <a-select
+            v-model:value="searchId"
+            class="w-400px!"
+            show-search
+            allow-clear
+            :filter-option="false"
+            :options="selectOptions.map(item => ({ ...item }))"
+            @search="handleZuZhiSearch"
+            @change="handleSelectChange"
+          >
+            <template #dropdownRender="{ menuNode: menu }">
+              <VNodes :vnodes="menu" />
+              <div class="text-right">
+                <a-pagination
+                  v-if="searchTotal > 10"
+                  v-model:current="formState.currentPage"
+                  :show-size-changer="false"
+                  size="small"
+                  :total="searchTotal"
+                  @change="handleChange"
+                />
+              </div>
+            </template>
+          </a-select>
+        </div>
+        <div class="right">
+          <a-button @click="reset">
+            重置
+          </a-button>
+          <a-button class="ml-10px" type="primary" @click="onSearch">
+            搜索
+          </a-button>
+        </div>
+      </div>
+      <div class="px-16px divider">
+        <a-divider />
+      </div>
+      <div class="body_panel" style="height: calc(100% - 74px);">
+        <div class="h-48px flex items-center px-16px">
+          <a-button v-auth="'org_add'" type="primary" @click="onAction(ACTION.ADD)">
+            <PlusCircleOutlined />
+            {{ ACTION.ADD }}
+          </a-button>
+        </div>
+        <div class="px-16px" style="height: calc(100% - 50px);">
+          <VxeTable
+            ref="tableRef"
+            border="inner"
+            keep-source
+            :loading="loading"
+            :auto-resize="true"
+            height="auto"
+            :row-config="{ keyField: 'id', isHover: true }"
+            :column-config="{ resizable: true }"
+            :tree-config="treeConfig"
+            :data="tableData"
+            :scroll-y="{ enabled: true }"
+            show-overflow
+          >
+            <VxeColumn
+              field="name"
+              title="组织名称"
+              width="300"
+              tree-node
+            />
+            <VxeColumn field="enable" title="是否启动">
+              <template #default="{ row }">
+                <Badge v-if="row.enable" status="success" text="启用" />
+                <Badge v-else status="error" text="禁用" />
+              </template>
+            </VxeColumn>
+            <VxeColumn field="contactPerson" title="联系人" />
+            <VxeColumn field="contactMobile" title="联系电话" />
+            <VxeColumn field="type" title="组织类型" />
+            <VxeColumn field="code" title="组织编码" />
+            <VxeColumn field="action" title="操作" width="280">
+              <template #default="{ row }">
+                <a-space>
+                  <a v-auth="'org_authorize'" class="flex items-center" @click="onAction(ACTION.AUTHORIZE, row)">
+                    <PubinfoIcon name="authorize" mr-1 text-base />
+                    <span>{{ ACTION.AUTHORIZE }}</span>
+                  </a>
+                  <a v-auth="'org_add_child'" class="flex items-center" @click="onAction(ACTION.ADDNEXT, row)">
+                    <PubinfoIcon name="add-child" class="text-base" />
+                    <span class="ml-4px">{{ ACTION.ADDNEXT }}</span>
+                  </a>
+                  <a v-auth="'org_edit'" class="flex items-center" @click="onAction(ACTION.EDIT, row)">
+                    <PubinfoIcon name="edit" class="text-base" />
+                    <span class="ml-4px">{{ ACTION.EDIT }}</span>
+                  </a>
+                  <span v-auth="'org_remove'" class="flex items-center text-red-500 hover:cursor-pointer hover:opacity-80" @click="onAction(ACTION.REMOVE, row)">
+                    <PubinfoIcon name="remove" class="text-base" />
+                    <span class="ml-4px">{{ ACTION.REMOVE }}</span>
+                  </span>
+                </a-space>
+              </template>
+            </VxeColumn>
+
+            <template #empty>
+              <div class="flex-center">
+                <img src="@/assets/icons/not-data.svg" alt="">
+              </div>
+            </template>
+          </VxeTable>
+        </div>
+      </div>
+    </div>
+    <DrawerOrganization
+      ref="DrawerOrganizationRef"
+      @submit="updateData"
+    />
+    <DrawerRole ref="DrawerRoleRef" />
+  </div>
+</template>
+
+<style scoped>
+.org_page {
+  --at-apply: [list-style:none] relative box-border w-full h-full text-sm leading-[1.5714] text-[rgb(0_0_0_/_88%)] shadow-[0_1px_2px_0_rgba(0,0,0,0.03),0_1px_6px_-1px_rgba(0,0,0,0.02),0_2px_4px_0_rgba(0,0,0,0.02)] m-0 p-0 rounded-lg;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+.search_panel {
+  --at-apply: flex items-center justify-between pl-6 pr-4 py-4;
+}
+
+.search_panel .left {
+  --at-apply: flex items-center;
+}
+.search_panel .right {
+  --at-apply: flex items-center;
+}
+:deep(.ant-divider-horizontal) {
+  --at-apply: m-0;
+}
+</style>
+
+<style scoped>
+:deep(.vxe-table--body-wrapper) {
+  --at-apply: overflow-x-hidden;
+}
+
+:deep(.vxe-tree--btn-wrapper) {
+  --at-apply: w-[15px] h-[15px] border rounded-md border-solid border-[#f0f0f0];
+  width: 15px !important;
+  height: 15px !important;
+}
+
+:deep(.vxe-tree--btn-wrapper:hover) {
+  border-color: #69b1ff !important;
+}
+
+:deep(.vxe-tree--btn-wrapper:hover .vxe-tree--node-btn) {
+  color: #69b1ff !important;
+}
+
+:deep(.vxe-header--column .vxe-resizable) {
+  --at-apply: w-px h-[1.6em] right-0 bottom-3.5;
+  background-color: var(--vxe-table-border-color);
+}
+
+:deep([class*="vxe-icon-"]) {
+  --at-apply: text-xs scale-[0.8];
+}
+</style>

package/src/views/other_setting/animationData.ts

@@ -0,0 +1,15 @@
+import darkEnableCopyrightData from '@/assets/lottie/other/dark/enableCopyright.json?url';
+import darkEnableHotkeysData from '@/assets/lottie/other/dark/enableHotkeys.json?url';
+import darkSwitchTabbarAndToolbarData from '@/assets/lottie/other/dark/switchTabbarAndToolbar.json?url';
+import lightEnableCopyrightData from '@/assets/lottie/other/light/enableCopyright.json?url';
+import lightEnableHotkeysData from '@/assets/lottie/other/light/enableHotkeys.json?url';
+import lightSwitchTabbarAndToolbarData from '@/assets/lottie/other/light/switchTabbarAndToolbar.json?url';
+
+export {
+  darkEnableCopyrightData,
+  darkEnableHotkeysData,
+  darkSwitchTabbarAndToolbarData,
+  lightEnableCopyrightData,
+  lightEnableHotkeysData,
+  lightSwitchTabbarAndToolbarData,
+};