performance-test/src/views/performance/components/custonAsCom/luckySheet.vue

<template>
  <div>
    <!-- <input style="font-size: 16px" type="file" @change="uploadExcel" /> -->
    <el-row type="flex" class="row-bg" justify="space-between">
      <el-col>
        <el-button
          type="text"
          style="font-size: 20px"
          icon="el-icon-arrow-left"
          @click="() => $router.push('/home/performance/customAnalysis')"
        >
          返回
        </el-button>
      </el-col>
      <el-col style="display: flex; justify-content: end">
        <el-button type="primary" @click="saveData" size="small">
          保存数据
        </el-button>
      </el-col>
    </el-row>

    <div id="luckysheet" style="width: 100%; height: 88vh"></div>
    <!-- 显示获取的数据 -->
  </div>
</template>

<script>
import luckysheet from "luckysheet";
import {
  getDataFromIndexedDB,
  storeSetData,
  initDatabase,
} from "@/utils/indexedDb";
import { format } from "date-fns";
export default {
  name: "LuckySheetDemo",
  data() {
    return {
      sheetData: null, // 用于存储表格数据
      sheetName: "",
    };
  },
  mounted() {
    this.initSheetData();
  },
  methods: {
    async initSheetData() {
      const jsonData = await getDataFromIndexedDB();
      console.log(jsonData, "jsonData");
      if (jsonData && jsonData.length > 0) {
        this.sheetName = [...jsonData].filter(
          (item) => item.fileId == this.$route.query.id
        )[0]?.fileOldName;

        // 1. 动态提取表头
        const headers = Object.keys(
          [...jsonData].filter((item) => item.fileId == this.$route.query.id)[0]
            .fileData[0]
        );
        // 2. 将 JSON 数据转换为二维数组格式
        const formattedData = [...jsonData]
          .filter((item) => item.fileId == this.$route.query.id)[0]
          .fileData.map((item) => headers.map((header) => item[header]));
        // 3. 将表头插入到数据的第一行
        formattedData.unshift(headers);
        //4.  将 JSON 数据转换为 Luckysheet 格式
        this.initLuckySheet(formattedData);
      }
    },
    initLuckySheet(formattedData) {
      const options = {
        container: "luckysheet",
        showReturnIcon: false, // 假设有这个选项
        data: [
          {
            name: this.sheetName, //工作表名称
            index: 0, //工作表索引
            status: 1, //激活状态
            order: 0, //工作表的下标
            hide: 0, //是否隐藏
            row: 36, //行数
            column: 18, //列数
            defaultRowHeight: 19, //自定义行高
            defaultColWidth: 73, //自定义列宽
            celldata: formattedData
              .map((row, rowIndex) =>
                row.map((cell, colIndex) => ({
                  r: rowIndex,
                  c: colIndex,
                  v: {
                    m: cell, // 显示的内容
                    ct: {
                      fa: "General", // 格式（通用）
                      t: "g", // 类型（general）
                    },
                    v: cell, // 实际值
                  },
                }))
              )
              .flat(),
            //初始化使用的单元格数据
            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: {}, //数据验证配置
          },
        ],
        title: "LuckySheet示例", // 表格标题
        lang: "zh", // 语言设置
        showtoolbar: true, // 是否显示工具栏
        chart: {
          // 配置图表
          enable: false, // 启用图表功能
        },
        showtoolbarConfig: {
          chart: false, // 隐藏图表工具按钮
        },
      };
      luckysheet.create(options);
    },
    async saveData() {
      // 获取当前表格的数据
      const data = luckysheet.getAllSheets()[0].data; // 目前只需处理第一个工作表的数据
      const formattedData = [];
      // 获取表头 (假设表头在第一行，行索引为0)
      const headers = data[0].map((cell) => (cell && cell.v ? cell.v : "")); // 提取表头内容
      // 遍历数据行，从第二行开始 (行索引为1)
      for (let i = 1; i < data.length; i++) {
        const row = data[i];
        const rowData = {};
        // 遍历每一列，并根据表头动态生成键值对
        for (let j = 0; j < headers.length; j++) {
          if (row[j] && (row[j].v || row[j].v == 0)) {
            rowData[headers[j]] = row[j].v || 0;
          }
        }
        // 如果行数据不为空，加入到结果数组中
        if (Object.keys(rowData).length) {
          formattedData.push(rowData);
        }
      }

      this.sheetData = JSON.stringify(formattedData, null, 2);
      await initDatabase()
        .then((database) => {
          // 调用 storeSetData 方法
          let fileData = {
            filename: format(new Date(), "yyyyMMdd-HH:mm:ss") + this.sheetName,
            fileData: JSON.parse(this.sheetData),
            fileOldName: this.sheetName,
            fileId: new Date().getTime(),
          };
          storeSetData(database, "files", "fileDataArray", fileData, () => {
            this.$router.push("/home/performance/customAnalysis");
          });
        })
        .catch((error) => {
          console.error("数据库初始化失败，无法继续存储数据。", error);
        });
    },
  },
};
</script>

<style scoped lang="scss">
/* 可以添加一些自定义样式 */
::v-deep .luckysheet_info_detail div.luckysheet_info_detail_back {
  display: none;
}
</style>