Commit 98138a80 authored by liujiangnan's avatar liujiangnan

feat: 表单开发

parent d8224602
export const defaultData = { export const defaultData = {
"title": "Look,count and say and.", "dataArr": [
"tipSwitch": "0", {
"audio": "http://staging-teach.cdn.ireadabc.com/af5208a0e0d869f6be410c46e50bb501_l.mp3", "title": "111",
"imgAni": { "cover": "http://staging-teach.cdn.ireadabc.com/c8abf7383d65bcbdba8f390785cece60.png",
"ske": { "video_url": "http://staging-teach.cdn.ireadabc.com/c37a3945121274a1f7d95717327539ec.mp4"
"url": "http://staging-teach.cdn.ireadabc.com/a7dc36aa85121807bb7e049642192cec.json",
"name": "niao_ske.json"
}, },
"tex": { {
"url": "http://staging-teach.cdn.ireadabc.com/c635daaa86b4c5c39f4af88e826d3433.json", "title": "222",
"name": "niao_tex.json" "cover": "http://staging-teach.cdn.ireadabc.com/f6f4bbef497409fef3c8f1d375893829.png",
}, "video_url": "http://staging-teach.cdn.ireadabc.com/d9df7ef1ba8d7e20613e83984d2d7b9a.mp4"
"png": {
"url": "http://staging-teach.cdn.ireadabc.com/75c87beb2b7d79033ace8978edc91a12.png",
"name": "niao_tex.png"
} }
}, ]
// "video_url": "http://staging-teach.cdn.ireadabc.com/c8b49f6f032bd91a637df072c01ccaf7.mp4",
"video_url": "http://staging-teach.cdn.ireadabc.com/5d2e56f9c0d4307ab08df600d913b011.mp4",
"audioName": ""
}; };
\ No newline at end of file
<div class="model-content">
<br>
<span style="font-size: 20px; padding-left: 20px;">标题: </span>
<input type="text" style="width: 300px;" nz-input [(ngModel)]="item.title" (blur)="save()">
<br>
<br>
<span style="padding-left: 20px;font-size: 20px;">提示开关: </span>
<nz-radio-group [ngModel]="item.tipSwitch" (ngModelChange)="customRadioChange($event, item,'tipSwitch')"
style="font-size: 20px; display: inline-block;">
<label nz-radio nzValue="1"></label>
<label nz-radio nzValue="0"></label>
</nz-radio-group>
<br> <div class="model-content">
<br> <div style="width: 100%; display: inline-flex;flex-direction: row;flex-wrap: wrap;">
<div *ngIf="item.tipSwitch == 1"> <div style="width: 30% ; margin-left: 2.5%; min-width: 300px;margin-top: 20px;border: 2px dashed;padding: 20px 10px 5px 10px;"
<div> align='center' *ngFor="let data of item.dataArr;index as i">
<span style="font-size: 20px; padding-left: 20px;">提示音频: </span> <div style="width: 100px; background-color: white; transform: translateY(-30px);" > 视频 {{i+1}}</div>
<app-audio-recorder [audioUrl]="item.audio" style="display: inline-block;" <div style="width: 80%;" align='center'>
(audioUploaded)="onAudioUploadSuccess($event, 'audio', item)"> <input type="text" nz-input [(ngModel)]="data.title" (blur)="save()">
</app-audio-recorder>
</div> </div>
<br> <br>
<span style="font-size: 20px; padding-left: 20px;">提示动画: </span> <app-upload-image-with-preview style="width: 80%;" [picUrl]="data.cover" (imageUploaded)="onImageUploadSuccess($event,i)">
<app-upload-dragon-bone style="width: 100%" (save)="onDragonBoneSave($event,item)" style="display: inline-block;" </app-upload-image-with-preview>
[skeJsonData]="item.imgAni.ske" [texJsonData]="item.imgAni.tex" [texPngData]="item.imgAni.png"> <app-upload-video [videoUrl]="data.video_url" (videoUploaded)="onVideoUploaded($event,i)"></app-upload-video>
</app-upload-dragon-bone> <button style="margin-top: 10px; " (click)="onRemoveData(i)">删除</button>
</div>
<div style="padding: 10px;background-color: #fff;">
<div style="padding: 20px">
<app-upload-video [videoUrl]="item.video_url" (videoUploaded)="onVideoUploaded($event)"></app-upload-video>
</div> </div>
<button style="width: 30% ;min-width: 300px;height: 170px; margin-top: 20px; margin-left:2.5%;"
(click)="onAddData()">添加视频</button>
</div> </div>
</div> </div>
import { Component, OnDestroy, OnChanges, OnInit, ApplicationRef, ChangeDetectorRef, ViewChild, ElementRef } from '@angular/core'; import { Component, OnDestroy, OnChanges, OnInit, ApplicationRef, ChangeDetectorRef, ViewChild, ElementRef } from '@angular/core';
import { ComponentBase } from './ComponentBase'; import { ComponentBase } from './ComponentBase';
import { MetaFormCreator } from './mataFormCreator';
import { NzMessageService } from 'ng-zorro-antd'; import { NzMessageService } from 'ng-zorro-antd';
let replaceAll = function (str, s1, s2) {
return str.replace(new RegExp(s1, "gm"), s2);
}
@Component({ @Component({
selector: 'app-form', selector: 'app-form',
templateUrl: './form.component.html', templateUrl: './form.component.html',
...@@ -13,44 +9,50 @@ let replaceAll = function (str, s1, s2) { ...@@ -13,44 +9,50 @@ let replaceAll = function (str, s1, s2) {
}) })
export class FormComponent extends ComponentBase implements OnInit, OnChanges, OnDestroy { export class FormComponent extends ComponentBase implements OnInit, OnChanges, OnDestroy {
// 储存数据用 // 储存数据用
saveKey = "cartoon_video"; saveKey = "dg_video";
item = { item = {
title: "", dataArr: []
tipSwitch: 1,
audio: "",
imgAni: {
ske: {},
tex: {},
png: {}
},
video_url: "",
}; };
constructor(public nzMessageService: NzMessageService, public appRef: ApplicationRef, public changeDetectorRef: ChangeDetectorRef) { constructor(public nzMessageService: NzMessageService, public appRef: ApplicationRef, public changeDetectorRef: ChangeDetectorRef) {
super(appRef, changeDetectorRef); super(appRef, changeDetectorRef);
} }
init(): void {
}
ngChange(i, j) { /**
* 储存图片数据
* @param e
*/
onImageUploadSuccess(e, index) {
this.item.dataArr[index].cover = e.url
this.save(); this.save();
} }
onDragonBoneSave(e, item) { onVideoUploaded(e, index) {
console.log(e); this.item.dataArr[index].video_url = e.url
this.save(); this.save();
} }
onVideoUploaded(evt) { /**
this.item.video_url = evt.url; * 删除卡片
console.log(evt); */
this.save(); onRemoveData(index) {
let data = this.item.dataArr[index]
if (data) {
this.item.dataArr.splice(index, 1)
this.save()
}
} }
customRadioChange(e, item, key) { /** 添加卡片 */
item[key] = e; onAddData() {
this.save(); this.item.dataArr.push({
title: "",
cover: "",
video_url: ""
})
this.save()
} }
} }
\ 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