Commit a328c39d authored by Tt's avatar Tt

表上传

parent 07b64184
...@@ -11,14 +11,14 @@ ...@@ -11,14 +11,14 @@
padding: 20px; padding: 20px;
} }
.option-title { .letterList-title {
color: #000; color: #000;
font-size: 18px; font-size: 18px;
min-width: 70px; min-width: 70px;
/* margin-right: 10px; */ /* margin-right: 10px; */
} }
.option-content { .letterList-content {
border: 1px dashed #333; border: 1px dashed #333;
border-radius: 1px; border-radius: 1px;
padding: 20px; padding: 20px;
...@@ -76,10 +76,10 @@ ...@@ -76,10 +76,10 @@
<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: 1000px;"> <!-- <div class="border-dashed" style="margin: 20px;width: 1000px;">
<span style="font-size: 20px;">标题: </span> <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="font-size: 20px;">题目说明: </span> <span style="font-size: 20px;">题目说明: </span>
<input type="text" nz-input [(ngModel)]="item.questionText" (blur)="save()"> <input type="text" nz-input [(ngModel)]="item.questionText" (blur)="save()">
<span style="font-size: 20px;">题目说明音频: </span> <span style="font-size: 20px;">题目说明音频: </span>
<div style="display:flex ;"> <div style="display:flex ;">
...@@ -90,23 +90,23 @@ ...@@ -90,23 +90,23 @@
<div style="margin: 5px"> <div style="margin: 5px">
<span>{{ item.audioName}}</span> <span>{{ item.audioName}}</span>
</div> </div>
</div> --> </div>
</div> </div>
<div class="border-dashed" style="margin: 20px;width: 1000px;"> <div class="border-dashed" style="margin: 20px;width: 1000px;">
<div style="font-size: 20px;">游戏模式: </div> <div style="font-size: 20px;">游戏模式: </div>
<nz-radio-group [(ngModel)]="item.recordFlag" (ngModelChange)="save()"> <nz-radio-group [(ngModel)]="item.onlineFlg" (ngModelChange)="save()">
<label nz-radio [nzValue]="true"> <label nz-radio [nzValue]="true">
<span [style]="{color:item.recordFlag==true ? '#169BD5':'#000'}">录音模式</span> <span [style]="{color:item.onlineFlg==true ? '#169BD5':'#000'}">联机版</span>
</label> </label>
<label nz-radio [nzValue]="false"> <label nz-radio [nzValue]="false">
<span [style]="{color:item.recordFlag==false ? '#169BD5':'#000'}">听音模式</span> <span [style]="{color:item.onlineFlg==false ? '#169BD5':'#000'}">单机版</span>
</label> </label>
</nz-radio-group> </nz-radio-group>
</div> </div>
<!-- <div class="border-dashed" style="margin: 20px;width: 1000px;"> <div class="border-dashed" style="margin: 20px;width: 1000px;">
<div class="word-input-title"> <div class="word-input-title">
<div> <div>
<span>游戏背景音乐: </span> <span>游戏背景音乐: </span>
...@@ -135,10 +135,13 @@ ...@@ -135,10 +135,13 @@
<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>
</div>
<!-- <div> <!-- <div>
<div class="word-type-option-title" style="margin-top:10px;">题目音频:</div> <div class="word-type-option-title" style="margin-top:10px;">题目音频:</div>
...@@ -161,106 +164,108 @@ ...@@ -161,106 +164,108 @@
<div class="word-type-option-title" style="margin-top:20px;"> <div class="word-type-option-title" style="display: flex; margin-top:20px;">
题目内容: 题干:
</div> <!-- <div *ngFor="let question of question; let j = index" style="margin-left: 30px;"> -->
<div>
<div *ngFor="let option of question.options; let j = index"> <div style="margin-left: 30px;">
<div style="display: flex;margin-top:20px"> <nz-radio-group [(ngModel)]="question.type" (ngModelChange)="ngChange(i)">
<div class="option-title">
题目{{j+1}}
</div>
<div class="option-content" style="padding: 15px 30px;">
<!-- <div style="margin:-15px -30px;width: calc(100%+60px);height: 40px;padding:10px 20px;" [style]="{
backgroundColor: option.right ?'#169BD5':'#eee'}">
<label nz-checkbox [(ngModel)]="option.right" (ngModelChange)="save()"
[style]="{color: option.right ?'#fff':'#000'}">正确答案</label>
</div> -->
<div style="margin-top: 20px;">
<div class="word-type-option-title">
类型:
</div>
<div style="margin-top: 5px;">
<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:question.type=='img' ? '#169BD5':'#000'}">图片</span>
</label>
<label nz-radio nzValue="img_txt">
<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>
<label nz-radio nzValue="img_txt_audio"> <label nz-radio nzValue="imgVideo">
<span [style]="{color:option.type=='img_txt_audio' ? '#169BD5':'#000'}">图片+文本+音频</span> <span [style]="{color:question.type=='imgVideo' ? '#169BD5':'#000'}">图片+音频</span>
</label> </label>
</nz-radio-group> </nz-radio-group>
</div> </div>
</div>
<div style="margin-top: 25px;"> <div style="margin-top: 15px;margin-left: 28px;">
<div class="option-img"> <div class="option-img">
<div style="width: 200px;"> <div *ngIf="question.type=='img'" style="width: 200px;">
<span style="font-size: 20px;">图片:</span> <span style="font-size: 20px;">图片:</span>
<app-upload-image-with-preview [picUrl]="option.image" <app-upload-image-with-preview [picUrl]="question.image"
(imageUploaded)="onImageUploadSuccess($event, 'image',option)"> (imageUploaded)="onImageUploadSuccess($event, 'image',question)">
</app-upload-image-with-preview> </app-upload-image-with-preview>
</div> </div>
</div> </div>
<div class="option-text"> <div class="option-text">
<div *ngIf="option.type=='img_txt'|| option.type=='img_txt_audio' " style="width: 200px"> <div *ngIf="question.type=='imgVideo'" style="width: 200px">
<span style="font-size: 20px;">文本</span> <span style="font-size: 20px;">图片</span>
<input type="text" nz-input [(ngModel)]="option.text" (blur)="save()"> <app-upload-image-with-preview [picUrl]="question.image"
</div> (imageUploaded)="onImageUploadSuccess($event, 'image',question)">
</div> </app-upload-image-with-preview>
<div class="option-audio">
<div class="option-audio" *ngIf="option.type=='img_audio' || option.type=='img_txt_audio'">
<span style="font-size: 20px;">选项音频:</span> <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]="question.audio"
(audioUploaded)="onAudioUploadSuccess($event,'audio',option,'audioName')"> (audioUploaded)="onAudioUploadSuccess($event,'audio',question,'audioName')">
</app-audio-recorder> </app-audio-recorder>
</div> </div>
<div style="margin: 5px"> <div style="margin: 5px">
<span> <span>
{{ option.audioName}} {{ question.audioName}}
</span> </span>
</div> </div>
</div> </div>
</div> </div>
<div class="option-time" *ngIf="item.recordFlag==true">
<div class="word-type-option-title">录音倒计时: </div>
<input type="number" nz-input [(ngModel)]="option.duration" (blur)="save()">
<span style="font-size: 20px;">录音文本</span>
<input type="text" nz-input [(ngModel)]="option.content" (blur)="save()">
</div> </div>
</div> </div>
<!-- <div class="option-time">
</div> -->
</div>
</div>
<!-- </div> -->
</div>
<div style="display: flex; margin-top: 20px;">
<span style="font-size: 18px;">预览:</span>
<div type="text" name="" id="" style="margin-left: 32px;" class="letterList-content">
<span *ngFor="let letterList of question.letterList; let j = index">
<!-- 字母{{j}}的值为: -->{{letterList.text}}
</span>
</div>
</div>
<div *ngFor="let letterList of question.letterList; let j = index">
<div style="display: flex;margin-top:20px">
<div class="letterList-title">
选项{{j+1}}
</div>
<div class="letterList-content" style="padding: 15px 30px;">
<!-- <div style="margin:-15px -30px;width: calc(100%+60px);height: 40px;padding:10px 20px;" [style]="{
backgroundColor: option.right ?'#169BD5':'#eee'}">
<label nz-checkbox [(ngModel)]="option.right"
[style]="{color: option.right ?'#fff':'#000'}">正确答案</label>
</div> -->
字母:<input type="text" [(ngModel)]="letterList.text" (ngModelChange)="save()">
</div> </div>
<div class="option-btns">
<button class="btn-red" nz-button nzType="default" nzDanger (click)="removeoption(i,j)">删除题目</button> <div class="letterList-btns">
<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>
<!-- <button class="btn-blue" style="margin-top:10px;width: 1000px; height: 50px;" nz-button nzType="default" nzDanger <button class="btn-blue" style="margin-top:10px;width: 1000px; height: 50px;" nz-button nzType="default" nzDanger
(click)="addquestion()">+增加题目</button> --> (click)="addquestion()">+增加题目</button>
</div> </div>
......
...@@ -9,23 +9,18 @@ import { MetaFormCreator } from './mataFormCreator'; ...@@ -9,23 +9,18 @@ import { MetaFormCreator } from './mataFormCreator';
}) })
export class FormComponent extends ComponentBase implements OnInit, OnChanges, OnDestroy { export class FormComponent extends ComponentBase implements OnInit, OnChanges, OnDestroy {
// 储存数据用 // 储存数据用
saveKey = "hy01_danci"; saveKey = "hy_04";
item = { item = {
recordFlag: false, onlineFlg: false,
title: "", title: "",
questionText: "", questionText: "",
questionTextAudio: "", questionTextAudio: "",
questions: [{ questions: [],
questionAudio: "",
duration: 120,
options: []
}],
bgAudio: "", bgAudio: "",
bgAudioName: "", bgAudioName: "",
audioName: "" audioName: ""
}; };
isVisible = false; isVisible = false;
deleteTitle = "是否删除题目"; deleteTitle = "是否删除题目";
deleteCallback = function () { }; deleteCallback = function () { };
...@@ -44,31 +39,25 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O ...@@ -44,31 +39,25 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
init(): void { init(): void {
console.log(new MetaFormCreator().create()); /* console.log(new MetaFormCreator().create()); */
} }
removeoption(i, j) { removeoption(i, j) {
this.openDelete("确定删除选项?", () => { this.openDelete("确定减少选项?", () => {
this.item.questions[i].options.splice(j, 1); this.item.questions[i].letterList.splice(j, 1);
this.save(); this.save();
}) })
} }
copyOption(i, j) { copyOption(i, j) {
let data = this.item.questions[i].options[j]; let data = this.item.questions[i].letterList[j];
this.item.questions[i].options.push(JSON.parse(JSON.stringify(data))); this.item.questions[i].letterList.push(JSON.parse(JSON.stringify(data)));
this.save(); this.save();
} }
addoption(i) { addoption(i) {
this.item.questions[i].options.push({ this.item.questions[i].letterList.push({
type: "", text: ''
image: "", })
audio: "",
text: "",
duration: '',
content: '',
right: false
});
this.save(); this.save();
} }
...@@ -83,7 +72,12 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O ...@@ -83,7 +72,12 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
this.item.questions.push({ this.item.questions.push({
questionAudio: "", questionAudio: "",
duration: 120, duration: 120,
options: [] type: "img",
image: "",
audio: "",
text: "",
right: false,
letterList: [],
}); });
this.save(); this.save();
} }
...@@ -93,7 +87,7 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O ...@@ -93,7 +87,7 @@ export class FormComponent extends ComponentBase implements OnInit, OnChanges, O
this.item.bgAudioName = ""; this.item.bgAudioName = "";
this.save(); this.save();
} }
ngChange(i, j) { ngChange(i) {
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