spfm-market-front/src/pages/main/luckySheet/index.vue

<template>
  <div>
    <div v-for="(item, index) in optionsExcel" :key="index">
      <div @click="clickSee(item)">{{ item.name }}</div>
    </div>
    <el-button @click="newExcle">新建</el-button>
    <div
      id="luckysheet"
      v-show="excelStatus"
      style="
        margin: 0px;
        padding: 0px;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0px;
        top: 0px;
      "
    ></div>
  </div>
</template>

<script>
import axios from 'axios'
import luckyexcel from "luckyexcel";
export default {
  data() {
    return {
      excelStatus: false,
      optionsExcel: [],
      ids: "",
    };
  },
  created() {
    console.log(window.location.protocol);
    console.log(window.location.host);
    this.getAllExcel();
    // var options = {
    //   container: "luckysheet", // 设定DOM容器的id
    //   //   title: "123123", // 设定表格名称
    //   //   lang: "zh",
    //   //   allowUpdate: true,
    //   //   localUrl:'123',
    //   //   loadUrl: window.location.protocol + localurl + "/load/${wb.id}",
    //   //   loadSheetUrl: window.location.protocol + localurl + "/loadSheet/${wb.id}",
    //   //   updateUrl:
    //   //     "ws://" +
    //   //     localurl +
    //   //     "/ws/" +
    //   //     Math.round(Math.random() * 100) +
    //   //     "/${wb.id}",
    //   // 更多其他设置...
    // };
    // window.luckysheet.create({
    //   container: "luckysheet",
    // });
  },
  mounted() {
    // In some cases, you need to use $nextTick
    // this.$nextTick(() => {
    // $(function () {
    //   luckysheet.create({
    //     localUrl: "123",
    //     //   loadUrl: window.location.protocol + localurl + "/load/${wb.id}",
    //     //   loadSheetUrl: window.location.protocol + localurl + "/loadSheet/${wb.id}",
    //     //   updateUrl:
    //     //     "ws://" +
    //     //     localurl +
    //     //     "/ws/" +
    //     //     Math.round(Math.random() * 100) +
    //     //     "/${wb.id}",
    //     container: "luckysheet", // 设定DOM容器的id
    //     allowUpdate: true,
    //     functionButton:
    //       '<button id="" class="btn btn-primary btn-danger" style=" padding:3px 6px; font-size: 12px; margin-right: 5px;" onclick="exportHandle()">保存</button><button id="" class="btn btn-primary btn-danger" style=" padding:3px 6px; font-size: 12px; margin-right: 85px;" onclick="exportHandles()">在线导出</button>',
    //     title: "Luckysheet Demo", // 设定表格名称
    //     lang: "zh", // 设定表格语言
    //     //   plugins:['chart'],
    //     data: [
    //       {
    //         name: "Cell", //工作表名称
    //         color: "", //工作表颜色
    //         index: 0, //工作表索引
    //         status: 1, //激活状态
    //         order: 0, //工作表的下标
    //         hide: 0, //是否隐藏
    //         row: 36, //行数
    //         column: 18, //列数
    //         defaultRowHeight: 19, //自定义行高
    //         defaultColWidth: 73, //自定义列宽
    //         celldata: [], //初始化使用的单元格数据
    //         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: {}, //数据验证配置
    //       },
    //       {
    //         name: "Sheet2",
    //         color: "",
    //         index: 1,
    //         status: 0,
    //         order: 1,
    //         celldata: [],
    //         config: {},
    //       },
    //       {
    //         name: "Sheet3",
    //         color: "",
    //         index: 2,
    //         status: 0,
    //         order: 2,
    //         celldata: [],
    //         config: {},
    //       },
    //     ],
    //   });
    // });
    // });
  },
  methods: {
    clickSee(e) {
      console.log(e);
      this.$http({
        url: "/api/sheet/workbook/" + e.id,
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {},
      }).then((res) => {
        this.ids = e.id;
        // this.optionsExcel = res.data;
        let options = {
          container: "luckysheet",
          title: "123123",
          allowUpdate: true,
          lang: "zh",
          loadUrl:
            window.location.protocol +
            "//43.138.50.94:7777" +
            "/sheet/worksheet/" +
            this.ids,
          loadSheetUrl:
            window.location.protocol +
            "//43.138.50.94:7777" +
            "/sheet/loadsheet/" +
            this.ids,
          updateUrl:
            "ws://" +
            "//43.138.50.94:7777" +
            "/ws/" +
            JSON.parse(window.sessionStorage.userInfo).loginName +
            "/" +
            this.ids,
        };
        window.luckysheet.create(options);
        this.excelStatus = true;
      });
    },
    //获取所有
    getAllExcel() {
      let data = {};
      axios.post("http://43.138.50.94:7777/sheet/allSheet", data).then((res) => {
        console.log(res);
        this.optionsExcel = res.data;
      });
      // this.$http({
      //   url: "/api/sheet/allSheet",
      //   method: "post",
      //   headers: {
      //     "Content-Type": "application/json",
      //   },
      //   data: {},
      // }).then((res) => {
      //   console.log(res);
      //   this.optionsExcel = res.data;
      // });
    },
    newExcle() {
      let data = {};
      axios.post("http://43.138.50.94:7777/sheet/create", data).then((res) => {
        console.log(res);
        let list = {
          name:res.data.name,
          id:res.data.id
        }
        this.optionsExcel.push(list)
        // this.optionsExcel = res.data;
      });
      //    this.excelStatus = true
      // this.$http({
      //   url: "/api/sheet/create",
      //   method: "post",
      //   headers: {
      //     "Content-Type": "application/json",
      //   },
      //   data: {},
      // }).then((res) => {
      //   console.log(res);
      // });
    },
  },
};
</script>

<style>
</style>