新增前端vue

web-vue/packages/core/components/Excel/index.ts

@@ -0,0 +1,8 @@
+import { withInstall } from '@jeesite/core/utils';
+import impExcel from './src/ImportExcel.vue';
+import expExcelModal from './src/ExportExcelModal.vue';
+
+export const ImpExcel = withInstall(impExcel);
+export const ExpExcelModal = withInstall(expExcelModal);
+export * from './src/typing';
+export { jsonToSheetXlsx, aoaToSheetXlsx } from './src/Export2Excel';

web-vue/packages/core/components/Excel/src/Export2Excel.ts

@@ -0,0 +1,57 @@
+import { utils, writeFile } from 'xlsx';
+import type { WorkBook } from 'xlsx';
+import type { JsonToSheet, AoAToSheet } from './typing';
+
+const DEF_FILE_NAME = 'excel-list.xlsx';
+
+export function jsonToSheetXlsx<T = any>({
+  data,
+  header,
+  filename = DEF_FILE_NAME,
+  json2sheetOpts = {},
+  write2excelOpts = { bookType: 'xlsx' },
+}: JsonToSheet<T>) {
+  const arrData = [...data];
+  if (header) {
+    arrData.unshift(header);
+    json2sheetOpts.skipHeader = true;
+  }
+
+  const worksheet = utils.json_to_sheet(arrData, json2sheetOpts);
+
+  /* add worksheet to workbook */
+  const workbook: WorkBook = {
+    SheetNames: [filename],
+    Sheets: {
+      [filename]: worksheet,
+    },
+  };
+  /* output format determined by filename */
+  writeFile(workbook, filename, write2excelOpts);
+  /* at this point, out.xlsb will have been downloaded */
+}
+
+export function aoaToSheetXlsx<T = any>({
+  data,
+  header,
+  filename = DEF_FILE_NAME,
+  write2excelOpts = { bookType: 'xlsx' },
+}: AoAToSheet<T>) {
+  const arrData = [...data];
+  if (header) {
+    arrData.unshift(header);
+  }
+
+  const worksheet = utils.aoa_to_sheet(arrData);
+
+  /* add worksheet to workbook */
+  const workbook: WorkBook = {
+    SheetNames: [filename],
+    Sheets: {
+      [filename]: worksheet,
+    },
+  };
+  /* output format determined by filename */
+  writeFile(workbook, filename, write2excelOpts);
+  /* at this point, out.xlsb will have been downloaded */
+}

web-vue/packages/core/components/Excel/src/ExportExcelModal.vue

@@ -0,0 +1,81 @@
+<template>
+  <BasicModal v-bind="$attrs" :title="t('component.excel.exportModalTitle')" @ok="handleOk" @register="registerModal">
+    <BasicForm :labelWidth="100" :schemas="schemas" :showActionButtonGroup="false" @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts">
+  import type { ExportModalResult } from './typing';
+  import { defineComponent } from 'vue';
+  import { BasicModal, useModalInner } from '@jeesite/core/components/Modal';
+  import { BasicForm, FormSchema, useForm } from '@jeesite/core/components/Form';
+
+  import { useI18n } from '@jeesite/core/hooks/web/useI18n';
+
+  const { t } = useI18n();
+
+  const schemas: FormSchema[] = [
+    {
+      field: 'filename',
+      component: 'Input',
+      label: t('component.excel.fileName'),
+      rules: [{ required: true }],
+    },
+    {
+      field: 'bookType',
+      component: 'Select',
+      label: t('component.excel.fileType'),
+      defaultValue: 'xlsx',
+      rules: [{ required: true }],
+      componentProps: {
+        options: [
+          {
+            label: 'xlsx',
+            value: 'xlsx',
+            key: 'xlsx',
+          },
+          {
+            label: 'html',
+            value: 'html',
+            key: 'html',
+          },
+          {
+            label: 'csv',
+            value: 'csv',
+            key: 'csv',
+          },
+          {
+            label: 'txt',
+            value: 'txt',
+            key: 'txt',
+          },
+        ],
+      },
+    },
+  ];
+  export default defineComponent({
+    components: { BasicModal, BasicForm },
+    emits: ['success', 'register'],
+    setup(_, { emit }) {
+      const [registerForm, { validateFields }] = useForm();
+      const [registerModal, { closeModal }] = useModalInner();
+
+      async function handleOk() {
+        const res = (await validateFields()) as ExportModalResult;
+        const { filename, bookType } = res;
+        emit('success', {
+          filename: `${filename.split('.').shift()}.${bookType}`,
+          bookType,
+        });
+        closeModal();
+      }
+
+      return {
+        schemas,
+        handleOk,
+        registerForm,
+        registerModal,
+        t,
+      };
+    },
+  });
+</script>

