perf(DeviceSn): 懒加载 exceljs 并修正权限标识

- 将 exceljs 改为动态导入以避免打入主包
- 修正 add、search、edit 按钮的 perm 值
- 修正 PageResult 类型的导入路径
This commit is contained in:
TongTongStudio
2026-07-30 18:55:57 +08:00
parent 742b32490f
commit bd348e7aeb
2 changed files with 18 additions and 16 deletions

View File

@@ -366,7 +366,7 @@ import {
type UploadUserFile,
type TableInstance,
} from "element-plus";
import ExcelJS from "exceljs";
import type { Column, Workbook } from "exceljs";
import { reactive, ref, computed } from "vue";
import type { IContentConfig, IObject, IOperateData } from "./types";
import type { IToolsButton } from "./types";
@@ -387,17 +387,17 @@ const emit = defineEmits<{
// 表格工具栏按钮配置
const config = computed(() => props.contentConfig);
const buttonConfig = reactive<Record<string, IObject>>({
add: { text: "新增", attrs: { icon: "plus", type: "success" }, perm: "add" },
add: { text: "新增", attrs: { icon: "plus", type: "success" }, perm: "create" },
delete: { text: "删除", attrs: { icon: "delete", type: "danger" }, perm: "delete" },
import: { text: "导入", attrs: { icon: "upload", type: "" }, perm: "import" },
export: { text: "导出", attrs: { icon: "download", type: "" }, perm: "export" },
refresh: { text: "刷新", attrs: { icon: "refresh", type: "" }, perm: "*:*:*" },
filter: { text: "筛选列", attrs: { icon: "operation", type: "" }, perm: "*:*:*" },
search: { text: "搜索", attrs: { icon: "search", type: "" }, perm: "search" },
search: { text: "搜索", attrs: { icon: "search", type: "" }, perm: "list" },
imports: { text: "批量导入", attrs: { icon: "upload", type: "" }, perm: "imports" },
exports: { text: "批量导出", attrs: { icon: "download", type: "" }, perm: "exports" },
view: { text: "查看", attrs: { icon: "view", type: "primary" }, perm: "view" },
edit: { text: "编辑", attrs: { icon: "edit", type: "primary" }, perm: "edit" },
edit: { text: "编辑", attrs: { icon: "edit", type: "primary" }, perm: "update" },
});
// 主键
@@ -613,15 +613,21 @@ function handleCloseExportsModal() {
exportsFormRef.value?.clearValidate();
});
}
// 创建 Workbook 实例(懒加载 exceljs避免打入主包
async function createWorkbook(): Promise<Workbook> {
const ExcelJS = await import("exceljs");
return new ExcelJS.Workbook();
}
// 导出
function handleExports() {
async function handleExports() {
const filename = exportsFormData.filename
? exportsFormData.filename
: props.contentConfig.permPrefix || "export";
const sheetname = exportsFormData.sheetname ? exportsFormData.sheetname : "sheet";
const workbook = new ExcelJS.Workbook();
const workbook = await createWorkbook();
const worksheet = workbook.addWorksheet(sheetname);
const columns: Partial<ExcelJS.Column>[] = [];
const columns: Partial<Column>[] = [];
cols.value.forEach((col) => {
if (col.label && col.prop && exportsFormData.fields.includes(col.prop)) {
columns.push({ header: col.label, key: col.prop });
@@ -731,7 +737,7 @@ function handleImport() {
});
}
// 导入
function handleImports() {
async function handleImports() {
const importsAction = props.contentConfig.importsAction;
if (importsAction === undefined) {
ElMessage.error("未配置importsAction");
@@ -739,8 +745,8 @@ function handleImports() {
}
// 获取选择的文件
const file = importFormData.files[0].raw as File;
// 创建Workbook实例
const workbook = new ExcelJS.Workbook();
// 创建 Workbook 实例(懒加载 exceljs
const workbook = await createWorkbook();
// 使用FileReader对象来读取文件内容
const fileReader = new FileReader();
// 二进制字符串的形式加载文件
@@ -841,11 +847,7 @@ function handleOperate(data: IOperateData) {
}
// 属性修改
function handleModify(
field: string,
value: boolean | string | number,
row: Record<string, IObject>
) {
function handleModify(field: string, value: boolean | string | number, row: Record<string, any>) {
if (props.contentConfig.modifyAction) {
props.contentConfig.modifyAction({
[pk]: row[pk],

View File

@@ -5,7 +5,7 @@ import type PageModal from "./DevicePageModal.vue";
import type PageSearch from "./DevicePageSearch.vue";
import type SnDetail from "./DeviceSnDetail.vue";
import type { CSSProperties } from "vue";
import type { PageResult } from "@/types/api/common";
import type { PageResult } from "@/api/common";
export type PageSearchInstance = InstanceType<typeof PageSearch>;
export type PageContentInstance = InstanceType<typeof PageContent>;