Jinan_project/src/app/home/task/station-task-apply/apply/apply.component.html

<div class="applymodel" cdkScrollable>
    <form nz-form [formGroup]="validateForm">
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="账号">任务名称</nz-form-label>
            <nz-form-control>
                <nz-radio-group formControlName="taskname" [(ngModel)]="taskType">
                    <label nz-radio [nzValue]="item" *ngFor="let item of title">{{item}}</label>
                </nz-radio-group>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="单位名称">单位名称</nz-form-label>
            <!-- <nz-form-control>
                <nz-select formControlName="unitname" (nzScrollToBottom)="loadMore()" nzPlaceHolder="请选择单位" nzAllowClear
                    [nzDropdownRender]="renderTemplate" nzShowSearch nzServerSearch (nzOnSearch)="search($event)">
                    <nz-option *ngFor="let o of optionList" [nzValue]="o.id" [nzLabel]="o.companyName"></nz-option>
                </nz-select>
                <ng-template #renderTemplate>
                    <nz-spin *ngIf="isLoading"></nz-spin>
                </ng-template>
            </nz-form-control> -->
            <div class="selectUnit" (click)="isPopover(unitPopover)">
                <ng-container *ngIf="selectedUnitData.name; else elseTemplate">
                    {{selectedUnitData.name}}
                </ng-container>
                <ng-template #elseTemplate>
                    <span class="gray">请点击选择单位</span>
                </ng-template>

                <div class="selectUnitPopover" *ngIf="unitPopover.isPopover" (click)="$event.stopPropagation()">
                    <div class="popoverTitle">
                        <span (click)="popoverMenuSelect(unitPopover,1)"
                            [ngClass]="{'selectedspan': unitPopover.selectedMenu == 1}">单位名称</span>
                        <span style="margin: 0 10px;">|</span>
                        <span (click)="popoverMenuSelect(unitPopover,2)"
                            [ngClass]="{'selectedspan': unitPopover.selectedMenu == 2}">组织机构</span>
                    </div>
                    <div class="popoverContent" *ngIf="unitPopover.selectedMenu == 1">
                        <div>
                            <form nz-form (ngSubmit)="submitForm(unitPopover)">
                                <nz-form-item>
                                    <nz-form-control>
                                        <nz-input-group nzPrefixIcon="search">
                                            <input type="text" [(ngModel)]="unitPopover.search1" nz-input
                                                placeholder="请输入单位名称" [ngModelOptions]="{standalone: true}" />
                                        </nz-input-group>
                                    </nz-form-control>
                                    <button style="display: none;" type="submit"></button>
                                </nz-form-item>
                            </form>
                        </div>
                        <div class="popoverContentitem">
                            <nz-checkbox-group [(ngModel)]="unitPopover.unitList" (ngModelChange)="log(unitPopover)"
                                [ngModelOptions]="{standalone: true}">
                            </nz-checkbox-group>
                            <p class="blue" *ngIf="unitPopover.unitList.length < totalCount" (click)="moreData()">
                                <ng-container *ngIf="moreDataLoading; else moreDatatemplate">
                                    <span nz-icon nzType="loading" nzTheme="outline"></span>
                                </ng-container>
                                <ng-template #moreDatatemplate>
                                    更多
                                </ng-template>
                            </p>
                        </div>
                    </div>
                    <div class="popoverContent" *ngIf="unitPopover.selectedMenu == 2">
                        <div>
                            <form nz-form (ngSubmit)="getCompaniesByName(unitPopover)">
                                <nz-form-item>
                                    <nz-form-control>
                                        <nz-input-group nzPrefixIcon="search">
                                            <input type="text" [(ngModel)]="unitPopover.search2" nz-input
                                                placeholder="请输入单位名称" [ngModelOptions]="{standalone: true}" />
                                        </nz-input-group>
                                    </nz-form-control>
                                    <button style="display: none;" type="submit"></button>
                                </nz-form-item>
                            </form>
                        </div>
                        <div class="popoverContentitem">
                            <nz-tree *ngIf="unitPopover.isnodes" [nzHideUnMatched]='true' [nzData]="unitPopover.nodes"
                                [nzTreeTemplate]="nzTreeTemplateunitPopover1" nzBlockNode [nzAsyncData]="true"
                                (nzExpandChange)="onExpandChange($event)">
                            </nz-tree>
                            <ng-template #nzTreeTemplateunitPopover1 let-node let-origin="origin">
                                <div class="nodebox">
                                    <span class="name">
                                        <label *ngIf="node.origin.companyName" nz-checkbox
                                            [(ngModel)]="node.origin.isChecked"
                                            (ngModelChange)="orcheckbox(unitPopover,$event,node)"
                                            [ngModelOptions]="{standalone: true}"></label>
                                        {{ node.title }}
                                    </span>
                                </div>
                            </ng-template>


                            <nz-tree *ngIf="!unitPopover.isnodes" [nzHideUnMatched]='true' [nzData]="unitPopover.nodes2"
                                [nzTreeTemplate]="nzTreeTemplateunitPopover2" nzBlockNode>
                            </nz-tree>
                            <ng-template #nzTreeTemplateunitPopover2 let-node let-origin="origin">
                                <div class="nodebox">
                                    <span class="name">
                                        <label *ngIf="node.origin.companyName" nz-checkbox
                                            [(ngModel)]="node.origin.isChecked"
                                            (ngModelChange)="orcheckbox(unitPopover,$event,node)"
                                            [ngModelOptions]="{standalone: true}"></label>
                                        {{ node.title }}
                                    </span>
                                </div>
                            </ng-template>
                        </div>
                    </div>
                    <div class="popoverBtn">
                        <button nz-button nzType="primary" [nzLoading]="unitPopover.isLoading"
                            (click)="selectedUnit(unitPopover,$event)">确定</button>
                        <button nz-button nzType="default" [nzLoading]="unitPopover.isLoading"
                            (click)="isPopover(unitPopover,$event)">取消</button>
                    </div>
                </div>
            </div>

        </nz-form-item>
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="协助机构">协助机构</nz-form-label>
            <nz-form-control>
                <nz-tree-select [nzShowSearch]='true' [nzDropdownClassName]="'maxHeightTreeSelect'"
                    formControlName="organization" [nzNodes]="newTree" nzPlaceHolder="请选择协助机构"
                    [nzExpandedIcon]="multiExpandedIconTpl" nzCheckable [nzCheckStrictly]="true">
                </nz-tree-select>
                <ng-template #multiExpandedIconTpl let-node let-origin="origin">
                    <ng-container *ngIf="node.children.length == 0; else elseTemplate">

                    </ng-container>
                    <ng-template #elseTemplate>
                        <i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'"
                            class="ant-tree-switcher-line-icon"></i>
                    </ng-template>
                </ng-template>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item class="itembox" *ngIf="taskType == '双随机'">
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="检查人员">检查人员</nz-form-label>
            <nz-form-control>
                <img class="img1" src="../../../../../assets/images/icon/main.png" alt="">
                <nz-select nzPlaceHolder="请选择主查" class="select" formControlName="main" [(ngModel)]="userId">
                    <nz-option *ngFor="let item of supervisorListAll" [nzValue]="item.id" [nzLabel]="item.name">
                    </nz-option>
                </nz-select>
                <img class="img2" src="../../../../../assets/images/icon/assist.png" alt="">
                <nz-select nzPlaceHolder="请选择协查" class="select" formControlName="assist">
                    <nz-option *ngFor="let item of supervisorListAll" [nzValue]="item.id" [nzLabel]="item.name">
                    </nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>
    </form>
</div>