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

<form nz-form [formGroup]="validateForm" class="login-form">
  <nz-form-item style="margin-bottom: 16px">
    <nz-form-label [nzSm]="8" [nzNoColon]="true" [nzXs]="8" nzRequired
      >国际标准书号（ISBN）</nz-form-label
    >
    <nz-form-control
      nzErrorTip="请输入国际标准书号，仅可输入数字"
      [nzSm]="12"
      [nzXs]="12"
    >
      <nz-input-group nzSearch [nzAddOnAfter]="autoButton">
        <input
          type="number"
          nz-input
          formControlName="ISBN"
          placeholder="请输入国际标准书号，仅可输入数字"
        />
      </nz-input-group>
      <ng-template #autoButton>
        <button (click)="autoCompleteByISBN()" nz-button nzType="primary">
          获取教材信息
        </button>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item style="margin-bottom: 16px">
    <nz-form-label [nzSm]="8" [nzNoColon]="true" [nzXs]="8" nzRequired>
      第一主编（作者）
      <span
        class="exclamation-circle"
        nzPopoverPlacement="top"
        nz-popover
        [nzPopoverContent]="authorTemplate"
        nz-icon
        nzType="exclamation-circle"
        nzTheme="outline"
      ></span>
    </nz-form-label>
    <ng-template #authorTemplate>
      <div class="template">
        教材的第一主编须与版权页及CIP核字号验证一致。第一主编是组织或单位的，也应按版权页填写组织或单位，同时按照教材相关内容中的具体编者名单，填写“作者信息”表。按“全册”申报的，如多册之间的第一主编不是同一人，可将各册的第一主编均写上，
        并由其中一人所在单位处申报。
      </div>
    </ng-template>
    <nz-form-control
      nzErrorTip="请输入第一主编（作者）"
      [nzSm]="12"
      [nzXs]="12"
    >
      <nz-input-group>
        <input
          type="text"
          nz-input
          formControlName="author"
          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>
      第一主编（作者）单位
      <span
        class="exclamation-circle"
        nzPopoverPlacement="top"
        nz-popover
        [nzPopoverContent]="unitTemplate"
        nz-icon
        nzType="exclamation-circle"
        nzTheme="outline"
      ></span>
    </nz-form-label>
    <ng-template #unitTemplate>
      <div class="template">
        <ul>
          <li>
            如教材第一主编出版教材后调换单位，原则上由现在单位处申报，但须经原单位认可。
          </li>
          <li>
            如教材第一主编无单位或者单位不是高校，可由第二主编单位处申报，但须经原单位同意。
          </li>
          <li>
            如教材第一主编已退休，原则上仍由原单位处申报。如退休后被聘至新单位，且在新单位工作期间出版教材，可由新单位处申报，但须经原单位认可。
          </li>
          <li>
            如教材第一主编已去世，可根据第一主编（作者）单位意见，继续由该单位申报，或者经第一主编单位同意，顺延至第二主编（作者）所在单位申报，上述两种方式均需去世第一主编继承人同意。
          </li>
        </ul>
        以上情况，均需在申报材料中有说明并有佐证，如同意申报的证明等。
      </div>
    </ng-template>
    <nz-form-control
      nzErrorTip="请输入第一主编（作者）单位"
      [nzSm]="12"
      [nzXs]="12"
    >
      <nz-input-group>
        <input
          type="text"
          nz-input
          formControlName="unit"
          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="请选择第一主编（作者）单位类型"
          formControlName="unitType"
        >
          @for(type of unitSelects; track type.code;let index = $index){
          <nz-option
            nzCustomContent
            [nzValue]="type.name"
            [nzLabel]="type.name"
          >
            <div>{{ type.name }}</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="lang"
        >
          @for(lang of selectLang; track lang.lang;let index = $index){
          <nz-option
            nzCustomContent
            [nzValue]="lang.name"
            [nzLabel]="lang.name"
            >{{ lang.name }}</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"
      >其他主编姓名
      <span
        nz-popover
        nzPopoverPlacement="top"
        nzPopoverContent="顺序完全遵照教材上的排序"
        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>
        <textarea
          type="text"
          nz-input
          formControlName="authors"
          placeholder="请输入其他主编姓名，使用「、」隔开"
        ></textarea>
      </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"
      >其他编者姓名
      <span
        nz-popover
        nzPopoverPlacement="top"
        nzPopoverContent="顺序完全遵照教材上的排序，请列出所有作者姓名，以“、”连接"
        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>
        <textarea
          type="text"
          nz-input
          formControlName="editor"
          placeholder="请输入其他编者姓名，使用「，」隔开"
        ></textarea>
      </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
    >
    @if (!isShowChooseEU) {
    <p
      title="点击更改出版单位"
      (click)="isShowChooseEU = true"
      style="margin-top: 6px; color: rgb(0, 140, 255)"
    >
      {{ validateForm.value.editionUnit }}
    </p>
    }@else{
    <nz-form-control nzErrorTip="请输入出版单位" [nzSm]="12" [nzXs]="12">
      <nz-input-group>
        <nz-select
          nzShowSearch
          nzServerSearch
          nzPlaceHolder="选择出版单位"
          formControlName="editionUnit"
          [nzShowArrow]="false"
          [nzFilterOption]="nzFilterOption"
          (nzOnSearch)="search($event)"
        >
          @for(edu of eduList; track edu;let index = $index){
          <nz-option
            nzCustomContent
            [nzLabel]="edu?.get('name')"
            [nzValue]="edu?.get('name')"
          >
            {{ edu?.get("name") }}
          </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
        [nzPopoverContent]="editionFirstTemplate"
        nzPopoverPlacement="top"
        class="exclamation-circle"
        nz-icon
        nzType="exclamation-circle"
        nzTheme="outline"
      ></span>
    </nz-form-label>
    <ng-template #editionFirstTemplate>
      <div class="template">
        参评教材需同时满足以下两个时间要求：<br />
        1、2022年8月（含）前初版（第一版）教材出版；<br />
        2、2022年12月（含）后对教材进行过修订或重印
      </div>
    </ng-template>
    <nz-form-control nzErrorTip="请输入初版时间" [nzSm]="12" [nzXs]="12">
      <nz-input-group>
        <nz-date-picker
          nzMode="month"
          style="width: 100%"
          formControlName="editionFirst"
        ></nz-date-picker>
      </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 style="padding: 0 5px;" nz-icon nzType="info-circle" nzTheme="outline"></span> -->
    </nz-form-label>
    <nz-form-control nzErrorTip="请输入载体形式" [nzSm]="12" [nzXs]="12">
      <nz-input-group>
        <nz-select
          nzShowSearch
          nzAllowClear
          nzPlaceHolder="选择载体形式"
          formControlName="carrierShape"
        >
          @for(item of carrierOptions; track item.code;let index = $index){
          <nz-option
            nzCustomContent
            [nzValue]="item.name"
            [nzLabel]="item.name"
            >{{ item.name }}</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>
        <div class="basic-row">
          <nz-date-picker
            nzMode="month"
            style="flex: 1"
            formControlName="editionDate"
          ></nz-date-picker>
          <nz-input-group
            style="width: 150px; margin-left: 20px"
            [nzSuffix]="suffixTemplateInfo"
          >
            <!-- <input type="number" formControlName="editionNumber" nz-input placeholder="输入版次" /> -->
            <nz-input-number
              nzBorderless
              formControlName="editionNumber"
              [nzPrecision]="0"
              [nzMin]="1"
              [nzStep]="1"
            ></nz-input-number>
          </nz-input-group>
          <ng-template #suffixTemplateInfo> 版 </ng-template>
        </div>
      </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>
        <div class="basic-row">
          <nz-date-picker
            nzMode="month"
            style="flex: 1"
            formControlName="printDate"
            [nzDisabledDate]="disabledEditionDate"
          ></nz-date-picker>
          <nz-input-group
            style="width: 150px; margin-left: 20px"
            [nzSuffix]="suffixTemplateInfo02"
          >
            <!-- <input type="number" formControlName="printNumber" nz-input placeholder="输入印次" /> -->
            <nz-input-number
              nzBorderless
              [nzPrecision]="0"
              formControlName="printNumber"
              [nzMin]="1"
              [nzStep]="1"
            ></nz-input-number>
          </nz-input-group>
          <ng-template #suffixTemplateInfo02> 次 </ng-template>
        </div>
      </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-input-group [nzSuffix]="suffixTemplateInfo03">
          <!-- <input type="number" formControlName="printSum" nz-input placeholder="输入合计印数" /> -->
          <nz-input-number
            style="width: 100%"
            nzBorderless
            [nzPrecision]="4"
            formControlName="printSum"
            [nzMin]="0.01"
            [nzStep]="1"
          ></nz-input-number>
        </nz-input-group>
        <ng-template #suffixTemplateInfo03> 万册 </ng-template>
      </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">
      初版以来是否列为重点项目
      <span
        nz-popover
        nzPopoverPlacement="top"
        nzPopoverContent="若没有列为重点项目则不选此项"
        class="exclamation-circle"
        nz-icon
        nzType="exclamation-circle"
        nzTheme="outline"
      ></span>
    </nz-form-label>

    <nz-form-control nzErrorTip="" [nzSm]="12" [nzXs]="12">
      <nz-checkbox-wrapper>
        @for (item of importantProjectList; track item.value) {
        <label
          style="margin: 0; padding: 0"
          [ngModelOptions]="{ standalone: true }"
          nz-checkbox
          [nzValue]="item.value"
          [(ngModel)]="item.checked"
          >{{ item.value }}</label
        >
        <br />
        }
      </nz-checkbox-wrapper>
      @if (importantProjectList[4].checked) {
      <input
        type="text"
        formControlName="importantProjectOther"
        placeholder="请输入入选项目名称"
        nz-input
      />
      }
    </nz-form-control>
  </nz-form-item>
</form>