upload-dragon-bone.component.html 3.11 KB
<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)]="animaPanelVisible" (nzAfterClose)="closePanel()" nzTitle="配置资源文件"
    (nzOnCancel)="animaPanelCancel()" (nzOnOk)="animaPanelOk()" nzOkText="保存">

    <nz-radio-group [ngModel]="animType" (ngModelChange)="animRadioChange($event)"  style="display: flex; align-items: center; justify-content: center; flex-wrap: wrap;">
      <div style="display: flex; ">
        <label nz-radio nzValue="dragonBone">龙骨</label>
        <label nz-radio nzValue="spine">spine</label>
      </div>
    </nz-radio-group>

    <div class="anima-upload-btn">
      <span *ngIf="animType == 'dragonBone'" style="margin-right: 10px">上传 ske_json 文件: </span>
      <span *ngIf="animType == 'spine'" style="margin-right: 10px">上传 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 *ngIf="animType == 'dragonBone'" style="margin-right: 10px">上传 tex_json 文件: </span>
      <span *ngIf="animType == 'spine'" style="margin-right: 10px">上传 atlas 文件: </span>
      <nz-upload [nzShowUploadList]="false" [nzAccept]="animType == 'dragonBone' ? '.json' : '.atlas'" [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 *ngIf="animType == 'dragonBone'" style="margin-right: 10px">上传 tex_png 文件: </span>
      <span *ngIf="animType == 'spine'" style="margin-right: 10px">上传 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>