葡萄城在线excel（SpreadJS）

1.安装npm 基础包

npm install @grapecity-software/spread-sheets-vue
npm install @grapecity-software/spread-sheets

2.在 package.jsonz中添加引用

 "@fullcalendar/interaction": "^5.4.0",
    "@fullcalendar/moment": "^5.4.0",
    "@fullcalendar/resource-timeline": "^5.4.0",
    "@fullcalendar/vue": "^5.4.0",
    "@grapecity-software/spread-excelio": "^17.0.10",
    "@grapecity-software/spread-sheets": "^17.0.10",
    "@grapecity-software/spread-sheets-barcode": "^17.0.10",
    "@grapecity-software/spread-sheets-charts": "^17.0.10",
    "@grapecity-software/spread-sheets-designer": "^17.0.10",
    "@grapecity-software/spread-sheets-designer-resources-cn": "^17.0.10",
    "@grapecity-software/spread-sheets-designer-resources-en": "^17.0.10",
    "@grapecity-software/spread-sheets-designer-vue": "^17.0.10",
    "@grapecity-software/spread-sheets-io": "^17.0.10",
    "@grapecity-software/spread-sheets-languagepackages": "^17.0.10",
    "@grapecity-software/spread-sheets-pdf": "^17.0.10",
    "@grapecity-software/spread-sheets-pivot-addon": "^17.0.10",
    "@grapecity-software/spread-sheets-print": "^17.0.10",
    "@grapecity-software/spread-sheets-resources-zh": "^17.0.10",
    "@grapecity-software/spread-sheets-shapes": "^17.0.10",
    "@grapecity-software/spread-sheets-tablesheet": "^17.0.10",
    "@grapecity-software/spread-sheets-vue": "17.0.10",
    "@grapecity/spread-sheets": "^17.0.10",
    "@grapecity/spread-sheets-resources-zh": "^17.0.10",

3.执行npm i

4.页面

<!--首检检验excel-->
<template>
  <div id="app">
    <el-row
    >
       <gc-spread-sheets-designer ref="spreadDesigner"  :styleInfo='styleInfo' :config='config' :spreadOptions='spreadOptions' @designerInitialized='designerInitialized'>
      </gc-spread-sheets-designer>
    </el-row>

   
  </div>
</template>

