excel解析空行删除

admin-web/src/views/admin/station/endpoint/upload.vue

@@ -20,7 +20,9 @@
         </template>
 
         <el-button @click="handleOpenFile" plain type="success" class="mt5"> 请选择excel文件上传导入</el-button>
-        <el-text type="primary" class="ml5">{{ state.uploadFileName }} <SvgIcon v-if="state.uploadFileName" name="ele-Remove" @click="reset" color="var(--el-color-danger)"></SvgIcon></el-text>
+        <el-text type="primary" class="ml5">{{ state.uploadFileName }}
+          <SvgIcon v-if="state.uploadFileName" name="ele-Remove" @click="reset" color="var(--el-color-danger)"></SvgIcon>
+        </el-text>
 
         <!--        <ext-upload
                     v-model="state.excelForm.file"
@@ -37,7 +39,6 @@
     </el-tabs>
 
 
-
     <div class="w100 mt5">
       <div class="w100">
         <el-scrollbar @scroll="handleFieldHeaderScroll" ref="fieldHeaderScrollRef" :min-size="0">
@@ -88,7 +89,7 @@
             <div class="w100  flex flex-align-items-center flex-justify-center  hover-parent">
 
               <el-dropdown @command="handleRow($event,row,rowIndex)">
-                <el-text type="primary" class="hover-child ml5 cursor-pointer font12">        <span>{{ rowIndex+1}}</span></el-text>
+                <el-text type="primary" class="hover-child ml5 cursor-pointer font12"><span>{{ rowIndex + 1 }}</span></el-text>
                 <template #dropdown>
                   <el-dropdown-item command="setHeader" style="color:var(--el-color-success)" class="font12">设为表头</el-dropdown-item>
                   <el-dropdown-item command="delete" style="color:var(--el-color-danger)" class="font12">删除本行</el-dropdown-item>
@@ -111,16 +112,15 @@
 </template>
 
 <script setup lang="ts" name="EndpointImportDialog">
-import {reactive, onMounted, nextTick, ref, toRaw, unref} from 'vue';
+import {nextTick, onMounted, reactive, ref, unref} from 'vue';
 
 //定义初始变量，重置使用
-import {useFileDialog} from '@vueuse/core'
+import {useFileDialog, useThrottleFn} from '@vueuse/core'
 
-import {$body, $post} from "/@/utils/request";
+import {$body} from "/@/utils/request";
 import {Msg} from "/@/utils/message";
-import {VxeTable, VxeColumn, VxeTableInstance} from "vxe-table";
+import {VxeColumn, VxeTable, VxeTableInstance} from "vxe-table";
 import 'vxe-table/lib/style.css'
-import {useDebounceFn, useThrottleFn} from '@vueuse/core'
 
 import {ElScrollbar} from 'element-plus'
 import * as XLSX from 'xlsx'
@@ -129,14 +129,14 @@ const fieldHeaderScrollRef = ref<InstanceType<typeof ElScrollbar>>();
 const excelRef = ref<VxeTableInstance>();
 
 
