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">角色名称最多输入20个字符!</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">
                  角色说明最多输入300个字符!
                </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>
        <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 viewTempGroupList"><label nz-checkbox [(ngModel)]="item.checked" [ngModelOptions]="{standalone: true}">{{item.name}}</label></p>
                </div>
            </nz-form-control>
        </nz-form-item>
    </form>
</nz-modal>