github_mirrors/gf-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/gf-vben-admin.git synced 2025-01-23 11:50:20 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf: perf excel comp code

Browse Source
This commit is contained in:
vben 2020-10-20 21:24:27 +08:00
parent 968f791f4b
commit eecde4c7e9
14 changed files with 144 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.zh_CN.md
View File

@ -1,5 +1,9 @@
# Wip
### 🎫 Chores
- 表格默认不显示边框
### ⚡ Performance Improvements
- 优化首屏体积大小

12
src/components/Authority/index.tsx
View File

@ -19,16 +19,17 @@ export default defineComponent({
const getModeRef = computed(() => {
return appStore.getProjectConfig.permissionMode;
});
/**
* 渲染角色按钮
*/
function renderRoleAuth() {
const { value } = props;
if (!value) {
return getSlot(slots, 'default');
return getSlot(slots);
}
const { hasPermission } = usePermission();
return hasPermission(value) ? getSlot(slots, 'default') : null;
return hasPermission(value) ? getSlot(slots) : null;
}
/**
@ -38,11 +39,12 @@ export default defineComponent({
function renderCodeAuth() {
const { value } = props;
if (!value) {
return getSlot(slots, 'default');
return getSlot(slots);
}
const { hasPermission } = usePermission();
return hasPermission(value) ? getSlot(slots, 'default') : null;
return hasPermission(value) ? getSlot(slots) : null;
}
return () => {
const mode = unref(getModeRef);
// 基于角色渲染
@ -53,7 +55,7 @@ export default defineComponent({
if (mode === PermissionModeEnum.BACK) {
return renderCodeAuth();
}
return getSlot(slots, 'default');
return getSlot(slots);
};
},
});

48
src/components/Drawer/src/BasicDrawer.tsx
View File

@ -33,18 +33,7 @@ export default defineComponent({
props: basicProps,
emits: ['visible-change', 'ok', 'close', 'register'],
setup(props, { slots, emit, attrs }) {
// const { currentRoute } = useRouter();
const scrollRef = ref<any>(null);
// /**
// * @description: 获取配置ScrollContainer
// */
// const getScrollOptions = computed(
// (): ScrollContainerOptions => {
// return {
// ...(props.scrollOptions as any),
// };
// }
// );
const visibleRef = ref(false);
const propsRef = ref<Partial<DrawerProps> | null>(null);
@ -85,7 +74,6 @@ export default defineComponent({
watch(
() => visibleRef.value,
(visible) => {
// appStore.commitLockMainScrollState(visible);
nextTick(() => {
emit('visible-change', visible);
});
@ -95,27 +83,6 @@ export default defineComponent({
}
);
// function scrollBottom() {
// const scroll = unref(scrollRef);
// if (scroll) {
// scroll.scrollBottom();
// }
// }
// function scrollTo(to: number) {
// const scroll = unref(scrollRef);
// if (scroll) {
// scroll.scrollTo(to);
// }
// }
// function getScrollWrap() {
// const scroll = unref(scrollRef);
// if (scroll) {
// return scroll.getScrollWrap();
// }
// return null;
// }
// 取消事件
async function onClose(e: any) {
const { closeFunc } = unref(getProps);
@ -219,12 +186,6 @@ export default defineComponent({
);
}
// const currentInstance = getCurrentInstance() as any;
// if (getCurrentInstance()) {
// currentInstance.scrollBottom = scrollBottom;
// currentInstance.scrollTo = scrollTo;
// currentInstance.getScrollWrap = getScrollWrap;
// }
const drawerInstance: DrawerInstance = {
setDrawerProps: setDrawerProps,
};
@ -253,15 +214,6 @@ export default defineComponent({
class={[!unref(getProps).loading ? 'hidden' : '']}
tip="加载中..."
/>
{/* <ScrollContainer
ref={scrollRef}
{...{ ...attrs, ...unref(getScrollOptions) }}
style={{
height: `calc(100% - ${footerHeight})`,
}}
>
{() => getSlot(slots, 'default')}
</ScrollContainer> */}
<div
ref={scrollRef}
{...attrs}

2
src/components/Excel/index.ts
View File

@ -1,4 +1,4 @@
export { default as ImportExcel } from './src/ImportExcel';
export { default as ImportExcel } from './src/ImportExcel.vue';
export { default as ExportExcelModel } from './src/ExportExcelModel.vue';
export { jsonToSheetXlsx, aoaToSheetXlsx } from './src/Export2Excel';

4
src/components/Excel/src/ExportExcelModel.vue
View File

@ -55,12 +55,13 @@
];
export default defineComponent({
components: { BasicModal, BasicForm },
emits: ['success', 'register'],
setup(_, { emit }) {
const [registerForm, { validateFields }] = useForm();
const [registerModal, { closeModal }] = useModalInner();
async function handleOk() {
const res: ExportModalResult = await validateFields();
const res = (await validateFields()) as ExportModalResult;
const { filename, bookType } = res;
emit('success', {
@ -69,6 +70,7 @@
});
closeModal();
}
return {
schemas,
handleOk,

120
src/components/Excel/src/ImportExcel.tsx
View File

@ -1,120 +0,0 @@
import { defineComponent, ref, unref } from 'vue';
import XLSX from 'xlsx';
import { getSlot } from '/@/utils/helper/tsxHelper';
import type { ExcelData } from './types';
export default defineComponent({
name: 'ImportExcel',
setup(_, { slots, emit }) {
const inputRef = ref<HTMLInputElement | null>(null);
const loadingRef = ref<Boolean>(false);
/**
* @description: 第一行作为头部
*/
function getHeaderRow(sheet: XLSX.WorkSheet) {
if (!sheet || !sheet['!ref']) return [];
const headers: string[] = [];
// A3:B7=>{s:{c:0, r:2}, e:{c:1, r:6}}
const range = XLSX.utils.decode_range(sheet['!ref']);
const R = range.s.r;
/* start in the first row */
for (let C = range.s.c; C <= range.e.c; ++C) {
/* walk every column in the range */
const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })];
/* find the cell in the first row */
let hdr = 'UNKNOWN ' + C; // <-- replace with your desired default
if (cell && cell.t) hdr = XLSX.utils.format_cell(cell);
headers.push(hdr);
}
return headers;
}
/**
* @description: 获得excel数据
*/
function getExcelData(workbook: XLSX.WorkBook) {
const excelData: ExcelData[] = [];
for (const sheetName of workbook.SheetNames) {
const worksheet = workbook.Sheets[sheetName];
const header: string[] = getHeaderRow(worksheet);
const results = XLSX.utils.sheet_to_json(worksheet);
excelData.push({
header,
results,
meta: {
sheetName,
},
});
}
return excelData;
}
/**
* @description: 读取excel数据
*/
function readerData(rawFile: File) {
loadingRef.value = true;
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = async (e) => {
try {
const data = e.target && e.target.result;
const workbook = XLSX.read(data, { type: 'array' });
// console.log(workbook);
/* DO SOMETHING WITH workbook HERE */
const excelData = getExcelData(workbook);
emit('success', excelData);
resolve();
} catch (error) {
reject(error);
} finally {
loadingRef.value = false;
}
};
reader.readAsArrayBuffer(rawFile);
});
}
async function upload(rawFile: File) {
const inputRefDom = unref(inputRef);
if (inputRefDom) {
// fix can't select the same excel
inputRefDom.value = '';
}
readerData(rawFile);
}
/**
* @description: 触发选择文件管理器
*/
function handleInputClick(e: Event) {
const files = e && (e.target as HTMLInputElement).files;
const rawFile = files && files[0]; // only use files[0]
if (!rawFile) return;
upload(rawFile);
}
/**
* @description: 点击上传按钮
*/
function handleUpload() {
const inputRefDom = unref(inputRef);
inputRefDom && inputRefDom.click();
}
return () => {
return (
<div>
<input
ref={inputRef}
type="file"
accept=".xlsx, .xls"
style=" z-index: -9999; display: none;"
onChange={handleInputClick}
/>
<div onClick={handleUpload}>{getSlot(slots)}</div>
</div>
);
};
},
});

123
src/components/Excel/src/ImportExcel.vue Normal file
View File

@ -0,0 +1,123 @@
<template>
<div>
<input
ref="inputRef"
type="file"
v-show="false"
accept=".xlsx, .xls"
@change="handleInputClick"
/>
<div @click="handleUpload"><slot /></div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, unref } from 'vue';
import XLSX from 'xlsx';
import type { ExcelData } from './types';
export default defineComponent({
name: 'ImportExcel',
emits: ['success'],
setup(_, { emit }) {
const inputRef = ref<HTMLInputElement | null>(null);
const loadingRef = ref<Boolean>(false);
/**
* @description: 第一行作为头部
*/
function getHeaderRow(sheet: XLSX.WorkSheet) {
if (!sheet || !sheet['!ref']) return [];
const headers: string[] = [];
// A3:B7=>{s:{c:0, r:2}, e:{c:1, r:6}}
const range = XLSX.utils.decode_range(sheet['!ref']);
const R = range.s.r;
/* start in the first row */
for (let C = range.s.c; C <= range.e.c; ++C) {
/* walk every column in the range */
const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })];
/* find the cell in the first row */
let hdr = 'UNKNOWN ' + C; // <-- replace with your desired default
if (cell && cell.t) hdr = XLSX.utils.format_cell(cell);
headers.push(hdr);
}
return headers;
}
/**
* @description: 获得excel数据
*/
function getExcelData(workbook: XLSX.WorkBook) {
const excelData: ExcelData[] = [];
for (const sheetName of workbook.SheetNames) {
const worksheet = workbook.Sheets[sheetName];
const header: string[] = getHeaderRow(worksheet);
const results = XLSX.utils.sheet_to_json(worksheet);
excelData.push({
header,
results,
meta: {
sheetName,
},
});
}
return excelData;
}
/**
* @description: 读取excel数据
*/
function readerData(rawFile: File) {
loadingRef.value = true;
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = async (e) => {
try {
const data = e.target && e.target.result;
const workbook = XLSX.read(data, { type: 'array' });
// console.log(workbook);
/* DO SOMETHING WITH workbook HERE */
const excelData = getExcelData(workbook);
emit('success', excelData);
resolve();
} catch (error) {
reject(error);
} finally {
loadingRef.value = false;
}
};
reader.readAsArrayBuffer(rawFile);
});
}
async function upload(rawFile: File) {
const inputRefDom = unref(inputRef);
if (inputRefDom) {
// fix can't select the same excel
inputRefDom.value = '';
}
readerData(rawFile);
}
/**
* @description: 触发选择文件管理器
*/
function handleInputClick(e: Event) {
const files = e && (e.target as HTMLInputElement).files;
const rawFile = files && files[0]; // only use files[0]
if (!rawFile) return;
upload(rawFile);
}
/**
* @description: 点击上传按钮
*/
function handleUpload() {
const inputRefDom = unref(inputRef);
inputRefDom && inputRefDom.click();
}
return { handleUpload, handleInputClick, inputRef };
},
});
</script>

12
src/router/routes/modules/demo/excel.ts
View File

@ -9,7 +9,7 @@ export default {
component: PAGE_LAYOUT_COMPONENT,
redirect: '/excel/customExport',
meta: {
icon: 'ant-design:area-chart-outlined',
icon: 'mdi:microsoft-excel',
title: 'Excel',
},
},
@ -18,7 +18,7 @@ export default {
{
path: '/customExport',
name: 'CustomExport',
component: () => import('/@/views/demo/echarts/excel/CustomExport.vue'),
component: () => import('/@/views/demo/excel/CustomExport.vue'),
meta: {
title: '选择导出格式',
},
@ -26,7 +26,7 @@ export default {
{
path: '/jsonExport',
name: 'JsonExport',
component: () => import('/@/views/demo/echarts/excel/JsonExport.vue'),
component: () => import('/@/views/demo/excel/JsonExport.vue'),
meta: {
title: 'JSON数据导出',
},
@ -34,7 +34,7 @@ export default {
{
path: '/arrayExport',
name: 'ArrayExport',
component: () => import('/@/views/demo/echarts/excel/ArrayExport.vue'),
component: () => import('/@/views/demo/excel/ArrayExport.vue'),
meta: {
title: 'Array数据导出',
},
@ -42,12 +42,10 @@ export default {
{
path: '/importExcel',
name: 'ImportExcel',
component: () => import('/@/views/demo/echarts/excel/ImportExcel.vue'),
component: () => import('/@/views/demo/excel/ImportExcel.vue'),
meta: {
title: '导入',
},
},
// ],
// },
],
} as AppRouteModule;

2
src/router/routes/modules/demo/tree.ts
View File

@ -9,7 +9,7 @@ export default {
component: PAGE_LAYOUT_COMPONENT,
redirect: '/tree/basic',
meta: {
icon: 'ant-design:table-outlined',
icon: 'clarity:tree-view-line',
title: 'Tree',
},
},

0
src/views/demo/echarts/excel/ArrayExport.vue → src/views/demo/excel/ArrayExport.vue
View File

0
src/views/demo/echarts/excel/CustomExport.vue → src/views/demo/excel/CustomExport.vue
View File

0
src/views/demo/echarts/excel/ImportExcel.vue → src/views/demo/excel/ImportExcel.vue
View File

0
src/views/demo/echarts/excel/JsonExport.vue → src/views/demo/excel/JsonExport.vue
View File

0
src/views/demo/echarts/excel/data.ts → src/views/demo/excel/data.ts
View File