Commit 93df25a3 authored by Tt's avatar Tt

表单处理完成

parent b44a96ab
<style>
.border-solid {
border: 1px solid #333;
border-radius: 10px;
padding: 20px;
}
.border-dashed {
border: 1px dashed #333;
border-radius: 10px;
padding: 20px;
}
.option-title {
color: #000;
font-size: 18px;
min-width: 70px;
/* margin-right: 10px; */
}
.option-content {
border: 1px dashed #333;
border-radius: 1px;
padding: 20px;
margin-right: 10px;
width: 800px;
}
.option-img {
margin-top: 10px;
}
.option-audio {
margin-top: 10px;
}
.option-text {
margin-top: 10px;
}
.option-time {
margin-top: 10px;
}
.word-type-title {
color: #169BD5;
font-size: 18px;
}
.word-type-option-title {
color: #333;
font-size: 18px;
}
.word-input-title {
color: #333;
font-size: 20px;
}
.btn-blue {
color: #169BD5;
border-color: #169BD5;
}
.btn-red {
color: #f00;
border-color: #f00;
}
.input-place-red::-webkit-input-placeholder {
color: rgba(255, 0, 0, 0.3);
font-size: 12px;
}
</style>
<div class="model-content">
<div nz-row>
......@@ -19,87 +93,106 @@
<nz-form-label [nzSpan]="4">题目音频</nz-form-label>
<nz-form-control [nzSpan]="12">
<app-audio-recorder [audioUrl]="item.questionTextAudio" [_audioName]="item.questionTextAudioName"
(audioUploaded)="onAudioUploadSuccess($event, item, 'questionTextAudio')" (audioName)="onAudioName($event, item, 'questionTextAudioName')">
</app-audio-recorder>
(audioUploaded)="onAudioUploadSuccess($event, item, 'questionTextAudio')" (audioName)="onAudioName($event, item, 'questionTextAudioName')"></app-audio-recorder>
</nz-form-control>
</nz-form-item>
</nz-card>
</div>
</div>
<br />
<!--题目区域-->
<div nz-row>
<div nz-col [nzSpan]="18" [nzOffset]="1">
<nz-card nzTitle="故事图片及完整音频">
<nz-form-item>
<nz-form-label [nzSpan]="4">完整音频</nz-form-label>
<nz-form-control [nzSpan]="12">
<app-audio-recorder [audioUrl]="item.pageAudio" [_audioName]="item.pageAudioName"
(audioUploaded)="onAudioUploadSuccess($event, item, 'pageAudio')" (audioName)="onAudioName($event, item, 'pageAudioName')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="4">故事图片</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.pageImage"
(imageUploaded)="onImageUploadSuccess($event, item, 'pageImage')">
</app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
</nz-card>
</div>
</div>
<br />
<br/>
<!--页面区域-->
<!--题目区域-->
<div nz-row>
<div nz-col [nzSpan]="18" [nzOffset]="1">
<h4 nz-typography>文本内容:</h4>
<div *ngFor="let data of item.sentences; let i=index" style="margin-bottom: 5mm;" nz-col [nzXs]='24'
[nzSm]='24' [nzMd]='24' [nzLg]='24'>
<nz-card nzTitle="文本{{i+1}}" [nzHoverable]="true" [nzExtra]="actionCard">
<nz-form-item>
<nz-form-label [nzSpan]="4">音频</nz-form-label>
<nz-form-control [nzSpan]="14">
<app-audio-recorder [audioUrl]="data.audio" [_audioName]="data.audioName"
(audioUploaded)="onAudioUploadSuccess($event, data, 'audio')" (audioName)="onAudioName($event, data, 'audioName')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="4">
<font style="color: red;">*</font>文本
</nz-form-label>
<nz-form-control [nzSpan]="14">
<textarea nz-input rows="4" [(ngModel)]="data.text" (blur)="save()" placeholder="输入文本内容"></textarea>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="4">录音时间(s)</nz-form-label>
<nz-form-control [nzSpan]="14">
<input nz-input type="text" [(ngModel)]="data.duration" (blur)="save()" placeholder="录音超过时间自动提交成绩">
</nz-form-control>
</nz-form-item>
<div *ngFor="let page of item.pages; let j=index" style="margin-bottom: 5mm;" nz-col [nzXs]='24'
[nzSm]='24' [nzMd]='24' [nzLg]='24'>
<nz-card nzTitle="第{{j+1}}页" [nzHoverable]="true" [nzExtra]="actionCard">
<!--题目区域-->
<div nz-row>
<div nz-col [nzSpan]="18" [nzOffset]="1">
<nz-card nzTitle="故事图片及完整音频">
<nz-form-item>
<nz-form-label [nzSpan]="4">完整音频</nz-form-label>
<nz-form-control [nzSpan]="12">
<app-audio-recorder [audioUrl]="item.pageAudio" [_audioName]="item.pageAudioName"
(audioUploaded)="onAudioUploadSuccess($event, item, 'pageAudio')" (audioName)="onAudioName($event, item, 'pageAudioName')"></app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="4">故事图片</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.pageImage"
(imageUploaded)="onImageUploadSuccess($event, item, 'pageImage')"></app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
</nz-card>
</div>
</div>
<br/>
<!--题目区域-->
<div nz-row>
<div nz-col [nzSpan]="18" [nzOffset]="1">
<h4 nz-typography>文本内容:</h4>
<div *ngFor="let data of page; let i=index" style="margin-bottom: 5mm;" nz-col [nzXs]='24' [nzSm]='24' [nzMd]='24' [nzLg]='24'>
<nz-card nzTitle="文本{{i+1}}" [nzHoverable]="true" [nzExtra]="actionCard">
<nz-form-item>
<nz-form-label [nzSpan]="4">音频</nz-form-label>
<nz-form-control [nzSpan]="14">
<app-audio-recorder [audioUrl]="data.audio" [_audioName]="data.audioName"
(audioUploaded)="onAudioUploadSuccess($event, data, 'audio')" (audioName)="onAudioName($event, data, 'audioName')"></app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="4">
<font style="color: red;">*</font>文本
</nz-form-label>
<nz-form-control [nzSpan]="14">
<textarea nz-input rows="4" [(ngModel)]="data.text" (blur)="save()" placeholder="输入文本内容"></textarea>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="4">录音时间(s)</nz-form-label>
<nz-form-control [nzSpan]="14">
<input nz-input type="text" [(ngModel)]="data.duration" (blur)="save()" placeholder="录音超过时间自动提交成绩">
</nz-form-control>
</nz-form-item>
</nz-card>
<ng-template #actionCard>
<button nz-button nzType="danger" (click)="delCard(item.pages[j],i)">
<i nz-icon nzType="delete" nzTheme="outline"></i>删除
</button>&nbsp;&nbsp;&nbsp;
<button nz-button nzType="default" (click)="copyCard(item.pages[j],i)">
<i nz-icon nzType="copy" nzTheme="outline"></i>复制
</button>
</ng-template>
</div>
</div>
</div>
<br/>
<div nz-row>
<div nz-col [nzSpan]="18" [nzOffset]="1">
<button nz-button nzType="primary" nzSize="large" (click)="addCard(item.pages[j])">
<font style="font-weight: 800;">+增加文本</font>
</button>
</div>
</div>
<br/>
</nz-card>
<ng-template #actionCard>
<button nz-button nzType="danger" (click)="delCard(item,i)">
<button nz-button nzType="danger" (click)="delPage(j)">
<i nz-icon nzType="delete" nzTheme="outline"></i>删除
</button>&nbsp;&nbsp;&nbsp;
<button nz-button nzType="default" (click)="copyCard(item,i)">
<i nz-icon nzType="copy" nzTheme="outline"></i>复制
</button>
</ng-template>
</div>
</div>
</div>
<br />
<div nz-row>
<div nz-col [nzSpan]="18" [nzOffset]="1">
<button nz-button nzType="primary" nzSize="large" (click)="addCard()">
<font style="font-weight: 800;">+增加文本</font>
<button nz-button nzType="primary" nzSize="large" (click)="addPage()">
<font style="font-weight: 800;">+增加页面</font>
</button>
</div>
</div>
<br />
</div>
\ No newline at end of file
......@@ -67,8 +67,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.save();
}
if (!this.item.sentences) {
this.item.sentences = [];
if (!this.item.pages) {
this.item.pages = [];
this.addPage()
this.save();
}
}
......@@ -117,35 +118,54 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}, 1);
}
delCard(item, index) {
delCard(list, index) {
if (confirm("确认删除吗?")) {
if (index !== -1) {
item.sentences.splice(index, 1);
list.splice(index, 1);
item.sentences = [...item.sentences];
list = [...list];
this.save();
}
}
}
copyCard(item, index) {
copyCard(list, index) {
let word = JSON.parse(JSON.stringify(list[index]));
let word = JSON.parse(JSON.stringify(item.sentences[index]));
this.item.sentences.push(word);
list.push(word);
this.save();
}
addCard() {
addCard(list) {
let word = getDefExercises();
this.item.sentences.push(word);
list.push(word);
this.save();
}
addPage() {
let list = [];
this.item.pages.push(list);
this.addCard(this.item.pages[this.item.pages.length - 1]);
this.save();
}
delPage(index) {
let list = this.item.pages;
if (confirm("确认删除吗?")) {
if (index !== -1) {
list.splice(index, 1);
list = [...list];
this.save();
}
}
}
copyPage(i) {
}
isVisible = false;
deleteTitle = "是否删除题目";
......
/* You can add global styles to this file, and also import other style files */
@import "~ng-zorro-antd/ng-zorro-antd.min.css";
\ No newline at end of file
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