web-vue/packages/core/components/Excel/src/ImportExcel.vue

@@ -0,0 +1,120 @@
+<template>
+  <div>
+    <input ref="inputRef" type="file" v-show="false" accept=".xlsx, .xls" @change="handleInputClick" />
+    <div @click="handleUpload">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, unref } from 'vue';
+  import { WorkBook, WorkSheet, utils, read } from 'xlsx';
+
+  import type { ExcelData } from './typing';
+  export default defineComponent({
+    name: 'ImportExcel',
+    emits: ['success', 'error'],
+    setup(_, { emit }) {
+      const inputRef = ref<HTMLInputElement | null>(null);
+      const loadingRef = ref<boolean>(false);
+
+      /**
+       * @description: 第一行作为头部
+       */
+      function getHeaderRow(sheet: WorkSheet) {
+        if (!sheet || !sheet['!ref']) return [];
+        const headers: string[] = [];
+        // A3:B7=>{s:{c:0, r:2}, e:{c:1, r:6}}
+        const range = 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[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 = utils.format_cell(cell);
+          headers.push(hdr);
+        }
+        return headers;
+      }
+
+      /**
+       * @description: 获得excel数据
+       */
+      function getExcelData(workbook: WorkBook) {
+        const excelData: ExcelData[] = [];
+        for (const sheetName of workbook.SheetNames) {
+          const worksheet = workbook.Sheets[sheetName];
+          const header: string[] = getHeaderRow(worksheet);
+          const results = 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 = read(data, { type: 'array' });
+              // console.log(workbook);
+              /* DO SOMETHING WITH workbook HERE */
+              const excelData = getExcelData(workbook);
+              emit('success', excelData);
+              resolve('');
+            } catch (error) {
+              reject(error);
+              emit('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 = '';
+        }
+        await readerData(rawFile);
+      }
+
+      /**
+       * @description: 触发选择文件管理器
+       */
+      function handleInputClick(e: Event) {
+        const files = e && (e.target as HTMLInputElement).files;
+        const rawFile = files && files[0]; // only setting files[0]
+        if (!rawFile) return;
+        upload(rawFile);
+      }
+
+      /**
+       * @description: 点击上传按钮
+       */
+      function handleUpload() {
+        const inputRefDom = unref(inputRef);
+        inputRefDom && inputRefDom.click();
+      }
+
+      return { handleUpload, handleInputClick, inputRef };
+    },
+  });
+</script>

web-vue/packages/core/components/Excel/src/typing.ts

@@ -0,0 +1,27 @@
+import type { JSON2SheetOpts, WritingOptions, BookType } from 'xlsx';
+
+export interface ExcelData<T = any> {
+  header: string[];
+  results: T[];
+  meta: { sheetName: string };
+}
+
+export interface JsonToSheet<T = any> {
+  data: T[];
+  header?: T;
+  filename?: string;
+  json2sheetOpts?: JSON2SheetOpts;
+  write2excelOpts?: WritingOptions;
+}
+
+export interface AoAToSheet<T = any> {
+  data: T[][];
+  header?: T[];
+  filename?: string;
+  write2excelOpts?: WritingOptions;
+}
+
+export interface ExportModalResult {
+  filename: string;
+  bookType: BookType;
+}