canrd-outside / order-erp-front · Commits

Commit eecde4c7e947cf392dbd8eace2db8ed9aea417b1

Authored by vben
1 parent 968f791f

perf: perf excel comp code

Inline Side-by-side
Showing 13 changed files with 133 additions and 172 deletions
CHANGELOG.zh_CN.md
  View file @eecde4c
1 1 # Wip
2 2  
  3 +### 🎫 Chores
  4 +
  5 +- 表格默认不显示边框
  6 +
3 7 ### ⚡ Performance Improvements
4 8  
5 9 - 优化首屏体积大小
... ...
src/components/Authority/index.tsx
  View file @eecde4c
... ... @@ -19,16 +19,17 @@ export default defineComponent({
19 19 const getModeRef = computed(() => {
20 20 return appStore.getProjectConfig.permissionMode;
21 21 });
  22 +
22 23 /**
23 24 * 渲染角色按钮
24 25 */
25 26 function renderRoleAuth() {
26 27 const { value } = props;
27 28 if (!value) {
28   - return getSlot(slots, 'default');
  29 + return getSlot(slots);
29 30 }
30 31 const { hasPermission } = usePermission();
31   - return hasPermission(value) ? getSlot(slots, 'default') : null;
  32 + return hasPermission(value) ? getSlot(slots) : null;
32 33 }
33 34  
34 35 /**
... ... @@ -38,11 +39,12 @@ export default defineComponent({
38 39 function renderCodeAuth() {
39 40 const { value } = props;
40 41 if (!value) {
41   - return getSlot(slots, 'default');
  42 + return getSlot(slots);
42 43 }
43 44 const { hasPermission } = usePermission();
44   - return hasPermission(value) ? getSlot(slots, 'default') : null;
  45 + return hasPermission(value) ? getSlot(slots) : null;
45 46 }
  47 +
46 48 return () => {
47 49 const mode = unref(getModeRef);
48 50 // 基于角色渲染
... ... @@ -53,7 +55,7 @@ export default defineComponent({
53 55 if (mode === PermissionModeEnum.BACK) {
54 56 return renderCodeAuth();
55 57 }
56   - return getSlot(slots, 'default');
  58 + return getSlot(slots);
57 59 };
58 60 },
59 61 });
... ...
src/components/Drawer/src/BasicDrawer.tsx
  View file @eecde4c
... ... @@ -33,18 +33,7 @@ export default defineComponent({
33 33 props: basicProps,
34 34 emits: ['visible-change', 'ok', 'close', 'register'],
35 35 setup(props, { slots, emit, attrs }) {
36   - // const { currentRoute } = useRouter();
37 36 const scrollRef = ref<any>(null);
38   - // /**
39   - // * @description: 获取配置ScrollContainer
40   - // */
41   - // const getScrollOptions = computed(
42   - // (): ScrollContainerOptions => {
43   - // return {
44   - // ...(props.scrollOptions as any),
45   - // };
46   - // }
47   - // );
48 37  
49 38 const visibleRef = ref(false);
50 39 const propsRef = ref<Partial<DrawerProps> | null>(null);
... ... @@ -85,7 +74,6 @@ export default defineComponent({
85 74 watch(
86 75 () => visibleRef.value,
87 76 (visible) => {
88   - // appStore.commitLockMainScrollState(visible);
89 77 nextTick(() => {
90 78 emit('visible-change', visible);
91 79 });
... ... @@ -95,27 +83,6 @@ export default defineComponent({
95 83 }
96 84 );
97 85  
98   - // function scrollBottom() {
99   - // const scroll = unref(scrollRef);
100   - // if (scroll) {
101   - // scroll.scrollBottom();
102   - // }
103   - // }
104   -
105   - // function scrollTo(to: number) {
106   - // const scroll = unref(scrollRef);
107   - // if (scroll) {
108   - // scroll.scrollTo(to);
109   - // }
110   - // }
111   -
112   - // function getScrollWrap() {
113   - // const scroll = unref(scrollRef);
114   - // if (scroll) {
115   - // return scroll.getScrollWrap();
116   - // }
117   - // return null;
118   - // }
119 86 // 取消事件
120 87 async function onClose(e: any) {
121 88 const { closeFunc } = unref(getProps);
... ... @@ -219,12 +186,6 @@ export default defineComponent({
219 186 );
220 187 }
221 188  
222   - // const currentInstance = getCurrentInstance() as any;
223   - // if (getCurrentInstance()) {
224   - // currentInstance.scrollBottom = scrollBottom;
225   - // currentInstance.scrollTo = scrollTo;
226   - // currentInstance.getScrollWrap = getScrollWrap;
227   - // }
228 189 const drawerInstance: DrawerInstance = {
229 190 setDrawerProps: setDrawerProps,
230 191 };
... ... @@ -253,15 +214,6 @@ export default defineComponent({
253 214 class={[!unref(getProps).loading ? 'hidden' : '']}
254 215 tip="加载中..."
255 216 />
256   - {/* <ScrollContainer
257   - ref={scrollRef}
258   - {...{ ...attrs, ...unref(getScrollOptions) }}
259   - style={{
260   - height: `calc(100% - ${footerHeight})`,
261   - }}
262   - >
263   - {() => getSlot(slots, 'default')}
264   - </ScrollContainer> */}
265 217 <div
266 218 ref={scrollRef}
267 219 {...attrs}
... ...
src/components/Excel/index.ts
  View file @eecde4c
1   -export { default as ImportExcel } from './src/ImportExcel';
  1 +export { default as ImportExcel } from './src/ImportExcel.vue';
2 2 export { default as ExportExcelModel } from './src/ExportExcelModel.vue';
3 3  
4 4 export { jsonToSheetXlsx, aoaToSheetXlsx } from './src/Export2Excel';
... ...
src/components/Excel/src/ExportExcelModel.vue
  View file @eecde4c
... ... @@ -55,12 +55,13 @@
55 55 ];
56 56 export default defineComponent({
57 57 components: { BasicModal, BasicForm },
  58 + emits: ['success', 'register'],
58 59 setup(_, { emit }) {
59 60 const [registerForm, { validateFields }] = useForm();
60 61 const [registerModal, { closeModal }] = useModalInner();
61 62  
62 63 async function handleOk() {
63   - const res: ExportModalResult = await validateFields();
  64 + const res = (await validateFields()) as ExportModalResult;
64 65 const { filename, bookType } = res;
65 66  
66 67 emit('success', {
... ... @@ -69,6 +70,7 @@
69 70 });
70 71 closeModal();
71 72 }
  73 +
72 74 return {
73 75 schemas,
74 76 handleOk,
... ...
src/components/Excel/src/ImportExcel.tsx renamed to src/components/Excel/src/ImportExcel.vue
  View file @eecde4c
1   -import { defineComponent, ref, unref } from 'vue';
2   -import XLSX from 'xlsx';
3   -import { getSlot } from '/@/utils/helper/tsxHelper';
  1 +<template>
  2 + <div>
  3 + <input
  4 + ref="inputRef"
  5 + type="file"
  6 + v-show="false"
  7 + accept=".xlsx, .xls"
  8 + @change="handleInputClick"
  9 + />
  10 + <div @click="handleUpload"><slot /></div>
  11 + </div>
  12 +</template>
  13 +<script lang="ts">
  14 + import { defineComponent, ref, unref } from 'vue';
  15 + import XLSX from 'xlsx';
4 16  
5   -import type { ExcelData } from './types';
6   -export default defineComponent({
7   - name: 'ImportExcel',
8   - setup(_, { slots, emit }) {
9   - const inputRef = ref<HTMLInputElement | null>(null);
10   - const loadingRef = ref<Boolean>(false);
  17 + import type { ExcelData } from './types';
  18 + export default defineComponent({
  19 + name: 'ImportExcel',
  20 + emits: ['success'],
  21 + setup(_, { emit }) {
  22 + const inputRef = ref<HTMLInputElement | null>(null);
  23 + const loadingRef = ref<Boolean>(false);
11 24  
12   - /**
13   - * @description: 第一行作为头部
14   - */
15   - function getHeaderRow(sheet: XLSX.WorkSheet) {
16   - if (!sheet || !sheet['!ref']) return [];
17   - const headers: string[] = [];
18   - // A3:B7=>{s:{c:0, r:2}, e:{c:1, r:6}}
19   - const range = XLSX.utils.decode_range(sheet['!ref']);
  25 + /**
  26 + * @description: 第一行作为头部
  27 + */
  28 + function getHeaderRow(sheet: XLSX.WorkSheet) {
  29 + if (!sheet || !sheet['!ref']) return [];
  30 + const headers: string[] = [];
  31 + // A3:B7=>{s:{c:0, r:2}, e:{c:1, r:6}}
  32 + const range = XLSX.utils.decode_range(sheet['!ref']);
20 33  
21   - const R = range.s.r;
22   - /* start in the first row */
23   - for (let C = range.s.c; C <= range.e.c; ++C) {
24   - /* walk every column in the range */
25   - const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })];
26   - /* find the cell in the first row */
27   - let hdr = 'UNKNOWN ' + C; // <-- replace with your desired default
28   - if (cell && cell.t) hdr = XLSX.utils.format_cell(cell);
29   - headers.push(hdr);
  34 + const R = range.s.r;
  35 + /* start in the first row */
  36 + for (let C = range.s.c; C <= range.e.c; ++C) {
  37 + /* walk every column in the range */
  38 + const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })];
  39 + /* find the cell in the first row */
  40 + let hdr = 'UNKNOWN ' + C; // <-- replace with your desired default
  41 + if (cell && cell.t) hdr = XLSX.utils.format_cell(cell);
  42 + headers.push(hdr);
  43 + }
  44 + return headers;
30 45 }
31   - return headers;
32   - }
33 46  
34   - /**
35   - * @description: 获得excel数据
36   - */
37   - function getExcelData(workbook: XLSX.WorkBook) {
38   - const excelData: ExcelData[] = [];
39   - for (const sheetName of workbook.SheetNames) {
40   - const worksheet = workbook.Sheets[sheetName];
41   - const header: string[] = getHeaderRow(worksheet);
42   - const results = XLSX.utils.sheet_to_json(worksheet);
43   - excelData.push({
44   - header,
45   - results,
46   - meta: {
47   - sheetName,
48   - },
  47 + /**
  48 + * @description: 获得excel数据
  49 + */
  50 + function getExcelData(workbook: XLSX.WorkBook) {
  51 + const excelData: ExcelData[] = [];
  52 + for (const sheetName of workbook.SheetNames) {
  53 + const worksheet = workbook.Sheets[sheetName];
  54 + const header: string[] = getHeaderRow(worksheet);
  55 + const results = XLSX.utils.sheet_to_json(worksheet);
  56 + excelData.push({
  57 + header,
  58 + results,
  59 + meta: {
  60 + sheetName,
  61 + },
  62 + });
  63 + }
  64 + return excelData;
  65 + }
  66 +
  67 + /**
  68 + * @description: 读取excel数据
  69 + */
  70 + function readerData(rawFile: File) {
  71 + loadingRef.value = true;
  72 + return new Promise((resolve, reject) => {
  73 + const reader = new FileReader();
  74 + reader.onload = async (e) => {
  75 + try {
  76 + const data = e.target && e.target.result;
  77 + const workbook = XLSX.read(data, { type: 'array' });
  78 + // console.log(workbook);
  79 + /* DO SOMETHING WITH workbook HERE */
  80 + const excelData = getExcelData(workbook);
  81 + emit('success', excelData);
  82 + resolve();
  83 + } catch (error) {
  84 + reject(error);
  85 + } finally {
  86 + loadingRef.value = false;
  87 + }
  88 + };
  89 + reader.readAsArrayBuffer(rawFile);
49 90 });
50 91 }
51   - return excelData;
52   - }
53 92  
54   - /**
55   - * @description: 读取excel数据
56   - */
57   - function readerData(rawFile: File) {
58   - loadingRef.value = true;
59   - return new Promise((resolve, reject) => {
60   - const reader = new FileReader();
61   - reader.onload = async (e) => {
62   - try {
63   - const data = e.target && e.target.result;
64   - const workbook = XLSX.read(data, { type: 'array' });
65   - // console.log(workbook);
66   - /* DO SOMETHING WITH workbook HERE */
67   - const excelData = getExcelData(workbook);
68   - emit('success', excelData);
69   - resolve();
70   - } catch (error) {
71   - reject(error);
72   - } finally {
73   - loadingRef.value = false;
74   - }
75   - };
76   - reader.readAsArrayBuffer(rawFile);
77   - });
78   - }
  93 + async function upload(rawFile: File) {
  94 + const inputRefDom = unref(inputRef);
  95 + if (inputRefDom) {
  96 + // fix can't select the same excel
  97 + inputRefDom.value = '';
  98 + }
  99 + readerData(rawFile);
  100 + }
  101 +
  102 + /**
  103 + * @description: 触发选择文件管理器
  104 + */
  105 + function handleInputClick(e: Event) {
  106 + const files = e && (e.target as HTMLInputElement).files;
  107 + const rawFile = files && files[0]; // only use files[0]
  108 + if (!rawFile) return;
  109 + upload(rawFile);
  110 + }
79 111  
80   - async function upload(rawFile: File) {
81   - const inputRefDom = unref(inputRef);
82   - if (inputRefDom) {
83   - // fix can't select the same excel
84   - inputRefDom.value = '';
  112 + /**
  113 + * @description: 点击上传按钮
  114 + */
  115 + function handleUpload() {
  116 + const inputRefDom = unref(inputRef);
  117 + inputRefDom && inputRefDom.click();
85 118 }
86   - readerData(rawFile);
87   - }
88   - /**
89   - * @description: 触发选择文件管理器
90   - */
91   - function handleInputClick(e: Event) {
92   - const files = e && (e.target as HTMLInputElement).files;
93   - const rawFile = files && files[0]; // only use files[0]
94   - if (!rawFile) return;
95   - upload(rawFile);
96   - }
97   - /**
98   - * @description: 点击上传按钮
99   - */
100   - function handleUpload() {
101   - const inputRefDom = unref(inputRef);
102   - inputRefDom && inputRefDom.click();
103   - }
104 119  
105   - return () => {
106   - return (
107   - <div>
108   - <input
109   - ref={inputRef}
110   - type="file"
111   - accept=".xlsx, .xls"
112   - style=" z-index: -9999; display: none;"
113   - onChange={handleInputClick}
114   - />
115   - <div onClick={handleUpload}>{getSlot(slots)}</div>
116   - </div>
117   - );
118   - };
119   - },
120   -});
  120 + return { handleUpload, handleInputClick, inputRef };
  121 + },
  122 + });
  123 +</script>
... ...
src/router/routes/modules/demo/excel.ts
  View file @eecde4c
... ... @@ -9,7 +9,7 @@ export default {
9 9 component: PAGE_LAYOUT_COMPONENT,
10 10 redirect: '/excel/customExport',
11 11 meta: {
12   - icon: 'ant-design:area-chart-outlined',
  12 + icon: 'mdi:microsoft-excel',
13 13 title: 'Excel',
14 14 },
15 15 },
... ... @@ -18,7 +18,7 @@ export default {
18 18 {
19 19 path: '/customExport',
20 20 name: 'CustomExport',
21   - component: () => import('/@/views/demo/echarts/excel/CustomExport.vue'),
  21 + component: () => import('/@/views/demo/excel/CustomExport.vue'),
22 22 meta: {
23 23 title: '选择导出格式',
24 24 },
... ... @@ -26,7 +26,7 @@ export default {
26 26 {
27 27 path: '/jsonExport',
28 28 name: 'JsonExport',
29   - component: () => import('/@/views/demo/echarts/excel/JsonExport.vue'),
  29 + component: () => import('/@/views/demo/excel/JsonExport.vue'),
30 30 meta: {
31 31 title: 'JSON数据导出',
32 32 },
... ... @@ -34,7 +34,7 @@ export default {
34 34 {
35 35 path: '/arrayExport',
36 36 name: 'ArrayExport',
37   - component: () => import('/@/views/demo/echarts/excel/ArrayExport.vue'),
  37 + component: () => import('/@/views/demo/excel/ArrayExport.vue'),
38 38 meta: {
39 39 title: 'Array数据导出',
40 40 },
... ... @@ -42,12 +42,10 @@ export default {
42 42 {
43 43 path: '/importExcel',
44 44 name: 'ImportExcel',
45   - component: () => import('/@/views/demo/echarts/excel/ImportExcel.vue'),
  45 + component: () => import('/@/views/demo/excel/ImportExcel.vue'),
46 46 meta: {
47 47 title: '导入',
48 48 },
49 49 },
50   - // ],
51   - // },
52 50 ],
53 51 } as AppRouteModule;
... ...
src/router/routes/modules/demo/tree.ts
  View file @eecde4c
... ... @@ -9,7 +9,7 @@ export default {
9 9 component: PAGE_LAYOUT_COMPONENT,
10 10 redirect: '/tree/basic',
11 11 meta: {
12   - icon: 'ant-design:table-outlined',
  12 + icon: 'clarity:tree-view-line',
13 13 title: 'Tree',
14 14 },
15 15 },
... ...
src/views/demo/echarts/excel/ArrayExport.vue renamed to src/views/demo/excel/ArrayExport.vue
  View file @eecde4c
src/views/demo/echarts/excel/CustomExport.vue renamed to src/views/demo/excel/CustomExport.vue
  View file @eecde4c
src/views/demo/echarts/excel/ImportExcel.vue renamed to src/views/demo/excel/ImportExcel.vue
  View file @eecde4c
src/views/demo/echarts/excel/JsonExport.vue renamed to src/views/demo/excel/JsonExport.vue
  View file @eecde4c
src/views/demo/echarts/excel/data.ts renamed to src/views/demo/excel/data.ts
  View file @eecde4c