spreadjs设计器自定义在线表格

spreadjs设计器自定义在线表格

spreadjs：16

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="otherSpan" :xs="24">
        <!--    excel在线表格    -->
        <el-row :gutter="10" class="mb8" v-if="tableAttributes">
          <gc-spread-sheets-designer :styleInfo='styleInfo'
                                     :config='config'
                                     @designerInitialized="designerInitialized"
                                     class="excel-class">
          </gc-spread-sheets-designer>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
import { mul } from '@/utils/util'
import  '@grapecity/spread-sheets-vue'
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css'
import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'
import '@grapecity/spread-sheets-designer-resources-cn'
import '@grapecity/spread-sheets-designer-vue'
import * as GC from '@grapecity/spread-sheets'
import * as DesignerGC from '@grapecity/spread-sheets-designer'
//设置中文语言环境
GC.Spread.Common.CultureManager.culture('zh-cn')
//授权
GC.Spread.Sheets.LicenseKey = 'your key';
DesignerGC.Spread.Sheets.Designer.LicenseKey = "your key";
export default {
  name: 'Scoring',
  data() {
    return {
      styleInfo: { height: '725px', width: '100%' },
      config: null,
      spread: null,
    }
  },
  methods: {
    //获取spread实例
    designerInitialized: function (designer) {
      this.spread = designer.getWorkbook();
      let config = GC.Spread.Sheets.Designer.DefaultConfig;
      //创建按钮
      let dataSaveInfo = {
        'saveTemplateCommand':{
          iconClass:'ribbon-button-save',  //按钮的样式
          text: "保存", //显示的文字
          bigButton: true,
          commandName: "saveData", //命令名称，需要全局唯一
          execute: this.saveInfo //对应执行内容的function
        }
      }
      //将图标放入工具栏

      if (!(config.ribbon[0].buttonGroups[0].label === '保存')){
        config.ribbon[0].buttonGroups.unshift( {
          label:'保存',
          thumbnailClass:'ribbon-thumbnail-spreadsettings',
          commandGroup:{
            children:[
              {
                direction: "vertical",
                commands: ["saveTemplateCommand"],
              }
            ]
          }
        });
      }
      config.commandMap={};
      Object.assign(config.commandMap, dataSaveInfo);
      this.config = config;
      this.spread.options.newTabVisible = false;
      this.spread.options.tabNavigationVisible = false;
      this.spread.options.scrollbarMaxAlign = true;
      this.spread.invalidateLayout();
      this.spread.repaint();
    },
    //初始化在线表格
    initSpreadSheet(){
      let sheet = this.spread.getSheet(0);
      sheet.name("汇总");
      sheet.setDataSource(this.dataTable);
      var colInfos = [
        { name: "yf", displayName: "月份",size: 180 },
        { name: "fzbm", displayName: "部门", size: 180 },
        { name: "xjxz", displayName: "新疆西藏项目", size: 180 },
        { name: "sfzs", displayName: "赠送/区域项目", size: 180 },
        { name: "zcsjzl", displayName: "资产治理项目", size: 180 },
        { name: "xffhs", displayName: "新方法核算", size: 180 },
        { name: "sfwnxm", displayName: "是否新项目", size: 180 },
        { name: "status", displayName: "数据状态", size: 180 },
        { name: "xh", displayName: "唯一项目编号", size: 180 },
        { name: "xmbh", displayName: "项目编号",size: 180 },
        { name: "khmc", displayName: "客户名称", size: 180 },
        { name: "sjkhmc", displayName: "实际客户名称", size: 180 },
        { name: "ysdsftj", displayName: "纸质验收单是否提交", size: 180 },
        { name: "sfsydzxt", displayName: "是否使用对账系统", size: 180 },
        { name: "xmjlbh", displayName: "项目经理编号", size: 180 },
        { name: "xmjlxm", displayName: "项目经理", size: 180 },
        { name: "ysgsbh", displayName: "验收绩效归属员工编号", size: 180 },
        { name: "ysgsxm", displayName: "验收绩效归属", size: 180 },
        { name: "fwrybh", displayName: "服务人员员工编号", size: 180 },
        { name: "fwryxm", displayName: "服务人员", size: 180 },
        { name: "fwryfs", displayName: "服务人员打分", formatter:'0.00', size: 180 },
        { name: "zcts", displayName: "项目验收总资产条数", formatter:'0', size: 180 },
        { name: "xmlb", displayName: "项目类别", formatter:'0', size: 180 },
        { name: "xmdj", displayName: "项目单价", formatter:'0.00', size: 180 },
        { name: "jdzb", displayName: "工作环节占全流程比例", formatter:'0.00%', size: 180 },
        { name: "xmzjx", displayName: "项目总绩效", formatter:'0.00', size: 180 },
        { name: "bz", displayName: "备注", size: 180 },
      ];
      sheet.bindColumns(colInfos);
      this.spread.resumePaint();
    },
    //保存点击事件,进行信息保存
    saveInfo(e){
      let sheet = this.spread.getSheet(0);
      let data = sheet.getDataSource();
      saveOnlineExcelInfo(data).then(res => {
        this.tableAttrbute = true;
        this.tableAttributes = false;
        this.$message.success(res.msg);
        this.back = false;
      });
    }
  }
}
</script>

