Commit 5c44512d authored by Tt's avatar Tt

表单修改

parent 9b7bade4
<div class="model-content">
<div style="padding: 10px">
<div>
入场动画配置
<div
......@@ -20,142 +20,107 @@
</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 class="border" style="display: flex; align-items: center">
<div class="item-box" style="width: 100%">
<h2 style="padding-bottom: 1vw">连线组-{{ i + 1 }}</h2>
<!---------------------- 上方内容 ---------------------->
<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 *ngFor="let group of item; let m = index" style="border: 1px solid #000;">
<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]="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]="item.audio_title" (audioUploaded)="onAudioUploadSuccess($event, 'audio_title')">
</app-audio-recorder>
</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(it)"
>
<span>删除此分组</span>
</button>
<div *ngFor="let it of group; let i = index" style="padding: 0.5vw">
<div class="border" style="display: flex; align-items: center">
<div class="item-box" style="width: 100%">
<h2 style="padding-bottom: 1vw">连线组-{{ i + 1 }}</h2>
<!---------------------- 上方内容 ---------------------->
<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">
<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 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
nz-col
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()"
>
<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 {
// 储存数据用
saveKey = "andy_ww01";
// 储存对象
item;
item = [];
aniEnter: any = {
skeJsonData: {},
texJsonData: {},
......@@ -28,30 +28,14 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
audioUrl: null,
time: 1,
}
group = [];
constructor(
private appRef: ApplicationRef,
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() {
this.item = {};
this.item = [];
// 获取存储的数据
(<any>window).courseware.getData((data) => {
......@@ -59,7 +43,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
if (data.aniEnter) {
this.aniEnter = data.aniEnter;
}
this.item = data.item ? data.item : {};
this.item = data.item ? data.item : [];
}
this.init();
......@@ -74,8 +58,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
ngOnDestroy() { }
init() {
if (this.item.group) {
this.group = this.item.group;
if (this.item.length == 0) {
this.item.push([]);
}
}
......@@ -128,8 +112,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存数据
*/
save() {
this.item.group = this.group;
let obj: any = {
aniEnter: this.aniEnter,
item: this.item
......@@ -162,10 +144,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
/**
* 添加选项组
*/
addGroup() {
if (this.group.length >= 8) {
return;
}
addItem(i) {
let group = this.item[i];
if (group.length >= 5) return;
const data = {
up: {
......@@ -182,22 +163,22 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
},
};
this.group.push(data);
group.push(data);
this.save();
}
deleteItem(data) {
const index = this.group.indexOf(data);
deleteItem(i, data) {
let group = this.item[i];
const index = group.indexOf(data);
if (index !== -1) {
this.group.splice(index, 1);
group.splice(index, 1);
}
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