Skip to content

Commit

Permalink
perf: 导出重构
Browse files Browse the repository at this point in the history
  • Loading branch information
greper committed Jul 1, 2023
1 parent e4837bc commit e99dc7b
Show file tree
Hide file tree
Showing 27 changed files with 839 additions and 164 deletions.
67 changes: 35 additions & 32 deletions docs/zh/api/use.md
Original file line number Diff line number Diff line change
Expand Up @@ -146,11 +146,11 @@ async function openCustomDialog(){

### useAsync

* 说明: 异步加载lib
* 说明: 异步加载lib,懒加载大尺寸的库,减少首页体积
* 类型: `():{loadAsyncLib,registerAsyncLib}`
* 使用: 分三步(以exportUtil为例)

先在全局注册异步组件
先在main.ts中全局注册组件
```js
// main.ts
import {FsExtendExport} from '@fast-crud/fast-extends'
Expand All @@ -161,47 +161,50 @@ app.use(FsExtendExport)
```js
// App.vue
import {useAsync} from "@fast-crud/fast-crud";
const {loadAsyncLib,registerAsyncLib} = useAsync();
const {registerAsyncLib} = useAsync();
registerAsyncLib("FsExportUtil")
```

然后在需要调用的地方加载
然后在需要调用的地方加载并使用

```js
//crud.ts
import {useAsync} from "@fast-crud/fast-crud";
import {ExportUtil} from '@fast-crud/fast-extends'

const crudOptions = {
toolbar:{
buttons:{
export:{
show:true,
async click(){
const { loadAsyncLib } = useAsync();
//加载异步库,不影响首页加载速度
const exportUtil: ExportUtil = await loadAsyncLib({
name: 'FsExportUtil',
});

const columns: CsvColumn[] = [];
_.each(crudBinding.value.table.columnsMap, (col: ColumnCompositionProps) => {
if (col.exportable !== false && col.key !== '_index') {
columns.push({
prop: col.key,
label: col.title,
});
}
});
//导出csv
await exportUtil.csv({
columns,
data: crudBinding.value.data,
title: 'table',
noHeader: false,
});
}
toolbar: {
buttons: {
export: {
show: true,
async click() {
const {loadAsyncLib} = useAsync();
//加载异步库,不影响首页加载速度
const exportUtil: ExportUtil = await loadAsyncLib({
name: 'FsExportUtil',
});

const columns: ExportColumn[] = [];
//构建csv列
_.each(crudBinding.value.table.columnsMap, (col: ColumnCompositionProps) => {
if (col.show !== false && col.exportable !== false && col.key !== '_index') {
columns.push({
prop: col.key,
label: col.title,
});
}
});
//导出csv
await exportUtil.csv({
columns,
data: crudBinding.value.data,
title: 'table',
noHeader: false,
});
}
}
}
}
}
```

2 changes: 1 addition & 1 deletion packages/fast-admin/fs-admin-antdv
2 changes: 1 addition & 1 deletion packages/fast-admin/fs-admin-element
Submodule fs-admin-element updated 1 files
+1 −0 src/App.vue
11 changes: 7 additions & 4 deletions packages/fast-crud/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
"name": "@fast-crud/fast-crud",
"version": "1.14.1",
"private": false,
"main": "./src/index.ts",
"module": "./src/index.ts",
"types": "./src/index.ts",
"main": "./dist/fast-crud.umd.js",
"module": "./dist/fast-crud.mjs",
"types": "./dist/d/index.d.ts",
"publishConfig": {
"main": "./dist/fast-crud.umd.js",
"module": "./dist/fast-crud.mjs",
Expand All @@ -21,8 +21,10 @@
"author": "Greper",
"license": "MIT",
"dependencies": {
"file-saver": "^2.0.0",
"lru-cache": "^8.0.3",
"vuedraggable-es": "^4.1.1"
"vuedraggable-es": "^4.1.1",
"xlsx": "^0.14.1"
},
"devDependencies": {
"@fast-crud/ui-interface": "^1.14.1",
Expand All @@ -31,6 +33,7 @@
"@rollup/plugin-strip": "^3.0.2",
"@rollup/plugin-typescript": "^11.0.0",
"@types/chai": "^4.3.4",
"@types/file-saver": "^2.0.5",
"@types/jest": "^29.4.4",
"@types/mocha": "^10.0.1",
"@types/node": "^18.15.3",
Expand Down
13 changes: 1 addition & 12 deletions packages/fast-crud/src/components/fs-crud.vue
Original file line number Diff line number Diff line change
Expand Up @@ -42,18 +42,7 @@
<template #toolbar>
<div v-if="toolbar && toolbar.show !== false" class="fs-crud-toolbar">
<slot name="toolbar-left"></slot>
<fs-toolbar
ref="toolbarRef"
v-bind="toolbar"
:slots="computedToolbarSlots"
:search="search.show"
:compact="toolbar.compact"
:columns="table.columns"
@update:search="$emit('update:search', $event)"
@update:compact="$emit('update:compact', $event)"
@update:columns="$emit('update:columns', $event)"
@refresh="$emit('refresh')"
/>
<fs-toolbar ref="toolbarRef" v-bind="toolbar" :slots="computedToolbarSlots" :columns="table.columns" />
<slot name="toolbar-right"></slot>
</div>
</template>
Expand Down
49 changes: 1 addition & 48 deletions packages/fast-crud/src/components/toolbar/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,6 @@ import { useI18n } from "../../locale";
import { Constants } from "../../utils/util.constants";
import { ButtonProps, ButtonsProps, TableColumnsProps } from "../../d";
import { useMerge, useUi } from "../../use";
/**
* 工具条
*/
Expand Down Expand Up @@ -111,61 +110,15 @@ export default defineComponent({
type: Object as PropType<any>
}
},
emits: ["refresh", "update:search", "update:compact", "update:columns", "export"],
emits: ["update:columns"],
setup(props: any, ctx) {
const { t } = useI18n();
const columnsFilterRef: Ref = ref();
const { ui } = useUi();
const { merge } = useMerge();
const computedButtons = computed(() => {
const defaultButtons: ButtonsProps<void> = {
refresh: {
type: "primary",
icon: ui.icons.refresh,
title: t("fs.toolbar.refresh.title"), // '刷新',
order: 1,
circle: true,
click: () => {
ctx.emit("refresh");
}
},
search: {
type: "primary",
icon: ui.icons.search,
title: t("fs.toolbar.search.title"), // '查询显示',
order: 2,
circle: true,
click: () => {
ctx.emit("update:search", !props.search);
}
},
compact: {
type: "primary",
icon: ui.icons.compact,
title: t("fs.toolbar.compact.title"), // '紧凑模式',
order: 3,
circle: true,
click: () => {
ctx.emit("update:compact", !props.compact);
}
},
export: {
show: false,
type: "primary",
icon: ui.icons.export,
order: 4,
title: t("fs.toolbar.export.title"), // '导出',
circle: true,
click: () => {
ctx.emit("export");
}
},
columns: {
type: "primary",
icon: ui.icons.columnsFilter,
title: t("fs.toolbar.columns.title"), // '列设置',
circle: true,
order: 5,
click: () => {
columnsFilterRef.value.start();
}
Expand Down
8 changes: 8 additions & 0 deletions packages/fast-crud/src/d/crud.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { DoRemoveContext } from "../d/expose";

import { RuleItem } from "async-validator";
import { UiSlot, UiSlotRet } from "@fast-crud/ui-interface";
import { ExportProps } from "/src/use/lib/fs-export";

// export type FsRefValue<T> = T | Ref<T> | ComputedRef<T>;
// export type FsComputeValue<T> = FsRefValue<T> | ComputeValue<T> | AsyncComputeValue<T>;
Expand Down Expand Up @@ -811,10 +812,17 @@ export type ToolbarComponentProps = {
* 当前是否紧凑模式
*/
compact?: boolean;

/**
* 导出配置
*/
export?: ExportProps;

/**
* 列配置
*/
columns?: TableColumnsProps;

/**
* 是否保存用户列设置
* 传string则表示传入缓存的主key
Expand Down
1 change: 1 addition & 0 deletions packages/fast-crud/src/use/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,4 @@ export * from "./use-columns";
export * from "./use-drag";
export * from "./use-form";
export * from "./config";
export * from "./use-async";
76 changes: 76 additions & 0 deletions packages/fast-crud/src/use/lib/fs-export/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import _ from "lodash-es";
import { ColumnCompositionProps, CrudBinding } from "/src/d";
import { ExcelParams, ExportColumn, ExportUtil } from "./lib/d";
import { Ref } from "vue";

export async function loadFsExportUtil(): Promise<ExportUtil> {
const module = await import.meta.glob("./lib/index.ts");
console.log("module", module);
let target: any = null;
_.each(module, (item) => {
target = item;
});
const lib = await target();
console.log("lib", lib);
return lib.exportUtil;
}

/**
* 导出配置
*/
export type ExportProps = {
/**
* 服务端导出,自己实现
*/
server?: () => Promise<void>;
/**
* 数据mapping
* @param row
*/
dataMapping?: (row: any) => any;
/**
* 导出文件类型
*/
fileType?: "csv" | "excel";
} & ExcelParams;
export async function exportTable(crudBinding: Ref<CrudBinding>, opts: ExportProps = {}): Promise<any> {
if (opts.server) {
await opts.server();
}
let columns: ExportColumn[] = opts.columns;
if (columns == null) {
columns = [];
_.each(crudBinding.value.table.columnsMap, (col: ColumnCompositionProps) => {
if (col.exportable !== false && col.key !== "_index") {
columns.push({
key: col.key,
title: col.title
});
}
});
}

//加载异步组件,不影响首页加载速度
const exportUtil: ExportUtil = await loadFsExportUtil();
const data = [];
const dataMapping = opts.dataMapping || ((row) => row);
for (const row of crudBinding.value.data) {
data.push(dataMapping(row));
}
const expOpts = _.merge(
{
columns,
data,
filename: "table",
noHeader: false
},
{
...opts
}
);
if (opts.fileType === "excel") {
await exportUtil.excel(expOpts);
} else {
await exportUtil.csv(expOpts);
}
}
Loading

0 comments on commit e99dc7b

Please sign in to comment.