Commit ab64f8b3 authored by 李维's avatar 李维

部分完成表单部分

圈出正确单词部分还有问题
parent 7396c13d
......@@ -13,7 +13,7 @@
margin: auto;
width: 95%;
height: 35vw;
height: 100vw;
border: 2px dashed #ddd;
border-radius: 0.5rem;
......
......@@ -12,7 +12,7 @@ import {
} from '@angular/core';
import { JsonPipe } from '@angular/common';
import { removeItemFromArr } from '../play/Unit';
import { NzMessageService } from 'ng-zorro-antd';
@Component({
selector: 'app-form',
......@@ -26,10 +26,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni
// 储存对象
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() {
this.item = {};
......@@ -44,26 +46,137 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy, AfterViewIni
}, 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);
const {bgItem, hotZoneItemArr} = e;
group.bgItem = bgItem;
group.hotZoneItemArr = hotZoneItemArr;
// 获取默认热区内容配置
getDefaultConfigContentItem() {
return {
text: "",
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();
}
// 添加分数组
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
......
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