add render for multipy Bancais

reporttemplatecopy.txt

@@ -0,0 +1,601 @@
+<template>
+  <div class='main'>
+    <div class='empty'></div>
+    <div class='content'>
+      <table>
+        <tr v-for="(row,index) in rows" :key="row.rowId" :cells="row.cells">
+          <input class='row-counter' type="button" :value='index' @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 class='row-tool'>
+        <button @click="addRow">添加行</button>
+        <button @click="deleteRow">删除行</button>
+      </div>
+      <div class='td-tool'>
+        <button @click="addCell()">添加列</button>
+        <button @click="deleteCell()">删除列</button>
+      </div>
+      <div class='td-tool'>
+        <button @click="copyRow()">复制列</button>
+        <button @click="pasteRow()">粘贴列</button>
+      </div>
+      <div>
+        <label>表头:</label><input type="text" v-model="inputTitle"><br>
+        <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>
+        <button @click="redoHandler">redo</button><br>
+        <div>
+          <p>{{this.inputTitle}}</p>
+          <p style="color: blue">以下功能用于测试使用</p>
+          <button @click="importTemplate">导入设计样式</button>
+          <button @click="importData">导入数据</button><br>
+          <label>单元ID:</label>
+          <span>{{selectedCell}}</span><br>
+          <label>行ID:</label>
+          <span>{{selectedRow}}</span><br>
+        </div>
+        {{this.infos}}
+
+      </div>
+    </div>
+  </div>
+
+</template>
+<script lang="ts">
+import Vue from 'vue';
+import initialTemplateData from '@/assets/templateInitialData'; // report template for testing
+import startUpRowColumn from '@/assets/startUpRowColumn'; // report template for testing
+import data from '@/assets/data'; //  userdata for testing use
+import reportCell from './reportCell.vue';
+import test from './orderTitle.vue';
+
+let rowId = 29; // this figure is for testing use
+let cellId = 9032; // this figure is for testing use
+let undoRodoPointer = -1;
+let isundoOrRedoClick = false;
+let isUpdateInfos = true;
+let x = -1; // for testing use
+let rowHolder;
+export default Vue.extend({
+  components: { reportCell, test },
+  data(): {
+    infos: Array<{
+      rowId: number;
+      cells: Array<{
+        cellId: number;
+        title: string;
+        colspan: number;
+        height: number;
+        textAlign: string;
+        fontSize: number;
+        fontStyle: string;
+      }>;
+    }>;
+    selectedRow: number;
+    selectedCell: number;
+    inputTitle: string;
+    inputColspan: number;
+    inputHeight: number;
+    textAlign: string;
+    fontSize: number;
+    fontStyle: string;
+    recordHistory: string[];
+    importedData: any;
+    currentCell: {
+      cellId: number;
+      title: string;
+      colspan: number;
+      height: number;
+      textAlign: string;
+      fontSize: number;
+      fontStyle: string;
+    };
+  } {
+    return {
+      infos: startUpRowColumn,
+      selectedRow: 0,
+      selectedCell: 9000,
+      inputTitle: '',
+      inputColspan: 0,
+      inputHeight: 30,
+      textAlign: '',
+      fontSize: 16,
+      fontStyle: 'normal',
+      recordHistory: [],
+      importedData: data,
+      currentCell: {
+        cellId: 0,
+        title: '',
+        colspan: 0,
+        height: 0,
+        textAlign: '',
+        fontSize: 0,
+        fontStyle: '',
+      },
+    };
+  },
+  computed: {
+    rows(): any {
+      if (!isUpdateInfos) {
+        isUpdateInfos = true;
+        return this.infos;
+      }
+      // undo的时候 给this.infos 从新赋值之后 所有user input 都感知不到。
+      for (const row of this.infos) {
+        for (const cellKey in row.cells) {
+          if (row.cells[cellKey].cellId === this.selectedCell) {
+            row.cells.splice(Number(cellKey), 1, {
+              cellId: this.selectedCell,
+              title: this.inputTitle,
+              colspan: this.inputColspan,
+              height: this.inputHeight,
+              textAlign: this.textAlign,
+              fontSize: this.fontSize,
+              fontStyle: this.fontStyle,
+            });
+          }
+        }
+      }
+      // will not add to recordHistory if this.info is update by redo/undo button
+      if (
+        isundoOrRedoClick === false &&
+        this.recordHistory[this.recordHistory.length - 1] !==
+          JSON.stringify(this.infos)
+      ) {
+        this.recordHistory.push(JSON.stringify(this.infos));
+      } else {
+        isundoOrRedoClick = false;
+      }
+      return this.infos;
+    },
+  },
+  mounted() {
+    let temCateObject = {};
+    for (const boards of data.boards) {
+      for (const boardInfos of boards.boardInfos) {
+        for (const cate of Object.keys(boardInfos)) {
+          temCateObject[cate] = [];
+        }
+      }
+    }
+    for (const boards of data.boards) {
+      for (const boardInfos of boards.boardInfos) {
+        for (const cate in boardInfos) {
+          for (const temCate in temCateObject) {
+            if (cate === temCate) {
+              temCateObject[cate].push(boardInfos[cate]);
+            }
+          }
+        }
+      }
+    }
+
+    console.log(temCateObject);
+  },
+  methods: {
+    getCellFromChildren(cell: {
+      cellId: number;
+      title: string;
+      colspan: number;
+      height: number;
+      textAlign: string;
+      fontSize: number;
+      fontStyle: string;
+    }): void {
+      this.currentCell = cell; // assign this cell to this.currentCell, due to other components may need this data.
+      this.selectedCell = this.currentCell.cellId;
+      this.inputTitle = this.currentCell.title;
+      this.inputColspan = this.currentCell.colspan;
+      this.inputHeight = this.currentCell.height;
+      this.textAlign = this.currentCell.textAlign;
+      this.fontSize = this.currentCell.fontSize;
+      this.fontStyle = this.currentCell.fontStyle;
+    },
+    addRow() {
+      if (this.selectedRow) {
+        for (const index in this.infos) {
+          if (this.selectedRow === this.infos[index].rowId) {
+            this.infos.splice(Number(index), 0, {
+              rowId: (rowId += 1),
+              cells: [],
+            });
+            this.selectedRow = 0;
+            break;
+          }
+        }
+      } else {
+        this.infos.push({
+          rowId: (rowId += 1),
+          cells: [],
+        });
+      }
+    },
+    deleteRow() {
+      if (!this.selectedRow) {
+        return alert('请选择要删除行');
+      }
+      this.infos = this.infos.filter((item) => item.rowId !== this.selectedRow);
+      this.selectedRow = 0;
+    },
+    addCell() {
+      if (!this.selectedRow) {
+        return alert('请选择要添加单元的行');
+      }
+      for (const row of this.infos) {
+        if (this.selectedRow === row.rowId) {
+          row.cells.push({
+            cellId: (cellId += 1),
+            title: '列' + cellId,
+            colspan: 0,
+            height: 30,
+            textAlign: 'center',
+            fontSize: 16,
+            fontStyle: 'normal',
+          });
+        }
+      }
+    },
+    deleteCell() {
+      // 9000 is initial cell Id.
+      if (this.selectedCell === 9000) {
+        return alert('请选择要删除的单元');
+      }
+      for (const row of this.infos) {
+        for (const cell in row.cells) {
+          if (row.cells[cell].cellId === this.selectedCell) {
+            row.cells.splice(Number(cell), 1);
+          }
+        }
+      }
+      this.selectedCell = 9000;
+    },
+    copyRow() {
+      if (this.selectedRow) {
+        rowHolder = this.infos.filter(
+          (eachRow) => eachRow.rowId === this.selectedRow,
+        );
+
+        rowHolder = JSON.parse(JSON.stringify(rowHolder));
+
+        rowHolder[0].rowId = ++rowId;
+
+        for (const cell of rowHolder[0].cells) {
+          cell.cellId = ++cellId;
+        }
+      } else {
+        alert('请选择要复制的行');
+      }
+
+      console.log('复制成功', rowHolder);
+    },
+    pasteRow() {
+      if (this.selectedRow) {
+        for (const eachRow in this.infos) {
+          if (this.infos[eachRow].rowId === this.selectedRow) {
+            this.infos.splice(Number(eachRow), 1, rowHolder[0]);
+          }
+        }
+      } else {
+        alert('请选择要粘贴的行');
+      }
+
+      console.log('粘贴成功');
+    },
+    rowClickHandler(row: any): void {
+      this.selectedRow = row.rowId;
+    },
+    undoHandler() {
+      if (undoRodoPointer === -1) {
+        undoRodoPointer = this.recordHistory.length - 1;
+      }
+      // this is to avoid JSON error on console log
+      if (undoRodoPointer === 0) {
+        return;
+      }
+
+      this.infos = JSON.parse(this.recordHistory[(undoRodoPointer -= 1)]);
+      console.log(undoRodoPointer);
+      isundoOrRedoClick = true;
+      isUpdateInfos = false;
+    },
+
+    redoHandler() {
+      if (undoRodoPointer === -1) {
+        undoRodoPointer = this.recordHistory.length - 1;
+      }
+      // this is to avoid JSON error on console log
+
+      if (undoRodoPointer === this.recordHistory.length - 1) {
+        return;
+      }
+      this.infos = JSON.parse(this.recordHistory[(undoRodoPointer += 1)]);
+      isundoOrRedoClick = true;
+      isUpdateInfos = false;
+    },
+    // for testing use -----import data from other file
+    importData() {
+      // import 订单信息头
+      console.log('导入数据');
+      for (const row of this.infos) {
+        for (const cell of row.cells) {
+          for (const dataKey in data) {
+            if (dataKey === cell.title) {
+              cell.title = data[dataKey];
+            }
+          }
+        }
+      }
+      // 处理原数据--> 板材：[{id:123,houseName:''....},{id:124,houseName:''....}]
+      let banCaiArray = [];
+      for (const board of data.boards) {
+        let banCaiObjectHolder = {};
+        let boardKeys = Object.keys(board);
+        let boardValues = Object.values(board);
+
+        for (const boardKey of boardKeys) {
+          if (boardKey === 'boardInfos') {
+            let boardInfosKeys = Object.keys(board[boardKey][0]);
+            for (const boardInfosKey of boardInfosKeys) {
+              banCaiObjectHolder[boardInfosKey] = [];
+            }
+            break;
+          } else {
+            banCaiObjectHolder[boardKey] = [
+              boardValues[boardKeys.indexOf(boardKey)],
+            ];
+          }
+        }
+        banCaiArray.push(banCaiObjectHolder);
+      }
+      for (const eachBanCaiArray of banCaiArray) {
+        for (const board of data.boards) {
+          for (const boardInfosDetails of board.boardInfos) {
+            for (const eachItem in eachBanCaiArray) {
+              for (const eachBoardInfosDetail in boardInfosDetails) {
+                if (eachItem === eachBoardInfosDetail) {
+                  eachBanCaiArray[eachItem].push(
+                    boardInfosDetails[eachBoardInfosDetail],
+                  );
+                }
+              }
+            }
+          }
+          data.boards.splice(0, 1);
+        }
+      }
+      // 找到匹配行的指数
+      let matchedRowArray = [];
+      let matchedRowIndex = [];
+      let copiedMatchedRowArray = [];
+      for (const row of this.infos) {
+        for (const cell of row.cells) {
+          for (const banCai of banCaiArray) {
+            if (banCai.hasOwnProperty(cell.title)) {
+              if (matchedRowIndex.indexOf(this.infos.indexOf(row)) === -1) {
+                matchedRowIndex.push(this.infos.indexOf(row));
+              }
+            }
+          }
+        }
+      }
+      // 将匹配指数内的所有行 赋值给matchedRowArray
+      matchedRowArray = this.infos.slice(
+        matchedRowIndex[0],
+        matchedRowIndex[1] + 1,
+      );
+      // matchedRowArray里面的行重新定义对象 赋值给copiedMatchedRowArray
+      for (const eachMatchRow of matchedRowArray) {
+        let matchedRow = JSON.parse(JSON.stringify(eachMatchRow));
+        matchedRow.rowId = ++rowId;
+        for (const cell of matchedRow.cells) {
+          cell.cellId = ++cellId;
+        }
+        copiedMatchedRowArray.push(matchedRow);
+      }
+      // 将数据传入匹配字符串的行内
+      console.log(banCaiArray);
+      for (const banCai of banCaiArray) {
+        for (const row of this.infos) {
+          for (const cell of row.cells) {
+            if (banCai.hasOwnProperty(cell.title)) {
+              if (banCai[cell.title].length === 1) {
+                cell.title = banCai[cell.title][0];
+              } else {
+                
+              }
+            }
+          }
+        }
+        console.log('break');
+      }
+
+      // 粘贴 已复制的行（匹配到的行）
+      for (const row in this.infos) {
+        if (this.infos[row].cells.length === 0) {
+          let counter = Number(row);
+          for (const matchedRow of copiedMatchedRowArray) {
+            this.infos.splice(counter, 1, matchedRow);
+            counter += 1;
+          }
+
+          break;
+        }
+      }
+    },
+
+    // for testing use -----import data from other file
+    importTemplate() {
+      this.infos = initialTemplateData;
+    },
+  },
+});
+</script>
+<style lang="scss" scoped>
+.main {
+  display: flex;
+  flex-wrap: wrap;
+  height: 100%;
+  .empty {
+    width: 3%;
+  }
+
+  .content {
+    width: 77%;
+  }
+
+  .side {
+    background-color: lightgray;
+    height: 100hv;
+    width: 20%;
+  }
+}
+table {
+  border-collapse: collapse;
+  border: 1px black solid;
+  width: 100%;
+  table-layout: fixed;
+  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 {
+  background-color: lightgray;
+}
+</style>
+
+/*
+importData() {
+      x += 1;
+      for (const row of this.infos) {
+        for (const cell of row.cells) {
+          // userdata for loop
+          for (const userData in this.importedData) {
+            if (userData + ':' === cell.title) {
+              cell.title += this.importedData[userData];
+            }
+          }
+          for (const boards of this.importedData.boards) {
+            for (const board in boards) {
+              if (board + ':' === cell.title) {
+                cell.title += boards[board];
+              }
+            }
+          }
+        }
+      }
+      for (const row of this.infos) {
+        // get each cell
+        console.log(x);
+        const borderInfo: any = this.importedData.boards[x].boardInfos;
+        for (const details of borderInfo) {
+          const tem: any[] = [];
+          for (const each of Object.keys(details)) {
+            for (const cell of row.cells) {
+              if (each === cell.title) {
+                tem.push({
+                  cellId: (cellId += 1),
+                  title: details[each],
+                  colspan: cell.colspan,
+                  height: 30,
+                  textAlign: 'center',
+                  fontSize: 16,
+                  fontStyle: 'normal',
+                });
+              }
+            }
+          }
+          if (tem.length) {
+            for (const eachRow in this.infos) {
+              if (!this.infos[eachRow].cells.length) {
+                this.infos[eachRow].cells = this.infos[eachRow].cells.concat(
+                  tem,
+                );
+                break;
+              }
+            }
+          }
+        }
+      }
+    },
+*/
+
+
+
+
+////
+
+ function fillBody() {
+        for (const row of this.infos) {
+          for (const cell of row.cells) {
+            if (data.boards[0].hasOwnProperty(cell.title)) {
+              cell.title = data.boards[0][cell.title];
+            }
+          }
+          // get each cell
+          const borderInfo: any = data.boards[0].boardInfos;
+          for (const details of borderInfo) {
+            const tem: any[] = [];
+            for (const each of Object.keys(details)) {
+              for (const cell of row.cells) {
+                if (each === cell.title) {
+                  tem.push({
+                    cellId: (cellId += 1),
+                    title: details[each],
+                    colspan: cell.colspan,
+                    height: 30,
+                    textAlign: 'center',
+                    fontSize: 16,
+                    fontStyle: 'normal',
+                  });
+                }
+              }
+            }
+            if (tem.length) {
+              for (const eachRow of this.infos) {
+                if (!eachRow.cells.length) {
+                  eachRow.cells = eachRow.cells.concat(tem);
+                  break;
+                }
+              }
+            }
+          }
+        }
+      }

src/assets/data.ts

@@ -26,7 +26,7 @@ const data = {
           shape: '',
           direction: '1/1/1/1 ',
           stripe: '正纹',
-          boardAddOn: '',
+          boardAddOn: '1',
         },
         {
           houseName: 'F01',
@@ -42,7 +42,7 @@ const data = {
           shape: '造型',
           direction: '1/1/1/1 ',
           stripe: '正纹',
-          boardAddOn: '',
+          boardAddOn: '2',
         },
         {
           houseName: 'F01',
@@ -58,7 +58,47 @@ const data = {
           shape: '造型',
           direction: '1/1/1/1 ',
           stripe: '正纹',
-          boardAddOn: '',
+          boardAddOn: '3',
+        },
+      ],
+    },
+    {
+      id: 1235,
+      material: '生态板 ',
+      color: '暖黑',
+      boardInfos: [
+        {
+          houseName: 'F01',
+          closetName: 'G01',
+          boardNo: 'B1816478862',
+          boardName: '背板',
+          length: 944,
+          width: 598,
+          thickness: 18,
+          quantity: 1,
+          area: 0.568,
+          mutation: '',
+          shape: '',
+          direction: '1/1/1/1 ',
+          stripe: '正纹',
+          boardAddOn: '4',
+        },
+        {
+          houseName: 'F01',
+          closetName: 'G01',
+          boardNo: 'B1816478861',
+
+          boardName: '背板',
+          length: 944,
+          width: 598,
+          thickness: 18,
+          quantity: 1,
+          area: 0.568,
+          mutation: '',
+          shape: '',
+          direction: '1/1/1/1 ',
+          stripe: '正纹',
+          boardAddOn: '5',
         },
       ],
     },

src/assets/startUpRowColumn.ts

@@ -1,7 +1,7 @@
 const startUpRowColumn = [
   {
     rowId: 0,
-    rowTitle: 0,
+    rowTitle: '0',
     cells: [
       {
         cellId: 1,
@@ -248,142 +248,142 @@ const startUpRowColumn = [
   {
     rowId: 1,
 
-    rowTitle: 1,
+    rowTitle: '1',
     cells: [],
   },
   {
     rowId: 2,
 
-    rowTitle: 2,
+    rowTitle: '2',
     cells: [],
   },
   {
     rowId: 3,
 
-    rowTitle: 3,
+    rowTitle: '3',
     cells: [],
   },
   {
     rowId: 4,
 
-    rowTitle: 4,
+    rowTitle: '4',
     cells: [],
   },
   {
     rowId: 6,
 
-    rowTitle: 6,
+    rowTitle: '6',
     cells: [],
   },
   {
     rowId: 8,
 
-    rowTitle: 8,
+    rowTitle: '8',
     cells: [],
   },
   {
     rowId: 9,
-    rowTitle: 9,
+    rowTitle: '9',
     cells: [],
   },
   {
     rowId: 10,
-    rowTitle: 10,
+    rowTitle: '10',
     cells: [],
   },
   {
     rowId: 11,
-    rowTitle: 11,
+    rowTitle: '11',
     cells: [],
   },
   {
     rowId: 12,
-    rowTitle: 12,
+    rowTitle: '12',
     cells: [],
   },
   {
     rowId: 13,
-    rowTitle: 13,
+    rowTitle: '13',
     cells: [],
   },
   {
     rowId: 14,
-    rowTitle: 14,
+    rowTitle: '14',
     cells: [],
   },
   {
     rowId: 15,
-    rowTitle: 15,
+    rowTitle: '15',
     cells: [],
   },
   {
     rowId: 16,
-    rowTitle: 16,
+    rowTitle: '16',
     cells: [],
   },
   {
     rowId: 17,
-    rowTitle: 17,
+    rowTitle: '17',
     cells: [],
   },
   {
     rowId: 18,
-    rowTitle: 18,
+    rowTitle: '18',
     cells: [],
   },
   {
     rowId: 19,
-    rowTitle: 19,
+    rowTitle: '19',
     cells: [],
   },
   {
     rowId: 20,
-    rowTitle: 20,
+    rowTitle: '20',
     cells: [],
   },
   {
     rowId: 21,
-    rowTitle: 21,
+    rowTitle: '21',
     cells: [],
   },
   {
     rowId: 22,
-    rowTitle: 22,
+    rowTitle: '22',
     cells: [],
   },
   {
     rowId: 23,
-    rowTitle: 23,
+    rowTitle: '23',
     cells: [],
   },
   {
     rowId: 24,
-    rowTitle: 24,
+    rowTitle: '24',
     cells: [],
   },
   {
     rowId: 25,
-    rowTitle: 25,
+    rowTitle: '25',
     cells: [],
   },
   {
     rowId: 26,
-    rowTitle: 26,
+    rowTitle: '26',
     cells: [],
   },
   {
     rowId: 27,
-    rowTitle: 27,
+    rowTitle: '27',
     cells: [],
   },
   {
     rowId: 28,
-    rowTitle: 28,
+    rowTitle: '28',
     cells: [],
   },
   {
     rowId: 29,
-    rowTitle: 29,
+    rowTitle: '29',
     cells: [],
   },
 ];

src/assets/templateInitialData.ts

@@ -1,13 +1,12 @@
 const initialTemplateData = [
   {
     rowId: 0,
-    rowTitle: 0,
+    rowTitle: '0',
     cells: [
       {
         cellId: 1,
         title: '1',
         colspan: 1,
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -17,7 +16,6 @@ const initialTemplateData = [
         cellId: 2,
         title: '2',
         colspan: 1,
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -27,7 +25,6 @@ const initialTemplateData = [
         cellId: 3,
         title: '3',
         colspan: 1,
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -37,7 +34,6 @@ const initialTemplateData = [
         cellId: 4,
         title: '4',
         colspan: 1,
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -47,7 +43,6 @@ const initialTemplateData = [
         cellId: 5,
         title: '5',
         colspan: 1,
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -57,7 +52,6 @@ const initialTemplateData = [
         cellId: 6,
         title: '6',
         colspan: 1,
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -67,7 +61,6 @@ const initialTemplateData = [
         cellId: 7,
         title: '7',
         colspan: 1,
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -77,7 +70,6 @@ const initialTemplateData = [
         cellId: 8,
         title: '8',
         colspan: 1,
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -87,7 +79,6 @@ const initialTemplateData = [
         cellId: 9,
         title: '9',
         colspan: 1,
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -97,7 +88,6 @@ const initialTemplateData = [
         cellId: 10,
         title: '10',
         colspan: 1,
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -107,7 +97,6 @@ const initialTemplateData = [
         cellId: 11,
         title: '11',
         colspan: 1,
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -117,7 +106,6 @@ const initialTemplateData = [
         cellId: 12,
         title: '12',
         colspan: 1,
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -127,7 +115,6 @@ const initialTemplateData = [
         cellId: 13,
         title: '13',
         colspan: 1,
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -137,7 +124,6 @@ const initialTemplateData = [
         cellId: 14,
         title: '14',
         colspan: 1,
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -147,7 +133,6 @@ const initialTemplateData = [
         cellId: 15,
         title: '15',
         colspan: 1,
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -157,7 +142,6 @@ const initialTemplateData = [
         cellId: 16,
         title: '16',
         colspan: 1,
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -167,7 +151,6 @@ const initialTemplateData = [
         cellId: 17,
         title: '17',
         colspan: 1,
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -177,7 +160,6 @@ const initialTemplateData = [
         cellId: 18,
         title: '18',
         colspan: 1,
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -187,7 +169,6 @@ const initialTemplateData = [
         cellId: 19,
         title: '19',
         colspan: 1,
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -197,7 +178,6 @@ const initialTemplateData = [
         cellId: 20,
         title: '20',
         colspan: 1,
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -207,7 +187,6 @@ const initialTemplateData = [
         cellId: 21,
         title: '21',
         colspan: 1,
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -217,7 +196,6 @@ const initialTemplateData = [
         cellId: 22,
         title: '22',
         colspan: 1,
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -227,7 +205,6 @@ const initialTemplateData = [
         cellId: 23,
         title: '23',
         colspan: 1,
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -237,7 +214,6 @@ const initialTemplateData = [
         cellId: 24,
         title: '24',
         colspan: 1,
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -247,14 +223,12 @@ const initialTemplateData = [
   },
   {
     rowId: 1,
-
+    rowTitle: '1',
-    rowTitle: 1,
     cells: [
       {
         cellId: 9001,
-        title: '板材明细单',
+        title: '订单信息',
         colspan: 24,
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -264,24 +238,21 @@ const initialTemplateData = [
   },
   {
     rowId: 2,
-
+    rowTitle: '2',
-    rowTitle: 2,
     cells: [
       {
         cellId: 9002,
-        title: 'orderNo:',
+        title: '订单号',
-        colspan: 8,
+        colspan: '4',
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
-        fontStyle: 'normal',
+        fontStyle: 'bold',
       },
       {
         cellId: 9003,
-        title: 'clientName:',
+        title: 'orderNo',
-        colspan: 8,
+        colspan: '4',
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -289,9 +260,35 @@ const initialTemplateData = [
       },
       {
         cellId: 9004,
-        title: 'soldDate:',
+        title: '客户名',
-        colspan: 8,
+        colspan: '4',
-
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+      {
+        cellId: 9005,
+        title: 'clientName',
+        colspan: '4',
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 9006,
+        title: '出售日期',
+        colspan: '4',
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+      {
+        cellId: 9007,
+        title: 'soldDate',
+        colspan: '4',
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -301,34 +298,57 @@ const initialTemplateData = [
   },
   {
     rowId: 3,
-
+    rowTitle: '3',
-    rowTitle: 3,
     cells: [
       {
-        cellId: 9005,
+        cellId: 9008,
-        title: 'contactName:',
+        title: '联系人',
-        colspan: 8,
+        colspan: '4',
-
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+      {
+        cellId: 9009,
+        title: 'contactName',
+        colspan: '4',
         height: 30,
         textAlign: 'center',
         fontSize: 16,
         fontStyle: 'normal',
       },
       {
-        cellId: 9006,
+        cellId: 9010,
-        title: 'contactNo:',
+        title: '联系电话',
-        colspan: 8,
+        colspan: '4',
-
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+      {
+        cellId: 9011,
+        title: 'contactNo',
+        colspan: '4',
         height: 30,
         textAlign: 'center',
         fontSize: 16,
         fontStyle: 'normal',
       },
       {
-        cellId: 9007,
+        cellId: 9012,
-        title: 'deliveryAddress:',
+        title: '送货地址',
-        colspan: 8,
+        colspan: '4',
-
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+      {
+        cellId: 9013,
+        title: 'deliveryAddress',
+        colspan: '4',
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -338,14 +358,81 @@ const initialTemplateData = [
   },
   {
     rowId: 4,
-
+    rowTitle: '4',
-    rowTitle: 4,
     cells: [
       {
-        cellId: 9008,
+        cellId: 9014,
-        title: 'addOn:',
+        title: '备注',
-        colspan: 8,
+        colspan: '4',
-
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+      {
+        cellId: 9015,
+        title: 'addOn',
+        colspan: '4',
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+    ],
+  },
+  {
+    rowId: 5,
+    rowTitle: '5',
+    cells: [
+      {
+        cellId: 9016,
+        title: '材料',
+        colspan: '4',
+        height: 30,
+        textAlign: 'left',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+      {
+        cellId: 9017,
+        title: 'material',
+        colspan: '4',
+        height: 30,
+        textAlign: 'left',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 9018,
+        title: '颜色',
+        colspan: '4',
+        height: 30,
+        textAlign: 'left',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+      {
+        cellId: 19018,
+        title: 'color',
+        colspan: '4',
+        height: 30,
+        textAlign: 'left',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 29018,
+        title: '共15条记录',
+        colspan: '8',
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+      {
+        cellId: 39018,
+        title: '',
+        colspan: '0',
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -355,121 +442,12 @@ const initialTemplateData = [
   },
   {
     rowId: 6,
-
+    rowTitle: '6',
-    rowTitle: 6,
     cells: [
-      {
-        cellId: 9009,
-        title: 'material:',
-        colspan: 8,
-
-        height: 30,
-        textAlign: 'left',
-        fontSize: 16,
-        fontStyle: 'bold',
-      },
-      {
-        cellId: 9010,
-        title: 'color:',
-        colspan: 8,
-
-        height: 30,
-        textAlign: 'left',
-        fontSize: 16,
-        fontStyle: 'bold',
-      },
-      {
-        cellId: 9011,
-        title: '共15条记录',
-        colspan: 8,
-
-        height: 30,
-        textAlign: 'left',
-        fontSize: 16,
-        fontStyle: 'bold',
-      },
-    ],
-  },
-  {
-    rowId: 8,
-
-    rowTitle: 8,
-    cells: [
-      {
-        cellId: 9012,
-        title: 'houseName',
-        colspan: 2,
-
-        height: 30,
-        textAlign: 'center',
-        fontSize: 16,
-        fontStyle: 'bold',
-      },
-      {
-        cellId: 9013,
-        title: 'closetName',
-        colspan: 0,
-
-        height: 30,
-        textAlign: 'center',
-        fontSize: 16,
-        fontStyle: 'bold',
-      },
-      {
-        cellId: 9014,
-        title: 'boardNo',
-        colspan: 2,
-
-        height: 30,
-        textAlign: 'center',
-        fontSize: 16,
-        fontStyle: 'bold',
-      },
-      {
-        cellId: 9015,
-        title: 'boardName',
-        colspan: 2,
-
-        height: 30,
-        textAlign: 'center',
-        fontSize: 16,
-        fontStyle: 'bold',
-      },
-      {
-        cellId: 9016,
-        title: 'length',
-        colspan: 0,
-
-        height: 30,
-        textAlign: 'center',
-        fontSize: 16,
-        fontStyle: 'bold',
-      },
-      {
-        cellId: 9017,
-        title: 'width',
-        colspan: 0,
-
-        height: 30,
-        textAlign: 'center',
-        fontSize: 16,
-        fontStyle: 'bold',
-      },
-      {
-        cellId: 9018,
-        title: 'thickness',
-        colspan: 0,
-
-        height: 30,
-        textAlign: 'center',
-        fontSize: 16,
-        fontStyle: 'bold',
-      },
       {
         cellId: 9019,
-        title: 'quantity',
+        title: '房名',
-        colspan: 0,
+        colspan: 2,
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -477,9 +455,8 @@ const initialTemplateData = [
       },
       {
         cellId: 9020,
-        title: 'area',
+        title: '柜名',
         colspan: 0,
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -487,9 +464,8 @@ const initialTemplateData = [
       },
       {
         cellId: 9021,
-        title: 'mutation',
+        title: '板材号',
-        colspan: 0,
+        colspan: 2,
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -497,9 +473,8 @@ const initialTemplateData = [
       },
       {
         cellId: 9022,
-        title: 'shape',
+        title: '板材名',
-        colspan: 0,
+        colspan: 2,
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -507,9 +482,8 @@ const initialTemplateData = [
       },
       {
         cellId: 9023,
-        title: 'direction',
+        title: '长度',
-        colspan: 3,
+        colspan: 0,
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -517,9 +491,8 @@ const initialTemplateData = [
       },
       {
         cellId: 9024,
-        title: 'stripe',
+        title: '宽度',
-        colspan: 2,
+        colspan: 0,
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -527,9 +500,71 @@ const initialTemplateData = [
       },
       {
         cellId: 9025,
-        title: 'boardAddOn',
+        title: '厚度',
+        colspan: 0,
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+      {
+        cellId: 9026,
+        title: '数量',
+        colspan: 0,
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+      {
+        cellId: 9027,
+        title: '面积',
+        colspan: 0,
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+      {
+        cellId: 9028,
+        title: '变异',
+        colspan: 0,
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+      {
+        cellId: 9029,
+        title: '形状',
+        colspan: 0,
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+      {
+        cellId: 9030,
+        title: '方向',
+        colspan: 3,
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+      {
+        cellId: 9031,
+        title: '纹路',
+        colspan: 2,
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'bold',
+      },
+      {
+        cellId: 9032,
+        title: '板材备注',
         colspan: 5,
-
         height: 30,
         textAlign: 'center',
         fontSize: 16,
@@ -538,110 +573,159 @@ const initialTemplateData = [
     ],
   },
   {
-    rowId: 9,
+    rowId: 7,
-    rowTitle: 9,
+    rowTitle: '7',
-    cells: [],
+    cells: [
-  },
+      {
-  {
+        cellId: 9033,
-    rowId: 10,
+        title: 'houseName',
-    rowTitle: 10,
+        colspan: 2,
-    cells: [],
+        height: 30,
-  },
+        textAlign: 'center',
-  {
+        fontSize: 16,
-    rowId: 11,
+        fontStyle: 'normal',
-    rowTitle: 11,
+      },
-    cells: [],
+      {
-  },
+        cellId: 9034,
-  {
+        title: 'closetName',
-    rowId: 12,
+        colspan: 0,
-    rowTitle: 12,
+        height: 30,
-    cells: [],
+        textAlign: 'center',
-  },
+        fontSize: 16,
-  {
+        fontStyle: 'normal',
-    rowId: 13,
+      },
-    rowTitle: 13,
+      {
-    cells: [],
+        cellId: 9035,
-  },
+        title: 'boardNo',
-  {
+        colspan: 2,
-    rowId: 14,
+        height: 30,
-    rowTitle: 14,
+        textAlign: 'center',
-    cells: [],
+        fontSize: 16,
-  },
+        fontStyle: 'normal',
-  {
+      },
-    rowId: 15,
+      {
-    rowTitle: 15,
+        cellId: 9036,
-    cells: [],
+        title: 'boardName',
-  },
+        colspan: 2,
-  {
+        height: 30,
-    rowId: 16,
+        textAlign: 'center',
-    rowTitle: 16,
+        fontSize: 16,
-    cells: [],
+        fontStyle: 'normal',
-  },
+      },
-  {
+      {
-    rowId: 17,
+        cellId: 9037,
-    rowTitle: 17,
+        title: 'length',
-    cells: [],
+        colspan: 0,
-  },
+        height: 30,
-  {
+        textAlign: 'center',
-    rowId: 18,
+        fontSize: 16,
-    rowTitle: 18,
+        fontStyle: 'normal',
-    cells: [],
+      },
-  },
+      {
-  {
+        cellId: 9038,
-    rowId: 19,
+        title: 'width',
-    rowTitle: 19,
+        colspan: 0,
-    cells: [],
+        height: 30,
-  },
+        textAlign: 'center',
-  {
+        fontSize: 16,
-    rowId: 20,
+        fontStyle: 'normal',
-    rowTitle: 20,
+      },
-    cells: [],
+      {
-  },
+        cellId: 9039,
-  {
+        title: 'thickness',
-    rowId: 21,
+        colspan: 0,
-    rowTitle: 21,
+        height: 30,
-    cells: [],
+        textAlign: 'center',
-  },
+        fontSize: 16,
-  {
+        fontStyle: 'normal',
-    rowId: 22,
+      },
-    rowTitle: 22,
+      {
-    cells: [],
+        cellId: 9040,
-  },
+        title: 'quantity',
-  {
+        colspan: 0,
-    rowId: 23,
+        height: 30,
-    rowTitle: 23,
+        textAlign: 'center',
-    cells: [],
+        fontSize: 16,
-  },
+        fontStyle: 'normal',
-  {
+      },
-    rowId: 24,
+      {
-    rowTitle: 24,
+        cellId: 9041,
-    cells: [],
+        title: 'area',
-  },
+        colspan: 0,
-  {
+        height: 30,
-    rowId: 25,
+        textAlign: 'center',
-    rowTitle: 25,
+        fontSize: 16,
-    cells: [],
+        fontStyle: 'normal',
-  },
+      },
-  {
+      {
-    rowId: 26,
+        cellId: 9042,
-    rowTitle: 26,
+        title: 'mutation',
-    cells: [],
+        colspan: 0,
-  },
+        height: 30,
-  {
+        textAlign: 'center',
-    rowId: 27,
+        fontSize: 16,
-    rowTitle: 27,
+        fontStyle: 'normal',
-    cells: [],
+      },
-  },
+      {
-  {
+        cellId: 9043,
-    rowId: 28,
+        title: 'shape',
-    rowTitle: 28,
+        colspan: 0,
-    cells: [],
+        height: 30,
-  },
+        textAlign: 'center',
-  {
+        fontSize: 16,
-    rowId: 29,
+        fontStyle: 'normal',
-    rowTitle: 29,
+      },
-    cells: [],
+      {
+        cellId: 9044,
+        title: 'direction',
+        colspan: 3,
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 9045,
+        title: 'stripe',
+        colspan: 2,
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+      {
+        cellId: 9046,
+        title: 'boardAddOn',
+        colspan: 5,
+        height: 30,
+        textAlign: 'center',
+        fontSize: 16,
+        fontStyle: 'normal',
+      },
+    ],
   },
+  { rowId: 8, rowTitle: '8', cells: [] },
+  { rowId: 9, rowTitle: '9', cells: [] },
+  { rowId: 10, rowTitle: '10', cells: [] },
+  { rowId: 11, rowTitle: '11', cells: [] },
+  { rowId: 12, rowTitle: '12', cells: [] },
+  { rowId: 13, rowTitle: '13', cells: [] },
+  { rowId: 14, rowTitle: '14', cells: [] },
+  { rowId: 15, rowTitle: '15', cells: [] },
+  { rowId: 16, rowTitle: '16', cells: [] },
+  { rowId: 17, rowTitle: '17', cells: [] },
+  { rowId: 18, rowTitle: '18', cells: [] },
+  { rowId: 19, rowTitle: '19', cells: [] },
+  { rowId: 20, rowTitle: '20', cells: [] },
+  { rowId: 21, rowTitle: '21', cells: [] },
+  { rowId: 22, rowTitle: '22', cells: [] },
+  { rowId: 23, rowTitle: '23', cells: [] },
+  { rowId: 24, rowTitle: '24', cells: [] },
+  { rowId: 25, rowTitle: '25', cells: [] },
+  { rowId: 26, rowTitle: '26', cells: [] },
+  { rowId: 27, rowTitle: '27', cells: [] },
+  { rowId: 28, rowTitle: '28', cells: [] },
+  { rowId: 29, rowTitle: '29', cells: [] },
 ];
 
 export default initialTemplateData;

src/components/reportTemplate/ReportTemplate.vue

@@ -18,6 +18,10 @@
         <button @click="addCell()">添加列</button>
         <button @click="deleteCell()">删除列</button>
       </div>
+      <div class='td-tool'>
+        <button @click="copySingleRow(selectedRow)">复制行</button>
+        <button @click="pasteSingleRow(selectedRow)">粘贴行</button>
+      </div>
       <div>
         <label>表头:</label><input type="text" v-model="inputTitle"><br>
         <label>宽度:</label><input type="number" v-model="inputColspan"><br>
@@ -49,10 +53,11 @@
           <label>行ID:</label>
           <span>{{selectedRow}}</span><br>
         </div>
-        {{this.infos}}
+          {{this.infos}}
+
+        </div>
       </div>
     </div>
-  </div>
 
 </template>
 <script lang="ts">
@@ -61,17 +66,21 @@ import initialTemplateData from '@/assets/templateInitialData'; // report templa
 import startUpRowColumn from '@/assets/startUpRowColumn'; // report template for testing
 import data from '@/assets/data'; //  userdata for testing use
 import reportCell from './reportCell.vue';
+import test from './orderTitle.vue';
 
 let rowId = 29; // this figure is for testing use
-let cellId = 9025; // this figure is for testing use
+let cellId = 9046; // this figure is for testing use
 let undoRodoPointer = -1;
 let isundoOrRedoClick = false;
 let isUpdateInfos = true;
+let copiedRowHolder: any;
+
 export default Vue.extend({
-  components: { reportCell },
+  components: { reportCell, test },
   data(): {
     infos: Array<{
       rowId: number;
+      rowTitle: string;
       cells: Array<{
         cellId: number;
         title: string;
@@ -82,6 +91,8 @@ export default Vue.extend({
         fontStyle: string;
       }>;
     }>;
+    data: any;
+
     selectedRow: number;
     selectedCell: number;
     inputTitle: string;
@@ -104,6 +115,7 @@ export default Vue.extend({
   } {
     return {
       infos: startUpRowColumn,
+      data,
       selectedRow: 0,
       selectedCell: 9000,
       inputTitle: '',
@@ -131,6 +143,7 @@ export default Vue.extend({
         isUpdateInfos = true;
         return this.infos;
       }
+      // undo的时候 给this.infos 从新赋值之后 所有user input 都感知不到。
       for (const row of this.infos) {
         for (const cellKey in row.cells) {
           if (row.cells[cellKey].cellId === this.selectedCell) {
@@ -153,8 +166,9 @@ export default Vue.extend({
           JSON.stringify(this.infos)
       ) {
         this.recordHistory.push(JSON.stringify(this.infos));
+      } else {
+        isundoOrRedoClick = false;
       }
-
       return this.infos;
     },
   },
@@ -184,6 +198,7 @@ export default Vue.extend({
           if (this.selectedRow === this.infos[index].rowId) {
             this.infos.splice(Number(index), 0, {
               rowId: (rowId += 1),
+              rowTitle: rowId.toString(),
               cells: [],
             });
             this.selectedRow = 0;
@@ -193,6 +208,7 @@ export default Vue.extend({
       } else {
         this.infos.push({
           rowId: (rowId += 1),
+          rowTitle: rowId.toString(),
           cells: [],
         });
       }
@@ -236,10 +252,38 @@ export default Vue.extend({
       }
       this.selectedCell = 9000;
     },
+    copySingleRow(Id: number) {
+      if (Id) {
+        copiedRowHolder = JSON.parse(
+          JSON.stringify(
+            this.infos.filter((eachRow) => eachRow.rowId === Id),
+          )[0],
+        );
+
+        copiedRowHolder.rowId = ++rowId;
+
+        for (const cell of copiedRowHolder.cells) {
+          cell.cellId = ++cellId;
+        }
+      } else {
+        alert('请选择要复制的行');
+      }
+    },
+    pasteSingleRow(Id: number): void {
+      if (Id) {
+        for (const eachRow in this.infos) {
+          if (this.infos[eachRow].rowId === Id) {
+            this.infos.splice(Number(eachRow), 1, copiedRowHolder);
+          }
+        }
+      } else {
+        alert('请选择要粘贴的行');
+      }
+    },
     rowClickHandler(row: any): void {
       this.selectedRow = row.rowId;
     },
-    undoHandler() {
+    undoHandler(): void {
       if (undoRodoPointer === -1) {
         undoRodoPointer = this.recordHistory.length - 1;
       }
@@ -247,12 +291,10 @@ export default Vue.extend({
       if (undoRodoPointer === 0) {
         return;
       }
-
       this.infos = JSON.parse(this.recordHistory[(undoRodoPointer -= 1)]);
       isundoOrRedoClick = true;
       isUpdateInfos = false;
     },
-
     redoHandler() {
       if (undoRodoPointer === -1) {
         undoRodoPointer = this.recordHistory.length - 1;
@@ -266,58 +308,148 @@ export default Vue.extend({
       isundoOrRedoClick = true;
       isUpdateInfos = false;
     },
-    // for testing use -----import data from other file
     importData() {
-      for (const row of this.infos) {
+      const addOrderTitle = () => {
-        for (const cell of row.cells) {
+        let foundMatchedString = false;
-          // userdata for loop
+        for (const row of this.infos) {
-          for (const userData in this.importedData) {
+          for (const cell of row.cells) {
-            if (userData + ':' === cell.title) {
+            for (const dataKey in data) {
-              cell.title += this.importedData[userData];
+              if (dataKey === cell.title) {
-            }
+                foundMatchedString = true;
-          }
+                cell.title = this.data[dataKey];
-          for (const boards of this.importedData.boards) {
-            for (const board in boards) {
-              if (board + ':' === cell.title) {
-                cell.title += boards[board];
               }
             }
           }
         }
-      }
+        return foundMatchedString;
-      for (const row of this.infos) {
+      };
-        // get each cell
+      const addBanCaiHeader = (board: any) => {
-        const borderInfo: any = this.importedData.boards[0].boardInfos;
+        for (const row of this.infos) {
-        for (const details of borderInfo) {
+          for (const cell of row.cells) {
-          const tem: any[] = [];
+            if (board.hasOwnProperty(cell.title)) {
-          for (const each of Object.keys(details)) {
+              cell.title = board[cell.title];
-            for (const cell of row.cells) {
+            }
-              if (each === cell.title) {
+          }
-                tem.push({
+        }
-                  cellId: (cellId += 1),
+      };
-                  title: details[each],
+      const addBanCaiBody = (board: any) => {
-                  colspan: cell.colspan,
+        const banCaiRowsHolder = [];
-                  height: 30,
+        let index = 0;
-                  textAlign: 'center',
+        for (const orderInfoDetails of board.boardInfos) {
-                  fontSize: 16,
+          const banCaiCellsHolder = [];
-                  fontStyle: 'normal',
+          for (const eachDetail of Object.keys(orderInfoDetails)) {
-                });
+            // eachDetail === 每一条板材的信息
+            for (const row of this.infos) {
+              for (const cell of row.cells) {
+                if (eachDetail === cell.title) {
+                  index = this.infos.indexOf(row);
+                  banCaiCellsHolder.push({
+                    cellId: (cellId += 1),
+                    title: orderInfoDetails[eachDetail],
+                    colspan: cell.colspan,
+                    height: 30,
+                    textAlign: 'center',
+                    fontSize: 16,
+                    fontStyle: 'normal',
+                  });
+                }
               }
             }
           }
-          if (tem.length) {
+          banCaiRowsHolder.push({
-            for (const eachRow of this.infos) {
+            rowId: (rowId += 1),
-              if (!eachRow.cells.length) {
+            rowTitle: rowId.toString(),
-                eachRow.cells = eachRow.cells.concat(tem);
+            cells: banCaiCellsHolder,
-                break;
+          });
+        }
+
+        for (const banCaiRow of banCaiRowsHolder) {
+          this.infos.splice(
+            index + 1 + banCaiRowsHolder.indexOf(banCaiRow),
+            0,
+            banCaiRow,
+          );
+        }
+        this.infos.splice(index, 1); // 删除matched 的字段
+      };
+      const copyBanCaiHeader = () => {
+        const matchedRowIdHolder = [];
+
+        for (const row of this.infos) {
+          for (const cell of row.cells) {
+            if (data.boards[0].hasOwnProperty(cell.title)) {
+              if (matchedRowIdHolder.indexOf(this.infos.indexOf(row)) === -1) {
+                matchedRowIdHolder.push(this.infos.indexOf(row));
+              }
+            } else if (
+              data.boards[0].boardInfos[0].hasOwnProperty(cell.title)
+            ) {
+              if (matchedRowIdHolder.indexOf(this.infos.indexOf(row)) === -1) {
+                matchedRowIdHolder.push(this.infos.indexOf(row));
               }
             }
           }
         }
+
+        const matchedRowHolder = [];
+
+        for (let index = 0; index <= matchedRowIdHolder[1]; index += 1) {
+          if (
+            index >= matchedRowIdHolder[0] &&
+            index <= matchedRowIdHolder[1]
+          ) {
+            const matchedRow = JSON.parse(JSON.stringify(this.infos[index]));
+            matchedRow.rowId = ++rowId;
+            for (const cell of matchedRow.cells) {
+              cell.cellId = ++cellId;
+            }
+            matchedRowHolder.push(matchedRow);
+          }
+        }
+        return matchedRowHolder;
+      };
+      const pasteBanCaiHeader = (
+        items: Array<{
+          rowId: number;
+          rowTitle: string;
+          cells: Array<{
+            cellId: number;
+            title: string;
+            colspan: number;
+            height: number;
+            textAlign: string;
+            fontSize: number;
+            fontStyle: string;
+          }>;
+        }>,
+      ) => {
+        for (const item of items) {
+          for (const row of this.infos) {
+            if (row.cells.length === 0) {
+              this.infos.splice(this.infos.indexOf(row), 1, item);
+              break;
+            }
+          }
+        }
+      };
+      if (addOrderTitle()) {
+        addOrderTitle();
+        for (const board of data.boards) {
+          const x = copyBanCaiHeader();
+          addBanCaiHeader(board);
+          addBanCaiBody(board);
+          if (data.boards.indexOf(board) !== data.boards.length - 1) {
+            pasteBanCaiHeader(x);
+          }
+        }
+      } else {
+        alert('没有找到匹配的orderTitle 字段');
       }
     },
+
     // for testing use -----import data from other file
     importTemplate() {
+      // 暂时排查不到colspan是string类型
       this.infos = initialTemplateData;
     },
   },
@@ -375,5 +507,60 @@ table {
 }
 </style>
 
+/*
+importData() {
+      x += 1;
+      for (const row of this.infos) {
+        for (const cell of row.cells) {
+          // userdata for loop
+          for (const userData in this.importedData) {
+            if (userData + ':' === cell.title) {
+              cell.title += this.importedData[userData];
+            }
+          }
+          for (const boards of this.importedData.boards) {
+            for (const board in boards) {
+              if (board + ':' === cell.title) {
+                cell.title += boards[board];
+              }
+            }
+          }
+        }
+      }
+      for (const row of this.infos) {
+        // get each cell
+        console.log(x);
+        const borderInfo: any = this.importedData.boards[x].boardInfos;
+        for (const details of borderInfo) {
+          const tem: any[] = [];
+          for (const each of Object.keys(details)) {
+            for (const cell of row.cells) {
+              if (each === cell.title) {
+                tem.push({
+                  cellId: (cellId += 1),
+                  title: details[each],
+                  colspan: cell.colspan,
+                  height: 30,
+                  textAlign: 'center',
+                  fontSize: 16,
+                  fontStyle: 'normal',
+                });
+              }
+            }
+          }
+          if (tem.length) {
+            for (const eachRow in this.infos) {
+              if (!this.infos[eachRow].cells.length) {
+                this.infos[eachRow].cells = this.infos[eachRow].cells.concat(
+                  tem,
+                );
+                break;
+              }
+            }
+          }
+        }
+      }
+    },
+*/
 
 

src/components/reportTemplate/orderTitle.vue

@@ -0,0 +1,13 @@
+<template>
+    <table>
+        <tr>
+            <td>i am order title</td>
+        </tr>
+    </table>
+
+</template>
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({});
+</script>
+