form.component.html 7.47 KB
<div class="model-content">
  <div class="card-config">


    <div class="card-item" style="padding: 0.5vw;" >
      <div class="card-item-content border" style="min-width: 1280px">
        <div class="card-item-content">
          <div class="title" >
            题目素材
          </div>
          <div class="section" >
            <div class="section-content">
              <div style="display: flex; margin-bottom: 10px;">
                <div style="flex:1; text-align: right; margin-right: 10px;">
                  <span>显示选项</span><span> :</span>
                </div>
                <div style="flex:3">
                  <nz-radio-group [(ngModel)]="contentObj.mainQuestion.type" (ngModelChange)="saveItem()" >
                    <label nz-radio [nzValue]="'Text'">文字</label>
                    <label nz-radio [nzValue]="'Image'">图片</label>
                    <label nz-radio [nzValue]="'LongAudio'">长音频</label>
                  </nz-radio-group>
                </div>
                <div style="flex:8">
                  <div *ngIf="contentObj.mainQuestion.type=='Image'">
                    <app-upload-image-with-preview style="width: 100%;" [picUrl]="contentObj.mainQuestion.image_url" (imageUploaded)="onImageUploadSuccessByItem($event, contentObj.mainQuestion, 'image_url')"></app-upload-image-with-preview>
                  </div>
                  <div *ngIf="contentObj.mainQuestion.type=='Text'">
                    <textarea type="text" nz-input placeholder="" [(ngModel)]="contentObj.mainQuestion.text" (blur)="saveItem()" ></textarea>
                  </div>
                  <div *ngIf="contentObj.mainQuestion.type=='LongAudio'">
                    <app-audio-recorder [audioUrl]="contentObj.mainQuestion.longAudio_url" (audioUploaded)="onAudioUploadSuccessByItem($event, contentObj.mainQuestion, 'longAudio_url')" ></app-audio-recorder>
                  </div>
                </div> 
              </div>
            </div> 
          </div>
          <div class="section" >
            <div class="section-content">
              <div style="display: flex; margin-bottom: 10px;">
                <div style="flex:1; text-align: right; margin-right: 10px;">
                  <span>短音频</span><span> :</span>
                </div>
                <div style="flex:3">
                  <app-audio-recorder [audioUrl]="contentObj.mainQuestion.shortAudio_url" (audioUploaded)="onAudioUploadSuccessByItem($event, contentObj.mainQuestion, 'shortAudio_url')" ></app-audio-recorder>
                </div>
                <div style="flex:8"></div>
              </div>
            </div>
          </div>



          <!-- 上层卡片 -->
          <div class="title" >
            上层卡片
          </div>
          <div class="section">
            <div class="section-content"> 
              <div *ngFor="let it of item.contentObj.textUp; let i = index" class="card-item" >
                <div style="display: flex;">
                  <div style="flex:1; text-align: right; margin-right: 10px;">
                    <span>{{i+1}}</span><span> :</span>
                  </div>
                  <div style="flex:3">
                    <input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()"/>
                  </div>
                  <div style="flex:8" style="margin-left: 20px;">
                    <span>对应下层卡片</span><span> :  </span>
                    <nz-checkbox-group [(ngModel)]="it.checkOptions" (ngModelChange)="save()"></nz-checkbox-group>
                  </div>
                  <div style="flex:4">
                    <div style="float:right; text-align: left; padding-left: 20px;">
                      <button style="vertical-align:baseline;" nz-button nzType="default" (click)="handleMoveItemUp(item.contentObj.textUp, i)" [disabled]="i==0">
                        <i nz-icon nzType="up" nzTheme="outline" style="float: left; margin-top: 4px;"></i>
                        <span style="float: right;">上移</span>
                      </button>
                      <button style="margin-left: 10px; vertical-align:baseline;" nz-button nzType="default" (click)="handleMoveItemDown(item.contentObj.textUp, i)" [disabled]="i==item.contentObj.textUp.length-1">
                        <i nz-icon nzType="down" nzTheme="outline" style="float: left; margin-top: 4px;"></i>
                        <span style="float: right;">下移</span>
                      </button>
                      <button style="margin-left: 10px; vertical-align:baseline;" nz-button nzType="danger" (click)="deleteItem(item.contentObj.textUp, i)" >
                        <span>删除</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>

              <div class="card-item" style="padding: 0.5vw;  text-align: right;" >
                <button nz-button nzType="primary"  (click)="addItem(item.contentObj.textUp, 'card')">
                  <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
                  新建卡片
                </button>
              </div>

            </div>
          </div>


          <!-- 下层卡片 -->
          <div class="title" >
            下层卡片
          </div>
          <div class="section" >
            <div class="section-content"> 
              <div *ngFor="let it of item.contentObj.textDown; let i = index" class="card-item" >
                <div style="display: flex;">
                  <div style="flex:1; text-align: right; margin-right: 10px;">
                    <span>{{i+1}}</span><span> :</span>
                  </div>
                  <div style="flex:3">
                    <input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()"/>
                  </div>
                  <div style="flex:8">
                  </div>
                  <div style="flex:4">
                    <div style="float:right; text-align: left; padding-left: 20px;">
                      <button style="vertical-align:baseline;" nz-button nzType="default" (click)="handleMoveItemUp(item.contentObj.textDown, i)" [disabled]="i==0">
                        <i nz-icon nzType="up" nzTheme="outline" style="float: left; margin-top: 4px;"></i>
                        <span style="float: right;">上移</span>
                      </button>
                      <button style="margin-left: 10px; vertical-align:baseline;" nz-button nzType="default" (click)="handleMoveItemDown(item.contentObj.textDown, i)" [disabled]="i==item.contentObj.textDown.length-1">
                        <i nz-icon nzType="down" nzTheme="outline" style="float: left; margin-top: 4px;"></i>
                        <span style="float: right;">下移</span>
                      </button>
                      <button style="margin-left: 10px; vertical-align:baseline;" nz-button nzType="danger" (click)="deleteItem(item.contentObj.textDown, i)" >
                        <span>删除</span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>

              <div class="card-item" style="padding: 0.5vw; text-align: right;" >
                <button nz-button nzType="primary"  (click)="addItem(item.contentObj.textDown, 'card')">
                  <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
                  新建卡片
                </button>
              </div>
            </div>
          </div>
          
        </div>
      </div> 
    </div>
  </div>
</div>