perf: perf excel comp code

vben
1 parent 968f791f
Showing 13 changed files with 133 additions and 172 deletions
CHANGELOG.zh_CN.md
src/components/Authority/index.tsx
src/components/Drawer/src/BasicDrawer.tsx
src/components/Excel/index.ts
src/components/Excel/src/ExportExcelModel.vue
src/components/Excel/src/ImportExcel.tsx → src/components/Excel/src/ImportExcel.vue
src/router/routes/modules/demo/excel.ts
src/router/routes/modules/demo/tree.ts
src/views/demo/echarts/excel/ArrayExport.vue → src/views/demo/excel/ArrayExport.vue
src/views/demo/echarts/excel/CustomExport.vue → src/views/demo/excel/CustomExport.vue
src/views/demo/echarts/excel/ImportExcel.vue → src/views/demo/excel/ImportExcel.vue
src/views/demo/echarts/excel/JsonExport.vue → src/views/demo/excel/JsonExport.vue
src/views/demo/echarts/excel/data.ts → src/views/demo/excel/data.ts
 # Wip
+### 🎫 Chores
+
+- 表格默认不显示边框
+
 ### ⚡ Performance Improvements
 - 优化首屏体积大小
@@ -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);
     };
   },
 });
@@ -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}
-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';
@@ -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,
-import { defineComponent, ref, unref } from 'vue';
-import XLSX from 'xlsx';
-import { getSlot } from '/@/utils/helper/tsxHelper';
+<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',
-  setup(_, { slots, emit }) {
-    const inputRef = ref<HTMLInputElement | null>(null);
-    const loadingRef = ref<Boolean>(false);
+  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']);
+      /**
+       * @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);
+        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;
       }
-      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,
-          },
+      /**
+       * @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);
         });
       }
-      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);
+      }
-    async function upload(rawFile: File) {
-      const inputRefDom = unref(inputRef);
-      if (inputRefDom) {
-        // fix can't select the same excel
-        inputRefDom.value = '';
+      /**
+       * @description: 点击上传按钮
+       */
+      function handleUpload() {
+        const inputRefDom = unref(inputRef);
+        inputRefDom && inputRefDom.click();
       }
-      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>
-      );
-    };
-  },
-});
+      return { handleUpload, handleInputClick, inputRef };
+    },
+  });
+</script>
@@ -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;
@@ -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',
     },
   },