系统管理UI界面修改及逻辑代码优化
This commit is contained in:
zhouyuejun
@@ -3,7 +3,6 @@ import { Pipe, PipeTransform } from '@angular/core';
|
||||
@Pipe({name: 'null'})
|
||||
export class NoValue implements PipeTransform {
|
||||
transform(value: any, exponent: any): any {
|
||||
console.log(value)
|
||||
if(value){
|
||||
return value
|
||||
}else{
|
||||
|
||||
@@ -3,15 +3,13 @@
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
z-index: 999;
|
||||
.loading-icon{
|
||||
color: #1890ff;
|
||||
}
|
||||
.warning-icon{
|
||||
color: orange
|
||||
}
|
||||
.data-null{
|
||||
|
||||
}
|
||||
i{
|
||||
font-size: 40px;
|
||||
|
||||
@@ -48,8 +48,9 @@
|
||||
|
||||
.tree-box{
|
||||
position: relative;
|
||||
min-width: 300px;
|
||||
margin-right: 20px;
|
||||
min-width: 250px;
|
||||
max-width: 300px;
|
||||
// margin-right: 20px;
|
||||
float: left;
|
||||
padding: 20px;
|
||||
height: 100%;
|
||||
@@ -58,8 +59,8 @@
|
||||
|
||||
}
|
||||
.page-box{
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
text-align: right;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.table-operation-box{
|
||||
|
||||
+262
-238
@@ -1,247 +1,271 @@
|
||||
<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>机构负责人</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>
|
||||
<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>
|
||||
</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>
|
||||
<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]="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>
|
||||
<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>
|
||||
+13
-10
@@ -8,7 +8,8 @@
|
||||
}
|
||||
.operation-box{
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
padding-bottom: 20px;
|
||||
padding-bottom: 24px;
|
||||
margin-bottom: 24px;
|
||||
button{
|
||||
margin-right: 10px;
|
||||
}
|
||||
@@ -21,13 +22,15 @@
|
||||
margin-top: 20px;
|
||||
}
|
||||
.user-table{
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
// width: 80%;
|
||||
// margin: 0 auto;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
.tree-box{
|
||||
overflow-y:scroll;
|
||||
overflow-y:auto;
|
||||
overflow-x: auto;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
.user-footer{
|
||||
@@ -42,14 +45,14 @@
|
||||
}
|
||||
}
|
||||
.ztree-child{
|
||||
padding-bottom: 40px;
|
||||
padding-right: 16px;
|
||||
border: 1px solid #ddd;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
padding: 16px;
|
||||
}
|
||||
.drawer-footer{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translate(-50%)
|
||||
position: relative;
|
||||
text-align: right;
|
||||
}
|
||||
.users-box{
|
||||
padding-bottom: 30px;
|
||||
|
||||
+2
-2
@@ -215,11 +215,11 @@ export class DepartmentManagementComponent implements OnInit {
|
||||
//打开机构树抽屉
|
||||
open(): void {
|
||||
this.treeSelectedChild='';
|
||||
// this.visible = true;
|
||||
this.visible = true;
|
||||
}
|
||||
//关闭机构选择页面
|
||||
close(): void {
|
||||
// this.visible = false;
|
||||
this.visible = false;
|
||||
}
|
||||
//删除机构标签
|
||||
tagClose(event){
|
||||
|
||||
@@ -47,12 +47,12 @@
|
||||
<nz-tab nzTitle="消息警示提醒">
|
||||
<app-msg-alert-warning></app-msg-alert-warning>
|
||||
</nz-tab>
|
||||
<nz-tab nzTitle="消息声音提醒">
|
||||
<!-- <nz-tab nzTitle="消息声音提醒">
|
||||
<app-msg-alert-warning></app-msg-alert-warning>
|
||||
</nz-tab>
|
||||
<nz-tab nzTitle="航班代理">
|
||||
<app-flight-agency></app-flight-agency>
|
||||
</nz-tab>
|
||||
</nz-tab> -->
|
||||
<nz-tab nzTitle="颜色配置">
|
||||
<app-color-settings></app-color-settings>
|
||||
</nz-tab>
|
||||
|
||||
+98
-93
@@ -1,98 +1,103 @@
|
||||
<div class="system-main-container">
|
||||
<div class="user-modify-box card" id="main-container">
|
||||
<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>
|
||||
<form nz-form [formGroup]="validateForm" >
|
||||
<nz-form-item>
|
||||
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="role_name" nzRequired>角色名称</nz-form-label>
|
||||
<nz-form-control [nzSm]="14" [nzXs]="24">
|
||||
<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-control>
|
||||
</nz-form-item>
|
||||
<nz-form-item>
|
||||
<nz-form-label [nzSm]="4" [nzXs]="24" nzRequired>角色类型</nz-form-label>
|
||||
<nz-form-control [nzSm]="14" [nzXs]="24">
|
||||
<nz-radio-group formControlName="role_type">
|
||||
<label nz-radio nzValue='0'>系统内置</label>
|
||||
<label nz-radio nzValue='1'>用户定义</label>
|
||||
</nz-radio-group>
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
<nz-form-item>
|
||||
<nz-form-label [nzSm]="4" [nzXs]="24" nzRequired>角色用户</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' #userDataSet [nzData]="userSelecteds">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>姓名</th>
|
||||
<th>用户名</th>
|
||||
<th>电话</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let item of userDataSet.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>
|
||||
<nz-form-label [nzSm]="4" [nzXs]="24">功能权限</nz-form-label>
|
||||
<nz-form-control [nzSm]="18" [nzXs]="24">
|
||||
<div class="tree-box ml10">
|
||||
<ul id="treeDemo" class="ztree"></ul>
|
||||
</div>
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
</form>
|
||||
<div class="user-footer">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-modify-box card" id="main-container">
|
||||
<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> -->
|
||||
<form nz-form [formGroup]="validateForm">
|
||||
<nz-form-item>
|
||||
<nz-form-label class="mr-2" nzFor="role_name" nzRequired style="vertical-align:top">角色名称</nz-form-label>
|
||||
<nz-form-control style="display:inline-block">
|
||||
<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-control>
|
||||
</nz-form-item>
|
||||
<nz-form-item>
|
||||
<nz-form-label class="mr-2" nzRequired style="vertical-align:top">角色类型</nz-form-label>
|
||||
<nz-form-control style="display:inline-block">
|
||||
<nz-radio-group formControlName="role_type">
|
||||
<label nz-radio nzValue='0'>系统内置</label>
|
||||
<label nz-radio nzValue='1'>用户定义</label>
|
||||
</nz-radio-group>
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
<nz-form-item>
|
||||
<nz-form-label class="mr-2" nzRequired style="vertical-align:top">包含的用户</nz-form-label>
|
||||
<nz-form-control style="display:inline-block">
|
||||
<a href="javascript:;" (click)="openUsers()">选择</a>
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
<div class="user-table table-box" nz-row>
|
||||
<nz-table nz-col nzXs="24" nzSm="20" nzMd="18" nzLg="14" nzXl="12" nzBordered [nzShowPagination]='false'
|
||||
#userDataSet [nzData]="userSelecteds">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>姓名</th>
|
||||
<th>用户名</th>
|
||||
<th>电话</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let item of userDataSet.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)"
|
||||
class="table-operation-btn danger" nz-icon type="delete" theme="outline"></i>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</nz-table>
|
||||
</div>
|
||||
<nz-form-item>
|
||||
<nz-form-label class="mr-2" style="vertical-align:top">功能权限</nz-form-label>
|
||||
<nz-form-control style="display:inline-block">
|
||||
<div class="tree-box ml10">
|
||||
<ul id="treeDemo" class="ztree"></ul>
|
||||
</div>
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
</form>
|
||||
<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)='cancel()' nz-button nzType="default">取消</button>
|
||||
</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]="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>
|
||||
<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="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">
|
||||
<button (click)='userSave()' nz-button nzType="primary" class="mr10">保存</button>
|
||||
<button (click)=closeUser() nz-button nzType="default">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</nz-drawer>
|
||||
</div>
|
||||
+10
-9
@@ -1,13 +1,17 @@
|
||||
@import "../../../main.scss";
|
||||
.system-main-container{
|
||||
overflow-y:auto;
|
||||
overflow-y:auto;
|
||||
/deep/ .ant-form-item{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.user-modify-box{
|
||||
position: relative;
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
margin-bottom: 0 !important;
|
||||
.user-footer{
|
||||
text-align: center;
|
||||
margin-top: -20px;
|
||||
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
.ztree{
|
||||
@@ -20,8 +24,8 @@
|
||||
height: 40px;
|
||||
}
|
||||
.user-table{
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
// width: 80%;
|
||||
// margin: 0 auto;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.drawer-footer{
|
||||
@@ -33,9 +37,6 @@
|
||||
.users-box{
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
.tree-box{
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
//火狐浏览器单独设置样式 解决在火狐浏览器下 底部padding-bottom无效问题
|
||||
@-moz-document url-prefix(){
|
||||
.user-footer{
|
||||
|
||||
+307
-301
@@ -1,329 +1,335 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormBuilder,FormControl,FormGroup,Validators} from '@angular/forms';
|
||||
import { Location } from '@angular/common';
|
||||
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
|
||||
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 { Observable } from 'rxjs';
|
||||
|
||||
import 'ztree';
|
||||
declare var $: any;
|
||||
declare var jQuery: any;
|
||||
|
||||
@Component({
|
||||
selector: 'app-role-management-modify',
|
||||
templateUrl: './role-management-modify.component.html',
|
||||
styleUrls: ['./role-management-modify.component.scss']
|
||||
selector: 'app-role-management-modify',
|
||||
templateUrl: './role-management-modify.component.html',
|
||||
styleUrls: ['./role-management-modify.component.scss']
|
||||
})
|
||||
export class RoleManagementModifyComponent implements OnInit {
|
||||
/* 新树形组件参数 begin*/
|
||||
parentNode:any;
|
||||
parentName:any;
|
||||
treeSelected:any;
|
||||
isTreeTop:any;
|
||||
/* 新树形组件参数 bed */
|
||||
validateForm: FormGroup;
|
||||
visibleUsers = false; //控制抽屉显示
|
||||
statusParamsDetail:any={ //获取用户详情接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据
|
||||
status:1,
|
||||
}
|
||||
statusParamsUsers:any={ //接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据
|
||||
status:1,
|
||||
}
|
||||
modifyType:any=1; //当前页面操作类型 1 新增 2 编辑
|
||||
public roleId:any='';
|
||||
public userSelecteds:any=[]; //机构负责人已选用户-新增、修改时
|
||||
public userData:any=[]; //用户列表数据
|
||||
public search:any={
|
||||
page_index:'1',
|
||||
page_size:'10',
|
||||
real_name:'',
|
||||
}
|
||||
collectionSize:any ;
|
||||
public permissionChecked:any=[]; //角色详情的权限列表
|
||||
isLoadingSave:any=false;
|
||||
|
||||
constructor(
|
||||
private fb: FormBuilder,
|
||||
private http:HttpClientService,
|
||||
private route:ActivatedRoute,
|
||||
private router:Router,
|
||||
private message: NzMessageService,
|
||||
) { }
|
||||
/* 新树形组件参数 begin*/
|
||||
parentNode: any;
|
||||
parentName: any;
|
||||
treeSelected: any;
|
||||
isTreeTop: any;
|
||||
/* 新树形组件参数 bed */
|
||||
validateForm: FormGroup;
|
||||
visibleUsers = false; //控制抽屉显示
|
||||
statusParamsDetail: any = { //获取用户详情接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据
|
||||
status: 1,
|
||||
}
|
||||
statusParamsUsers: any = { //接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据
|
||||
status: 1,
|
||||
}
|
||||
modifyType: any = 1; //当前页面操作类型 1 新增 2 编辑
|
||||
public roleId: any = '';
|
||||
public userSelecteds: any = []; //机构负责人已选用户-新增、修改时
|
||||
public userData: any = []; //用户列表数据
|
||||
public search: any = {
|
||||
page_index: '1',
|
||||
page_size: '10',
|
||||
real_name: '',
|
||||
}
|
||||
collectionSize: any;
|
||||
public permissionChecked: any = []; //角色详情的权限列表
|
||||
isLoadingSave: any = false;
|
||||
|
||||
ngOnInit() {
|
||||
this.validateForm = this.fb.group({
|
||||
role_name:[ '', [ Validators.required ] ],
|
||||
role_type:[ '1', [ Validators.required ] ], //0=系统内置(不可删除) ，1=用户定义
|
||||
description:[ ''],
|
||||
role_code:[ ''],
|
||||
status:[''],
|
||||
user:[],
|
||||
permission:[],
|
||||
});
|
||||
this.queryTable();
|
||||
//取路由参数
|
||||
this.route.queryParams.subscribe(routeParams=>{
|
||||
this.modifyType=routeParams.operateType;
|
||||
//routeParams 1新增 2修改
|
||||
if(routeParams.operateType==2){
|
||||
this.roleId=routeParams.id;
|
||||
this.queryUserById();
|
||||
this.queryDetail();
|
||||
}else{
|
||||
this.initTree();
|
||||
this.statusParamsDetail.status=3;
|
||||
}
|
||||
})
|
||||
}
|
||||
submitForm(){
|
||||
let permission:any=[];
|
||||
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
|
||||
var checkList=zTree.getCheckedNodes(true);
|
||||
if(checkList.length>0){
|
||||
for(var i=0;i<checkList.length;i++){
|
||||
if(checkList[i].checked&&checkList[i].level!=0&&checkList[i].level!=1){
|
||||
permission.push({
|
||||
pid:checkList[i].id,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
let users:any=[];
|
||||
if(this.userSelecteds&&this.userSelecteds.length>0){
|
||||
this.userSelecteds.forEach(item=>{
|
||||
users.push({
|
||||
uid:item.uid,
|
||||
real_name:item.real_name,
|
||||
mobile:item.mobile,
|
||||
email:item.email,
|
||||
sex:item.sex,
|
||||
})
|
||||
})
|
||||
}
|
||||
this.validateForm.patchValue({
|
||||
permission:permission,
|
||||
user:users,
|
||||
})
|
||||
this.isLoadingSave=true;
|
||||
if(this.modifyType==1){
|
||||
this.http.post('/sysapi/setting/role/add/',this.validateForm.value).subscribe((json)=>{
|
||||
this.isLoadingSave=true;
|
||||
if(json.is_success){
|
||||
this.message.success(`新增成功!`);
|
||||
this.router.navigate(['app/system/roles'])
|
||||
}else{
|
||||
this.message.error(`新增失败!`);
|
||||
}
|
||||
})
|
||||
}else if(this.modifyType==2){
|
||||
this.isLoadingSave=true;
|
||||
this.http.put('/sysapi/setting/role/update/'+this.roleId,this.validateForm.value).subscribe((json)=>{
|
||||
if(json.is_success){
|
||||
this.message.success(`修改成功!`);
|
||||
this.router.navigate(['app/system/roles'])
|
||||
}else{
|
||||
this.message.error(`修改失败!`);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
//修改时查询该角色下的所有用户
|
||||
queryUserById():void{
|
||||
this.http.get('/sysapi/setting/role/users/'+this.roleId).subscribe((json)=>{
|
||||
if(json.is_success){
|
||||
json.body.forEach(item=>{
|
||||
item.checked=true;
|
||||
item.disabled=false;
|
||||
this.userSelecteds = [ ...this.userSelecteds, item];
|
||||
})
|
||||
constructor(
|
||||
private fb: FormBuilder,
|
||||
private http: HttpClientService,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private location: Location,
|
||||
private message: NzMessageService,
|
||||
) { }
|
||||
|
||||
}else{
|
||||
ngOnInit() {
|
||||
this.validateForm = this.fb.group({
|
||||
role_name: ['', [Validators.required]],
|
||||
role_type: ['1', [Validators.required]], //0=系统内置(不可删除) ，1=用户定义
|
||||
description: [''],
|
||||
role_code: [''],
|
||||
status: [''],
|
||||
user: [],
|
||||
permission: [],
|
||||
});
|
||||
this.queryTable();
|
||||
//取路由参数
|
||||
this.route.queryParams.subscribe(routeParams => {
|
||||
this.modifyType = routeParams.operateType;
|
||||
//routeParams 1新增 2修改
|
||||
if (routeParams.operateType == 2) {
|
||||
this.roleId = routeParams.id;
|
||||
this.queryUserById();
|
||||
this.queryDetail();
|
||||
} else {
|
||||
this.initTree();
|
||||
this.statusParamsDetail.status = 3;
|
||||
}
|
||||
})
|
||||
}
|
||||
submitForm() {
|
||||
let permission: any = [];
|
||||
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
|
||||
var checkList = zTree.getCheckedNodes(true);
|
||||
if (checkList.length > 0) {
|
||||
for (var i = 0; i < checkList.length; i++) {
|
||||
if (checkList[i].checked && checkList[i].level != 0 && checkList[i].level != 1) {
|
||||
permission.push({
|
||||
pid: checkList[i].id,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
let users: any = [];
|
||||
if (this.userSelecteds && this.userSelecteds.length > 0) {
|
||||
this.userSelecteds.forEach(item => {
|
||||
users.push({
|
||||
uid: item.uid,
|
||||
real_name: item.real_name,
|
||||
mobile: item.mobile,
|
||||
email: item.email,
|
||||
sex: item.sex,
|
||||
})
|
||||
})
|
||||
}
|
||||
this.validateForm.patchValue({
|
||||
permission: permission,
|
||||
user: users,
|
||||
})
|
||||
this.isLoadingSave = true;
|
||||
if (this.modifyType == 1) {
|
||||
this.http.post('/sysapi/setting/role/add/', this.validateForm.value).subscribe((json) => {
|
||||
this.isLoadingSave = true;
|
||||
if (json.is_success) {
|
||||
this.message.success(`新增成功!`);
|
||||
this.router.navigate(['app/system/roles'])
|
||||
} else {
|
||||
this.message.error(`新增失败!`);
|
||||
}
|
||||
})
|
||||
} else if (this.modifyType == 2) {
|
||||
this.isLoadingSave = true;
|
||||
this.http.put('/sysapi/setting/role/update/' + this.roleId, this.validateForm.value).subscribe((json) => {
|
||||
if (json.is_success) {
|
||||
this.message.success(`修改成功!`);
|
||||
this.router.navigate(['app/system/roles'])
|
||||
} else {
|
||||
this.message.error(`修改失败!`);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
//根据id查询角色详情
|
||||
queryDetail():void{
|
||||
this.http.get('/sysapi/setting/role/detail/find',{rid:this.roleId}).subscribe((json)=>{
|
||||
if(json.is_success){
|
||||
if(json.body){
|
||||
this.statusParamsDetail=3;
|
||||
//数据回填
|
||||
let item=json.body;
|
||||
this.validateForm.patchValue({
|
||||
role_name:item.role_name,
|
||||
role_type:item.role_type, //0=系统内置(不可删除) ，1=用户定义
|
||||
description:item.description,
|
||||
role_code:item.role_code,
|
||||
status:item.status,
|
||||
})
|
||||
this.permissionChecked=item.permission;
|
||||
this.initTree();
|
||||
}else{
|
||||
this.statusParamsDetail=4;
|
||||
}
|
||||
}else{
|
||||
this.statusParamsDetail=0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
//保存机构负责人
|
||||
userSave(){
|
||||
this.userData.forEach(item=>{
|
||||
if(item.checked&&!item.disabled){
|
||||
// 增加数据
|
||||
this.userSelecteds = [ ...this.userSelecteds, item];
|
||||
}
|
||||
})
|
||||
this.visibleUsers = false;
|
||||
}
|
||||
//处理机构负责人选择和数据回填
|
||||
userSelect(){
|
||||
if(this.userData){
|
||||
this.userData.forEach(item=>{
|
||||
this.userSelecteds.forEach(option=>{
|
||||
if(item.uid==option.uid){
|
||||
item.checked=true;
|
||||
item.disabled=true;
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
//删除机构负责人
|
||||
delectConfirm(item){
|
||||
this.userSelecteds=this.userSelecteds.filter(function(option){
|
||||
return item.uid!==option.uid
|
||||
})
|
||||
}
|
||||
//打开机构负责人抽屉
|
||||
openUsers(){
|
||||
this.visibleUsers = true;
|
||||
this.queryTable();
|
||||
}
|
||||
//关闭机构选择页面
|
||||
closeUser(): void {
|
||||
this.visibleUsers = false;
|
||||
}
|
||||
//翻页
|
||||
pageChange(event){
|
||||
this.search.page_index=event;
|
||||
this.queryTable();
|
||||
}
|
||||
//获取用户列表
|
||||
queryTable():void{
|
||||
this.statusParamsUsers.status=1;
|
||||
this.http.get('/sysapi/setting/user/list',this.search).subscribe((json)=>{
|
||||
if(json.is_success){
|
||||
let data=json.body.list;
|
||||
this.collectionSize=json.body.total;
|
||||
if(json.body.list&&json.body.list.length>0){
|
||||
this.statusParamsUsers.status=3;
|
||||
data.forEach(item=>{
|
||||
if(this.userSelecteds.length>0){
|
||||
this.userSelecteds.forEach(option=>{
|
||||
if(item.uid==option.uid){
|
||||
item.checked=true;
|
||||
item.disabled=true;
|
||||
}
|
||||
})
|
||||
}else{
|
||||
item.checked=false;
|
||||
item.disabled=false;
|
||||
}
|
||||
})
|
||||
}else{
|
||||
this.statusParamsUsers.status=4;
|
||||
}
|
||||
this.userData=data;
|
||||
}else{
|
||||
this.statusParamsUsers.status=0;
|
||||
}
|
||||
})
|
||||
}
|
||||
cancel() {
|
||||
this.location.back()
|
||||
}
|
||||
|
||||
//新树模型参数设置
|
||||
//修改时查询该角色下的所有用户
|
||||
queryUserById(): void {
|
||||
this.http.get('/sysapi/setting/role/users/' + this.roleId).subscribe((json) => {
|
||||
if (json.is_success) {
|
||||
json.body.forEach(item => {
|
||||
item.checked = true;
|
||||
item.disabled = false;
|
||||
this.userSelecteds = [...this.userSelecteds, item];
|
||||
})
|
||||
|
||||
} else {
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
//根据id查询角色详情
|
||||
queryDetail(): void {
|
||||
this.http.get('/sysapi/setting/role/detail/find', { rid: this.roleId }).subscribe((json) => {
|
||||
if (json.is_success) {
|
||||
if (json.body) {
|
||||
this.statusParamsDetail = 3;
|
||||
//数据回填
|
||||
let item = json.body;
|
||||
this.validateForm.patchValue({
|
||||
role_name: item.role_name,
|
||||
role_type: item.role_type, //0=系统内置(不可删除) ，1=用户定义
|
||||
description: item.description,
|
||||
role_code: item.role_code,
|
||||
status: item.status,
|
||||
})
|
||||
this.permissionChecked = item.permission;
|
||||
this.initTree();
|
||||
} else {
|
||||
this.statusParamsDetail = 4;
|
||||
}
|
||||
} else {
|
||||
this.statusParamsDetail = 0;
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
//保存机构负责人
|
||||
userSave() {
|
||||
this.userData.forEach(item => {
|
||||
if (item.checked && !item.disabled) {
|
||||
// 增加数据
|
||||
this.userSelecteds = [...this.userSelecteds, item];
|
||||
}
|
||||
})
|
||||
this.visibleUsers = false;
|
||||
}
|
||||
//处理机构负责人选择和数据回填
|
||||
userSelect() {
|
||||
if (this.userData) {
|
||||
this.userData.forEach(item => {
|
||||
this.userSelecteds.forEach(option => {
|
||||
if (item.uid == option.uid) {
|
||||
item.checked = true;
|
||||
item.disabled = true;
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
//删除机构负责人
|
||||
delectConfirm(item) {
|
||||
this.userSelecteds = this.userSelecteds.filter(function (option) {
|
||||
return item.uid !== option.uid
|
||||
})
|
||||
}
|
||||
//打开机构负责人抽屉
|
||||
openUsers() {
|
||||
this.visibleUsers = true;
|
||||
this.queryTable();
|
||||
}
|
||||
//关闭机构选择页面
|
||||
closeUser(): void {
|
||||
this.visibleUsers = false;
|
||||
}
|
||||
//翻页
|
||||
pageChange(event) {
|
||||
this.search.page_index = event;
|
||||
this.queryTable();
|
||||
}
|
||||
//获取用户列表
|
||||
queryTable(): void {
|
||||
this.statusParamsUsers.status = 1;
|
||||
this.http.get('/sysapi/setting/user/list', this.search).subscribe((json) => {
|
||||
if (json.is_success) {
|
||||
let data = json.body.list;
|
||||
this.collectionSize = json.body.total;
|
||||
if (json.body.list && json.body.list.length > 0) {
|
||||
this.statusParamsUsers.status = 3;
|
||||
data.forEach(item => {
|
||||
if (this.userSelecteds.length > 0) {
|
||||
this.userSelecteds.forEach(option => {
|
||||
if (item.uid == option.uid) {
|
||||
item.checked = true;
|
||||
item.disabled = true;
|
||||
}
|
||||
})
|
||||
} else {
|
||||
item.checked = false;
|
||||
item.disabled = false;
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.statusParamsUsers.status = 4;
|
||||
}
|
||||
this.userData = data;
|
||||
} else {
|
||||
this.statusParamsUsers.status = 0;
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//新树模型参数设置
|
||||
public zNodes: any[];
|
||||
setting = {
|
||||
data: {
|
||||
simpleData: {
|
||||
enable: true
|
||||
simpleData: {
|
||||
enable: true
|
||||
}
|
||||
},
|
||||
view: {
|
||||
showLine: true,
|
||||
showLine: true,
|
||||
dblClickExpand: false,
|
||||
showIcon:true
|
||||
showIcon: true
|
||||
},
|
||||
check:{
|
||||
autoCheckTrigger:true,
|
||||
chkboxType:{"Y":"ps","N":"ps"},
|
||||
enable: true,
|
||||
chkStyle: "checkbox",
|
||||
check: {
|
||||
autoCheckTrigger: true,
|
||||
chkboxType: { "Y": "ps", "N": "ps" },
|
||||
enable: true,
|
||||
chkStyle: "checkbox",
|
||||
},
|
||||
callback: {
|
||||
//节点点击事件
|
||||
onClick: (event, treeId, treeNode, clickFlag) => {
|
||||
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
|
||||
zTree.expandNode(treeNode);
|
||||
this.treeSelected=treeNode;
|
||||
this.parentNode=this.treeSelected.getParentNode();
|
||||
if(!this.parentNode){
|
||||
this.isTreeTop=true;
|
||||
}else{
|
||||
this.isTreeTop=false;
|
||||
}
|
||||
//节点点击事件
|
||||
onClick: (event, treeId, treeNode, clickFlag) => {
|
||||
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
|
||||
zTree.expandNode(treeNode);
|
||||
this.treeSelected = treeNode;
|
||||
this.parentNode = this.treeSelected.getParentNode();
|
||||
if (!this.parentNode) {
|
||||
this.isTreeTop = true;
|
||||
} else {
|
||||
this.isTreeTop = false;
|
||||
}
|
||||
},
|
||||
//节点展开事件
|
||||
onExpand: (event, treeId, treeNode) => {
|
||||
|
||||
}
|
||||
//节点展开事件
|
||||
onExpand: (event, treeId, treeNode) => {
|
||||
|
||||
}
|
||||
},
|
||||
};
|
||||
//新树模型
|
||||
initTree(){
|
||||
this.http.get('/sysapi/setting/permission/menu/list').subscribe(json=>{
|
||||
if(json.is_success){
|
||||
if(json.body&&json.body.length>0){
|
||||
if(this.modifyType==2&&this.permissionChecked.length>0){
|
||||
json.body.forEach(item=>{
|
||||
this.foreachNode(item);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
let treeList=[];
|
||||
treeList.push({ //一层目录
|
||||
name:"全部权限",
|
||||
isParent:true,
|
||||
open:true,
|
||||
id:'',
|
||||
children:json.body
|
||||
});
|
||||
this.zNodes=treeList;
|
||||
$.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
|
||||
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
|
||||
let node = zTree.getNodes();
|
||||
};
|
||||
//新树模型
|
||||
initTree() {
|
||||
this.http.get('/sysapi/setting/permission/menu/list').subscribe(json => {
|
||||
if (json.is_success) {
|
||||
if (json.body && json.body.length > 0) {
|
||||
if (this.modifyType == 2 && this.permissionChecked.length > 0) {
|
||||
json.body.forEach(item => {
|
||||
this.foreachNode(item);
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
let treeList = [];
|
||||
treeList.push({ //一层目录
|
||||
name: "全部权限",
|
||||
isParent: true,
|
||||
open: true,
|
||||
id: '',
|
||||
children: json.body
|
||||
});
|
||||
this.zNodes = treeList;
|
||||
$.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
|
||||
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
|
||||
let node = zTree.getNodes();
|
||||
})
|
||||
}
|
||||
//递归方法处理权限树回填
|
||||
foreachNode(node){
|
||||
this.setNode(node);
|
||||
if(node.children&&node.children.length>0){
|
||||
node.children.forEach(item=>{
|
||||
this.foreachNode(item)
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
//递归方法，处理单个节点
|
||||
setNode(node){
|
||||
this.permissionChecked.forEach(item=>{
|
||||
if(item.pid==node.id){
|
||||
node.checked=true;
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
//递归方法处理权限树回填
|
||||
foreachNode(node) {
|
||||
this.setNode(node);
|
||||
if (node.children && node.children.length > 0) {
|
||||
node.children.forEach(item => {
|
||||
this.foreachNode(item)
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
//递归方法，处理单个节点
|
||||
setNode(node) {
|
||||
this.permissionChecked.forEach(item => {
|
||||
if (item.pid == node.id) {
|
||||
node.checked = true;
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,60 +1,60 @@
|
||||
<div class="system-main-container">
|
||||
<div class="user-manage">
|
||||
<div class="system-main-content card">
|
||||
<div class="search-box">
|
||||
<div nz-row>
|
||||
<div nz-col nzSpan="8">
|
||||
<nz-form-item >
|
||||
<nz-form-label class="left">角色名称</nz-form-label>
|
||||
<nz-form-control nzSpan="17">
|
||||
<input nz-input [(ngModel)]='search.role_name' placeholder="请输入角色名称">
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
<div nz-col nzSpan="8">
|
||||
<nz-form-item >
|
||||
<nz-form-control nzSpan="24">
|
||||
<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>
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-operation-box">
|
||||
<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>
|
||||
<div class="table-box" *ngIf='statusParamsTable.status==3||statusParamsTable.status==4||statusParamsTable.status==0'>
|
||||
<nz-table [nzShowPagination]='false' #dataSet [nzData]="tableData">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>角色名称</th>
|
||||
<th>角色类型</th>
|
||||
<th>创建人</th>
|
||||
<th>创建日期</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let item of dataSet.data">
|
||||
<td>{{item.role_name}}</td>
|
||||
<td><span *ngIf="item.role_type==0">系统内置</span><span *ngIf="item.role_type==1">用户定义</span></td>
|
||||
<td>{{item.create_by}}</td>
|
||||
<td>{{item.create_date| date:'yyyy-MM-dd HH:mm:ss'}}</td>
|
||||
<td>
|
||||
<i (click)="addModify(2,item)" class="table-operation-btn edit" nz-icon type="edit" theme="outline"></i>
|
||||
<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>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</nz-table>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="system-main-container">
|
||||
<div class="user-manage">
|
||||
<div class="system-main-content card">
|
||||
<div class="search-box">
|
||||
<div class="dip mr-4">
|
||||
<nz-form-item>
|
||||
<nz-form-label>角色名称</nz-form-label>
|
||||
<nz-form-control style="display:inline-block">
|
||||
<input nz-input [(ngModel)]='search.role_name' placeholder="请输入角色名称">
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
<div class="dip">
|
||||
<nz-form-item>
|
||||
<nz-form-control>
|
||||
<button class="mr10" nz-button nzType="primary" (click)="queryTable()"><i nz-icon type="search"></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-item>
|
||||
</div>
|
||||
</div>
|
||||
<nz-divider></nz-divider>
|
||||
<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'>
|
||||
<nz-table nzBordered [nzShowPagination]='false' #dataSet [nzData]="tableData">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>角色名称</th>
|
||||
<th>角色类型</th>
|
||||
<th>创建人</th>
|
||||
<th>创建日期</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let item of dataSet.data">
|
||||
<td>{{item.role_name}}</td>
|
||||
<td><span *ngIf="item.role_type==0">系统内置</span><span *ngIf="item.role_type==1">用户定义</span></td>
|
||||
<td>{{item.create_by}}</td>
|
||||
<td>{{item.create_date| date:'yyyy-MM-dd HH:mm:ss'}}</td>
|
||||
<td>
|
||||
<i (click)="addModify(2,item)" class="table-operation-btn edit" nz-icon type="edit"
|
||||
theme="outline"></i>
|
||||
<nz-divider nzType="vertical"></nz-divider>
|
||||
<i nz-popconfirm nzTitle="确定删除该角色?" nzOkText="确定" nzCancelText="取消" (nzOnConfirm)="delectConfirm(item)"
|
||||
class="table-operation-btn danger" nz-icon type="delete" theme="outline"></i>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</nz-table>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -4,14 +4,14 @@
|
||||
.user-manage{
|
||||
.system-main-content{
|
||||
min-height: 500px;
|
||||
}
|
||||
.card{
|
||||
|
||||
}
|
||||
.tree-box{
|
||||
overflow-y:scroll;
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/ .ant-form-item{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.user-detail{
|
||||
|
||||
+137
-110
@@ -1,115 +1,142 @@
|
||||
<div class="system-main-container">
|
||||
<div class="user-modify-box card" id="main-container">
|
||||
<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>
|
||||
<form nz-form [formGroup]="validateForm" *ngIf="statusParamsDetail.status==3">
|
||||
<nz-form-item>
|
||||
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="real_name" nzRequired>姓名</nz-form-label>
|
||||
<nz-form-control [nzSm]="14" [nzXs]="24">
|
||||
<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-control>
|
||||
</nz-form-item>
|
||||
<nz-form-item>
|
||||
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="login_name" nzRequired>系统账号</nz-form-label>
|
||||
<nz-form-control [nzSm]="14" [nzXs]="24" [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="!nameOnly" class="red">本账号已存在</nz-form-explain>
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
<nz-form-item>
|
||||
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="password" nzRequired>系统密码</nz-form-label>
|
||||
<nz-form-control [nzSm]="14" [nzXs]="24">
|
||||
<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-control>
|
||||
</nz-form-item>
|
||||
<nz-form-item>
|
||||
<nz-form-label [nzSm]="4" [nzXs]="24" nzRequired>所属机构</nz-form-label>
|
||||
<nz-form-control [nzSm]="14" [nzXs]="24">
|
||||
<span *ngIf="orgDetail">
|
||||
<nz-tag nzMode="closeable" (nzOnClose)="tagClose($event)" >{{orgDetail.organization}}</nz-tag>
|
||||
</span>
|
||||
<a href="javascript:;" (click)="open()"><span *ngIf="orgDetail">修改</span><span *ngIf="!orgDetail">选择</span></a>
|
||||
<nz-form-explain *ngIf="!orgDetail&&saveCheck" class="red">请选择所属机构</nz-form-explain>
|
||||
</nz-form-control>
|
||||
</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>
|
||||
<nz-select formControlName="role" *ngIf="statusParamsRole.status==3" nzMode="multiple" nzPlaceHolder="请选择所属角色" [(ngModel)]="roleList">
|
||||
<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-label [nzSm]="4" [nzXs]="24" nzFor="remark">描述</nz-form-label>
|
||||
<nz-form-control [nzSm]="14" [nzXs]="24">
|
||||
<textarea rows="3" id="remark" nz-input formControlName="remark" placeholder="请输入描述信息" ></textarea>
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
<nz-form-item>
|
||||
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="identify_num">身份证号</nz-form-label>
|
||||
<nz-form-control [nzSm]="14" [nzXs]="24">
|
||||
<input nz-input id="identify_num" formControlName="identify_num" placeholder="请输入身份证号">
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
<nz-form-item>
|
||||
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="email">邮箱</nz-form-label>
|
||||
<nz-form-control [nzSm]="14" [nzXs]="24">
|
||||
<input nz-input id="email" formControlName="email" placeholder="请输入邮箱地址">
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
<nz-form-item>
|
||||
<nz-form-label [nzSm]="4" [nzXs]="24" nzFor="mobile">电话</nz-form-label>
|
||||
<nz-form-control [nzSm]="14" [nzXs]="24">
|
||||
<input nz-input id="mobile" formControlName="mobile" placeholder="请输入电话号码">
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
<nz-form-item>
|
||||
<nz-form-label [nzSm]="4" [nzXs]="24" >性别</nz-form-label>
|
||||
<nz-form-control [nzSm]="14" [nzXs]="24">
|
||||
<nz-radio-group formControlName="sex">
|
||||
<label nz-radio nzValue="m">男</label>
|
||||
<label nz-radio nzValue="f">女</label>
|
||||
</nz-radio-group>
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
<nz-form-item *ngIf='modifyType==2'>
|
||||
<nz-form-label [nzSm]="4" [nzXs]="24" >状态</nz-form-label>
|
||||
<nz-form-control [nzSm]="14" [nzXs]="24">
|
||||
<nz-radio-group formControlName="status">
|
||||
<label nz-radio nzValue="1">已激活</label>
|
||||
<label nz-radio nzValue="0">未激活</label>
|
||||
</nz-radio-group>
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
</form>
|
||||
<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)='cancel()' nz-button nzType="default">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-modify-box card" id="main-container">
|
||||
<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> -->
|
||||
<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-label nzSpan="7" nzFor="real_name" nzRequired>姓名</nz-form-label>
|
||||
<nz-form-control nzSpan="12">
|
||||
<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-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" nzRequired>所属角色</nz-form-label>
|
||||
<nz-form-control nzSpan="12">
|
||||
<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="!nameOnly" 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="password" nzRequired>系统密码</nz-form-label>
|
||||
<nz-form-control nzSpan="12">
|
||||
<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-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" nzRequired>所属机构</nz-form-label>
|
||||
<nz-form-control nzSpan="12">
|
||||
<span *ngIf="orgDetail">
|
||||
<nz-tag nzMode="closeable" (nzOnClose)="tagClose($event)">{{orgDetail.organization}}</nz-tag>
|
||||
</span>
|
||||
<a href="javascript:;" (click)="open()"><span *ngIf="orgDetail">修改</span><span *ngIf="!orgDetail">选择</span></a>
|
||||
<nz-form-explain *ngIf="!orgDetail&&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="remark">描述</nz-form-label>
|
||||
<nz-form-control nzSpan="12">
|
||||
<textarea rows="3" id="remark" nz-input formControlName="remark" 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="identify_num">身份证号</nz-form-label>
|
||||
<nz-form-control nzSpan="12">
|
||||
<input nz-input id="identify_num" formControlName="identify_num" placeholder="请输入身份证号">
|
||||
</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="email">邮箱</nz-form-label>
|
||||
<nz-form-control nzSpan="12">
|
||||
<input nz-input id="email" formControlName="email" placeholder="请输入邮箱地址">
|
||||
</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="mobile">电话</nz-form-label>
|
||||
<nz-form-control nzSpan="12">
|
||||
<input nz-input id="mobile" formControlName="mobile" placeholder="请输入电话号码">
|
||||
</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">
|
||||
<nz-radio-group formControlName="sex">
|
||||
<label nz-radio nzValue="m">男</label>
|
||||
<label nz-radio nzValue="f">女</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 *ngIf='modifyType==2'>
|
||||
<nz-form-label nzSpan="7">状态</nz-form-label>
|
||||
<nz-form-control nzSpan="12">
|
||||
<nz-radio-group formControlName="status">
|
||||
<label nz-radio nzValue="1">已激活</label>
|
||||
<label nz-radio nzValue="0">未激活</label>
|
||||
</nz-radio-group>
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
</form>
|
||||
<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)='cancel()' nz-button nzType="default">取消</button>
|
||||
</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()">
|
||||
<app-request-status [statusParams]='statusParamsTree'></app-request-status>
|
||||
<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="treeDemo" class="ztree"></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>
|
||||
<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>
|
||||
<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="treeDemo" class="ztree"></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>
|
||||
+9
-10
@@ -2,23 +2,22 @@
|
||||
overflow-y:auto;
|
||||
}
|
||||
.user-modify-box{
|
||||
position: relative;
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
margin-bottom: 0 !important;
|
||||
.user-footer{
|
||||
text-align: center;
|
||||
margin-top: -20px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.ztree{
|
||||
padding-bottom: 40px;
|
||||
padding-right: 16px;
|
||||
border: 1px solid #ddd;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
padding: 16px;
|
||||
}
|
||||
.drawer-footer{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
bottom: 20px;
|
||||
transform: translate(-50%)
|
||||
text-align: right;
|
||||
}
|
||||
.relative{
|
||||
position: relative;
|
||||
|
||||
+333
-331
@@ -1,348 +1,350 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormBuilder,FormControl,FormGroup,Validators} from '@angular/forms';
|
||||
import { Location } from '@angular/common';
|
||||
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
|
||||
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 { Observable } from 'rxjs';
|
||||
|
||||
import 'ztree';
|
||||
declare var $: any;
|
||||
declare var jQuery: any;
|
||||
|
||||
@Component({
|
||||
selector: 'app-user-management-modify',
|
||||
templateUrl: './user-management-modify.component.html',
|
||||
styleUrls: ['./user-management-modify.component.scss','../../../main.scss']
|
||||
selector: 'app-user-management-modify',
|
||||
templateUrl: './user-management-modify.component.html',
|
||||
styleUrls: ['./user-management-modify.component.scss', '../../../main.scss']
|
||||
})
|
||||
export class UserManagementModifyComponent implements OnInit {
|
||||
validateForm: FormGroup;
|
||||
statusParamsTree:any={ //获取机构接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据
|
||||
status:1,
|
||||
}
|
||||
statusParamsRole:any={ //获取机构接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据
|
||||
status:1,
|
||||
}
|
||||
visible = false; //控制抽屉显示
|
||||
treeSelected:any;
|
||||
orgDetail:any=''; //所选机构详情
|
||||
orgList:any=[]; //机构列表
|
||||
orgSeletedBtn:any=true; //控制机构选择按钮
|
||||
nodeList:any=[];
|
||||
saveCheck:any=false; //保存检查，保存验证表单 false 还未验证 true 触发了验证
|
||||
roleList:any=[]; //保存所选角色
|
||||
listOfRole:any=[]; //角色列表
|
||||
nameOnly:any=true; //系统账号是否唯一 true唯一 false重复
|
||||
oldLoginName:any=''; //修改时，保存原本的系统账号，用于检测唯一性
|
||||
checkNameStatus:any=''; //检测账号唯一性的图标状态
|
||||
modifyType:any=1; //当前页面操作类型 1 新增用户 2 编辑用户
|
||||
userId:any=''; //用户ID 修改的用户ID
|
||||
userDetail:any={}; //用户详情
|
||||
statusParamsDetail:any={ //获取用户详情接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据
|
||||
status:1,
|
||||
}
|
||||
isLoadingSave:any=false;
|
||||
constructor(
|
||||
private fb: FormBuilder,
|
||||
private http:HttpClientService,
|
||||
private route:ActivatedRoute,
|
||||
private router:Router,
|
||||
private message: NzMessageService,
|
||||
) { }
|
||||
validateForm: FormGroup;
|
||||
statusParamsTree: any = { //获取机构接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据
|
||||
status: 1,
|
||||
}
|
||||
statusParamsRole: any = { //获取机构接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据
|
||||
status: 1,
|
||||
}
|
||||
visible = false; //控制抽屉显示
|
||||
treeSelected: any;
|
||||
orgDetail: any = ''; //所选机构详情
|
||||
orgList: any = []; //机构列表
|
||||
orgSeletedBtn: any = true; //控制机构选择按钮
|
||||
nodeList: any = [];
|
||||
saveCheck: any = false; //保存检查，保存验证表单 false 还未验证 true 触发了验证
|
||||
roleList: any = []; //保存所选角色
|
||||
listOfRole: any = []; //角色列表
|
||||
nameOnly: any = true; //系统账号是否唯一 true唯一 false重复
|
||||
oldLoginName: any = ''; //修改时，保存原本的系统账号，用于检测唯一性
|
||||
checkNameStatus: any = ''; //检测账号唯一性的图标状态
|
||||
modifyType: any = 1; //当前页面操作类型 1 新增用户 2 编辑用户
|
||||
userId: any = ''; //用户ID 修改的用户ID
|
||||
userDetail: any = {}; //用户详情
|
||||
statusParamsDetail: any = { //获取用户详情接口的状态，0请求失败 1请求前 2请求中 3请求成功，有数据 4请求成功，无数据
|
||||
status: 1,
|
||||
}
|
||||
isLoadingSave: any = false;
|
||||
constructor(
|
||||
private fb: FormBuilder,
|
||||
private http: HttpClientService,
|
||||
private route: ActivatedRoute,
|
||||
private router: Router,
|
||||
private location: Location,
|
||||
private message: NzMessageService,
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
// // 页面监听 动态改变表单高度
|
||||
// $('#main-container').height('height',(document.documentElement.clientHeight-106+'px'));
|
||||
this.queryRole();
|
||||
this.validateForm = this.fb.group({
|
||||
real_name:[ '', [ Validators.required ] ],
|
||||
login_name:[ '', [ Validators.required ] ],
|
||||
password:[ '', [ Validators.required ] ],
|
||||
identify_num:[ ''],
|
||||
email:[ ''],
|
||||
mobile:[ ''],
|
||||
sex:['m'],
|
||||
status:['1'],
|
||||
role:[''],
|
||||
remark: ['']
|
||||
});
|
||||
//取路由参数
|
||||
this.route.queryParams.subscribe(routeParams=>{
|
||||
this.modifyType=routeParams.operateType;
|
||||
//routeParams 1新增 2修改
|
||||
if(routeParams.operateType==2){
|
||||
this.userId=routeParams.id;
|
||||
this.queryUserDetail();
|
||||
}else{
|
||||
this.statusParamsDetail.status=3;
|
||||
}
|
||||
})
|
||||
}
|
||||
//获取用户详情
|
||||
queryUserDetail(){
|
||||
this.http.get('/sysapi/setting/user/detail/list', { uid:this.userId }).subscribe((json)=>{
|
||||
if(json.is_success){
|
||||
if(json.body){
|
||||
this.statusParamsDetail.status=3;
|
||||
this.userDetail=json.body;
|
||||
let detail=json.body;
|
||||
this.validateForm.setValue({
|
||||
real_name:detail.real_name,
|
||||
login_name:detail.login_name,
|
||||
password:detail.password,
|
||||
identify_num:detail.identify_num,
|
||||
email:detail.email,
|
||||
mobile:detail.mobile,
|
||||
sex:detail.sex,
|
||||
status:detail.status,
|
||||
role:'',
|
||||
remark:detail.remark,
|
||||
})
|
||||
this.oldLoginName=detail.login_name;
|
||||
if(detail.orgList&&detail.orgList.length>0){
|
||||
this.orgDetail=detail.orgList[0];
|
||||
}
|
||||
if(detail.roleList&&detail.roleList.length>0){
|
||||
detail.roleList.forEach(item=>{
|
||||
this.roleList.push(item.rid)
|
||||
})
|
||||
}
|
||||
}else{
|
||||
this.statusParamsDetail.status=4;
|
||||
}
|
||||
}else{
|
||||
this.statusParamsDetail.status=0;
|
||||
}
|
||||
})
|
||||
}
|
||||
//检验系统账号的唯一性
|
||||
checkName(){
|
||||
if(this.modifyType==2&&this.validateForm.value.login_name.trim()==this.oldLoginName){
|
||||
this.nameOnly = true;
|
||||
this.checkNameStatus='success';
|
||||
return false;
|
||||
}
|
||||
this.checkNameStatus='validating';
|
||||
this.http.get('/sysapi/setting/user/isOnly', { loginName: this.validateForm.value.login_name.trim() }).subscribe((json) => {
|
||||
if (json.is_success) {
|
||||
if(json.body){
|
||||
this.checkNameStatus='success';
|
||||
this.nameOnly = true;
|
||||
}else{
|
||||
this.checkNameStatus='error';
|
||||
this.nameOnly = false;
|
||||
}
|
||||
} else {
|
||||
this.message.error(`账号验证接口错误`)
|
||||
}
|
||||
ngOnInit() {
|
||||
// // 页面监听 动态改变表单高度
|
||||
// $('#main-container').height('height',(document.documentElement.clientHeight-106+'px'));
|
||||
this.queryRole();
|
||||
this.validateForm = this.fb.group({
|
||||
real_name: ['', [Validators.required]],
|
||||
login_name: ['', [Validators.required]],
|
||||
password: ['', [Validators.required]],
|
||||
identify_num: [''],
|
||||
email: [''],
|
||||
mobile: [''],
|
||||
sex: ['m'],
|
||||
status: ['1'],
|
||||
roleList: [''],
|
||||
remark: ['']
|
||||
});
|
||||
//取路由参数
|
||||
this.route.queryParams.subscribe(routeParams => {
|
||||
this.modifyType = routeParams.operateType;
|
||||
//routeParams 1新增 2修改
|
||||
if (routeParams.operateType == 2) {
|
||||
this.userId = routeParams.id;
|
||||
this.queryUserDetail();
|
||||
} else {
|
||||
this.statusParamsDetail.status = 3;
|
||||
}
|
||||
})
|
||||
}
|
||||
//获取用户详情
|
||||
queryUserDetail() {
|
||||
this.http.get('/sysapi/setting/user/detail/list', { uid: this.userId }).subscribe((json) => {
|
||||
if (json.is_success) {
|
||||
if (json.body) {
|
||||
this.statusParamsDetail.status = 3;
|
||||
this.userDetail = json.body;
|
||||
let detail = json.body;
|
||||
this.validateForm.patchValue({
|
||||
real_name: detail.real_name,
|
||||
login_name: detail.login_name,
|
||||
password: detail.password,
|
||||
identify_num: detail.identify_num,
|
||||
email: detail.email,
|
||||
mobile: detail.mobile,
|
||||
sex: detail.sex,
|
||||
status: detail.status,
|
||||
remark: detail.remark,
|
||||
})
|
||||
this.oldLoginName = detail.login_name;
|
||||
if (detail.orgList && detail.orgList.length > 0) {
|
||||
this.orgDetail = detail.orgList[0];
|
||||
}
|
||||
if (detail.roleList && detail.roleList.length > 0) {
|
||||
detail.roleList.forEach(item => {
|
||||
this.roleList.push(item.rid)
|
||||
})
|
||||
this.validateForm.patchValue({
|
||||
roleList: this.roleList,
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.statusParamsDetail.status = 4;
|
||||
}
|
||||
} else {
|
||||
this.statusParamsDetail.status = 0;
|
||||
}
|
||||
})
|
||||
}
|
||||
//检验系统账号的唯一性
|
||||
checkName() {
|
||||
if (this.modifyType == 2 && this.validateForm.value.login_name.trim() == this.oldLoginName) {
|
||||
this.nameOnly = true;
|
||||
this.checkNameStatus = 'success';
|
||||
return false;
|
||||
}
|
||||
this.checkNameStatus = 'validating';
|
||||
this.http.get('/sysapi/setting/user/isOnly', { loginName: this.validateForm.value.login_name.trim() }).subscribe((json) => {
|
||||
if (json.is_success) {
|
||||
if (json.body) {
|
||||
this.checkNameStatus = 'success';
|
||||
this.nameOnly = true;
|
||||
} else {
|
||||
this.checkNameStatus = 'error';
|
||||
this.nameOnly = false;
|
||||
}
|
||||
} else {
|
||||
this.message.error(`账号验证接口错误`)
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
//机构树，搜索功能
|
||||
searchNode() {
|
||||
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
|
||||
zTree.cancelSelectedNode()
|
||||
var key = $("#key");
|
||||
var value = $.trim(key.get(0).value);
|
||||
var keyType = "name";
|
||||
this.nodeList = zTree.getNodesByParamFuzzy(keyType, value);
|
||||
if (value) {
|
||||
for (var i = this.nodeList.length - 1; i >= 0; i--) {
|
||||
zTree.selectNode(this.nodeList[i], true, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
//删除机构标签
|
||||
tagClose(event){
|
||||
this.orgSeletedBtn=true;
|
||||
this.orgDetail='';
|
||||
}
|
||||
//保存选择机构
|
||||
treeSave(){
|
||||
if(this.treeSelected){
|
||||
this.orgDetail=this.treeSelected;
|
||||
this.visible = false;
|
||||
this.orgSeletedBtn=false;
|
||||
}else{
|
||||
//如果没有选择机构,提示请选择机构
|
||||
this.message.create('warning', `请选择所属机构！`,{ nzDuration: 2000 });
|
||||
}
|
||||
}
|
||||
//打开机构树抽屉
|
||||
open(): void {
|
||||
this.treeSelected='';
|
||||
this.statusParamsTree.status=1;
|
||||
this.visible = true;
|
||||
this.initTree();
|
||||
})
|
||||
}
|
||||
//机构树，搜索功能
|
||||
searchNode() {
|
||||
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
|
||||
zTree.cancelSelectedNode()
|
||||
var key = $("#key");
|
||||
var value = $.trim(key.get(0).value);
|
||||
var keyType = "name";
|
||||
this.nodeList = zTree.getNodesByParamFuzzy(keyType, value);
|
||||
if (value) {
|
||||
for (var i = this.nodeList.length - 1; i >= 0; i--) {
|
||||
zTree.selectNode(this.nodeList[i], true, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
//删除机构标签
|
||||
tagClose(event) {
|
||||
this.orgSeletedBtn = true;
|
||||
this.orgDetail = '';
|
||||
}
|
||||
//保存选择机构
|
||||
treeSave() {
|
||||
if (this.treeSelected) {
|
||||
this.orgDetail = this.treeSelected;
|
||||
this.visible = false;
|
||||
this.orgSeletedBtn = false;
|
||||
} else {
|
||||
//如果没有选择机构,提示请选择机构
|
||||
this.message.create('warning', `请选择所属机构！`, { nzDuration: 2000 });
|
||||
}
|
||||
}
|
||||
//打开机构树抽屉
|
||||
open(): void {
|
||||
this.treeSelected = '';
|
||||
this.statusParamsTree.status = 1;
|
||||
this.visible = true;
|
||||
this.initTree();
|
||||
|
||||
}
|
||||
//关闭机构选择页面
|
||||
close(): void {
|
||||
this.visible = false;
|
||||
}
|
||||
submitForm(){
|
||||
this.saveCheck=true;
|
||||
for (const i in this.validateForm.controls) {
|
||||
this.validateForm.controls[ i ].markAsDirty();
|
||||
this.validateForm.controls[ i ].updateValueAndValidity();
|
||||
}
|
||||
if(this.validateForm.valid&&this.orgDetail&&this.roleList.length>0&&this.nameOnly){
|
||||
//再次检验账号唯一性，避免用户填完账号直接点击提交，无法利用blur事件验证。
|
||||
if(this.modifyType==2&&this.validateForm.value.login_name.trim()==this.oldLoginName){
|
||||
this.nameOnly = true;
|
||||
this.checkNameStatus='success';
|
||||
this.submitConfirm(2);
|
||||
return false;
|
||||
}
|
||||
this.checkNameStatus='validating';
|
||||
//再次验证用户名唯一性
|
||||
this.http.get('/sysapi/setting/user/isOnly', { loginName: this.validateForm.value.login_name.trim() }).subscribe((json) => {
|
||||
if (json.is_success) {
|
||||
if(json.body){
|
||||
this.checkNameStatus='success';
|
||||
this.nameOnly = true;
|
||||
//表单处理
|
||||
this.submitConfirm(this.modifyType);
|
||||
}else{
|
||||
this.checkNameStatus='error';
|
||||
this.nameOnly = false;
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
this.message.error(`账号验证接口错误`)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
//确认提交表单 type 1 新增 2修改
|
||||
submitConfirm(type){
|
||||
let item=this.validateForm.value;
|
||||
let params={
|
||||
real_name: item.real_name,
|
||||
login_name: item.login_name,
|
||||
password: item.password,
|
||||
mobile: item.mobile,
|
||||
sex: item.sex,
|
||||
identify_num: item.identify_num,
|
||||
email: item.email,
|
||||
status: item.status,
|
||||
remark: item.remark,
|
||||
orgList: [],
|
||||
roleList: [],
|
||||
};
|
||||
this.roleList.forEach(option=>{
|
||||
params.roleList.push({
|
||||
rid:option
|
||||
})
|
||||
})
|
||||
this.orgList.forEach(option=>{
|
||||
if(option.id==this.orgDetail.id){
|
||||
params.orgList.push(option)
|
||||
}
|
||||
})
|
||||
this.isLoadingSave=true;
|
||||
if(type==1){
|
||||
this.http.post('/sysapi/setting/user/add', params).subscribe((json) => {
|
||||
this.isLoadingSave=false;
|
||||
if (json.is_success) {
|
||||
this.message.success(`新增成功`);
|
||||
this.router.navigate(['app/system/users'])
|
||||
} else {
|
||||
this.message.error(`新增失败`)
|
||||
}
|
||||
})
|
||||
}else if(type==2){
|
||||
this.http.put('/sysapi/setting/user/updateById/'+this.userId, params).subscribe((json) => {
|
||||
this.isLoadingSave=false;
|
||||
if (json.is_success) {
|
||||
this.message.success(`修改成功`);
|
||||
this.router.navigate(['app/system/users'])
|
||||
} else {
|
||||
this.message.error(`修改失败`)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
//取消 返回列表页
|
||||
cancel(){
|
||||
this.router.navigate(['app/system/users'])
|
||||
}
|
||||
//获取角色列表
|
||||
queryRole(): void {
|
||||
this.statusParamsRole.status=1;
|
||||
this.http.get('/sysapi/setting/role/list', {page_index: '1',page_size: '100',}).subscribe((json) => {
|
||||
if (json.is_success) {
|
||||
this.listOfRole = json.body.list;
|
||||
if(json.body.list&&json.body.list.length>0){
|
||||
this.statusParamsRole.status=3;
|
||||
}else{
|
||||
this.statusParamsRole.status=4;
|
||||
}
|
||||
} else {
|
||||
this.statusParamsRole.status=0;
|
||||
}
|
||||
})
|
||||
}
|
||||
//树模型参数设置
|
||||
public zNodes: any[];
|
||||
setting = {
|
||||
data: {
|
||||
simpleData: {
|
||||
enable: true
|
||||
}
|
||||
},
|
||||
view: {
|
||||
showLine: true,
|
||||
dblClickExpand: false,
|
||||
showIcon:true
|
||||
},
|
||||
callback: {
|
||||
//节点点击事件
|
||||
onClick: (event, treeId, treeNode, clickFlag) => {
|
||||
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
|
||||
this.treeSelected=treeNode;
|
||||
},
|
||||
},
|
||||
};
|
||||
//获取机构列表，树模型数据处理
|
||||
initTree(){
|
||||
//获取目录列表
|
||||
this.statusParamsTree.status=1;
|
||||
this.http.get("/sysapi/setting/organization/list",).subscribe(json=>{
|
||||
if(json.is_success){
|
||||
if(json.body.length>0){
|
||||
this.orgList=json.body;
|
||||
this.statusParamsTree.status=3;
|
||||
let children=[];
|
||||
for(var i=0;i<json.body.length;i++){
|
||||
let option=json.body[i];
|
||||
option.name=option.organization;
|
||||
if(option.pid){
|
||||
option.pId=option.pid;
|
||||
}else{
|
||||
option.pId='hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc';
|
||||
}
|
||||
}
|
||||
json.body.push({
|
||||
name:"全部机构",
|
||||
isParent:true,
|
||||
open:true,
|
||||
id:'hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc',
|
||||
})
|
||||
}else{
|
||||
//数据为空
|
||||
this.statusParamsTree.status=4;
|
||||
}
|
||||
}else{
|
||||
//请求失败
|
||||
this.statusParamsTree.status=0;
|
||||
}
|
||||
this.zNodes=json.body;
|
||||
$.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
|
||||
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
|
||||
let node = zTree.getNodes();
|
||||
})
|
||||
}
|
||||
//关闭机构选择页面
|
||||
close(): void {
|
||||
this.visible = false;
|
||||
}
|
||||
submitForm() {
|
||||
this.saveCheck = true;
|
||||
for (const i in this.validateForm.controls) {
|
||||
this.validateForm.controls[i].markAsDirty();
|
||||
this.validateForm.controls[i].updateValueAndValidity();
|
||||
}
|
||||
if (this.validateForm.valid && this.orgDetail && this.validateForm.get('roleList').value.length > 0 && this.nameOnly) {
|
||||
//再次检验账号唯一性，避免用户填完账号直接点击提交，无法利用blur事件验证。
|
||||
if (this.modifyType == 2 && this.validateForm.value.login_name.trim() == this.oldLoginName) {
|
||||
this.nameOnly = true;
|
||||
this.checkNameStatus = 'success';
|
||||
this.submitConfirm(2);
|
||||
return false;
|
||||
}
|
||||
this.checkNameStatus = 'validating';
|
||||
//再次验证用户名唯一性
|
||||
this.http.get('/sysapi/setting/user/isOnly', { loginName: this.validateForm.value.login_name.trim() }).subscribe((json) => {
|
||||
if (json.is_success) {
|
||||
if (json.body) {
|
||||
this.checkNameStatus = 'success';
|
||||
this.nameOnly = true;
|
||||
//表单处理
|
||||
this.submitConfirm(this.modifyType);
|
||||
} else {
|
||||
this.checkNameStatus = 'error';
|
||||
this.nameOnly = false;
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
this.message.error(`账号验证接口错误`)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
//确认提交表单 type 1 新增 2修改
|
||||
submitConfirm(type) {
|
||||
let item = this.validateForm.value;
|
||||
let params = {
|
||||
real_name: item.real_name,
|
||||
login_name: item.login_name,
|
||||
password: item.password,
|
||||
mobile: item.mobile,
|
||||
sex: item.sex,
|
||||
identify_num: item.identify_num,
|
||||
email: item.email,
|
||||
status: item.status,
|
||||
remark: item.remark,
|
||||
orgList: [],
|
||||
roleList: [],
|
||||
};
|
||||
this.validateForm.get('roleList').value.forEach(option => {
|
||||
params.roleList.push({
|
||||
rid: option
|
||||
})
|
||||
})
|
||||
this.orgList.forEach(option => {
|
||||
if (option.id == this.orgDetail.id) {
|
||||
params.orgList.push(option)
|
||||
}
|
||||
})
|
||||
this.isLoadingSave = true;
|
||||
if (type == 1) {
|
||||
this.http.post('/sysapi/setting/user/add', params).subscribe((json) => {
|
||||
this.isLoadingSave = false;
|
||||
if (json.is_success) {
|
||||
this.message.success(`新增成功`);
|
||||
this.router.navigate(['app/system/users'])
|
||||
} else {
|
||||
this.message.error(`新增失败`)
|
||||
}
|
||||
})
|
||||
} else if (type == 2) {
|
||||
this.http.put('/sysapi/setting/user/updateById/' + this.userId, params).subscribe((json) => {
|
||||
this.isLoadingSave = false;
|
||||
if (json.is_success) {
|
||||
this.message.success(`修改成功`);
|
||||
this.router.navigate(['app/system/users'])
|
||||
} else {
|
||||
this.message.error(`修改失败`)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
//取消 返回列表页
|
||||
cancel() {
|
||||
this.location.back();
|
||||
}
|
||||
//获取角色列表
|
||||
queryRole(): void {
|
||||
this.statusParamsRole.status = 1;
|
||||
this.http.get('/sysapi/setting/role/list', { page_index: '1', page_size: '100', }).subscribe((json) => {
|
||||
if (json.is_success) {
|
||||
this.listOfRole = json.body.list;
|
||||
if (json.body.list && json.body.list.length > 0) {
|
||||
this.statusParamsRole.status = 3;
|
||||
} else {
|
||||
this.statusParamsRole.status = 4;
|
||||
}
|
||||
} else {
|
||||
this.statusParamsRole.status = 0;
|
||||
}
|
||||
})
|
||||
}
|
||||
//树模型参数设置
|
||||
public zNodes: any[];
|
||||
setting = {
|
||||
data: {
|
||||
simpleData: {
|
||||
enable: true
|
||||
}
|
||||
},
|
||||
view: {
|
||||
showLine: true,
|
||||
dblClickExpand: false,
|
||||
showIcon: true
|
||||
},
|
||||
callback: {
|
||||
//节点点击事件
|
||||
onClick: (event, treeId, treeNode, clickFlag) => {
|
||||
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
|
||||
this.treeSelected = treeNode;
|
||||
},
|
||||
},
|
||||
};
|
||||
//获取机构列表，树模型数据处理
|
||||
initTree() {
|
||||
//获取目录列表
|
||||
this.statusParamsTree.status = 1;
|
||||
this.http.get("/sysapi/setting/organization/list").subscribe(json => {
|
||||
if (json.is_success) {
|
||||
if (json.body.length > 0) {
|
||||
this.orgList = json.body;
|
||||
this.statusParamsTree.status = 3;
|
||||
let children = [];
|
||||
for (var i = 0; i < json.body.length; i++) {
|
||||
let option = json.body[i];
|
||||
option.name = option.organization;
|
||||
if (option.pid) {
|
||||
option.pId = option.pid;
|
||||
} else {
|
||||
option.pId = 'hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc';
|
||||
}
|
||||
}
|
||||
json.body.push({
|
||||
name: "全部机构",
|
||||
isParent: true,
|
||||
open: true,
|
||||
id: 'hsfuhiw34239j89sauf98992h3indshv98h392hf9mplsd032fs2a2313fc',
|
||||
})
|
||||
} else {
|
||||
//数据为空
|
||||
this.statusParamsTree.status = 4;
|
||||
}
|
||||
} else {
|
||||
//请求失败
|
||||
this.statusParamsTree.status = 0;
|
||||
}
|
||||
this.zNodes = json.body;
|
||||
$.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
|
||||
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
|
||||
let node = zTree.getNodes();
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -1,171 +1,173 @@
|
||||
<div class="system-main-container">
|
||||
<div class="user-manage">
|
||||
<div class="tree-box" id="tree-box">
|
||||
<app-request-status [statusParams]='statusParamsTree'></app-request-status>
|
||||
<ul [hidden]='statusParamsTree.status!=3' id="treeDemo" class="ztree"></ul>
|
||||
</div>
|
||||
<div class="system-main-content card" id="main-box">
|
||||
<div class="search-box">
|
||||
<div nz-row>
|
||||
<div nz-col nzSpan="8">
|
||||
<nz-form-item >
|
||||
<nz-form-label class="left">姓名</nz-form-label>
|
||||
<nz-form-control nzSpan="17">
|
||||
<input nz-input [(ngModel)]='search.real_name' placeholder="请输入姓名">
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
<div nz-col nzSpan="8">
|
||||
<nz-form-item >
|
||||
<nz-form-label nzSpan="8">用户名</nz-form-label>
|
||||
<nz-form-control nzSpan="15">
|
||||
<input nz-input [(ngModel)]='search.login_name' placeholder="请输入用户名">
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
<div nz-col nzSpan="8">
|
||||
<nz-form-item >
|
||||
<nz-form-control nzSpan="24">
|
||||
<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>
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-operation-box">
|
||||
<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>
|
||||
<div class="table-box" *ngIf='statusParamsTable.status==3||statusParamsTable.status==4||statusParamsTable.status==0'>
|
||||
<nz-table [nzShowPagination]='false' #dataSet [nzData]="tableData">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>姓名</th>
|
||||
<th>用户名</th>
|
||||
<th>电话</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let item of dataSet.data">
|
||||
<td><a (click)='open(item)' href="javascript:;">{{item.real_name}}</a></td>
|
||||
<td>{{item.login_name}}</td>
|
||||
<td>{{item.mobile}}</td>
|
||||
<td>
|
||||
<i (click)="addModify(2,item)" class="table-operation-btn edit" nz-icon type="edit" theme="outline"></i>
|
||||
<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>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</nz-table>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="system-main-container">
|
||||
<div class="user-manage">
|
||||
<div class="tree-box" id="tree-box">
|
||||
<app-request-status [statusParams]='statusParamsTree'></app-request-status>
|
||||
<ul [hidden]='statusParamsTree.status!=3' id="treeDemo" class="ztree"></ul>
|
||||
</div>
|
||||
<!-- <div nz-col nzSpan="1"></div> -->
|
||||
<div class="system-main-content card" id="main-box">
|
||||
<div class="search-box">
|
||||
<div class="dip mr-4">
|
||||
<nz-form-item>
|
||||
<nz-form-label class="mr-2" style="vertical-align:top">姓名</nz-form-label>
|
||||
<nz-form-control style="display:inline-block">
|
||||
<input nz-input [(ngModel)]='search.real_name' placeholder="请输入姓名">
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
<div class="dip mr-4">
|
||||
<nz-form-item>
|
||||
<nz-form-label class="mr-2" style="vertical-align:top">用户名</nz-form-label>
|
||||
<nz-form-control style="display:inline-block">
|
||||
<input nz-input [(ngModel)]='search.login_name' placeholder="请输入用户名">
|
||||
</nz-form-control>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
<div class="dip">
|
||||
<nz-form-item>
|
||||
<nz-form-control>
|
||||
<button class="mr10" nz-button nzType="primary" (click)="queryTable()"><i nz-icon type="search"></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-item>
|
||||
</div>
|
||||
</div>
|
||||
<nz-divider></nz-divider>
|
||||
<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'>
|
||||
<nz-table nzBordered [nzShowPagination]='false' #dataSet [nzData]="tableData">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>姓名</th>
|
||||
<th>用户名</th>
|
||||
<th>电话</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let item of dataSet.data">
|
||||
<td><a (click)='open(item)' href="javascript:;">{{item.real_name}}</a></td>
|
||||
<td>{{item.login_name}}</td>
|
||||
<td>{{item.mobile}}</td>
|
||||
<td>
|
||||
<i (click)="addModify(2,item)" class="table-operation-btn edit" nz-icon type="edit"
|
||||
theme="outline"></i>
|
||||
<nz-divider nzType="vertical"></nz-divider>
|
||||
<i nz-popconfirm nzTitle="确定删除该用户?" nzOkText="确定" nzCancelText="取消" (nzOnConfirm)="delectConfirm(item)"
|
||||
class="table-operation-btn danger" nz-icon type="delete" theme="outline"></i>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</nz-table>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 详情 -->
|
||||
<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()">
|
||||
<app-request-status [statusParams]='statusParamsDetail'></app-request-status>
|
||||
<form class="user-detail" *ngIf='statusParamsDetail.status==3' nz-form [nzLayout]="'inline'">
|
||||
<div nz-row nzGutter="8">
|
||||
<div nz-col nzSpan="24">
|
||||
<nz-form-item>
|
||||
<nz-form-label>姓名</nz-form-label>
|
||||
<span class="detail-item-text">{{userDetail.real_name}}</span>
|
||||
<span *ngIf='!userDetail.real_name'>无</span>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
<div nz-col nzSpan="24">
|
||||
<nz-form-item>
|
||||
<nz-form-label>系统账号</nz-form-label>
|
||||
<span class="detail-item-text">{{userDetail.login_name}}</span>
|
||||
<span *ngIf='!userDetail.login_name'>无</span>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div nz-row nzGutter="8">
|
||||
<div nz-col nzSpan="24">
|
||||
<nz-form-item>
|
||||
<nz-form-label>系统密码</nz-form-label>
|
||||
<span class="detail-item-text">{{userDetail.password}}</span>
|
||||
<span *ngIf='!userDetail.password'>无</span>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
<div nz-col nzSpan="24">
|
||||
<nz-form-item>
|
||||
<nz-form-label>所属机构</nz-form-label>
|
||||
<span *ngFor="let option of userDetail.orgList" class="detail-item-text">{{option.organization}}</span>
|
||||
<span *ngIf="userDetail.orgList.length<=0">无</span>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div nz-row nzGutter="8">
|
||||
<div nz-col nzSpan="24">
|
||||
<nz-form-item>
|
||||
<nz-form-label>所属角色</nz-form-label>
|
||||
<ng-container *ngFor="let option of userDetail.roleList;let i=index">
|
||||
<span class="detail-item-text">{{option.role_name}}</span><span *ngIf="userDetail.roleList.length>0&&(i!=userDetail.roleList.length-1)">、</span>
|
||||
</ng-container>
|
||||
<span *ngIf="userDetail.roleList.length<=0">无</span>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
<div nz-col nzSpan="24">
|
||||
<nz-form-item>
|
||||
<nz-form-label>描述</nz-form-label>
|
||||
<span class="detail-item-text">{{userDetail.remark}}</span>
|
||||
<span *ngIf='!userDetail.remark'>无</span>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div nz-row nzGutter="8">
|
||||
<div nz-col nzSpan="24">
|
||||
<nz-form-item>
|
||||
<nz-form-label>身份证号</nz-form-label>
|
||||
<span class="detail-item-text">{{userDetail.identify_num}}</span>
|
||||
<span *ngIf='!userDetail.identify_num'>无</span>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
<div nz-col nzSpan="24">
|
||||
<nz-form-item>
|
||||
<nz-form-label>邮箱</nz-form-label>
|
||||
<span class="detail-item-text">{{userDetail.email}}</span>
|
||||
<span *ngIf='!userDetail.email'>无</span>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div nz-row nzGutter="8">
|
||||
<div nz-col nzSpan="24">
|
||||
<nz-form-item>
|
||||
<nz-form-label>电话</nz-form-label>
|
||||
<span class="detail-item-text">{{userDetail.mobile}}</span>
|
||||
<span *ngIf='!userDetail.mobile'>无</span>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
<div nz-col nzSpan="24">
|
||||
<nz-form-item>
|
||||
<nz-form-label>状态</nz-form-label>
|
||||
<span class="detail-item-text" *ngIf='userDetail.status==1'>已激活</span>
|
||||
<span class="detail-item-text" *ngIf='userDetail.status==0'>未激活</span>
|
||||
<span *ngIf='!userDetail.status'>无</span>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div nz-row nzGutter="8">
|
||||
<div nz-col nzSpan="24">
|
||||
<nz-form-item>
|
||||
<nz-form-label>性别</nz-form-label>
|
||||
<span class="detail-item-text" *ngIf='userDetail.sex=="m"'>男</span>
|
||||
<span class="detail-item-text" *ngIf='userDetail.sex=="f"'>女</span>
|
||||
<span *ngIf='!userDetail.sex'>无</span>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</nz-drawer>
|
||||
<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>
|
||||
<form class="user-detail" *ngIf='statusParamsDetail.status==3' nz-form [nzLayout]="'inline'">
|
||||
<div nz-row nzGutter="8">
|
||||
<div nz-col nzSpan="24">
|
||||
<nz-form-item>
|
||||
<nz-form-label>姓名</nz-form-label>
|
||||
<span class="detail-item-text">{{userDetail.real_name}}</span>
|
||||
<span *ngIf='!userDetail.real_name'>无</span>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
<div nz-col nzSpan="24">
|
||||
<nz-form-item>
|
||||
<nz-form-label>系统账号</nz-form-label>
|
||||
<span class="detail-item-text">{{userDetail.login_name}}</span>
|
||||
<span *ngIf='!userDetail.login_name'>无</span>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div nz-row nzGutter="8">
|
||||
<div nz-col nzSpan="24">
|
||||
<nz-form-item>
|
||||
<nz-form-label>系统密码</nz-form-label>
|
||||
<span class="detail-item-text">{{userDetail.password}}</span>
|
||||
<span *ngIf='!userDetail.password'>无</span>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
<div nz-col nzSpan="24">
|
||||
<nz-form-item>
|
||||
<nz-form-label>所属机构</nz-form-label>
|
||||
<span *ngFor="let option of userDetail.orgList" class="detail-item-text">{{option.organization}}</span>
|
||||
<span *ngIf="userDetail.orgList.length<=0">无</span>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div nz-row nzGutter="8">
|
||||
<div nz-col nzSpan="24">
|
||||
<nz-form-item>
|
||||
<nz-form-label>所属角色</nz-form-label>
|
||||
<ng-container *ngFor="let option of userDetail.roleList;let i=index">
|
||||
<span class="detail-item-text">{{option.role_name}}</span><span *ngIf="userDetail.roleList.length>0&&(i!=userDetail.roleList.length-1)">、</span>
|
||||
</ng-container>
|
||||
<span *ngIf="userDetail.roleList.length<=0">无</span>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
<div nz-col nzSpan="24">
|
||||
<nz-form-item>
|
||||
<nz-form-label>描述</nz-form-label>
|
||||
<span class="detail-item-text">{{userDetail.remark}}</span>
|
||||
<span *ngIf='!userDetail.remark'>无</span>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div nz-row nzGutter="8">
|
||||
<div nz-col nzSpan="24">
|
||||
<nz-form-item>
|
||||
<nz-form-label>身份证号</nz-form-label>
|
||||
<span class="detail-item-text">{{userDetail.identify_num}}</span>
|
||||
<span *ngIf='!userDetail.identify_num'>无</span>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
<div nz-col nzSpan="24">
|
||||
<nz-form-item>
|
||||
<nz-form-label>邮箱</nz-form-label>
|
||||
<span class="detail-item-text">{{userDetail.email}}</span>
|
||||
<span *ngIf='!userDetail.email'>无</span>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div nz-row nzGutter="8">
|
||||
<div nz-col nzSpan="24">
|
||||
<nz-form-item>
|
||||
<nz-form-label>电话</nz-form-label>
|
||||
<span class="detail-item-text">{{userDetail.mobile}}</span>
|
||||
<span *ngIf='!userDetail.mobile'>无</span>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
<div nz-col nzSpan="24">
|
||||
<nz-form-item>
|
||||
<nz-form-label>状态</nz-form-label>
|
||||
<span class="detail-item-text" *ngIf='userDetail.status==1'>已激活</span>
|
||||
<span class="detail-item-text" *ngIf='userDetail.status==0'>未激活</span>
|
||||
<span *ngIf='!userDetail.status'>无</span>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<div nz-row nzGutter="8">
|
||||
<div nz-col nzSpan="24">
|
||||
<nz-form-item>
|
||||
<nz-form-label>性别</nz-form-label>
|
||||
<span class="detail-item-text" *ngIf='userDetail.sex=="m"'>男</span>
|
||||
<span class="detail-item-text" *ngIf='userDetail.sex=="f"'>女</span>
|
||||
<span *ngIf='!userDetail.sex'>无</span>
|
||||
</nz-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</nz-drawer>
|
||||
</div>
|
||||
@@ -2,14 +2,16 @@
|
||||
.system-main-container{
|
||||
.user-manage{
|
||||
.system-main-content{
|
||||
overflow-y:scroll;
|
||||
}
|
||||
.card{
|
||||
|
||||
overflow-y:auto;
|
||||
}
|
||||
.tree-box{
|
||||
overflow-y:scroll;
|
||||
}
|
||||
overflow-y:auto;
|
||||
overflow-x: auto;
|
||||
margin-right: 20px;
|
||||
}
|
||||
/deep/ .ant-form-item{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -44,8 +44,8 @@ export class UserManagementComponent implements OnInit {
|
||||
|
||||
ngOnInit() {
|
||||
// 页面监听 动态改变表单高度
|
||||
$('#tree-box').css('height',(document.documentElement.clientHeight-126+'px'));
|
||||
$('#main-box').css('height',(document.documentElement.clientHeight-126+'px'));
|
||||
$('#tree-box').css('height',(document.documentElement.clientHeight-106+'px'));
|
||||
$('#main-box').css('height',(document.documentElement.clientHeight-106+'px'));
|
||||
$(window).resize(function(){
|
||||
$('#tree-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修改
|
||||
addModify(type,item?){
|
||||
if(type==1){
|
||||
|
||||
Reference in New Issue
Block a user