Merge branch 'perf/device-import' into 'main_dev'

perf: 优化模版下载可使用csv文件格式

See merge request yunteng/thingskit-front!1096

@@ -3,10 +3,10 @@
   import { InboxOutlined } from '@ant-design/icons-vue';
   import { computed } from 'vue';
   import StepContainer from './StepContainer.vue';
-  import XLSX, { CellObject } from 'xlsx';
   import { basicProps } from './props';
   import { UploadFileParseValue } from './type';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import { readCsvFile, readXLSXFile } from './config';
 
   const props = defineProps({
     ...basicProps,
@@ -30,58 +30,14 @@
     status: string;
   }
 
-  const readFile = async (file: File): Promise<UploadFileParseValue | boolean> => {
-    /**
-     * @description 读取表头
-     * @param sheet 工作表
-     * @param range 区间
-     * @param headerRow 表头行
-     */
-    const getTableHeader = (sheet: XLSX.WorkSheet, range: [number, number], headerRow = 1) => {
-      const [startColumn, endColumn] = range;
-      const header: string[] = [];
-      for (let i = startColumn; i <= endColumn; i++) {
-        const columnIndex = XLSX.utils.encode_col(i) + headerRow;
-        const value = (sheet[columnIndex] as CellObject).v;
-        header.push(value as string);
-      }
-      return header;
-    };
+  const { createMessage } = useMessage();
 
-    return new Promise((resolve, reject) => {
-      const fileReader = new FileReader();
-      fileReader.onload = (event: ProgressEvent) => {
-        try {
-          const data = (event.target as FileReader).result as string;
-
-          const result = XLSX.read(data, { type: 'binary' });
-
-          const sheetName = result.SheetNames.at(0);
-          const workbook = result.Sheets;
-          const sheet = workbook[sheetName as string];
-          const sheetRange = sheet['!ref'];
-
-          const {
-            s: { c: startColumn },
-            e: { c: endColumn },
-          } = XLSX.utils.decode_range(sheetRange!);
-
-          const header = getTableHeader(sheet, [startColumn, endColumn]);
-          const content = XLSX.utils.sheet_to_json(sheet, { range: sheetRange }) as Recordable[];
-
-          resolve({ header, content });
-        } catch (error) {
-          const { createMessage } = useMessage();
-          createMessage.error('请检查xlsx文件是否正确');
-          throw error;
-        }
-      };
-
-      fileReader.onerror = () => {
-        reject(false);
-      };
-      fileReader.readAsBinaryString(file);
-    });
+  const readFile = async (file: File) => {
+    try {
+      return file.type.includes('csv') ? await readCsvFile(file) : await readXLSXFile(file);
+    } catch (e) {
+      createMessage.error('请检查文件是否正确');
+    }
   };
 
   const handleParseFile = async ({ file, onSuccess, onError }: FileRequestParams) => {
@@ -120,7 +76,7 @@
     <Upload.Dragger
       :fileList="fileList"
       :customRequest="handleParseFile"
-      accept=".xlsx"
+      accept=".xlsx,.csv"
       name="file"
       :remove="handleRemove"
     >

@@ -8,7 +8,7 @@ import { FormSchema } from '/@/components/Form';
 import { BasicColumn } from '/@/components/Table';
 import { copyTransFun } from '/@/utils/fnUtils';
 import { TransportTypeEnum } from '/@/views/device/profiles/components/TransportDescript/const';
-import XLSX from 'xlsx';
+import XLSX, { CellObject } from 'xlsx';
 
 export enum FieldsEnum {
   ORGANIZATION_ID = 'organizationId',
@@ -335,13 +335,94 @@ export const columnTypeSchema: BasicColumn[] = [
   },
 ];
 
-export function exportTemplate() {
+const IMPORT_DEVICE_TEMPLATE = [
+  ['设备名称', '访问令牌'],
+  ['温湿度设备', 'admin'],
+];
+
+export function exportXLSXTemplate() {
   const book = XLSX.utils.book_new();
-  const sheet = XLSX.utils.aoa_to_sheet([
-    ['设备名称', '访问令牌'],
-    ['温湿度设备', 'admin'],
-  ]);
+  const sheet = XLSX.utils.aoa_to_sheet(IMPORT_DEVICE_TEMPLATE);
 
   XLSX.utils.book_append_sheet(book, sheet, '设备导入模版');
   XLSX.writeFile(book, 'template.xlsx', { bookType: 'xlsx' });
 }
+
+function createFileReader(
+  file: File | Blob,
+  type: 'buffer' | 'dataUrl' | 'string' = 'string'
+): Promise<FileReader['result']> {
+  return new Promise((resolve, reject) => {
+    const fileReader = new FileReader();
+    fileReader.onload = () => {
+      if (fileReader.readyState === FileReader.DONE) {
+        resolve(fileReader.result);
+      }
+    };
+
+    fileReader.onerror = (e) => {
+      reject(e);
+    };
+
+    if (type === 'buffer') {
+      fileReader.readAsArrayBuffer(file);
+    } else if (type === 'dataUrl') {
+      fileReader.readAsDataURL(file);
+    } else {
+      fileReader.readAsText(file);
+    }
+  });
+}
+
+function parseWorkbook(workbook: XLSX.WorkBook) {
+  /**
+   * @description 读取表头
+   * @param sheet 工作表
+   * @param range 区间
+   * @param headerRow 表头行
+   */
+  const getTableHeader = (sheet: XLSX.WorkSheet, range: [number, number], headerRow = 1) => {
+    const [startColumn, endColumn] = range;
+    const header: string[] = [];
+    for (let i = startColumn; i <= endColumn; i++) {
+      const columnIndex = XLSX.utils.encode_col(i) + headerRow;
+      const value = (sheet[columnIndex] as CellObject).v;
+      header.push(value as string);
+    }
+    return header;
+  };
+
+  const sheetName = workbook.SheetNames.at(0);
+  const sheets = workbook.Sheets;
+  const sheet = sheets[sheetName as string];
+  const sheetRange = sheet['!ref'];
+
+  const {
+    s: { c: startColumn },
+    e: { c: endColumn },
+  } = XLSX.utils.decode_range(sheetRange!);
+
+  const header = getTableHeader(sheet, [startColumn, endColumn]);
+  const content = XLSX.utils.sheet_to_json(sheet, { range: sheetRange }) as Recordable[];
+
+  return { header, content };
+}
+
+export async function readCsvFile(file: File) {
+  let data = await createFileReader(file);
+
+  const blob = new Blob(['\ufeff' + data], { type: 'text/csv;charset=utf-8' });
+
+  data = await createFileReader(blob, 'buffer');
+
+  const workbook = XLSX.read(data, { type: 'array', raw: true, codepage: 96 });
+
+  return parseWorkbook(workbook);
+}
+
+export async function readXLSXFile(file: File) {
+  const data = await createFileReader(file, 'buffer');
+  const workbook = XLSX.read(data, { type: 'binary' });
+
+  return parseWorkbook(workbook);
+}

@@ -9,7 +9,7 @@
   import CreateEntity from './CreateEntity.vue';
   import CompleteResult from './CompleteResult.vue';
   import { ImportDeviceResponse } from '/@/api/device/model/batchImportModel';
-  import { exportTemplate } from './config';
+  import { exportXLSXTemplate } from './config';
 
   const emit = defineEmits(['importFinally']);
 
@@ -79,8 +79,7 @@
   };
 
   const handleTemplateDownload = () => {
-    exportTemplate();
-    // downloadFile(csvTemplate, 'template', 'text/csv,chartset=UTF-8', 'csv');
+    exportXLSXTemplate();
   };
 </script>
 
@@ -143,7 +142,7 @@
         </Steps.Step>
       </Steps>
       <Tooltip
-        title="注意：模板表头的第一列为设备名称,第二列为访问令牌。新增列时，名称和访问令牌不能重复。下载的模板建议使用文本打开，如使用wps打开请另外为新的csv文件。"
+        title="注意：模板表头的第一列为设备名称,第二列为访问令牌。新增列时，名称和访问令牌不能重复。"
       >
         <Button
           type="text"