class all

copyoftemplateclass.ts

@@ -21,7 +21,7 @@ class Table {
       myNode.removeChild(myNode.firstChild);
     }
 
-    // loop through rowlength and collentgh
+    // loop through rowlength and collength
     for (var i = 0; i < this.rowLength; i++) {
       var table: HTMLTableElement = <HTMLTableElement>(
         document.getElementById("table")
@@ -73,7 +73,7 @@ class Table {
     cellButtonElement.onclick = () => {
       const inputElements = document.getElementsByClassName("cell-detail");
       for (const key in instanceOfCell) {
-        // type script error
+        // type script error---------------------------
         for (const input of inputElements) {
           if (key === input.name) {
             instanceOfCell[key] = input.value;
@@ -94,12 +94,14 @@ class Cell {
   color: string;
   width: number;
   colspan: string;
+  fontSize: string;
   constructor(id) {
     this.cellId = id;
     this.border = "";
     this.color = "";
     this.width = 80;
     this.colspan = "1";
+    this.fontSize = "12";
   }
 
   setColor(newColor: string) {
@@ -111,13 +113,17 @@ class Cell {
   setColspan(newColspan: string) {
     this.colspan = newColspan;
   }
+  setFontSize(newFontSize: string) {
+    this.fontSize = newFontSize;
+  }
+
   cellElement() {
     let tdElement = document.createElement("td");
     tdElement.setAttribute("colspan", this.colspan);
     tdElement.style.backgroundColor = this.color;
     tdElement.style.width = this.width + "px";
     tdElement.style.border = this.border + "px solid";
-
+    tdElement.style.fontSize = this.fontSize + "px";
     tdElement.innerHTML = this.cellId;
 
     return tdElement;

src/script/TemplateClasses.ts

@@ -0,0 +1,55 @@
+// 表格类
+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.instanceOfCells = instanceOfCells;
+    this.selectedRow;
+    this.selectedCell;
+  }
+  render() {}
+  addRowElement() {}
+}
+// 行类
+class Row {
+  createRowElement() {
+    const rowElement = document.createElement("tr");
+    return rowElement;
+  }
+}
+// 单元类
+class Cell {
+  cellId: string;
+  border: string;
+  color: string;
+  width: number;
+  colspan: string;
+  fontSize: string;
+  constructor(id) {
+    this.cellId = id;
+    this.border = "";
+    this.color = "";
+    this.width = 80;
+    this.colspan = "1";
+    this.fontSize = "12";
+  }
+
+  CreateCellElement() {
+    let tdElement = document.createElement("td");
+    tdElement.setAttribute("colspan", this.colspan);
+    tdElement.style.backgroundColor = this.color;
+    tdElement.style.width = this.width + "px";
+    tdElement.style.border = this.border + "px solid";
+    tdElement.style.fontSize = this.fontSize + "px";
+    tdElement.innerHTML = this.cellId;
+
+    return tdElement;
+  }
+}
+
+export { Table, Cell };

src/script/designerClasses.ts

@@ -0,0 +1,130 @@
+// 控制面板类
+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;
+    }>;
+  }>;
+}

src/script/main.ts

@@ -1,22 +1,28 @@
-import { Table, Cell } from "./classes";
+// import { Table, Cell } from "./TemplateClasses";
 
-const submit = document.getElementById("submitRowCol");
-const instanceOfCells = [];
+// const submit = document.getElementById("submitRowCol");
 
-submit.addEventListener(
-  "click",
-  function initialTable() {
-    const rowElement = <HTMLInputElement>document.getElementById("totalRow");
-    const totalRow = Number(rowElement.value);
-    const colElement = <HTMLInputElement>document.getElementById("totalCol");
-    const totalCol = Number(colElement.value);
+// const rowElement = <HTMLInputElement>document.getElementById("totalRow");
+// const totalRow = Number(rowElement.value);
+// const colElement = <HTMLInputElement>document.getElementById("totalCol");
+// const totalCol = Number(colElement.value);
 
-    for (let i = 0; i < totalRow * totalCol; i++) {
-      const newCell = new Cell(i.toString());
-      instanceOfCells.push(newCell);
-    }
-    const table = new Table(totalRow, totalCol, instanceOfCells);
-    table.render();
-  },
-  false
-);
+// submit.addEventListener(
+//   "click",
+//   () => {
+//     const instanceOfCells = [];
+
+//     for (var i = 0; i < totalRow; i++) {
+//       for (var j = 0; j < totalCol; j++) {
+//         var letter = String.fromCharCode("A".charCodeAt(0) + j - 1);
+
+//         const newCell = new Cell(letter + i);
+//         instanceOfCells.push(newCell);
+//       }
+//     }
+
+//     const table = new Table(totalRow, totalCol, instanceOfCells);
+//     table.render();
+//   },
+//   false
+// );

src/script/renderResultClasses.ts

@@ -0,0 +1,9 @@
+// 输出文件类
+class PrintOutput {
+  outputData: any;
+  constructor(outputdata) {
+    this.outputData = outputdata;
+  }
+  outputExcel() {}
+  outputPdf() {}
+}