cd-project-management-web/src/app/routes/basedata/project-approval/project-approval.component.html

<page-header [action]="phActionTpl">
  <ng-template #phActionTpl>
  </ng-template>
</page-header>
<nz-card>
  <div nz-row [nzGutter]="24">
    <!--左边card -->
    <div nz-col nzMd="24" nzLg="12">
      <nz-card>
        <!--按钮操作 -->
        <div nz-row [nzGutter]="24" style="margin-bottom: 10px;">
          <div nz-col nzMd="24" nzLg="24">
            <button (click)="add()" nz-button acl [acl-ability]="'base-archives-project-approval:add'"
              nzType="primary">添加一级</button>
          </div>
        </div>
        <!-- 搜索框 -->
        <div nz-row [nzGutter]="24">
          <div nz-col nzMd="24" nzLg="24">
            <nz-input-group [nzSuffix]="suffixIcon" style="width:100%">
              <input type="text" nz-input
                placeholder="请输入"
                [(ngModel)]="searchValue" />
            </nz-input-group>
            <ng-template #suffixIcon>
              <i nz-icon type="search"></i>
            </ng-template>
          </div>
        </div>
        <!-- tree -->
        <div nz-row [nzGutter]="24">
          <div nz-col nzMd="24" nzLg="24">
            <nz-tree [nzData]="nodes" [nzSearchValue]="searchValue" (nzClick)="treeClick($event)"
              (nzDblClick)="openFolder($event)">
              <ng-template #contextTemplate>
                <ul nz-menu nzInDropDown>
                  <li nz-menu-item (click)="addChild()" acl [acl-ability]="'base-archives-project-approval:add'">
                    {{ 'button.add' | translate }}</li>
                  <li nz-menu-item (click)="delete()" acl [acl-ability]="'base-archives-project-approval:delete'">
                    {{ 'table.delete' | translate }}</li>
                  <li nz-menu-item (click)="cancel()">{{ 'button.cancel' | translate }}</li>
                </ul>
              </ng-template>
              <ng-template #nzTreeTemplate let-node>
                <span class="custom-node">
                  <span *ngIf="!node.isLeaf" (contextmenu)="contextMenu(node.key,$event, contextTemplate)">
                    <span class="folder-name">{{ node.title }}</span>
                  </span>
                  <span *ngIf="node.isLeaf" (contextmenu)="contextMenu(node.key,$event, contextTemplate)">
                    <span class="file-name">{{ node.title }}</span>
                  </span>
                </span>
              </ng-template>
            </nz-tree>
          </div>
        </div>

      </nz-card>
    </div>


    <!--右边card-->
  <div nz-col nzMd="24" nzLg="12">
    
    <nz-card>
      <!-- form -->
      <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
        <nz-form-item>
          <nz-form-label nzRequired [nzSm]="8" [nzXs]="24">项目编码</nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24" >
            <input formControlName="code" id="code" [(ngModel)]="baseArchivesProjectApproval.code" name="code" nz-input
              placeholder="自动生成" />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <!-- 项目名称 -->
          <nz-form-label nzRequired [nzSm]="8" [nzXs]="24">{{ 'cost.item.name' | translate }}</nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24">
            <input formControlName="name" id="name" [(ngModel)]="baseArchivesProjectApproval.name" name="name" nz-input
              placeholder="{{ 'placeholder' | translate }}项目名称" maxlength=20/>
              <nz-form-explain *ngIf="validateForm.get('name')?.dirty && validateForm.get('name')?.errors">
                请输入项目名称
              </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label nzRequired [nzSm]="8" [nzXs]="24">是否启用
          </nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24">
            <nz-switch [ngModelOptions]="{standalone: true}" [(ngModel)]="status" name="status" nzCheckedChildren="是" nzUnCheckedChildren="否"></nz-switch>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item >
          <nz-form-label [nzSm]="8" [nzXs]="24" [nzNoColon]=true>
          </nz-form-label>
          <nz-form-control [nzSm]="14" [nzXs]="24">
            <button nzType="primary" (click)="reset()" nz-button ><span>{{ 'button.reset' | translate }}</span></button>
            <button nz-button nzType="primary">保存</button>
          </nz-form-control>
        </nz-form-item>
      </form>
    </nz-card>
  </div>
  </div>
</nz-card>