WorkloadWeb/src/pages/PurchaseAdmin/PurchaseList/Detail/LuckySheet.js

import React from 'react';
import { message } from 'antd';
import exportExcel from '@/utils/exportExcl';
import LuckyExcel from 'luckyexcel';
import { getToken } from '@/utils/utils';

const hintText = '禁止编辑！请先点击编辑按钮。';
const DIFF_COLOR = '#ff0000';
const ADD_COLOR = '#00ff00';

class LuckySheet extends React.Component {
  constructor(props) {
    super(props);
    this.sheetRef = React.createRef();
    this.luckysheet = null;
    this.updateCell = {
      add: [],
      diff: [],
    };
    this.renderTimer = null;
    this.chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
  }
  getUUID(len = 8, radix = 16) {
    var chars = this.chars;
    var uuid = [],
      i;
    radix = radix || chars.length;

    if (len) {
      // Compact form
      for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
    } else {
      // rfc4122, version 4 form
      var r;

      // rfc4122 requires these characters
      uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
      uuid[14] = '4';

      // Fill in random data.  At i==19 set the high bits of clock sequence as
      // per rfc4122, sec. 4.1.5
      for (i = 0; i < 36; i++) {
        if (!uuid[i]) {
          r = 0 | (Math.random() * 16);
          uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r];
        }
      }
    }

