custom-action.component.html 6.03 KB
Newer Older
limingzhe's avatar
limingzhe committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 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
<div class="position-relative">


  <button nz-button (click)="setAnimaBtnClick()" style=" border-radius: 0.5rem; border: 1px solid #ddd;" >
    <i nz-icon nzType="tool" nzTheme="outline"></i>
    {{btnName}}
  </button>


  <!--配置龙骨面板-->
  <nz-modal [(nzVisible)]="panelVisible" (nzAfterClose)="closePanel()" [nzTitle]="btnName" (nzOnCancel)="panelCancel()" (nzOnOk)="panelOk()" nzOkText="保存">
    <div>
      <h4>基础内容:</h4>
     
      <div style="margin-bottom: 10px; width: 80%; margin: auto;">

        <!-- <nz-radio-group [ngModel]="item.type" (ngModelChange)="radioChange($event)">
          <label nz-radio nzValue="pic">图片</label>
          <label nz-radio nzValue="text">文本</label>
        </nz-radio-group> -->

        <div *ngIf="item.type == 'pic'">
          <app-upload-image-with-preview
            [picUrl]="item?.pic_url"
            (imageUploaded)="onItemImgUploadSuccess($event, item)">
          </app-upload-image-with-preview>
        </div>
  
        <div *ngIf="item.type == 'text'">
          <input type="text" nz-input [(ngModel)]="item.text" (blur)="saveText(item)">
        </div>

        <div *ngIf="item.type == 'anima'" style="margin-left: 100px;">
          <app-upload-dragon-bone
            [skeJsonData]=item.skeJsonData
            [texJsonData]=item.texJsonData
            [texPngData]=item.texPngData
            (save)="saveAnima($event)"
          >
          </app-upload-dragon-bone>
        </div>
      </div>      
     

      <nz-divider style="margin-top: 10px;"></nz-divider>

      <h4>状态设置:</h4>
      <div style="display: flex; justify-content: space-around;">

        <div style="width: 30%; display: flex; align-items: center; flex-direction: column;">
          <h5> 开始状态 </h5>
          <div *ngFor="let op of item.changeOption; let i = index" style="margin-bottom: 5px; ">
            <div style="display: flex; align-items: center; justify-content: center;">
              <span>{{op[0]}}: </span> <input type="text" nz-input [(ngModel)]="op[1]" (blur)="saveText(op)" style="margin-left: 5px;">
            </div>
          </div>
        </div>


        <div style="width: 30%; display: flex; align-items: center; flex-direction: column; ">
          <h5> 切换时间 </h5>
          <div style="display: flex; width: 100%; align-items: center; justify-content: center;">
            <span>time: </span> <input type="text" nz-input [(ngModel)]="item.changeTime" (blur)="saveText(item.changeTime)" style="width: 80px; margin-left: 5px;">
          </div>
        </div>


        <div style="width: 30%; display: flex; align-items: center; flex-direction: column;">
          <h5> 结束状态 </h5>
          <div *ngFor="let op of item.changeOption; let i = index" style="margin-bottom: 5px; ">
            <div style="display: flex; align-items: center; justify-content: center;">
              <span>{{op[0]}}: </span> <input [disabled]="op[2] == null" type="text" nz-input [(ngModel)]="op[2]" (blur)="saveText(op)" style="margin-left: 5px;">
            </div>
          </div>
        </div>

      </div>

      <div style="display: flex; align-items: center; justify-content: center; margin-top: 10px;">
        <button style="margin-left: 20px; margin-top: -5px" nz-button (click)="copyChangeData()"> 复制数据 </button>
        <div style="margin-left: 20px; margin-top: -5px" >
  
          <span>粘贴数据: </span>
          <input style="width: 100px;" type="text" nz-input [(ngModel)]="pasteData" >
          <button style="margin-left: 5px;" nz-button [disabled]="pasteData==''" nzType="primary" (click)="importData()">导入</button>
  
        </div>
      </div>
     

      <nz-divider style="margin-top: 10px;"></nz-divider>

      <h4> 音频设置 </h4>

      <app-audio-recorder
        style="margin: auto"
        [audioUrl]="item?.audio_url"
        (audioUploaded)="onItemAudioUploadSuccess($event, item)"
      ></app-audio-recorder>
     
    </div>
   


<!-- 
    <div class="anima-upload-btn">
      <span style="margin-right: 10px">上传 ske_json 文件: </span>
      <nz-upload [nzShowUploadList]="false" 
                nzAccept="application/json"
                [nzAction]="uploadUrl"
                [nzData]="uploadData"
                (nzChange)="skeJsonHandleChange($event)">
        <button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
      </nz-upload>
      <i *ngIf="isSkeJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
      <span *ngIf="skeJsonData && skeJsonData['name']" style="margin-left: 10px"><u> {{skeJsonData['name']}} </u></span>
    </div>

    <div class="anima-upload-btn">
      <span style="margin-right: 10px">上传 tex_json 文件: </span>
      <nz-upload [nzShowUploadList]="false"
                nzAccept="application/json"
                [nzAction]="uploadUrl"
                [nzData]="uploadData"
                (nzChange)="texJsonHandleChange($event)">
        <button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
      </nz-upload>
      <i *ngIf="isTexJsonLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
      <span *ngIf="texJsonData && texJsonData['name']" style="margin-left: 10px"><u> {{texJsonData['name']}} </u></span>
    </div>

    <div class="anima-upload-btn">
      <span style="margin-right: 10px">上传 tex_png 文件: </span>
      <nz-upload [nzShowUploadList]="false"
                nzAccept = "image/*"
                [nzAction]="uploadUrl"
                [nzData]="uploadData"
                (nzChange)="texPngHandleChange($event)">
        <button nz-button><i nz-icon nzType="upload"></i><span>Upload</span></button>
      </nz-upload>
      <i *ngIf="isTexPngLoading" style="margin-left: 10px;" nz-icon [nzType]="'loading'"></i>
      <span *ngIf="texPngData && texPngData['name']" style="margin-left: 10px"><u> {{texPngData['name']}} </u></span>
    </div>

    <div class="anima-upload-btn" *ngIf="animaNames && animaNames.length > 0">
      提示:需包含动画: {{animaNames.toString()}}.
    </div> -->

  </nz-modal>

</div>