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

<div class="entry">
  <form
    nz-form
    [formGroup]="validateForm"
    class="login-form"
    (ngSubmit)="submitForm()"
  >
    <div class="first-head">
      <div nz-row>
        <div nz-col nzSpan="12">
          <nz-form-item class="row" style="margin-bottom: 16px">
            <nz-form-label
              class="label"
              [nzNoColon]="true"
              [nzSm]="16"
              [nzXs]="16"
              nzRequired
              >适用专业代码（六位）及名称</nz-form-label
            >
            <nz-form-control
              class="val"
              nzErrorTip="适用专业代码（六位）及名称"
              style="width: 100%"
            >
              <nz-select
                style="width: 80%"
                nzShowSearch
                nzAllowClear
                nzPlaceHolder="填写 6 位专业代码选择"
                formControlName="major"
                (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-form-control>
          </nz-form-item>
          <nz-form-item class="row" style="margin-bottom: 16px">
            <nz-form-label
              class="label"
              [nzNoColon]="true"
              [nzSm]="8"
              [nzXs]="8"
              nzRequired
              >课程学时</nz-form-label
            >
            <nz-form-control
              class="val"
              nzErrorTip="请填写课程学时"
              style="width: 100%"
            >
              <nz-input-group
                style="width: 80%"
                [nzSuffix]="suffixTemplateInfo"
              >
                <input
                  type="number"
                  formControlName="period"
                  nz-input
                  placeholder="填写学时数"
                />
              </nz-input-group>
              <ng-template #suffixTemplateInfo> 学时 </ng-template>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col nzSpan="12">
          <nz-form-item class="row" style="margin-bottom: 16px">
            <nz-form-label
              class="label"
              [nzNoColon]="true"
              [nzSm]="6"
              [nzXs]="6"
              nzRequired
              >适用课程</nz-form-label
            >
            <nz-form-control
              class="val"
              nzErrorTip="请填写适用课程"
              style="width: 100%"
            >
              <input
                type="text"
                formControlName="lessons"
                nz-input
                placeholder="填写适用课程名称，多门课程名称使用“；”分隔"
              />
            </nz-form-control>
          </nz-form-item>

          <nz-form-item class="row" style="margin-bottom: 16px">
            <nz-form-label
              class="label"
              [nzNoColon]="true"
              [nzSm]="6"
              [nzXs]="6"
              nzRequired
              >适用课程性质</nz-form-label
            >

            <nz-form-control
              class="val"
              nzErrorTip="请选择适用课程性质"
              style="width: 100%"
            >
              <nz-checkbox-wrapper class="check">
                <div nz-row>
                  @for (checkItem of checkOptionsOne; track $index) {
                  <label
                    [ngModelOptions]="{ standalone: true }"
                    nz-checkbox
                    [nzValue]="checkItem.value"
                    [(ngModel)]="checkItem.checked"
                    >{{ checkItem.value }}</label
                  >
                  }
                </div>
              </nz-checkbox-wrapper>
              <nz-radio-group
                class="check"
                [ngModelOptions]="{ standalone: true }"
                [(ngModel)]="checkTwo"
                (ngModelChange)="changeRadio()"
              >
                @for (checkItem of checkOptionsTwo; track $index) {
                <label nz-radio [nzValue]="checkItem.value">{{
                  checkItem.label
                }}</label>
                }
              </nz-radio-group>
              <nz-checkbox-wrapper class="check">
                <div nz-row>
                  @for (checkItem of checkOptionsThree; track $index) {
                  <label
                    [ngModelOptions]="{ standalone: true }"
                    nz-checkbox
                    [nzValue]="checkItem.value"
                    [(ngModel)]="checkItem.checked"
                    >{{ checkItem.value }}</label
                  >
                  } （如不涉及，此行可不选）
                </div>
              </nz-checkbox-wrapper>
            </nz-form-control>
          </nz-form-item>

          <!-- <nz-form-item class="row" style="margin-bottom: 16px">
            <nz-form-label class="label" [nzNoColon]="true" [nzSm]="6" [nzXs]="6" nzRequired>适用课程性质</nz-form-label>

            <nz-form-control class="val" nzErrorTip="请选择适用课程性质" style="width: 100%">
              <nz-checkbox-group [(ngModel)]="checkOptionsOne" formControlName="characteristic"></nz-checkbox-group>
              <nz-checkbox-group [(ngModel)]="checkOptionsOne" formControlName="characteristic"></nz-checkbox-group>
            </nz-form-control>
          </nz-form-item> -->
        </div>
      </div>
    </div>
    <!-- <div class="author-content">
      <div class="nav">作者信息</div>
      <nz-form-label class="title" [nzNoColon]="true" [nzSm]="24" [nzXs]="24" nzRequired>
        <span style="font-size: 16px">
          作者（含主编，不超过 6 人，教材中明确出现姓名）
        </span>
      </nz-form-label>
      <nz-table #basicTable [nzData]="authorList" [nzScroll]="{ x: (maxWidth || '1200') + 'px' }">
        <thead>
          <tr>
            <th nzWidth="80px" nzLeft nzAlign="right">序号</th>
            <th nzWidth="160px" nzLeft>姓名</th>
            <th nzWidth="160px">单位</th>
            <th nzWidth="160px">出生年月</th>
            <th nzWidth="160px">国籍</th>
            <th nzWidth="160px">职务</th>
            <th nzWidth="160px">职称</th>
            <th nzWidth="300px">手机号码</th>
            <th nzWidth="160px">电子邮箱</th>
            <th nzWidth="160px">分工</th>
            <th nzWidth="100px" nzRight>操作</th>
          </tr>
        </thead>
        <tbody>
          @for (data of authorList; track data.mobile;let index = $index) {
          <tr>
            <td nzLeft nzAlign="right">{{ index + 1 }}</td>
            <td nzLeft>
              <input nz-input placeholder="请输入作者姓名" [ngModelOptions]="{ standalone: true }" [(ngModel)]="data.name"
                nzStatus="" />
            </td>
            <td>
              <input nz-input placeholder="请输入作者单位" [ngModelOptions]="{ standalone: true }" [(ngModel)]="data.unit"
                nzStatus="" />
            </td>
            <td>
              <nz-date-picker nzMode="month" [ngModelOptions]="{ standalone: true }"
                [(ngModel)]="data.birth"></nz-date-picker>
            </td>
            <td>
              <input nz-input placeholder="请输入作者国籍" [ngModelOptions]="{ standalone: true }"
                [(ngModel)]="data.nationality" nzStatus="" />
            </td>
            <td>
              <input nz-input placeholder="请输入作者职务" [ngModelOptions]="{ standalone: true }" [(ngModel)]="data.job"
                nzStatus="" />
            </td>
            <td>
              <input nz-input placeholder="请输入作者职称" [ngModelOptions]="{ standalone: true }" [(ngModel)]="data.title"
                nzStatus="" />
            </td>
            <td>
              <nz-input-group nzCompact>
                <nz-select style="width: 90px;" [ngModelOptions]="{ standalone: true }" [ngModel]="'+86'">
                  <nz-option [nzLabel]="'+0000'" [nzValue]="'+0000'"></nz-option>
                  <nz-option [nzLabel]="'+86'" [nzValue]="'+86'"></nz-option>
                </nz-select>
                <input type="number" nz-input placeholder="请输入作者手机号码" [ngModelOptions]="{ standalone: true }"
                [(ngModel)]="data.mobile" nzStatus="" style="width: 160px;"/>
              </nz-input-group>
            </td>
            <td>
              <input nz-input placeholder="请输入作者邮箱" [ngModelOptions]="{ standalone: true }" [(ngModel)]="data.email"
                nzStatus="" />
            </td>
            <td>
              <nz-select style="width: 80%" nzShowSearch nzAllowClear nzPlaceHolder="请选择分工"
                [ngModelOptions]="{ standalone: true }" [(ngModel)]="data.work">
                @for(work of workOptions; track work){
                <nz-option nzCustomContent [nzValue]="work" [nzLabel]="work">{{
                  work
                  }}</nz-option>
                }
              </nz-select>
            </td>
            <td nzRight>
              <a (click)="onPush('authorList', index)"><span nz-icon style="font-size: 20px; margin-right: 10px"
                  nzType="plus-circle" nzTheme="outline"></span></a>
              <a (click)="onDel('authorList', index)"><span nz-icon style="font-size: 20px" nzType="delete"
                  nzTheme="outline"></span></a>
            </td>
          </tr>
          }
        </tbody>
      </nz-table>
    </div>
    <div class="author-content">
      <div class="nav">第一主编（作者）情况</div>
      <nz-form-item class="row" style="margin-bottom: 16px">
        <nz-form-label class="title" [nzNoColon]="true" [nzSm]="24" [nzXs]="24" nzRequired>
          <span style="font-size: 16px"> 相关教学经历 </span>
        </nz-form-label>
        <nz-form-control  class="val" nzErrorTip="请输入第一主编（作者）承担学校教学任务、开展教学研究情况、教材编写情况以及取得的教学成果" style="width: 100%">
          <nz-textarea-count [nzMaxCharacterCount]="500">
            <textarea rows="4" maxlength="500" formControlName="authorDetails" placeholder="请输入第一主编（作者）承担学校教学任务、开展教学研究情况、教材编写情况以及取得的教学成果"
            nz-input></textarea>
          </nz-textarea-count>
          
        </nz-form-control>
      </nz-form-item>
    </div>
    <div class="author-content">
      <nz-form-label class="title" [nzNoColon]="true" [nzSm]="24" [nzXs]="24" nzRequired>
        <span style="font-size: 16px">
          相关科学研究项目、成果或论文专著（限5项）
        </span>
      </nz-form-label>
      <nz-table #basicTable [nzData]="achievementOptions" [nzScroll]="{ x: (maxWidth || '1200') + 'px' }">
        <thead>
          <tr>
            <th nzWidth="80px" nzLeft nzAlign="right">序号</th>
            <th nzWidth="220px" nzLeft>名称</th>
            <th nzWidth="180px">来源/出版单位</th>
            <th nzWidth="120px">时间</th>
            <th nzWidth="80px" nzRight>操作</th>
          </tr>
        </thead>
        <tbody>
          @for (data of achievementOptions; track data.name;let index = $index)
          {
          <tr>
            <td nzLeft nzAlign="right">{{ index + 1 }}</td>
            <td nzLeft>
              <input nz-input placeholder="请输入项目/成果/论文名称" [ngModelOptions]="{ standalone: true }"
                [(ngModel)]="data.name" nzStatus="" />
            </td>
            <td>
              <input nz-input placeholder="请输入单位名称" [ngModelOptions]="{ standalone: true }" [(ngModel)]="data.unit"
                nzStatus="" />
            </td>
            <td>
              <nz-date-picker nzMode="month" [ngModelOptions]="{ standalone: true }"
                [(ngModel)]="data.date"></nz-date-picker>
            </td>
            <td nzRight>
              <a (click)="onPush('achievementOptions', index)"><span nz-icon style="font-size: 20px; margin-right: 10px"
                  nzType="plus-circle" nzTheme="outline"></span></a>
              <a (click)="onDel('achievementOptions', index)"><span nz-icon style="font-size: 20px" nzType="delete"
                  nzTheme="outline"></span></a>
            </td>
          </tr>
          }
        </tbody>
      </nz-table>
    </div> -->
    <div class="black">
      <div class="nav">作者信息</div>
      @if (eduTextbook?.get('type')=='全册') {
      <nz-collapse [nzBordered]="false">
        @for (panel of eduTextbook?.get('childrens'); track panel) {
        <nz-collapse-panel
          #p
          [nzHeader]="title"
          [nzActive]="false"
          nzExpandedIcon="caret-right"
          style="
            background: #f7f7f7;
            border-radius: 4px;
            margin-bottom: 24px;
            border: 0px;
          "
        >
          <ng-template #title>
            <span class="panel-title">{{ "分册" + ($index + 1) }}</span>
          </ng-template>
          <div class="">
            <app-author
              #children
              [eduTextbook]="eduTextbook?.id"
              [eduTextbookVolume]="panel"
            ></app-author>
          </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 {
      <app-author
        #children
        [eduTextbookVolume]="eduTextbook?.get('childrens')[0]"
      ></app-author>
      }
      <!-- <mat-accordion class="example-headers-align" multi>
        @if(eduTextbook?.get('type')=='全册'){ @for (item of
          eduTextbook?.get('childrens'); track $index) {
        <mat-expansion-panel>
          <mat-expansion-panel-header>
            <mat-panel-title>
              <b>分册{{ $index + 1 }}</b>
            </mat-panel-title>
          </mat-expansion-panel-header>
          <app-author
            #children
            [eduTextbook]="eduTextbook?.id"
            [eduTextbookVolume]="item"
          ></app-author>
        </mat-expansion-panel>
        } } @else {

        <app-author
          #children
          [eduTextbookVolume]="eduTextbook?.get('childrens')[0]"
        ></app-author>
        }
      </mat-accordion> -->
    </div>
  </form>
</div>
<div
  style="
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 30px 0 0;
  "
>
  <!-- <a (click)="downloadFile()">
    <span nz-icon nzType="download" nzTheme="outline"></span>
    下载本页所有附件模板
  </a> -->
  <div class="footer">
    <div>
      <button
        nz-button
        nzType="default"
        style="margin-right: 20px"
        (click)="submitForm('save')"
      >
        保存本页
      </button>
      <button
        nz-button
        nzType="default"
        style="margin-right: 20px"
        (click)="submitForm('pre')"
      >
        上一页
      </button>
      <button
        nz-button
        nzType="primary"
        style="background: #3e49b3; border: 1px #3e49b3"
        (click)="submitForm('next')"
      >
        下一页
      </button>
    </div>
  </div>
</div>

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