Commit ab64f8b3 authored by 李维's avatar 李维

部分完成表单部分

圈出正确单词部分还有问题
parent 7396c13d
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
margin: auto; margin: auto;
width: 95%; width: 95%;
height: 35vw; height: 100vw;
border: 2px dashed #ddd; border: 2px dashed #ddd;
border-radius: 0.5rem; border-radius: 0.5rem;
......
...@@ -12,7 +12,7 @@ import { ...@@ -12,7 +12,7 @@ import {
} from '@angular/core'; } from '@angular/core';
import { JsonPipe } from '@angular/common'; import { JsonPipe } from '@angular/common';
import { removeItemFromArr } from '../play/Unit'; import { removeItemFromArr } from '../play/Unit';
import { NzMessageService } from 'ng-zorro-antd';
@Component({ @Component({
selector: 'app-form', selector: 'app-form',
...@@ -26,10 +26,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni ...@@ -26,10 +26,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni
// 储存对象 // 储存对象
item; item;
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) { // 表格编辑缓存
editCache: { [key: string]: { edit: boolean; data } } = {};
} constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef, private nzMessageService: NzMessageService) {
}
ngOnInit() { ngOnInit() {
this.item = {}; this.item = {};
...@@ -44,26 +46,137 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni ...@@ -44,26 +46,137 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni
}, this.saveKey); }, this.saveKey);
} }
ngAfterViewInit() { saveHotZone(group, e) {
console.log('e: ', e);
const {bgItem, hotZoneItemArr} = e;
group.bgItem = bgItem;
group.hotZoneItemArr = hotZoneItemArr;
this.save();
}
// 添加热区配置
addHotZoneConfig() {
if(!this.item.hotZoneConfigArr) {
this.item.hotZoneConfigArr = [];
}
this.item.hotZoneConfigArr.push({
linkHotZoneIndex: 1,
contentList: [
{
index: 0,
text: "item-1"
}
]
})
this.save()
} }
ngOnChanges() { // 添加热区内容配置
addHotZoneConfigItem(it) {
console.log(it.contentList)
if(!it.contentList) {
it.contentList = [];
}
it.contentList = [
...it.contentList,
this.getDefaultConfigContentItem()
];
const lastIndex = it.contentList.length - 1;
const lastItem = it.contentList[lastIndex];
this.startHotZoneConfigEdit(lastIndex, lastItem);
this.save();
} }
ngOnDestroy() { // 删除热区内容配置
deleteHotZoneConfigItem(it, index) {
if(!it.contentList) {
it.contentList = [];
}
it.contentList.splice(index, 1);
it.contentList = [
...it.contentList
];
this.save();
} }
saveHotZone(group, e) { // 获取默认热区内容配置
console.log('e: ', e); getDefaultConfigContentItem() {
const {bgItem, hotZoneItemArr} = e; return {
group.bgItem = bgItem; text: "",
group.hotZoneItemArr = hotZoneItemArr; image_url: "",
hotZoneIndex: null,
score: 0
}
}
// 开始编辑表格的一行
startHotZoneConfigEdit(id: number, originData) {
if(!this.editCache[id + '']) {
this.editCache[id + ''] = {
edit: true,
data: { ...originData }
};
} else {
this.editCache[id + ''].edit = true;
}
}
// 取消表格一行的编辑
cancelHotZoneConfigEdit(id: number, originData): void {
this.editCache[id + ''] = {
data: { ...originData },
edit: false
};
}
// 保存表格内容
saveHotZoneConfigEdit(id: number, it): void {
Object.assign(it.contentList[id], this.editCache[id + ''].data);
this.editCache[id + ''].edit = false;
this.save(); this.save();
} }
// 添加分数组
addScoreConfig() {
if(!this.item.scoreConfigArr) {
this.item.scoreConfigArr = [];
}
this.item.scoreConfigArr.push({
linkHotZoneIndex: 1
})
this.save()
}
// 复制数据
copyChangeData() {
const jsonData = this.item;
const oInput = document.createElement('input');
oInput.value = JSON.stringify(jsonData);
document.body.appendChild(oInput);
oInput.select(); // 选择对象
document.execCommand('Copy'); // 执行浏览器复制命令
document.body.removeChild(oInput);
this.nzMessageService.success('复制成功');
}
ngAfterViewInit() {
}
ngOnChanges() {
}
ngOnDestroy() {
}
/** /**
* 储存图片数据 * 储存图片数据
* @param e * @param e
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment