report-design-javascript/src/script/TemplateClasses.ts

import { ControlPanel } from "./designerClasses";

// 表格类
class Table {
  rowLength: number;
  columnLength: number;
  selectedRow: string;
  selectedCell: string;
  instanceOfCells: any;
  constructor(rowLength: number, columnLength: number, instanceOfCells: any) {
    this.rowLength = rowLength;
    this.columnLength = columnLength;

    this.selectedRow;
    this.selectedCell;
  }
  render(instanceOfCells) {
    var myNode = document.getElementById("table");
    while (myNode.firstChild) {
      myNode.removeChild(myNode.firstChild);
    }
    var cellIndex = -1;
    for (var i = 0; i < this.rowLength; i++) {
      var table: HTMLTableElement = <HTMLTableElement>(
        document.getElementById("table")
      );
      var row = table.insertRow(-1);

      for (var j = 0; j < this.columnLength; j++) {
        var letter = String.fromCharCode("A".charCodeAt(0) + j - 1);

        const instanceOfCell = instanceOfCells[(cellIndex += 1)];
        const cellElement = instanceOfCell.CreateCellElement();
        row.appendChild(cellElement);

        cellElement.addEventListener("dblclick", () => {
          cellElement.className = "highlight";
          this.showDesignerInfo(instanceOfCell);
        });

        cellElement.innerHTML = i && j ? instanceOfCell.cellId : i || letter;
      }
    }
  }
  showDesignerInfo(instanceOfCell) {
    const cellInfoElements = document
      .getElementById("cell-info")
      .getElementsByTagName("input");
    for (let i = 0; i < cellInfoElements.length; i++) {
      for (const key of Object.keys(instanceOfCell)) {
        if (key === cellInfoElements[i].name) {
          cellInfoElements[i].value = instanceOfCell[key];
        }
      }
    }
  }
  deleteCurrentRow() {}
  deleteCurrenCol() {}
  insertColToLeft() {}
  insertColToRight() {}
  insertRowToTop() {}
  insertRowToBottom() {}
  mergeRightCell() {}
  mergeBottomCell() {}

  addTemplate() {}
  addFormHeader() {}
  addSplitedGroupHeader() {}
  addBanCaiDetails() {}
  addSplitedGroupFooter() {}
  addFormFooter() {}
}

// 单元类
class Cell {
  cellId: string;
  font: string;
  fontSize: string;
  fontColor: string;
  fontWeight: string;
  fontStyle: string;
  textDecoration: string; // underline or line throught
  border: string;
  backgroundColor: string;
  textAlign: string;
  className: string;
  constructor(id) {
    this.cellId = id;
    this.font = "Serif";
    this.fontSize = "12";
    this.fontColor = "black";
    this.fontWeight = "normal";
    this.fontStyle = "normal";
    this.textDecoration = "";
    this.border = "";
    this.backgroundColor = "";
    this.textAlign = "left";
    this.className = "normal";
  }

  CreateCellElement() {
    let tdElement = document.createElement("td");

    tdElement.style.fontFamily = this.font;
    tdElement.style.backgroundColor = this.backgroundColor;

    tdElement.style.border = this.border + "px solid";
    tdElement.style.fontSize = this.fontSize + "px";
    tdElement.style.color = this.fontColor;
    tdElement.style.fontWeight = this.fontWeight;
    tdElement.style.fontStyle = this.fontStyle;
    tdElement.style.textDecoration = this.textDecoration;
    tdElement.style.textAlign = this.textAlign;
    tdElement.innerHTML = "cell";
    tdElement.className = this.className;

    return tdElement;
  }
}

export { Table, Cell };