class all

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;
+    }>;
+  }>;
+}