cannot sense inputTitle after undo
This commit is contained in:
parent
966c8bfd0b
commit
dcaaf43792
@ -19,7 +19,6 @@
|
||||
<button @click="deleteCell()">删除列</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>
|
||||
@ -41,8 +40,8 @@
|
||||
<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="importTemplate">导入设计样式</button>
|
||||
<button @click="importData">导入数据</button><br>
|
||||
<label>单元ID:</label>
|
||||
@ -62,52 +61,76 @@ 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';
|
||||
const infosFormat: Array<{
|
||||
rowId: number;
|
||||
cells: Array<{
|
||||
cellId: number;
|
||||
title: string;
|
||||
colspan: number;
|
||||
height: number;
|
||||
|
||||
let rowId = 29; // this figure is for testing use
|
||||
let cellId = 9025; // this figure is for testing use
|
||||
let undoRodoPointer = -1;
|
||||
let isundoOrRedoClick = false;
|
||||
let isUpdateInfos = true;
|
||||
export default Vue.extend({
|
||||
components: { reportCell },
|
||||
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;
|
||||
}>;
|
||||
}> = startUpRowColumn;
|
||||
const selectedRowFormat: number = 0;
|
||||
const selectedCellFormat: number = 9000;
|
||||
const inputTitleFormat: string = '';
|
||||
const inputColspanFormat: number = 0;
|
||||
const recordHistoryFormat: string[] = [];
|
||||
const textAlignFormat: string = '';
|
||||
const fontSizeFormat: number = 0;
|
||||
const fontStyleFormat: string = '';
|
||||
const importedDataFormat: any = data;
|
||||
let rowId = 29;
|
||||
let cellId = 9025;
|
||||
const initialInputColspan = 0;
|
||||
const initialInputHeight = 30;
|
||||
let undoRodoPointer = -1;
|
||||
let undoOrRedo = false;
|
||||
export default Vue.extend({
|
||||
components: { reportCell },
|
||||
data() {
|
||||
recordHistory: string[];
|
||||
importedData: any;
|
||||
currentCell: {
|
||||
cellId: number;
|
||||
title: string;
|
||||
colspan: number;
|
||||
height: number;
|
||||
textAlign: string;
|
||||
fontSize: number;
|
||||
fontStyle: string;
|
||||
};
|
||||
} {
|
||||
return {
|
||||
infos: infosFormat,
|
||||
selectedRow: selectedRowFormat,
|
||||
selectedCell: selectedCellFormat,
|
||||
inputTitle: inputTitleFormat,
|
||||
inputColspan: inputColspanFormat,
|
||||
inputHeight: initialInputHeight,
|
||||
textAlign: textAlignFormat,
|
||||
fontSize: fontSizeFormat,
|
||||
fontStyle: fontStyleFormat,
|
||||
recordHistory: recordHistoryFormat,
|
||||
importedData: importedDataFormat,
|
||||
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;
|
||||
}
|
||||
for (const row of this.infos) {
|
||||
for (const cellKey in row.cells) {
|
||||
if (row.cells[cellKey].cellId === this.selectedCell) {
|
||||
@ -123,25 +146,19 @@ export default Vue.extend({
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// will not add to recordHistory if this.info is update by redo/undo button
|
||||
if (
|
||||
undoOrRedo === false &&
|
||||
isundoOrRedoClick === false &&
|
||||
this.recordHistory[this.recordHistory.length - 1] !==
|
||||
JSON.stringify(this.infos)
|
||||
) {
|
||||
this.recordHistory.push(JSON.stringify(this.infos));
|
||||
|
||||
// console.log(
|
||||
// 'computed 长度',
|
||||
// this.recordHistory,
|
||||
// '长度',
|
||||
// this.recordHistory.length,
|
||||
// );
|
||||
}
|
||||
|
||||
return this.infos;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
getCellFromChildren(cell: {
|
||||
cellId: number;
|
||||
@ -152,20 +169,21 @@ export default Vue.extend({
|
||||
fontSize: number;
|
||||
fontStyle: string;
|
||||
}): 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;
|
||||
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: (this.selectedRow += 1),
|
||||
rowId: (rowId += 1),
|
||||
cells: [],
|
||||
});
|
||||
this.selectedRow = 0;
|
||||
@ -184,6 +202,7 @@ export default Vue.extend({
|
||||
return alert('请选择要删除行');
|
||||
}
|
||||
this.infos = this.infos.filter((item) => item.rowId !== this.selectedRow);
|
||||
this.selectedRow = 0;
|
||||
},
|
||||
addCell() {
|
||||
if (!this.selectedRow) {
|
||||
@ -194,8 +213,8 @@ export default Vue.extend({
|
||||
row.cells.push({
|
||||
cellId: (cellId += 1),
|
||||
title: '列' + cellId,
|
||||
colspan: initialInputColspan,
|
||||
height: initialInputHeight,
|
||||
colspan: 0,
|
||||
height: 30,
|
||||
textAlign: 'center',
|
||||
fontSize: 16,
|
||||
fontStyle: 'normal',
|
||||
@ -204,7 +223,8 @@ export default Vue.extend({
|
||||
}
|
||||
},
|
||||
deleteCell() {
|
||||
if (!this.selectedCell) {
|
||||
// 9000 is initial cell Id.
|
||||
if (this.selectedCell === 9000) {
|
||||
return alert('请选择要删除的单元');
|
||||
}
|
||||
for (const row of this.infos) {
|
||||
@ -214,34 +234,39 @@ export default Vue.extend({
|
||||
}
|
||||
}
|
||||
}
|
||||
this.selectedCell = 9000;
|
||||
},
|
||||
rowClickHandler(row: any): void {
|
||||
this.selectedRow = row.rowId;
|
||||
},
|
||||
undoHandler() {
|
||||
if (undoRodoPointer < 0) {
|
||||
if (undoRodoPointer === -1) {
|
||||
undoRodoPointer = this.recordHistory.length - 1;
|
||||
}
|
||||
// console.log('总长度', this.recordHistory.length, '指针', undoRodoPointer);
|
||||
// 赋值不成功
|
||||
this.infos = JSON.parse(this.recordHistory[undoRodoPointer - 1]);
|
||||
// this is to avoid JSON error on console log
|
||||
if (undoRodoPointer === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(JSON.parse(this.recordHistory[undoRodoPointer - 1]));
|
||||
|
||||
console.log(this.infos);
|
||||
|
||||
undoOrRedo = true;
|
||||
this.infos = JSON.parse(this.recordHistory[(undoRodoPointer -= 1)]);
|
||||
isundoOrRedoClick = true;
|
||||
isUpdateInfos = false;
|
||||
},
|
||||
|
||||
redoHandler() {
|
||||
if (undoRodoPointer < 0) {
|
||||
if (undoRodoPointer === -1) {
|
||||
undoRodoPointer = this.recordHistory.length - 1;
|
||||
}
|
||||
// console.log('总长度', this.recordHistory.length, '指针', undoRodoPointer);
|
||||
// this is to avoid JSON error on console log
|
||||
|
||||
if (undoRodoPointer === this.recordHistory.length - 1) {
|
||||
return;
|
||||
}
|
||||
this.infos = JSON.parse(this.recordHistory[(undoRodoPointer += 1)]);
|
||||
undoOrRedo = true;
|
||||
isundoOrRedoClick = true;
|
||||
isUpdateInfos = false;
|
||||
},
|
||||
// for testing use -----import data from other file
|
||||
importData() {
|
||||
for (const row of this.infos) {
|
||||
for (const cell of row.cells) {
|
||||
@ -262,7 +287,6 @@ export default Vue.extend({
|
||||
}
|
||||
for (const row of this.infos) {
|
||||
// get each cell
|
||||
|
||||
const borderInfo: any = this.importedData.boards[0].boardInfos;
|
||||
for (const details of borderInfo) {
|
||||
const tem: any[] = [];
|
||||
@ -292,6 +316,7 @@ export default Vue.extend({
|
||||
}
|
||||
}
|
||||
},
|
||||
// for testing use -----import data from other file
|
||||
importTemplate() {
|
||||
this.infos = initialTemplateData;
|
||||
},
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<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">
|
||||
|
||||
@ -1,40 +0,0 @@
|
||||
<template>
|
||||
<tr @click="rowClickHandler" :class="{active:isActive}">
|
||||
<reportCell></reportCell>
|
||||
</tr>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import reportCell from './reportCell.vue';
|
||||
|
||||
export default Vue.extend({
|
||||
props: ['rowId'],
|
||||
components: { reportCell },
|
||||
data: function() {
|
||||
return {
|
||||
isActive: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
rowClickHandler: function() {
|
||||
this.isActive = !this.isActive;
|
||||
console.log(this.rowId);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
tr {
|
||||
border: 1px black solid;
|
||||
}
|
||||
.active {
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
/*
|
||||
|
||||
@click="rowClickHandler(row.rowId,$event)" v-bind:class="{active:row.rowId==selectedRow}"
|
||||
*/
|
||||
Loading…
Reference in New Issue
Block a user