Commit 5c44512d authored by Tt's avatar Tt

表单修改

parent 9b7bade4
...@@ -21,6 +21,8 @@ ...@@ -21,6 +21,8 @@
<div *ngFor="let group of item; let m = index" style="border: 1px solid #000;">
<div style="width: 300px; margin-top: 15px"> <div style="width: 300px; margin-top: 15px">
<span>请输入标题: </span> <span>请输入标题: </span>
<input type="text" nz-input [(ngModel)]="item.title" (blur)="save()" /> <input type="text" nz-input [(ngModel)]="item.title" (blur)="save()" />
...@@ -28,12 +30,11 @@ ...@@ -28,12 +30,11 @@
<div style="margin-top: 15px"> <div style="margin-top: 15px">
<span>标题音频: </span> <span>标题音频: </span>
<app-audio-recorder <app-audio-recorder [audioUrl]="item.audio_title" (audioUploaded)="onAudioUploadSuccess($event, 'audio_title')">
[audioUrl]="item.audio_title" </app-audio-recorder>
(audioUploaded)="onAudioUploadSuccess($event, 'audio_title')"
></app-audio-recorder>
</div> </div>
<div *ngFor="let it of group; let i = index" style="padding: 0.5vw"> <div *ngFor="let it of group; let i = index" style="padding: 0.5vw">
<div class="border" style="display: flex; align-items: center"> <div class="border" style="display: flex; align-items: center">
<div class="item-box" style="width: 100%"> <div class="item-box" style="width: 100%">
...@@ -43,41 +44,24 @@ ...@@ -43,41 +44,24 @@
<br /> <br />
<br /> <br />
<span style="padding-right: 10px; font-size: medium"> <span style="padding-right: 10px; font-size: medium">
内容类型:</span 内容类型:</span>
>
<nz-radio-group [(ngModel)]="it.up.type" name="radioValue" id="radioValue" (ngModelChange)="save()">
<nz-radio-group
[(ngModel)]="it.up.type"
name="radioValue"
id="radioValue"
(ngModelChange)="save()"
>
<label nz-radio [nzValue]="0">图片</label> <label nz-radio [nzValue]="0">图片</label>
<label nz-radio [nzValue]="1">文字</label> <label nz-radio [nzValue]="1">文字</label>
</nz-radio-group> </nz-radio-group>
<div style="margin-top: 15px; width: 30%"> <div style="margin-top: 15px; width: 30%">
<app-upload-image-with-preview <app-upload-image-with-preview *ngIf="it.up.type == 0" [picUrl]="it.up.pic_url"
*ngIf="it.up.type == 0" (imageUploaded)="onImageUploadSuccessByItem($event, it.up)"></app-upload-image-with-preview>
[picUrl]="it.up.pic_url" <input *ngIf="it.up.type == 1" type="text" nz-input [(ngModel)]="it.up.text" (blur)="save()"
(imageUploaded)="onImageUploadSuccessByItem($event, it.up)" placeholder="请输入文字内容" />
></app-upload-image-with-preview>
<input
*ngIf="it.up.type == 1"
type="text"
nz-input
[(ngModel)]="it.up.text"
(blur)="save()"
placeholder="请输入文字内容"
/>
</div> </div>
<div style="margin-top: 15px"> <div style="margin-top: 15px">
<span>音频: </span> <span>音频: </span>
<app-audio-recorder <app-audio-recorder [audioUrl]="it.up.audio_url"
[audioUrl]="it.up.audio_url" (audioUploaded)="onAudioUploadSuccessByItem($event, it.up)"></app-audio-recorder>
(audioUploaded)="onAudioUploadSuccessByItem($event, it.up)"
></app-audio-recorder>
</div> </div>
<br /> <br />
<br /> <br />
...@@ -89,50 +73,28 @@ ...@@ -89,50 +73,28 @@
<br /> <br />
<br /> <br />
<span style="padding-right: 10px; font-size: medium"> <span style="padding-right: 10px; font-size: medium">
内容类型:</span 内容类型:</span>
>
<nz-radio-group [(ngModel)]="it.down.type" name="radioValue" id="radioValue" (ngModelChange)="save()">
<nz-radio-group
[(ngModel)]="it.down.type"
name="radioValue"
id="radioValue"
(ngModelChange)="save()"
>
<label nz-radio [nzValue]="0">图片</label> <label nz-radio [nzValue]="0">图片</label>
<label nz-radio [nzValue]="1">文字</label> <label nz-radio [nzValue]="1">文字</label>
</nz-radio-group> </nz-radio-group>
<div style="margin-top: 15px; width: 30%"> <div style="margin-top: 15px; width: 30%">
<app-upload-image-with-preview <app-upload-image-with-preview *ngIf="it.down.type == 0" [picUrl]="it.down.pic_url"
*ngIf="it.down.type == 0" (imageUploaded)="onImageUploadSuccessByItem($event, it.down)"></app-upload-image-with-preview>
[picUrl]="it.down.pic_url" <input *ngIf="it.down.type == 1" type="text" nz-input [(ngModel)]="it.down.text" (blur)="save()"
(imageUploaded)="onImageUploadSuccessByItem($event, it.down)" placeholder="请输入文字内容" />
></app-upload-image-with-preview>
<input
*ngIf="it.down.type == 1"
type="text"
nz-input
[(ngModel)]="it.down.text"
(blur)="save()"
placeholder="请输入文字内容"
/>
</div> </div>
<div style="margin-top: 15px"> <div style="margin-top: 15px">
<span>音频: </span> <span>音频: </span>
<app-audio-recorder <app-audio-recorder [audioUrl]="it.down.audio_url"
[audioUrl]="it.down.audio_url" (audioUploaded)="onAudioUploadSuccessByItem($event, it.down)"></app-audio-recorder>
(audioUploaded)="onAudioUploadSuccessByItem($event, it.down)"
></app-audio-recorder>
</div> </div>
<div style="display: flex; justify-items: center; padding-top: 20px"> <div style="display: flex; justify-items: center; padding-top: 20px">
<button <button style="margin-left: 10px" nz-button nzType="danger" (click)="deleteItem(m,it)">
style="margin-left: 10px"
nz-button
nzType="danger"
(click)="deleteItem(it)"
>
<span>删除此分组</span> <span>删除此分组</span>
</button> </button>
</div> </div>
...@@ -140,22 +102,25 @@ ...@@ -140,22 +102,25 @@
</div> </div>
</div> </div>
<div <div class="add-btn-box" style="margin-top: 20px; padding-bottom: 20px">
nz-col <button style="margin: auto;height: 40px" nz-button class="add-btn" (click)="addItem(m)">
nzSpan="16"
class="add-btn-box"
style="margin-top: 20px; padding-bottom: 20px"
>
<button
style="margin: auto; width: 60%; height: 60%"
nz-button
nzType="dashed"
class="add-btn"
(click)="addGroup()"
>
<em nz-icon nzType="plus-circle" nzTheme="outline"></em> <em nz-icon nzType="plus-circle" nzTheme="outline"></em>
添加连线组 添加连线组
</button> </button>
</div> </div>
</div> </div>
<div class="add-btn-box" style="margin-top: 20px; padding-bottom: 20px">
<button style="margin: auto;height: 40px;color:green" nz-button class="add-btn" (click)="addGroup()">
<em nz-icon nzType="plus-circle" nzTheme="outline"></em>
添加连线题
</button>
</div>
</div>
</div> </div>
\ No newline at end of file
...@@ -20,7 +20,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -20,7 +20,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用 // 储存数据用
saveKey = "andy_ww01"; saveKey = "andy_ww01";
// 储存对象 // 储存对象
item; item = [];
aniEnter: any = { aniEnter: any = {
skeJsonData: {}, skeJsonData: {},
texJsonData: {}, texJsonData: {},
...@@ -28,30 +28,14 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -28,30 +28,14 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
audioUrl: null, audioUrl: null,
time: 1, time: 1,
} }
group = [];
constructor( constructor(
private appRef: ApplicationRef, private appRef: ApplicationRef,
private changeDetectorRef: ChangeDetectorRef private changeDetectorRef: ChangeDetectorRef
) { } ) { }
createShell() {
this.item.wordList.push({
word: "",
audio: "",
backWord: "",
backWordAudio: "",
});
this.save();
}
removeShell(idx) {
this.item.wordList.splice(idx, 1);
this.save();
}
ngOnInit() { ngOnInit() {
this.item = {}; this.item = [];
// 获取存储的数据 // 获取存储的数据
(<any>window).courseware.getData((data) => { (<any>window).courseware.getData((data) => {
...@@ -59,7 +43,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -59,7 +43,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
if (data.aniEnter) { if (data.aniEnter) {
this.aniEnter = data.aniEnter; this.aniEnter = data.aniEnter;
} }
this.item = data.item ? data.item : {}; this.item = data.item ? data.item : [];
} }
this.init(); this.init();
...@@ -74,8 +58,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -74,8 +58,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
ngOnDestroy() { } ngOnDestroy() { }
init() { init() {
if (this.item.group) { if (this.item.length == 0) {
this.group = this.item.group; this.item.push([]);
} }
} }
...@@ -128,8 +112,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -128,8 +112,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存数据 * 储存数据
*/ */
save() { save() {
this.item.group = this.group;
let obj: any = { let obj: any = {
aniEnter: this.aniEnter, aniEnter: this.aniEnter,
item: this.item item: this.item
...@@ -162,10 +144,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -162,10 +144,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
/** /**
* 添加选项组 * 添加选项组
*/ */
addGroup() { addItem(i) {
if (this.group.length >= 8) { let group = this.item[i];
return; if (group.length >= 5) return;
}
const data = { const data = {
up: { up: {
...@@ -182,22 +163,22 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -182,22 +163,22 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}, },
}; };
this.group.push(data); group.push(data);
this.save(); this.save();
} }
deleteItem(data) { deleteItem(i, data) {
const index = this.group.indexOf(data); let group = this.item[i];
const index = group.indexOf(data);
if (index !== -1) { if (index !== -1) {
this.group.splice(index, 1); group.splice(index, 1);
} }
this.save(); this.save();
} }
addGroup() {
this.item.push([]);
}
} }
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