Commit 6aa3d128 authored by liujiangnan's avatar liujiangnan

feat: 表单

parent 301c7281
<div class="position-relative">
<button nz-button (click)="setAnimaBtnClick()" style=" border-radius: 0.5rem; border: 1px solid #ddd;">
<button nz-button (click)="setAnimaBtnClick()" style=" border-radius: 0.5rem; border: 1px solid #ddd;" >
<i nz-icon nzType="tool" nzTheme="outline"></i>
{{btnName}}
</button>
<!--配置龙骨面板-->
<nz-modal [(nzVisible)]="animaPanelVisible" (nzAfterClose)="closePanel()" nzTitle="配置资源文件"
(nzOnCancel)="animaPanelCancel()" (nzOnOk)="animaPanelOk()" nzOkText="保存">
<nz-modal [(nzVisible)]="animaPanelVisible" (nzAfterClose)="closePanel()" nzTitle="配置资源文件" (nzOnCancel)="animaPanelCancel()" (nzOnOk)="animaPanelOk()" nzOkText="保存">
<div class="anima-upload-btn">
<span style="margin-right: 10px">上传 ske_json 文件: </span>
<nz-upload [nzShowUploadList]="false" nzAccept="application/json" [nzAction]="uploadUrl" [nzData]="uploadData"
<nz-upload [nzShowUploadList]="false"
nzAccept="application/json"
[nzAction]="uploadUrl"
[nzData]="uploadData"
(nzChange)="skeJsonHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
</nz-upload>
......@@ -23,7 +25,10 @@
<div class="anima-upload-btn">
<span style="margin-right: 10px">上传 tex_json 文件: </span>
<nz-upload [nzShowUploadList]="false" nzAccept="application/json" [nzAction]="uploadUrl" [nzData]="uploadData"
<nz-upload [nzShowUploadList]="false"
nzAccept="application/json"
[nzAction]="uploadUrl"
[nzData]="uploadData"
(nzChange)="texJsonHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
</nz-upload>
......@@ -33,7 +38,10 @@
<div class="anima-upload-btn">
<span style="margin-right: 10px">上传 tex_png 文件: </span>
<nz-upload [nzShowUploadList]="false" nzAccept="image/*" [nzAction]="uploadUrl" [nzData]="uploadData"
<nz-upload [nzShowUploadList]="false"
nzAccept = "image/*"
[nzAction]="uploadUrl"
[nzData]="uploadData"
(nzChange)="texPngHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
</nz-upload>
......@@ -48,3 +56,5 @@
</nz-modal>
</div>
<div class="model-content">
<div style="text-align: center;">
<div style="margin-top: 20px; margin-bottom: 20px;">
<app-upload-dragon-bone
[btnName]=animaBtnName
[skeJsonData]=data.skeJsonData
[texJsonData]=data.texJsonData
[texPngData]=data.texPngData
(save)="saveAnima($event, data)"
(refreshEmitter)="refresh()"
>
</app-upload-dragon-bone>
</div>
<div>
上传收获的图片: <br>
<app-upload-image-with-preview
style="display: inline-block; width: 300px; height: 150px;"
[picUrl]="data.havePic"
(imageUploaded)="onImageUploadSuccess($event, 'havePic', data)">
</app-upload-image-with-preview>
</div>
</div>
<div *ngFor="let item of pageArr; let i = index" style="margin: 20px; padding: 20px; border: solid 2px #000; border-radius: 30px;">
<div *ngFor="let item of data.pageArr; let i = index" style="margin: 20px; padding: 20px; border: solid 2px #000; border-radius: 30px;">
<h3 style="text-align: center;">制作索引页{{i+1}}</h3>
<button style="float: right;" nz-button nzType="danger" (click)='deleteItem(i)'>删除</button>
<input type="text" style="width: 200px;" nz-input placeholder="请填写对应书页" [(ngModel)]="item.pageIdx" (blur)="saveItem()" />
页码:<input type="text" style="width: 200px;" nz-input placeholder="请填写对应书页" [(ngModel)]="item.pageIdx" (blur)="saveItem()" />
<br><br>
<div>
<span>上传书页引导音频: </span> &nbsp;&nbsp;&nbsp;
......
......@@ -11,7 +11,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用
saveKey = 'ng_game_select';
// 储存对象
pageArr;
data;
animaBtnName = '上传龙骨动画';
animaNames = ['normal', 'wrong'];
customTypeGroupArr = [
{
......@@ -43,7 +47,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
addItem () {
this.pageArr.push({});
this.data.pageArr.push({});
}
saveItem() {
......@@ -52,20 +56,34 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
deleteItem(index) {
if (index !== -1) {
this.pageArr.splice(index, 1);
this.data.pageArr.splice(index, 1);
this.save();
}
}
saveAnima(e, group) {
console.log('e:', e);
group.skeJsonData = e.skeJsonData;
group.texJsonData = e.texJsonData;
group.texPngData = e.texPngData;
this.save();
}
ngOnInit() {
this.pageArr = [];
this.data = {
havePic: "",
skeJsonData: {},
texJsonData: {},
texPngData: {},
pageArr: [],
};
// 获取存储的数据
(<any>window).courseware.getData((data) => {
if (data) {
this.pageArr = data;
this.data = data;
}
this.init();
......@@ -83,7 +101,21 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
init() {
if (!this.data.skeJsonData) {
this.data.skeJsonData = null;
}
if (!this.data.texJsonData) {
this.data.texJsonData = null;
}
if (!this.data.texPngData) {
this.data.texPngData = null;
}
if (!this.data.havePic) {
this.data.havePic = "";
}
if (!this.data.pageArr) {
this.data.pageArr = [];
}
}
/**
......@@ -103,9 +135,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存数据
*/
save() {
(<any>window).courseware.setData(this.pageArr, null, this.saveKey);
(<any>window).courseware.setData(this.data, null, this.saveKey);
this.refresh();
console.log('this.pageArr = ' + JSON.stringify(this.pageArr));
console.log('this.pageArr = ' + JSON.stringify(this.data));
}
/**
......
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