From c726e4a5daa94e363abd232711272705caf2d789 Mon Sep 17 00:00:00 2001
From: mk <2403457699@qq.com>
Date: Thu, 6 Mar 2025 14:12:12 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=A0=E6=8E=89=E5=A4=9A=E4=BD=99log?=
 =?UTF-8?q?=EF=BC=8C=E9=87=8D=E5=A4=8D=E6=89=93=E5=BC=80luckysheet?=
 =?UTF-8?q?=E4=BC=9A=E6=9C=89=E7=BC=93=E5=AD=98v-if=E8=A7=A3=E5=86=B3?=
 =?UTF-8?q?=E4=B8=8D=E4=BA=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/luckysheetConfig.js                 |  20 +-
 .../base/smartExcel/cpts/export-view.vue      | 171 ++++++++++++++----
 src/views/modules/base/smartExcel/report.vue  |   2 +-
 3 files changed, 145 insertions(+), 48 deletions(-)

diff --git a/src/utils/luckysheetConfig.js b/src/utils/luckysheetConfig.js
index 5e0d790ed..e93e292d2 100644
--- a/src/utils/luckysheetConfig.js
+++ b/src/utils/luckysheetConfig.js
@@ -85,18 +85,18 @@ const  options = {
          * {Boolean}[isRefresh]:是否刷新整个表格
          */
         cellUpdateBefore: (r, c, value, isRefresh) => {
-            console.log("更新这个单元格值之前触发:cellUpdateBefore");
-            console.log(
-                `单元格所在行:${r};单元格所在列:${c};是否刷新整个表格:${isRefresh};要修改的单元格内容: `,
-                value
-            );
+            // console.log("更新这个单元格值之前触发:cellUpdateBefore");
+            // console.log(
+            //     `单元格所在行:${r};单元格所在列:${c};是否刷新整个表格:${isRefresh};要修改的单元格内容: `,
+            //     value
+            // );
         },
         /** 更新这个单元格后触发 */
         cellUpdated: (r, c, oldValue, newValue, isRefresh) => {
-            console.log("cellUpdated:", r, c, oldValue, newValue);
-            // 获取单元格的值
-            const value = luckysheet.getCellValue(r, c, { type: "v" });
-            console.log("更新后的值:", value, "对值进行数据验证");
+            // console.log("cellUpdated:", r, c, oldValue, newValue);
+            // // 获取单元格的值
+            // const value = luckysheet.getCellValue(r, c, { type: "v" });
+            // console.log("更新后的值:", value, "对值进行数据验证");
         },
         /**单元格渲染前触发 return false 则不渲染该单元格
          * 参数：
@@ -261,7 +261,7 @@ const  options = {
         workbookDestroyAfter: (book) => { },
         /** 协同编辑中的每次操作后执行的方法，监听表格内容变化，即客户端每执行一次表格操作，Luckysheet将这次操作存到历史记录中后触发，撤销重做时因为也算一次操作，也会触发此钩子函数 参数：{Object}[operate]:本次操作的历史记录信息，根据不同的操作，会有不同的历史记录 */
         updated: (operate) => {
-            console.log("luckysheetUpdatedHook", operate);
+            // console.log("luckysheetUpdatedHook", operate);
             // 监听更新，并在3s后自动保存
             //     if (autoSave) {
             //         console.log(autoSave, "autoSave");
diff --git a/src/views/modules/base/smartExcel/cpts/export-view.vue b/src/views/modules/base/smartExcel/cpts/export-view.vue
index c7a53b8ce..81189103e 100644
--- a/src/views/modules/base/smartExcel/cpts/export-view.vue
+++ b/src/views/modules/base/smartExcel/cpts/export-view.vue
@@ -4,16 +4,16 @@
       <div class="top_btn flex flex-end">
         <div>
           <el-button type="text" round @click="handelClickBack" icon="el-icon-back">返回</el-button>
-          <el-button type="warning" @click="handleClickInspect" v-if="pageType !=='info'">上传统计模板
+          <el-button type="warning" @click="handleClickInspect" v-if="pageType !== 'info'">上传统计模板
           </el-button>
-          <el-button type="success" @click="onClickUplond()"v-if="pageType !=='info'"> 数据列表导出</el-button>
-          <el-button type="success" @click="onClickShowCondition()"v-if="pageType ==='info'"> 数据统计条件</el-button>
+          <el-button type="success" @click="onClickUplond()" v-if="pageType !== 'info'"> 数据列表导出</el-button>
+          <el-button type="success" @click="onClickShowCondition()" v-if="pageType === 'info'"> 数据统计条件</el-button>
         </div>
         <div>
           <el-button type="primary" @click="handleClickCurrencyEvent('submit')"> 导出</el-button>
         </div>
       </div>
-      <div id="luckysheet"></div>
+      <div id="luckysheet-export"></div>
     </div>
     <el-dialog title="数据列表导出" v-if="showUploadData" :visible.sync="showUploadData" width="60%"
       :close-on-click-modal="false">
@@ -25,7 +25,29 @@
       :close-on-click-modal="false">
       <resi-search ref="resi_form" :infoObj="infoObj.searchForm"></resi-search>
     </el-dialog>
-    
+    <el-dialog title="上传统计模板" v-if="showTemplate" :visible.sync="showTemplate" width="60%"
+      :close-on-click-modal="false">
+      <el-form :model="dataForm" :rules="dataRule" ref="dataForm"
+        :label-width="'120px'">
+        <el-form-item label="报表名称" prop="reportName">
+          <el-input v-model.trim="dataForm.reportName" placeholder="报表名称"></el-input>
+        </el-form-item>
+        <el-form-item label="上传模板">
+          <el-upload :headers="$getElUploadHeaders()" ref="upload" class="upload-btn" :action="uploadUlr"
+            v-if="!dataForm.moduleUrl" :limit="1" :accept="'.xlsx'" :with-credentials="true" :show-file-list="false"
+            :auto-upload="true" :on-success="handleExcelSuccess" :before-upload="beforeExcelUpload">
+            <template #trigger>
+              <el-button type="primary" v-loading.fullscreen.lock="fullscreenLoading">上传报表模板</el-button>
+            </template>
+          </el-upload>
+          <section v-else class="upload">
+            <img :src="require(`@/assets/images/index/Excel.png`)" alt="">
+            <span>{{ fileName }}</span>
+            <el-button type="text" @click="removeFile(file)" style="margin-left: 16px;"> 删除</el-button>
+          </section>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -41,6 +63,9 @@ import resiSearch from "./export-search.vue";
 export default {
   data() {
     return {
+      uploadUlr: window.SITE_CONFIG["apiURL"] +
+        "/oss/file/upload",
+      fullscreenLoading: false,
       showUploadData: false,
       menuList: [],
       menuActive: 0,
@@ -49,8 +74,18 @@ export default {
       currentId: '',
       btnLoading: false,
       workBookId: '',
-      infoObj:{},
-      showCondition:false
+      infoObj: {},
+      showCondition: false,
+      showTemplate: false,
+      dataForm: {
+        reportType: 1,//报表类型。0：数据列表，1：统计数据
+        reportName: '',//报表名称
+        workbookId: '',
+      },
+      dataRule: {
+        reportName: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]
+      },
+      exportJson:null,
     };
   },
   props: {
@@ -70,38 +105,101 @@ export default {
     ...mapGetters(['clientHeight', 'resolution']),
   },
   created() {
-
   },
   watch: {},
   async mounted() {
     await this.loadWorkBook()
-    this.$nextTick( async ()=>{
+    this.$nextTick(async () => {
       if (this.pageType === 'info') {
-      await this.getSheetList()
-      let heading =  this.infoObj.columnsJson[0].children.map(item=>({label:item.label}))
-      for(let i in heading){
-        luckysheet.setCellValue(0,i,heading[i].label)
-      }
-      let list = await this.getListData(this.infoIds.id);
-      let newArrar = luckysheet.getAllSheets();
-      this.currentTable = newArrar.filter(item => item.status == '1');
-      luckysheet.insertRow(this.currentTable[0].data.length, 1)
-      luckysheet.insertRow(this.currentTable[0].data.length, { number: list.length });
-      await nextTick(500)
-      let newArray = list.map(obj => {
-        return Object.keys(obj).map(key => {
-          return { m: obj[key], "ct": { "fa": "General", "t": "g" }, v: obj[key] };
+        await this.getSheetList()
+        let heading = this.infoObj.columnsJson[0].children.map(item => ({ label: item.label }))
+        for (let i in heading) {
+          luckysheet.setCellValue(0, i, heading[i].label)
+        }
+        let list = await this.getListData(this.infoIds.id);
+        let newArrar = luckysheet.getAllSheets();
+        this.currentTable = newArrar.filter(item => item.status == '1');
+        luckysheet.insertRow(this.currentTable[0].data.length, 1)
+        luckysheet.insertRow(this.currentTable[0].data.length, { number: list.length });
+        await nextTick(500)
+        let newArray = list.map(obj => {
+          return Object.keys(obj).map(key => {
+            return { m: obj[key], "ct": { "fa": "General", "t": "g" }, v: obj[key] };
+          });
         });
-      });
-      let bottomRightCorner = this.numberToLetter(Object.keys(list[0]).length)//选区右下角数字
-      luckysheet.setRangeValue(newArray, {
-        range: `A2:${bottomRightCorner}${2 + list.length}`,
-      })
-    }
+        let bottomRightCorner = this.numberToLetter(Object.keys(list[0]).length)//选区右下角数字
+        luckysheet.setRangeValue(newArray, {
+          range: `A2:${bottomRightCorner}${2 + list.length}`,
+        })
+      }
     })
   },
   methods: {
-    onClickShowCondition(){
+    handleExcelSuccess(e) {
+      if (e.code === 0) {
+        // this.moduleUrl = e.data.url;
+        // this.urlToFile(e.data.url)
+        this.showTemplate = false;
+        this.urlToFile('http://localhost:9001/epmet-work-pc/test1.xlsx')
+        this.fullscreenLoading = false;
+      }
+    },
+    async urlToFile(url, fileName = 'file') {
+      try {
+        // 使用 fetch 获取文件数据
+        const response = await fetch(url);
+        // 检查请求是否成功
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        // 转换为 Blob 对象
+        const blob = await response.blob();
+        // 根据 Blob 创建 File 对象
+        const file = new File([blob], fileName, { type: 'excel/xlsx' });
+
+        this.uploadExcel(file)
+      } catch (error) {
+        console.error('Error fetching or converting file:', error);
+        throw error;
+      }
+    },
+    uploadExcel(files) {
+      if (!files) return alert('没有文件等待导入');
+      let that = this
+      LuckyExcel.transformExcelToLucky(files, function (exportJson, luckysheetfile) {
+        console.log(exportJson, '获取到导入的JSON');
+        that.exportJson = exportJson
+        if (exportJson.sheets == null || exportJson.sheets.length == 0) return alert('读取excel文件内容失败, 目前不支持XLS文件!');
+        window.luckysheet.destroy();
+        options.container = 'luckysheet-export'
+        options.loadUrl = ''
+        window.luckysheet.create({
+          ...options,
+          data: exportJson.sheets,//暂时支持上传一个sheet页，因为插件bug有点多
+          title: exportJson.info.name,
+          hook: {},
+        });
+      });
+      this.saveLuckysheet()
+    },
+    beforeExcelUpload(file) {
+      this.fullscreenLoading = true;
+      const isType = file.type === "application/vnd.ms-excel";
+      const isTypeComputer =
+        file.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+      const fileType = isType || isTypeComputer;
+      const isLt1M = file.size / 1024 / 1024 < 10;
+      if (!fileType) {
+        this.$message.error("上传文件只能是xls/xlsx格式！");
+      }
+
+      if (!isLt1M) {
+        this.$message.error("上传文件大小不能超过 10MB!");
+      }
+      this.fileName = file.name
+      return fileType && isLt1M;
+    },
+    onClickShowCondition() {
       this.showCondition = true
     },
     async getSheetList() {
@@ -115,9 +213,9 @@ export default {
     },
     // 上传模板
     async handleClickInspect() {
-
+      this.showTemplate = true;
     },
-    
+
     onClickUplond() {
       this.showUploadData = true;
       let list = luckysheet.getAllSheets()
@@ -139,7 +237,7 @@ export default {
       luckysheet.setRangeValue(newArray, {
         range: `A2:${bottomRightCorner}${2 + listData.length}`,
       })
-     
+
     },
     async saveLuckysheet(head) {
       if (this.currentTable[0].data[0].every(item => !item) && head) {
@@ -174,9 +272,7 @@ export default {
       return letter;
     },
     loadWorkBook() {
-      window.luckysheet.destroy();
-      options.allowUpdate = true;
-      options.container = 'luckysheet'
+      options.container = 'luckysheet-export'
       options.gridKey = this.pageType === 'info' ? this.infoIds.workbookId : null;
       options.loadUrl = null
       window.luckysheet.create({
@@ -184,6 +280,7 @@ export default {
       });
     },
     handelClickBack() {
+      this.state = false;
       this.$emit('close')
     },
   },
@@ -224,7 +321,7 @@ export default {
   height: calc(100vh - 250px);
 }
 
-#luckysheet {
+#luckysheet-export{
   width: 100%;
   padding: 0px;
   z-index: 2;
diff --git a/src/views/modules/base/smartExcel/report.vue b/src/views/modules/base/smartExcel/report.vue
index 5ef5546a5..4ba47fda1 100644
--- a/src/views/modules/base/smartExcel/report.vue
+++ b/src/views/modules/base/smartExcel/report.vue
@@ -69,7 +69,7 @@
       </div>
     </div>
     <div class="m-search" v-if="pageType == 'add' || pageType == 'info'">
-      <exportlView @close="close" :pageType="pageType" :infoIds="infoIds" v-if="pageType == 'add' || pageType == 'info'"></exportlView>
+      <exportlView @close="close" :pageType="pageType" :infoIds="infoIds" ></exportlView>
     </div>
     <div v-if="showRecord">
       <el-dialog title="导出记录" :visible.sync="showRecord" width="50%" :close-on-click-modal="false">