Commit 6aa3d128 authored by liujiangnan's avatar liujiangnan

feat: 表单

parent 301c7281
<div class="position-relative"> <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> <i nz-icon nzType="tool" nzTheme="outline"></i>
{{btnName}} {{btnName}}
</button> </button>
<!--配置龙骨面板--> <!--配置龙骨面板-->
<nz-modal [(nzVisible)]="animaPanelVisible" (nzAfterClose)="closePanel()" nzTitle="配置资源文件" <nz-modal [(nzVisible)]="animaPanelVisible" (nzAfterClose)="closePanel()" nzTitle="配置资源文件" (nzOnCancel)="animaPanelCancel()" (nzOnOk)="animaPanelOk()" nzOkText="保存">
(nzOnCancel)="animaPanelCancel()" (nzOnOk)="animaPanelOk()" nzOkText="保存">
<div class="anima-upload-btn"> <div class="anima-upload-btn">
<span style="margin-right: 10px">上传 ske_json 文件: </span> <span style="margin-right: 10px">上传 ske_json 文件: </span>
<nz-upload [nzShowUploadList]="false" nzAccept="application/json" [nzAction]="uploadUrl" [nzData]="uploadData" <nz-upload [nzShowUploadList]="false"
(nzChange)="skeJsonHandleChange($event)"> nzAccept="application/json"
[nzAction]="uploadUrl"
[nzData]="uploadData"
(nzChange)="skeJsonHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button> <button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
</nz-upload> </nz-upload>
<i *ngIf="isSkeJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i> <i *ngIf="isSkeJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
...@@ -23,8 +25,11 @@ ...@@ -23,8 +25,11 @@
<div class="anima-upload-btn"> <div class="anima-upload-btn">
<span style="margin-right: 10px">上传 tex_json 文件: </span> <span style="margin-right: 10px">上传 tex_json 文件: </span>
<nz-upload [nzShowUploadList]="false" nzAccept="application/json" [nzAction]="uploadUrl" [nzData]="uploadData" <nz-upload [nzShowUploadList]="false"
(nzChange)="texJsonHandleChange($event)"> nzAccept="application/json"
[nzAction]="uploadUrl"
[nzData]="uploadData"
(nzChange)="texJsonHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button> <button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
</nz-upload> </nz-upload>
<i *ngIf="isTexJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i> <i *ngIf="isTexJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
...@@ -33,8 +38,11 @@ ...@@ -33,8 +38,11 @@
<div class="anima-upload-btn"> <div class="anima-upload-btn">
<span style="margin-right: 10px">上传 tex_png 文件: </span> <span style="margin-right: 10px">上传 tex_png 文件: </span>
<nz-upload [nzShowUploadList]="false" nzAccept="image/*" [nzAction]="uploadUrl" [nzData]="uploadData" <nz-upload [nzShowUploadList]="false"
(nzChange)="texPngHandleChange($event)"> nzAccept = "image/*"
[nzAction]="uploadUrl"
[nzData]="uploadData"
(nzChange)="texPngHandleChange($event)">
<button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button> <button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
</nz-upload> </nz-upload>
<i *ngIf="isTexPngLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i> <i *ngIf="isTexPngLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
...@@ -47,4 +55,6 @@ ...@@ -47,4 +55,6 @@
</nz-modal> </nz-modal>
</div> </div>
\ No newline at end of file
<div class="model-content"> <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> <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> <br><br>
<div> <div>
<span>上传书页引导音频: </span> &nbsp;&nbsp;&nbsp; <span>上传书页引导音频: </span> &nbsp;&nbsp;&nbsp;
......
...@@ -11,7 +11,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -11,7 +11,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用 // 储存数据用
saveKey = 'ng_game_select'; saveKey = 'ng_game_select';
// 储存对象 // 储存对象
pageArr; data;
animaBtnName = '上传龙骨动画';
animaNames = ['normal', 'wrong'];
customTypeGroupArr = [ customTypeGroupArr = [
{ {
...@@ -43,7 +47,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -43,7 +47,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
} }
addItem () { addItem () {
this.pageArr.push({}); this.data.pageArr.push({});
} }
saveItem() { saveItem() {
...@@ -52,20 +56,34 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -52,20 +56,34 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
deleteItem(index) { deleteItem(index) {
if (index !== -1) { if (index !== -1) {
this.pageArr.splice(index, 1); this.data.pageArr.splice(index, 1);
this.save(); this.save();
} }
} }
saveAnima(e, group) {
console.log('e:', e);
group.skeJsonData = e.skeJsonData;
group.texJsonData = e.texJsonData;
group.texPngData = e.texPngData;
this.save();
}
ngOnInit() { ngOnInit() {
this.pageArr = []; this.data = {
havePic: "",
skeJsonData: {},
texJsonData: {},
texPngData: {},
pageArr: [],
};
// 获取存储的数据 // 获取存储的数据
(<any>window).courseware.getData((data) => { (<any>window).courseware.getData((data) => {
if (data) { if (data) {
this.pageArr = data; this.data = data;
} }
this.init(); this.init();
...@@ -83,7 +101,21 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -83,7 +101,21 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
} }
init() { 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 { ...@@ -103,9 +135,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存数据 * 储存数据
*/ */
save() { save() {
(<any>window).courseware.setData(this.pageArr, null, this.saveKey); (<any>window).courseware.setData(this.data, null, this.saveKey);
this.refresh(); 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