Commit 98138a80 authored by liujiangnan's avatar liujiangnan

feat: 表单开发

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