@pubinfo/module-rbac 2.0.0-beta.9 → 2.0.0-rc.2

package/src/views/resource/components/ImportExport.vue

@@ -0,0 +1,313 @@
+<script setup lang="ts">
+import type { TreeNode } from '../interface';
+import { ClockCircleOutlined, CloudDownloadOutlined, CloudUploadOutlined, DeleteOutlined, UndoOutlined } from '@ant-design/icons-vue';
+import { useToggle } from '@vueuse/core';
+import { message, theme, Upload } from 'ant-design-vue';
+import dayjs from 'dayjs';
+import { saveAs } from 'file-saver';
+import { deleteRbacResourceBackupDeleteResourceBackup, getRbacResourceBackupDetail, getRbacResourceBackupList, getRbacResourceBackupRestore, postRbacResourceBackupExportResourceData, postRbacResourceBackupImportResourceData } from '@/api/modules/rbac';
+import { RESOURCE_COLOR, resourceOptions } from '../enum';
+
+defineOptions({
+  name: 'ImportExport',
+});
+
+const props = defineProps<{ dataSource: TreeNode[] }>();
+const emit = defineEmits(['submit']);
+
+const { token } = theme.useToken();
+
+const [open, setOpen] = useToggle(false);
+const [loading, setLoading] = useToggle(false);
+
+const historyState = reactive<{
+  selectedId: string
+  list: any[]
+  treeData: any[]
+}>({
+  selectedId: '',
+  list: [],
+  treeData: [],
+});
+
+const tabList = computed(() => {
+  return historyState.selectedId
+    ? [
+        { key: 'current', tab: '当前资源' },
+        { key: 'history', tab: '历史记录' },
+      ]
+    : [{ key: 'current', tab: '当前资源' }];
+});
+
+const selectedKeys = ref<string[]>([]);
+const treeData = computed(() => props.dataSource as any);
+
+const tabState = reactive({
+  list: tabList,
+  key: 'current',
+  onTabChange(key: string) {
+    tabState.key = key;
+  },
+});
+
+function onOpen() {
+  setOpen(true);
+  tabState.key = 'current';
+  selectedKeys.value = [];
+  historyState.selectedId = '';
+  getHistoryList();
+}
+
+const [historyLoading, setHistoryLoading] = useToggle(false);
+async function getHistoryList() {
+  try {
+    setHistoryLoading(true);
+    const res = await getRbacResourceBackupList({ type: '0' });
+    if (res.success) {
+      historyState.list = res?.data ?? [];
+    }
+  }
+  finally {
+    setHistoryLoading(false);
+  }
+}
+
+const [selectHistoryLoading, setSelectHistoryLoading] = useToggle(false);
+async function onSelectHistory(id: string) {
+  if (historyState.selectedId === id) {
+    historyState.selectedId = '';
+    tabState.key = 'current';
+    return;
+  }
+  historyState.selectedId = id;
+  tabState.key = 'history';
+
+  try {
+    setSelectHistoryLoading(true);
+    const res = await getRbacResourceBackupDetail({ id });
+    if (res.success) {
+      historyState.treeData = res.data?.content ?? [];
+    }
+  }
+  finally {
+    setSelectHistoryLoading(false);
+  }
+}
+
+async function onExport() {
+  if (selectedKeys.value.length === 0) {
+    message.info(`请选中你要导出的资源节点。`);
+    return;
+  }
+
+  try {
+    setLoading(true);
+    const res = await postRbacResourceBackupExportResourceData(selectedKeys.value);
+    if (res.success) {
+      downloadJSON(res.data);
+      message.success('导出成功！');
+    }
+  }
+  finally {
+    setLoading(false);
+  }
+}
+
+async function onImport(file: File) {
+  try {
+    setLoading(true);
+    const res = await postRbacResourceBackupImportResourceData({ parentId: selectedKeys.value[0] ?? '0' }, {}, file);
+    if (res.success) {
+      message.success('导入成功！');
+      getHistoryList();
+    }
+    return Upload.LIST_IGNORE;
+  }
+  catch {
+    return Upload.LIST_IGNORE;
+  }
+  finally {
+    setLoading(false);
+    emit('submit');
+  }
+}
+
+function downloadJSON(data: any, filename = `资源数据_${dayjs().format('YYYYMMDDHHmmss')}.json`) {
+  const jsonStr = JSON.stringify(data, null, 2);
+  const blob = new Blob([jsonStr], { type: 'application/json;charset=utf-8' });
+  saveAs(blob, filename);
+}
+
+const [restoreLoading, setRestoreLoading] = useToggle(false);
+async function restoreBackup() {
+  try {
+    setRestoreLoading(true);
+    const res = await getRbacResourceBackupRestore({ id: historyState.selectedId });
+    if (res.success) {
+      message.success('恢复备份成功！');
+      getHistoryList();
+      emit('submit');
+    }
+  }
+  finally {
+    setRestoreLoading(false);
+  }
+}
+
+const [removeLoading, setRemoveLoading] = useToggle(false);
+async function removeBackup() {
+  try {
+    setRemoveLoading(true);
+    const res = await deleteRbacResourceBackupDeleteResourceBackup({ id: historyState.selectedId });
+    if (res.success) {
+      message.success('删除备份成功！');
+      getHistoryList();
+      tabState.key = 'current';
+      historyState.selectedId = '';
+    }
+  }
+  finally {
+    setRemoveLoading(false);
+  }
+}
+
+defineExpose({
+  open: onOpen,
+});
+</script>
+
+<template>
+  <a-modal
+    v-model:open="open"
+    title="导入 / 导出"
+    centered
+    :width="1000"
+    destroy-on-close
+    :mask-closable="false"
+    :footer="null"
+  >
+    <div class="h-[70vh]">
+      <a-row :gutter="8" class="h-full">
+        <a-col span="16" class="h-full">
+          <a-card
+            :head-style="{ marginBottom: 0, padding: '0 12px' }"
+            :body-style="{ padding: '12px', height: 'calc(100% - 56px)', overflow: 'auto' }"
+            :tab-list="tabState.list"
+            :active-tab-key="tabState.key"
+            class="h-full"
+            @tab-change="(key: string) => tabState.onTabChange(key)"
+          >
+            <template #tabBarExtraContent>
+              <a-space v-if="tabState.key === 'current'">
+                <a-upload :before-upload="onImport">
+                  <a-button type="primary" :loading="loading">
+                    <CloudUploadOutlined />
+                    导入
+                  </a-button>
+                </a-upload>
+                <a-button :disabled="selectedKeys.length === 0" :loading="loading" @click="onExport()">
+                  <CloudDownloadOutlined />
+                  导出
+                </a-button>
+              </a-space>
+
+              <template v-if="tabState.key === 'history'">
+                <a-space>
+                  <a-popconfirm
+                    title="是否使用该历史数据覆盖当前数据?"
+                    @confirm="restoreBackup()"
+                  >
+                    <a-button :loading="restoreLoading">
+                      <UndoOutlined />
+                      恢复备份
+                    </a-button>
+                  </a-popconfirm>
+                  <a-popconfirm
+                    title="是否删除该历史数据备份?"
+                    @confirm="removeBackup()"
+                  >
+                    <a-button :loading="removeLoading" danger>
+                      <DeleteOutlined />
+                      删除备份
+                    </a-button>
+                  </a-popconfirm>
+                </a-space>
+              </template>
+            </template>
+
+            <div v-show="tabState.key === 'current'">
+              <a-tree
+                key="current"
+                v-model:selected-keys="selectedKeys"
+                :field-names="{ children: 'children', title: 'name', key: 'id' }"
+                :tree-data="treeData"
+                block-node
+              >
+                <template #title="node">
+                  <a-tag :color="RESOURCE_COLOR[node.type]" :bordered="false">
+                    {{ resourceOptions.find(item => item.value === node.type)?.label }}
+                  </a-tag>
+                  <span>{{ node.name }}</span>
+                </template>
+              </a-tree>
+            </div>
+
+            <div v-show="tabState.key === 'history' " class="size-full">
+              <a-spin :spinning="selectHistoryLoading">
+                <a-tree
+                  key="history"
+                  :field-names="{ children: 'children', title: 'name', key: 'id' }"
+                  :tree-data="historyState.treeData"
+                  :selectable="false"
+                  class="size-full"
+                >
+                  <template #title="node">
+                    <a-tag :color="RESOURCE_COLOR[node.type]" :bordered="false">
+                      {{ resourceOptions.find(item => item.value === node.type)?.label }}
+                    </a-tag>
+                    <span>{{ node.name }}</span>
+                  </template>
+                </a-tree>
+              </a-spin>
+            </div>
+          </a-card>
+        </a-col>
+
+        <a-col span="8" class="h-full">
+          <a-card
+            title="历史记录"
+            :head-style="{ marginBottom: 0, padding: '0 12px' }"
+            :body-style="{ padding: '8px', height: 'calc(100% - 56px)', overflowY: 'auto' }"
+            class="h-full"
+          >
+            <div
+              v-if="historyLoading"
+              class="flex flex-col items-center justify-center size-full"
+            >
+              <a-spin />
+            </div>
+            <div
+              v-if="historyState.list.length === 0 && !historyLoading"
+              class="flex flex-col items-center justify-center size-full"
+            >
+              <a-empty />
+            </div>
+            <div
+              v-for="item in historyState.list"
+              :key="item.id"
+              class="flex justify-between items-center space-x-2 cursor-pointer hover:bg-gray-50 py-1 px-2 rounded"
+              :style="{ backgroundColor: historyState.selectedId === item.id ? token.colorPrimaryBg : '' }"
+              @click="onSelectHistory(item.id)"
+            >
+              <div class="space-x-1">
+                <ClockCircleOutlined />
+                <span class="text-sm truncate">{{ item.createTime }}</span>
+              </div>
+              <span class="text-xs shrink-0" :style="{ color: token.colorTextTertiary }">{{ item.createUserName }}</span>
+            </div>
+          </a-card>
+        </a-col>
+      </a-row>
+    </div>
+  </a-modal>
+</template>

