role.component.html

<nz-modal [(nzVisible)]="isVisible" [nzTitle]="title" [nzWidth]="880" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
    <form nz-form [formGroup]="validateForm">
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="roleName">角色名称</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
                <input nz-input id="roleName" formControlName="name">
                <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 [nzSm]="6" [nzXs]="24" nzFor="status" nzRequired nzFor="status">是否有效</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
                <nz-select id="status" nzPlaceHolder="选择状态" formControlName="status">
                    <nz-option nzValue="0" nzLabel="有效"></nz-option>
                    <nz-option nzValue="1" nzLabel="无效"></nz-option>
                </nz-select>
                <nz-form-explain *ngIf="validateForm.get('status').dirty && validateForm.get('status').errors">
                    请选择是否有效!
                </nz-form-explain>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="comment">角色说明</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
                <textarea id="comment " row="4" nz-input formControlName="comment"></textarea>
                <nz-form-explain *ngIf="validateForm.get('comment').dirty && validateForm.get('comment').errors">
                    请输入角色说明!
                </nz-form-explain>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24">模块权限</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" style="max-height: 200px">
                <div class="tree-div">
                    <nz-tree #nzTree
                             [(ngModel)]="nodes" [ngModelOptions]="{standalone: true}"
                             [nzCheckStrictly]="true">
                        <ng-template #nzTreeTemplate let-node>
                        <span class="custom-node" draggable="true" aria-grabbed="true" [class.active]="node.isSelected">
                            <label [ngModelOptions]="{standalone: true}" [(ngModel)]="node.origin.isChecked" (click)="selectCheckTree($event,node)" nz-checkbox> {{node.origin.title}}</label>
                        </span>
                        </ng-template>
                    </nz-tree>
                </div>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24">资源权限</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
                <div class="tree-div" style="padding-left: 10px;">
                    <p *ngFor="let item of viewGroupList"><label nz-checkbox [(ngModel)]="item.checked" [ngModelOptions]="{standalone: true}">{{item.name}}</label></p>
                </div>
            </nz-form-control>
        </nz-form-item>
    </form>
</nz-modal>