<style scoped lang="scss">
.tree-area {
  max-height: 80vh;
  overflow: auto;
}
.el-descriptions {
  width: 30%;
  padding-left: 4em;
  ::v-deep .my-label {
    font-weight: 600;
  }
}
.excel-class {
  ::v-deep .ribbon-button-save {
    background-image: url('../../../assets/images/save.jpg');
  }
}
</style>

16所需要的依赖

		"@grapecity/spread-excelio": "^16.2.4",
        "@grapecity/spread-sheets": "^16.2.4",
        "@grapecity/spread-sheets-barcode": "^16.2.4",
        "@grapecity/spread-sheets-charts": "^16.2.4",
        "@grapecity/spread-sheets-designer": "^16.2.4",
        "@grapecity/spread-sheets-designer-resources-cn": "^16.2.4",
        "@grapecity/spread-sheets-designer-resources-en": "^16.2.4",
        "@grapecity/spread-sheets-designer-vue": "^16.2.4",
        "@grapecity/spread-sheets-io": "^16.2.4",
        "@grapecity/spread-sheets-languagepackages": "^16.2.4",
        "@grapecity/spread-sheets-pdf": "^16.2.4",
        "@grapecity/spread-sheets-pivot-addon": "^16.2.4",
        "@grapecity/spread-sheets-print": "^16.2.4",
        "@grapecity/spread-sheets-resources-zh": "^16.2.4",
        "@grapecity/spread-sheets-shapes": "^16.2.4",
        "@grapecity/spread-sheets-tablesheet": "^16.2.4",
        "@grapecity/spread-sheets-vue": "^16.2.3",

12版本

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="otherSpan" :xs="24">
        <!--    excel在线表格    -->
        <el-row :gutter="10" class="mb8" v-if="tableAttributes">
          <gc-spread-sheets
            :hostClass='hostClass'
            @workbookInitialized="designerInitialized"
          ></gc-spread-sheets>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
import { mul } from '@/utils/util'
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css'
import '@grapecity/spread-sheets-resources-zh'
import * as SpreadLicense from "../../../utils/spread/spread-license"
import ExcelIo from '@grapecity/spread-excelio'
import * as GC from '@grapecity/spread-sheets'
    //设置中文环境
