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;
......
<div class="model-content">
<!-- <app-formula-input style="position: absolute;right:0;" [(ngfModel)]="item.title" (ngfBlur)="save()"></app-formula-input><br>
<app-formula-input [(ngfModel)]="item.title" (ngfBlur)="save()"></app-formula-input><br> -->
<div style="padding: 20px;">
<h2>页面参数</h2>
<div style="font-size: 16px; border: 2px solid #ccc; border-radius: 10px; padding: 10px; width: 500px;">
<div style="display: flex; justify-content: center; align-items: center;">
<span style="width: 120px; margin-right: 20px;" align="right">page_id: </span>
<input type="text" nz-input [(ngModel)]="item.page_id" (blur)="save()" style="margin-top: 5px">
</div>
<div style="display: flex; justify-content: center; align-items: center;">
<span style="width: 120px; margin-right: 20px;" align="right">book_id: </span>
<input type="text" nz-input [(ngModel)]="item.book_id" (blur)="save()" style="margin-top: 5px">
</div>
<div style="display: flex; justify-content: center; align-items: center;">
<span style="width: 120px; margin-right: 20px;" align="right">part_name: </span>
<input type="text" nz-input [(ngModel)]="item.part_name" (blur)="save()" style="margin-top: 5px">
</div>
</div>
<h2 style="margin-top: 20px">音频配置:</h2>
<div style="margin: 30px;"></div>
<h2 >热区配置:</h2>
<h2 >热区位置配置:</h2>
<app-custom-hot-zone
[bgItem]="item.bgItem"
[hotZoneItemArr]="item.hotZoneItemArr"
......@@ -29,9 +11,162 @@
>
</app-custom-hot-zone>
<div style="margin-top: 30px; width: 200px; height: 50px; border: 1px solid #ccc ; border-radius: 5px; display: flex; align-items: center; justify-content: center;">
<h2 style="margin-top: 10px;">热区内容配置:</h2>
<div style="font-size: 16px; border: 2px solid #ccc; border-radius: 10px; padding: 10px;">
<div *ngFor="let it of item.hotZoneConfigArr; let i = index" style="border: 2px dashed #ddd; border-radius: 5px; padding: 10px; margin-bottom: 10px; position: relative;">
<span style="position: absolute; right: 50px; top: 10px; font-size: 64px;">{{i + 1}}</span>
<div style="margin: 10px 10px;">
<span style="display: inline-block; text-align: right; width: 100px;">关联热区:</span>
<nz-select [(ngModel)]="it.linkHotZoneIndex" style="width: 50px;" (ngModelChange)="save()">
<nz-option *ngFor="let itOption of item.hotZoneItemArr" [nzValue]="itOption.index" [nzLabel]="itOption.index + 1"></nz-option>
</nz-select>
<span style="margin-left: 10px;">热区名:{{item.hotZoneItemArr && item.hotZoneItemArr[it.linkHotZoneIndex] ? item.hotZoneItemArr[it.linkHotZoneIndex].itemName : "未配置"}}</span>
</div>
<div style="margin: 10px 10px;">
<span style="display: inline-block; text-align: right; width: 100px;">热区内容:</span>
<nz-select [(ngModel)]="it.hotZoneType" style="width: 100px;" (ngModelChange)="save()">
<nz-option nzValue="0" nzLabel="文字选项"></nz-option>
<nz-option nzValue="1" nzLabel="图片选项"></nz-option>
<nz-option nzValue="2" nzLabel="播放音频"></nz-option>
<nz-option nzValue="3" nzLabel="热区选项"></nz-option>
<nz-option nzValue="4" nzLabel="文字输入"></nz-option>
<nz-option nzValue="5" nzLabel="语音评测" nzDisabled></nz-option>
</nz-select>
<div *ngIf="it.hotZoneType == '0' || it.hotZoneType == '1' || it.hotZoneType == '3'" style="padding: 10px 0 10px 100px;">
<div style="margin-bottom: 16px;">
<span style="font-size: 14px; color: #000000d9;">内容清单</span>
<button nz-button nzSize="small" nzType="primary" style="float: right;" (click)="addHotZoneConfigItem(it)">
<span nz-icon nzType="plus-circle"></span>
添加内容
</button>
</div>
<nz-table #contentTable [nzData]="it.contentList" [nzShowPagination]="false">
<thead>
<tr>
<th nzWidth="100px" nzAlign="center">序号</th>
<th nzWidth="200px" nzAlign="center">正确答案</th>
<th *ngIf="it.hotZoneType == '0'">文字</th>
<th *ngIf="it.hotZoneType == '1'">图片</th>
<th *ngIf="it.hotZoneType == '3'">热区索引</th>
<th nzWidth="10%">操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of contentTable.data; let i = index;">
<ng-container *ngIf="!(editCache[i] && editCache[i].edit); else editTemplate">
<td nzWidth="100px" nzAlign="center">{{ i + 1 }}</td>
<td nzWidth="200px" nzAlign="center">{{ data.isCorrect?'正确':'错误' }}</td>
<td *ngIf="it.hotZoneType == '0'">{{ data.text }}</td>
<td *ngIf="it.hotZoneType == '1'">
<img *ngIf="data.image_url" [src]="data.image_url" width="200" height="200" style="object-fit: contain;"/>
<span *ngIf="!data.image_url">暂无图片</span>
</td>
<td *ngIf="it.hotZoneType == '3'">
<span style="margin-left: 10px;">索引: {{data.selectHotZoneIndex + 1}} 热区名:{{item.hotZoneItemArr && item.hotZoneItemArr[data.selectHotZoneIndex] ? item.hotZoneItemArr[data.selectHotZoneIndex].itemName : "未配置"}}</span>
</td>
<td nzWidth="10%">
<a (click)="startHotZoneConfigEdit(i, data)">编辑</a>
<nz-divider nzType="vertical"></nz-divider>
<a (click)="deleteHotZoneConfigItem(it, i)">删除</a>
</td>
</ng-container>
<ng-template #editTemplate>
<td nzWidth="100px" nzAlign="center">{{ i + 1 }}</td>
<td nzWidth="200px" nzAlign="center">
<label nz-checkbox [(ngModel)]="editCache[i].data.isCorrect"></label>
</td>
<td *ngIf="it.hotZoneType == '0'">
<input type="text" nz-input [(ngModel)]="editCache[i].data.text" />
</td>
<td *ngIf="it.hotZoneType == '1'">
<div style="width: 200px; height: 112px;">
<app-upload-image-with-preview
[picUrl]="editCache[i].data.image_url"
(imageUploaded)="onImageUploadSuccess($event, 'image_url', editCache[i].data)">
</app-upload-image-with-preview>
</div>
</td>
<td *ngIf="it.hotZoneType == '3'">
<nz-select [(ngModel)]="data.selectHotZoneIndex" style="width: 50px;" (ngModelChange)="save()">
<nz-option *ngFor="let itOption of item.hotZoneItemArr" [nzValue]="itOption.index" [nzLabel]="itOption.index + 1"></nz-option>
</nz-select>
<span style="margin-left: 10px;">热区名:{{item.hotZoneItemArr && item.hotZoneItemArr[data.selectHotZoneIndex] ? item.hotZoneItemArr[data.selectHotZoneIndex].itemName : "未配置"}}</span>
</td>
<td nzWidth="10%">
<a (click)="saveHotZoneConfigEdit(i, it)" class="save">保存</a>
<nz-divider nzType="vertical"></nz-divider>
<a nz-popconfirm nzPopconfirmTitle="Sure to cancel?" (nzOnConfirm)="cancelHotZoneConfigEdit(i, data)">取消</a>
</td>
</ng-template>
</tr>
</tbody>
</nz-table>
</div>
<div *ngIf="it.hotZoneType == '2'" style="padding: 10px 0 10px 100px;">
<app-audio-recorder
[audioUrl]="it.audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url', it)"
></app-audio-recorder>
</div>
</div>
<div *ngIf="it.hotZoneType == '4'" style="margin: 10px 10px;">
<span style="display: inline-block; text-align: right; width: 100px;">正确文字:</span>
<input type="text" nz-input [(ngModel)]="it.inputText" (blur)="save" style="display: inline-block; width: 300px;">
</div>
<div style="margin: 10px 10px;">
<span style="display: inline-block; text-align: right; width: 100px;">分数:</span>
<input type="text" nz-input [(ngModel)]="it.score" (blur)="save" style="display: inline-block; width: 150px;">
</div>
</div>
<button nz-button nzType="dashed" (click)="addHotZoneConfig()" class="add-btn">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
添加热区内容配置
</button>
</div>
<h2 style="margin-top: 10px;">分数配置:</h2>
<div style="font-size: 16px; border: 2px solid #ccc; border-radius: 10px; padding: 10px;">
<div *ngFor="let it of item.scoreConfigArr; let i = index" style="border: 2px dashed #ddd; border-radius: 5px; padding: 10px; margin-bottom: 10px;">
<div style="margin: 10px 10px;">
<span style="display: inline-block; text-align: right; width: 150px;">分数显示热区:</span>
<nz-select [(ngModel)]="it.linkHotZoneIndex" style="width: 50px;" (ngModelChange)="save()">
<nz-option *ngFor="let itOPtion of item.hotZoneItemArr" [nzValue]="itOPtion.index" [nzLabel]="itOPtion.index + 1"></nz-option>
</nz-select>
<span style="margin-left: 10px;">热区名:{{item.hotZoneItemArr && item.hotZoneItemArr[it.linkHotZoneIndex] ? item.hotZoneItemArr[it.linkHotZoneIndex].itemName : "未配置"}}</span>
</div>
<div style="margin: 10px 10px;">
<span style="display: inline-block; text-align: right; width: 150px;">包含分数的热区:</span>
<nz-select [(ngModel)]="it.linkHotZoneIndexArr" nzMode="multiple" style="width: 300px;" (ngModelChange)="save()">
<nz-option *ngFor="let itOPtion of item.hotZoneItemArr" [nzValue]="itOPtion.index" [nzLabel]="itOPtion.index + 1"></nz-option>
</nz-select>
</div>
</div>
<div style="margin: 10px 10px;">
<span style="display: inline-block; text-align: right; width: 100px;">提交按钮:</span>
<nz-select [(ngModel)]="item.submitHotZoneIndex" style="width: 50px;" (ngModelChange)="save()">
<nz-option *ngFor="let itOPtion of item.hotZoneItemArr" [nzValue]="itOPtion.index" [nzLabel]="itOPtion.index + 1"></nz-option>
</nz-select>
<span style="margin-left: 10px;">热区名:{{item.hotZoneItemArr && item.hotZoneItemArr[item.submitHotZoneIndex] ? item.hotZoneItemArr[item.submitHotZoneIndex].itemName : "未配置"}}</span>
</div>
<div style="margin: 10px 10px;">
<span style="display: inline-block; text-align: right; width: 100px;">重做按钮:</span>
<nz-select [(ngModel)]="item.replayHotZoneIndex" style="width: 50px;" (ngModelChange)="save()">
<nz-option *ngFor="let itOPtion of item.hotZoneItemArr" [nzValue]="itOPtion.index" [nzLabel]="itOPtion.index + 1"></nz-option>
</nz-select>
<span style="margin-left: 10px;">热区名:{{item.hotZoneItemArr && item.hotZoneItemArr[item.replayHotZoneIndex] ? item.hotZoneItemArr[item.replayHotZoneIndex].itemName : "未配置"}}</span>
</div>
<button nz-button nzType="dashed" (click)="addScoreConfig()" class="add-btn">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
添加分数组配置
</button>
</div>
<div style="margin-top: 50px; padding-bottom: 100px;">
<div style="width: 200px; height: 50px; border: 1px solid #ccc ; border-radius: 5px; display: flex; align-items: center; justify-content: center; float: left;">
<label nz-checkbox [(ngModel)]="item.isDebug" (ngModelChange)="save()">调试模式</label>
</div>
<button nz-button nzType="primary" (click)="copyChangeData()" style="float: right;"><i nz-icon nzType="copy"></i>复制数据表单</button>
</div>
</div>
</div>
......@@ -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