airport-chengdu-web/src/app/pages/system-management/department-management/department-management.component.html

<div class="system-main-container">
    <div class="org-manage">
        <div class="tree-box">
            <app-request-status [statusParams]='statusParamsTree'></app-request-status>
            <ul [hidden]='statusParamsTree.status!=3' id="treeDemo" class="ztree"></ul>
        </div>
        <div class="main-content card">
            <div class="operation-box">
                <button (click)="addModify(1)" nz-button nzType="primary"><i nz-icon type="plus" theme="outline"></i>新增</button>
                <button *ngIf="canEdit" (click)="addModify(2)" nz-button nzType="default"><i nz-icon type="edit" theme="outline"></i>修改</button>
                <button *ngIf="canDel" (click)="delete()" nz-button nzType="danger"><i nz-icon type="delete" theme="outline"></i>删除</button>
            </div>
            <!-- <nz-skeleton [nzActive]="true"  [nzParagraph]="{ rows: 16 }" *ngIf='modifyType==3&&!orgDetail'></nz-skeleton> -->
            <!-- 详情 begin -->
            <form class="org-detail" *ngIf="modifyType==3&&orgDetail" nz-form>
                <div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="12" [nzLg]="12" [nzXl]="8" [nzXXl]="8">
                    <nz-form-item>
                        <nz-form-label nzSpan="7">机构名称</nz-form-label>
                        <span nzSpan="12" class="detail-item-text">{{orgDetail.organization|null}}</span>
                    </nz-form-item>
                </div>
                <div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="12" [nzLg]="12" [nzXl]="8" [nzXXl]="8">
                    <nz-form-item>
                        <nz-form-label nzSpan="7">机构简称</nz-form-label>
                        <span nzSpan="12" class="detail-item-text">{{orgDetail.shortName|null}}</span>
                    </nz-form-item>
                </div>
                <div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="12" [nzLg]="12" [nzXl]="8" [nzXXl]="8">
                    <nz-form-item>
                        <nz-form-label nzSpan="7">机构编码</nz-form-label>
                        <span nzSpan="12" class="detail-item-text">{{orgDetail.code|null}}</span>
                    </nz-form-item>
                </div>
                <div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="12" [nzLg]="12" [nzXl]="8" [nzXXl]="8">
                    <nz-form-item>
                        <nz-form-label nzSpan="7">联系人</nz-form-label>
                        <span nzSpan="12" class="detail-item-text">{{orgDetail.contact_person|null}}</span>
                    </nz-form-item>
                </div>
                <div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="12" [nzLg]="12" [nzXl]="8" [nzXXl]="8">
                    <nz-form-item>
                        <nz-form-label nzSpan="7">联系方式</nz-form-label>
                        <span nzSpan="12" class="detail-item-text">{{orgDetail.contact_method|null}}</span>
                    </nz-form-item>
                </div>
                <div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="12" [nzLg]="12" [nzXl]="8" [nzXXl]="8">
                    <nz-form-item>
                        <nz-form-label nzSpan="7">机构地址</nz-form-label>
                        <span nzSpan="12" class="detail-item-text">{{orgDetail.address|null}}</span>
                    </nz-form-item>
                </div>
                <div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="12" [nzLg]="12" [nzXl]="8" [nzXXl]="8">
                    <nz-form-item>
                        <nz-form-label nzSpan="7">机构类型</nz-form-label>
                        <span nzSpan="12" *ngIf="orgDetail.organization_type==1" class="detail-item-text">机构</span>
                        <span nzSpan="12" *ngIf="orgDetail.organization_type==2" class="detail-item-text">部门</span>
                        <span nzSpan="12" *ngIf='!orgDetail.organization_type' class="detail-item-text">无</span>
                    </nz-form-item>
                </div>
                <div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="12" [nzLg]="12" [nzXl]="8" [nzXXl]="8">
                    <nz-form-item>
                        <nz-form-label nzSpan="7">上级</nz-form-label>
                        <span nzSpan="12" class="detail-item-text">{{parentName|null}}</span>
                    </nz-form-item>
                </div>
                <div nz-col nzSpan="24">
                    <nz-form-item>
                        <nz-form-label class="mr-2" [nzXs]="24" [nzSm]="24" [nzMd]="3" [nzLg]="3" [nzXl]="3" [nzXXl]="3">机构负责人</nz-form-label>
                        <div nz-col nzSpan="17" class="user-table">
                            <nz-table nzBordered [nzShowPagination]='false' #dataSetShow [nzData]="userList">
                                <thead>
                                    <tr>
                                        <th>姓名</th>
                                        <th>用户名</th>
                                        <th>电话</th>
                                        <th>邮箱</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr *ngFor="let item of dataSetShow.data">
                                        <td>{{item.real_name}}</td>
                                        <td>{{item.login_name}}</td>
                                        <td>{{item.mobile}}</td>
                                        <td>{{item.email}}</td>
                                    </tr>
                                </tbody>
                            </nz-table>
                        </div>
                    </nz-form-item>
                </div>
            </form>
            <!-- 详情 end -->
            <!-- 新增、修改 begin -->
            <form class="form-modify" nz-form [formGroup]="validateForm" *ngIf="modifyType==1||modifyType==2">
                <div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="24" [nzLg]="24" [nzXl]="12" [nzXXl]="12">
                    <nz-form-item>
                        <nz-form-label nzSpan="7" nzFor="organization" nzRequired>机构名称</nz-form-label>
                        <nz-form-control nzSpan="12">
                            <input nz-input id="organization" formControlName="organization" placeholder="请输入姓名">
                            <nz-form-explain *ngIf="validateForm.get('organization').dirty && validateForm.get('organization').errors">请输入机构名称</nz-form-explain>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="24" [nzLg]="24" [nzXl]="12" [nzXXl]="12">
                    <nz-form-item>
                        <nz-form-label nzSpan="7" nzFor="shortName">机构简称</nz-form-label>
                        <nz-form-control nzSpan="12">
                            <input nz-input id="shortName" formControlName="shortName" placeholder="请输入姓名">
                            <nz-form-explain *ngIf="validateForm.get('shortName').dirty && validateForm.get('shortName').errors">请输入机构简称</nz-form-explain>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="24" [nzLg]="24" [nzXl]="12" [nzXXl]="12">
                    <nz-form-item>
                        <nz-form-label nzSpan="7" nzFor="code" nzRequired>机构编码</nz-form-label>
                        <nz-form-control nzSpan="12" [nzValidateStatus]="checkNameStatus" nzHasFeedback>
                            <input nz-input id="code" formControlName="code" placeholder="请输入机构编码" (blur)='checkName()'
                                (keydown)="checkNameStatus='';nameOnly=true" name="validating">
                            <nz-form-explain *ngIf="validateForm.get('code').dirty && validateForm.get('code').errors">请输入机构编码</nz-form-explain>
                            <nz-form-explain *ngIf="!nameOnly" class="danger">该编码已存在</nz-form-explain>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="24" [nzLg]="24" [nzXl]="12" [nzXXl]="12">
                    <nz-form-item>
                        <nz-form-label nzSpan="7" nzFor="contact_person">联系人</nz-form-label>
                        <nz-form-control nzSpan="12">
                            <input nz-input id="contact_person" formControlName="contact_person" placeholder="请输入姓名">
                            <nz-form-explain *ngIf="validateForm.get('contact_person').dirty && validateForm.get('contact_person').errors">请输入联系人</nz-form-explain>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="24" [nzLg]="24" [nzXl]="12" [nzXXl]="12">
                    <nz-form-item>
                        <nz-form-label nzSpan="7" nzFor="contact_method">联系方式</nz-form-label>
                        <nz-form-control nzSpan="12">
                            <input nz-input id="contact_method" formControlName="contact_method" placeholder="请输入姓名">
                            <nz-form-explain *ngIf="validateForm.get('contact_method').dirty && validateForm.get('contact_method').errors">请输入联系方式</nz-form-explain>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="24" [nzLg]="24" [nzXl]="12" [nzXXl]="12">
                    <nz-form-item>
                        <nz-form-label nzSpan="7" nzFor="address">机构地址</nz-form-label>
                        <nz-form-control nzSpan="12">
                            <textarea rows="3" id="address" nz-input formControlName="address" placeholder="请输入机构地址"></textarea>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="24" [nzLg]="24" [nzXl]="12" [nzXXl]="12">
                    <nz-form-item>
                        <nz-form-label nzSpan="7" nzFor="organization_type">机构类型</nz-form-label>
                        <nz-form-control nzSpan="12">
                            <nz-radio-group formControlName="organization_type">
                                <label nz-radio [nzValue]=1>机构</label>
                                <label nz-radio [nzValue]=2>部门</label>
                            </nz-radio-group>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="24" [nzLg]="24" [nzXl]="12" [nzXXl]="12">
                    <nz-form-item>
                        <nz-form-label nzSpan="7">所属机构</nz-form-label>
                        <nz-form-control nzSpan="12">
                            <span *ngIf="orgSeleted">
                                <nz-tag nzMode="closeable" (nzOnClose)="tagClose($event)">{{orgSeleted.organization}}</nz-tag>
                            </span>
                            <a href="javascript:;" (click)="open()"><span *ngIf="orgSeleted">修改</span><span *ngIf="!orgSeleted">选择</span></a>
                            <nz-form-explain *ngIf="!orgSeleted&&saveCheck" class="red">请选择所属机构</nz-form-explain>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col nzSpan="24">
                    <nz-form-item>
                        <nz-form-label [nzXs]="7" [nzSm]="7" [nzMd]="7" [nzLg]="7" [nzXl]="3" [nzXXl]="3">机构负责人</nz-form-label>
                        <nz-form-control [nzXs]="3" [nzSm]="3" [nzMd]="2" [nzLg]="2" [nzXl]="2" [nzXXl]="2">
                            <a href="javascript:;" (click)="openUsers()">选择</a>
                        </nz-form-control>
                        <div nz-col [nzXs]="12" [nzSm]="12" [nzMd]="14" [nzLg]="14" [nzXl]="17" [nzXXl]="17" class="user-table table-box">
                                <nz-table nzBordered [nzShowPagination]='false'
                                    #dataSetSelect [nzData]="userSelecteds">
                                    <thead>
                                        <tr>
                                            <th>姓名</th>
                                            <th>用户名</th>
                                            <th>电话</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr *ngFor="let item of dataSetSelect.data;let i=index">
                                            <td>{{item.real_name}}</td>
                                            <td>{{item.login_name}}</td>
                                            <td>{{item.mobile}}</td>
                                            <td>
                                                <i nz-popconfirm nzTitle="确定删除该用户?" nzOkText="确定" nzCancelText="取消" (nzOnConfirm)="delectConfirm(item)"
                                                    (nzOnCancel)="delectCancel()" class="table-operation-btn danger" nz-icon type="delete"
                                                    theme="outline"></i>
                                            </td>
                                        </tr>
                                    </tbody>
                                </nz-table>
                            </div>
                    </nz-form-item>
                </div>

            </form>
            <div class="user-footer" *ngIf="modifyType!=3">
                <button (click)='submitForm()' [nzLoading]="isLoadingSave" nz-button nzType="primary" class="mr10"
                    [disabled]='!validateForm.valid||!nameOnly'>保存</button>
                <button (click)='cancel()' nz-button nzType="default">取消</button>
            </div>
            <!-- 新增、修改 end -->
        </div>
    </div>