    return uuid.join('');
  }
  renderSheet(sheets) {
    // if (!sheets) return;
    const { onClickCell, version, getUser, data } = this.props;
    if (!this.luckysheet) {
      clearTimeout(this.renderTimer);
      this.renderTimer = setTimeout(() => {
        this.renderSheet(sheets);
      }, 300);
      return;
    }
    let token = getToken();
    let option = {
      lang: 'zh',
      showinfobar: false,
      showstatisticBar: false,
      hook: {
        cellMousedown: (cell, position, sheet) => {
          onClickCell && onClickCell(cell, position, sheet);
        },
        cellPasteBefore: cell => {
          console.log(cell);
          if (!cell) return;
          if (cell.cid) delete cell.cid;
          if (cell.bg == DIFF_COLOR || cell.bg == ADD_COLOR) {
            delete cell.bg;
          }
        },
      },
    };
    if (version) {
      option = {
        ...option,
        allowUpdate: true,
        gridKey: version.id,
        loadUrl: `/api/v1/purchase/record/sheet?gridKey=${version.id}&JWT-TOKEN=${token}`,
        updateUrl: `ws://47.96.12.136:8896/api/v1/ws?id=${version.id}&sid=1&JWT-TOKEN=${token}`,
        getUser,
      };
    } else if (data && data.length > 0) {
      option.data = JSON.parse(JSON.stringify(data));

      option.data.forEach(item => {
        if (item.celldata) {
          item.celldata.forEach(cell => {
            // 生成uuid
            if (!cell.v.cid) cell.v.cid = this.getUUID();
          });
        }
        // 默认禁止编辑
        // item.config.authority = { sheet: true, hintText };
      });
    } else {
      // 默认sheet页数据
      data.data = [
        {
          name: 'sheet1',
          // config: {
          //   authority: { sheet: true, hintText },
          // },
        },
      ];
    }
    // this.luckysheet.destroy();
    this.luckysheet.create(option);
  }

  // componentDidUpdate(prevProps) {
  //   const { data } = this.props;
  //   if (prevProps.data != data) {
  //     this.renderSheet(data);
  //   }
  // }

  handleLoad() {
    const { onLoad } = this.props;
    let contentWindow = this.sheetRef.current.contentWindow;
    this.luckysheet = contentWindow.luckysheet;
    // this.luckysheet = this.luckysheet;
    this.renderSheet();
    // onLoad && onLoad();
  }

  selectCell(row, col, order) {
    this.luckysheet.setRangeShow({ row: [row, row], column: [col, col] }, { order });
  }

  toggleSheet(order) {
    this.luckysheet.setSheetActive(order);
  }

  getSheetJson() {
    let data = JSON.parse(JSON.stringify(this.luckysheet.toJson()));
    data.data.forEach(sheet => {
      (sheet.celldata || []).forEach(cell => {
        // 添加cid
        if (!cell.v.cid) cell.v.cid = this.getUUID();
        // 清除比对样式
        if (cell.v.bg == DIFF_COLOR || cell.v.bg == ADD_COLOR) {
          delete cell.v.bg;
        }
      });
    });
    return data;
  }

  // 切换编辑状态
  toggleEdit(edit) {
    let luckysheet = this.luckysheet;
    if (edit) {
      let config = luckysheet.getConfig();
      luckysheet.setConfig({
        ...config,
        authority: { sheet: !edit, hintText },
      });
    } else {
      luckysheet.exitEditMode();
    }
  }

  // 切换比对状态
  toggleCompare(isCompare, compareData, callback) {
    let luckysheet = this.luckysheet;
    let diff = [];
    let add = [];
    const { onCompareSuccess } = this.props;
    // 判断dom是否加载完成
    if (!luckysheet) {
      setTimeout(() => {
        this.toggleCompare(isCompare, compareData, callback);
      }, 300);
      return;
    }
    if (isCompare) {
      // let currentData = this.luckysheet.toJson();
      let currentData = JSON.parse(JSON.stringify(this.props.data));
      currentData.forEach((sheet, index) => {
        let celldata1 = sheet.celldata;
        let celldata2 = compareData[index]?.celldata || [];

        celldata1.forEach(item => {
          // 不判断空字符串
          if (this.isEmpty(item)) return;
          var d2Item = celldata2.find(item2 => item2.v.cid == item.v.cid);
          if (d2Item && !this.isEmpty(d2Item)) {
            // v.ct.s相同,不做处理
            if (item.v.ct?.s && JSON.stringify(item.v.ct?.s) == JSON.stringify(d2Item.v.ct?.s))
              return;
            // v.v相同,不做处理
            if (d2Item.v.v == item.v.v) return;
            // 内容不同,标记diff颜色
            diff.push({
              ...item,
              sheetOrder: index,
            });
            item.v.bg = DIFF_COLOR;
            // luckysheet.setCellFormat(item.r, item.c, 'bg', DIFF_COLOR);
          } else {
            // 找不到同cid的单元格,标记add颜色
            add.push({
              ...item,
              sheetOrder: index,
            });
            item.v.bg = ADD_COLOR;
            // luckysheet.setCellFormat(item.r, item.c, 'bg', ADD_COLOR);
          }
        });
      });
      // console.log(currentData);
      this.renderSheet(currentData);
      // luckysheet.refresh()
    } else {
      this.renderSheet(this.props.data);
    }
    this.updateCell = {
      diff,
      add,
    };
    callback && callback(this.updateCell);
  }
  isEmpty(item) {
    return (item?.v?.v ?? '') === '' && !item?.v?.ct?.s;
  }
  mergeExcl(mergeData = []) {
    let currentData = this.luckysheet.toJson();
    let luckysheet = this.luckysheet;
    // let add = [];
    currentData.data.forEach((sheet, index) => {
      if (!mergeData[index]) return;
      let celldata1 = sheet.celldata;
      let celldata2 = mergeData[index].celldata;
      celldata2.forEach(item => {
        var d2Item = celldata1.find(item2 => item2.v.cid == item.v.cid);
        if (!d2Item) {
          delete item.v.v.bg;
          // 将新增项添加至当前文档
          luckysheet.setCellValue(item.r, item.c, item.v);
          // 记录新增
          // add.push(item);
        }
      });
    });
    // let celldata1 = currentData.data[0].celldata;
    // let celldata2 = mergeData.data[0].celldata;

    // this.add = add;
    // return add;
  }

  /**
   * 导入excl
   * @param {*} files input:file的evt.target.files
   * @returns
   */
  uploadExcel(files, callback) {
    if (files == null || files.length == 0) {
      return;
    }

    let name = files[0].name;
    let suffixArr = name.split('.'),
      suffix = suffixArr[suffixArr.length - 1];
    if (suffix != 'xlsx') {
      alert('Currently only supports the import of xlsx files');
      message.error('只支持xlsx格式的文件!');
      return;
    }
    LuckyExcel.transformExcelToLucky(files[0], (exportJson, luckysheetfile) => {
      if (exportJson.sheets == null || exportJson.sheets.length == 0) {
        message.error('读取xlsx文件失败!');
        return;
      }
      // this.luckysheet.destroy();
      // 同步当前文档内容
      let data = this.props.data;
      exportJson.sheets.forEach((sheet, index) => {
        if (!data || !data[index]) return;
        sheet.celldata.forEach(cell => {
          if (this.isEmpty(cell)) return;
          // return (item.v.v ?? '') === '' && !item.v.ct?.s;
          let dCell = (data[index].celldata || []).find(dCell => {
            return dCell.r == cell.r && dCell.c == cell.c;
          });
          if (this.isEmpty(dCell)) return;
          // 判断v.ct是否相同
          // if (cell?.v?.ct?.s && dCell.v.ct?.s && cell.v.ct?.s.join('') != dCell.v.ct?.s.join('')) return;
          if (cell?.v?.ct?.s && dCell.v.ct?.s) {
            if (cell.v.ct?.s.join('') != dCell.v.ct?.s.join('')) return;
            let cellS = cell.v.ct.s;
            let dCellS = dCell.v.ct.s;
            let isEqul = cellS.every((cur, idx) => {
              return JSON.stringify(cur) === JSON.stringify(dCellS[idx]);
            });
            if (!isEqul) return;
          }
          // 判断v.v是否相同
          if (cell?.v?.v && dCell.v.v != cell.v.v) return;
          // 内容相同则复制cid
          cell.cid = dCell.cid;
        });
      });
      this.renderSheet(exportJson.sheets);
      callback && callback();
    });
  }
  // 根据url导入excl
  // selectExcel(item) {
  //   const {value,name} = item

  //   if (value == '') {
  //     return;
  //   }
  //   LuckyExcel.transformExcelToLuckyByUrl(value, name, (exportJson, luckysheetfile) => {
  //     if (exportJson.sheets == null || exportJson.sheets.length == 0) {
  //       alert(
  //         'Failed to read the content of the excel file, currently does not support xls files!'
  //       );
  //       return;
  //     }

  //     this.luckysheet.destroy();

  //     this.luckysheet.create({
  //       container: 'luckysheet', //luckysheet is the container id
  //       showinfobar: false,
  //       data: exportJson.sheets,
  //       title: exportJson.info.name,
  //       userInfo: exportJson.info.name.creator,
  //     });
  //   });
  // }

  downloadExcel(checkValue) {
    let resultList = [];
    console.log(this.luckysheet.getAllSheets());

    let currentData = this.luckysheet.getAllSheets();
    currentData.forEach(sheet => {
      let data = sheet.data;
      let celldata = sheet.celldata;
      //获取当前导出列的数组
      let colList = [];
      data[0]?.forEach((rowOneItem, colIdx) => {
        if (rowOneItem && checkValue.indexOf(rowOneItem.v) !== -1) {
          colList.indexOf(colIdx) == -1 ? colList.push(colIdx) : true;
        }
      });

      //处理data
      const newData = [];
      data.forEach(item => {
        if (item !== null) {
          let arr = item.filter((cur, idx) => {
            return item && colList.includes(idx);
          });
          // let len = item.length - arr.length
          // let nullList = new Array(len).fill(null);
          // let rowList =  arr.concat(nullList);
          newData.push(arr);
        }
      });
      sheet.data = newData;

      //消除空列后都列下标
      let newColIdxList = colList.map((cur, idx) => {
        return idx;
      });
      //处理celldata
      const newCellData = [];
      celldata.forEach(item => {
        let idx = colList.indexOf(item.c);
        if (idx !== -1) {
          item.c = newColIdxList[idx];
          newCellData.push(item);
        }
      });
      sheet.celldata = newCellData;
    });
    exportExcel(currentData, '下载');
  }

  render() {
    return (
      <iframe
        onLoad={e => {
          this.handleLoad(e);
        }}
        ref={this.sheetRef}
        src="/luckysheet.html"
      ></iframe>
    );
  }
}

export default LuckySheet;