601 lines
17 KiB
Plaintext
601 lines
17 KiB
Plaintext
<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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |