form.component.ts 3.23 KB
Newer Older
liujiangnan's avatar
liujiangnan committed
1
import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef} from '@angular/core';
liujiaxin's avatar
1  
liujiaxin committed
2
import { NzMessageService } from 'ng-zorro-antd';
limingzhe's avatar
limingzhe committed
3 4


liujiangnan's avatar
liujiangnan committed
5 6 7 8

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
liujiaxin's avatar
liujiaxin committed
9
  styleUrls: ['./form.component.css']
liujiangnan's avatar
liujiangnan committed
10 11 12
})
export class FormComponent implements OnInit, OnChanges, OnDestroy {

limingzhe's avatar
limingzhe committed
13
  // 储存数据用
liujiaxin's avatar
1  
liujiaxin committed
14
  saveKey = 'ww_sequence';
limingzhe's avatar
limingzhe committed
15 16
  // 储存对象
  item;
liujiaxin's avatar
1  
liujiaxin committed
17 18 19 20 21 22 23 24 25 26 27
  picArray: Array<{
    controlInstance: string,
    progress: number,
    uploadStatus: number,
    uploading: boolean,
    res_id: number
  }>;

  constructor(private appRef: ApplicationRef,
              private nzMessageService: NzMessageService,
              private changeDetectorRef: ChangeDetectorRef) {
limingzhe's avatar
limingzhe committed
28 29 30 31

  }


liujiangnan's avatar
liujiangnan committed
32 33
  ngOnInit() {

liujiaxin's avatar
1  
liujiaxin committed
34 35 36
    this.item = {
      contentObj: {}
    };
limingzhe's avatar
limingzhe committed
37

limingzhe's avatar
limingzhe committed
38
    // 获取存储的数据
liujiaxin's avatar
1  
liujiaxin committed
39
    (window as any).courseware.getData((data) => {
limingzhe's avatar
limingzhe committed
40 41 42 43

      if (data) {
        this.item = data;
      }
liujiaxin's avatar
1  
liujiaxin committed
44 45 46 47 48 49 50 51 52 53 54
      this.picArray  = [];
      if (Array.isArray(this.item.contentObj.pics) && this.item.contentObj.pics.length > 0) {
        for (const p of this.item.contentObj.pics) {
          this.addPictureField({
            controlInstance: `${p}`,
            res_id: p
          });
        }
      } else {
        this.addPictureField();
      }
limingzhe's avatar
limingzhe committed
55 56

      this.init();
liujiangnan's avatar
liujiangnan committed
57 58
      this.changeDetectorRef.markForCheck();
      this.changeDetectorRef.detectChanges();
limingzhe's avatar
limingzhe committed
59 60
      this.refresh();

limingzhe's avatar
limingzhe committed
61
    }, this.saveKey);
limingzhe's avatar
limingzhe committed
62 63 64 65

  }


limingzhe's avatar
limingzhe committed
66
  ngOnChanges() {
limingzhe's avatar
limingzhe committed
67 68
  }

limingzhe's avatar
limingzhe committed
69
  ngOnDestroy() {
limingzhe's avatar
limingzhe committed
70 71 72 73
  }



limingzhe's avatar
limingzhe committed
74
  init() {
limingzhe's avatar
limingzhe committed
75

liujiangnan's avatar
liujiangnan committed
76 77
  }

liujiaxin's avatar
1  
liujiaxin committed
78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97
  //
  // /**
  //  * 储存图片数据
  //  * @param e
  //  */
  // onImageUploadSuccess(e, key) {
  //
  //     this.item[key] = e.url;
  //     this.save();
  // }

  // /**
  //  * 储存音频数据
  //  * @param e
  //  */
  // onAudioUploadSuccess(e, key) {
  //
  //   this.item[key] = e.url;
  //   this.save();
  // }
limingzhe's avatar
limingzhe committed
98 99 100



limingzhe's avatar
limingzhe committed
101 102 103
  /**
   * 储存数据
   */
limingzhe's avatar
limingzhe committed
104
  save() {
liujiaxin's avatar
1  
liujiaxin committed
105
    (window as any).courseware.setData(this.item, null, this.saveKey);
limingzhe's avatar
limingzhe committed
106 107 108
    this.refresh();
  }

limingzhe's avatar
limingzhe committed
109 110 111
  /**
   * 刷新 渲染页面
   */
limingzhe's avatar
limingzhe committed
112 113 114 115
  refresh() {
    setTimeout(() => {
      this.appRef.tick();
    }, 1);
liujiangnan's avatar
liujiangnan committed
116 117
  }

liujiaxin's avatar
1  
liujiaxin committed
118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168

  addPictureField(control?: any, e?: MouseEvent): void {
    // debugger;
    if (e) {
      e.preventDefault();
    }
    // const sts = this.checkForm();
    // if (!sts) {
    //   return;
    // }
    const id = this.picArray.length ; // (this.controlArray.length > 0) ? this.controlArray[ this.controlArray.length - 1 ] : 0;
    if (id >= 9) {
      this.nzMessageService.info('you can only add nine item!');
      return;
    }
    if (!control) {
      control = {
        controlInstance: `${id}`,
        res_id: 0
      };
    }

    const index = this.picArray.push(control);

  }

  removeField(i: any, e: MouseEvent): void {
    e.preventDefault();
    if (this.picArray.length > 1) {
      const index = this.picArray.indexOf(i);
      this.picArray.splice(index, 1);
      // console.log(this.controlArray);
      this.savedata();
    }
  }

  onImageUploadSuccess(control, info) {
    // console.log(control, info)
    control.res_id = info.url;
    this.savedata();
  }
  savedata() {
    this.item.contentObj.pics = [];
    for (const idx in this.picArray) {
      this.item.contentObj.pics[idx] = this.picArray[idx].res_id;
    }
    this.save();
  }



liujiangnan's avatar
liujiangnan committed
169
}
limingzhe's avatar
limingzhe committed
170