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>
+            &nbsp;
+            <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>
+            &nbsp;
+            <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