form.component.html 13.4 KB

<div class="model-content">
  <div nz-row>
    <div nz-col nzOffset='4'>
      <h1 nz-title>课程练习内容编辑</h1>
    </div>
  </div>
  <div nz-row>
    <div nz-col [nzSpan]="15" nzOffset="3">
      <div nz-form>
        <div id='title-anchor'>
          <nz-divider nzText="课程名称" nzOrientation="left"></nz-divider>
          <nz-form-item>
            <nz-form-label [nzSpan]="3" nzFor="part1">标题1</nz-form-label>
            <nz-form-control [nzSpan]="6">
              <nz-input-group nzAddOnBefore="Part">
                <input type="text" id="part1" nz-input [(ngModel)]="item.title.part1" (blur)="save()">
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSpan]="3" nzFor="part2">标题2</nz-form-label>
            <nz-form-control [nzSpan]="6">
              <input nz-input type="text" id="part2" [(ngModel)]="item.title.part2" (blur)="save()">
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSpan]="3" nzFor="audio_url">发音</nz-form-label>
            <nz-form-control [nzSpan]="6">
              <app-audio-recorder
                [audioUrl]="item.title.audio_url" id="audio_url"
                (audioUploaded)="onAudioUploadSuccess($event, item.title, 'audio_url')">
              </app-audio-recorder>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div id='listen-anchor'>
          <nz-divider nzText="听力材料" nzOrientation="left"></nz-divider>
          <nz-form-item>
            <nz-form-control [nzSpan]="6" nzOffset="3">
              <app-audio-recorder id="item.listenAudioUrl"
                [audioUrl]="item.listenAudioUrl"
                (audioUploaded)="onAudioUploadSuccess($event, item, 'listenAudioUrl')">
              </app-audio-recorder>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div id='listen-anchor'>
          <nz-divider nzText="练习题皮肤" nzOrientation="left"></nz-divider>
          <nz-form-item>
            <nz-form-label [nzSpan]="3">练习题皮肤</nz-form-label>
            <nz-form-control [nzSpan]="6">
              <nz-radio-group [(ngModel)]="item.skin"  (ngModelChange)="save()">
                <label nz-radio nzValue="A">皮肤A</label>
                <label nz-radio nzValue="B">皮肤B</label>
              </nz-radio-group>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-control [nzSpan]="6" nzOffset="3">
              <div *ngIf="item.skin == 'A'">
                <img src="assets/play/skin_a.jpg" style="width: auto;height: 200px;">
              </div>
              <div *ngIf="item.skin == 'B'">
                <img src="assets/play/skin_b.jpg" style="width: auto;height: 200px;">
              </div>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div id='listen-anchor'>
          <nz-divider nzText="背景图片" nzOrientation="left"></nz-divider>
          <nz-form-item>
            <button style="margin: 10px;" nz-button nzType="danger" (click)="clearBg()"> 
              <span>清空</span> 
            </button> 
          </nz-form-item>
          <div *ngIf="item.skin == 'A'">
            <nz-form-item>
              <nz-form-label [nzSpan]="2" >左上</nz-form-label>
              <nz-form-control [nzSpan]="6">
                <app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinA.lt_pic_url"
                  (imageUploaded)="onImageUploadSuccess($event, item.skinA, 'lt_pic_url')"></app-upload-image-with-preview>
              </nz-form-control>
              <nz-form-label [nzSpan]="2" >中上</nz-form-label>
              <nz-form-control [nzSpan]="6">
                <app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinA.mt_pic_url"
                  (imageUploaded)="onImageUploadSuccess($event, item.skinA, 'mt_pic_url')"></app-upload-image-with-preview>
              </nz-form-control>
              <nz-form-label [nzSpan]="2" >右上</nz-form-label>
              <nz-form-control [nzSpan]="6">
                <app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinA.rt_pic_url"
                  (imageUploaded)="onImageUploadSuccess($event, item.skinA, 'rt_pic_url')"></app-upload-image-with-preview>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSpan]="2" >左中</nz-form-label>
              <nz-form-control [nzSpan]="6">
                <app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinA.lm_pic_url"
                  (imageUploaded)="onImageUploadSuccess($event, item.skinA, 'lm_pic_url')"></app-upload-image-with-preview>
              </nz-form-control>  
              <div nz-col nzSpan="8"></div>
              <nz-form-label [nzSpan]="2" >右中</nz-form-label>
              <nz-form-control [nzSpan]="6">
                <app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinA.rm_pic_url"
                  (imageUploaded)="onImageUploadSuccess($event, item.skinA, 'lm_pic_url')"></app-upload-image-with-preview>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSpan]="2" >左下</nz-form-label>
              <nz-form-control [nzSpan]="6">
                <app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinA.lb_pic_url"
                  (imageUploaded)="onImageUploadSuccess($event, item.skinA, 'lb_pic_url')"></app-upload-image-with-preview>
              </nz-form-control>
              <nz-form-label [nzSpan]="2" >中下</nz-form-label>
              <nz-form-control [nzSpan]="6">
                <app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinA.mb_pic_url"
                  (imageUploaded)="onImageUploadSuccess($event, item.skinA, 'mb_pic_url')"></app-upload-image-with-preview>
              </nz-form-control>
              <nz-form-label [nzSpan]="2">右下</nz-form-label>
              <nz-form-control [nzSpan]="6">
                <app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinA.rb_pic_url"
                  (imageUploaded)="onImageUploadSuccess($event, item.skinA, 'rb_pic_url')"></app-upload-image-with-preview>
              </nz-form-control>
            </nz-form-item>
          </div>
          <div *ngIf="item.skin == 'B'">
            <nz-form-item>
              <nz-form-label [nzSpan]="2" >左上</nz-form-label>
              <nz-form-control [nzSpan]="6">
                <app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinB.lt_pic_url"
                  (imageUploaded)="onImageUploadSuccess($event, item.skinB, 'lt_pic_url')"></app-upload-image-with-preview>
              </nz-form-control>
              <nz-form-label [nzSpan]="2" >中上</nz-form-label>
              <nz-form-control [nzSpan]="6">
                <app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinB.mt_pic_url"
                  (imageUploaded)="onImageUploadSuccess($event, item.skinB, 'mt_pic_url')"></app-upload-image-with-preview>
              </nz-form-control>
              <nz-form-label [nzSpan]="2" >右上</nz-form-label>
              <nz-form-control [nzSpan]="6">
                <app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinB.rt_pic_url"
                  (imageUploaded)="onImageUploadSuccess($event, item.skinB, 'rt_pic_url')"></app-upload-image-with-preview>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSpan]="2" >左中</nz-form-label>
              <nz-form-control [nzSpan]="6">
                <app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinB.lm_pic_url"
                  (imageUploaded)="onImageUploadSuccess($event, item.skinB, 'lm_pic_url')"></app-upload-image-with-preview>
              </nz-form-control>  
              <div nz-col nzSpan="8"></div>
              <nz-form-label [nzSpan]="2" >右中</nz-form-label>
              <nz-form-control [nzSpan]="6">
                <app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinB.rm_pic_url"
                  (imageUploaded)="onImageUploadSuccess($event, item.skinB, 'rm_pic_url')"></app-upload-image-with-preview>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label [nzSpan]="2" >左下</nz-form-label>
              <nz-form-control [nzSpan]="6">
                <app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinB.lb_pic_url"
                  (imageUploaded)="onImageUploadSuccess($event, item.skinB, 'lb_pic_url')"></app-upload-image-with-preview>
              </nz-form-control>
              <nz-form-label [nzSpan]="2" >中下</nz-form-label>
              <nz-form-control [nzSpan]="6">
                <app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinB.mb_pic_url"
                  (imageUploaded)="onImageUploadSuccess($event, item.skinB, 'mb_pic_url')"></app-upload-image-with-preview>
              </nz-form-control>
              <nz-form-label [nzSpan]="2">右下</nz-form-label>
              <nz-form-control [nzSpan]="6">
                <app-upload-image-with-preview style="width: 100%" [picUrl]="item.skinB.rb_pic_url"
                  (imageUploaded)="onImageUploadSuccess($event, item.skinB, 'rb_pic_url')"></app-upload-image-with-preview>
              </nz-form-control>
            </nz-form-item>
          </div>
        </div>
        <div>
          <div *ngFor="let data of item.exercisesArr;let j = index" class="card-item" style="padding: 0.5vw;">
            <div class="border">
              <nz-divider nzText="内容-{{j+1}}" nzOrientation="left"></nz-divider>
              <nz-form-item>
                <nz-form-label [nzSpan]="6" nzFor="{{j}}.pic_url">图片</nz-form-label>
                <nz-form-control [nzSpan]="6">
                  <app-upload-image-with-preview style="width: 100%" [picUrl]="data.pic_url"
                    (imageUploaded)="onImageUploadSuccess($event, data, 'pic_url')"></app-upload-image-with-preview>
                </nz-form-control>
              </nz-form-item>
              <nz-form-item>
                <nz-form-label [nzSpan]="6" nzFor="{{j}}.pic_url">音频</nz-form-label>
                <nz-form-control [nzSpan]="6">
                  <app-audio-recorder id="{{j}}.audio_url" [audioUrl]="data.audio_url"
                    (audioUploaded)="onAudioUploadSuccess($event, data, 'audio_url')">
                  </app-audio-recorder>
                </nz-form-control>
              </nz-form-item>
              <nz-form-item>
                <nz-form-label [nzSpan]="6">句子拆分</nz-form-label>
                <nz-form-control [nzSpan]="6">
                  <button nz-button nzType="dashed" class="add-btn" id="add-btn"
                      (click)="addLetter(data)">
                    <i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
                  </button>
                </nz-form-control>
              </nz-form-item>
              <nz-form-item>
                <nz-form-label [nzSpan]="6">句子预览</nz-form-label>
                <nz-form-control [nzSpan]="18">
                  <span nz-text>
                    <div *ngIf="item.skin == 'A'">
                      <label *ngFor="let letter of data.letters;let j = index" [ngStyle]="{'color':letter.isColor=='1'?'#c8161d':'#000000','font-size':'40px'}">{{letter.val}}</label>
                    </div>
                    <div *ngIf="item.skin == 'B'">
                      <label *ngFor="let letter of data.letters;let j = index" [ngStyle]="{'color':letter.isColor=='1'?'#c8161d':'#717071','font-size':'40px'}">{{letter.val}}</label>
                    </div>
                  </span>
                </nz-form-control>
              </nz-form-item>
              <nz-form-item>          
                <nz-form-control [nzOffset]="2" [nzSpan]="16">
                  <nz-table #lettersTable nzBordered nzTitle="按照单词着色需要进行拆分填写,单词与单词之间添加空格" [nzData]="data.letters" [nzShowPagination]=false>
                    <thead>
                      <tr>
                        <th>序号</th>
                        <th>字母(单词)组合</th>
                        <th>是否着色</th>
                        <th>操作</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr *ngFor="let row of lettersTable.data;let j = index">
                        <td>{{ j+1 }}</td>
                        <td><input type="text" nz-input placeholder="请录入字母(单词)" [(ngModel)]="row.val" (blur)="save()"></td>
                        <td>
                          <nz-radio-group [(ngModel)]="row.isColor" (ngModelChange)="save()">
                            <label nz-radio nzValue="1"></label>
                            <label nz-radio nzValue="0"></label>
                          </nz-radio-group>
                        </td>
                        <td>
                          <a (click)="delLetter(data, j)">delete</a>
                        </td>
                      </tr>
                    </tbody>
                  </nz-table>
                </nz-form-control>
              </nz-form-item>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>