form.component.html 13.2 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">
      <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="audioUrl">发音</nz-form-label>
        <nz-form-control [nzSpan]="6">
          <app-audio-recorder [audioUrl]="item.title.audioUrl" id="audioUrl"
            (audioUploaded)="onAudioUploadSuccess($event, item.title, 'audioUrl')">
          </app-audio-recorder>
        </nz-form-control>
      </nz-form-item>
      <nz-divider nzText="听力材料" nzOrientation="left"></nz-divider>
      <nz-form-item>
        <nz-form-control [nzSpan]="6" nzOffset="3">
          <app-audio-recorder id="item.audioUrl" [audioUrl]="item.audioUrl"
            (audioUploaded)="onAudioUploadSuccess($event, item, 'audioUrl')">
          </app-audio-recorder>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="3" nzFor="backgroudColor">主色调色号</nz-form-label>
        <nz-form-control [nzSpan]="6">
          <input nz-input type="text" nz-input placeholder="十六进制,如#000000" maxlength="7" id="backgroudColor"
            [(ngModel)]="item.backgroudColor" (blur)="save()">
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="3">字母背景颜色</nz-form-label>
        <nz-form-control [nzSpan]="6">
          <div [ngStyle]="{'background':item.backgroudColor,'width':'100px','height':'30px','border':'1px solid #CCC'}">
          </div>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="3">序号背景颜色</nz-form-label>
        <nz-form-control [nzSpan]="6">
          <div
            [ngStyle]="{'background':item.backgroudColor,'width':'100px','height':'30px','border':'1px solid #CCC','opacity':'0.7'}">
          </div>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="3">区块背景颜色</nz-form-label>
        <nz-form-control [nzSpan]="6">
          <div
            [ngStyle]="{'background':item.backgroudColor,'width':'100px','height':'30px','border':'1px solid #CCC','opacity':'0.1'}">
          </div>
        </nz-form-control>
      </nz-form-item>
      <nz-divider nzText="字母" nzOrientation="left"></nz-divider>
      <nz-form-item>
        <nz-form-label [nzSpan]="6" nzFor="exercises">操作</nz-form-label>
        <nz-form-control [nzSpan]="6">
          <button nz-button nzType="dashed" [disabled]="item.letterArr.length == 3 ? true : false" class="add-btn"
            id="add-btn" (click)="addLetterItem(item)">
            <i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
          </button>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control [nzOffset]="2" [nzSpan]="24">
          <nz-table #lettersTable nzBordered [nzData]="item.letterArr" [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="max length is 4" [(ngModel)]="row.val" (blur)="save()"
                    maxlength="4"></td>
                <td>
                  <app-audio-recorder [audioUrl]="row.audioUrl"
                    (audioUploaded)="onAudioUploadSuccess($event, row, 'audioUrl')">
                  </app-audio-recorder>
                </td>
                <td>
                  <a (click)="delLetter(item, j)">delete</a>
                </td>
              </tr>
            </tbody>
          </nz-table>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>
  <div nz-row>
    <div nz-col [nzSpan]="20" nzOffset="2">
      <nz-card nzTitle="背景图片" [nzExtra]="bgTemplate">
        <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, '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.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>
      </nz-card>
      <ng-template #bgTemplate>
        <button style="margin: 10px;" nz-button nzType="danger" (click)="clearBg()">
          <span>清空</span>
        </button>
      </ng-template>
    </div>

  </div>
  <div nz-row>
    <div *ngFor="let zone of item.zoneArr; let i = index" style="padding: 0.5vw;">
      <div nz-col [nzSpan]="20" nzOffset="2">
        <nz-card nzTitle="练习题区域-{{i + 1}}" [nzActions]="[actionAdd]">
          <div>
            <div *ngFor="let data of zone.exercisesArr;let j = index">
              <div nz-col [nzSpan]="12">
                <nz-card nzTitle="单词-{{j+1}}" [nzExtra]="extraTemplate" [nzHoverable]="true">
                  <nz-form-item>
                    <nz-form-label [nzSpan]="6" nzFor="answerIndex">答案顺序</nz-form-label>
                    <nz-form-control [nzSpan]="6">
                      <nz-input-number [nzMin]="1" [nzMax]='8' [(ngModel)]="data.answerIndex" (ngModelChange)="saveIndex(data)"></nz-input-number>
                    </nz-form-control>
                  </nz-form-item>
                  <nz-form-item>
                    <nz-form-label [nzSpan]="6" nzFor="{{j}}.indexAudioUrl">顺序音频</nz-form-label>
                    <nz-form-control [nzSpan]="6">
                      <app-audio-recorder id="{{j}}.indexAudioUrl" [audioUrl]="data.indexAudioUrl"
                        (audioUploaded)="onAudioUploadSuccess($event, data, 'indexAudioUrl')">
                      </app-audio-recorder>
                    </nz-form-control>
                  </nz-form-item>
    
                  <nz-form-item>
                    <nz-form-label [nzSpan]="6">音频</nz-form-label>
                    <nz-form-control [nzSpan]="12">
                      <app-audio-recorder [audioUrl]="data.answer.audioUrl"
                        (audioUploaded)="onAudioUploadSuccess($event, data.answer, 'audioUrl')">
                      </app-audio-recorder>
                    </nz-form-control>
                  </nz-form-item>
                  <nz-form-item>
                    <nz-form-label [nzSpan]="6">单词拆分</nz-form-label>
                    <nz-form-control [nzSpan]="12">
                      <button nz-button nzType="dashed" class="add-btn" id="add-btn"
                        (click)="addLetterItem(data.answer)">
                        <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]="12">
                      <span nz-text>
                        <label *ngFor="let letter of data.answer.letterArr;let j = index"
                          [ngStyle]="{'color':letter.isFill=='1'?'#c8161d':'#000000','font-size':'40px'}">{{letter.val}}</label>
                      </span>
                    </nz-form-control>
                  </nz-form-item>
                  <nz-form-item>
                    <nz-form-control [nzOffset]="2" [nzSpan]="20">
                      <nz-table #lettersTable nzBordered nzTitle="按照单词填空需要进行拆分填写" [nzData]="data.answer.letterArr"
                        [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.isFill" (ngModelChange)="save()">
                                <label nz-radio nzValue="1"></label>
                                <label nz-radio nzValue="0"></label>
                              </nz-radio-group>
                            </td>
                            <td>
                              <a (click)="delLetter(data.answer,j)">delete</a>
                            </td>
                          </tr>
                        </tbody>
                      </nz-table>
                    </nz-form-control>
                  </nz-form-item>
                </nz-card>
                <ng-template #extraTemplate>
                  <button style="margin: 10px;" nz-button nzType="danger" (click)="delExercisesItem(zone, j)">
                    <span>删除</span>
                  </button>
                </ng-template>
              </div>
            </div>
          </div>
          <ng-template #actionAdd>
            <button nz-button nzType="dashed" [disabled]="zone.exercisesArr.length == 3 ? true : false"
                  class="add-btn" id="add-btn" (click)="addExercisesItem(zone)">
                  <i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
                </button>
          </ng-template>
        </nz-card>
      </div>
    </div>
  </div>
</div>