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

// 控制面板类
class ControlPanel {
  cellId: string;
  border: string;
  color: string;
  width: string;
  colspan: string;
  fontSize: string;
  instanceOfCell: object;

  constructor(cell) {
    this.cellId = cell.cellId;
    this.border = cell.border;
    this.color = cell.color;
    this.width = cell.width;
    this.colspan = cell.colspan;
    this.fontSize = cell.fontSize;
    this.instanceOfCell = cell;
  }
  render() {
    var cellInfoElement = document.getElementById("cellInfo");
    while (cellInfoElement.firstChild) {
      cellInfoElement.removeChild(cellInfoElement.firstChild);
    }
    const cellUlElement = document.createElement("ul");

    for (const key in this.instanceOfCell) {
      if (this.instanceOfCell.hasOwnProperty(key)) {
        const cellLiElement = document.createElement("li");
        const cellLableElement = document.createElement("label");
        const cellInputElement = document.createElement("input");

        cellLableElement.innerHTML = key;

        cellInputElement.setAttribute("value", this.instanceOfCell[key]);
        cellInputElement.setAttribute("name", key);
        cellInputElement.setAttribute("class", "cell-detail");

        cellLiElement.appendChild(cellLableElement);
        cellLiElement.appendChild(cellInputElement);
        cellUlElement.appendChild(cellLiElement);
      }
    }

    const cellButtonElement = document.createElement("button");
    cellButtonElement.innerHTML = "确定";
    cellButtonElement.onclick = () => {
      const inputElements = document.getElementsByClassName("cell-detail");
      for (const key in this.instanceOfCell) {
        // type script error---------------------------
        for (const input of inputElements) {
          if (key === input.name) {
            this.instanceOfCell[key] = input.value;
          }
        }
      }

      this.render();
    };
    cellInfoElement.appendChild(cellUlElement);
    cellInfoElement.appendChild(cellButtonElement);
  }
  setCellId(newcellId: string) {
    this.cellId = newcellId;
  }
  setBorder(newborder: string) {
    this.border = newborder;
  }
  setColor(newcolor: string) {
    this.color = newcolor;
  }
  setwidth(newwidth: string) {
    this.width = newwidth;
  }
  setColspan(newcolspan: string) {
    this.colspan = newcolspan;
  }
  setFontSize(newfontSize: string) {
    this.fontSize = newfontSize;
  }
  addCell() {}
  deleteCell() {}
  addRow() {}
  deleteRow() {}
}
// 数据源类
class DataResource {
  data: OrderDetails;
  constructor(inputdata: OrderDetails) {
    this.data = inputdata;
  }
  sortOutData() {}
}

// typescript 类型定义

interface OrderDetails {
  [index: string]: string | object;
  orderNo: string;
  clientName: string;
  soldDate: string;
  contactName: string;
  contactNo: string;
  deliveryAddress: string;
  addOn: string;
  boards: Array<{
    [index: string]: number | string | object;
    id: number;
    material: string;
    color: string;
    boardInfos: Array<{
      houseName: string;
      closetName: string;
      boardNo: string;
      boardName: string;
      length: number;
      width: number;
      thickness: number;
      quantity: number;
      area: number;
      mutation: string;
      shape: string;
      direction: string;
      stripe: string;
      boardAddOn: string;

      [index: string]: number | string;
    }>;
  }>;
}