Commit ce297878 authored by asdf's avatar asdf

表单制作

parent 10d049bb
This diff is collapsed.
...@@ -12,95 +12,63 @@ ...@@ -12,95 +12,63 @@
<div class="card-config"> <div class="card-config">
<!-- 背景音乐 骨骼动画,音频,文字-------复制,粘贴 --> <!-- 背景音乐 骨骼动画,音频,文字-------复制,粘贴 -->
<div *ngFor="let item of contentObj.dataArray; let i = index" class="card-item clearfix" <div *ngFor="let item of contentObj.dataArray; let i = index" class="card-item clearfix"
style="padding: 0.5vw; width: 100%; "> style="padding: 0.5vw; width: 600px; ">
<div class="card-item-content border"> <div class="card-item-content border">
<div class="card-item-content"> <div class="card-item-content">
<div class="title"> <div class="title">
第-<strong>{{ i+1}}</strong>- 第-<strong>{{ i+1}}</strong>-个单词
</div> </div>
<div class="section">
<div class="section-content"> <div class="section" style="margin-top: 10px"></div>
<div style="display: flex; margin-bottom: 10px;">
<div style="float: left; text-align: right; margin-right: 10px; margin-left: 10px;">
<span>显示选项</span><span> :</span>
</div>
<div style="float: left; width: 300px;">
<nz-radio-group [(ngModel)]="item.type" (ngModelChange)="handleQuestionTypeChange($event)">
<label nz-radio [nzValue]="'Image'">背景图片</label>
<label nz-radio [nzValue]="'Spine'">骨骼动画</label>
</nz-radio-group>
</div>
<div style="float: left; width: 500px;">
<div *ngIf="item.type=='Image'">
<app-upload-image-with-preview style="width: 100%;" [picUrl]="item.image_url"
(imageUploaded)="onImageUploadSuccessByItem($event, item, 'image_url')">
</app-upload-image-with-preview>
</div>
<div *ngIf="item.type=='Spine' ">
<div style="display: flex 1;margin-bottom: 10px;margin-left: 10px;">
<span>上传 ske_json 文件</span><span> : </span>
<nz-upload nzAccept=".json" [nzAction]="uploadUrl" [nzData]="uploadData"
[nzShowUploadList]="false" (nzChange)="handleChange($event, item,'ske_json')">
<button nz-button><i nz-icon nzType="upload"></i>Upload</button>
</nz-upload>
<span style="margin-left: 10px;">{{item["ske_json_name"]}}</span>
</div>
<div style="display: flex 1;margin-bottom: 10px;margin-left: 10px;">
<span>上传 tex_json 文件</span><span> : </span>
<nz-upload nzAccept=".json" [nzAction]="uploadUrl" [nzData]="uploadData"
[nzShowUploadList]="false" (nzChange)="handleChange($event, item,'tex_json')">
<button nz-button><i nz-icon nzType="upload"></i>Upload</button>
</nz-upload>
<span style="margin-left: 10px;">{{ item["tex_json_name"] }}</span>
</div>
<div style="display: flex 1;margin-bottom: 10px;margin-left: 10px;">
<span>上传 tex_png 文件</span><span> : </span>
<nz-upload nzAccept=".png" [nzAction]="uploadUrl" [nzData]="uploadData" [nzShowUploadList]="false"
(nzChange)="handleChange($event, item,'tex_png')">
<button nz-button><i nz-icon nzType="upload"></i>Upload</button>
</nz-upload>
<span style="margin-left: 10px;">{{ item["tex_png_name"] }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section-content;text-align:center "> <div class="section-content;text-align:center ">
<div style="display: inline-block; margin-left: 20px;"> <div style="display: inline-block; margin-left: 20px;margin-top: 10px;">
<span>短音频</span><span> : </span> <span>短音频</span><span> : </span>
</div> </div>
<div style="display: inline-block; margin-bottom: 10px"> <div style="display: inline-block; margin-bottom: 10px;margin-left: 10px;">
<app-audio-recorder [audioUrl]="item.shortAudio_url" <app-audio-recorder [audioUrl]="item.shortAudio_url"
(audioUploaded)="onAudioUploadSuccessByItem($event, item, 'shortAudio_url')"></app-audio-recorder> (audioUploaded)="onAudioUploadSuccessByItem($event, item)"></app-audio-recorder>
</div> </div>
</div>
<span style="margin-bottom: 10px;margin-left: 30px;">文本: </span> <div class="section"></div>
<input style="width: 300px; margin-bottom: 10px;margin-left: 10px;" type="text" nz-input
[(ngModel)]="item.text" (blur)="handleTextChange($event, i)">
<div class="section-content;text-align:center ">
<span style="margin-bottom: 10px;margin-left: 20px;">文本: </span>
<input style="width: 200px; margin-bottom: 10px;margin-left: 10px;" type="text" nz-input
[(ngModel)]="item.text" (ngModelChange)="handleTextChange($event, i)">
</div> </div>
<div class="section"> <div class="card-item-content border">
<div style="text-align: right; padding-right: 10px;"> <div *ngFor="let word of item.text.split(''); let j = index" class="section-content;text-align:center"
<span *ngIf="i==0" style="margin-bottom: 10px;margin-right: 20px;">是否是主页? : </span> style="padding: 0.5vw; display: inline-block">
<nz-switch *ngIf="i==0" style="margin-bottom: 10px;margin-right: 200px;" [(ngModel)]="contentObj.haveCover" (ngModelChange)="onCoverSwitchChange()"></nz-switch> <button nz-button [(nzType)]=item.words[j] (click)="setButtonType(item,j)">
<button style="margin-bottom: 10px;margin-right: 20px;" nz-button nzType="primary" (click)="onCopyData(i)"> <span>{{word}}</span>
<span>复制本页</span>
</button>
<button style="margin-right: 20px;" nz-button nzType="danger"
(click)="deleteItem(contentObj.dataArray, i)">
<span>删除本页</span>
</button> </button>
</div> </div>
</div> </div>
<div class="section" style="margin-top: 10px"></div>
<div class="section-content;text-align:center" style="margin-top: 10px">
<span style="margin-left: 20px;margin-bottom: 10px;display: inline;vertical-align:400%;">图片: </span>
<div style="display: inline-block; margin-bottom: 10px;margin-left: 20px;width:200px">
<app-upload-image-with-preview style="width: 100%;" [picUrl]="item.image_url"
(imageUploaded)="onImageUploadSuccessByItem($event, item)">
</app-upload-image-with-preview>
</div>
</div>
<div class="section" style="margin-top: 10px"></div>
<div style="text-align: right; padding-right: 10px;padding-top: 0;">
<button style="margin-right: 20px;" nz-button nzType="primary" (click)="onCopyData(i)">
<span>复制本页</span>
</button>
<button style="margin-right: 20px;" nz-button nzType="danger" (click)="deleteItem(contentObj.dataArray, i)">
<span>删除本页</span>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -108,7 +76,7 @@ ...@@ -108,7 +76,7 @@
<div class="card-item" style="padding: 0.5vw;"> <div class="card-item" style="padding: 0.5vw;">
<button nz-button nzType="primary" class="add-btn" (click)="addItem(contentObj.dataArray)"> <button nz-button nzType="primary" class="add-btn" (click)="addItem(contentObj.dataArray)">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i> <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
新建卡片 新建单词
</button> </button>
</div> </div>
......
...@@ -13,16 +13,15 @@ const defauleFormData = require('../../assets/default/formData/LST01/default.jso ...@@ -13,16 +13,15 @@ const defauleFormData = require('../../assets/default/formData/LST01/default.jso
export class FormComponent implements OnInit, OnChanges, OnDestroy { export class FormComponent implements OnInit, OnChanges, OnDestroy {
_item: any; _item: any;
KEY = 'DataKey_Cocos_Test'; KEY = 'DataKey_Cocos_01';
checkOptionsOne = []
Text = "Text"
Image = "Image"
uploadUrl uploadUrl
uploadData uploadData
fileList fileList
copyIndex copyIndex
pasteString pasteString
ttttt = 'apple'
set item(item) { set item(item) {
this._item = item; this._item = item;
} }
...@@ -31,10 +30,17 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -31,10 +30,17 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
} }
contentObj = { contentObj = {
"version": "1.1", "version": "1.1",
haveCover: false,
bgm_url: "", bgm_url: "",
dataArray: [] dataArray: []
} }
/**
* {
* text:'apple',
* shortAudio_url:'',
* image_url:'',
* words:[]
* }
*/
@Output() @Output()
update = new EventEmitter(); update = new EventEmitter();
...@@ -47,35 +53,15 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -47,35 +53,15 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}; };
} }
handleQuestionTypeChange(key) { handleTextChange(text, index) {
if (key == 'Spine') { let item = this.contentObj.dataArray[index];
this.fileList = [ item.text = text;
{ for (let i = 0; i < text.length; i++) {
uid: '-1', if (!item.words[i]) {
name: this.item['ske_json'], item.words[i] = 'text';
status: 'done', }
url: this.item['ske_json']
}
]
} else if (key == 'Image') {
} }
this.saveItem() this.saveItem()
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
}
handleAnswerTypeChange() {
// console.log("Change")
// let len = this.contentObj.dataArray.length
// this.contentObj.dataArray = Array(len).fill("")
this.saveItem()
}
handleTextChange(e, index) {
// console.log(e.target.value, index)
this.contentObj.dataArray[index].text = e.target.value
this.saveItem()
this.refresh(); this.refresh();
} }
...@@ -120,15 +106,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -120,15 +106,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
} }
} }
cardItemData() {
return { audio_url: "", type: "text", text: "", image_url: "" }
}
cardChoiceData() {
return { isText: true, text: "", image_url: "" }
}
initData() { initData() {
} }
...@@ -151,28 +128,37 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -151,28 +128,37 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.save() this.save()
} }
setButtonType(item, j) {
if (item.words[j] == 'primary') {
item.words[j] = 'text';
} else {
item.words[j] = 'primary';
}
this.save()
}
deleteItem(item, index) { deleteItem(item, index) {
item.splice(index, 1) item.splice(index, 1)
this.save() this.save()
} }
addItem(item?, type?) { addItem(item) {
item.push({ type: 'Image', text: "", image_url: "" }) item.push({ text: "", shortAudio_url: '', image_url: "",words:{} })
this.saveItem(); this.saveItem();
setTimeout(() => { setTimeout(() => {
window.scrollTo(0, document.body.scrollHeight); window.scrollTo(0, document.body.scrollHeight);
}, 1) }, 1)
} }
onImageUploadSuccessByItem(e, item, key) { onImageUploadSuccessByItem(e, item) {
item[key] = e.url item.image_url = e.url
this, this.refresh() this, this.refresh()
this.save(); this.save();
} }
onAudioUploadSuccessByItem(e, item, key) { onAudioUploadSuccessByItem(e, item) {
item[key] = e.url item.shortAudio_url = e.url
this.save(); this.save();
} }
...@@ -188,7 +174,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -188,7 +174,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
save() { save() {
(<any>window).courseware.setData(this.item, null, this.KEY); (<any>window).courseware.setData(this.item, null, this.KEY);
this.refresh(); this.refresh();
console.log("保存", JSON.stringify(this.item)) // console.log("保存", JSON.stringify(this.item))
} }
refresh() { refresh() {
...@@ -197,40 +183,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -197,40 +183,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}, 1); }, 1);
} }
updateCheckbox() {
let check = []
this.item.contentObj.textDown.forEach((item, index) => {
check.push({ label: index + 1, value: index, checked: false })
});
let length = check.length
this.item.contentObj.textUp.forEach((item, index) => {
let _check = JSON.parse(JSON.stringify(check))
item.lineTo.forEach(option => {
if (option < length) {
_check[Number(option)].checked = true
}
});
item.checkOptions = _check
});
}
handleChange(info: { type: string, file: UploadFile, event: any }, item, key) {
console.log('info:', info);
switch (info.type) {
case 'success':
this.uploadSuccess(info.file, item, key);
break;
}
}
uploadSuccess(file, item, key) {
console.log(item);
item[key] = file.response.url;
item[key + '_name'] = file.name;
this.save();
}
onCopyData(index) { onCopyData(index) {
this.contentObj.dataArray.push(this.contentObj.dataArray[index]); this.contentObj.dataArray.push(this.contentObj.dataArray[index]);
this.save(); this.save();
...@@ -239,9 +191,5 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -239,9 +191,5 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}, 1) }, 1)
} }
onCoverSwitchChange() {
console.log(this.contentObj.haveCover)
this.save();
}
} }
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