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="discipline"
            (ngModelChange)="changeCode()"
            (nzOnSearch)="getCode($event)"
          >
            @for(major of selectList02; track major.code;let index = $index){
            <nz-option
              nzCustomContent
              [nzValue]="major.code"
              [nzLabel]="major?.code + ' ' + major?.name"
            >
              <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>
        教材应用对象及所属学科专业类
        <span
          nz-popover
          nzPopoverPlacement="top"
          nzPopoverContent="如为面向所有学生的通识类教材，选0000"
          class="exclamation-circle"
          nz-icon
          nzType="exclamation-circle"
          nzTheme="outline"
        ></span>
      </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?.code + ' ' + major?.name"
            >
              <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
            [files]="
              validateForm.value.approvedImgUrl
                ? [
                    {
                      url: validateForm.value.approvedImgUrl,
                      name: '教材获批截图'
                    }
                  ]
                : []
            "
            [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>
        申报类型
        <span
          nz-popover
          nzPopoverPlacement="top"
          [nzPopoverContent]="typeTemplate"
          class="exclamation-circle"
          nz-icon
          nzType="exclamation-circle"
          nzTheme="outline"
        ></span>
      </nz-form-label>
      <ng-template #typeTemplate>
        <div class="template">
          本次评选不受理系列教材申报。如《某教材—理论篇》《某教材—实践篇》或《某某教材—听说》《某某教材—读写》均属于系列教材。系列教材建议申报其中最优的一册。全册教材指相同书名的上下册、1—n
          册，如《某教材（上）》《某教材（下）》或《某某教材（第 1
          册）》《某某教材（第 2 册）》《某某教材（第 3
          册）》。全册教材可按“单本”申报，也可按“全册”申报，
          如按“全册”申报只占用一个名额。
        </div>
      </ng-template>
      <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>