隐藏返回按钮，文件上传后弹出模板确认

src/views/modules/base/smartExcel/cpts/excel-add.vue

@@ -1,24 +1,54 @@
 <template>
     <!-- 新建任务 -->
     <div class=''>
-        <el-upload ref="upload" class="upload-demo" :action="uploadUlr" :limit="1" :on-change="handleFileChange"
-            :auto-upload="false" accept=".xlsx">
+        <el-upload :headers="$getElUploadHeaders()" ref="upload" class="upload-btn" :action="uploadUlr" :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">上传报表模板</el-button>
             </template>
         </el-upload>
+        <div v-if="showTemplate">
+            <ExcelTemplateConfirmation :showTemplate="showTemplate" :fileUrl="fileUrl"/>
+        </div>
     </div>
 </template>
 
 <script>
+import ExcelTemplateConfirmation from './excel-template-confirmation.vue';
 export default {
     data() {
         return {
-            uploadUlr: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadvariedfile",
+            uploadUlr:window.SITE_CONFIG["apiURL"] +
+                "/oss/file/upload",
+            fileUrl:'',
+            showTemplate:false
         };
     },
     created() { },
     methods: {
+        handleExcelSuccess(e) {
+            if(e.code === 0){
+                this.showTemplate = true;
+                this.fileUrl = e.data.url
+            }
+        },
+        beforeExcelUpload(file) {
+            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!");
+            }
+            return fileType && isLt1M;
+        },
         handleFileChange(file, newFileList) {
             const selectedFile = file.raw;
             if (!(selectedFile instanceof File)) {
@@ -33,28 +63,9 @@ export default {
                 return;
             }
         },
-        beforeImgUpload(file) {
-            console.log(file);
-            const isLt1M = file.size / 1024 / 1024 < 10;
-            const srcType = file.type;
-            const format = file.name.split(".").pop();
-            if (!isLt1M) {
-                this.$message.error("上传文件大小不能超过 10MB!");
-                return false;
-            }
-            if (
-                srcType.indexOf("image") == -1 &&
-                srcType.indexOf("video") == -1 &&
-                ["doc", "docx", "xls", "xlsx", "ppt", "pptx", "pdf"].indexOf(format) ==
-                -1
-            ) {
-                this.$message.error("仅限图片、word和pdf文件!");
-                return false;
-            }
-            return true;
-        },
+
     },
-    components: {},
+    components: {ExcelTemplateConfirmation},
     computed: {},
     watch: {},
 }

src/views/modules/base/smartExcel/cpts/excel-template-confirmation.vue

@@ -1,26 +1,106 @@
 <template>
     <!-- 确认模板 -->
-     <div class=''>
-        
-     </div>
- </template>
- 
- <script>
- export default {
-     data() {
-         return {};
-     },
-     created() {},
-     methods: {
-         
-     },
-     components:{},
-     computed:{},
-     watch: {},
- }
- </script>
- 
- <style lang='scss' scoped>
- 
- </style>
- 
+    <div class=''>
+        <el-dialog title="模板确认" :visible.sync="showTemplate" width="50%" >
+            <div id="luckysheet"></div>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="showTemplate = false">取 消</el-button>
+                <el-button type="primary" @click="showTemplate = false">确 定</el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import LuckyExcel from 'luckyexcel';
+import options from "@/utils/luckysheetConfig.js";
+
+export default {
+    data() {
+        return {};
+    },
+    created() { },
+    methods: {
+        handleCellEditBefore(e) {
+            this.drawer = true;
+            let column = parseInt(e[0].column[0]) + 1, row = parseInt(e[0].row[0]) + 1;
+            this.selectedCell = "第" + row + "行" + "第" + column + "列";
+        },
+    },
+    mounted() {
+        console.log(this.fileUrl, 'fileUrl===');
+        this.$nextTick(() => {
+            window.luckysheet.destroy();
+            options.title = '模板确认'
+            options.data = [
+                {
+                    "name": "Cell", //工作表名称
+                    "color": "", //工作表颜色
+                    "index": 0, //工作表索引
+                    "status": 1, //激活状态
+                    "order": 0, //工作表的下标
+                    "hide": 0,//是否隐藏
+                    "row": 36, //行数
+                    "column": 18, //列数
+                    "defaultRowHeight": 19, //自定义行高其
+                    "defaultColWidth": 73, //自定义列宽
+                    "celldata": [{ r: 0, c: 0, v: { m: "1", v: 'value', bg: "#00FF00", ct: { fa: 'General', t: 'g' } } }], //初始化使用的单元格数据
+                    "config": {
+                        "merge": {}, //合并单元格
+                        "rowlen": {}, //表格行高
+                        "columnlen": {}, //表格列宽
+                        "rowhidden": {}, //隐藏行
+                        "colhidden": {}, //隐藏列
+                        "borderInfo": {}, //边框
+                        "authority": {}, //工作表保护
+
+                    },
+                    "scrollLeft": 0, //左右滚动条位置
+                    "scrollTop": 315, //上下滚动条位置
+                    "luckysheet_select_save": [], //选中的区域
+                    "calcChain": [],//公式链
+                    "isPivotTable": false,//是否数据透视表
+                    "pivotTable": {},//数据透视表设置
+                    "filter_select": {},//筛选范围
+                    "filter": null,//筛选配置
+                    "luckysheet_alternateformat_save": [], //交替颜色
+                    "luckysheet_alternateformat_save_modelCustom": [], //自定义交替颜色	
+                    "luckysheet_conditionformat_save": {},//条件格式
+                    "frozen": {}, //冻结行列配置
+                    "chart": [], //图表配置
+                    "zoomRatio": 1, // 缩放比例
+                    "image": [], //图片
+                    "showGridLines": 1, //是否显示网格线
+                    "dataVerification": {} //数据验证配置
+                },
+            ]
+            window.luckysheet.create({
+                ...options,
+                hook: {
+                    cellEditBefore: this.handleCellEditBefore,
+                },
+            });
+        })
+
+    },
+    props: {
+        showTemplate: {
+            type: Boolean,
+            default: false
+        },
+        fileUrl: {
+            type: String,
+            default: ''
+        }
+    },
+    components: {},
+    computed: {},
+    watch: {},
+}
+</script>
+
+<style lang='scss' scoped>
+    #luckysheet{
+        height: 500px;
+    }
+</style>