@pubinfo-nightly/module-rbac 2025.11.14

package/src/views/log_center/operate_history.vue

@@ -0,0 +1,228 @@
+<script setup lang="tsx">
+import type { ProColumns } from '@pubinfo/pro-components';
+import { ProTable } from '@pubinfo/pro-components';
+import { postLogOperatePage } from '@/api/modules/log';
+import OperateHistoryDetail from './components/operateHistoryDetail.vue';
+
+defineOptions({
+  name: 'OperateHistory',
+});
+
+const { auth } = useAuth();
+const tableRef = ref();
+const drawerVisible = ref(false);
+const detailData = ref<API.PubOperateLogDto>();
+
+const columns: ProColumns<API.PubOperateLogDto> = [
+  {
+    valueType: 'a-input',
+    hideInTable: true,
+    title: '模块标题',
+    dataIndex: 'moduleName',
+    fieldProps: {
+      placeholder: '请输入',
+      allowClear: true,
+    },
+  },
+  {
+    valueType: 'a-input',
+    hideInTable: true,
+    title: '操作人姓名 ',
+    dataIndex: 'realName',
+    fieldProps: {
+      placeholder: '请输入',
+      allowClear: true,
+    },
+  },
+  {
+    valueType: 'a-input',
+    hideInTable: true,
+    title: '操作人账号 ',
+    dataIndex: 'loginName',
+    fieldProps: {
+      placeholder: '请输入',
+      allowClear: true,
+    },
+  },
+  {
+    valueType: 'a-input',
+    hideInTable: true,
+    title: '部门',
+    dataIndex: 'orgName',
+    fieldProps: {
+      placeholder: '请输入',
+      allowClear: true,
+    },
+  },
+  {
+    valueType: 'a-range-picker',
+    hideInTable: true,
+    title: '操作时间',
+    dataIndex: 'operateTime',
+    fieldProps: {
+      placeholder: ['开始时间', '结束时间'],
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      allowClear: true,
+    },
+  },
+  {
+    hideInSearch: true,
+    width: 60,
+    title: '序号',
+    customRender: ({ index }) => index + 1,
+  },
+  {
+    hideInSearch: true,
+    title: '模块标题',
+    dataIndex: 'moduleName',
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    width: 400,
+    title: '来源渠道',
+    dataIndex: 'requestUri',
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    title: '操作时间',
+    dataIndex: 'operateTime',
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    title: '操作人姓名',
+    dataIndex: 'realName',
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    title: '操作人账号',
+    dataIndex: 'loginName',
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    title: '操作人部门',
+    dataIndex: 'orgName',
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    title: '操作状态',
+    dataIndex: 'success',
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    title: '操作',
+    dataIndex: 'action',
+    width: 100,
+    fixed: 'right',
+    hideInTable() {
+      return !auth('operate_history_view');
+    },
+  },
+];
+
+onMounted(getListData);
+
+async function request(params: any) {
+  const { current, pageSize, moduleName, realName, loginName, orgName, operateTime } = params;
+  const ps: any = {
+    pageSize,
+    currentPage: current,
+    doSearchTotal: true,
+  };
+  if (moduleName) {
+    Object.assign(ps, { moduleName });
+  }
+  if (realName) {
+    Object.assign(ps, { realName });
+  }
+  if (orgName) {
+    Object.assign(ps, { orgName });
+  }
+  if (loginName) {
+    Object.assign(ps, { loginName });
+  }
+  if (operateTime && operateTime.length === 2) {
+    Object.assign(ps, {
+      operateStartTime: operateTime[0].format('YYYY-MM-DD HH:mm:ss'),
+      operateEndTime: operateTime[1].format('YYYY-MM-DD HH:mm:ss'),
+    });
+  }
+  const res: API.ResponseDataPageDataPubOperateLogDto = await postLogOperatePage(ps);
+  return {
+    success: res.success,
+    data: res.data?.records ?? [],
+    total: res.data?.total ?? 0,
+  };
+}
+
+function getListData() {
+  tableRef.value.reload();
+}
+
+function showDetailDrawer(record: API.PubOperateLogDto) {
+  drawerVisible.value = true;
+  detailData.value = record;
+}
+</script>
+
+<template>
+  <div
+    w-full
+    h-full
+    py-10px
+    px-10px
+    flex
+    flex-col
+  >
+    <ProTable
+      ref="tableRef"
+      row-key="id"
+      :request="request"
+      :columns="columns"
+      auto-height
+      :scroll="{ x: 1000 }"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'success'">
+          <div class="flex items-center">
+            <i class="status-mark" :class="[{ active: record.success }]" />
+            <span class="ml-4px">{{ record.success ? '正常' : '异常' }}</span>
+          </div>
+        </template>
+        <template v-if="column.dataIndex === 'action'">
+          <a-space>
+            <a
+              class="flex items-center"
+              @click="() => showDetailDrawer(record)"
+            >
+              <PubinfoIcon name="view" class="text-20px" />
+              <span class="ml-4px">查看</span>
+            </a>
+          </a-space>
+        </template>
+      </template>
+    </ProTable>
+    <OperateHistoryDetail
+      :visible="drawerVisible"
+      :data="detailData"
+      @close="drawerVisible = false"
+    />
+  </div>
+</template>
+
+<style scoped>
+.status-mark {
+  --at-apply: inline-block w-2 h-2 bg-[#aeaeae] mr-1 rounded-[50%];
+}
+
+.status-mark.active {
+  background: #01d689;
+}
+</style>

package/src/views/menu_setting/animationData.ts

@@ -0,0 +1,27 @@
+import darkEnableHotkeysData from '@/assets/lottie/menu/dark/enableHotkeys.json?url';
+import darkEnableSubMenuCollapseButtonData from '@/assets/lottie/menu/dark/enableSubMenuCollapseButton.json?url';
+import darkIsRoundedData from '@/assets/lottie/menu/dark/isRounded.json?url';
+import darkMenuActiveStyleData from '@/assets/lottie/menu/dark/menuActiveStyle.json?url';
+import darkSubMenuCollapseData from '@/assets/lottie/menu/dark/subMenuCollapse.json?url';
+import darkSubMenuUniqueOpenedData from '@/assets/lottie/menu/dark/subMenuUniqueOpened.json?url';
+import lightEnableHotkeysData from '@/assets/lottie/menu/light/enableHotkeys.json?url';
+import lightEnableSubMenuCollapseButtonData from '@/assets/lottie/menu/light/enableSubMenuCollapseButton.json?url';
+import lightIsRoundedData from '@/assets/lottie/menu/light/isRounded.json?url';
+import lightMenuActiveStyleData from '@/assets/lottie/menu/light/menuActiveStyle.json?url';
+import lightSubMenuCollapseData from '@/assets/lottie/menu/light/subMenuCollapse.json?url';
+import lightSubMenuUniqueOpenedData from '@/assets/lottie/menu/light/subMenuUniqueOpened.json?url';
+
+export {
+  darkEnableHotkeysData,
+  darkEnableSubMenuCollapseButtonData,
+  darkIsRoundedData,
+  darkMenuActiveStyleData,
+  darkSubMenuCollapseData,
+  darkSubMenuUniqueOpenedData,
+  lightEnableHotkeysData,
+  lightEnableSubMenuCollapseButtonData,
+  lightIsRoundedData,
+  lightMenuActiveStyleData,
+  lightSubMenuCollapseData,
+  lightSubMenuUniqueOpenedData,
+};

package/src/views/menu_setting/index.vue

@@ -0,0 +1,207 @@
+<script setup lang="ts">
+import { message } from 'ant-design-vue';
+import { postSysconfigAddOrEidtSysThemeStyleConfig } from '@/api/modules/configData';
+
+import { useSettingsStore } from '@/stores';
+import SetItem from '../components/setItem.vue';
+import {
+  darkEnableHotkeysData,
+  darkEnableSubMenuCollapseButtonData,
+  darkIsRoundedData,
+  darkMenuActiveStyleData,
+  darkSubMenuCollapseData,
+  darkSubMenuUniqueOpenedData,
+  lightEnableHotkeysData,
+  lightEnableSubMenuCollapseButtonData,
+  lightIsRoundedData,
+  lightMenuActiveStyleData,
+  lightSubMenuCollapseData,
+  lightSubMenuUniqueOpenedData,
+} from './animationData.ts';
+
+defineOptions({
+  name: 'MenuAnimationSetting',
+});
+
+const settingsStore = useSettingsStore();
+const menuMode = toRef(settingsStore.globalSettings.menu, 'menuMode');
+
+const styleOptions = [
+  { icon: 'i-jam-stop-sign', value: '' },
+  { icon: ['head', 'only-head'].includes(menuMode.value) ? 'i-ep-caret-top' : 'i-ep-caret-left', value: 'arrow' },
+  { icon: ['side', 'only-side'].includes(menuMode.value) ? 'i-tabler-minus-vertical' : 'i-tabler-minus', value: 'line' },
+  { icon: 'i-icon-park-outline-dot', value: 'dot' },
+];
+
+type Val = Exclude<Settings.menu['menuActiveStyle'], undefined>;
+
+const menuAnimationList = reactive<
+  {
+    type: string
+    name: string
+    descripe: string
+    open: boolean
+    activeStyle: Val
+    styleOptions?: typeof styleOptions
+    lightData: string
+    darkData: string
+  }[]
+>([
+  {
+    type: 'switch',
+    name: '次导航保持展开一个',
+    descripe: '开启该功能后，次导航只保持单个菜单的展开',
+    open: settingsStore.globalSettings.menu.subMenuUniqueOpened,
+    activeStyle: '',
+    lightData: lightSubMenuUniqueOpenedData,
+    darkData: darkSubMenuUniqueOpenedData,
+  },
+  {
+    type: 'switch',
+    name: '次导航是否折叠',
+    descripe: '',
+    open: settingsStore.globalSettings.menu.subMenuCollapse,
+    activeStyle: '',
+    lightData: lightSubMenuCollapseData,
+    darkData: darkSubMenuCollapseData,
+  },
+  {
+    type: 'switch',
+    name: '显示次导航折叠按钮',
+    descripe: '',
+    open: settingsStore.globalSettings.menu.enableSubMenuCollapseButton,
+    activeStyle: '',
+    lightData: lightEnableSubMenuCollapseButtonData,
+    darkData: darkEnableSubMenuCollapseButtonData,
+  },
+  {
+    type: 'switch',
+    name: '是否圆角',
+    descripe: '',
+    open: settingsStore.globalSettings.menu.isRounded,
+    activeStyle: '',
+    lightData: lightIsRoundedData,
+    darkData: darkIsRoundedData,
+  },
+  {
+    type: 'check',
+    name: '激活风格',
+    descripe: '',
+    open: true,
+    activeStyle: settingsStore.globalSettings.menu.menuActiveStyle,
+    styleOptions,
+    lightData: lightMenuActiveStyleData,
+    darkData: darkMenuActiveStyleData,
+  },
+  {
+    type: 'switch',
+    name: '是否启用快捷键',
+    descripe: '',
+    open: settingsStore.globalSettings.menu.enableHotkeys,
+    activeStyle: '',
+    lightData: lightEnableHotkeysData,
+    darkData: darkEnableHotkeysData,
+  },
+]);
+
+let jsonStr = '';
+function onChange(index: number, ck: boolean | Val) {
+  switch (index) {
+    case 0:
+      settingsStore.globalSettings.menu.subMenuUniqueOpened = ck as boolean;
+      jsonStr = JSON.stringify({
+        menu: {
+          subMenuUniqueOpened: ck,
+        },
+      });
+      break;
+    case 1:
+      settingsStore.globalSettings.menu.subMenuCollapse = ck as boolean;
+      jsonStr = JSON.stringify({
+        menu: {
+          subMenuCollapse: ck,
+        },
+      });
+      break;
+    case 2:
+      settingsStore.globalSettings.menu.enableSubMenuCollapseButton = ck as boolean;
+      jsonStr = JSON.stringify({
+        menu: {
+          enableSubMenuCollapseButton: ck,
+        },
+      });
+      break;
+    case 3:
+      settingsStore.globalSettings.menu.isRounded = ck as boolean;
+      jsonStr = JSON.stringify({
+        menu: {
+          isRounded: ck,
+        },
+      });
+      break;
+    case 4:
+      settingsStore.globalSettings.menu.menuActiveStyle = ck as Val;
+      jsonStr = JSON.stringify({
+        menu: {
+          menuActiveStyle: ck,
+        },
+      });
+      break;
+    case 5:
+      settingsStore.globalSettings.menu.enableHotkeys = ck as boolean;
+      jsonStr = JSON.stringify({
+        menu: {
+          enableHotkeys: ck,
+        },
+      });
+      break;
+  }
+  setStyle(jsonStr);
+}
+
+function setStyle(jsonStr: string) {
+  postSysconfigAddOrEidtSysThemeStyleConfig({ content: jsonStr }).then((res: API.ResponseDataBoolean) => {
+    if (res.success) {
+      message.success('设置成功');
+    }
+  });
+}
+</script>
+
+<template>
+  <div
+    w-full
+    h-full
+    p-10px
+  >
+    <div class="w-full h-full bg-white overflow-y-auto p-10px flex flex-col box-border dark:bg-[#141414]">
+      <div class="h-[38px] pl-[16px] flex flex-row items-center bar-header">
+        <PubinfoIcon name="icon_menu" class="text-base mr-[6px]" :size="22" />
+        <span class="text-[16px] text-[#1d2129] dark:text-[#C9CDD4]">导航栏</span>
+      </div>
+      <div class="mt-[22px] grid grid-cols-3 gap-[20px] px-30px w-full h-0 max-w-1500px" aspect="[3/2] ">
+        <SetItem
+          v-for="(item, index) in menuAnimationList"
+          :key="item.name"
+          class="mb-20px"
+          aspect="[9/6]"
+          :name="item.name"
+          :descripe="item.descripe"
+          :open="item.open"
+          :type="item.type"
+          :active-style="item.activeStyle"
+          :style-options="item.styleOptions"
+          :light-animation-data="item.lightData"
+          :dark-animation-data="item.darkData"
+          @change="(val: Val) => onChange(index, val)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.bar-header {
+  background: var(--g-bg);
+}
+</style>

