由于表格控件原因做不了 先中断..

src/views/datasheet_manage/customAnalysis/addAnalysisSheet.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="addSheet-wrap">
-    <div :class="['main',{'full-height':$route.path!=='/addAnalysisSheet'}]" v-loading="isLoading">
+    <div :class="['main',{'full-height':$route.path!=='/addAnalysisSheet'}]">
       <div class="left-section">
         <el-tabs 
           v-model="selectIndex" 
           type="card" 
           closable
           @tab-remove="handleRemoveSheet"
-          @tab-click="switchSheetHandle"
+          @tab-click="handleSwitchSheet"
         >
           <el-tab-pane
             :key="item.name"
@@ -16,16 +16,19 @@
             :name="String(index)"
           />
         </el-tabs>
-        <div class="sheet-wrapper" v-if="sheetConfig.data">
-          <Sheet ref="sheetRef" :option="sheetConfig"/>
+        <div class="sheet-wrapper" v-loading="isLoading">
+          <Sheet ref="sheetRef" :option="sheetConfig" v-if="sheetConfig.data"/>
         </div>
+
+        <!-- <tableNoData text="暂无数据" v-else/> -->
       </div>
 
       <rightSection v-if="$route.path!=='/addAnalysisSheet'"/>
     </div>
 
+
     <!-- 上传文件 -->
-    <bottomSection v-if="$route.path==='/addAnalysisSheet'"/>
+    <bottomSection v-if="$route.path==='/addAnalysisSheet'" :sheetList="sheetConfig.data||[]"/>
 
   </div>
 </template>
@@ -34,7 +37,7 @@
 import * as sheetInterface from '@/api/modules/sheetApi.js';
 import Sheet from '../components/SheetExcel.vue';
 import { getSheetImage } from '../common/option';
-import bottomSection from './components/uploadBottomSection.vue'
+import bottomSection from './components/bottomSection.vue'
 import rightSection from './components/rightSection.vue';
 export default {
   components: { Sheet,bottomSection,rightSection },
@@ -47,10 +50,15 @@ export default {
     return {
       isLoading: false,
       uploadSheetsList: [],
+      pageSize: 2000,
+      currentPage: 0,
+      maxPage:0,
+
       selectIndex: '0',
       sheetConfig: {
         showsheetbar: true,
-        // data: []
+        // enablePage: true
+        data: null
       }
     }
   },
@@ -60,14 +68,10 @@ export default {
       this.$router.go(-1);
     },
 
-    loadDataSync(sheets) {
-
-      // let data = 
-    },
-
     /* 切换表格 */
-    switchSheetHandle() {
-      
+    handleSwitchSheet() {
+      this.sheetConfig.data = null;
+      this.handelTranslateData(); 
     },
 
     /* 获取分类 */
@@ -79,45 +83,81 @@ export default {
       })
     },
 
