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 class="model-content">
<div nz-row> <div nz-row>
...@@ -19,14 +93,21 @@ ...@@ -19,14 +93,21 @@
<nz-form-label [nzSpan]="4">题目音频</nz-form-label> <nz-form-label [nzSpan]="4">题目音频</nz-form-label>
<nz-form-control [nzSpan]="12"> <nz-form-control [nzSpan]="12">
<app-audio-recorder [audioUrl]="item.questionTextAudio" [_audioName]="item.questionTextAudioName" <app-audio-recorder [audioUrl]="item.questionTextAudio" [_audioName]="item.questionTextAudioName"
(audioUploaded)="onAudioUploadSuccess($event, item, 'questionTextAudio')" (audioName)="onAudioName($event, item, 'questionTextAudioName')"> (audioUploaded)="onAudioUploadSuccess($event, item, 'questionTextAudio')" (audioName)="onAudioName($event, item, 'questionTextAudioName')"></app-audio-recorder>
</app-audio-recorder>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</nz-card> </nz-card>
</div> </div>
</div> </div>
<br /> <br/>
<!--页面区域-->
<div nz-row>
<div nz-col [nzSpan]="18" [nzOffset]="1">
<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-row>
<div nz-col [nzSpan]="18" [nzOffset]="1"> <div nz-col [nzSpan]="18" [nzOffset]="1">
...@@ -35,36 +116,31 @@ ...@@ -35,36 +116,31 @@
<nz-form-label [nzSpan]="4">完整音频</nz-form-label> <nz-form-label [nzSpan]="4">完整音频</nz-form-label>
<nz-form-control [nzSpan]="12"> <nz-form-control [nzSpan]="12">
<app-audio-recorder [audioUrl]="item.pageAudio" [_audioName]="item.pageAudioName" <app-audio-recorder [audioUrl]="item.pageAudio" [_audioName]="item.pageAudioName"
(audioUploaded)="onAudioUploadSuccess($event, item, 'pageAudio')" (audioName)="onAudioName($event, item, 'pageAudioName')"> (audioUploaded)="onAudioUploadSuccess($event, item, 'pageAudio')" (audioName)="onAudioName($event, item, 'pageAudioName')"></app-audio-recorder>
</app-audio-recorder>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<nz-form-item> <nz-form-item>
<nz-form-label [nzSpan]="4">故事图片</nz-form-label> <nz-form-label [nzSpan]="4">故事图片</nz-form-label>
<nz-form-control [nzSpan]="6"> <nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.pageImage" <app-upload-image-with-preview style="width: 100%" [picUrl]="item.pageImage"
(imageUploaded)="onImageUploadSuccess($event, item, 'pageImage')"> (imageUploaded)="onImageUploadSuccess($event, item, 'pageImage')"></app-upload-image-with-preview>
</app-upload-image-with-preview>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</nz-card> </nz-card>
</div> </div>
</div> </div>
<br /> <br/>
<!--题目区域--> <!--题目区域-->
<div nz-row> <div nz-row>
<div nz-col [nzSpan]="18" [nzOffset]="1"> <div nz-col [nzSpan]="18" [nzOffset]="1">
<h4 nz-typography>文本内容:</h4> <h4 nz-typography>文本内容:</h4>
<div *ngFor="let data of item.sentences; let i=index" style="margin-bottom: 5mm;" nz-col [nzXs]='24' <div *ngFor="let data of page; let i=index" style="margin-bottom: 5mm;" nz-col [nzXs]='24' [nzSm]='24' [nzMd]='24' [nzLg]='24'>
[nzSm]='24' [nzMd]='24' [nzLg]='24'>
<nz-card nzTitle="文本{{i+1}}" [nzHoverable]="true" [nzExtra]="actionCard"> <nz-card nzTitle="文本{{i+1}}" [nzHoverable]="true" [nzExtra]="actionCard">
<nz-form-item> <nz-form-item>
<nz-form-label [nzSpan]="4">音频</nz-form-label> <nz-form-label [nzSpan]="4">音频</nz-form-label>
<nz-form-control [nzSpan]="14"> <nz-form-control [nzSpan]="14">
<app-audio-recorder [audioUrl]="data.audio" [_audioName]="data.audioName" <app-audio-recorder [audioUrl]="data.audio" [_audioName]="data.audioName"
(audioUploaded)="onAudioUploadSuccess($event, data, 'audio')" (audioName)="onAudioName($event, data, 'audioName')"> (audioUploaded)="onAudioUploadSuccess($event, data, 'audio')" (audioName)="onAudioName($event, data, 'audioName')"></app-audio-recorder>
</app-audio-recorder>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<nz-form-item> <nz-form-item>
...@@ -83,23 +159,40 @@ ...@@ -83,23 +159,40 @@
</nz-form-item> </nz-form-item>
</nz-card> </nz-card>
<ng-template #actionCard> <ng-template #actionCard>
<button nz-button nzType="danger" (click)="delCard(item,i)"> <button nz-button nzType="danger" (click)="delCard(item.pages[j],i)">
<i nz-icon nzType="delete" nzTheme="outline"></i>删除 <i nz-icon nzType="delete" nzTheme="outline"></i>删除
</button>&nbsp;&nbsp;&nbsp; </button>&nbsp;&nbsp;&nbsp;
<button nz-button nzType="default" (click)="copyCard(item,i)"> <button nz-button nzType="default" (click)="copyCard(item.pages[j],i)">
<i nz-icon nzType="copy" nzTheme="outline"></i>复制 <i nz-icon nzType="copy" nzTheme="outline"></i>复制
</button> </button>
</ng-template> </ng-template>
</div> </div>
</div> </div>
</div> </div>
<br /> <br/>
<div nz-row> <div nz-row>
<div nz-col [nzSpan]="18" [nzOffset]="1"> <div nz-col [nzSpan]="18" [nzOffset]="1">
<button nz-button nzType="primary" nzSize="large" (click)="addCard()"> <button nz-button nzType="primary" nzSize="large" (click)="addCard(item.pages[j])">
<font style="font-weight: 800;">+增加文本</font> <font style="font-weight: 800;">+增加文本</font>
</button> </button>
</div> </div>
</div> </div>
<br /> <br/>
</nz-card>
<ng-template #actionCard>
<button nz-button nzType="danger" (click)="delPage(j)">
<i nz-icon nzType="delete" nzTheme="outline"></i>删除
</button>
</ng-template>
</div>
</div>
</div>
<div nz-row>
<div nz-col [nzSpan]="18" [nzOffset]="1">
<button nz-button nzType="primary" nzSize="large" (click)="addPage()">
<font style="font-weight: 800;">+增加页面</font>
</button>
</div>
</div>
</div> </div>
\ No newline at end of file
...@@ -67,8 +67,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -67,8 +67,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.save(); this.save();
} }
if (!this.item.sentences) { if (!this.item.pages) {
this.item.sentences = []; this.item.pages = [];
this.addPage()
this.save(); this.save();
} }
} }
...@@ -117,36 +118,55 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -117,36 +118,55 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}, 1); }, 1);
} }
delCard(item, index) { delCard(list, index) {
if (confirm("确认删除吗?")) { if (confirm("确认删除吗?")) {
if (index !== -1) { if (index !== -1) {
item.sentences.splice(index, 1); list.splice(index, 1);
item.sentences = [...item.sentences]; list = [...list];
this.save(); this.save();
} }
} }
} }
copyCard(item, index) { copyCard(list, index) {
let word = JSON.parse(JSON.stringify(list[index]));
list.push(word);
let word = JSON.parse(JSON.stringify(item.sentences[index]));
this.item.sentences.push(word);
this.save(); this.save();
} }
addCard() { addCard(list) {
let word = getDefExercises(); 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(); this.save();
}
}
}
copyPage(i) {
} }
isVisible = false; isVisible = false;
deleteTitle = "是否删除题目"; deleteTitle = "是否删除题目";
deleteCallback = function () { }; deleteCallback = function () { };
......
/* You can add global styles to this file, and also import other style files */ /* 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