diff --git a/src/script/TemplateClasses.ts b/src/script/TemplateClasses.ts index 7bc5c55..9b0b844 100644 --- a/src/script/TemplateClasses.ts +++ b/src/script/TemplateClasses.ts @@ -25,28 +25,42 @@ class Row { // 单元类 class Cell { cellId: string; - border: string; - color: string; - width: number; - colspan: string; + font: 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.color = ""; - this.width = 80; - this.colspan = "1"; + this.font = "Serif"; 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.width = this.width + "px"; + + tdElement.style.fontFamily = this.font; + 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; } diff --git a/src/script/designerClasses.ts b/src/script/designerClasses.ts index f3655e3..8c2a0b9 100644 --- a/src/script/designerClasses.ts +++ b/src/script/designerClasses.ts @@ -1,87 +1,28 @@ // 控制面板类 class ControlPanel { - cellId: string; - border: string; - color: string; - width: string; - colspan: string; - fontSize: string; - instanceOfCell: object; + instanceOfCell: HTMLElement; 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() {} + render() {} + setFont() {} + setFontSize() {} + setFontColor() {} + setFontWeight() {} + setTextUnderline() {} + setTextDecoration() {} + setBorder() {} + setTextLineThrough() {} + setBackgroupColor() {} + setTextLeft() {} + setTextCenter() {} + setTextRight() {} + resetTextStyle() {} + insertTable() {} + tablePreview() {} + exportPdf() {} + exportExcel() {} } // 数据源类 class DataResource {