-    handelTranslateData(e) {
-        LuckyExcel.transformExcelToLucky(e, (exportJson, luckysheetfile) =>{
-                                  
-            if(exportJson.sheets==null || exportJson.sheets.length==0){
-                this.$message.warning('解析文件失败')
-                return;
-            }
-            console.log(exportJson,luckysheetfile)
+    loadDataSync() {
+      let len = this.sheetConfig.data.length;
+      for(let i =0;i<len;i++) {
+        if(this.allSheetData[i].celldata[this.currentPage*this.pageSize]) {
+          this.sheetConfig.data[i].celldata = this.sheetConfig.data[i].celldata.concat(this.allSheetData[i].celldata.slice(this.currentPage*this.pageSize, (this.currentPage+1)*this.pageSize))
+          console.log(this.sheetConfig.data[i].celldata)
+          this.$refs.sheetRef.init()
+        }
+        continue
+
+      }
 
-            window.luckysheet.destroy()
+      if (this.currentPage<this.maxPage) {
+        this.currentPage++
+        setTimeout(this.loadDataSync(), 1000); // 1秒后加载下一页数据
+      }else {
+        this.isLoadOver = true;
+      }
+    },
+
+    /* 分割数据 */
+    splitSheetData(sheets) {
+      this.allSheetData = sheets.map(_ => ({
+        index: _.index, //工作表索引
+        order: _.order, //工作表的下标
+        name: _.name,
+        calcChain: _.calcChain,
+        celldata: _.celldata,
+        config: _.config
+      }));
 
-            // this.loadDataSync(exportJson.sheets);
+      this.maxPage = Math.max(...sheets.map(_ =>  Math.ceil(_.celldata.length / this.pageSize)))
 
-            this.sheetConfig.data = exportJson.sheets.map(_ => ({
-              index: _.index, //工作表索引
-              order: _.order, //工作表的下标
-              name: _.name,
-              calcChain: _.calcChain,
-              celldata: _.celldata,
-              config: _.config,
-            }));
+      this.sheetConfig.data = this.allSheetData.map(_ => ({
+        index: _.index, //工作表索引
+        order: _.order, //工作表的下标
+        name: _.name,
+        calcChain: _.calcChain,
+        config: _.config,
+        celldata: _.celldata
+      }));
+      
+      // this.loadDataSync();
+      // console.log(this.sheetConfig.data)
+      this.isLoading = false;
+    },
 
-            this.isLoading = false
-            // this.$refs.sheetRef.init();
+    handelTranslateData() {
+        this.isLoading = true;
+        LuckyExcel.transformExcelToLucky(this.uploadSheetsList[Number(this.selectIndex)], (exportJson, luckysheetfile) =>{
+                                  
+          if(exportJson.sheets==null || exportJson.sheets.length==0){
+              this.$message.warning('解析文件失败')
+              return;
+          }
+
+            this.splitSheetData(exportJson.sheets);
 
-            console.log(this.sheetConfig)
         });
 
     },
 
     /* 移除表格 */
-    handleRemoveSheet(name) {
-      console.log(name)
-      let index = this.uploadSheetsList.findIndex(_ => _.name === name)
-      this.uploadSheetsList.splice(index,1)
-
+    handleRemoveSheet(index) {
       if(this.uploadSheetsList.length === 1) {
         this.backHandle()
+        return
       }
+
+      this.uploadSheetsList.splice(Number(index),1)
+      if(this.selectIndex === index) {
+        this.selectIndex = '0';
+        this.handleSwitchSheet()
+      }
+
     },
 
 
@@ -169,8 +209,7 @@ export default {
     this.getClassify();
     if(this.files) {
       this.uploadSheetsList =  Object.values(this.files);
-      this.isLoading = true;
-      this.handelTranslateData(this.uploadSheetsList[Number(this.selectIndex)])
+      this.handelTranslateData()
       this.$store.commit('sheet/SET_UPLOADFIlES',null)
     }
   }
@@ -208,6 +247,7 @@ export default {
       flex:1;
       .sheet-wrapper {
         position: relative;
+        background: #fff;
         min-height: 700px;
       }
     

src/views/datasheet_manage/customAnalysis/components/uploadBottomSection.vue → src/views/datasheet_manage/customAnalysis/components/bottomSection.vue

@@ -5,7 +5,7 @@
     <div>
       <div class="page-list">
         <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" style="margin-right:30px">全部</el-checkbox>
-        <el-checkbox-group v-model="sheetChecked" @change="handleCheckedCitiesChange">
+        <el-checkbox-group v-model="sheetChecked" @change="handleCheckedChange">
           <el-checkbox v-for="item in sheetPages" :label="item" :key="item">{{item}}</el-checkbox>
         </el-checkbox-group>
       </div>
@@ -24,7 +24,7 @@
             :value="item.ExcelClassifyId"
           />
         </el-select>
-        <el-button type="primary" style="margin-left:30px">保存</el-button>
+        <el-button type="primary" style="margin-left:30px" @click="saveSheetHandle">保存</el-button>
           <el-tooltip class="item" effect="dark" content="根据用户选择的sheet页上传文件" placement="top-start">
           <i class="el-icon-warning"/>
         </el-tooltip>
@@ -55,6 +55,7 @@
         </label>
         <div class="page-list">
           <el-radio v-model="item.checked" v-for="item in sheetPages" :key="item">{{item}}</el-radio>
+          
         </div>
       </div>
 
@@ -65,22 +66,44 @@
 </template>
 <script>
 export default {
+  props: {
+    sheetList: {
+      type: Array
+    }
+  },
+  watch: {
+    sheetList(nval) {
+      this.sheetPages = nval.map(_ => _.name)
+    }
+  },
   data() {
     return {
       isIndeterminate: false,
       checkAll: false,
-      sheetPages: ['表1','表2','表3'],
+      sheetPages: this.sheetList.map(_ => _.name),
       sheetChecked: [],
 
       sheetForm: {},
       classifyArr: [],
     }
-  },
-  mounted(){
-
   },
   methods:{
+    saveSheetHandle() {
+      if(!this.sheetChecked.length) return this.$message.warning('请选择要保存的sheet页')
+    },
+
+    initStatus() {
+      this.sheetChecked = [];
+    },
 
+    handleCheckedChange(val){
+      this.checkAll = val.length === this.sheetPages.length;
+      this.isIndeterminate = val.length > 0 && val.length < this.sheetPages.length;
+    },
+    handleCheckAllChange(val){
+      this.sheetChecked = val ? this.sheetPages : [];
+      this.isIndeterminate = false;
+    },
   },
 }
 </script>