<script>
window.addEventListener('touchstart', function (event) {
  // some logic
  event.preventDefault(); // <-- that should not be used in passive
  // some other magic
});
import moment from "moment";
import "@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
import "@grapecity-software/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
import "@grapecity-software/spread-sheets-designer-resources-cn";
import "@grapecity-software/spread-sheets-designer-vue";
import GC from "@grapecity-software/spread-sheets";
import '@grapecity-software/spread-sheets-resources-zh'
import "@grapecity-software/spread-sheets-vue";
import { postAction, downloadFile, getAction } from "@/api/manage";
GC.Spread.Common.CultureManager.culture("zh-cn");
export default {
  name: 'App',
  data: function () {
    return {
      loading:false,
      //表格table
      tableShow:false,
      queryJson: {
        orderType: 0,
        // startDate: moment(new Date()).format("YYYY-MM-DD"),
        startDate:'2024-07-1'
      },
      styleInfo: { height: "85vh", width: '100%' },
      spreadOptions: {
        sheetCount: 1,
      },
      designer:null,
    };
  },
  methods: {
    //单元格
    designerInitialized(value) {
      //缓存获取用户
      var user = JSON.parse(window.localStorage.getItem("pro__Login_Userinfo"));
      this.designer = value;
      var spread = value.getWorkbook();
      var sheet = spread.getActiveSheet();
      //添加列
      this.loading=true
      postAction("/QualityInspection/GetDetailPageList", {
        rows: 10,
        page: 1,
        queryJson: JSON.stringify(this.queryJson),
      }).then(async (res) => {
        this.loading=false
        res.data.items.forEach((i) => {
          if (
            i.qualityInspectionStaffId == null ||
            i.qualityInspectionStaffId == ""
          ) {
            i.qualityInspectionStaffId = user.value.staffId;
            i.qualityInspectionStaffName = user.value.staffName;
          }
        });
        //假如数据源：
        var soucre = res.data.items
        //列头信息：
        var colInfos = [
          { name: 'saveStatus', displayName: '是否检验', width: 100, resizable: false },
          { name: 'reviewSubmitStatus', displayName: '不合格提交状态', width: 150, resizable: false },
          { name: 'batchNo', displayName: '批号' },
          { name: 'dD_VideoParameter', displayName: '视讯参数', size: 140, resizable: false },
          { name: 'bomVersion', displayName: 'Bom版本' },
          { name: 'shiftTypeName', displayName: '报检班次',  width: 100, resizable: false },
          { name: 'length', displayName: '长度', width: 100, resizable: false },
          { name: 'orderDate', displayName: '报检时间', formatter: 'YYYY-MM-DD',width: 100, resizable: false },
          { name: 'mxSupplierName', displayName: '母线厂家', width: 100, resizable: false },
          { name: 'mxBatchNo', displayName: '母线批次号',width: 140, resizable: false },
          { name: 'mxSpecification', displayName: '母线规格', width: 100, resizable: false },
          { name: 'jgsSupplierName', displayName: '砂厂家', width: 100, resizable: false },
          { name: 'jgsBatchNo', displayName: '砂批号', width: 140, resizable: false },
          { name: 'jgsModel', displayName: '砂型号', width: 100, resizable: false },
          { name: 'appearance', displayName: '外观' },
          { name: 'stubsGage01', displayName: '线径1' },
          { name: 'stubsGage02', displayName: '线径2' },
          { name: 'stubsGage03', displayName: '线径3' },
          { name: 'stubsGage04', displayName: '线径4' },
          { name: 'stubsGage05', displayName: '线径5' },
          { name: 'stubsGage06', displayName: '线径6' },
          { name: 'stubsGage07', displayName: '线径7' },
          { name: 'stubsGage08', displayName: '线径8' },
          { name: 'stubsGage09', displayName: '线径9' },
          { name: 'stubsGage10', displayName: '线径10' },
          { name: 'inspectionMax', displayName: '最大值', width: 100, resizable: false },
          { name: 'inspectionMin', displayName: '最小值', width: 100, resizable: false },
          { name: 'stubsGageToleRance', displayName: '公差', width: 100, resizable: false },
          { name: 'inspectionAverage', displayName: '平均值', width: 100, resizable: false },
          { name: 'freedom', displayName: '自由线圈', width: 100, resizable: false },
          { name: 'snapN', displayName: '拉断力', width: 100, resizable: false },
          { name: 'exitLip', displayName: '出刃率', width: 100, resizable: false },
          { name: 'exitHeight', displayName: '出刃高度', width: 100, resizable: false },
          { name: 'reverseNum', displayName: '扭转圈数', width: 100, resizable: false },
          { name: 'unQualifiedReason', displayName: '异常描述', },
          { name: 'qualityInspectionStaffName', displayName: '员工', width: 140, resizable: false  },
          { name: 'qualityInspectionShiftTypeName', displayName: '检验班次' ,width: 100, resizable: false },
          { name: 'inspectionQualifiedBeforeName', displayName: '除氢前检验结果', width: 100, resizable: false },
          { name: 'inspectionQualifiedAfterName', displayName: '除氢后检验结果' , width: 100, resizable: false },
          { name: 'testName', displayName: '实验名称' },
          { name: 'remark', displayName: '备注' },
        ]
        //先用
        sheet.setDataSource(soucre)
        //然后
        sheet.bindColumns(colInfos)
        sheet.setCellType(3, 2, c, GC.Spread.Sheets.SheetArea.viewport);
        //设置自定义列宽
       for (let index = 1; index <= 42; index++) {
        //设置自动列宽
         sheet.autoFitColumn(index);
        }
        //设置A1~B5可以编辑，其余单元格不可以编辑
        // let range = sheet.getRange(0, 16,  res.data.items.length, 42)
        // range.locked(false)
        // sheet.options.isProtected = true
        //(下拉多选)
        //不合格原因
        var lenght= res.data.items.length
        postAction("/DictoryDetails/GetValueList/DDSBHGYY").then((res2) => {
          if (res2.succeeded) {
             // 定义下拉选项  
            this.moreSelect(sheet, 34, lenght, res2.data)
          }
        })
        //设置员工
        getAction("/Staff/GetNameList/品质管理部,金刚线品管部").then((res3) => { 
          if (res3.succeeded) {
            this.radioSelect(sheet,35, res.data.items.length, res3.data)
          }
        })
          // console.log(sheet.getDataSource, 'sheet.getDataSource()')
      });
    },
    //下拉单选
    radioSelect(sheet, lieQty, hangQty, data) {
      const list = [
      ]
      data.forEach((itme) => {
        const detauls = new Object({
          value: itme,
          text:itme
        })
        list.push(detauls);
      })
      var style = new GC.Spread.Sheets.Style();
      style.cellButtons = [
        {
          imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
          command: "openList",
          useButtonStyle: true,
        }
      ];
      style.dropDowns = [
        {
          type: GC.Spread.Sheets.DropDownType.list,
          option: {
            items: list,
          }
        }
      ];
      for (let index = 1; index <= hangQty; index++) {
        sheet.setStyle(index, lieQty, style);
        
      }
      
    },
    //下来多选
    moreSelect(sheet, lieQty, hangQty, data) {
      const list = [
      ]
      data.forEach((itme) => {
        const detauls = new Object({
          value: itme,
          text:itme
        })
        list.push(detauls);
      })
      for (let index = 0; index < hangQty; index++) {
        setMultiSelect(sheet, index, lieQty, list)

      }
      
      sheet.getCell(1, 1).wordWrap(true)
      function setMultiSelect(sheet, row, column, list) {
        // 多选列表
        const multiSelectStyle = new GC.Spread.Sheets.Style()
        multiSelectStyle.cellButtons = [
          {
            imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
            command: 'openList',
            useButtonStyle: true
          }
        ]
        const selectData = {
          multiSelect: true,
          items: list
        }
        multiSelectStyle.dropDowns = [
          {
            type: GC.Spread.Sheets.DropDownType.list,
            option: selectData
          }
        ]
        sheet.setStyle(row, column, multiSelectStyle)
      }
      sheet.bind(GC.Spread.Sheets.Events.ValueChanged, (e, info) => {
        const sheet = info.sheet
        if (info.col === 1 && info.row === 1) {
          sheet.autoFitRow(info.row)
        }
      })
    },
    //获取数据
    getDetail() {
      var spread = this.designer.getWorkbook();
      var sheet = spread.getActiveSheet();
      sheet.reset()
      this.designerInitialized(this.designer)
    },
    //保存
    save() {
      var spread = this.designer.getWorkbook();
      var sheet = spread.getActiveSheet();
      var value=sheet.getDataSource()
      console.log(value,'value')
    }
  }
}
</script>
<style>
.spreadHost {
  height: calc(100vh - 100px);
}
</style>