defined 设计器

src/script/TemplateClasses.ts

@@ -25,28 +25,42 @@ class Row {
 // 单元类
 class Cell {
   cellId: string;
-  border: string;
+  font: string;
-  color: string;
-  width: number;
-  colspan: string;
   fontSize: string;
+  fontColor: string;
+  fontWeight: string;
+  fontStyle: string;
+  textDecoration: string; // underline or line throught
+  border: string;
+  backgroundColor: string;
+  textAlign: string;
   constructor(id) {
     this.cellId = id;
-    this.border = "";
+    this.font = "Serif";
-    this.color = "";
-    this.width = 80;
-    this.colspan = "1";
     this.fontSize = "12";
+    this.fontColor = "black";
+    this.fontWeight = "normal";
+    this.fontStyle = "normal";
+    this.textDecoration = "";
+    this.border = "";
+    this.backgroundColor = "";
+    this.textAlign = "left";
   }
 
   CreateCellElement() {
     let tdElement = document.createElement("td");
-    tdElement.setAttribute("colspan", this.colspan);
+
-    tdElement.style.backgroundColor = this.color;
+    tdElement.style.fontFamily = this.font;
-    tdElement.style.width = this.width + "px";
+    tdElement.style.backgroundColor = this.backgroundColor;
+
     tdElement.style.border = this.border + "px solid";
     tdElement.style.fontSize = this.fontSize + "px";
-    tdElement.innerHTML = this.cellId;
+    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";
 
     return tdElement;
   }

src/script/designerClasses.ts

@@ -1,87 +1,28 @@
 // 控制面板类
 class ControlPanel {
-  cellId: string;
+  instanceOfCell: HTMLElement;
-  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() {
+  render() {}
-    var cellInfoElement = document.getElementById("cellInfo");
+  setFont() {}
-    while (cellInfoElement.firstChild) {
+  setFontSize() {}
-      cellInfoElement.removeChild(cellInfoElement.firstChild);
+  setFontColor() {}
-    }
+  setFontWeight() {}
-    const cellUlElement = document.createElement("ul");
+  setTextUnderline() {}
-
+  setTextDecoration() {}
-    for (const key in this.instanceOfCell) {
+  setBorder() {}
-      if (this.instanceOfCell.hasOwnProperty(key)) {
+  setTextLineThrough() {}
-        const cellLiElement = document.createElement("li");
+  setBackgroupColor() {}
-        const cellLableElement = document.createElement("label");
+  setTextLeft() {}
-        const cellInputElement = document.createElement("input");
+  setTextCenter() {}
-
+  setTextRight() {}
-        cellLableElement.innerHTML = key;
+  resetTextStyle() {}
-
+  insertTable() {}
-        cellInputElement.setAttribute("value", this.instanceOfCell[key]);
+  tablePreview() {}
-        cellInputElement.setAttribute("name", key);
+  exportPdf() {}
-        cellInputElement.setAttribute("class", "cell-detail");
+  exportExcel() {}
-
-        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 {