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 [nzLayout]="'inline'">
				<div nz-row nzGutter="24">
					<div nz-col nzSpan="24">
						<nz-form-item>
							<nz-form-label>机构名称</nz-form-label>
							<span class="detail-item-text">{{orgDetail.organization|null}}</span>
						</nz-form-item>
					</div>
					<div nz-col nzSpan="24">
						<nz-form-item>
							<nz-form-label>机构简称</nz-form-label>
							<span class="detail-item-text">{{orgDetail.shortName|null}}</span>
						</nz-form-item>
					</div>
					<div nz-col nzSpan="24">
						<nz-form-item>
							<nz-form-label>机构编码</nz-form-label>
							<span class="detail-item-text">{{orgDetail.code|null}}</span>
						</nz-form-item>
					</div>
					<div nz-col nzSpan="24">
						<nz-form-item>
							<nz-form-label>联系人</nz-form-label>
							<span class="detail-item-text">{{orgDetail.contact_person|null}}</span>
						</nz-form-item>
					</div>
					<div nz-col nzSpan="24">
						<nz-form-item>
							<nz-form-label>联系方式</nz-form-label>
							<span class="detail-item-text">{{orgDetail.contact_method|null}}</span>
						</nz-form-item>
					</div>
					<div nz-col nzSpan="24">
						<nz-form-item>
							<nz-form-label>机构地址</nz-form-label>
							<span class="detail-item-text">{{orgDetail.address|null}}</span>
						</nz-form-item>
					</div>
					<div nz-col nzSpan="24">
						<nz-form-item>
							<nz-form-label>机构类型</nz-form-label>
							<span *ngIf="orgDetail.organization_type==1" class="detail-item-text">机构</span>
							<span *ngIf="orgDetail.organization_type==2" class="detail-item-text">部门</span>
							<span *ngIf='!orgDetail.organization_type' class="detail-item-text">无</span>
						</nz-form-item>
					</div>
					<div nz-col nzSpan="24">
						<nz-form-item>
							<nz-form-label>上级</nz-form-label>
							<span class="detail-item-text">{{parentName|null}}</span>
						</nz-form-item>
					</div>
					<div nz-col nzSpan="24">
						<nz-form-item>
							<nz-form-label>LOGO</nz-form-label>
							<span *ngIf='!orgDetail.logo'>无</span>
							<img *ngIf='orgDetail.logo' class="org-detail-logo" [src]="orgDetail.logo" alt="">
						</nz-form-item>
					</div>
					<div nz-col nzSpan="24">
						<nz-form-item>
							<nz-form-label>机构负责人</nz-form-label>
							<span class="detail-item-text"></span>
						</nz-form-item>
					</div>
					<div class="user-table">
						<nz-table [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>
				</div>
			</form>
			<!-- 详情 end -->
			<!-- 新增、修改 begin -->
			<form class="form-modify" nz-form [formGroup]="validateForm" *ngIf="modifyType==1||modifyType==2">
				<nz-form-item>
					<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="organization" nzRequired>机构名称</nz-form-label>
					<nz-form-control [nzSm]="18" [nzXs]="24">
						<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>
				<nz-form-item>
					<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="shortName">机构简称</nz-form-label>
					<nz-form-control [nzSm]="18" [nzXs]="24">
						<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>
				<nz-form-item>
					<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="code" nzRequired>机构编码</nz-form-label>
					<nz-form-control [nzSm]="18" [nzXs]="24" [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>
				<nz-form-item>
					<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="contact_person" >联系人</nz-form-label>
					<nz-form-control [nzSm]="18" [nzXs]="24">
						<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>
				<nz-form-item>
					<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="contact_method" >联系方式</nz-form-label>
					<nz-form-control [nzSm]="18" [nzXs]="24">
						<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>
				<nz-form-item>
					<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="address" >机构地址</nz-form-label>
					<nz-form-control [nzSm]="18" [nzXs]="24">
						<textarea rows="3" id="address" nz-input formControlName="address" placeholder="请输入机构地址" ></textarea>
					</nz-form-control>
				</nz-form-item>
				<nz-form-item>
					<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="organization_type" >机构类型</nz-form-label>
					<nz-form-control [nzSm]="18" [nzXs]="24">
						<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>
				<nz-form-item>
					<nz-form-label [nzSm]="4" [nzXs]="24">所属机构</nz-form-label>
					<nz-form-control [nzSm]="18" [nzXs]="24">
						<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>
				<nz-form-item>
					<nz-form-label [nzSm]="4" [nzXs]="24">机构负责人</nz-form-label>
					<nz-form-control [nzSm]="18" [nzXs]="24">
						<a href="javascript:;"  (click)="openUsers()">选择</a>
					</nz-form-control>
				</nz-form-item>
				<div class="user-table table-box">
					<nz-table [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>

			</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]="false" [nzWidth]="auto" [nzVisible]="visible" nzTitle="选择机构" (nzOnClose)="close()">
		<div class="org-tree-box" [hidden]='statusParamsTree.status!=3'>
			<div class="search-box">
				<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]="false" [nzWidth]="auto" [nzVisible]="visibleUsers" nzTitle="机构负责人" (nzOnClose)="closeUser()">
		<div class="users-box" [hidden]='statusParamsUsers.status!=3'>
			<div class="user-table-box">
				<nz-table [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">
				<button (click)='userSave()'  nz-button nzType="primary" class="mr10">保存</button>
				<button (click)=closeUser() nz-button nzType="default">取消</button>
			</div>
		</div>
	</nz-drawer>
</div>