</div>
<!-- 选择所属机构 -->
<div class="org-selete-box">
    <nz-drawer [nzBodyStyle]="{ height: 'calc(100% - 55px)', overflow: 'auto', 'padding-bottom':'53px' }"
        [nzMaskClosable]="true" [nzWidth]="380" [nzVisible]="visible" nzTitle="选择机构" (nzOnClose)="close()">
        <div class="org-tree-box" [hidden]='statusParamsTree.status!=3'>
            <div class="search-box">
                <span>机构搜索：</span>
                <input nz-input style="width: 180px !important;margin-left: 8px;margin-right: 6px;" id="key" />
                <button nz-button nzType="primary" nzShape="circle" (click)="searchNode()"><i nz-icon type="search"></i></button>
            </div>
            <ul id="treeDemoChild" class="ztree ztree-child"></ul>
            <div class="drawer-footer">
                <button (click)='treeSave()' nz-button nzType="primary" class="mr10">保存</button>
                <button (click)=close() nz-button nzType="default">取消</button>
            </div>
        </div>
    </nz-drawer>
</div>

<!-- 机构负责人选择 -->
<div class="org-selete-box">
    <nz-drawer [nzBodyStyle]="{ height: 'calc(100% - 55px)', overflow: 'auto', 'padding-bottom':'53px' }"
        [nzMaskClosable]="true" [nzWidth]="auto" [nzVisible]="visibleUsers" nzTitle="机构负责人" (nzOnClose)="closeUser()">
        <div class="users-box" [hidden]='statusParamsUsers.status!=3'>
            <div class="user-table-box">
                <nz-table nzBordered [nzShowPagination]='false' #dataSet [nzData]="userData">
                    <thead>
                        <tr>
                            <th></th>
                            <th>姓名</th>
                            <th>用户名</th>
                            <th>电话</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let item of dataSet.data">
                            <td nzShowCheckbox [(nzChecked)]="item.checked" [nzDisabled]="item.disabled"></td>
                            <td>{{item.real_name}}</td>
                            <td>{{item.login_name}}</td>
                            <td>{{item.mobile}}</td>
                        </tr>
                    </tbody>
                </nz-table>
                <div class="page-box" *ngIf="statusParamsUsers.status==3">
                    <nz-pagination [nzPageIndex]="search.page_index" (nzPageIndexChange)='pageChange($event)'
                        [nzPageSize]='search.page_size' [nzTotal]="collectionSize"></nz-pagination>
                </div>
            </div>
            <div class="drawer-footer" style="text-align:center">
                <button (click)='userSave()' nz-button nzType="primary" class="mr10">保存</button>
                <button (click)=closeUser() nz-button nzType="default">取消</button>
            </div>
        </div>
    </nz-drawer>
</div>