Commit 7233d4c1 authored by Tt's avatar Tt

修改form内容

parent cfdfe0b5
No preview for this file type
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core'; import { NgModule, ErrorHandler } from '@angular/core';
import {MyErrorHandler} from './MyError'; import { MyErrorHandler } from './MyError';
import { AppComponent } from './app.component'; import { AppComponent } from './app.component';
import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd'; import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd';
...@@ -10,17 +10,17 @@ import { HttpClientModule } from '@angular/common/http'; ...@@ -10,17 +10,17 @@ import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { registerLocaleData } from '@angular/common'; import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh'; import zh from '@angular/common/locales/zh';
import {FormComponent} from './form/form.component'; import { FormComponent } from './form/form.component';
import {PlayComponent} from './play/play.component'; import { PlayComponent } from './play/play.component';
import {LessonTitleConfigComponent} from './common/lesson-title-config/lesson-title-config.component'; import { LessonTitleConfigComponent } from './common/lesson-title-config/lesson-title-config.component';
import {BackgroundImagePipe} from './pipes/background-image.pipe'; import { BackgroundImagePipe } from './pipes/background-image.pipe';
import {UploadImageWithPreviewComponent} from './common/upload-image-with-preview/upload-image-with-preview.component'; import { UploadImageWithPreviewComponent } from './common/upload-image-with-preview/upload-image-with-preview.component';
import {PlayerContentWrapperComponent} from './common/player-content-wrapper/player-content-wrapper.component'; import { PlayerContentWrapperComponent } from './common/player-content-wrapper/player-content-wrapper.component';
import {CustomHotZoneComponent} from './common/custom-hot-zone/custom-hot-zone.component'; import { CustomHotZoneComponent } from './common/custom-hot-zone/custom-hot-zone.component';
import {UploadVideoComponent} from './common/upload-video/upload-video.component'; import { UploadVideoComponent } from './common/upload-video/upload-video.component';
import {TimePipe} from './pipes/time.pipe'; import { TimePipe } from './pipes/time.pipe';
import {ResourcePipe} from './pipes/resource.pipe'; import { ResourcePipe } from './pipes/resource.pipe';
import {AudioRecorderComponent} from './common/audio-recorder/audio-recorder.component'; import { AudioRecorderComponent } from './common/audio-recorder/audio-recorder.component';
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome'; import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { fas } from '@fortawesome/free-solid-svg-icons'; import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons'; import { far } from '@fortawesome/free-regular-svg-icons';
...@@ -54,15 +54,15 @@ registerLocaleData(zh); ...@@ -54,15 +54,15 @@ registerLocaleData(zh);
FontAwesomeModule FontAwesomeModule
], ],
providers: [ providers: [
{provide: ErrorHandler, useClass: MyErrorHandler}, { provide: ErrorHandler, useClass: MyErrorHandler },
{ provide: NZ_I18N, useValue: zh_CN } { provide: NZ_I18N, useValue: zh_CN }
], ],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })
export class AppModule { export class AppModule {
constructor(library: FaIconLibrary) { constructor(library: FaIconLibrary) {
let fs :any = fas; let fs: any = fas;
let fr :any = far; let fr: any = far;
library.addIconPacks(fs, fr); library.addIconPacks(fs, fr);
} }
} }
...@@ -42,13 +42,14 @@ export class ComponentBase { ...@@ -42,13 +42,14 @@ export class ComponentBase {
// let sp = e.url.split(".mp3"); // let sp = e.url.split(".mp3");
// let u = sp[0] + "_l.mp3"; // let u = sp[0] + "_l.mp3";
// item[key[i]] = u; // item[key[i]] = u;
// console.log("audioName: " + e.name);
// item["audioName"] = e.name || ""; // item["audioName"] = e.name || "";
// } else { // } else {
// item[key[i]] = e.url; // item[key[i]] = e.url;
// } // }
// this.save();
// return; // return;
// } // }
// this.save();
// item = item[key[i]]; // item = item[key[i]];
// } // }
// } // }
...@@ -57,7 +58,7 @@ export class ComponentBase { ...@@ -57,7 +58,7 @@ export class ComponentBase {
* 储存图片数据 * 储存图片数据
* @param e * @param e
*/ */
onImageUploadSuccess(e, key, it = this.item) { onImageUploadSuccess(e, key, it = this.item) {
it[key] = e.url; it[key] = e.url;
this.save(); this.save();
} }
......
...@@ -72,127 +72,156 @@ ...@@ -72,127 +72,156 @@
font-size: 12px; font-size: 12px;
} }
</style> </style>
<div class="model-content"> <div class="model-content">
<div style="padding: 10px;background-color: #fff;"> <div style="padding: 10px;background-color: #fff;">
<div class="border-dashed" style="margin: 20px;width: 1300px;">
<span style="font-size: 20px;">标题文字: </span> <div class="border-dashed" style="margin: 20px;width: 1000px;">
<span style="font-size: 20px;">标题: </span>
<input type="text" nz-input [(ngModel)]="item.title" (blur)="save()"> <input type="text" nz-input [(ngModel)]="item.title" (blur)="save()">
<!-- <span style="margin-right: 20px;font-size: 18px;font-weight: bold;">提示开关 </span> <!-- <span style="font-size: 20px;">题目说明: </span>
<nz-radio-group [ngModel]="item.tipSwitch" (ngModelChange)="customRadioChange($event, item,'tipSwitch')" <input type="text" nz-input [(ngModel)]="item.questionText" (blur)="save()">
style="font-size: 20px;display: flex; align-items: center; justify-content: left; flex-wrap: wrap;"> <span style="font-size: 20px;">题目说明音频: </span>
<label nz-radio nzValue="1">开</label>
<label nz-radio nzValue="0">关</label>
</nz-radio-group> -->
<span style="font-size: 20px;">开始音频: </span>
<div style="display:flex ;"> <div style="display:flex ;">
<div> <div>
<app-audio-recorder [audioUrl]="item.startAudio" <app-audio-recorder [audioUrl]="item.questionTextAudio"
(audioUploaded)="onAudioUploadSuccess($event, 'startAudio',item,'audioName')"></app-audio-recorder> (audioUploaded)="onAudioUploadSuccess($event, 'questionTextAudio',item,'audioName')"></app-audio-recorder>
</div> </div>
<div style="margin: 5px"> <div style="margin: 5px">
<span>{{ item.audioName}}</span> <span>{{ item.audioName}}</span>
</div> </div>
</div> -->
</div>
<div class="border-dashed" style="margin: 20px;width: 1000px;">
<div style="font-size: 20px;">游戏模式: </div>
<nz-radio-group [(ngModel)]="item.recordFlag" (ngModelChange)="save()">
<label nz-radio [nzValue]="true">
<span [style]="{color:item.recordFlag==true ? '#169BD5':'#000'}">录音模式</span>
</label>
<label nz-radio [nzValue]="false">
<span [style]="{color:item.recordFlag==false ? '#169BD5':'#000'}">听音模式</span>
</label>
</nz-radio-group>
</div>
<!-- <div class="border-dashed" style="margin: 20px;width: 1000px;">
<div class="word-input-title">
<div>
<span>游戏背景音乐: </span>
</div>
<div>
<span style="color:rgb(201, 200, 200);margin-left:5px;font-size: 10px;"> *可不传,不传既无背景音乐</span>
</div>
</div> </div>
<div> <div style="display:flex ;margin-top: 10px;">
<span style="font-size: 20px;">提示动画: </span>
<app-upload-dragon-bone style="width: 100%" (save)="onDragonBoneSave($event,item)"
[skeJsonData]="item.imgAni.ske" [texJsonData]="item.imgAni.tex" [texPngData]="item.imgAni.png">
</app-upload-dragon-bone>
<div> <div>
<app-audio-recorder [audioUrl]="item.bgAudio"
(audioUploaded)="onAudioUploadSuccess($event, 'bgAudio',item,'bgAudioName')">
</app-audio-recorder>
</div>
<div style="margin: 5px">
<span>{{ item.bgAudioName}}</span>
</div>
<div style="margin: 5px">
<span style="color: #169BD5;text-decoration: underline;" type="button" nzDanger
(click)="deleteBgAudio()">删除背景音</span>
</div> </div>
</div> </div>
</div> -->
</div>
<div style="margin: 20px;width: 1000px;"> <div style="margin: 20px;width: 1000px;">
<div *ngFor="let question of item.questions; let i = index"> <div *ngFor="let question of item.questions; let i = index">
<div style="display: flex;margin-top: 20px;"> <div style="display: flex;margin-top: 20px;">
<div class="border-solid" style="min-width: 1000px;"> <div class="border-solid" style="min-width: 1000px;">
<div class="word-type-title"> <!-- <div class="word-type-title">
题目{{i+1}} 题目{{i+1}}
</div> </div> -->
<div style="margin-top:15px">
<div class="word-input-title">
<!-- <span style="color:red;margin-left:-15px">* </span> -->
<span>题目文本: </span>
</div>
<input style="font-size: 22px;" class="input-place-red" type="text" placeholder="1~5个字母" nz-input
[(ngModel)]="question.text" (blur)="save()">
</div>
<div class="option-audio">
<div class="word-input-title"> <!-- <div>
题目音频: <div class="word-type-option-title" style="margin-top:10px;">题目音频:</div>
</div> <div style="display:flex ;">
<div style="display: flex">
<div> <div>
<app-audio-recorder [audioUrl]="question.audioUrl" <app-audio-recorder [audioUrl]="question.questionAudio"
(audioUploaded)="onAudioUploadSuccess($event, 'audioUrl', question,'audioName')"> (audioUploaded)="onAudioUploadSuccess($event, 'questionAudio',question,'audioName')">
</app-audio-recorder> </app-audio-recorder>
</div> </div>
<div style="margin: 5px"> <div style="margin: 5px">
<span> <span>{{ question.audioName}}</span>
{{ question.audioName}}
</span>
</div> </div>
</div> </div>
</div> </div> -->
<!-- <div style="margin-top:20px">
<div class="word-type-option-title">倒计时: </div>
<input type="number" nz-input [(ngModel)]="question.duration" (blur)="save()">
</div> -->
<div class="word-type-option-title" style="margin-top:20px;"> <div class="word-type-option-title" style="margin-top:20px;">
选项内容: 题目内容:
</div> </div>
<div *ngFor="let option of question.options; let j = index"> <div *ngFor="let option of question.options; let j = index">
<div style="display: flex;margin-top:20px"> <div style="display: flex;margin-top:20px">
<div class="option-title"> <div class="option-title">
选项{{j+1}} 题目{{j+1}}
</div> </div>
<div class="option-content" style="padding: 15px 30px;"> <div class="option-content" style="padding: 15px 30px;">
<!-- <div style="margin:-15px -30px;width: calc(100%+60px);height: 40px;padding:10px 20px;" [style]="{
<div style="margin:-10px -30px;width: calc(100%+60px);height: 40px;padding:10px 20px;" [style]="{ backgroundColor: option.right ?'#169BD5':'#eee'}">
backgroundColor: option.right ?'#169BD5':'#eee'}">
<label nz-checkbox [(ngModel)]="option.right" (ngModelChange)="save()" <label nz-checkbox [(ngModel)]="option.right" (ngModelChange)="save()"
[style]="{color: option.right ?'#fff':'#000'}">正确答案</label> [style]="{color: option.right ?'#fff':'#000'}">正确答案</label>
</div> </div> -->
<div style="margin-top: 20px;"> <div style="margin-top: 20px;">
<div class="word-type-option-title"> <div class="word-type-option-title">
选项类型: 类型:
</div> </div>
<div style="margin-top: 5px;"> <div style="margin-top: 5px;">
<nz-radio-group [(ngModel)]="option.type" (ngModelChange)="ngChange(i,j)"> <nz-radio-group [(ngModel)]="option.type" (ngModelChange)="ngChange(i,j)">
<label nz-radio nzValue="img"> <label nz-radio nzValue="img">
<span [style]="{color:option.type=='img' ? '#169BD5':'#000'}">图片</span> <span [style]="{color:option.type=='img' ? '#169BD5':'#000'}">图片</span>
</label> </label>
<label nz-radio nzValue="txt"> <label nz-radio nzValue="img_txt">
<span [style]="{color:option.type=='txt' ? '#169BD5':'#000'}">文字</span> <span [style]="{color:option.type=='img_txt' ? '#169BD5':'#000'}">图片+文本</span>
</label>
<label nz-radio nzValue="img_audio">
<span [style]="{color:option.type=='img_audio' ? '#169BD5':'#000'}">图片+音频</span>
</label>
<label nz-radio nzValue="img_txt_audio">
<span [style]="{color:option.type=='img_txt_audio' ? '#169BD5':'#000'}">图片+文本+音频</span>
</label> </label>
</nz-radio-group> </nz-radio-group>
</div> </div>
</div> </div>
<div *ngIf="option.type=='img'" style="margin-top: 15px;"> <div style="margin-top: 25px;">
<div class="option-img"> <div class="option-img">
<div> <div style="width: 200px;">
<div class="word-input-title"> <span style="font-size: 20px;">图片:</span>
图片: <app-upload-image-with-preview [picUrl]="option.image"
</div> (imageUploaded)="onImageUploadSuccess($event, 'image',option)">
<div style="width: 300px;"> </app-upload-image-with-preview>
<app-upload-image-with-preview [picUrl]="option.image"
(imageUploaded)="onImageUploadSuccess($event, 'image', option)">
</app-upload-image-with-preview>
</div>
</div> </div>
</div> </div>
<!-- <div class="option-audio"> <div class="option-text">
<div class="word-input-title"> <div *ngIf="option.type=='img_txt'|| option.type=='img_txt_audio' " style="width: 200px">
音频: <span style="font-size: 20px;">文本</span>
<input type="text" nz-input [(ngModel)]="option.text" (blur)="save()">
</div> </div>
</div>
<div class="option-audio" *ngIf="option.type=='img_audio' || option.type=='img_txt_audio'">
<span style="font-size: 20px;">选项音频:</span>
<div style="display: flex"> <div style="display: flex">
<div> <div>
<app-audio-recorder [audioUrl]="option.audio" <app-audio-recorder [audioUrl]="option.audio"
(audioUploaded)="onAudioUploadSuccess($event, 'audio', option,'audioName')"> (audioUploaded)="onAudioUploadSuccess($event,'audio',option,'audioName')">
</app-audio-recorder> </app-audio-recorder>
</div> </div>
<div style="margin: 5px"> <div style="margin: 5px">
...@@ -201,61 +230,55 @@ ...@@ -201,61 +230,55 @@
</span> </span>
</div> </div>
</div> </div>
</div> -->
</div>
<div style="margin-top:15px">
<div class="word-input-title">
<!-- <span style="color:red;margin-left:-15px">* </span> -->
<span>文本: </span>
</div> </div>
<input style="font-size: 22px;" class="input-place-red" type="text" placeholder="" nz-input <div class="option-time" *ngIf="item.recordFlag==true">
[(ngModel)]="option.text" (blur)="save()"> <div class="word-type-option-title">录音倒计时: </div>
</div> <input type="number" nz-input [(ngModel)]="option.duration" (blur)="save()">
<!-- <div class="option-time"> <span style="font-size: 20px;">录音文本</span>
<div class="word-input-title"> <input type="text" nz-input [(ngModel)]="option.content" (blur)="save()">
<span>录音时间: </span>
</div> </div>
<input type="number" placeholder="录音超过时间将自动提交成绩" nz-input [(ngModel)]="option.time" (blur)="save()"> </div>
</div> -->
<!-- </div> -->
</div> </div>
<div class="option-btns"> <div class="option-btns">
<button class="btn-red" nz-button nzType="default" nzDanger (click)="removeoption(i,j)">删除选项</button> <button class="btn-red" nz-button nzType="default" nzDanger (click)="removeoption(i,j)">删除题目</button>
<button class="btn-blue" style="margin-top: 10px;" nz-button nzType="default" nzDanger <button class="btn-blue" style="margin-top: 10px;" nz-button nzType="default" nzDanger
(click)="copyoption(i,j)">复制选项</button> (click)="copyOption(i,j)">复制题目</button>
</div> </div>
</div> </div>
</div> </div>
<div style="margin-left: 69px;margin-top: 15px;"> <div style="margin-left: 69px;margin-top: 15px;">
<button class="btn-blue" nz-button nzType="default" nzDanger (click)="addoption(i)">+增加选项</button> <button class="btn-blue" nz-button nzType="default" nzDanger (click)="addoption(i)">+增加题目</button>
</div> </div>
</div> </div>
<div style="margin:0 20px"> <div style="margin:0 20px">
<button class="btn-red" nz-button nzType="default" nzDanger (click)="removequestion(i)">删除题目</button> <!-- <button class="btn-red" nz-button nzType="default" nzDanger (click)="removequestion(i)">删除题目</button> -->
</div> </div>
</div> </div>
</div>
<div style="margin-top: 20px;">
<button class="btn-blue" style="width: 1000px; height: 50px;" nz-button nzType="default" nzDanger
(click)="addquestion()">+增加题目</button>
</div> </div>
<!-- <button class="btn-blue" style="margin-top:10px;width: 1000px; height: 50px;" nz-button nzType="default" nzDanger
(click)="addquestion()">+增加题目</button> -->
</div> </div>
</div>
<nz-modal [(nzVisible)]="isVisible" [nzTitle]="null" [nzContent]="modalContent" [nzFooter]="modalFooter"
(nzOnCancel)="handleCancel()">
<ng-template #modalContent>
<p>{{deleteTitle}}</p>
</ng-template>
<ng-template #modalFooter>
<button nz-button nzType="default" (click)="handleCancel()">取消</button>
<button nz-button nzType="primary" (click)="handleOk()">确定</button> <nz-modal [(nzVisible)]="isVisible" [nzTitle]="null" [nzContent]="modalContent" [nzFooter]="modalFooter"
</ng-template> (nzOnCancel)="handleCancel()">
</nz-modal>
<ng-template #modalContent>
<p>{{deleteTitle}}</p>
</ng-template>
<ng-template #modalFooter>
<button nz-button nzType="default" (click)="handleCancel()">取消</button>
<button nz-button nzType="primary" (click)="handleOk()">确定</button>
</ng-template>
</nz-modal>
</div>
</div> </div>
\ No newline at end of file
...@@ -2,9 +2,6 @@ import { Component, OnDestroy, OnChanges, OnInit, ApplicationRef, ChangeDetector ...@@ -2,9 +2,6 @@ import { Component, OnDestroy, OnChanges, OnInit, ApplicationRef, ChangeDetector
import { ComponentBase } from './ComponentBase'; import { ComponentBase } from './ComponentBase';
import { MetaFormCreator } from './mataFormCreator'; import { MetaFormCreator } from './mataFormCreator';
let replaceAll = function (str, s1, s2) {
return str.replace(new RegExp(s1, "gm"), s2);
}
@Component({ @Component({
selector: 'app-form', selector: 'app-form',
templateUrl: './form.component.html', templateUrl: './form.component.html',
...@@ -12,19 +9,21 @@ let replaceAll = function (str, s1, s2) { ...@@ -12,19 +9,21 @@ let replaceAll = function (str, s1, s2) {
}) })
export class FormComponent extends ComponentBase implements OnInit, OnChanges, OnDestroy { export class FormComponent extends ComponentBase implements OnInit, OnChanges, OnDestroy {
// 储存数据用 // 储存数据用
saveKey = "ngt06_ball"; saveKey = "hy01_danci";
item = { item = {
imgAni: { recordFlag: false,
ske: {}, title: "",
tex: {}, questionText: "",
png: {} questionTextAudio: "",
}, questions: [{
startAudio: "", questionAudio: "",
audioName: "", duration: 120,
title: "判断对错", options: []
}],
questions: [], bgAudio: "",
bgAudioName: "",
audioName: ""
}; };
isVisible = false; isVisible = false;
...@@ -42,6 +41,8 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O ...@@ -42,6 +41,8 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
this.deleteCallback && this.deleteCallback(); this.deleteCallback && this.deleteCallback();
this.handleCancel(); this.handleCancel();
} }
init(): void { init(): void {
console.log(new MetaFormCreator().create()); console.log(new MetaFormCreator().create());
} }
...@@ -52,7 +53,7 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O ...@@ -52,7 +53,7 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
this.save(); this.save();
}) })
} }
copyoption(i, j) { copyOption(i, j) {
let data = this.item.questions[i].options[j]; let data = this.item.questions[i].options[j];
this.item.questions[i].options.push(JSON.parse(JSON.stringify(data))); this.item.questions[i].options.push(JSON.parse(JSON.stringify(data)));
this.save(); this.save();
...@@ -60,69 +61,39 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O ...@@ -60,69 +61,39 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
addoption(i) { addoption(i) {
this.item.questions[i].options.push({ this.item.questions[i].options.push({
type: "txt", type: "",
image: "", image: "",
audio: "", audio: "",
text: "", text: "",
time: "", duration: '',
content: '',
right: false right: false
}); });
this.save(); this.save();
} }
removequestion(idx) { removequestion(i) {
this.openDelete("确定删除题目?", () => { this.openDelete("确定删除题目?", () => {
this.item.questions.splice(idx, 1); this.item.questions.splice(i, 1);
this.save(); this.save();
}) })
} }
addquestion() { addquestion() {
this.item.questions.push({ this.item.questions.push({
options: [], questionAudio: "",
type: "txt", duration: 120,
audioUrl: "", options: []
audioName: "",
text: "",
}); });
this.save(); this.save();
} }
ngChange(i, j) {
this.save();
}
changeMain(question) { deleteBgAudio() {
//输出的数据可以识别到\n的换行符 this.item.bgAudio = "";
let arr = question.contentMain.split(" "); this.item.bgAudioName = "";
let oldArr = question.contentArr.concat();
let contetArr = arr.map(ar => {
let obj = {
text: `${ar}`,//replaceAll(`${ar}`, "\n", "<br/>"),
block: false,
check: 1,
}
for (let i = 0; i < oldArr.length; i++) {
if (obj.text == oldArr[i].text) {
obj.block = oldArr[i].block;
obj.check = oldArr[i].check;
oldArr.splice(i, 1);
break;
}
}
return obj;
})
question.contentArr = contetArr;
console.log(contetArr)
this.save();
}
onBlock(item, vis) {
item.block = vis;
this.save(); this.save();
} }
ngChange(i, j) {
onDragonBoneSave(e, item) {
console.log(e);
this.save(); 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