cdia/airport-chengdu-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

系统管理UI界面修改及逻辑代码优化

Browse Source
This commit is contained in:
zhouyuejun
2019-02-25 16:55:46 +08:00
parent b0fb942139
commit f231197046
18 changed files with 1423 additions and 1357 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/pipe/no-value.component.ts
-1
View File
@@ -3,7 +3,6 @@ import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'null'}) @Pipe({name: 'null'})
export class NoValue implements PipeTransform { export class NoValue implements PipeTransform {
transform(value: any, exponent: any): any { transform(value: any, exponent: any): any {
console.log(value)
if(value){ if(value){
return value return value
}else{ }else{
src/app/components/request-status/request-status.component.scss
+1 -3
View File
@@ -4,14 +4,12 @@
left: 50%; left: 50%;
transform: translate(-50%,-50%); transform: translate(-50%,-50%);
text-align: center; text-align: center;
z-index: 999;
.loading-icon{ .loading-icon{
color: #1890ff; color: #1890ff;
} }
.warning-icon{ .warning-icon{
color: orange color: orange
}
.data-null{
} }
i{ i{
font-size: 40px; font-size: 40px;
src/app/pages/main.scss
+5 -4
View File
@@ -48,8 +48,9 @@
.tree-box{ .tree-box{
position: relative; position: relative;
min-width: 300px; min-width: 250px;
margin-right: 20px; max-width: 300px;
// margin-right: 20px;
float: left; float: left;
padding: 20px; padding: 20px;
height: 100%; height: 100%;
@@ -58,8 +59,8 @@
} }
.page-box{ .page-box{
text-align: center; text-align: right;
margin-top: 30px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.table-operation-box{ .table-operation-box{
src/app/pages/system-management/department-management/department-management.component.html
+109 -85
View File
@@ -10,68 +10,64 @@
<button *ngIf="canEdit" (click)="addModify(2)" nz-button nzType="default"><i nz-icon type="edit" 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> <button *ngIf="canDel" (click)="delete()" nz-button nzType="danger"><i nz-icon type="delete" theme="outline"></i>删除</button>
</div> </div>
<nz-skeleton [nzActive]="true" [nzParagraph]="{ rows: 16 }" *ngIf='modifyType==3&&!orgDetail'></nz-skeleton> <!-- <nz-skeleton [nzActive]="true" [nzParagraph]="{ rows: 16 }" *ngIf='modifyType==3&&!orgDetail'></nz-skeleton> -->
<!-- 详情 begin --> <!-- 详情 begin -->
<form class="org-detail" *ngIf="modifyType==3&&orgDetail" nz-form [nzLayout]="'inline'"> <form class="org-detail" *ngIf="modifyType==3&&orgDetail" nz-form>
<div nz-row nzGutter="24"> <div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="12" [nzLg]="12" [nzXl]="8" [nzXXl]="8">
<div nz-col nzSpan="24">
<nz-form-item> <nz-form-item>
<nz-form-label>机构名称</nz-form-label> <nz-form-label nzSpan="7">机构名称</nz-form-label>
<span class="detail-item-text">{{orgDetail.organization|null}}</span> <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> </nz-form-item>
</div> </div>
<div nz-col nzSpan="24"> <div nz-col nzSpan="24">
<nz-form-item> <nz-form-item>
<nz-form-label>机构简称</nz-form-label> <nz-form-label class="mr-2" [nzXs]="24" [nzSm]="24" [nzMd]="3" [nzLg]="3" [nzXl]="3" [nzXXl]="3">机构负责人</nz-form-label>
<span class="detail-item-text">{{orgDetail.shortName|null}}</span> <div nz-col nzSpan="17" class="user-table">
</nz-form-item> <nz-table nzBordered [nzShowPagination]='false' #dataSetShow [nzData]="userList">
</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>机构负责人</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> <thead>
<tr> <tr>
<th>姓名</th> <th>姓名</th>
@@ -90,65 +86,82 @@
</tbody> </tbody>
</nz-table> </nz-table>
</div> </div>
</nz-form-item>
</div> </div>
</form> </form>
<!-- 详情 end --> <!-- 详情 end -->
<!-- 新增、修改 begin --> <!-- 新增、修改 begin -->
<form class="form-modify" nz-form [formGroup]="validateForm" *ngIf="modifyType==1||modifyType==2"> <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-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="organization" nzRequired>机构名称</nz-form-label> <nz-form-label nzSpan="7" nzFor="organization" nzRequired>机构名称</nz-form-label>
<nz-form-control [nzSm]="18" [nzXs]="24"> <nz-form-control nzSpan="12">
<input nz-input id="organization" formControlName="organization" placeholder="请输入姓名"> <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-explain *ngIf="validateForm.get('organization').dirty && validateForm.get('organization').errors">请输入机构名称</nz-form-explain>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div>
<div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="24" [nzLg]="24" [nzXl]="12" [nzXXl]="12">
<nz-form-item> <nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="shortName">机构简称</nz-form-label> <nz-form-label nzSpan="7" nzFor="shortName">机构简称</nz-form-label>
<nz-form-control [nzSm]="18" [nzXs]="24"> <nz-form-control nzSpan="12">
<input nz-input id="shortName" formControlName="shortName" placeholder="请输入姓名"> <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-explain *ngIf="validateForm.get('shortName').dirty && validateForm.get('shortName').errors">请输入机构简称</nz-form-explain>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div>
<div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="24" [nzLg]="24" [nzXl]="12" [nzXXl]="12">
<nz-form-item> <nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="code" nzRequired>机构编码</nz-form-label> <nz-form-label nzSpan="7" nzFor="code" nzRequired>机构编码</nz-form-label>
<nz-form-control [nzSm]="18" [nzXs]="24" [nzValidateStatus]="checkNameStatus" nzHasFeedback> <nz-form-control nzSpan="12" [nzValidateStatus]="checkNameStatus" nzHasFeedback>
<input nz-input id="code" formControlName="code" placeholder="请输入机构编码" (blur)='checkName()' (keydown)="checkNameStatus='';nameOnly=true" name="validating"> <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="validateForm.get('code').dirty && validateForm.get('code').errors">请输入机构编码</nz-form-explain>
<nz-form-explain *ngIf="!nameOnly" class="danger">该编码已存在</nz-form-explain> <nz-form-explain *ngIf="!nameOnly" class="danger">该编码已存在</nz-form-explain>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div>
<div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="24" [nzLg]="24" [nzXl]="12" [nzXXl]="12">
<nz-form-item> <nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="contact_person" >联系人</nz-form-label> <nz-form-label nzSpan="7" nzFor="contact_person">联系人</nz-form-label>
<nz-form-control [nzSm]="18" [nzXs]="24"> <nz-form-control nzSpan="12">
<input nz-input id="contact_person" formControlName="contact_person" placeholder="请输入姓名"> <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-explain *ngIf="validateForm.get('contact_person').dirty && validateForm.get('contact_person').errors">请输入联系人</nz-form-explain>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div>
<div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="24" [nzLg]="24" [nzXl]="12" [nzXXl]="12">
<nz-form-item> <nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="contact_method" >联系方式</nz-form-label> <nz-form-label nzSpan="7" nzFor="contact_method">联系方式</nz-form-label>
<nz-form-control [nzSm]="18" [nzXs]="24"> <nz-form-control nzSpan="12">
<input nz-input id="contact_method" formControlName="contact_method" placeholder="请输入姓名"> <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-explain *ngIf="validateForm.get('contact_method').dirty && validateForm.get('contact_method').errors">请输入联系方式</nz-form-explain>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div>
<div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="24" [nzLg]="24" [nzXl]="12" [nzXXl]="12">
<nz-form-item> <nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="address" >机构地址</nz-form-label> <nz-form-label nzSpan="7" nzFor="address">机构地址</nz-form-label>
<nz-form-control [nzSm]="18" [nzXs]="24"> <nz-form-control nzSpan="12">
<textarea rows="3" id="address" nz-input formControlName="address" placeholder="请输入机构地址"></textarea> <textarea rows="3" id="address" nz-input formControlName="address" placeholder="请输入机构地址"></textarea>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div>
<div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="24" [nzLg]="24" [nzXl]="12" [nzXXl]="12">
<nz-form-item> <nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="organization_type" >机构类型</nz-form-label> <nz-form-label nzSpan="7" nzFor="organization_type">机构类型</nz-form-label>
<nz-form-control [nzSm]="18" [nzXs]="24"> <nz-form-control nzSpan="12">
<nz-radio-group formControlName="organization_type"> <nz-radio-group formControlName="organization_type">
<label nz-radio [nzValue]=1>机构</label> <label nz-radio [nzValue]=1>机构</label>
<label nz-radio [nzValue]=2>部门</label> <label nz-radio [nzValue]=2>部门</label>
</nz-radio-group> </nz-radio-group>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div>
<div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="24" [nzLg]="24" [nzXl]="12" [nzXXl]="12">
<nz-form-item> <nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24">所属机构</nz-form-label> <nz-form-label nzSpan="7">所属机构</nz-form-label>
<nz-form-control [nzSm]="18" [nzXs]="24"> <nz-form-control nzSpan="12">
<span *ngIf="orgSeleted"> <span *ngIf="orgSeleted">
<nz-tag nzMode="closeable" (nzOnClose)="tagClose($event)">{{orgSeleted.organization}}</nz-tag> <nz-tag nzMode="closeable" (nzOnClose)="tagClose($event)">{{orgSeleted.organization}}</nz-tag>
</span> </span>
@@ -156,14 +169,16 @@
<nz-form-explain *ngIf="!orgSeleted&&saveCheck" class="red">请选择所属机构</nz-form-explain> <nz-form-explain *ngIf="!orgSeleted&&saveCheck" class="red">请选择所属机构</nz-form-explain>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div>
<div nz-col nzSpan="24">
<nz-form-item> <nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24">机构负责人</nz-form-label> <nz-form-label [nzXs]="7" [nzSm]="7" [nzMd]="7" [nzLg]="7" [nzXl]="3" [nzXXl]="3">机构负责人</nz-form-label>
<nz-form-control [nzSm]="18" [nzXs]="24"> <nz-form-control [nzXs]="3" [nzSm]="3" [nzMd]="2" [nzLg]="2" [nzXl]="2" [nzXXl]="2">
<a href="javascript:;" (click)="openUsers()">选择</a> <a href="javascript:;" (click)="openUsers()">选择</a>
</nz-form-control> </nz-form-control>
</nz-form-item> <div nz-col [nzXs]="12" [nzSm]="12" [nzMd]="14" [nzLg]="14" [nzXl]="17" [nzXXl]="17" class="user-table table-box">
<div class="user-table table-box"> <nz-table nzBordered [nzShowPagination]='false'
<nz-table [nzShowPagination]='false' #dataSetSelect [nzData]="userSelecteds"> #dataSetSelect [nzData]="userSelecteds">
<thead> <thead>
<tr> <tr>
<th>姓名</th> <th>姓名</th>
@@ -178,16 +193,21 @@
<td>{{item.login_name}}</td> <td>{{item.login_name}}</td>
<td>{{item.mobile}}</td> <td>{{item.mobile}}</td>
<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> <i nz-popconfirm nzTitle="确定删除该用户?" nzOkText="确定" nzCancelText="取消" (nzOnConfirm)="delectConfirm(item)"
(nzOnCancel)="delectCancel()" class="table-operation-btn danger" nz-icon type="delete"
theme="outline"></i>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</nz-table> </nz-table>
</div> </div>
</nz-form-item>
</div>
</form> </form>
<div class="user-footer" *ngIf="modifyType!=3"> <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)='submitForm()' [nzLoading]="isLoadingSave" nz-button nzType="primary" class="mr10"
[disabled]='!validateForm.valid||!nameOnly'>保存</button>
<button (click)='cancel()' nz-button nzType="default">取消</button> <button (click)='cancel()' nz-button nzType="default">取消</button>
</div> </div>
<!-- 新增、修改 end --> <!-- 新增、修改 end -->
@@ -196,9 +216,11 @@
</div> </div>
<!-- 选择所属机构 --> <!-- 选择所属机构 -->
<div class="org-selete-box"> <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()"> <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="org-tree-box" [hidden]='statusParamsTree.status!=3'>
<div class="search-box"> <div class="search-box">
<span>机构搜索：</span>
<input nz-input style="width: 180px !important;margin-left: 8px;margin-right: 6px;" id="key" /> <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> <button nz-button nzType="primary" nzShape="circle" (click)="searchNode()"><i nz-icon type="search"></i></button>
</div> </div>
@@ -213,10 +235,11 @@
<!-- 机构负责人选择 --> <!-- 机构负责人选择 -->
<div class="org-selete-box"> <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()"> <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="users-box" [hidden]='statusParamsUsers.status!=3'>
<div class="user-table-box"> <div class="user-table-box">
<nz-table [nzShowPagination]='false' #dataSet [nzData]="userData"> <nz-table nzBordered [nzShowPagination]='false' #dataSet [nzData]="userData">
<thead> <thead>
<tr> <tr>
<th></th> <th></th>
@@ -235,10 +258,11 @@
</tbody> </tbody>
</nz-table> </nz-table>
<div class="page-box" *ngIf="statusParamsUsers.status==3"> <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> <nz-pagination [nzPageIndex]="search.page_index" (nzPageIndexChange)='pageChange($event)'
[nzPageSize]='search.page_size' [nzTotal]="collectionSize"></nz-pagination>
</div> </div>
</div> </div>
<div class="drawer-footer"> <div class="drawer-footer" style="text-align:center">
<button (click)='userSave()' nz-button nzType="primary" class="mr10">保存</button> <button (click)='userSave()' nz-button nzType="primary" class="mr10">保存</button>
<button (click)=closeUser() nz-button nzType="default">取消</button> <button (click)=closeUser() nz-button nzType="default">取消</button>
</div> </div>
src/app/pages/system-management/department-management/department-management.component.scss
+12 -9
View File
@@ -8,7 +8,8 @@
} }
.operation-box{ .operation-box{
border-bottom: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;
padding-bottom: 20px; padding-bottom: 24px;
margin-bottom: 24px;
button{ button{
margin-right: 10px; margin-right: 10px;
} }
@@ -21,13 +22,15 @@
margin-top: 20px; margin-top: 20px;
} }
.user-table{ .user-table{
width: 80%; // width: 80%;
margin: 0 auto; // margin: 0 auto;
margin-bottom: 30px; margin-bottom: 30px;
} }
} }
.tree-box{ .tree-box{
overflow-y:scroll; overflow-y:auto;
overflow-x: auto;
margin-right: 20px;
} }
} }
.user-footer{ .user-footer{
@@ -42,14 +45,14 @@
} }
} }
.ztree-child{ .ztree-child{
padding-bottom: 40px; border: 1px solid #ddd;
padding-right: 16px; margin-top: 20px;
margin-bottom: 20px;
padding: 16px;
} }
.drawer-footer{ .drawer-footer{
display: inline-block;
position: relative; position: relative;
left: 50%; text-align: right;
transform: translate(-50%)
} }
.users-box{ .users-box{
padding-bottom: 30px; padding-bottom: 30px;
src/app/pages/system-management/department-management/department-management.component.ts
+2 -2
View File
@@ -215,11 +215,11 @@ export class DepartmentManagementComponent implements OnInit {
//打开机构树抽屉 //打开机构树抽屉
open(): void { open(): void {
this.treeSelectedChild=''; this.treeSelectedChild='';
// this.visible = true; this.visible = true;
} }
//关闭机构选择页面 //关闭机构选择页面
close(): void { close(): void {
// this.visible = false; this.visible = false;
} }
//删除机构标签 //删除机构标签
tagClose(event){ tagClose(event){
src/app/pages/system-management/personal-settings/personal-settings.component.html
+2 -2
View File
@@ -47,12 +47,12 @@
<nz-tab nzTitle="消息警示提醒"> <nz-tab nzTitle="消息警示提醒">
<app-msg-alert-warning></app-msg-alert-warning> <app-msg-alert-warning></app-msg-alert-warning>
</nz-tab> </nz-tab>
<nz-tab nzTitle="消息声音提醒"> <!-- <nz-tab nzTitle="消息声音提醒">
<app-msg-alert-warning></app-msg-alert-warning> <app-msg-alert-warning></app-msg-alert-warning>
</nz-tab> </nz-tab>
<nz-tab nzTitle="航班代理"> <nz-tab nzTitle="航班代理">
<app-flight-agency></app-flight-agency> <app-flight-agency></app-flight-agency>
</nz-tab> </nz-tab> -->
<nz-tab nzTitle="颜色配置"> <nz-tab nzTitle="颜色配置">
<app-color-settings></app-color-settings> <app-color-settings></app-color-settings>
</nz-tab> </nz-tab>
src/app/pages/system-management/role-management/role-management-modify/role-management-modify.component.html
+22 -17
View File
@@ -1,18 +1,18 @@
<div class="system-main-container"> <div class="system-main-container">
<div class="user-modify-box card" id="main-container"> <div class="user-modify-box card" id="main-container">
<app-request-status *ngIf="modifyType==2" [statusParams]='statusParamsDetail'></app-request-status> <app-request-status *ngIf="modifyType==2" [statusParams]='statusParamsDetail'></app-request-status>
<nz-skeleton [nzActive]="true" [nzParagraph]="{ rows: 16 }" *ngIf='modifyType==2&&statusParamsDetail.status==1'></nz-skeleton> <!-- <nz-skeleton [nzActive]="true" [nzParagraph]="{ rows: 16 }" *ngIf='modifyType==2&&statusParamsDetail.status==1'></nz-skeleton> -->
<form nz-form [formGroup]="validateForm"> <form nz-form [formGroup]="validateForm">
<nz-form-item> <nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="role_name" nzRequired>角色名称</nz-form-label> <nz-form-label class="mr-2" nzFor="role_name" nzRequired style="vertical-align:top">角色名称</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24"> <nz-form-control style="display:inline-block">
<input nz-input id="role_name" formControlName="role_name" placeholder="请输入角色名称"> <input nz-input id="role_name" formControlName="role_name" placeholder="请输入角色名称">
<nz-form-explain *ngIf="validateForm.get('role_name').dirty && validateForm.get('role_name').errors">请输入角色名称</nz-form-explain> <nz-form-explain *ngIf="validateForm.get('role_name').dirty && validateForm.get('role_name').errors">请输入角色名称</nz-form-explain>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<nz-form-item> <nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzRequired>角色类型</nz-form-label> <nz-form-label class="mr-2" nzRequired style="vertical-align:top">角色类型</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24"> <nz-form-control style="display:inline-block">
<nz-radio-group formControlName="role_type"> <nz-radio-group formControlName="role_type">
<label nz-radio nzValue='0'>系统内置</label> <label nz-radio nzValue='0'>系统内置</label>
<label nz-radio nzValue='1'>用户定义</label> <label nz-radio nzValue='1'>用户定义</label>
@@ -20,13 +20,14 @@
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<nz-form-item> <nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzRequired>角色用户</nz-form-label> <nz-form-label class="mr-2" nzRequired style="vertical-align:top">包含的用户</nz-form-label>
<nz-form-control [nzSm]="18" [nzXs]="24"> <nz-form-control style="display:inline-block">
<a href="javascript:;" (click)="openUsers()">选择</a> <a href="javascript:;" (click)="openUsers()">选择</a>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<div class="user-table table-box"> <div class="user-table table-box" nz-row>
<nz-table [nzShowPagination]='false' #userDataSet [nzData]="userSelecteds"> <nz-table nz-col nzXs="24" nzSm="20" nzMd="18" nzLg="14" nzXl="12" nzBordered [nzShowPagination]='false'
#userDataSet [nzData]="userSelecteds">
<thead> <thead>
<tr> <tr>
<th>姓名</th> <th>姓名</th>
@@ -41,33 +42,36 @@
<td>{{item.login_name}}</td> <td>{{item.login_name}}</td>
<td>{{item.mobile}}</td> <td>{{item.mobile}}</td>
<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> <i nz-popconfirm nzTitle="确定删除该用户?" nzOkText="确定" nzCancelText="取消" (nzOnConfirm)="delectConfirm(item)"
class="table-operation-btn danger" nz-icon type="delete" theme="outline"></i>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</nz-table> </nz-table>
</div> </div>
<nz-form-item> <nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24">功能权限</nz-form-label> <nz-form-label class="mr-2" style="vertical-align:top">功能权限</nz-form-label>
<nz-form-control [nzSm]="18" [nzXs]="24"> <nz-form-control style="display:inline-block">
<div class="tree-box ml10"> <div class="tree-box ml10">
<ul id="treeDemo" class="ztree"></ul> <ul id="treeDemo" class="ztree"></ul>
</div> </div>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</form> </form>
<div class="user-footer"> <div class="user-footer" nz-col nzXs="24" nzSm="20" nzMd="18" nzLg="14" nzXl="12">
<button (click)='submitForm()' [nzLoading]="isLoadingSave" nz-button nzType="primary" class="mr10" [disabled]='!validateForm.valid||!(userSelecteds.length>0)'>保存</button> <button (click)='submitForm()' [nzLoading]="isLoadingSave" nz-button nzType="primary" class="mr10"
[disabled]='!validateForm.valid||!(userSelecteds.length>0)'>保存</button>
<button (click)='cancel()' nz-button nzType="default">取消</button> <button (click)='cancel()' nz-button nzType="default">取消</button>
</div> </div>
</div> </div>
</div> </div>
<!-- 机构负责人选择 --> <!-- 机构负责人选择 -->
<div class="org-selete-box"> <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()"> <nz-drawer [nzBodyStyle]="{ height: 'calc(100% - 55px)', overflow: 'auto', 'padding-bottom':'53px' }" [nzWidth]="auto"
[nzVisible]="visibleUsers" nzTitle="角色用户" (nzOnClose)="closeUser()">
<div class="users-box" [hidden]='statusParamsUsers.status!=3'> <div class="users-box" [hidden]='statusParamsUsers.status!=3'>
<div class="user-table-box"> <div class="user-table-box">
<nz-table [nzShowPagination]='false' #dataSet [nzData]="userData"> <nz-table nzBordered [nzShowPagination]='false' #dataSet [nzData]="userData">
<thead> <thead>
<tr> <tr>
<th></th> <th></th>
@@ -86,7 +90,8 @@
</tbody> </tbody>
</nz-table> </nz-table>
<div class="page-box" *ngIf="statusParamsUsers.status==3"> <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> <nz-pagination [nzPageIndex]="search.page_index" (nzPageIndexChange)='pageChange($event)'
[nzPageSize]='search.page_size' [nzTotal]="collectionSize"></nz-pagination>
</div> </div>
</div> </div>
<div class="drawer-footer"> <div class="drawer-footer">
src/app/pages/system-management/role-management/role-management-modify/role-management-modify.component.scss
+8 -7
View File
@@ -1,13 +1,17 @@
@import "../../../main.scss"; @import "../../../main.scss";
.system-main-container{ .system-main-container{
overflow-y:auto; overflow-y:auto;
/deep/ .ant-form-item{
margin-bottom: 0;
}
} }
.user-modify-box{ .user-modify-box{
position: relative; position: relative;
min-height: 100%;
margin-bottom: 0 !important;
.user-footer{ .user-footer{
text-align: center; text-align: center;
margin-top: -20px; margin-top: 20px;
} }
} }
.ztree{ .ztree{
@@ -20,8 +24,8 @@
height: 40px; height: 40px;
} }
.user-table{ .user-table{
width: 80%; // width: 80%;
margin: 0 auto; // margin: 0 auto;
margin-bottom: 30px; margin-bottom: 30px;
} }
.drawer-footer{ .drawer-footer{
@@ -33,9 +37,6 @@
.users-box{ .users-box{
padding-bottom: 30px; padding-bottom: 30px;
} }
.tree-box{
margin-bottom: 40px;
}
//火狐浏览器单独设置样式 解决在火狐浏览器下 底部padding-bottom无效问题 //火狐浏览器单独设置样式 解决在火狐浏览器下 底部padding-bottom无效问题
@-moz-document url-prefix(){ @-moz-document url-prefix(){
.user-footer{ .user-footer{
src/app/pages/system-management/role-management/role-management-modify/role-management-modify.component.ts
+8 -2
View File
@@ -1,12 +1,12 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { HttpClientService } from '../../../../services/http-client.service'; import { HttpClientService } from '../../../../services/http-client.service';
import { Router, ActivatedRoute } from '@angular/router'; import { Router, ActivatedRoute } from '@angular/router';
import { NzMessageService } from 'ng-zorro-antd'; import { NzMessageService } from 'ng-zorro-antd';
import { Observable } from 'rxjs';
import 'ztree'; import 'ztree';
declare var $: any; declare var $: any;
declare var jQuery: any;
@Component({ @Component({
selector: 'app-role-management-modify', selector: 'app-role-management-modify',
@@ -46,6 +46,7 @@ export class RoleManagementModifyComponent implements OnInit {
private http: HttpClientService, private http: HttpClientService,
private route: ActivatedRoute, private route: ActivatedRoute,
private router: Router, private router: Router,
private location: Location,
private message: NzMessageService, private message: NzMessageService,
) { } ) { }
@@ -127,6 +128,11 @@ export class RoleManagementModifyComponent implements OnInit {
} }
} }
cancel() {
this.location.back()
}
//修改时查询该角色下的所有用户 //修改时查询该角色下的所有用户
queryUserById(): void { queryUserById(): void {
this.http.get('/sysapi/setting/role/users/' + this.roleId).subscribe((json) => { this.http.get('/sysapi/setting/role/users/' + this.roleId).subscribe((json) => {
src/app/pages/system-management/role-management/role-management.component.html
+15 -15
View File
@@ -2,31 +2,28 @@
<div class="user-manage"> <div class="user-manage">
<div class="system-main-content card"> <div class="system-main-content card">
<div class="search-box"> <div class="search-box">
<div nz-row> <div class="dip mr-4">
<div nz-col nzSpan="8">
<nz-form-item> <nz-form-item>
<nz-form-label class="left">角色名称</nz-form-label> <nz-form-label>角色名称</nz-form-label>
<nz-form-control nzSpan="17"> <nz-form-control style="display:inline-block">
<input nz-input [(ngModel)]='search.role_name' placeholder="请输入角色名称"> <input nz-input [(ngModel)]='search.role_name' placeholder="请输入角色名称">
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div> </div>
<div nz-col nzSpan="8"> <div class="dip">
<nz-form-item> <nz-form-item>
<nz-form-control nzSpan="24"> <nz-form-control>
<button class="mr10" nz-button nzType="primary" (click)="queryTable()"><i nz-icon type="search"></i>查询</button> <button class="mr10" nz-button nzType="primary" (click)="queryTable()"><i nz-icon type="search"></i>查询</button>
<button (click)="reset()" nz-button nzType="primary"><i nz-icon type="sync" theme="outline"></i>重置</button> <button (click)="addModify(1)" nz-button nzType="primary"><i nz-icon type="plus" theme="outline"></i>新增</button>
<!-- <button (click)="reset()" nz-button nzType="primary"><i nz-icon type="sync" theme="outline"></i>重置</button> -->
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div> </div>
</div> </div>
<div class="table-operation-box"> <nz-divider></nz-divider>
<button (click)="addModify(1)" nz-button nzType="primary"><i nz-icon type="plus" theme="outline"></i>新增</button>
</div>
</div>
<app-request-status *ngIf='statusParamsTable.status!=4' [statusParams]='statusParamsTable'></app-request-status> <app-request-status *ngIf='statusParamsTable.status!=4' [statusParams]='statusParamsTable'></app-request-status>
<div class="table-box" *ngIf='statusParamsTable.status==3||statusParamsTable.status==4||statusParamsTable.status==0'> <div class="table-box" *ngIf='statusParamsTable.status==3||statusParamsTable.status==4||statusParamsTable.status==0'>
<nz-table [nzShowPagination]='false' #dataSet [nzData]="tableData"> <nz-table nzBordered [nzShowPagination]='false' #dataSet [nzData]="tableData">
<thead> <thead>
<tr> <tr>
<th>角色名称</th> <th>角色名称</th>
@@ -43,15 +40,18 @@
<td>{{item.create_by}}</td> <td>{{item.create_by}}</td>
<td>{{item.create_date| date:'yyyy-MM-dd HH:mm:ss'}}</td> <td>{{item.create_date| date:'yyyy-MM-dd HH:mm:ss'}}</td>
<td> <td>
<i (click)="addModify(2,item)" class="table-operation-btn edit" nz-icon type="edit" theme="outline"></i> <i (click)="addModify(2,item)" class="table-operation-btn edit" nz-icon type="edit"
theme="outline"></i>
<nz-divider nzType="vertical"></nz-divider> <nz-divider nzType="vertical"></nz-divider>
<i nz-popconfirm nzTitle="确定删除该角色?" nzOkText="确定" nzCancelText="取消" (nzOnConfirm)="delectConfirm(item)" (nzOnCancel)="delectCancel()" class="table-operation-btn danger" nz-icon type="delete" theme="outline"></i> <i nz-popconfirm nzTitle="确定删除该角色?" nzOkText="确定" nzCancelText="取消" (nzOnConfirm)="delectConfirm(item)"
class="table-operation-btn danger" nz-icon type="delete" theme="outline"></i>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</nz-table> </nz-table>
<div class="page-box" *ngIf="statusParamsTable.status==3"> <div class="page-box" *ngIf="statusParamsTable.status==3">
<nz-pagination [nzPageIndex]="search.page_index" (nzPageIndexChange)='pageChange($event)' [nzPageSize]='search.page_size' [nzTotal]="collectionSize"></nz-pagination> <nz-pagination [nzPageIndex]="search.page_index" (nzPageIndexChange)='pageChange($event)'
[nzPageSize]='search.page_size' [nzTotal]="collectionSize"></nz-pagination>
</div> </div>
</div> </div>
src/app/pages/system-management/role-management/role-management.component.scss
+3 -3
View File
@@ -4,14 +4,14 @@
.user-manage{ .user-manage{
.system-main-content{ .system-main-content{
min-height: 500px; min-height: 500px;
}
.card{
} }
.tree-box{ .tree-box{
overflow-y:scroll; overflow-y:scroll;
} }
} }
/deep/ .ant-form-item{
margin-bottom: 0;
}
} }
.user-detail{ .user-detail{
src/app/pages/system-management/user-management/user-management-modify/user-management-modify.component.html
+62 -35
View File
@@ -1,33 +1,56 @@
<div class="system-main-container"> <div class="system-main-container">
<div class="user-modify-box card" id="main-container"> <div class="user-modify-box card" id="main-container">
<app-request-status *ngIf="modifyType==2" [statusParams]='statusParamsDetail'></app-request-status> <app-request-status *ngIf="modifyType==2" [statusParams]='statusParamsDetail'></app-request-status>
<nz-skeleton [nzActive]="true" [nzParagraph]="{ rows: 16 }" *ngIf='modifyType==2&&statusParamsDetail.status==1'></nz-skeleton> <!-- <nz-skeleton [nzActive]="true" [nzParagraph]="{ rows: 16 }" *ngIf='modifyType==2&&statusParamsDetail.status==1'></nz-skeleton> -->
<form nz-form [formGroup]="validateForm" *ngIf="statusParamsDetail.status==3"> <form nz-form [formGroup]="validateForm" *ngIf="statusParamsDetail.status==3">
<div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="24" [nzLg]="24" [nzXl]="12" [nzXXl]="12">
<nz-form-item> <nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="real_name" nzRequired>姓名</nz-form-label> <nz-form-label nzSpan="7" nzFor="real_name" nzRequired>姓名</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24"> <nz-form-control nzSpan="12">
<input nz-input id="real_name" formControlName="real_name" placeholder="请输入姓名"> <input nz-input id="real_name" formControlName="real_name" placeholder="请输入姓名">
<nz-form-explain *ngIf="validateForm.get('real_name').dirty && validateForm.get('real_name').errors">请输入姓名</nz-form-explain> <nz-form-explain *ngIf="validateForm.get('real_name').dirty && validateForm.get('real_name').errors">请输入姓名</nz-form-explain>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div>
<div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="24" [nzLg]="24" [nzXl]="12" [nzXXl]="12">
<nz-form-item> <nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="login_name" nzRequired>系统账号</nz-form-label> <nz-form-label nzSpan="7" nzRequired>所属角色</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="checkNameStatus" nzHasFeedback> <nz-form-control nzSpan="12">
<input nz-input (blur)='checkName()' (keydown)="checkNameStatus='';nameOnly=true" name="validating" id="login_name" formControlName="login_name" placeholder="请输入统一身份认证账号"> <div class="relative" *ngIf="statusParamsRole.status!=3">
<app-request-status [statusParams]='statusParamsRole'></app-request-status>
</div>
<nz-select formControlName="roleList" *ngIf="statusParamsRole.status==3" nzMode="multiple"
nzPlaceHolder="请选择所属角色">
<nz-option *ngFor="let option of listOfRole" [nzLabel]="option.role_name" [nzValue]="option.rid"></nz-option>
</nz-select>
<nz-form-explain *ngIf="(roleList.length<=0)&&saveCheck" class="red">请选择所属角色</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="login_name" nzRequired>系统账号</nz-form-label>
<nz-form-control nzSpan="12" [nzValidateStatus]="checkNameStatus" nzHasFeedback>
<input nz-input (blur)='checkName()' (keydown)="checkNameStatus='';nameOnly=true" name="validating"
id="login_name" formControlName="login_name" placeholder="请输入统一身份认证账号">
<nz-form-explain *ngIf="validateForm.get('login_name').dirty && validateForm.get('login_name').errors">请输入系统账号</nz-form-explain> <nz-form-explain *ngIf="validateForm.get('login_name').dirty && validateForm.get('login_name').errors">请输入系统账号</nz-form-explain>
<nz-form-explain *ngIf="!nameOnly" class="red">本账号已存在</nz-form-explain> <nz-form-explain *ngIf="!nameOnly" class="red">本账号已存在</nz-form-explain>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div>
<div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="24" [nzLg]="24" [nzXl]="12" [nzXXl]="12">
<nz-form-item> <nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="password" nzRequired>系统密码</nz-form-label> <nz-form-label nzSpan="7" nzFor="password" nzRequired>系统密码</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24"> <nz-form-control nzSpan="12">
<input nz-input id="password" formControlName="password" placeholder="请输入密码"> <input nz-input id="password" formControlName="password" placeholder="请输入密码">
<nz-form-explain *ngIf="validateForm.get('password').dirty && validateForm.get('password').errors">请输入密码</nz-form-explain> <nz-form-explain *ngIf="validateForm.get('password').dirty && validateForm.get('password').errors">请输入密码</nz-form-explain>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div>
<div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="24" [nzLg]="24" [nzXl]="12" [nzXXl]="12">
<nz-form-item> <nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzRequired>所属机构</nz-form-label> <nz-form-label nzSpan="7" nzRequired>所属机构</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24"> <nz-form-control nzSpan="12">
<span *ngIf="orgDetail"> <span *ngIf="orgDetail">
<nz-tag nzMode="closeable" (nzOnClose)="tagClose($event)">{{orgDetail.organization}}</nz-tag> <nz-tag nzMode="closeable" (nzOnClose)="tagClose($event)">{{orgDetail.organization}}</nz-tag>
</span> </span>
@@ -35,73 +58,77 @@
<nz-form-explain *ngIf="!orgDetail&&saveCheck" class="red">请选择所属机构</nz-form-explain> <nz-form-explain *ngIf="!orgDetail&&saveCheck" class="red">请选择所属机构</nz-form-explain>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzRequired>所属角色</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24">
<div class="relative" *ngIf="statusParamsRole.status!=3">
<app-request-status [statusParams]='statusParamsRole'></app-request-status>
</div> </div>
<nz-select formControlName="role" *ngIf="statusParamsRole.status==3" nzMode="multiple" nzPlaceHolder="请选择所属角色" [(ngModel)]="roleList"> <div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="24" [nzLg]="24" [nzXl]="12" [nzXXl]="12">
<nz-option *ngFor="let option of listOfRole" [nzLabel]="option.role_name" [nzValue]="option.rid"></nz-option>
</nz-select>
<nz-form-explain *ngIf="(roleList.length<=0)&&saveCheck" class="red">请选择所属角色</nz-form-explain>
</nz-form-control>
</nz-form-item>
<nz-form-item> <nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="remark">描述</nz-form-label> <nz-form-label nzSpan="7" nzFor="remark">描述</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24"> <nz-form-control nzSpan="12">
<textarea rows="3" id="remark" nz-input formControlName="remark" placeholder="请输入描述信息"></textarea> <textarea rows="3" id="remark" nz-input formControlName="remark" placeholder="请输入描述信息"></textarea>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div>
<div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="24" [nzLg]="24" [nzXl]="12" [nzXXl]="12">
<nz-form-item> <nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="identify_num">身份证号</nz-form-label> <nz-form-label nzSpan="7" nzFor="identify_num">身份证号</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24"> <nz-form-control nzSpan="12">
<input nz-input id="identify_num" formControlName="identify_num" placeholder="请输入身份证号"> <input nz-input id="identify_num" formControlName="identify_num" placeholder="请输入身份证号">
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div>
<div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="24" [nzLg]="24" [nzXl]="12" [nzXXl]="12">
<nz-form-item> <nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="email">邮箱</nz-form-label> <nz-form-label nzSpan="7" nzFor="email">邮箱</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24"> <nz-form-control nzSpan="12">
<input nz-input id="email" formControlName="email" placeholder="请输入邮箱地址"> <input nz-input id="email" formControlName="email" placeholder="请输入邮箱地址">
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div>
<div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="24" [nzLg]="24" [nzXl]="12" [nzXXl]="12">
<nz-form-item> <nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="mobile">电话</nz-form-label> <nz-form-label nzSpan="7" nzFor="mobile">电话</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24"> <nz-form-control nzSpan="12">
<input nz-input id="mobile" formControlName="mobile" placeholder="请输入电话号码"> <input nz-input id="mobile" formControlName="mobile" placeholder="请输入电话号码">
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div>
<div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="24" [nzLg]="24" [nzXl]="12" [nzXXl]="12">
<nz-form-item> <nz-form-item>
<nz-form-label [nzSm]="4" [nzXs]="24" >性别</nz-form-label> <nz-form-label nzSpan="7">性别</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24"> <nz-form-control nzSpan="12">
<nz-radio-group formControlName="sex"> <nz-radio-group formControlName="sex">
<label nz-radio nzValue="m">男</label> <label nz-radio nzValue="m">男</label>
<label nz-radio nzValue="f">女</label> <label nz-radio nzValue="f">女</label>
</nz-radio-group> </nz-radio-group>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div>
<div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="24" [nzLg]="24" [nzXl]="12" [nzXXl]="12">
<nz-form-item *ngIf='modifyType==2'> <nz-form-item *ngIf='modifyType==2'>
<nz-form-label [nzSm]="4" [nzXs]="24" >状态</nz-form-label> <nz-form-label nzSpan="7">状态</nz-form-label>
<nz-form-control [nzSm]="14" [nzXs]="24"> <nz-form-control nzSpan="12">
<nz-radio-group formControlName="status"> <nz-radio-group formControlName="status">
<label nz-radio nzValue="1">已激活</label> <label nz-radio nzValue="1">已激活</label>
<label nz-radio nzValue="0">未激活</label> <label nz-radio nzValue="0">未激活</label>
</nz-radio-group> </nz-radio-group>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div>
</form> </form>
<div class="user-footer"> <div class="user-footer">
<button (click)='submitForm()' [nzLoading]="isLoadingSave" nz-button nzType="primary" class="mr10" [disabled]='!this.validateForm.valid||!this.orgDetail||this.roleList.length<=0||!this.nameOnly'>保存</button> <button (click)='submitForm()' [nzLoading]="isLoadingSave" nz-button nzType="primary" class="mr10"
[disabled]='!this.validateForm.valid||!this.orgDetail||this.roleList.length<=0||!this.nameOnly'>保存</button>
<button (click)='cancel()' nz-button nzType="default">取消</button> <button (click)='cancel()' nz-button nzType="default">取消</button>
</div> </div>
</div> </div>
</div> </div>
<!-- 选择所属机构 --> <!-- 选择所属机构 -->
<div class="org-selete-box"> <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()"> <nz-drawer [nzBodyStyle]="{ height: 'calc(100% - 55px)', overflow: 'auto', 'padding-bottom':'53px' }"
[nzMaskClosable]="true" [nzWidth]="380" [nzVisible]="visible" nzTitle="选择机构" (nzOnClose)="close()">
<app-request-status [statusParams]='statusParamsTree'></app-request-status> <app-request-status [statusParams]='statusParamsTree'></app-request-status>
<div class="org-tree-box" [hidden]='statusParamsTree.status!=3'> <div class="org-tree-box" [hidden]='statusParamsTree.status!=3'>
<div class="search-box"> <div class="search-box">
<span>机构搜索：</span>
<input nz-input style="width: 180px !important;margin-left: 8px;margin-right: 6px;" id="key" /> <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> <button nz-button nzType="primary" nzShape="circle" (click)="searchNode()"><i nz-icon type="search"></i></button>
</div> </div>
src/app/pages/system-management/user-management/user-management-modify/user-management-modify.component.scss
+7 -8
View File
@@ -3,22 +3,21 @@
} }
.user-modify-box{ .user-modify-box{
position: relative; position: relative;
min-height: 100%;
margin-bottom: 0 !important;
.user-footer{ .user-footer{
text-align: center; text-align: center;
margin-top: -20px;
} }
} }
.ztree{ .ztree{
padding-bottom: 40px; border: 1px solid #ddd;
padding-right: 16px; margin-top: 20px;
margin-bottom: 20px;
padding: 16px;
} }
.drawer-footer{ .drawer-footer{
display: inline-block;
position: relative; position: relative;
left: 50%; text-align: right;
bottom: 20px;
transform: translate(-50%)
} }
.relative{ .relative{
position: relative; position: relative;
src/app/pages/system-management/user-management/user-management-modify/user-management-modify.component.ts
+11 -9
View File
@@ -1,13 +1,12 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { HttpClientService } from '../../../../services/http-client.service'; import { HttpClientService } from '../../../../services/http-client.service';
import { Router, ActivatedRoute } from '@angular/router'; import { Router, ActivatedRoute } from '@angular/router';
import { NzMessageService } from 'ng-zorro-antd'; import { NzMessageService } from 'ng-zorro-antd';
import { Observable } from 'rxjs';
import 'ztree'; import 'ztree';
declare var $: any; declare var $: any;
declare var jQuery: any;
@Component({ @Component({
selector: 'app-user-management-modify', selector: 'app-user-management-modify',
@@ -46,6 +45,7 @@ export class UserManagementModifyComponent implements OnInit {
private http: HttpClientService, private http: HttpClientService,
private route: ActivatedRoute, private route: ActivatedRoute,
private router: Router, private router: Router,
private location: Location,
private message: NzMessageService, private message: NzMessageService,
) { } ) { }
@@ -62,7 +62,7 @@ export class UserManagementModifyComponent implements OnInit {
mobile: [''], mobile: [''],
sex: ['m'], sex: ['m'],
status: ['1'], status: ['1'],
role:[''], roleList: [''],
remark: [''] remark: ['']
}); });
//取路由参数 //取路由参数
@@ -85,7 +85,7 @@ export class UserManagementModifyComponent implements OnInit {
this.statusParamsDetail.status = 3; this.statusParamsDetail.status = 3;
this.userDetail = json.body; this.userDetail = json.body;
let detail = json.body; let detail = json.body;
this.validateForm.setValue({ this.validateForm.patchValue({
real_name: detail.real_name, real_name: detail.real_name,
login_name: detail.login_name, login_name: detail.login_name,
password: detail.password, password: detail.password,
@@ -94,7 +94,6 @@ export class UserManagementModifyComponent implements OnInit {
mobile: detail.mobile, mobile: detail.mobile,
sex: detail.sex, sex: detail.sex,
status: detail.status, status: detail.status,
role:'',
remark: detail.remark, remark: detail.remark,
}) })
this.oldLoginName = detail.login_name; this.oldLoginName = detail.login_name;
@@ -105,6 +104,9 @@ export class UserManagementModifyComponent implements OnInit {
detail.roleList.forEach(item => { detail.roleList.forEach(item => {
this.roleList.push(item.rid) this.roleList.push(item.rid)
}) })
this.validateForm.patchValue({
roleList: this.roleList,
})
} }
} else { } else {
this.statusParamsDetail.status = 4; this.statusParamsDetail.status = 4;
@@ -185,7 +187,7 @@ export class UserManagementModifyComponent implements OnInit {
this.validateForm.controls[i].markAsDirty(); this.validateForm.controls[i].markAsDirty();
this.validateForm.controls[i].updateValueAndValidity(); this.validateForm.controls[i].updateValueAndValidity();
} }
if(this.validateForm.valid&&this.orgDetail&&this.roleList.length>0&&this.nameOnly){ if (this.validateForm.valid && this.orgDetail && this.validateForm.get('roleList').value.length > 0 && this.nameOnly) {
//再次检验账号唯一性，避免用户填完账号直接点击提交，无法利用blur事件验证。 //再次检验账号唯一性，避免用户填完账号直接点击提交，无法利用blur事件验证。
if (this.modifyType == 2 && this.validateForm.value.login_name.trim() == this.oldLoginName) { if (this.modifyType == 2 && this.validateForm.value.login_name.trim() == this.oldLoginName) {
this.nameOnly = true; this.nameOnly = true;
@@ -229,7 +231,7 @@ export class UserManagementModifyComponent implements OnInit {
orgList: [], orgList: [],
roleList: [], roleList: [],
}; };
this.roleList.forEach(option=>{ this.validateForm.get('roleList').value.forEach(option => {
params.roleList.push({ params.roleList.push({
rid: option rid: option
}) })
@@ -264,7 +266,7 @@ export class UserManagementModifyComponent implements OnInit {
} }
//取消 返回列表页 //取消 返回列表页
cancel() { cancel() {
this.router.navigate(['app/system/users']) this.location.back();
} }
//获取角色列表 //获取角色列表
queryRole(): void { queryRole(): void {
@@ -307,7 +309,7 @@ export class UserManagementModifyComponent implements OnInit {
initTree() { initTree() {
//获取目录列表 //获取目录列表
this.statusParamsTree.status = 1; this.statusParamsTree.status = 1;
this.http.get("/sysapi/setting/organization/list",).subscribe(json=>{ this.http.get("/sysapi/setting/organization/list").subscribe(json => {
if (json.is_success) { if (json.is_success) {
if (json.body.length > 0) { if (json.body.length > 0) {
this.orgList = json.body; this.orgList = json.body;
src/app/pages/system-management/user-management/user-management.component.html
+21 -19
View File
@@ -4,41 +4,39 @@
<app-request-status [statusParams]='statusParamsTree'></app-request-status> <app-request-status [statusParams]='statusParamsTree'></app-request-status>
<ul [hidden]='statusParamsTree.status!=3' id="treeDemo" class="ztree"></ul> <ul [hidden]='statusParamsTree.status!=3' id="treeDemo" class="ztree"></ul>
</div> </div>
<!-- <div nz-col nzSpan="1"></div> -->
<div class="system-main-content card" id="main-box"> <div class="system-main-content card" id="main-box">
<div class="search-box"> <div class="search-box">
<div nz-row> <div class="dip mr-4">
<div nz-col nzSpan="8">
<nz-form-item> <nz-form-item>
<nz-form-label class="left">姓名</nz-form-label> <nz-form-label class="mr-2" style="vertical-align:top">姓名</nz-form-label>
<nz-form-control nzSpan="17"> <nz-form-control style="display:inline-block">
<input nz-input [(ngModel)]='search.real_name' placeholder="请输入姓名"> <input nz-input [(ngModel)]='search.real_name' placeholder="请输入姓名">
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div> </div>
<div nz-col nzSpan="8"> <div class="dip mr-4">
<nz-form-item> <nz-form-item>
<nz-form-label nzSpan="8">用户名</nz-form-label> <nz-form-label class="mr-2" style="vertical-align:top">用户名</nz-form-label>
<nz-form-control nzSpan="15"> <nz-form-control style="display:inline-block">
<input nz-input [(ngModel)]='search.login_name' placeholder="请输入用户名"> <input nz-input [(ngModel)]='search.login_name' placeholder="请输入用户名">
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div> </div>
<div nz-col nzSpan="8"> <div class="dip">
<nz-form-item> <nz-form-item>
<nz-form-control nzSpan="24"> <nz-form-control>
<button class="mr10" nz-button nzType="primary" (click)="queryTable()"><i nz-icon type="search"></i>查询</button> <button class="mr10" nz-button nzType="primary" (click)="queryTable()"><i nz-icon type="search"></i>查询</button>
<button (click)="reset()" nz-button nzType="primary"><i nz-icon type="sync" theme="outline"></i>重置</button> <button (click)="addModify(1)" nz-button nzType="primary"><i nz-icon type="plus" theme="outline"></i>新增</button>
<!-- <button (click)="reset()" nz-button nzType="primary"><i nz-icon type="sync" theme="outline"></i>重置</button> -->
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div> </div>
</div> </div>
<div class="table-operation-box"> <nz-divider></nz-divider>
<button (click)="addModify(1)" nz-button nzType="primary"><i nz-icon type="plus" theme="outline"></i>新增</button>
</div>
</div>
<app-request-status *ngIf='statusParamsTable.status!=4' [statusParams]='statusParamsTable'></app-request-status> <app-request-status *ngIf='statusParamsTable.status!=4' [statusParams]='statusParamsTable'></app-request-status>
<div class="table-box" *ngIf='statusParamsTable.status==3||statusParamsTable.status==4||statusParamsTable.status==0'> <div class="table-box" *ngIf='statusParamsTable.status==3||statusParamsTable.status==4||statusParamsTable.status==0'>
<nz-table [nzShowPagination]='false' #dataSet [nzData]="tableData"> <nz-table nzBordered [nzShowPagination]='false' #dataSet [nzData]="tableData">
<thead> <thead>
<tr> <tr>
<th>姓名</th> <th>姓名</th>
@@ -53,15 +51,18 @@
<td>{{item.login_name}}</td> <td>{{item.login_name}}</td>
<td>{{item.mobile}}</td> <td>{{item.mobile}}</td>
<td> <td>
<i (click)="addModify(2,item)" class="table-operation-btn edit" nz-icon type="edit" theme="outline"></i> <i (click)="addModify(2,item)" class="table-operation-btn edit" nz-icon type="edit"
theme="outline"></i>
<nz-divider nzType="vertical"></nz-divider> <nz-divider nzType="vertical"></nz-divider>
<i nz-popconfirm nzTitle="确定删除该用户?" nzOkText="确定" nzCancelText="取消" (nzOnConfirm)="delectConfirm(item)" (nzOnCancel)="delectCancel()" class="table-operation-btn danger" nz-icon type="delete" theme="outline"></i> <i nz-popconfirm nzTitle="确定删除该用户?" nzOkText="确定" nzCancelText="取消" (nzOnConfirm)="delectConfirm(item)"
class="table-operation-btn danger" nz-icon type="delete" theme="outline"></i>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</nz-table> </nz-table>
<div class="page-box" *ngIf="statusParamsTable.status==3"> <div class="page-box" *ngIf="statusParamsTable.status==3">
<nz-pagination [nzPageIndex]="search.page_index" (nzPageIndexChange)='pageChange($event)' [nzPageSize]='search.page_size' [nzTotal]="collectionSize"></nz-pagination> <nz-pagination [nzPageIndex]="search.page_index" (nzPageIndexChange)='pageChange($event)'
[nzPageSize]='search.page_size' [nzTotal]="collectionSize"></nz-pagination>
</div> </div>
</div> </div>
@@ -70,7 +71,8 @@
</div> </div>
<!-- 详情 --> <!-- 详情 -->
<div class="user-detail-box"> <div class="user-detail-box">
<nz-drawer [nzBodyStyle]="{ height: 'calc(100% - 55px)', overflow: 'auto', 'padding-bottom':'53px' }"[nzMaskClosable]="true" [nzWidth]="500" [nzVisible]="visible" nzTitle="用户详情" (nzOnClose)="close()"> <nz-drawer [nzBodyStyle]="{ height: 'calc(100% - 55px)', overflow: 'auto', 'padding-bottom':'53px' }"
[nzMaskClosable]="true" [nzWidth]="380" [nzVisible]="visible" nzTitle="用户详情" (nzOnClose)="close()">
<app-request-status [statusParams]='statusParamsDetail'></app-request-status> <app-request-status [statusParams]='statusParamsDetail'></app-request-status>
<form class="user-detail" *ngIf='statusParamsDetail.status==3' nz-form [nzLayout]="'inline'"> <form class="user-detail" *ngIf='statusParamsDetail.status==3' nz-form [nzLayout]="'inline'">
<div nz-row nzGutter="8"> <div nz-row nzGutter="8">
src/app/pages/system-management/user-management/user-management.component.scss
+7 -5
View File
@@ -2,13 +2,15 @@
.system-main-container{ .system-main-container{
.user-manage{ .user-manage{
.system-main-content{ .system-main-content{
overflow-y:scroll; overflow-y:auto;
}
.card{
} }
.tree-box{ .tree-box{
overflow-y:scroll; overflow-y:auto;
overflow-x: auto;
margin-right: 20px;
}
/deep/ .ant-form-item{
margin-bottom: 0;
} }
} }
} }
src/app/pages/system-management/user-management/user-management.component.ts
+2 -5
View File
@@ -44,8 +44,8 @@ export class UserManagementComponent implements OnInit {
ngOnInit() { ngOnInit() {
// 页面监听 动态改变表单高度 // 页面监听 动态改变表单高度
$('#tree-box').css('height',(document.documentElement.clientHeight-126+'px')); $('#tree-box').css('height',(document.documentElement.clientHeight-106+'px'));
$('#main-box').css('height',(document.documentElement.clientHeight-126+'px')); $('#main-box').css('height',(document.documentElement.clientHeight-106+'px'));
$(window).resize(function(){ $(window).resize(function(){
$('#tree-box').css('height',(document.documentElement.clientHeight-126+'px')); $('#tree-box').css('height',(document.documentElement.clientHeight-126+'px'));
$('#main-box').css('height',(document.documentElement.clientHeight-126+'px')); $('#main-box').css('height',(document.documentElement.clientHeight-126+'px'));
@@ -64,10 +64,7 @@ export class UserManagementComponent implements OnInit {
} }
}) })
} }
//取消删除
delectCancel(){
}
//新增、修改 1新增 2修改 //新增、修改 1新增 2修改
addModify(type,item?){ addModify(type,item?){
if(type==1){ if(type==1){