add sidebar function

src/components/reportTemplate/ReportTemplate.vue

@@ -1,28 +1,67 @@
 <template>
   <div class='main'>
+    <div class='empty'></div>
     <div class='content'>
+
       <table>
-        <tr v-for="row in rows" :key="row.rowId" :cells="row.cells" v-bind:class="{active:row.rowId==selectedRow}">
+        <tr>
-          <input type="button" :value='row.rowId' @click="rowClickHandler(row.rowId)">
+          <input class='row-counter' type="button" value="行0">
-          <reportCell v-for="cell in row.cells" :cell="cell" v-on:cellIdFromChild="getCellFromChildren" :key="cell.cellId"></reportCell>
+
+          <td class='cell-counter' v-for="cell in initialCells">{{cell.title}}</td>
+        </tr>
+        <tr v-for="row in rows" :key="row.rowId" :cells="row.cells" v-bind:class="{active:row.rowId===selectedRow}">
+          <input class='row-counter' type="button" :value='row.rowId' @click="rowClickHandler(row)">
+
+          <reportCell v-for="cell in row.cells" :cell="cell" v-on:cellIdFromChild="getCellFromChildren" :key="cell.cellId" v-bind:class="{active:cell.cellId===selectedCell}"></reportCell>
         </tr>
       </table>
     </div>
     <div class='side'>
+      <div>
+        <span>
+          <strong>现在列:</strong>
+        </span>{{selectedRow}}
+        <span>
+          <strong>现在行:</strong>
+        </span>{{selectedCell}}
+
+      </div>
       <div class='row-tool'>
         <button @click="addRow">添加行</button>
         <button @click="deleteRow">删除行</button>
-
       </div>
       <div class='td-tool'>
         <button @click="addCell(selectedRow)">添加列</button>
         <button @click="deleteCell(selectedCell)">删除列</button>
       </div>
       <div>
-        <label>表头:</label><input type="text" v-model="inputTitle"></div>
+        <label>表头:</label><input type="text" v-model="inputTitle"><br>
-      <button @click="submitInput">确定</button>
 
-      {{infos}}
+        <label>宽度:</label><input type="number" v-model="inputColspan"><br>
+
+        <label>高度:</label><input type="number" v-model="inputHeight"><br>
+        <label>字体大小:</label><input type="number" v-model="fontSize"><br>
+
+        <label>字体样式:</label>
+        <input type="radio" id="styleone" value="normal" v-model="fontStyle">
+        <label for="styleone">正常</label>
+
+        <input type="radio" id="styletwo" value="bold" v-model="fontStyle">
+        <label for="styletwo">加粗</label>
+        <br>
+
+        <label>字体位置:</label>
+        <input type="radio" id="one" value="left" v-model="textAlign">
+        <label for="one">居左</label>
+
+        <input type="radio" id="two" value="center" v-model="textAlign">
+        <label for="two">居中</label>
+        <input type="radio" id="three" value="right" v-model="textAlign">
+        <label for="three">居右</label>
+        <br>
+        <button @click="undoHandler">undo</button>
+      </div>
+      {{inputColspan}} {{infos}}
     </div>
   </div>
 
@@ -33,30 +72,42 @@ import reportCell from './reportCell.vue';
 const infosFormat: Array<{
   rowId: string;
   cells: Array<{ cellId: number; title: string }>;
-}> = [
+}> = [];
-  {
+const selectedRowFormat: number = 0;
-    rowId: '行0',
+const selectedCellFormat: number = 9000;
-    cells: [
-      { cellId: 1, title: '列1' },
-      { cellId: 2, title: '列2' },
-      { cellId: 3, title: '列3' },
-      { cellId: 4, title: '列4' },
-      { cellId: 5, title: '列5' },
-      { cellId: 6, title: '列6' },
-      { cellId: 7, title: '列7' },
-      { cellId: 8, title: '列8' },
-      { cellId: 9, title: '列9' },
-      { cellId: 10, title: '列10' },
-      { cellId: 11, title: '列11' },
-      { cellId: 12, title: '列12' },
-    ],
-  },
-];
-const selectedRowFormat: string = '';
-const selectedCellFormat: number = 0;
 const inputTitleFormat: string = '';
+const inputColspanFormat: number = 0;
+const initialCellsFormat: Array<{ cellId: number; title: string }> = [
+  { cellId: 1, title: '1' },
+  { cellId: 2, title: '2' },
+  { cellId: 3, title: '3' },
+  { cellId: 4, title: '4' },
+  { cellId: 5, title: '5' },
+  { cellId: 6, title: '6' },
+  { cellId: 7, title: '7' },
+  { cellId: 8, title: '8' },
+  { cellId: 9, title: '9' },
+  { cellId: 10, title: '10' },
+  { cellId: 11, title: '11' },
+  { cellId: 12, title: '12' },
+  { cellId: 13, title: '13' },
+  { cellId: 14, title: '14' },
+  { cellId: 15, title: '15' },
+  { cellId: 16, title: '16' },
+  { cellId: 17, title: '17' },
+  { cellId: 18, title: '18' },
+  { cellId: 19, title: '19' },
+  { cellId: 20, title: '20' },
+  { cellId: 21, title: '21' },
+  { cellId: 22, title: '22' },
+  { cellId: 23, title: '23' },
+  { cellId: 24, title: '24' },
+];
 let rowId = 0;
 let cellId = 9000;
