Commit 5c44512d authored by Tt's avatar Tt

表单修改

parent 9b7bade4
<div class="model-content"> <div class="model-content">
<div style="padding: 10px"> <div style="padding: 10px">
<div> <div>
入场动画配置 入场动画配置
<div <div
...@@ -20,142 +20,107 @@ ...@@ -20,142 +20,107 @@
</div> </div>
<div style="width: 300px; margin-top: 15px">
<span>请输入标题: </span>
<input type="text" nz-input [(ngModel)]="item.title" (blur)="save()" />
</div>
<div style="margin-top: 15px">
<span>标题音频: </span>
<app-audio-recorder
[audioUrl]="item.audio_title"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_title')"
></app-audio-recorder>
</div>
<div *ngFor="let it of group; let i = index" style="padding: 0.5vw"> <div *ngFor="let group of item; let m = index" style="border: 1px solid #000;">
<div class="border" style="display: flex; align-items: center"> <div style="width: 300px; margin-top: 15px">
<div class="item-box" style="width: 100%"> <span>请输入标题: </span>
<h2 style="padding-bottom: 1vw">连线组-{{ i + 1 }}</h2> <input type="text" nz-input [(ngModel)]="item.title" (blur)="save()" />
<!---------------------- 上方内容 ----------------------> </div>
<span style="padding-right: 10px; font-size: large"> 上方内容:</span>
<br />
<br />
<span style="padding-right: 10px; font-size: medium">
内容类型:</span
>
<nz-radio-group
[(ngModel)]="it.up.type"
name="radioValue"
id="radioValue"
(ngModelChange)="save()"
>
<label nz-radio [nzValue]="0">图片</label>
<label nz-radio [nzValue]="1">文字</label>
</nz-radio-group>
<div style="margin-top: 15px; width: 30%">
<app-upload-image-with-preview
*ngIf="it.up.type == 0"
[picUrl]="it.up.pic_url"
(imageUploaded)="onImageUploadSuccessByItem($event, it.up)"
></app-upload-image-with-preview>
<input
*ngIf="it.up.type == 1"
type="text"
nz-input
[(ngModel)]="it.up.text"
(blur)="save()"
placeholder="请输入文字内容"
/>
</div>
<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]="it.up.audio_url" </app-audio-recorder>
(audioUploaded)="onAudioUploadSuccessByItem($event, it.up)" </div>
></app-audio-recorder>
</div>
<br />
<br />
<hr />
<br />
<br />
<!---------------------- 下方内容 ---------------------->
<span style="padding-right: 10px; font-size: large"> 下方内容:</span>
<br />
<br />
<span style="padding-right: 10px; font-size: medium">
内容类型:</span
>
<nz-radio-group
[(ngModel)]="it.down.type"
name="radioValue"
id="radioValue"
(ngModelChange)="save()"
>
<label nz-radio [nzValue]="0">图片</label>
<label nz-radio [nzValue]="1">文字</label>
</nz-radio-group>
<div style="margin-top: 15px; width: 30%">
<app-upload-image-with-preview
*ngIf="it.down.type == 0"
[picUrl]="it.down.pic_url"
(imageUploaded)="onImageUploadSuccessByItem($event, it.down)"
></app-upload-image-with-preview>
<input
*ngIf="it.down.type == 1"
type="text"
nz-input
[(ngModel)]="it.down.text"
(blur)="save()"
placeholder="请输入文字内容"
/>
</div>
<div style="margin-top: 15px">
<span>音频: </span>
<app-audio-recorder
[audioUrl]="it.down.audio_url"
(audioUploaded)="onAudioUploadSuccessByItem($event, it.down)"
></app-audio-recorder>
</div>
<div style="display: flex; justify-items: center; padding-top: 20px"> <div *ngFor="let it of group; let i = index" style="padding: 0.5vw">
<button <div class="border" style="display: flex; align-items: center">
style="margin-left: 10px" <div class="item-box" style="width: 100%">
nz-button <h2 style="padding-bottom: 1vw">连线组-{{ i + 1 }}</h2>
nzType="danger" <!---------------------- 上方内容 ---------------------->
(click)="deleteItem(it)" <span style="padding-right: 10px; font-size: large"> 上方内容:</span>
> <br />
<span>删除此分组</span> <br />
</button> <span style="padding-right: 10px; font-size: medium">
内容类型:</span>
<nz-radio-group [(ngModel)]="it.up.type" name="radioValue" id="radioValue" (ngModelChange)="save()">
<label nz-radio [nzValue]="0">图片</label>
<label nz-radio [nzValue]="1">文字</label>
</nz-radio-group>
<div style="margin-top: 15px; width: 30%">
<app-upload-image-with-preview *ngIf="it.up.type == 0" [picUrl]="it.up.pic_url"
(imageUploaded)="onImageUploadSuccessByItem($event, it.up)"></app-upload-image-with-preview>
<input *ngIf="it.up.type == 1" type="text" nz-input [(ngModel)]="it.up.text" (blur)="save()"
placeholder="请输入文字内容" />
</div>
<div style="margin-top: 15px">
<span>音频: </span>
<app-audio-recorder [audioUrl]="it.up.audio_url"
(audioUploaded)="onAudioUploadSuccessByItem($event, it.up)"></app-audio-recorder>
</div>
<br />
<br />
<hr />
<br />
<br />
<!---------------------- 下方内容 ---------------------->
<span style="padding-right: 10px; font-size: large"> 下方内容:</span>
<br />
<br />
<span style="padding-right: 10px; font-size: medium">
内容类型:</span>
<nz-radio-group [(ngModel)]="it.down.type" name="radioValue" id="radioValue" (ngModelChange)="save()">
<label nz-radio [nzValue]="0">图片</label>
<label nz-radio [nzValue]="1">文字</label>
</nz-radio-group>
<div style="margin-top: 15px; width: 30%">
<app-upload-image-with-preview *ngIf="it.down.type == 0" [picUrl]="it.down.pic_url"
(imageUploaded)="onImageUploadSuccessByItem($event, it.down)"></app-upload-image-with-preview>
<input *ngIf="it.down.type == 1" type="text" nz-input [(ngModel)]="it.down.text" (blur)="save()"
placeholder="请输入文字内容" />
</div>
<div style="margin-top: 15px">
<span>音频: </span>
<app-audio-recorder [audioUrl]="it.down.audio_url"
(audioUploaded)="onAudioUploadSuccessByItem($event, it.down)"></app-audio-recorder>
</div>
<div style="display: flex; justify-items: center; padding-top: 20px">
<button style="margin-left: 10px" nz-button nzType="danger" (click)="deleteItem(m,it)">
<span>删除此分组</span>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="add-btn-box" style="margin-top: 20px; padding-bottom: 20px">
<button style="margin: auto;height: 40px" nz-button class="add-btn" (click)="addItem(m)">
<em nz-icon nzType="plus-circle" nzTheme="outline"></em>
添加连线组
</button>
</div>
</div> </div>
<div <div class="add-btn-box" style="margin-top: 20px; padding-bottom: 20px">
nz-col <button style="margin: auto;height: 40px;color:green" nz-button class="add-btn" (click)="addGroup()">
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>
</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