package/src/views/organization/components/drawerOrganization.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 { getDictItemList } from '@/api/modules/configData';
+import { getRbacOrgInfo, postRbacOrgAddOrg, postRbacOrgUpdateOrg } from '@/api/modules/rbac';
+import { ACTION } from '../enum';
+
+defineOptions({
+  name: 'OrganizationEdit',
+});
+
+const emit = defineEmits(['submit']);
+
+const rules: Record<string, Rule[]> = {
+  name: [{ required: true, message: '请输入组织名称', trigger: 'blur' },
+    { max: 128, message: '长度不能超过128位', trigger: 'change' }],
+  code: [{ required: true, message: '请输入组织编码', trigger: 'blur' },
+    { max: 50, message: '长度不能超过50位', trigger: 'change' }],
+  type: [{ required: true, message: '请输入组织类型', trigger: 'blur' }],
+  areaCode: [{ max: 16, message: '长度不能超过16位', trigger: 'change' }],
+  creditCode: [{ max: 50, message: '长度不能超过50位', trigger: 'change' }],
+  contactPerson: [{ max: 50, message: '长度不能超过50位', trigger: 'change' }],
+  contactMobile: [{ max: 20, message: '长度不能超过20位', trigger: 'change' }],
+};
+const state = reactive({
+  title: '',
+  type: '',
+});
+const [open, setOpen] = useToggle(false);
+const formRef = ref<FormExpose>();
+const typeOptions: Ref<{ label?: string, value?: string }[] | undefined> = ref([]);
+
+getDictItemList({ dictCode: 'orgType' }).then((res: API.ResponseDataListDictItemVo) => {
+  typeOptions.value = res.data?.map((e) => {
+    return {
+      label: e.dictLabel,
+      value: e.dictValue,
+    };
+  });
+});
+const form = ref<Partial<API.PubOrg & { parentName: string }>>({ parentId: '', enable: true });
+async function onOpen(key: ACTION, record?: API.PubOrg) {
+  setOpen(true);
+  state.title = key;
+  if (key === ACTION.EDIT) {
+    const res = await getRbacOrgInfo({ id: record?.id as string });
+    if (res.success) {
+      form.value = res.data ?? {};
+    }
+  }
+  else if (key === ACTION.ADDNEXT) {
+    form.value = {
+      parentName: record?.name,
+      parentId: record?.id,
+      enable: true,
+      district: false,
+    };
+  }
+  else {
+    form.value = {
+      parentId: '',
+      enable: true,
+      district: false,
+    };
+  }
+}
+
+const [loading, setLoading] = useToggle(false);
+function onSubmit() {
+  const request = state.title === ACTION.EDIT ? postRbacOrgUpdateOrg : postRbacOrgAddOrg;
+  formRef.value?.validate().then(() => {
+    setLoading(true);
+    const params: any = { ...form.value };
+    request(params)
+      .then((res: API.ResponseDataPubOrg) => {
+        if (res.success) {
+          message.success(`${state.title}成功！`);
+          setOpen(false);
+          emit('submit', { ...form.value });
+        }
+      })
+      .finally(() => setLoading(false));
+  });
+}
+function close() {
+  form.value = {
+    enable: false,
+  };
+  setOpen(false);
+}
+
+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: 6 }"
+      :label-wrap="true"
+    >
+      <a-form-item v-if="form.parentId !== '' && form.parentId !== '0'" label="所属上级">
+        {{ form.parentName }}
+      </a-form-item>
+      <a-form-item label="组织名称" name="name">
+        <a-input v-model:value="form.name" />
+      </a-form-item>
+      <a-form-item label="组织编码" name="code">
+        <a-input v-model:value="form.code" />
+      </a-form-item>
+      <a-form-item label="组织类型" name="type">
+        <a-select v-model:value="form.type" :options="typeOptions" />
+      </a-form-item>
+      <a-form-item label="是否行政区划">
+        <a-switch v-model:checked="form.district" />
+      </a-form-item>
+      <a-form-item v-if="form.district" label="行政区划编码" name="areaCode">
+        <a-input v-model:value="form.areaCode" />
+      </a-form-item>
+      <a-form-item label="是否启用">
+        <a-switch v-model:checked="form.enable" />
+      </a-form-item>
+      <a-form-item label="排序">
+        <a-input-number v-model:value="form.sort" />
+      </a-form-item>
+      <a-form-item label="统一社会信用代码" name="creditCode">
+        <a-input v-model:value="form.creditCode" />
+      </a-form-item>
+      <a-form-item label="联系人" name="contactPerson">
+        <a-input v-model:value="form.contactPerson" />
+      </a-form-item>
+      <a-form-item label="联系方式" name="contactMobile">
+        <a-input v-model:value="form.contactMobile" />
+      </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>
+  </a-drawer>
+</template>