From cd81da97354a0450c4a2261ed56add9fea2f9e05 Mon Sep 17 00:00:00 2001 From: fanxuehan <fanxuehan@qq.com> Date: Fri, 6 May 2022 11:16:57 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A1=A8=E5=8D=95=E9=A1=B5=E6=9B=B4?= =?UTF-8?q?=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- form_angular/src/app/form/ComponentBase.ts | 89 ++++++++++++++ form_angular/src/app/form/form.component.css | 27 +++++ form_angular/src/app/form/form.component.html | 78 +++++++----- form_angular/src/app/form/form.component.ts | 111 +++--------------- 4 files changed, 183 insertions(+), 122 deletions(-) create mode 100644 form_angular/src/app/form/ComponentBase.ts diff --git a/form_angular/src/app/form/ComponentBase.ts b/form_angular/src/app/form/ComponentBase.ts new file mode 100644 index 0000000..0ee8c5a --- /dev/null +++ b/form_angular/src/app/form/ComponentBase.ts @@ -0,0 +1,89 @@ +import { ApplicationRef, ChangeDetectorRef, ElementRef, ViewChild } from "@angular/core"; + +export class ComponentBase { + // å‚¨å˜æ•°æ®ç”¨ + saveKey = ""; + // 储å˜å¯¹è±¡ + item: any = {}; + ngOnChanges() { } + ngOnDestroy() { } + + constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) { } + ngOnInit() { + // 获å–å˜å‚¨çš„æ•°æ® + (<any>window).courseware.getData((data) => { + if (data) { + this.item = data; + this.itemStr = JSON.stringify(this.item, null, 4).trim(); + } + this.init(); + this.changeDetectorRef.markForCheck(); + this.changeDetectorRef.detectChanges(); + this.refresh(); + }, this.saveKey); + } + + @ViewChild("itemTextarea", { static: true }) itemTextarea: ElementRef; + copyData() { + this.itemTextarea.nativeElement.select(); + document.execCommand("copy"); + } + + /** + * 储å˜å›¾ç‰‡æ•°æ® + * @param e + */ + onAssetUploadSuccess(e: any, ...key: Array<string>) { + let item = this.item; + for (let i = 0; i < key.length; i++) { + if (i + 1 == key.length) { + item[key[i]] = e.url; + this.save(); + return; + } + item = item[key[i]]; + } + } + + save() { + (<any>window).courseware.setData(this.item, null, this.saveKey); + this.itemStr = JSON.stringify(this.item, null, 4).trim(); + this.refresh(); + console.log('this.item = ' + JSON.stringify(this.item)); + } + itemStr = ""; + load() { + this.itemStr = this.itemTextarea.nativeElement.value; + if (this.isJSON(this.itemStr)) { + this.item = JSON.parse(this.itemStr); + this.init(); + this.changeDetectorRef.markForCheck(); + this.changeDetectorRef.detectChanges(); + this.refresh(); + } + } + isJSON(str) { + if (typeof str == 'string') { + try { + var obj = JSON.parse(str); + if (typeof obj == 'object' && obj) { + return true; + } + return false; + } catch (e) { + return false; + } + } + return false; + } + + /** + * 刷新 æ¸²æŸ“é¡µé¢ + */ + refresh() { + setTimeout(() => { + this.appRef.tick(); + }, 1); + } + init() { } +} diff --git a/form_angular/src/app/form/form.component.css b/form_angular/src/app/form/form.component.css index 5d78cd0..17e4315 100644 --- a/form_angular/src/app/form/form.component.css +++ b/form_angular/src/app/form/form.component.css @@ -33,3 +33,30 @@ padding: 10px; margin: 10px; } + +.button-right { + border-style: dotted; + border-color: rgb(42, 142, 72); + width: 100px; + height: 50px; + color: rgb(42, 142, 72); + background-color: white; +} + +.button-wrong { + border-style: dotted; + border-color: rgb(180, 0, 0); + width: 100px; + height: 50px; + color: rgb(180, 0, 0); + background-color: white; +} + +.button-disable { + border-style: dotted; + border-color: black; + width: 100px; + height: 50px; + color: black; + background-color: white; +} \ No newline at end of file diff --git a/form_angular/src/app/form/form.component.html b/form_angular/src/app/form/form.component.html index c07239d..bb1f099 100644 --- a/form_angular/src/app/form/form.component.html +++ b/form_angular/src/app/form/form.component.html @@ -1,36 +1,58 @@ <div class="model-content"> - <div style="padding: 10px;"> - - <div style="width: 300px;" align='center'> - <span>图1: </span> - <app-upload-image-with-preview - [picUrl]="item.pic_url" - (imageUploaded)="onImageUploadSuccess($event, 'pic_url')"> - </app-upload-image-with-preview> - </div> - - <div style="width: 300px; margin-top: 5px;" align='center'> - <span>图2: </span> - <app-upload-image-with-preview - [picUrl]="item.pic_url_2" - (imageUploaded)="onImageUploadSuccess($event, 'pic_url_2')"> - </app-upload-image-with-preview> + <div class="border" style="width: 1000px;"> + <textarea style="width: 955px; height: 300px;" (blur)="load()" #itemTextarea>{{itemStr}}</textarea> + <button (click)="copyData();">Copy</button> </div> - <div style="width: 300px; margin-top: 15px;"> - <span>文本: </span> - <input type="text" nz-input [(ngModel)]="item.text" (blur)="save()"> + <div class="border" style="width: 1000px;"> + <span style="font-size: 20px;">æ ‡é¢˜: </span> + <input type="text" nz-input [(ngModel)]="item.title" (blur)="save()"> + <span style="font-size: 20px;">题目说明: </span> + <input type="text" nz-input [(ngModel)]="item.questionText" (blur)="save()"> + <span style="font-size: 20px;">题目说明音频: </span> + <app-audio-recorder [audioUrl]="item.questionTextAudio" + (audioUploaded)="onAssetUploadSuccess($event, 'item','questionTextAudio')"></app-audio-recorder> </div> - <div style="margin-top: 5px"> - <span>音频: </span> - <app-audio-recorder - [audioUrl]="item.audio_url" - (audioUploaded)="onAudioUploadSuccess($event, 'audio_url')" - ></app-audio-recorder> - </div> + <div class="border" style="width: 1000px;"> + <div *ngFor="let question of item.questions; let i = index"> + <div class="border" style="width: 950px;"> + <span style="font-size: 20px;">选项类型: </span> + <div *ngIf="question.type=='img'"> + <button class="button-right">图片</button> + + <button class="button-disable" (click)="question.type='txt'; save();">æ–‡å—</button> + </div> + <div *ngIf="question.type=='txt'"> + <button class="button-disable" (click)="question.type='img'; save();">图片</button> + + <button class="button-right">æ–‡å—</button> + </div> + <div *ngIf="question.type=='img'"> + 图片: + <div style="width: 300px;"> + <app-upload-image-with-preview [picUrl]="question.image" + (imageUploaded)="onAssetUploadSuccess($event, 'questions', i, 'image')"> + </app-upload-image-with-preview> + </div> + </div> + <span>音频: </span> + <app-audio-recorder [audioUrl]="question.audio" + (audioUploaded)="onAssetUploadSuccess($event, 'questions', i, 'audio')"> + </app-audio-recorder> + <div *ngIf="question.type=='txt'"> + <span>文本: </span> + <input type="text" nz-input [(ngModel)]="question.text" (blur)="save()"> + </div> + <br> + <button style="width: 900px; height: 30px; color: red;" (click)="removeQuestion(i)">åˆ é™¤é¢˜ç›®</button> + </div> + </div> + <div class="border" style="width: 950px;"> + <button style="width: 900px; height: 100px;" (click)="addQuestion()">å¢žåŠ é¢˜ç›®</button> + </div> + </div> </div> - -</div> +</div> \ No newline at end of file diff --git a/form_angular/src/app/form/form.component.ts b/form_angular/src/app/form/form.component.ts index 82a6e91..44a970a 100644 --- a/form_angular/src/app/form/form.component.ts +++ b/form_angular/src/app/form/form.component.ts @@ -1,5 +1,6 @@ import { Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef } from '@angular/core'; import { JsonPipe } from '@angular/common'; +import { ComponentBase } from './ComponentBase'; @Component({ @@ -7,108 +8,30 @@ import { JsonPipe } from '@angular/common'; templateUrl: './form.component.html', styleUrls: ['./form.component.css'] }) -export class FormComponent implements OnInit, OnChanges, OnDestroy { +export class FormComponent extends ComponentBase implements OnInit, OnChanges, OnDestroy { // å‚¨å˜æ•°æ®ç”¨ - saveKey = "test_001"; + saveKey = "card_machine"; // 储å˜å¯¹è±¡ - item; - - constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) { - - } - - createShell() { - this.item.wordList.push({ - word: '', + item: any = { + title: '', + questionText: '', + questionTextAudio: '', + questions: [], + }; + + addQuestion() { + this.item.questions.push({ + type: 'img', audio: '', - backWord: '', - backWordAudio: '', + text: '', + image: '' }); this.save(); } - removeShell(idx) { - this.item.wordList.splice(idx, 1); - this.save(); - } - - ngOnInit() { - - this.item = {}; - - // 获å–å˜å‚¨çš„æ•°æ® - (<any>window).courseware.getData((data) => { - - if (data) { - this.item = data; - } - - this.init(); - this.changeDetectorRef.markForCheck(); - this.changeDetectorRef.detectChanges(); - this.refresh(); - - }, this.saveKey); - } - - ngOnChanges() { - } - - ngOnDestroy() { - } - - init() { - - } - - - /** - * 储å˜å›¾ç‰‡æ•°æ® - * @param e - */ - onImageUploadSuccess(e, key) { - - this.item[key] = e.url; - this.save(); - } - - /** - * 储å˜éŸ³é¢‘æ•°æ® - * @param e - */ - onAudioUploadSuccess(e, key) { - this.item[key] = e.url; - this.save(); - } - - onWordAudioUploadSuccess(e, idx) { - this.item.wordList[idx].audio = e.url; + removeQuestion(idx) { + this.item.questions.splice(idx, 1); this.save(); } - - onBackWordAudioUploadSuccess(e, idx) { - this.item.wordList[idx].backWordAudio = e.url; - this.save(); - } - - /** - * å‚¨å˜æ•°æ® - */ - save() { - (<any>window).courseware.setData(this.item, null, this.saveKey); - - this.refresh(); - console.log('this.item = ' + JSON.stringify(this.item)); - } - - /** - * 刷新 æ¸²æŸ“é¡µé¢ - */ - refresh() { - setTimeout(() => { - this.appRef.tick(); - }, 1); - } - } \ No newline at end of file -- 2.21.0