Commit ce297878 authored by asdf's avatar asdf

表单制作

parent 10d049bb
This diff is collapsed.
......@@ -12,103 +12,71 @@
<div class="card-config">
<!-- 背景音乐 骨骼动画,音频,文字-------复制,粘贴 -->
<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">
<div class="title">
第-<strong>{{ i+1}}</strong>-页
</div>
<div class="section">
<div class="section-content">
<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>
第-<strong>{{ i+1}}</strong>-个单词
</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 class="section" style="margin-top: 10px"></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 class="section-content;text-align:center ">
<div style="display: inline-block; margin-left: 20px;margin-top: 10px;">
<span>短音频</span><span> : </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 style="display: inline-block; margin-bottom: 10px;margin-left: 10px;">
<app-audio-recorder [audioUrl]="item.shortAudio_url"
(audioUploaded)="onAudioUploadSuccessByItem($event, item)"></app-audio-recorder>
</div>
</div>
<div class="section"></div>
<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="card-item-content border">
<div *ngFor="let word of item.text.split(''); let j = index" class="section-content;text-align:center"
style="padding: 0.5vw; display: inline-block">
<button nz-button [(nzType)]=item.words[j] (click)="setButtonType(item,j)">
<span>{{word}}</span>
</button>
</div>
</div>
<div class="section" style="margin-top: 10px"></div>
<div class="section-content;text-align:center ">
<div style="display: inline-block; margin-left: 20px;">
<span>短音频</span><span> : </span>
<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 style="display: inline-block; margin-bottom: 10px">
<app-audio-recorder [audioUrl]="item.shortAudio_url"
(audioUploaded)="onAudioUploadSuccessByItem($event, item, 'shortAudio_url')"></app-audio-recorder>
</div>
<span style="margin-bottom: 10px;margin-left: 30px;">文本: </span>
<input style="width: 300px; margin-bottom: 10px;margin-left: 10px;" type="text" nz-input
[(ngModel)]="item.text" (blur)="handleTextChange($event, i)">
</div>
<div class="section" style="margin-top: 10px"></div>
<div class="section">
<div style="text-align: right; padding-right: 10px;">
<span *ngIf="i==0" style="margin-bottom: 10px;margin-right: 20px;">是否是主页? : </span>
<nz-switch *ngIf="i==0" style="margin-bottom: 10px;margin-right: 200px;" [(ngModel)]="contentObj.haveCover" (ngModelChange)="onCoverSwitchChange()"></nz-switch>
<button style="margin-bottom: 10px;margin-right: 20px;" nz-button nzType="primary" (click)="onCopyData(i)">
<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)">
<button style="margin-right: 20px;" nz-button nzType="danger" (click)="deleteItem(contentObj.dataArray, i)">
<span>删除本页</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="card-item" style="padding: 0.5vw;">
<button nz-button nzType="primary" class="add-btn" (click)="addItem(contentObj.dataArray)">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
新建卡片
新建单词
</button>
</div>
......
......@@ -13,16 +13,15 @@ const defauleFormData = require('../../assets/default/formData/LST01/default.jso
export class FormComponent implements OnInit, OnChanges, OnDestroy {
_item: any;
KEY = 'DataKey_Cocos_Test';
checkOptionsOne = []
Text = "Text"
Image = "Image"
KEY = 'DataKey_Cocos_01';
uploadUrl
uploadData
fileList
copyIndex
pasteString
ttttt = 'apple'
set item(item) {
this._item = item;
}
......@@ -31,10 +30,17 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
contentObj = {
"version": "1.1",
haveCover: false,
bgm_url: "",
dataArray: []
}
/**
* {
* text:'apple',
* shortAudio_url:'',
* image_url:'',
* words:[]
* }
*/
@Output()
update = new EventEmitter();
......@@ -47,34 +53,14 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
};
}
handleQuestionTypeChange(key) {
if (key == 'Spine') {
this.fileList = [
{
uid: '-1',
name: this.item['ske_json'],
status: 'done',
url: this.item['ske_json']
}
]
} else if (key == 'Image') {
}
this.saveItem()
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
handleTextChange(text, index) {
let item = this.contentObj.dataArray[index];
item.text = text;
for (let i = 0; i < text.length; i++) {
if (!item.words[i]) {
item.words[i] = 'text';
}
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();
}
......@@ -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() {
}
......@@ -151,28 +128,37 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.save()
}
setButtonType(item, j) {
if (item.words[j] == 'primary') {
item.words[j] = 'text';
} else {
item.words[j] = 'primary';
}
this.save()
}
deleteItem(item, index) {
item.splice(index, 1)
this.save()
}
addItem(item?, type?) {
item.push({ type: 'Image', text: "", image_url: "" })
addItem(item) {
item.push({ text: "", shortAudio_url: '', image_url: "",words:{} })
this.saveItem();
setTimeout(() => {
window.scrollTo(0, document.body.scrollHeight);
}, 1)
}
onImageUploadSuccessByItem(e, item, key) {
item[key] = e.url
onImageUploadSuccessByItem(e, item) {
item.image_url = e.url
this, this.refresh()
this.save();
}
onAudioUploadSuccessByItem(e, item, key) {
item[key] = e.url
onAudioUploadSuccessByItem(e, item) {
item.shortAudio_url = e.url
this.save();
}
......@@ -188,7 +174,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
save() {
(<any>window).courseware.setData(this.item, null, this.KEY);
this.refresh();
console.log("保存", JSON.stringify(this.item))
// console.log("保存", JSON.stringify(this.item))
}
refresh() {
......@@ -197,40 +183,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}, 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) {
this.contentObj.dataArray.push(this.contentObj.dataArray[index]);
this.save();
......@@ -239,9 +191,5 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}, 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