修改sheet的使用

src/pages/main/performance/components/sheet.vue

@@ -2,7 +2,7 @@
  * @Author       : yuanrunwei
  * @Date         : 2021-12-04 14:23:58
  * @LastEditors  : yuanrunwei
- * @LastEditTime : 2021-12-13 16:15:11
+ * @LastEditTime : 2021-12-15 19:38:31
  * @FilePath     : \spfm-market-front\src\pages\main\performance\components\sheet.vue
 -->
 
@@ -17,8 +17,8 @@
             >
                 <el-button type="primary">上传</el-button>
             </el-upload>
-            <el-button type="primary">保存</el-button>
-            <el-button type="primary">导出</el-button>
+            <el-button type="primary" @click="handleSave">保存</el-button>
+            <el-button type="primary" @click="handleDownload">导出</el-button>
             <el-button type="primary">返回</el-button>
             <el-button type="primary">全屏显示</el-button>
         </div>
@@ -30,41 +30,89 @@
 import luckyexcel from "luckyexcel";
 export default {
     data() {
-        return {};
+        return {
+            row_list: [3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+            column_list: [4, 5, 6, 7, 8],
+        };
     },
     methods: {
         handleInit() {
             this.handleCreate();
         },
-        async handleCreate(file) {
+        handleAllow({ row, column }) {
+            return (
+                this.row_list.includes(row) && this.column_list.includes(column)
+            );
+        },
+        async handleCreate({ file, json, type } = {}) {
             let that = this;
             const options = {
                 container: "luckysheet",
                 lang: "zh",
                 showsheetbar: false,
                 hook: {
+                    cellEditBefore: function ([
+                        { row_focus: row, column_focus: column },
+                    ]) {
+                        if (!that.handleAllow({ row, column })) {
+                            that.$message.error("您没有编辑权限");
+                        }
+                    },
                     cellUpdateBefore: function (row, column) {
-                        console.log(row, column);
-                        that.$message.error("您没有编辑权限");
-                        return false;
+                        if (!that.handleAllow({ row, column })) {
+                            return false;
+                        }
+                    },
+                    cellRenderAfter: function (cell, position) {
+                        const { r: row, c: column } = position;
+                        if (!that.handleAllow({ row, column })) {
+                            if (cell) {
+                                cell.bg = "#d5d5d5";
+                            }
+                        }
                     },
                 },
             };
-            if (file) {
-                await new Promise((resolve) => {
-                    luckyexcel.transformExcelToLucky(file, (export_json) => {
-                        options.data = export_json.sheets;
-                        options.title = export_json.info.name;
-                        options.userInfo = export_json.info.name.creator;
-                        resolve();
-                    });
-                });
+            switch (type) {
+                case "file":
+                    if (file) {
+                        await new Promise((resolve) => {
+                            luckyexcel.transformExcelToLucky(
+                                file,
+                                (export_json) => {
+                                    options.data = [
+                                        ...export_json.sheets.map(
+                                            (element) => ({
+                                                ...element,
+                                                zoomRatio: 0.75,
+                                            })
+                                        ),
+                                    ];
+                                    options.title = export_json.info.name;
+                                    resolve();
+                                }
+                            );
+                        });
+                    }
+                    break;
+                case "json":
+                    if (json) {
+                        options.data = [json];
+                    }
+                    break;
             }
 
             window.luckysheet.create(options);
         },
         async handleChange(response) {
-            this.handleCreate(response.raw);
+            this.handleCreate({ file: response.raw, type: "file" });
+        },
+        handleDownload() {},
+        handleSave() {
+            const sheet_name = window.luckysheet.getSheet().name;
+            const data = window.luckysheet.getSheet(sheet_name);
+            console.log(JSON.stringify(data.data));
+            this.handleCreate({ json: data, type: "json" });
         },
     },
     mounted() {