-const {files, open: handleOpenFile, reset, onChange:handleFileChange} = useFileDialog(
+const {files, open: handleOpenFile, reset, onChange: handleFileChange} = useFileDialog(
     {
       multiple: false,
       accept: '.xls,.xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel'
     })
 
 
-handleFileChange((files)=>{
+handleFileChange((files) => {
   parseExcel()
 })
 
@@ -163,14 +163,14 @@ const initState = () => ({
   uploadFileName: '' as String | null,
   importLoading: false,
   tableHeight: 400,
-  fieldList:[
-    {label:'序号ID',value:'id'},
-    {label:'站点ID',value:'stationId'},
-    {label:'站点名称',value:'stationName'},
-    {label:'设备短编号',value:'shortId'},
-    {label:'充电桩SN',value:'equipmentId'},
-    {label:'充电口SN',value:'connectorId'},
-    {label:'车位编号',value:'parkingNo'},
+  fieldList: [
+    {label: '序号ID', value: 'id'},
+    {label: '站点ID', value: 'stationId'},
+    {label: '站点名称', value: 'stationName'},
+    {label: '设备短编号', value: 'shortId'},
+    {label: '充电桩SN', value: 'equipmentId'},
+    {label: '充电口SN', value: 'connectorId'},
+    {label: '车位编号', value: 'parkingNo'},
   ]
 })
 
@@ -230,7 +230,7 @@ const handleCellClick = (e: any) => {
 
 const handleConfirm = () => {
   let checks: Array<string> = [];
-  let checkPass= true;
+  let checkPass = true;
   state.excelForm.importFields.forEach(key => {
     if (key) {
       if (checks.includes(key)) {
@@ -242,7 +242,7 @@ const handleConfirm = () => {
       }
     }
   })
-  if(!checkPass)return;
+  if (!checkPass) return;
   debounceImport();
 }
 
@@ -254,10 +254,10 @@ const debounceImport = useThrottleFn(() => {
       fieldIndexes.push(idx - 1);
     }
   })
-let  fields=state.excelForm.importFields.filter(k => !!k);
-  let dataList : Array<any> = [];
+  let fields = state.excelForm.importFields.filter(k => !!k);
+  let dataList: Array<any> = [];
   state.excelForm.data.forEach(data => {
-    let item ={}
+    let item = {}
     let arr: Array<any> = []
     fieldIndexes.forEach((idx, i) => {
       item[fields[i]] = data[`f${idx}`] || ""
@@ -390,11 +390,18 @@ const parseExcel = (sheetName: string = "") => {
     let tmpContents: any[] = []
     for (let i = state.excelForm.rowContentIndex; i < rowList.length; i++) {
       let dl = rowList[i];
-      let rowItem = {}
+      let rowItem = {};
+      let fullEmpty = true;
+      console.log(i,dl)
       dl.forEach((rowValue: any, columnIdx: number) => {
+        if (rowValue) {
+          fullEmpty = false;
+        }
         rowItem[`f${columnIdx}`] = rowValue
       })
-      tmpContents.push(rowItem)
+      if (!fullEmpty) {
+        tmpContents.push(rowItem)
+      }
     }
     state.excelForm.data = tmpContents;
     state.excelForm.loading = false;
@@ -469,7 +476,7 @@ defineExpose({
   }
 }
 
-.vxe-table--tooltip-wrapper{
+.vxe-table--tooltip-wrapper {
   z-index: 10000 !important;
 }
 

admin-web/src/views/admin/station/list/upload.vue

@@ -10,32 +10,35 @@
       class="pd0 dialog-padding-none"
   >
 
-    <el-tabs class="demo-tabs">
-      <el-tab-pane>
-        <template #label>
-        <span class="custom-tabs-label">
-          <SvgIcon name="ele-Grid"></SvgIcon>
-          <span>Excel导入</span>
-        </span>
-        </template>
-
-        <el-button @click="handleOpenFile" plain type="success" class="mt5"> 请选择excel文件上传导入</el-button>
-        <el-text type="primary" class="ml5">{{ state.uploadFileName }} <SvgIcon v-if="state.uploadFileName" name="ele-Remove" @click="reset" color="var(--el-color-danger)"></SvgIcon></el-text>
-
-        <!--        <ext-upload
-                    v-model="state.excelForm.file"
-                    placeholder="请选择上传文件"
-                    tips="请选择excel文件上传导入"
-                    style="width: 100%"
-                    :limit="1"
-                    mime="excel"
-                    @on-success="handleUploadFileSuccess">
-                </ext-upload>-->
-
-      </el-tab-pane>
-
-    </el-tabs>
-
+    <!--    <el-tabs class="demo-tabs">
+          <el-tab-pane>
+            <template #label>
+            <span class="custom-tabs-label">
+              <SvgIcon name="ele-Grid"></SvgIcon>
+              <span>Excel导入</span>
+            </span>
+            </template>-->
+
+    <el-button @click="handleOpenFile" plain type="success" class="mt5"> 请选择excel文件上传导入</el-button>
+    <el-text type="primary" class="ml5">{{ state.uploadFileName }}
+      <SvgIcon v-if="state.uploadFileName" name="ele-Remove" @click="reset" color="var(--el-color-danger)"></SvgIcon>
+    </el-text>
+
+    <!--        <ext-upload
+                v-model="state.excelForm.file"
+                placeholder="请选择上传文件"
+                tips="请选择excel文件上传导入"
+                style="width: 100%"
+                :limit="1"
+                mime="excel"
+                @on-success="handleUploadFileSuccess">
+            </ext-upload>-->
+    <!--
+
+          </el-tab-pane>
+
+        </el-tabs>
+    -->
 
 
     <div class="w100 mt5">
@@ -88,7 +91,7 @@
             <div class="w100  flex flex-align-items-center flex-justify-center  hover-parent">
 
               <el-dropdown @command="handleRow($event,row,rowIndex)">
-                <el-text type="primary" class="hover-child ml5 cursor-pointer font12">        <span>{{ rowIndex+1}}</span></el-text>
+                <el-text type="primary" class="hover-child ml5 cursor-pointer font12"><span>{{ rowIndex + 1 }}</span></el-text>
                 <template #dropdown>
                   <el-dropdown-item command="setHeader" style="color:var(--el-color-success)" class="font12">设为表头</el-dropdown-item>
                   <el-dropdown-item command="delete" style="color:var(--el-color-danger)" class="font12">删除本行</el-dropdown-item>
@@ -111,16 +114,15 @@
 </template>
 
 <script setup lang="ts" name="EndpointImportDialog">
-import {reactive, onMounted, nextTick, ref, toRaw, unref} from 'vue';
+import {nextTick, onMounted, reactive, ref, unref} from 'vue';
 
 //定义初始变量，重置使用
-import {useFileDialog} from '@vueuse/core'
+import {useFileDialog, useThrottleFn} from '@vueuse/core'
 
-import {$body, $post} from "/@/utils/request";
+import {$body} from "/@/utils/request";
 import {Msg} from "/@/utils/message";
-import {VxeTable, VxeColumn, VxeTableInstance} from "vxe-table";
+import {VxeColumn, VxeTable, VxeTableInstance} from "vxe-table";
 import 'vxe-table/lib/style.css'
-import {useDebounceFn, useThrottleFn} from '@vueuse/core'
 
 import {ElScrollbar} from 'element-plus'
 import * as XLSX from 'xlsx'
@@ -129,14 +131,14 @@ const fieldHeaderScrollRef = ref<InstanceType<typeof ElScrollbar>>();
 const excelRef = ref<VxeTableInstance>();
 
 
-const {files, open: handleOpenFile, reset, onChange:handleFileChange} = useFileDialog(
+const {files, open: handleOpenFile, reset, onChange: handleFileChange} = useFileDialog(
     {
       multiple: false,
       accept: '.xls,.xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel'
     })
 
 
-handleFileChange((files)=>{
+handleFileChange((files) => {
   parseExcel()
 })
 
@@ -163,14 +165,14 @@ const initState = () => ({
   uploadFileName: '' as String | null,
   importLoading: false,
   tableHeight: 400,
-  fieldList:[
-    {label:'序号ID',value:'id'},
-    {label:'站点ID',value:'stationId'},
-    {label:'站点名称',value:'stationName'},
-    {label:'设备短编号',value:'shortId'},
-    {label:'充电桩SN',value:'equipmentId'},
-    {label:'充电口SN',value:'connectorId'},
-    {label:'车位编号',value:'parkingNo'},
+  fieldList: [
+    {label: '序号ID', value: 'id'},
+    {label: '站点ID', value: 'stationId'},
+    {label: '站点名称', value: 'stationName'},
+    {label: '设备短编号', value: 'shortId'},
+    {label: '充电桩SN', value: 'equipmentId'},
+    {label: '充电口SN', value: 'connectorId'},
+    {label: '车位编号', value: 'parkingNo'},
   ]
 })
 
@@ -230,7 +232,7 @@ const handleCellClick = (e: any) => {
 
 const handleConfirm = () => {
   let checks: Array<string> = [];
-  let checkPass= true;
+  let checkPass = true;
   state.excelForm.importFields.forEach(key => {
     if (key) {
       if (checks.includes(key)) {
@@ -242,7 +244,7 @@ const handleConfirm = () => {
       }
     }
   })
-  if(!checkPass)return;
+  if (!checkPass) return;
   debounceImport();
 }
 
@@ -254,10 +256,10 @@ const debounceImport = useThrottleFn(() => {
       fieldIndexes.push(idx - 1);
     }
   })
-let  fields=state.excelForm.importFields.filter(k => !!k);
-  let dataList : Array<any> = [];
+  let fields = state.excelForm.importFields.filter(k => !!k);
+  let dataList: Array<any> = [];
   state.excelForm.data.forEach(data => {
-    let item ={}
+    let item = {}
     let arr: Array<any> = []
     fieldIndexes.forEach((idx, i) => {
       item[fields[i]] = data[`f${idx}`] || ""
@@ -391,10 +393,16 @@ const parseExcel = (sheetName: string = "") => {
     for (let i = state.excelForm.rowContentIndex; i < rowList.length; i++) {
       let dl = rowList[i];
       let rowItem = {}
+      let fullEmpty = true;
       dl.forEach((rowValue: any, columnIdx: number) => {
+        if (rowValue) {
+          fullEmpty = false;
+        }
         rowItem[`f${columnIdx}`] = rowValue
       })
-      tmpContents.push(rowItem)
+      if (!fullEmpty) {
+        tmpContents.push(rowItem)
+      }
     }
     state.excelForm.data = tmpContents;
     state.excelForm.loading = false;
@@ -469,7 +477,7 @@ defineExpose({
   }
 }
 
-.vxe-table--tooltip-wrapper{
+.vxe-table--tooltip-wrapper {
   z-index: 10000 !important;
 }