GC.Spread.Common.CultureManager.culture("zh-cn");
const spreadLicenseInit = function (){
  const SpreadNs = GC.Spread.Sheets;
  SpreadLicense._de2343();
  ExcelIo.LicenseKey = SpreadNs.LicenseKey;
}
spreadLicenseInit();
import  '@grapecity/spread-sheets-vue'
export default {
  name: 'Scoring',
  data() {
    return {
      hostClass:'spread-host',
      autoGenerateColumns:true,
      width:300,
      visible:true,
      resizable:true,
      scrollbarMaxAlign:true,
      scrollbarShowMax:true,
      pageColor:"white",
      worksheetName:'汇总',
      dataTable:[],
      spread: null,
      back:false,
      save:false,
      displayOrHide:true,
    }
  },
  methods: {
    //获取spread实例
    designerInitialized: function (spread) {
      this.spread = spread;
      this.spread.options.newTabVisible = false;
      this.spread.options.tabNavigationVisible = false;
      this.spread.options.scrollbarMaxAlign = true;
      this.spread.options.tabStripVisible = false;
      this.spread.options.scrollbarShowMax = true;
      this.spread.options.showVerticalScrollbar = false;
      this.spread.options.grayAreaBackColor = 'white'
      this.spread.options.allowUserEditFormula = true;
      this.spread.invalidateLayout();
      this.spread.repaint();
    },
    //初始化在线表格
    initSpreadSheet(){
      let sheet = this.spread.getSheet(0);
      sheet.setDataSource(this.dataTable);
      sheet.setRowHeight(0, 55.0,GC.Spread.Sheets.SheetArea.colHeader);
      let row = sheet.getRange(0, -1, 1, -1, GC.Spread.Sheets.SheetArea.colHeader);
      row.backColor("#cccccc");
      row.font("16px")
      var colInfos = [
        { name: "yf", displayName: "月份",size: 180 ,formatter: '@'}, // formatter='@'标识展示文本格式
        { name: "fzbm", displayName: "部门", size: 180 ,formatter: '@'},
        { name: "xjxz", displayName: "新疆西藏项目", size: 180 ,formatter: '@'},
        { name: "sfzs", displayName: "赠送/区域项目", size: 180 ,formatter: '@'},
        { name: "zcsjzl", displayName: "资产治理项目", size: 180 ,formatter: '@'},
        { name: "xffhs", displayName: "新方法核算", size: 180 ,formatter: '@'},
        { name: "sfwnxm", displayName: "是否新项目", size: 180 ,formatter: '@'},
        { name: "status", displayName: "数据状态", size: 180 ,formatter: '@'},
        { name: "xh", displayName: "唯一项目编号", size: 180 ,formatter: '@'},
        { name: "xmbh", displayName: "项目编号",size: 180 ,formatter: '@'},
        { name: "khmc", displayName: "客户名称", size: 180 ,formatter: '@'},
        { name: "sjkhmc", displayName: "实际客户名称", size: 180 ,formatter: '@'},
        { name: "ysdsftj", displayName: "纸质验收单是否提交", size: 180 ,formatter: '@'},
        { name: "sfsydzxt", displayName: "是否使用对账系统", size: 180 ,formatter: '@'},
        { name: "xmjlbh", displayName: "项目经理编号", size: 180 ,formatter: '@'},
        { name: "xmjlxm", displayName: "项目经理", size: 180 ,formatter: '@'},
        { name: "ysgsbh", displayName: "验收绩效归属员工编号", size: 180,formatter: '@' },
        { name: "ysgsxm", displayName: "验收绩效归属", size: 180,formatter: '@' },
        { name: "fwrybh", displayName: "服务人员员工编号", size: 180 ,formatter: '@'},
        { name: "fwryxm", displayName: "服务人员", size: 180 ,formatter: '@'},
        { name: "fwryfs", displayName: "服务人员打分", formatter:'0.00', size: 180 },
        { name: "zcts", displayName: "项目验收总资产条数", formatter:'0', size: 180 },
        { name: "xmlb", displayName: "项目类别", formatter:'0', size: 180 }, //展示整数
        { name: "xmdj", displayName: "项目单价", formatter:'0.00', size: 180 }, //数字格式，保留两位小数
        { name: "jdzb", displayName: "工作环节占全流程比例", formatter:'0.00%', size: 180 }, //标识展示百分数
        { name: "xmzjx", displayName: "项目总绩效", formatter:'0.00', size: 180 },
        { name: "bz", displayName: "备注", size: 180 ,formatter: '@'},
      ];
      sheet.bindColumns(colInfos);
      // 在你的数据范围上启用筛选功能
      sheet.rowFilter(new GC.Spread.Sheets.Filter.HideRowFilter(new GC.Spread.Sheets.Range(-1, 0, 0, 27)));
      sheet.options.isProtected = false;
      this.spread.resumePaint();
    } 
}
</script>

<style scoped lang="scss">
.tree-area {
  max-height: 80vh;
  overflow: auto;
}
.el-descriptions {
  width: 30%;
  padding-left: 4em;
  ::v-deep .my-label {
    font-weight: 600;
  }
}
.spread-host{
  width: 100%;
  height: 700px;
}
</style>

所需依赖

    "@grapecity/spread-excelio": "12.2.1",
    "@grapecity/spread-sheets": "12.2.1",
    "@grapecity/spread-sheets-print": "12.2.1",
    "@grapecity/spread-sheets-resources-zh": "12.2.1",
    "@grapecity/spread-sheets-vue": "12.2.1",