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

fix: 修复设备导入使用.csv格式存在问题

See merge request yunteng/thingskit-front!1081

@@ -41,6 +41,8 @@
     showIndexColumn: false,
     columns: columnTypeSchema,
     resizeHeightOffset: -300,
+    maxHeight: 300,
+    canResize: false,
   });
 
   const parseValueToTableData = () => {
@@ -54,7 +56,7 @@
     const dataSource = header.map((columnKey, index) => {
       return {
         [ColumnFileEnum.EXAMPLE_VALUE]: exampleRow[columnKey],
-        [ColumnFileEnum.TYPE]: getColumnType(index),
+        [ColumnFileEnum.TYPE]: index < 2 ? getColumnType(index) : null,
         [ColumnFileEnum.KEY]: columnKey,
         id: buildUUID(),
       } as ColumnDataRecord;
@@ -136,6 +138,8 @@
             :disabled="getColumnNeedDisabled(index)"
             :options="columnTypeOptions"
             :dropdown-match-select-width="false"
+            allow-clear
+            placeholder="请选择列类型"
           />
         </section>
       </template>
@@ -165,11 +169,11 @@
     .ant-select,
     .ant-input,
     .ant-select-selector {
-      height: 22px !important;
+      height: 30px !important;
     }
 
     .ant-select-selection-item {
-      line-height: 22px !important;
+      line-height: 30px !important;
     }
   }
 </style>

@@ -54,7 +54,7 @@
         try {
           const data = (event.target as FileReader).result as string;
 
-          const result = XLSX.read(data, { type: 'string' });
+          const result = XLSX.read(data, { type: 'binary' });
 
           const sheetName = result.SheetNames.at(0);
           const workbook = result.Sheets;
@@ -72,7 +72,7 @@
           resolve({ header, content });
         } catch (error) {
           const { createMessage } = useMessage();
-          createMessage.error('请检查csv文件是否正确');
+          createMessage.error('请检查xlsx文件是否正确');
           throw error;
         }
       };
@@ -80,7 +80,7 @@
       fileReader.onerror = () => {
         reject(false);
       };
-      fileReader.readAsText(file, 'GB2312');
+      fileReader.readAsBinaryString(file);
     });
   };
 
@@ -120,7 +120,7 @@
     <Upload.Dragger
       :fileList="fileList"
       :customRequest="handleParseFile"
-      accept=".csv"
+      accept=".xlsx"
       name="file"
       :remove="handleRemove"
     >

@@ -8,6 +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';
 
 export enum FieldsEnum {
   ORGANIZATION_ID = 'organizationId',
@@ -310,6 +311,8 @@ export const generateColumnTypeOptions = () => {
   };
   options.push(credentialsOption);
 
+  options.push({ label: '设备名称', value: ColumTypeEnum.NAME });
+
   return options;
 };
 
@@ -332,19 +335,13 @@ export const columnTypeSchema: BasicColumn[] = [
   },
 ];
 
-export const csvTemplate = `设备名称,凭证账号,凭证密码
-温湿度设备,admin,123456 
-`;
+export function exportTemplate() {
+  const book = XLSX.utils.book_new();
+  const sheet = XLSX.utils.aoa_to_sheet([
+    ['设备名称', '访问令牌'],
+    ['温湿度设备', 'admin'],
+  ]);
 
-export const downloadFile = (data: string, fileName: string, type: string, ext: string) => {
-  const blob = new Blob([data], { type: type });
-  const objectURL = URL.createObjectURL(blob);
-  const element = document.createElement('a');
-  element.href = objectURL;
-  element.download = `${fileName}.${ext}`;
-  element.style.display = 'none';
-  document.body.appendChild(element);
-  element.click();
-  element.remove();
-  URL.revokeObjectURL(objectURL);
-};
+  XLSX.utils.book_append_sheet(book, sheet, '设备导入模版');
+  XLSX.writeFile(book, 'template.xlsx', { bookType: 'xlsx' });
+}

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