Commit 00dd4eef authored by Chen Jiping's avatar Chen Jiping

perf:完成配置页面开发

parent 8a51c964
......@@ -128,5 +128,8 @@
}
}
},
"defaultProject": "ng-template-generator"
"defaultProject": "ng-template-generator",
"cli": {
"analytics": "9c72016e-fa29-4a4b-bddc-fc1fe6a70fa7"
}
}
\ No newline at end of file
import { Obj } from './ObjBean';
export class BackgroundBean extends Obj {
/**皮肤标识 */
skinFlag: String;
/**左上 */
lt: Obj = new Obj();
/**中上 */
mt: Obj = new Obj();
/**右上 */
rt: Obj = new Obj();
/**左中 */
lm: Obj = new Obj();
/**右中 */
rm: Obj = new Obj();
/**左下 */
lb: Obj = new Obj();
/**中下 */
mb: Obj = new Obj();
rb: Obj = new Obj();
}
\ No newline at end of file
import { Obj } from './ObjBean';
export class ExercisesBean extends Obj {
answerIndex: number;
wordArr: Array<WordBean> = [];
}
export class WordBean extends Obj {
letterArr: Array<LetterBean> = [];
}
export class LetterBean extends Obj {
/** 是否填空:0-否, 1 - 是*/
isFill: String = '0';
/** 是否着色:0-否, 1 - 是*/
isColor: String = '0';
}
export function getDefaultExercisesBean() {
const exercises = new ExercisesBean();
return exercises;
}
export function getDefaultLetterBean() {
const letter = new LetterBean();
return letter;
}
\ No newline at end of file
export class Obj{
/**音频材料 */
audioUrl: String;
/**图片材料 */
picUrl:String;
val : String;
}
\ No newline at end of file
import { Obj } from './ObjBean';
export class TitleBean extends Obj{
part1 : String;
part2 : String;
}
export function getDefaultTitle(){
const title = new TitleBean();
title.part1 = 'C';
title.part2 = 'Listen point and repeat.';
return title;
}
\ No newline at end of file
<div class="model-content">
<div style="position: absolute; left: 200px; top: 100px; width: 800px;">
<div nz-row>
<div nz-col nzOffset='4'>
<h1 nz-title>课程练习内容编辑</h1>
</div>
</div>
<div nz-row>
<div nz-col [nzSpan]="20" nzOffset="2">
<div nz-form>
<div id='title-anchor'>
<nz-divider nzText="课程名称" nzOrientation="left"></nz-divider>
<nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="part1">标题1</nz-form-label>
<nz-form-control [nzSpan]="6">
<nz-input-group nzAddOnBefore="Part">
<input type="text" id="part1" nz-input [(ngModel)]="item.title.part1" (blur)="save()">
</nz-input-group>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="part2">标题2</nz-form-label>
<nz-form-control [nzSpan]="6">
<input nz-input type="text" id="part2" [(ngModel)]="item.title.part2" (blur)="save()">
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="3" nzFor="audioUrl">发音</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder [audioUrl]="item.title.audio_url" id="audioUrl"
(audioUploaded)="onAudioUploadSuccess($event, item.title, 'audioUrl')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
</div>
<div id='listen-anchor'>
<nz-divider nzText="听力材料" nzOrientation="left"></nz-divider>
<nz-form-item>
<nz-form-control [nzSpan]="6" nzOffset="3">
<app-audio-recorder id="item.listenAudioUrl" [audioUrl]="item.listenAudioUrl"
(audioUploaded)="onAudioUploadSuccess($event, item, 'listenAudioUrl')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
</div>
<div id='listen-anchor'>
<nz-divider nzText="背景图片" nzOrientation="left"></nz-divider>
<nz-form-item>
<button style="margin: 10px;" nz-button nzType="danger" (click)="clearBg()">
<span>清空</span>
</button>
</nz-form-item>
<div *ngIf="item.skin == 'A'">
<nz-form-item>
<nz-form-label [nzSpan]="2">左上</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinA.lt.picUrl"
(imageUploaded)="onImageUploadSuccess($event, item.skinA.lt, 'picUrl')">
</app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="2">中上</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinA.mt.picUrl"
(imageUploaded)="onImageUploadSuccess($event, item.skinA.mt, 'picUrl')">
</app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="2">右上</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinA.rt.picUrl"
(imageUploaded)="onImageUploadSuccess($event, item.skinA.rt, 'picUrl')">
</app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2">左中</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinA.lm.picUrl"
(imageUploaded)="onImageUploadSuccess($event, item.skinA.lm, 'picUrl')">
</app-upload-image-with-preview>
</nz-form-control>
<div nz-col nzSpan="8"></div>
<nz-form-label [nzSpan]="2">右中</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinA.rm.picUrl"
(imageUploaded)="onImageUploadSuccess($event, item.skinA.rm, 'picUrl')">
</app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2">左下</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinA.lb.picUrl"
(imageUploaded)="onImageUploadSuccess($event, item.skinA.lb, 'picUrl')">
</app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="2">中下</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinA.mb.picUrl"
(imageUploaded)="onImageUploadSuccess($event, item.skinA.mb, 'picUrl')">
</app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="2">右下</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinA.rb.picUrl"
(imageUploaded)="onImageUploadSuccess($event, item.skinA.rb, 'picUrl')">
</app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
</div>
<div *ngIf="item.skin == 'B'">
<nz-form-item>
<nz-form-label [nzSpan]="2">左上</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinB.lt.picUrl"
(imageUploaded)="onImageUploadSuccess($event, item.skinB.lt, 'picUrl')">
</app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="2">中上</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinB.mt.picUrl"
(imageUploaded)="onImageUploadSuccess($event, item.skinB.mt, 'picUrl')">
</app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="2">右上</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinB.rt.picUrl"
(imageUploaded)="onImageUploadSuccess($event, item.skinB.rt, 'picUrl')">
</app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2">左中</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinB.lm.picUrl"
(imageUploaded)="onImageUploadSuccess($event, item.skinB.lm, 'picUrl')">
</app-upload-image-with-preview>
</nz-form-control>
<div nz-col nzSpan="8"></div>
<nz-form-label [nzSpan]="2">右中</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinB.rm.picUrl"
(imageUploaded)="onImageUploadSuccess($event, item.skinB.rm, 'picUrl')">
</app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2">左下</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinB.lb.picUrl"
(imageUploaded)="onImageUploadSuccess($event, item.skinB.lb, 'picUrl')">
</app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="2">中下</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinB.mb.picUrl"
(imageUploaded)="onImageUploadSuccess($event, item.skinB.mb, 'picUrl')">
</app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="2">右下</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinB.rb.picUrl"
(imageUploaded)="onImageUploadSuccess($event, item.skinB.rb, 'picUrl')">
</app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
</div>
</div>
</div>
</div>
</div>
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
<div nz-row>
<div nz-col [nzSpan]="20" nzOffset="2">
<nz-card nzTitle="内容">
<app-upload-image-with-preview
[picUrl]="item.pic_url"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')"
></app-upload-image-with-preview>
<app-audio-recorder
[audioUrl]="item.audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"
></app-audio-recorder>
<app-custom-hot-zone></app-custom-hot-zone>
<app-upload-video></app-upload-video>
<app-lesson-title-config></app-lesson-title-config>
<nz-tabset>
<nz-tab nzTitle="内容-{{j+1}}" *ngFor="let data of item.exercisesArr;let j = index">
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="answerIndex">答案顺序</nz-form-label>
<nz-form-control [nzSpan]="6">
<nz-input-number [nzMin]="1" [nzMax]='8' [(ngModel)]="data.answerIndex"
(ngModelChange)="saveIndex(data)">
</nz-input-number>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6">图片</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="data.picUrl"
(imageUploaded)="onImageUploadSuccess($event, data, 'picUrl')">
</app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="exercises">操作</nz-form-label>
<nz-form-control [nzSpan]="6">
<button nz-button nzType="dashed" class="add-btn" id="add-btn" (click)="addWord(data, 'wordArr')">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加单词
</button>
</nz-form-control>
</nz-form-item>
<div *ngFor="let word of data.wordArr;let m = index" class="card-item" style="padding: 0.5vw;">
<nz-card nzTitle="单词-{{m+1}}">
<nz-form-item>
<button style="margin: 10px;" nz-button nzType="danger" (click)="deleteWord(data, 'wordArr', m)">
<span>删除</span>
</button>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="{{m}}.audioUrl">音频</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder id="{{m}}.audioUrl" [audioUrl]="word.audioUrl"
(audioUploaded)="onAudioUploadSuccess($event, word, 'audioUrl')">
</app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6">单词拆分</nz-form-label>
<nz-form-control [nzSpan]="6">
<button nz-button nzType="dashed" class="add-btn" id="add-btn"
(click)="addLetter(word, 'letterArr')">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
</button>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6">单词预览</nz-form-label>
<nz-form-control [nzSpan]="18">
<span nz-text>
<div *ngIf="item.skin == 'A'">
<label *ngFor="let letter of word.letterArr;let n = index"
[ngStyle]="{'text-decoration':letter.isFill=='1'?'underline':'none','font-size':'40px'}">{{letter.val}}</label>
</div>
<div *ngIf="item.skin == 'B'">
<label *ngFor="let letter of word.letterArr;let n = index"
[ngStyle]="{'text-decoration':letter.isFill=='1'?'underline':'none','font-size':'40px'}">{{letter.val}}</label>
</div>
</span>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control [nzOffset]="2" [nzSpan]="16">
<nz-table #lettersTable nzBordered nzTitle="按照单词填空需要进行拆分填写" [nzData]="word.letterArr"
[nzShowPagination]=false>
<thead>
<tr>
<th>序号</th>
<th>字母组合</th>
<th>是否填空</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of lettersTable.data;let p = index">
<td>{{ p+1 }}</td>
<td *ngIf="row.isFill == '1'"><input type="text" nz-input placeholder="max length is 1"
[(ngModel)]="row.val" (blur)="save()" maxlength="1"></td>
<td *ngIf="row.isFill == '0'"><input type="text" nz-input placeholder="请录入字母(组合)"
[(ngModel)]="row.val" (blur)="save()"></td>
<td>
<nz-radio-group [(ngModel)]="row.isFill" (ngModelChange)="save()">
<label nz-radio nzValue="1"></label>
<label nz-radio nzValue="0"></label>
</nz-radio-group>
</td>
<td>
<a (click)="delLetter(word, 'letterArr', p)">delete</a>
</td>
</tr>
</tbody>
</nz-table>
</nz-form-control>
</nz-form-item>
</nz-card>
</div>
</nz-tab>
</div>
</nz-tabset>
</nz-card>
</div>
</div>
</div>
\ No newline at end of file
import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef} from '@angular/core';
import { Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message'
import { TitleBean } from '../bean/TitleBean';
import { getDefaultExercisesBean, getDefaultLetterBean, WordBean } from '../bean/ExercisesBean';
import { BackgroundBean } from '../bean/BackgoundBean';
@Component({
selector: 'app-form',
......@@ -10,12 +13,12 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用
saveKey = "test_0011";
saveKey = "YM4-10";
// 储存对象
item;
constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef) {
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef, private message: NzMessageService) {
}
......@@ -24,8 +27,16 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item = {};
this.item.skinA = new BackgroundBean();
this.item.skinB = new BackgroundBean();
this.item.title = new TitleBean();
this.item.exercisesArr = [];
// 获取存储的数据
(<any> window).courseware.getData((data) => {
(<any>window).courseware.getData((data) => {
if (data) {
this.item = data;
......@@ -50,7 +61,39 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
init() {
console.log(this.item);
if (!this.item.title) {
this.item.title = new TitleBean();
}
//设置默认皮肤
if (!this.item.skin) {
this.item.skin = "A";
}
if (!this.item.skinA) {
this.item.skinA = new BackgroundBean();
}
if (!this.item.skinB) {
this.item.skinB = new BackgroundBean();
}
if (!this.item.exercisesArr) {
this.item.exercisesArr = [];
}
let len = this.item.exercisesArr.length;
if (len < 4) {
for (let i = len; i < 4; ++i) {
const exercises = getDefaultExercisesBean();
this.item.exercisesArr.push(exercises);
}
}
}
......@@ -58,9 +101,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存图片数据
* @param e
*/
onImageUploadSuccess(e, key) {
onImageUploadSuccess(e, item, key) {
this.item[key] = e.url;
item[key] = e.url;
this.save();
}
......@@ -68,19 +111,48 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存音频数据
* @param e
*/
onAudioUploadSuccess(e, key) {
onAudioUploadSuccess(e, item, key) {
this.item[key] = e.url;
item[key] = e.url;
this.save();
}
saveIndex(item) {
console.log(item);
let canSave = true;
for (let i = 0; i < this.item.exercisesArr.length; ++i) {
let exercises = this.item.exercisesArr[i];
if (item == exercises) {
continue;
}
else if (exercises.answerIndex == item.answerIndex) {
canSave = false;
break;
}
}
if (canSave) {
this.save();
}
else {
let id = this.message.error('已经存在相同的顺序号', { nzDuration: 0 }).messageId;
setTimeout(() => {
this.message.remove(id);
}, 2500);
}
}
/**
* 储存数据
*/
save() {
(<any> window).courseware.setData(this.item, null, this.saveKey);
(<any>window).courseware.setData(this.item, null, this.saveKey);
this.refresh();
}
......@@ -93,5 +165,48 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}, 1);
}
addLetter(word, key) {
let letter = getDefaultLetterBean();
word[key] = [...word[key], letter];
this.save();
}
delLetter(word, key, index) {
if (index !== -1) {
word[key].splice(index, 1);
word[key] = [...word[key]];
this.save();
}
}
clearBg() {
if (this.item.skin === 'A') {
this.item.skinA = new BackgroundBean();
}
else {
this.item.skinB = new BackgroundBean();
}
this.save();
}
addWord(exercises, key) {
let word = new WordBean();
exercises[key] = [...exercises[key], word];
this.save();
}
deleteWord(exercises, key, index) {
if (index !== -1) {
exercises[key].splice(index, 1);
exercises[key] = [...exercises[key]];
this.save();
}
}
}
This source diff could not be displayed because it is too large. You can view the blob instead.
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