+let initialInputColspan = 0;
+let initialInputHeight = 30;
+let pointer = 0;
 export default Vue.extend({
   components: { reportCell },
   data() {
@@ -65,20 +116,55 @@ export default Vue.extend({
       selectedRow: selectedRowFormat,
       selectedCell: selectedCellFormat,
       inputTitle: inputTitleFormat,
+      inputColspan: inputColspanFormat,
+      inputHeight: initialInputHeight,
+      initialCells: initialCellsFormat,
+      textAlign: '',
+      fontSize: '',
+      fontStyle: '',
+      recordHistory: [],
     };
   },
   computed: {
-    rows(): Array<{
+    rows(): any {
-      rowId: string;
+      //  Array<{rowId: string;cells: Array<{ cellId: number; title: string }>;}>
-      cells: Array<{ cellId: number; title: string }>;
+      for (const row of this.infos) {
-    }> {
+        for (const cellIndex in row.cells) {
+          if (row.cells[cellIndex].cellId === this.selectedCell) {
+            row.cells.splice(Number(cellIndex), 1, {
+              title: this.inputTitle,
+              colspan: this.inputColspan,
+              cellId: this.selectedCell,
+              height: this.inputHeight,
+              textAlign: this.textAlign,
+              fontSize: this.fontSize,
+              fontStyle: this.fontStyle,
+            });
+          }
+        }
+      }
+
+      this.recordHistory.push(JSON.parse(JSON.stringify(this.infos)));
+      pointer += 1;
+
       return this.infos;
     },
+    styled() {},
   },
   methods: {
-    getCellFromChildren(cell: { cellId: number; title: string }): void {
+    getCellFromChildren(cell: {
+      cellId: number;
+      title: string;
+      colspan: number;
+      height: number;
+    }): void {
       this.selectedCell = cell.cellId;
       this.inputTitle = cell.title;
+      this.inputColspan = cell.colspan;
+      this.inputHeight = cell.height;
+      this.textAlign = cell.textAlign;
+      this.fontSize = cell.fontSize;
+      this.fontStyle = cell.fontStyle;
     },
     addRow() {
       this.infos.push({
@@ -92,7 +178,15 @@ export default Vue.extend({
     addCell(id: string) {
       for (const row of this.infos) {
         if (id === row.rowId) {
-          row.cells.push({ cellId: (cellId += 1), title: '列' + cellId });
+          row.cells.push({
+            cellId: (cellId += 1),
+            title: '列' + cellId,
+            colspan: initialInputColspan,
+            height: initialInputHeight,
+            textAlign: 'center',
+            fontSize: '16',
+            fontStyle: 'normal',
+          });
         }
       }
     },
@@ -105,22 +199,26 @@ export default Vue.extend({
         }
       }
     },
-    submitInput() {
+    //     <button @click="updateUserInput">更新</button>
-      for (const row of this.infos) {
+    // updateUserInput() {
-        for (const cellIndex in row.cells) {
+    //   for (const row of this.infos) {
-          if (row.cells[cellIndex].cellId === this.selectedCell) {
+    //     for (const cellIndex in row.cells) {
-            row.cells.splice(Number(cellIndex), 1, {
+    //       if (row.cells[cellIndex].cellId === this.selectedCell) {
-              title: this.inputTitle,
+    //         row.cells.splice(Number(cellIndex), 1, {
-              cellId: this.selectedCell.toString(),
+    //           title: this.inputTitle,
-            });
+    //           colspan: this.inputColspan,
-          }
+    //           cellId: this.selectedCell,
-        }
+    //           height: this.inputHeight,
-      }
+    //           textAlign: this.textAlign,
-    },
+    //         });
-
+    //       }
-    rowClickHandler(id: string): void {
+    //     }
-      this.selectedRow = id;
+    //   }
+    // },
+    rowClickHandler(row): void {
+      this.selectedRow = row.rowId;
     },
+    undoHandler() {},
   },
 });
 </script>
@@ -129,37 +227,56 @@ export default Vue.extend({
   display: flex;
   flex-wrap: wrap;
   height: 100%;
-  .content {
+  .empty {
-    width: 70%;
+    width: 3%;
   }
+
+  .content {
+    width: 77%;
+  }
+
   .side {
     background-color: lightgray;
     height: 300px;
-    width: 30%;
+    width: 20%;
   }
 }
 table {
+  border-collapse: collapse;
+
+  margin-top: 22px;
   border: 1px black solid;
   width: 100%;
   table-layout: fixed;
-  text-align: center;
+  // text-align: center;
+  tr {
+    border: 1px black solid;
+  }
+  .row-counter {
+    position: relative;
+    left: -59px;
+    border: 1px black solid;
+    background-color: lightblue;
+    width: 58px;
+    height: 30px;
+  }
+  .cell-counter {
+    border: 1px black solid;
+    background-color: lightblue;
+  }
+
   td {
     width: 8.3%;
+    height: 30px;
+    overflow: hidden;
   }
 }
 
 .active {
   width: 100%;
-  background-color: blue;
+  background-color: lightgray;
 }
 </style>
 
 
 
-/*
-row.cells.splice(cell, 1, {
-              cellId: 666,
-              title: this.inputTitle,
-            });
-
-*/

src/components/reportTemplate/reportCell.vue

@@ -1,5 +1,8 @@
 <template>
-  <td colspan="2" v-on:click="$emit('cellIdFromChild',cell)">{{title}} </td>
+  <td :style="'height:'+cell.height+'px;text-align:'+cell.textAlign+';font-size:'+cell.fontSize+'px;font-weight:'+cell.fontStyle" :colspan="cell.colspan" v-on:click="$emit('cellIdFromChild',cell)">
+    <span>{{cell.title}}</span>
+
+  </td>
 </template>
 <script lang="ts">
 import Vue from 'vue';
@@ -7,9 +10,7 @@ import Vue from 'vue';
 export default Vue.extend({
   props: ['cell'],
   data() {
-    return {
+    return {};
-      title: this.cell.title,
-    };
   },
   methods: {},
 });