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: OrderDetailsFormat;
  constructor(orderDetails: OrderDetailsFormat) {
    this.data = orderDetails;
  }

  getOrderNo() {
    return this.data.orderNo;
  }
  getClientName() {
    return this.data.clientName;
  }
  getSoldDate() {
    return this.data.soldDate;
  }
  getContactName() {
    return this.data.contactName;
  }
  getContactNo() {
    return this.data.contactNo;
  }
  getDeliveryAddress() {
    return this.data.deliveryAddress;
  }
  getAddOn() {
    return this.data.addOn;
  }
  getBoards() {
    return this.data.boards;
  }
  getBoardMaterial() {
    const BoardMaterial = [];
    for (let item of this.data.boards) {
      BoardMaterial.push(item.material);
    }
    return BoardMaterial; // BoardMaterial=['string', 'string']
  }
  getBoardColor() {
    const BoardColor = [];
    for (let item of this.data.boards) {
      BoardColor.push(item.color);
    }
    return BoardColor; // BoardColor=['string', 'string']
  }
  getBoardInfo(key: string) {
    const houseName = [];
    for (const board of this.data.boards) {
      const tem = [];
      for (const boardInfo of board.boardInfos) {
        if (Object.keys(boardInfo).indexOf(key) !== -1) {
          tem.push(boardInfo[key]);
        } else {
          console.log("没有找到对应的key");
          return;
        }
      }
      houseName.push(tem);
    }
    return houseName; // 返回数据结构：hosueName=[['string||number'，'string||number'],[]]
  }
  getEachBanCaiToTal(boardKey: string) {
    const banCaiTotalArray = [];
    for (const board of this.data.boards) {
      let tem = 0;
      for (const boardInfo of board.boardInfos) {
        if (
          Object.keys(boardInfo).indexOf(boardKey) !== -1 &&
          typeof boardInfo[boardKey] === "number"
        ) {
          tem += Number(boardInfo[boardKey]);
        }
      }
      banCaiTotalArray.push(tem);
    }
    return banCaiTotalArray; // 返回数据类型 eg :banCaiTotal=[number,number,....]
  }
  getAllBanCaiTotal(boardKey: string) {
    let banCaiTotal = 0;
    for (const board of this.data.boards) {
      for (const boardInfo of board.boardInfos) {
        if (
          Object.keys(boardInfo).indexOf(boardKey) !== -1 &&
          typeof boardInfo[boardKey] === "number"
        ) {
          banCaiTotal += Number(boardInfo[boardKey]);
        }
      }
    }
    return banCaiTotal; // 返回数据类型 eg :banCaiTotal:80
  }
}

// typescript 类型定义

interface OrderDetailsFormat {
  [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;
    }>;
  }>;
}