package/src/views/resource/components/MetaForm.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import type { Form } from '../interface';
+import { dataPermissionOptions } from '@/views/data-permission/enum';
+import { useMetaForm } from '../hooks/useMetaForm';
+
+defineOptions({
+  name: 'MetaForm',
+});
+
+const form = defineModel<Form>({
+  default: {
+    meta: {
+      url: '',
+      component: '',
+    },
+  },
+});
+
+const { show } = useMetaForm(form);
+</script>
+
+<template>
+  <div>
+    <a-divider>其他配置</a-divider>
+
+    <!--
+      其他配置区域：根据资源类型的不同，显示不同的配置选项
+      - 开发模式：仅对应用和动态应用有效，用于开发环境的特殊配置
+      - 缓存标签页/固定标签页：仅对菜单有效，因为只有菜单会在浏览器标签页中展示
+      - 其他显示相关配置：适用于所有可视化的资源类型
+    -->
+
+    <a-row :gutter="8">
+      <a-col :span="9" :offset="3">
+        <a-form-item name="enable">
+          <a-checkbox v-model:checked="form.enable">
+            启用
+          </a-checkbox>
+        </a-form-item>
+      </a-col>
+      <!-- 开发模式：仅在应用或动态应用中显示 -->
+      <a-col v-if="show.devMode" :span="9" :offset="3">
+        <a-form-item name="isDev">
+          <a-checkbox v-model:checked="form.meta!.isDev">
+            开发模式
+          </a-checkbox>
+        </a-form-item>
+      </a-col>
+      <!-- 开发模式文本：仅在开启开发模式时显示 -->
+      <a-col v-if="show.devMode && form.meta?.isDev" :span="18" :offset="3">
+        <a-form-item label="开发模式提示文本" name="devText" :label-col="{ style: { width: '120px' } }">
+          <a-input
+            v-model:value="form.meta!.devText"
+            placeholder="请输入开发模式下的提示文本"
+            :maxlength="100"
+            show-count
+          />
+          <div class="text-xs text-gray-500 mt-1">
+            此文本将在用户点击开发模式应用时显示在提示框中
+          </div>
+        </a-form-item>
+      </a-col>
+      <!-- 缓存标签页：仅在菜单中显示 -->
+      <a-col v-if="show.cacheAndPin" :span="9" :offset="3">
+        <a-form-item name="cache">
+          <a-checkbox v-model:checked="form.meta!.cache">
+            缓存标签页
+          </a-checkbox>
+        </a-form-item>
+      </a-col>
+      <!-- 固定标签页：仅在菜单中显示 -->
+      <a-col v-if="show.cacheAndPin" :span="9" :offset="3">
+        <a-form-item name="pin">
+          <a-checkbox v-model:checked="form.meta!.pin">
+            固定在标签页
+          </a-checkbox>
+        </a-form-item>
+      </a-col>
+      <!-- 侧边栏显示：不适用于应用和动态应用 -->
+      <a-col v-if="show.sidebar" :span="9" :offset="3">
+        <a-form-item name="sidebar">
+          <a-checkbox v-model:checked="form.meta!.sidebar">
+            在侧边栏显示
+          </a-checkbox>
+        </a-form-item>
+      </a-col>
+      <!-- 标签栏显示：不适用于应用、动态应用和目录 -->
+      <a-col v-if="show.tabbar" :span="9" :offset="3">
+        <a-form-item name="tabbar">
+          <a-checkbox v-model:checked="form.meta!.tabbar">
+            在标签栏显示
+          </a-checkbox>
+        </a-form-item>
+      </a-col>
+      <a-col v-if="show.breadcrumb" :span="9" :offset="3">
+        <a-form-item name="breadcrumb">
+          <a-checkbox v-model:checked="form.meta!.breadcrumb">
+            在面包屑显示
+          </a-checkbox>
+        </a-form-item>
+      </a-col>
+    </a-row>
+
+    <a-row v-if="show.dataPermission" :gutter="8">
+      <a-col :span="6" :offset="3">
+        <a-form-item name="enableDataPermission">
+          <a-checkbox v-model:checked="form.enableDataPermission">
+            启用数据权限
+          </a-checkbox>
+        </a-form-item>
+      </a-col>
+      <a-col :span="12" :offset="3">
+        <a-form-item v-if="form.enableDataPermission" label="数据权限规则" name="dataPermissionType">
+          <a-select v-model:value="form.dataPermissionType" :options="dataPermissionOptions" />
+        </a-form-item>
+      </a-col>
+    </a-row>
+  </div>
+</template>