feat(cms): 添加导航批量导入导出功能

- 新增导航数据批量导入接口- 实现管理员专属的备份与恢复按钮- 增加搜索组件中的导出逻辑及弹窗控制
- 调整按钮布局并移除旧有功能入口 x- 引入lsx 库支持 Excel 文件读写操作
- 添加权限判断以限制敏感操作访问

src/api/cms/cmsNavigation/index.ts

@@ -134,3 +134,18 @@ export async function getByCode(code: string) {
   return Promise.reject(new Error(res.data.message));
 }
 
+/**
+ * 导航批量导入
+ */
+export async function importCmsNavigation(file: File) {
+  const formData = new FormData();
+  formData.append('file', file);
+  const res = await request.post<ApiResult<unknown>>(
+    MODULES_API_URL + '/cms/cms-navigation/import',
+    formData
+  );
+  if (res.data.code === 0) {
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

src/views/cms/cmsNavigation/components/search.vue

@@ -1,24 +1,16 @@
 <!-- 搜索表单 -->
 <template>
   <a-space :size="10" style="flex-wrap: wrap">
-    <a-button type="primary" class="ele-btn-icon" @click="openEdit()">
+    <a-button type="primary" class="ele-btn-icon" @click="emit('add')">
       <template #icon>
         <plus-outlined/>
       </template>
       <span>新建</span>
     </a-button>
-    <a-button type="dashed" class="ele-btn-icon" @click="expandAll">
-      展开
-    </a-button>
-    <a-button type="dashed" class="ele-btn-icon" @click="foldAll">
-      折叠
-    </a-button>
+    <a-button type="dashed" :disabled="!hasRole('superAdmin')" @click="handleExport">备份</a-button>
+    <a-button type="dashed" :disabled="!hasRole('superAdmin')" @click="openImport">恢复</a-button>
     <a-button type="dashed" @click="openUrl('/website/model')"
     >模型管理
-    </a-button
-    >
-    <a-button type="dashed" class="ele-btn-icon" @click="clearSiteInfoCache">
-      清除缓存
     </a-button>
     <a-divider type="vertical"/>
     <a-radio-group v-model:value="position" @change="reload">
@@ -49,13 +41,25 @@
       @pressEnter="reload"
     />
   </a-space>
+  <!-- 导入弹窗 -->
+  <import v-model:visible="showImport" @done="reload"/>
 </template>
 
 <script lang="ts" setup>
 import {PlusOutlined} from '@ant-design/icons-vue';
 import type {GradeParam} from '@/api/user/grade/model';
-import {watch} from 'vue';
+import {watch, ref} from 'vue';
 import {openUrl} from "@/utils/common";
+import {hasRole} from "@/utils/permission";
+import {utils, writeFile} from 'xlsx';
+import {message} from 'ant-design-vue';
+import {listCmsNavigation} from "@/api/cms/cmsNavigation";
+import {getTenantId} from "@/utils/domain";
+import Import from "./Import.vue";
+
+// 是否显示导入弹窗
+const showImport = ref(false);
+const searchText = ref('');
 
 const props = withDefaults(
   defineProps<{
@@ -68,18 +72,113 @@ const props = withDefaults(
 const emit = defineEmits<{
   (e: 'search', where?: GradeParam): void;
   (e: 'add'): void;
-  (e: 'remove'): void;
-  (e: 'batchMove'): void;
 }>();
 
-// 新增
-const add = () => {
-  emit('add');
-};
-
 watch(
   () => props.selection,
   () => {
   }
 );
+
+// 表单数据
+const where = ref({
+  keywords: '',
+  model: '',
+  position: 0
+});
+
+const position = ref(0);
+
+const reload = () => {
+  // 更新搜索关键词
+  where.value.keywords = searchText.value;
+  emit('search', where.value);
+};
+
+/* 打开编辑弹窗 */
+const openImport = () => {
+  showImport.value = true;
+};
+
+// 导出
+const handleExport = async () => {
+  const array: (string | number)[][] = [
+    [
+      '上级id',
+      '菜单名称',
+      '模型',
+      '标识',
+      '菜单路由地址',
+      '菜单组件地址',
+      '打开位置',
+      '菜单图标',
+      'banner图片',
+      '图标颜色',
+      '是否隐藏',
+      '可见类型',
+      '访问密码',
+      '位置',
+      '仅在顶部显示',
+      '仅在底部显示',
+      '菜单侧栏选中的path',
+      '其它路由元信息',
+      'css样式',
+      '是否推荐',
+      '排序',
+      '备注',
+      '状态'
+    ]
+  ];
+
+  // 按搜索结果导出
+  await listCmsNavigation(where.value)
+    .then((list) => {
+      list?.forEach((d) => {
+        array.push([
+          `${d.parentId || ''}`,
+          `${d.title || ''}`,
+          `${d.model || ''}`,
+          `${d.code || ''}`,
+          `${d.path || ''}`,
+          `${d.component || ''}`,
+          `${d.target || ''}`,
+          `${d.icon || ''}`,
+          `${d.banner || ''}`,
+          `${d.color || ''}`,
+          `${d.hide || 0}`,
+          `${d.permission || 0}`,
+          `${d.password || ''}`,
+          `${d.position || 0}`,
+          `${d.top || 0}`,
+          `${d.bottom || 0}`,
+          `${d.active || ''}`,
+          `${d.meta || ''}`,
+          `${d.style || ''}`,
+          `${d.recommend ? 1 : 0}`,
+          `${d.sortNumber || 0}`,
+          `${d.comments || ''}`,
+          `${d.status || 0}`
+        ]);
+      });
+      const sheetName = `bak_navigation_${getTenantId()}`;
+      const workbook = {
+        SheetNames: [sheetName],
+        Sheets: {}
+      };
+      const sheet = utils.aoa_to_sheet(array);
+      workbook.Sheets[sheetName] = sheet;
+      // 设置列宽
+      sheet['!cols'] = [];
+      message.loading('正在导出...');
+      setTimeout(() => {
+        writeFile(
+          workbook,
+          `${sheetName}.xlsx`
+        );
+      }, 1000);
+    })
+    .catch((msg) => {
+      message.error(msg);
+    });
+};
 </script>