Commit 5735033e authored by 李维's avatar 李维

add form

parent 0fd3e414
...@@ -128,5 +128,8 @@ ...@@ -128,5 +128,8 @@
} }
} }
}, },
"defaultProject": "ng-template-generator" "defaultProject": "ng-template-generator",
"cli": {
"analytics": false
}
} }
\ No newline at end of file
@import '../style/common_mixin.css';
.model-content {
width: 100%;
height: 100%;
}
.radioPaire {
float: left;
margin: 3px;
border-style: dashed;
border-color: #000;
border-width: 1px;
}
.border {
border-radius: 20px;
border-style: dashed;
padding: 20px;
margin: 20px;
/*width: 500px; */
/*//border-radius: 20px;*/
/*//border-width: 2px;*/
/*//border-color: #000000;*/
}
.border-lite {
border: 2px dashed #ddd;
border-radius: 0.5rem;
padding: 10px;
margin: 10px;
}
<div class="model-content"> <div class="model-content">
<div class="card-config">
<div style="padding: 10px;"> <div *ngFor="let item of contentObj.dataArray; let i = index" class="card-item" style="padding: 0.5vw; min-width: 900px;" >
<div class="card-item-content border">
<div style="width: 300px;" align='center'> <div class="card-item-content">
<span>图1: </span> <div class="title" >
<app-upload-image-with-preview 第-<strong>{{ i + 1 }}</strong>-题
[picUrl]="item.pic_url"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')">
</app-upload-image-with-preview>
</div> </div>
<div style="width: 300px; margin-top: 5px;" align='center'> <div class="section" >
<span>图2: </span> <div class="section-title" >
<app-upload-image-with-preview 题干
[picUrl]="item.pic_url_2" </div>
(imageUploaded)="onImageUploadSuccess($event, 'pic_url_2')"> <div class="section-content">
</app-upload-image-with-preview> <div style="flex:1">
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
<span>音频</span>
</div>
<div style="flex:11">
<app-audio-recorder [audioUrl]="item.audio_url1" (audioUploaded)="onAudioUploadSuccessByItem($event, item, 'audio_url1')" ></app-audio-recorder>
</div>
</div>
</div>
</div>
</div> </div>
<div style="width: 300px; margin-top: 15px;">
<span>文本: </span> <!-- <div class="section" >
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()"> <div class="section-title" >
正确选项
</div>
<div style="display: flex;">
<div style="float: left;border:1px solid #CCC; padding:5px; border-radius: 5px; margin: 10px; width: 300px; height: 250px; position: relative;">
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:2">
显示选项
</div>
<div style="flex:4">
<nz-radio-group [(ngModel)]="item.type" (ngModelChange)="saveItem()" >
<label nz-radio [nzValue]="'Text'">文字</label>
<label nz-radio [nzValue]="'Image'">图片</label>
</nz-radio-group>
</div>
</div>
<div *ngIf="item.type=='Text'" style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
文字
</div>
<div style="flex:5">
<input type="text" nz-input placeholder="" [(ngModel)]="item.text" (blur)="saveItem()" />
</div>
</div>
<div *ngIf="item.type=='Image'" style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
图片
</div> </div>
<div style="flex:5">
<div style="width: 200px;">
<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>
</div>
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
音频
</div>
<div style="flex:5">
<app-audio-recorder [audioUrl]="item.audio_url2" (audioUploaded)="onUploadSuccessByItem($event, item, 'audio_url2')" ></app-audio-recorder>
</div>
</div>
</div>
</div>
</div> -->
<div style="margin-top: 5px"> <div class="section" >
<span>音频: </span> <div class="section-title" >
<app-audio-recorder 正确选项
[audioUrl]="item.audio_url" <div style="text-align: center; float: right;">
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')" <button nz-button nzType="primary" (click)="addChoice(item.correct)" [disabled]="(item.correct.length + item.incorrect.length)>=5" >
></app-audio-recorder> <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
添加
</button>
</div>
</div>
<div class="section-content clearfix" style="display: block;">
<div *ngFor="let choiceItem of item.correct; let choiceIndex = index" style="float: left;border:1px solid #CCC; padding:5px; border-radius: 5px; margin: 10px; width: 300px; height: 250px; position: relative;">
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:2">
显示选项
</div>
<div style="flex:4">
<nz-radio-group [(ngModel)]="choiceItem.type" (ngModelChange)="saveItem()" >
<label nz-radio [nzValue]="'Text'">文字</label>
<label nz-radio [nzValue]="'Image'">图片</label>
</nz-radio-group>
</div>
</div>
<div *ngIf="choiceItem.type=='Text'" style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
文字
</div>
<div style="flex:5">
<input type="text" nz-input placeholder="" [(ngModel)]="choiceItem.text" (blur)="saveItem()" />
</div>
</div>
<div *ngIf="choiceItem.type=='Image'" style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
图片
</div>
<div style="flex:5">
<div style="width: 200px;">
<app-upload-image-with-preview style="width: 100%;" [picUrl]="choiceItem.image_url" (imageUploaded)="onImageUploadSuccessByItem($event, choiceItem, 'image_url')"></app-upload-image-with-preview>
</div>
</div>
</div>
<!-- <div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
音频
</div>
<div style="flex:5">
<app-audio-recorder [audioUrl]="choiceItem.audio_url" (audioUploaded)="onUploadSuccessByItem($event, choiceItem, 'audio_url')" ></app-audio-recorder>
</div>
</div> -->
<button *ngIf="item.correct.length>1" style="margin-top: 10px; position: absolute; bottom: 10px; right: 10px;;" nz-button nzType="danger" (click)="deleteChoice(item.correct, choiceIndex)" >
<span>删除此选项</span>
</button>
</div>
</div>
</div> </div>
<div class="section" >
<div class="section-title" >
错误选项
<div style="text-align: center; float: right;">
<button nz-button nzType="primary" (click)="addChoice(item.incorrect)" [disabled]="(item.correct.length + item.incorrect.length)>=5" >
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
添加
</button>
</div>
</div>
<div class="section-content clearfix" style="display: block;">
<div *ngFor="let choiceItem of item.incorrect; let choiceIndex = index" style="float: left;border:1px solid #CCC; padding:5px; border-radius: 5px; margin: 10px; width: 300px; height: 250px; position: relative;">
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:2">
显示选项
</div>
<div style="flex:4">
<nz-radio-group [(ngModel)]="choiceItem.type" (ngModelChange)="saveItem()" >
<label nz-radio [nzValue]="'Text'">文字</label>
<label nz-radio [nzValue]="'Image'">图片</label>
</nz-radio-group>
</div>
</div>
<div *ngIf="choiceItem.type=='Text'" style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
文字
</div>
<div style="flex:5">
<input type="text" nz-input placeholder="" [(ngModel)]="choiceItem.text" (blur)="saveItem()" />
</div>
</div>
<div *ngIf="choiceItem.type=='Image'" style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
图片
</div>
<div style="flex:5">
<div style="width: 200px;">
<app-upload-image-with-preview style="width: 100%;" [picUrl]="choiceItem.image_url" (imageUploaded)="onImageUploadSuccessByItem($event, choiceItem, 'image_url')"></app-upload-image-with-preview>
</div>
</div>
</div>
<button style="margin-top: 10px; position: absolute; bottom: 10px; right: 10px;;" nz-button nzType="danger" (click)="deleteChoice(item.incorrect, choiceIndex)" >
<span>删除此选项</span>
</button>
</div>
</div>
</div> </div>
<div class="section" >
<div style="float:right; text-align: left; padding-left: 20px;">
<button style="flex:1;" nz-button nzType="default" (click)="handleMoveItemUp('dataArray', i)" [disabled]="i==0">
<i nz-icon nzType="up" nzTheme="outline" style="float: left; margin-top: 4px;"></i>
<span style="float: right;">上移</span>
</button>
<button style="flex:1; margin-left: 10px; vertical-align:baseline;" nz-button nzType="default" (click)="handleMoveItemDown('dataArray', i)" [disabled]="i==contentObj.dataArray.length-1">
<i nz-icon nzType="down" nzTheme="outline" style="float: left; margin-top: 4px;"></i>
<span style="float: right;">下移</span>
</button>
</div>
<div style="text-align: right; padding-right: 20px;">
<button style="margin-bottom: 10px;" nz-button nzType="danger" (click)="deleteItem('dataArray', i)" >
<span>删除本题</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div *ngIf="contentObj.dataArray.length<26" class="card-item" style="padding: 0.5vw; width: 500px;" >
<button nz-button nzType="primary" class="add-btn" (click)="addItem('dataArray')">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
新建题目
</button>
</div>
</div> </div>
@import "../style/common_mixin";
.model-content {
margin: 10px;
.card-config {
// width: 100%;
height: 100%;
// display: flex;
flex-wrap: wrap;
box-sizing: border-box;
// width: 500px;
.card-item{
margin-bottom: 40px;
.border {
border-radius: 20px;
border-style: dashed;
padding:20px;
width: 100%;
}
.card-item-content{
.title {
font-size: 24px;
width: 100%;
text-align: center;
}
.section{
border-top: 1px solid ;
padding: 10px 0;
.section-title{
font-size: 24px;
width: 100%;
}
.section-content{
display: flex;
flex-direction: row;
margin: 5px 0 10px 0;
}
}
.pic-sound-box {
width: 50%;
display: flex;
flex-direction: column;
}
.add-btn-box {
display: flex;
align-items: center;
justify-content: center;
height: 20vw;
padding: 10px;
padding-top: 5vw;
}
}
}
}
}
.hidden{
display: none;
}
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}
import { Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef } from '@angular/core'; import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef} from '@angular/core';
import { JsonPipe } from '@angular/common'; // import defauleFormData from '../../assets/default/formData/defaultData_LST08.js'
@Component({ @Component({
selector: 'app-form', selector: 'app-form',
templateUrl: './form.component.html', templateUrl: './form.component.html',
styleUrls: ['./form.component.css'] styleUrls: ['./form.component.scss']
}) })
export class FormComponent implements OnInit, OnChanges, OnDestroy { export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用 _item: any;
saveKey = "test_001"; dataArray: Array<Object> = [];
// 储存对象
item;
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) { contentObj = {
dataArray: [],
}
defauleFormData = {
version: "1.0",
key: "DataKey_dfzx_ppp",
question: {},
dataArray: [
{
correct: [
{
type: "Text",
text: "",
audio_url: "",
image_url: "",
}
],
incorrect: [
]
} }
]
}
KEY = 'DataKey_dfzx_ppp';
createShell() { set item(item) {
this.item.wordList.push({ this._item = item;
word: '', }
audio: '', get item() {
backWord: '', return this._item;
backWordAudio: '',
});
this.save();
} }
removeShell(idx) { @Output()
this.item.wordList.splice(idx, 1); update = new EventEmitter();
this.save(); constructor(private appRef: ApplicationRef) {
} }
ngOnInit() { ngOnInit() {
this.item = {}; this.item = {};
this.item.contentObj = {};
// 获取存储的数据 const getData = (<any> window).courseware.getData;
(<any>window).courseware.getData((data) => { getData((data) => {
// console.log("读取数据", data)
if (data) { if (data) {
this.item = data; this.item = data;
} else {
this.item = {};
}
if ( !this.item.contentObj ) {
this.item.contentObj = {};
} }
this.init(); this.init();
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.refresh(); this.refresh();
this.save()
}, this.saveKey); }, this.KEY);
} }
ngOnChanges() { ngOnChanges() {
} }
ngOnDestroy() { ngOnDestroy() {
} }
saveData(e){
this.save();
}
init() { init() {
if (Object.keys(this.item.contentObj).length != 0 && this.item.contentObj.version && this.item.contentObj.version==this.defauleFormData.version) {
// console.log("使用默认数据", this.item.contentObj)
this.contentObj = this.item.contentObj;
this.dataArray = this.item.contentObj.dataArray;
} else {
this.contentObj = this.defauleFormData;
this.dataArray = this.defauleFormData.dataArray
// console.log("使用默认数据", this.contentObj)
this.item.contentObj = this.contentObj;
this.item.contentObj.dataArray = this.dataArray;
this.item.contentObj.question = this.defauleFormData.question;
}
}
cardItemData(){
return {
correct: [
{
type: "Text",
text: "",
audio_url: "",
image_url: "",
}
],
incorrect: [
]
}
}
cardChoiceData(){
return { type:"Text", image_url:"", text:"", audio_url:"" }
}
addChoice(item) {
console.log(item)
item.push(this.cardChoiceData());
this.saveItem();
}
deleteChoice(item, index){
item.splice(index,1)
this.save()
}
getDefaultPicArr() {
let arr = [];
return arr;
} }
initData() {
/** }
* 储存图片数据
* @param e
*/
onImageUploadSuccess(e, key) {
this.item[key] = e.url; onUploadSuccessByItem(e, item, key) {
item[key] = e.url;
this.save(); this.save();
} }
/** onImageUploadSuccessByItem(e, item, key) {
* 储存音频数据 item[key] = e.url
* @param e
*/
onAudioUploadSuccess(e, key) {
this.item[key] = e.url;
this.save(); this.save();
} }
onWordAudioUploadSuccess(e, idx) { onAudioUploadSuccessByItem(e, item, key) {
this.item.wordList[idx].audio = e.url; item[key] = e.url;
this.save(); this.save();
} }
onBackWordAudioUploadSuccess(e, idx) { onTitleAudioUploadSuccess(e) {
this.item.wordList[idx].backWordAudio = e.url; this.item.contentObj.titleAudio_url = e.url;
this.save(); this.save();
} }
/** addItem(type) {
* 储存数据 let item = this.cardItemData();
*/ this[type].push(item);
save() { this.saveItem();
(<any>window).courseware.setData(this.item, null, this.saveKey); }
deleteItem(type, index){
this[type].splice(index,1)
this.save()
}
handleMoveItemUp(key, index){
if(index!=0){
this[key][index] = this[key].splice(index-1, 1, this[key][index])[0];
}else{
this[key].push(this[key].shift());
}
this.save()
}
handleMoveItemDown(key, index){
if(index!=this[key].length-1){
this[key][index] = this[key].splice(index+1, 1, this[key][index])[0];
}else{
this[key].unshift( this[key].splice(index,1)[0]);
}
this.save()
}
radioClick(it, radioValue) {
it.radioValue = radioValue;
this.saveItem();
}
clickCheckBox() {
this.saveItem();
}
saveItem() {
this.save();
}
save() {
(<any> window).courseware.setData(this.item, null, this.KEY);
this.refresh(); this.refresh();
console.log('this.item = ' + JSON.stringify(this.item));
/* Remove this when commit */
if(location.href.indexOf("localhost") != -1) {
(<any> window).axios.post(`http://www.datalist.com.cn:8060/json/save/${this.KEY}`, this.item)
}
/* Remove this when commit */
console.log("保存", this.item)
} }
/**
* 刷新 渲染页面
*/
refresh() { refresh() {
setTimeout(() => { setTimeout(() => {
this.appRef.tick(); this.appRef.tick();
}, 1); }, 1);
} }
} }
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
<script type="text/javascript" src="https://staging-teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script> <script type="text/javascript" src="https://staging-teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head> </head>
<body> <body>
<app-root></app-root> <app-root></app-root>
......
...@@ -192,7 +192,7 @@ ...@@ -192,7 +192,7 @@
"array": [ "array": [
0, 0,
0, 0,
268.2372326687317, 269.27790755516406,
0, 0,
0, 0,
0, 0,
......
...@@ -99,7 +99,14 @@ cc.Class({ ...@@ -99,7 +99,14 @@ cc.Class({
}, },
getData(cb) { getData(cb) {
// cb(this.getDefaultData());
cc.loader.load( "http://www.datalist.com.cn:8060/json/DataKey_dfzx_ppp", function( err, res) {
if(err) {
cb(this.getDefaultData()); cb(this.getDefaultData());
} else {
cb(JSON.parse(res));
}
});
}, },
getDefaultData() { getDefaultData() {
......
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