edu-textbook/projects/textbook/src/modules/nav-author/components/basic-in/basic-in.component.html

<div class="entry">
  <form
    nz-form
    [formGroup]="validateForm"
    class="login-form"
    (ngSubmit)="submitForm()"
  >
    <nz-form-item style="margin-bottom: 16px">
      <nz-form-label
        [nzSm]="8"
        [nzNoColon]="true"
        [nzXs]="8"
        nzRequired
        nzFor="user"
        >申报教材名称</nz-form-label
      >
      <nz-form-control nzErrorTip="请输入申报教材名称" [nzSm]="12" [nzXs]="12">
        <nz-input-group>
          <input
            type="text"
            nz-input
            formControlName="title"
            placeholder="请输入申报教材名称"
          />
        </nz-input-group>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item style="margin-bottom: 16px">
      <nz-form-label [nzSm]="8" [nzNoColon]="true" [nzXs]="8" nzRequired
        >教材应用对象及所属学科专业类</nz-form-label
      >
      <nz-form-control
        nzErrorTip="输入所属本科专业类代码（四位）搜索所属学科"
        [nzSm]="12"
        [nzXs]="12"
      >
        <nz-input-group>
          <nz-select
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="填写 4 位专业代码选择"
            formControlName="majorPoniter"
            (ngModelChange)="changeCode()"
            (nzOnSearch)="getCode($event)"
          >
            @for(major of selectList; track major.code;let index = $index){
            <nz-option
              nzCustomContent
              [nzValue]="major.code"
              [nzLabel]="major.name + '-' + major.code"
            >
              <div>{{ major.name }}</div>
              <div style="font-size: 12px; color: gray">{{ major.code }}</div>
            </nz-option>
            }
          </nz-select>
          <!-- <nz-select [nzOptionOverflowSize]="nzOptionOverflowSize" nzShowSearch nzAllowClear nzPlaceHolder="输入所属本科专业类代码（四位）搜索所属学科" formControlName="majorPoniter">
            @for(major of selectList; track major.code;let index = $index){
            <nz-option nzCustomContent [nzValue]="major.code +'/'+ major.name" [nzLabel]="major.name+'-'+major.code">
              <div>{{ major.name }}</div>
              <div style="font-size: 12px;color: gray;">{{ major.code }}</div>
            </nz-option>
            }
          </nz-select> -->
        </nz-input-group>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item style="margin-bottom: 16px">
      <nz-form-label [nzSm]="8" [nzNoColon]="true" [nzXs]="8" nzRequired
        >是否重点立项教材</nz-form-label
      >
      <nz-form-control nzErrorTip="请输入完成项" [nzSm]="12" [nzXs]="12">
        <nz-input-group>
          <nz-select
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="请输入是否重点立项教材"
            formControlName="approval"
          >
            @for (item of options; track item.code) {
            <nz-option
              nzCustomContent
              [nzValue]="item.name"
              [nzLabel]="item.name"
              >{{ item.name }}</nz-option
            >
            }
            <!-- <nz-option nzCustomContent [nzValue]="'基础学科“101计划”核心教材'" [nzLabel]="'基础学科“101计划”核心教材'">基础学科“101计划”核心教材</nz-option>
            <nz-option nzCustomContent [nzValue]="'战略性新兴领域教材'" [nzLabel]="'战略性新兴领域教材'">战略性新兴领域教材</nz-option>
            <nz-option nzCustomContent [nzValue]="'“四新”重点建设教材'" [nzLabel]="'“四新”重点建设教材'">“四新”重点建设教材</nz-option>
            <nz-option nzCustomContent [nzValue]="'否'" [nzLabel]="'否'">否</nz-option> -->
          </nz-select>
        </nz-input-group>
      </nz-form-control>
    </nz-form-item>
    @if (validateForm.value.approval && validateForm.value.approval != '否') {
    <nz-form-item style="margin-bottom: 16px">
      <nz-form-label [nzSm]="8" [nzNoColon]="true" [nzXs]="8" nzRequired
        >教材获批截图</nz-form-label
      >
      <nz-form-control nzErrorTip="请上传教材获批截图" [nzSm]="12" [nzXs]="12">
        @if (validateForm.value.approvedImgUrl) {
        <a
          style="color: #3e49b3; font-size: 14px"
          (click)="openFile(validateForm.value.approvedImgUrl)"
        >
          <span nz-icon nzType="file" nzTheme="outline"></span>
          教材获批截图
        </a>
        }
        <nz-input-group>
          <app-comp-upload
          [type]="'pdf'"
            (change)="upload($event, 'approvedImgUrl')"
            title="上传教材获批截图"
          ></app-comp-upload>
        </nz-input-group>
        <p style="color: gray">支持上传 PDF 格式，文件大小不超过 2M</p>
      </nz-form-control>
    </nz-form-item>
    }
    <nz-form-item style="margin-bottom: 16px">
      <nz-form-label [nzSm]="8" [nzNoColon]="true" [nzXs]="8" nzRequired
        >申报类型</nz-form-label
      >
      <nz-form-control nzErrorTip="请输入申报类型" [nzSm]="12" [nzXs]="12">
        <nz-input-group>
          <!-- <input
            type="text"
            nz-input
            formControlName="type"
            placeholder="请输入申报类型"
          /> -->

          <nz-radio-group
            style="display: flex; flex-direction: column"
            formControlName="type"
          >
            <label (click)="checkSingle()" nz-radio nzValue="单册">单册</label>
            <div class="basic-row">
              <label (click)="checkAll()" nz-radio nzValue="全册">全册</label>
              <!-- @if (validateForm.value.type =='全册') {
              <nz-input-group
                style="flex: 1; margin-left: 20px"
                [nzSuffix]="suffixTemplateInfo"
              >
                <input
                  min="2"
                  type="number"
                  [ngModelOptions]="{ standalone: true }"
                  [(ngModel)]="typeNumber"
                  (ngModelChange)="typeNumberChange()"
                  nz-input
                  placeholder="输入册数"
                />
              </nz-input-group>
              <ng-template #suffixTemplateInfo> 册 </ng-template>
              } -->
            </div>
          </nz-radio-group>
        </nz-input-group>
      </nz-form-control>
    </nz-form-item>

    @if(!loading){ 
      <!-- @if(validateForm.value.type=='全册'){
        <mat-accordion class="example-headers-align" multi>
          @for (item of eduTextbookVolumeList; track $index) {
          <mat-expansion-panel>
            <mat-expansion-panel-header>
              <mat-panel-title>
                <b>分册{{ $index + 1 }}</b>
                <span
                  (click)="deleteVolume($index)"
                  style="margin-left: 20px"
                  nz-icon
                  nzType="delete"
                ></span>
              </mat-panel-title>
            </mat-expansion-panel-header>

            <app-one
              #children
              [eduTextbookId]="eduTextbookId"
              [eduTextbookVolumeId]="item?.id"
            ></app-one>
          </mat-expansion-panel>
          }
        </mat-accordion>
        } @else { 
          @if (singleId) {
          <app-one
            #children
            [eduTextbookId]="eduTextbookId"
            [eduTextbookVolumeId]="singleId"
          ></app-one>
        }
         @if(!singleId){
          <app-one
            #children
            [eduTextbookId]="eduTextbookId"
            eduTextbookVolumeId=""
          ></app-one>
        } 
      } } -->
      @if (validateForm.value.type =='全册') {
        <nz-collapse [nzBordered]="false">
          @for (panel of eduTextbookVolumeList; track panel) {
          <nz-collapse-panel
            #p
            [nzHeader]="title"
            [nzActive]="false"
            nzExpandedIcon="caret-right"
            [nzExtra]="extraTpl"
            style="
              background: #f7f7f7;
              border-radius: 4px;
              margin-bottom: 24px;
              border: 0px;
            "
          >
          <ng-template #title>
            <span class="panel-title">{{'分册' + ($index+1)}}</span>
          </ng-template>
          <ng-template #extraTpl>
            <span nz-icon nzType="delete" (click)="deleteVolume($index, children)"></span>
          </ng-template>
            <div class="">
              <app-one
              #children
              [eduTextbookId]="eduTextbookId"
              [eduTextbookVolumeId]="panel?.id"
            ></app-one>
            </div>
            <ng-template #expandedIcon let-active>
              {{ active }}
              <span
                nz-icon
                nzType="caret-right"
                class="ant-collapse-arrow"
                [nzRotate]="p.nzActive ? 90 : -90"
              ></span>
            </ng-template>
          </nz-collapse-panel>
          }
        </nz-collapse>
        }@else { 
          @if (singleId) {
          <app-one
            #children
            [eduTextbookId]="eduTextbookId"
            [eduTextbookVolumeId]="singleId"
          ></app-one>
        }
         @if(!singleId){
          <app-one
            #children
            [eduTextbookId]="eduTextbookId"
            eduTextbookVolumeId=""
          ></app-one>
        } }
    }
    @if (validateForm.value.type == '全册' && this.eduTextbookVolumeList.length < 12 ) {
      <div class="add-bar" (click)="addVolume()">
        新增分页
      </div>
    }
  </form>
</div>
<div class="footer">
  <button
    nz-button
    nzType="default"
    style="margin-right: 20px"
    (click)="submitForm('save')"
  >
    保存本页
  </button>
  <button
    nz-button
    nzType="primary"
    style="background: #3e49b3; border: 1px #3e49b3"
    (click)="submitForm('next')"
  >
    下一页
  </button>
</div>


<div class="loading" [hidden]="!saveLoading">
  <nz-spin nzSimple [nzSize]="'large'"></nz-spin>
</div>