mirror of
https://gitee.com/dromara/MaxKey.git
synced 2025-12-08 09:58:56 +08:00
调整用户组的选择方式
This commit is contained in:
parent
07e37d6b85
commit
3f51aab687
@ -1,116 +1,162 @@
|
|||||||
<page-header> </page-header>
|
<page-header> </page-header>
|
||||||
|
|
||||||
<nz-card [nzBordered]="false">
|
|
||||||
<form nz-form [nzLayout]="'inline'" (ngSubmit)="onSearch()" class="search__form">
|
|
||||||
<div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 24, lg: 24, xl: 48, xxl: 48 }">
|
|
||||||
<div nz-col nzMd="10" nzSm="24">
|
|
||||||
<nz-form-item>
|
|
||||||
<nz-form-label nzFor="roleName">{{ 'mxk.roles.name' | i18n }}</nz-form-label>
|
|
||||||
<nz-form-control>
|
|
||||||
<nz-input-group nzSearch [nzAddOnAfter]="suffixButton">
|
|
||||||
<input nz-input [(ngModel)]="query.params.groupName" [ngModelOptions]="{ standalone: true }"
|
|
||||||
name="groupName" readonly placeholder="" id="groupName" />
|
|
||||||
</nz-input-group>
|
|
||||||
<ng-template #suffixButton>
|
|
||||||
<button nz-button nzType="primary" (click)="onSelect($event)" nzSearch>{{ 'mxk.text.select' | i18n
|
|
||||||
}}</button>
|
|
||||||
</ng-template>
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
</div>
|
|
||||||
<div nz-col nzMd="10" nzSm="24">
|
|
||||||
<nz-form-item>
|
|
||||||
<nz-form-label nzFor="name">{{ 'mxk.apps.name' | i18n }}</nz-form-label>
|
|
||||||
<nz-form-control>
|
|
||||||
<input nz-input [(ngModel)]="query.params.appName" [ngModelOptions]="{ standalone: true }" name="appName"
|
|
||||||
placeholder="" id="appName" />
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
</div>
|
|
||||||
<div nz-col [nzSpan]="query.expandForm ? 24 : 4" [class.text-right]="query.expandForm">
|
|
||||||
<button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
|
|
||||||
i18n }}</button>
|
|
||||||
<button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' |
|
|
||||||
i18n }}</button>
|
|
||||||
<button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
|
|
||||||
{{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</nz-card>
|
|
||||||
<nz-card [nzBordered]="false">
|
<nz-card [nzBordered]="false">
|
||||||
<div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
|
<div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
|
||||||
<div nz-col [nzSpan]="24" class="table-list-toolbar">
|
<div nz-col nzMd="8" nzSm="24" class="grid-border">
|
||||||
<button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
|
<nz-card [nzBordered]="false">
|
||||||
<button nz-button type="button" (click)="onBatchDelete($event)" [nzType]="'primary'" nzDanger class="mx-sm">{{
|
<form nz-form [nzLayout]="'inline'" (ngSubmit)="onGroupSearch()" class="search__form">
|
||||||
'mxk.text.delete' | i18n
|
<div nz-col nzMd="16" nzSm="24">
|
||||||
}}</button>
|
<nz-form-item>
|
||||||
</div>
|
<nz-form-label nzFor="groupName">{{ 'mxk.groups.name' | i18n }}</nz-form-label>
|
||||||
|
<nz-form-control>
|
||||||
<div nz-col nzMd="24" nzSm="24">
|
<input nz-input [(ngModel)]="groupQuery.params.groupName" [ngModelOptions]="{ standalone: true }"
|
||||||
|
name="groupName" placeholder="" id="groupName" />
|
||||||
|
</nz-form-control>
|
||||||
|
</nz-form-item>
|
||||||
|
</div>
|
||||||
|
<div nz-col [nzSpan]="8" [class.text-right]="groupQuery.expandForm">
|
||||||
|
<button nz-button type="submit" [nzType]="'primary'" [nzLoading]="groupQuery.submitLoading">{{
|
||||||
|
'mxk.text.query' | i18n
|
||||||
|
}}</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</nz-card>
|
||||||
<nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger
|
<nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger
|
||||||
[nzData]="query.results.rows" [nzFrontPagination]="false" [nzTotal]="query.results.records"
|
[nzData]="groupQuery.results.rows" [nzFrontPagination]="false" [nzTotal]="groupQuery.results.records"
|
||||||
[nzPageSizeOptions]="query.params.pageSizeOptions" [nzPageSize]="query.params.pageSize"
|
[nzPageSizeOptions]="groupQuery.params.pageSizeOptions" [nzPageSize]="groupQuery.params.pageSize"
|
||||||
[nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
|
[nzPageIndex]="groupQuery.params.pageNumber" [nzLoading]="this.groupQuery.tableLoading"
|
||||||
(nzQueryParams)="onQueryParamsChange($event)">
|
(nzQueryParams)="onGroupQueryParamsChange($event)">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
|
<th></th>
|
||||||
(nzCheckedChange)="onTableAllChecked($event)"></th>
|
|
||||||
<th nzAlign="center" style="display: none">Id</th>
|
<th nzAlign="center" style="display: none">Id</th>
|
||||||
<th nzAlign="center">{{ 'mxk.roles.name' | i18n }}</th>
|
<th nzAlign="center">{{ 'mxk.groups.name' | i18n }}</th>
|
||||||
<th nzAlign="center">{{ 'mxk.apps.icon' | i18n }}</th>
|
<th nzAlign="center">{{ 'mxk.groups.category' | i18n }}</th>
|
||||||
<th nzAlign="center">{{ 'mxk.apps.name' | i18n }}</th>
|
|
||||||
<th nzAlign="center">{{ 'mxk.apps.category' | i18n }}</th>
|
|
||||||
<th nzAlign="center" class="table_cell_action_1">{{ 'mxk.text.action' | i18n }}</th>
|
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr *ngFor="let data of query.results.rows">
|
<tr *ngFor="let data of groupQuery.results.rows">
|
||||||
<td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
|
<td [nzChecked]="groupQuery.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
|
||||||
(nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
|
(nzCheckedChange)="onGroupTableItemChecked(data.id, data.groupName, $event)"></td>
|
||||||
|
<td nzAlign="left" style="display: none">
|
||||||
|
<span>{{ data.id }}</span>
|
||||||
|
</td>
|
||||||
<td nzAlign="left"> {{ data.groupName }}</td>
|
<td nzAlign="left"> {{ data.groupName }}</td>
|
||||||
<td nzAlign="center"><img height="30" border="0px" src="{{ data.iconBase64 }}" /></td>
|
<td nzAlign="center" *ngIf="data.category == 'dynamic'"> {{ 'mxk.groups.category.dynamic' | i18n }}</td>
|
||||||
<td nzAlign="left"> {{ data.appName }}</td>
|
<td nzAlign="center" *ngIf="data.category == 'static'"> {{ 'mxk.groups.category.static' | i18n }}</td>
|
||||||
<td nzAlign="left">
|
<td nzAlign="center" *ngIf="data.category == 'app'"> {{ 'mxk.groups.category.app' | i18n }}</td>
|
||||||
<div *ngIf="data.category == 'none'">{{ 'mxk.apps.category.none' | i18n }}</div>
|
|
||||||
<div *ngIf="data.category == '1011'">{{ 'mxk.apps.category.1011' | i18n }}</div>
|
|
||||||
<div *ngIf="data.category == '1012'">{{ 'mxk.apps.category.1012' | i18n }}</div>
|
|
||||||
<div *ngIf="data.category == '1013'">{{ 'mxk.apps.category.1013' | i18n }}</div>
|
|
||||||
<div *ngIf="data.category == '1014'">{{ 'mxk.apps.category.1014' | i18n }}</div>
|
|
||||||
<div *ngIf="data.category == '1015'">{{ 'mxk.apps.category.1015' | i18n }}</div>
|
|
||||||
<div *ngIf="data.category == '1016'">{{ 'mxk.apps.category.1016' | i18n }}</div>
|
|
||||||
<div *ngIf="data.category == '1017'">{{ 'mxk.apps.category.1017' | i18n }}</div>
|
|
||||||
<div *ngIf="data.category == '1111'">{{ 'mxk.apps.category.1111' | i18n }}</div>
|
|
||||||
<div *ngIf="data.category == '1112'">{{ 'mxk.apps.category.1112' | i18n }}</div>
|
|
||||||
<div *ngIf="data.category == '1113'">{{ 'mxk.apps.category.1113' | i18n }}</div>
|
|
||||||
<div *ngIf="data.category == '1114'">{{ 'mxk.apps.category.1114' | i18n }}</div>
|
|
||||||
<div *ngIf="data.category == '1211'">{{ 'mxk.apps.category.1211' | i18n }}</div>
|
|
||||||
<div *ngIf="data.category == '1212'">{{ 'mxk.apps.category.1212' | i18n }}</div>
|
|
||||||
<div *ngIf="data.category == '1213'">{{ 'mxk.apps.category.1213' | i18n }}</div>
|
|
||||||
<div *ngIf="data.category == '1214'">{{ 'mxk.apps.category.1214' | i18n }}</div>
|
|
||||||
<div *ngIf="data.category == '1215'">{{ 'mxk.apps.category.1215' | i18n }}</div>
|
|
||||||
<div *ngIf="data.category == '1311'">{{ 'mxk.apps.category.1311' | i18n }}</div>
|
|
||||||
<div *ngIf="data.category == '1411'">{{ 'mxk.apps.category.1411' | i18n }}</div>
|
|
||||||
<div *ngIf="data.category == '1511'">{{ 'mxk.apps.category.1511' | i18n }}</div>
|
|
||||||
<div *ngIf="data.category == '1512'">{{ 'mxk.apps.category.1512' | i18n }}</div>
|
|
||||||
<div *ngIf="data.category == '1611'">{{ 'mxk.apps.category.1611' | i18n }}</div>
|
|
||||||
<div *ngIf="data.category == '1711'">{{ 'mxk.apps.category.1711' | i18n }}</div>
|
|
||||||
<div *ngIf="data.category == '1712'">{{ 'mxk.apps.category.1712' | i18n }}</div>
|
|
||||||
<div *ngIf="data.category == '1811'">{{ 'mxk.apps.category.1811' | i18n }}</div>
|
|
||||||
<div *ngIf="data.category == '1812'">{{ 'mxk.apps.category.1812' | i18n }}</div>
|
|
||||||
<div *ngIf="data.category == '1911'">{{ 'mxk.apps.category.1911' | i18n }}</div>
|
|
||||||
<div *ngIf="data.category == '1912'">{{ 'mxk.apps.category.1912' | i18n }}</div>
|
|
||||||
</td>
|
|
||||||
<td nzAlign="center" nzBreakWord="false">
|
|
||||||
<div nz-col>
|
|
||||||
<button nz-button type="button" (click)="onDelete($event, data.id)" nzDanger>{{ 'mxk.text.delete' | i18n
|
|
||||||
}}</button>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</nz-table>
|
</nz-table>
|
||||||
</div>
|
</div>
|
||||||
|
<div nz-col nzMd="16" nzSm="24" class="grid-border">
|
||||||
|
<nz-card [nzBordered]="false">
|
||||||
|
<form nz-form [nzLayout]="'inline'" (ngSubmit)="onSearch()" class="search__form">
|
||||||
|
<div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 24, lg: 24, xl: 48, xxl: 48 }">
|
||||||
|
<div nz-col nzMd="10" nzSm="24">
|
||||||
|
<nz-form-item>
|
||||||
|
<nz-form-label nzFor="roleName">{{ 'mxk.roles.name' | i18n }}</nz-form-label>
|
||||||
|
<input nz-input [(ngModel)]="query.params.groupName" [ngModelOptions]="{ standalone: true }" readonly
|
||||||
|
placeholder="" disabled />
|
||||||
|
</nz-form-item>
|
||||||
|
</div>
|
||||||
|
<div nz-col nzMd="10" nzSm="24">
|
||||||
|
<nz-form-item>
|
||||||
|
<nz-form-label nzFor="name">{{ 'mxk.apps.name' | i18n }}</nz-form-label>
|
||||||
|
<nz-form-control>
|
||||||
|
<input nz-input [(ngModel)]="query.params.appName" [ngModelOptions]="{ standalone: true }"
|
||||||
|
name="appName" placeholder="" id="appName" />
|
||||||
|
</nz-form-control>
|
||||||
|
</nz-form-item>
|
||||||
|
</div>
|
||||||
|
<div nz-col [nzSpan]="query.expandForm ? 24 : 4" [class.text-right]="query.expandForm">
|
||||||
|
<button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query'
|
||||||
|
| i18n }}</button>
|
||||||
|
<button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset'
|
||||||
|
| i18n }}</button>
|
||||||
|
<button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
|
||||||
|
{{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</nz-card>
|
||||||
|
<nz-card [nzBordered]="false">
|
||||||
|
<div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
|
||||||
|
<div nz-col [nzSpan]="24" class="table-list-toolbar">
|
||||||
|
<button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n
|
||||||
|
}}</button>
|
||||||
|
<button nz-button type="button" (click)="onBatchDelete($event)" [nzType]="'primary'" nzDanger
|
||||||
|
class="mx-sm">{{
|
||||||
|
'mxk.text.delete' | i18n
|
||||||
|
}}</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div nz-col nzMd="24" nzSm="24">
|
||||||
|
<nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger
|
||||||
|
[nzData]="query.results.rows" [nzFrontPagination]="false" [nzTotal]="query.results.records"
|
||||||
|
[nzPageSizeOptions]="query.params.pageSizeOptions" [nzPageSize]="query.params.pageSize"
|
||||||
|
[nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
|
||||||
|
(nzQueryParams)="onQueryParamsChange($event)">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
|
||||||
|
(nzCheckedChange)="onTableAllChecked($event)"></th>
|
||||||
|
<th nzAlign="center" style="display: none">Id</th>
|
||||||
|
<th nzAlign="center">{{ 'mxk.roles.name' | i18n }}</th>
|
||||||
|
<th nzAlign="center">{{ 'mxk.apps.icon' | i18n }}</th>
|
||||||
|
<th nzAlign="center">{{ 'mxk.apps.name' | i18n }}</th>
|
||||||
|
<th nzAlign="center">{{ 'mxk.apps.category' | i18n }}</th>
|
||||||
|
<th nzAlign="center" class="table_cell_action_1">{{ 'mxk.text.action' | i18n }}</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr *ngFor="let data of query.results.rows">
|
||||||
|
<td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
|
||||||
|
(nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
|
||||||
|
<td nzAlign="left"> {{ data.groupName }}</td>
|
||||||
|
<td nzAlign="center"><img height="30" border="0px" src="{{ data.iconBase64 }}" /></td>
|
||||||
|
<td nzAlign="left"> {{ data.appName }}</td>
|
||||||
|
<td nzAlign="left">
|
||||||
|
<div *ngIf="data.category == 'none'">{{ 'mxk.apps.category.none' | i18n }}</div>
|
||||||
|
<div *ngIf="data.category == '1011'">{{ 'mxk.apps.category.1011' | i18n }}</div>
|
||||||
|
<div *ngIf="data.category == '1012'">{{ 'mxk.apps.category.1012' | i18n }}</div>
|
||||||
|
<div *ngIf="data.category == '1013'">{{ 'mxk.apps.category.1013' | i18n }}</div>
|
||||||
|
<div *ngIf="data.category == '1014'">{{ 'mxk.apps.category.1014' | i18n }}</div>
|
||||||
|
<div *ngIf="data.category == '1015'">{{ 'mxk.apps.category.1015' | i18n }}</div>
|
||||||
|
<div *ngIf="data.category == '1016'">{{ 'mxk.apps.category.1016' | i18n }}</div>
|
||||||
|
<div *ngIf="data.category == '1017'">{{ 'mxk.apps.category.1017' | i18n }}</div>
|
||||||
|
<div *ngIf="data.category == '1111'">{{ 'mxk.apps.category.1111' | i18n }}</div>
|
||||||
|
<div *ngIf="data.category == '1112'">{{ 'mxk.apps.category.1112' | i18n }}</div>
|
||||||
|
<div *ngIf="data.category == '1113'">{{ 'mxk.apps.category.1113' | i18n }}</div>
|
||||||
|
<div *ngIf="data.category == '1114'">{{ 'mxk.apps.category.1114' | i18n }}</div>
|
||||||
|
<div *ngIf="data.category == '1211'">{{ 'mxk.apps.category.1211' | i18n }}</div>
|
||||||
|
<div *ngIf="data.category == '1212'">{{ 'mxk.apps.category.1212' | i18n }}</div>
|
||||||
|
<div *ngIf="data.category == '1213'">{{ 'mxk.apps.category.1213' | i18n }}</div>
|
||||||
|
<div *ngIf="data.category == '1214'">{{ 'mxk.apps.category.1214' | i18n }}</div>
|
||||||
|
<div *ngIf="data.category == '1215'">{{ 'mxk.apps.category.1215' | i18n }}</div>
|
||||||
|
<div *ngIf="data.category == '1311'">{{ 'mxk.apps.category.1311' | i18n }}</div>
|
||||||
|
<div *ngIf="data.category == '1411'">{{ 'mxk.apps.category.1411' | i18n }}</div>
|
||||||
|
<div *ngIf="data.category == '1511'">{{ 'mxk.apps.category.1511' | i18n }}</div>
|
||||||
|
<div *ngIf="data.category == '1512'">{{ 'mxk.apps.category.1512' | i18n }}</div>
|
||||||
|
<div *ngIf="data.category == '1611'">{{ 'mxk.apps.category.1611' | i18n }}</div>
|
||||||
|
<div *ngIf="data.category == '1711'">{{ 'mxk.apps.category.1711' | i18n }}</div>
|
||||||
|
<div *ngIf="data.category == '1712'">{{ 'mxk.apps.category.1712' | i18n }}</div>
|
||||||
|
<div *ngIf="data.category == '1811'">{{ 'mxk.apps.category.1811' | i18n }}</div>
|
||||||
|
<div *ngIf="data.category == '1812'">{{ 'mxk.apps.category.1812' | i18n }}</div>
|
||||||
|
<div *ngIf="data.category == '1911'">{{ 'mxk.apps.category.1911' | i18n }}</div>
|
||||||
|
<div *ngIf="data.category == '1912'">{{ 'mxk.apps.category.1912' | i18n }}</div>
|
||||||
|
</td>
|
||||||
|
<td nzAlign="center" nzBreakWord="false">
|
||||||
|
<div nz-col>
|
||||||
|
<button nz-button type="button" (click)="onDelete($event, data.id)" nzDanger>{{ 'mxk.text.delete'
|
||||||
|
| i18n }}</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</nz-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nz-card>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nz-card>
|
</nz-card>
|
||||||
@ -28,6 +28,7 @@ import { NzTableQueryParams } from 'ng-zorro-antd/table';
|
|||||||
import { NzFormatEmitEvent, NzTreeNode, NzTreeNodeOptions } from 'ng-zorro-antd/tree';
|
import { NzFormatEmitEvent, NzTreeNode, NzTreeNodeOptions } from 'ng-zorro-antd/tree';
|
||||||
|
|
||||||
import { GroupPermissionsService } from '../../../service/group-permissions.service';
|
import { GroupPermissionsService } from '../../../service/group-permissions.service';
|
||||||
|
import { GroupsService } from '../../../service/groups.service';
|
||||||
import { set2String } from '../../../shared/index';
|
import { set2String } from '../../../shared/index';
|
||||||
import { SelectGroupsComponent } from '../../idm/groups/select-groups/select-groups.component';
|
import { SelectGroupsComponent } from '../../idm/groups/select-groups/select-groups.component';
|
||||||
import { PermissionsEditerComponent } from './permissions-editer/permissions-editer.component';
|
import { PermissionsEditerComponent } from './permissions-editer/permissions-editer.component';
|
||||||
@ -66,37 +67,38 @@ export class PermissionsComponent implements OnInit {
|
|||||||
indeterminate: boolean;
|
indeterminate: boolean;
|
||||||
checked: boolean;
|
checked: boolean;
|
||||||
} = {
|
} = {
|
||||||
params: {
|
params: {
|
||||||
displayName: '',
|
displayName: '',
|
||||||
username: '',
|
username: '',
|
||||||
groupId: '',
|
groupId: '',
|
||||||
groupName: '',
|
groupName: '',
|
||||||
appName: '',
|
appName: '',
|
||||||
appId: '',
|
appId: '',
|
||||||
startDate: '',
|
startDate: '',
|
||||||
endDate: '',
|
endDate: '',
|
||||||
startDatePicker: addDays(new Date(), -30),
|
startDatePicker: addDays(new Date(), -30),
|
||||||
endDatePicker: new Date(),
|
endDatePicker: new Date(),
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
pageNumber: 1,
|
pageNumber: 1,
|
||||||
pageSizeOptions: [10, 20, 50]
|
pageSizeOptions: [10, 20, 50]
|
||||||
},
|
},
|
||||||
results: {
|
results: {
|
||||||
records: 0,
|
records: 0,
|
||||||
rows: []
|
rows: []
|
||||||
},
|
},
|
||||||
expandForm: false,
|
expandForm: false,
|
||||||
submitLoading: false,
|
submitLoading: false,
|
||||||
tableLoading: false,
|
tableLoading: false,
|
||||||
tableInitialize: true,
|
tableInitialize: true,
|
||||||
tableCheckedId: new Set<String>(),
|
tableCheckedId: new Set<String>(),
|
||||||
indeterminate: false,
|
indeterminate: false,
|
||||||
checked: false
|
checked: false
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private modalService: NzModalService,
|
private modalService: NzModalService,
|
||||||
private groupPermissionsService: GroupPermissionsService,
|
private groupPermissionsService: GroupPermissionsService,
|
||||||
|
private groupsService: GroupsService,
|
||||||
private viewContainerRef: ViewContainerRef,
|
private viewContainerRef: ViewContainerRef,
|
||||||
private fb: FormBuilder,
|
private fb: FormBuilder,
|
||||||
private msg: NzMessageService,
|
private msg: NzMessageService,
|
||||||
@ -104,7 +106,7 @@ export class PermissionsComponent implements OnInit {
|
|||||||
private route: ActivatedRoute,
|
private route: ActivatedRoute,
|
||||||
private cdr: ChangeDetectorRef,
|
private cdr: ChangeDetectorRef,
|
||||||
private http: _HttpClient
|
private http: _HttpClient
|
||||||
) {}
|
) { }
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
if (this.route.snapshot.queryParams['groupId']) {
|
if (this.route.snapshot.queryParams['groupId']) {
|
||||||
@ -126,7 +128,7 @@ export class PermissionsComponent implements OnInit {
|
|||||||
this.fetch();
|
this.fetch();
|
||||||
}
|
}
|
||||||
|
|
||||||
onReset(): void {}
|
onReset(): void { }
|
||||||
|
|
||||||
onBatchDelete(e: MouseEvent): void {
|
onBatchDelete(e: MouseEvent): void {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@ -143,22 +145,24 @@ export class PermissionsComponent implements OnInit {
|
|||||||
|
|
||||||
onAdd(e: MouseEvent): void {
|
onAdd(e: MouseEvent): void {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const modal = this.modalService.create({
|
if (this.query.params.groupId !== '') {
|
||||||
nzContent: PermissionsEditerComponent,
|
const modal = this.modalService.create({
|
||||||
nzViewContainerRef: this.viewContainerRef,
|
nzContent: PermissionsEditerComponent,
|
||||||
nzComponentParams: {
|
nzViewContainerRef: this.viewContainerRef,
|
||||||
isEdit: false,
|
nzComponentParams: {
|
||||||
groupId: this.query.params.groupId
|
isEdit: false,
|
||||||
},
|
groupId: this.query.params.groupId
|
||||||
nzWidth: 700,
|
},
|
||||||
nzOnOk: () => new Promise(resolve => setTimeout(resolve, 1000))
|
nzWidth: 700,
|
||||||
});
|
nzOnOk: () => new Promise(resolve => setTimeout(resolve, 1000))
|
||||||
// Return a result when closed
|
});
|
||||||
modal.afterClose.subscribe(result => {
|
// Return a result when closed
|
||||||
if (result.refresh) {
|
modal.afterClose.subscribe(result => {
|
||||||
this.fetch();
|
if (result.refresh) {
|
||||||
}
|
this.fetch();
|
||||||
});
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onSelect(e: MouseEvent): void {
|
onSelect(e: MouseEvent): void {
|
||||||
@ -239,4 +243,94 @@ export class PermissionsComponent implements OnInit {
|
|||||||
this.query.results.rows.filter(({ disabled }) => !disabled).forEach(({ id }) => this.updateTableCheckedSet(id, checked));
|
this.query.results.rows.filter(({ disabled }) => !disabled).forEach(({ id }) => this.updateTableCheckedSet(id, checked));
|
||||||
this.refreshTableCheckedStatus();
|
this.refreshTableCheckedStatus();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//group list
|
||||||
|
groupQuery: {
|
||||||
|
params: {
|
||||||
|
groupName: String;
|
||||||
|
pageSize: number;
|
||||||
|
pageNumber: number;
|
||||||
|
pageSizeOptions: number[];
|
||||||
|
};
|
||||||
|
results: {
|
||||||
|
records: number;
|
||||||
|
rows: NzSafeAny[];
|
||||||
|
};
|
||||||
|
expandForm: Boolean;
|
||||||
|
submitLoading: boolean;
|
||||||
|
tableLoading: boolean;
|
||||||
|
tableCheckedId: Set<String>;
|
||||||
|
indeterminate: boolean;
|
||||||
|
checked: boolean;
|
||||||
|
} = {
|
||||||
|
params: {
|
||||||
|
groupName: '',
|
||||||
|
pageSize: 10,
|
||||||
|
pageNumber: 1,
|
||||||
|
pageSizeOptions: [10, 20, 50]
|
||||||
|
},
|
||||||
|
results: {
|
||||||
|
records: 0,
|
||||||
|
rows: []
|
||||||
|
},
|
||||||
|
expandForm: false,
|
||||||
|
submitLoading: false,
|
||||||
|
tableLoading: false,
|
||||||
|
tableCheckedId: new Set<String>(),
|
||||||
|
indeterminate: false,
|
||||||
|
checked: false
|
||||||
|
};
|
||||||
|
|
||||||
|
onGroupSearch(): void {
|
||||||
|
this.fetchGroup();
|
||||||
|
}
|
||||||
|
|
||||||
|
onGroupQueryParamsChange(tableQueryParams: NzTableQueryParams): void {
|
||||||
|
this.groupQuery.params.pageNumber = tableQueryParams.pageIndex;
|
||||||
|
this.groupQuery.params.pageSize = tableQueryParams.pageSize;
|
||||||
|
this.fetchGroup();
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchGroup(): void {
|
||||||
|
this.groupQuery.submitLoading = true;
|
||||||
|
this.groupQuery.tableLoading = true;
|
||||||
|
this.groupQuery.indeterminate = false;
|
||||||
|
this.groupQuery.checked = false;
|
||||||
|
this.groupQuery.tableCheckedId.clear();
|
||||||
|
this.groupsService.fetch(this.groupQuery.params).subscribe(res => {
|
||||||
|
this.groupQuery.results = res.data;
|
||||||
|
this.groupQuery.submitLoading = false;
|
||||||
|
this.groupQuery.tableLoading = false;
|
||||||
|
this.cdr.detectChanges();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
updateGroupTableCheckedSet(id: String, checked: boolean): void {
|
||||||
|
if (checked) {
|
||||||
|
this.groupQuery.tableCheckedId.add(id);
|
||||||
|
} else {
|
||||||
|
this.groupQuery.tableCheckedId.delete(id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
refreshGroupTableCheckedStatus(): void {
|
||||||
|
const listOfEnabledData = this.groupQuery.results.rows.filter(({ disabled }) => !disabled);
|
||||||
|
this.groupQuery.checked = listOfEnabledData.every(({ id }) => this.groupQuery.tableCheckedId.has(id));
|
||||||
|
this.groupQuery.indeterminate = listOfEnabledData.some(({ id }) => this.groupQuery.tableCheckedId.has(id)) && !this.groupQuery.checked;
|
||||||
|
}
|
||||||
|
|
||||||
|
onGroupTableItemChecked(groupId: String, groupName: String, checked: boolean): void {
|
||||||
|
console.log(`checked ${checked} , groupId ${groupId} , groupName ${groupName}`);
|
||||||
|
this.onGroupTableAllChecked(false);
|
||||||
|
this.updateGroupTableCheckedSet(groupId, checked);
|
||||||
|
this.refreshGroupTableCheckedStatus();
|
||||||
|
this.query.params.groupId = groupId;
|
||||||
|
this.query.params.groupName = groupName;
|
||||||
|
this.fetch();
|
||||||
|
}
|
||||||
|
|
||||||
|
onGroupTableAllChecked(checked: boolean): void {
|
||||||
|
this.groupQuery.results.rows.filter(({ disabled }) => !disabled).forEach(({ id }) => this.updateGroupTableCheckedSet(id, checked));
|
||||||
|
this.refreshGroupTableCheckedStatus();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,92 +1,138 @@
|
|||||||
<page-header> </page-header>
|
<page-header> </page-header>
|
||||||
|
|
||||||
<nz-card [nzBordered]="false">
|
|
||||||
<form nz-form [nzLayout]="'inline'" (ngSubmit)="onSearch()" class="search__form">
|
|
||||||
<div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 24, lg: 24, xl: 48, xxl: 48 }">
|
|
||||||
<div nz-col nzMd="8" nzSm="24">
|
|
||||||
<nz-form-item>
|
|
||||||
<nz-form-label nzFor="groupName">{{ 'mxk.roles.name' | i18n }}</nz-form-label>
|
|
||||||
<nz-form-control>
|
|
||||||
<nz-input-group nzSearch [nzAddOnAfter]="suffixButton">
|
|
||||||
<input nz-input [(ngModel)]="query.params.groupName" [ngModelOptions]="{ standalone: true }"
|
|
||||||
name="groupName" readonly placeholder="" id="groupName" />
|
|
||||||
</nz-input-group>
|
|
||||||
<ng-template #suffixButton>
|
|
||||||
<button nz-button nzType="primary" (click)="onSelect($event)" nzSearch>{{ 'mxk.text.select' | i18n
|
|
||||||
}}</button>
|
|
||||||
</ng-template>
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
</div>
|
|
||||||
<div nz-col nzMd="8" nzSm="24">
|
|
||||||
<nz-form-item>
|
|
||||||
<nz-form-label nzFor="name">{{ 'mxk.users.username' | i18n }}</nz-form-label>
|
|
||||||
<nz-form-control>
|
|
||||||
<input nz-input [(ngModel)]="query.params.username" [ngModelOptions]="{ standalone: true }" name="username"
|
|
||||||
placeholder="" id="username" />
|
|
||||||
</nz-form-control>
|
|
||||||
</nz-form-item>
|
|
||||||
</div>
|
|
||||||
<div nz-col [nzSpan]="query.expandForm ? 24 : 8" [class.text-right]="query.expandForm">
|
|
||||||
<button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
|
|
||||||
i18n }}</button>
|
|
||||||
<button nz-button type="reset" (click)="onReset()" class="mx-sm">{{ 'mxk.text.reset' | i18n }}</button>
|
|
||||||
<button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
|
|
||||||
{{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</nz-card>
|
|
||||||
<nz-card [nzBordered]="false">
|
<nz-card [nzBordered]="false">
|
||||||
<div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
|
<div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
|
||||||
<div nz-col [nzSpan]="24" class="table-list-toolbar">
|
<div nz-col nzMd="8" nzSm="24" class="grid-border">
|
||||||
<button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
|
<nz-card [nzBordered]="false">
|
||||||
<button nz-button type="button" (click)="onBatchDelete($event)" [nzType]="'primary'" nzDanger class="mx-sm">{{
|
<form nz-form [nzLayout]="'inline'" (ngSubmit)="onGroupSearch()" class="search__form">
|
||||||
'mxk.text.delete' | i18n
|
<div nz-col nzMd="16" nzSm="24">
|
||||||
}}</button>
|
<nz-form-item>
|
||||||
</div>
|
<nz-form-label nzFor="groupName">{{ 'mxk.groups.name' | i18n }}</nz-form-label>
|
||||||
|
<nz-form-control>
|
||||||
<div nz-col nzMd="24" nzSm="24">
|
<input nz-input [(ngModel)]="groupQuery.params.groupName" [ngModelOptions]="{ standalone: true }"
|
||||||
|
name="groupName" placeholder="" id="groupName" />
|
||||||
|
</nz-form-control>
|
||||||
|
</nz-form-item>
|
||||||
|
</div>
|
||||||
|
<div nz-col [nzSpan]="8" [class.text-right]="groupQuery.expandForm">
|
||||||
|
<button nz-button type="submit" [nzType]="'primary'" [nzLoading]="groupQuery.submitLoading">{{
|
||||||
|
'mxk.text.query' | i18n
|
||||||
|
}}</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</nz-card>
|
||||||
<nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger
|
<nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger
|
||||||
[nzData]="query.results.rows" [nzFrontPagination]="false" [nzTotal]="query.results.records"
|
[nzData]="groupQuery.results.rows" [nzFrontPagination]="false" [nzTotal]="groupQuery.results.records"
|
||||||
[nzPageSizeOptions]="query.params.pageSizeOptions" [nzPageSize]="query.params.pageSize"
|
[nzPageSizeOptions]="groupQuery.params.pageSizeOptions" [nzPageSize]="groupQuery.params.pageSize"
|
||||||
[nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
|
[nzPageIndex]="groupQuery.params.pageNumber" [nzLoading]="this.groupQuery.tableLoading"
|
||||||
(nzQueryParams)="onQueryParamsChange($event)">
|
(nzQueryParams)="onGroupQueryParamsChange($event)">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
|
<th></th>
|
||||||
(nzCheckedChange)="onTableAllChecked($event)"></th>
|
<th nzAlign="center" style="display: none">Id</th>
|
||||||
<th nzAlign="center">{{ 'mxk.roles.name' | i18n }}</th>
|
<th nzAlign="center">{{ 'mxk.groups.name' | i18n }}</th>
|
||||||
<th nzAlign="center">{{ 'mxk.users.username' | i18n }}</th>
|
<th nzAlign="center">{{ 'mxk.groups.category' | i18n }}</th>
|
||||||
<th nzAlign="center">{{ 'mxk.users.displayName' | i18n }}</th>
|
|
||||||
<th nzAlign="center">{{ 'mxk.users.department' | i18n }}</th>
|
|
||||||
<th nzAlign="center">{{ 'mxk.users.jobTitle' | i18n }}</th>
|
|
||||||
<th nzAlign="center">{{ 'mxk.users.gender' | i18n }}</th>
|
|
||||||
<th nzAlign="center" class="table_cell_action_1">{{ 'mxk.text.action' | i18n }}</th>
|
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr *ngFor="let data of query.results.rows">
|
<tr *ngFor="let data of groupQuery.results.rows">
|
||||||
<td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
|
<td [nzChecked]="groupQuery.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
|
||||||
(nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
|
(nzCheckedChange)="onGroupTableItemChecked(data.id, data.groupName, $event)"></td>
|
||||||
<td nzAlign="left"> {{ data.groupName }}</td>
|
<td nzAlign="left" style="display: none">
|
||||||
<td nzAlign="left"> {{ data.username }}</td>
|
<span>{{ data.id }}</span>
|
||||||
<td nzAlign="left"> {{ data.displayName }}</td>
|
|
||||||
<td nzAlign="left"> {{ data.department }}</td>
|
|
||||||
<td nzAlign="left"> {{ data.jobTitle }}</td>
|
|
||||||
<td nzAlign="center"> {{ data.gender == 1 ? ('mxk.users.gender.female' | i18n) : ('mxk.users.gender.male' |
|
|
||||||
i18n) }}</td>
|
|
||||||
<td nzAlign="center" nzBreakWord="false">
|
|
||||||
<div nz-col>
|
|
||||||
<button *ngIf="data.category == 'static'" nz-button type="button" (click)="onDelete($event, data.id)"
|
|
||||||
nzDanger>{{
|
|
||||||
'mxk.text.delete' | i18n
|
|
||||||
}}</button>
|
|
||||||
</div>
|
|
||||||
</td>
|
</td>
|
||||||
|
<td nzAlign="left"> {{ data.groupName }}</td>
|
||||||
|
<td nzAlign="center" *ngIf="data.category == 'dynamic'"> {{ 'mxk.groups.category.dynamic' | i18n }}</td>
|
||||||
|
<td nzAlign="center" *ngIf="data.category == 'static'"> {{ 'mxk.groups.category.static' | i18n }}</td>
|
||||||
|
<td nzAlign="center" *ngIf="data.category == 'app'"> {{ 'mxk.groups.category.app' | i18n }}</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</nz-table>
|
</nz-table>
|
||||||
</div>
|
</div>
|
||||||
|
<div nz-col nzMd="16" nzSm="24" class="grid-border">
|
||||||
|
<nz-card [nzBordered]="false">
|
||||||
|
<form nz-form [nzLayout]="'inline'" (ngSubmit)="onSearch()" class="search__form">
|
||||||
|
<div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 24, lg: 24, xl: 48, xxl: 48 }">
|
||||||
|
<div nz-col nzMd="8" nzSm="24">
|
||||||
|
<nz-form-item>
|
||||||
|
<nz-form-label nzFor="groupName">{{ 'mxk.roles.name' | i18n }}</nz-form-label>
|
||||||
|
<input nz-input [(ngModel)]="query.params.groupName" [ngModelOptions]="{ standalone: true }" readonly
|
||||||
|
disabled placeholder="" />
|
||||||
|
</nz-form-item>
|
||||||
|
</div>
|
||||||
|
<div nz-col nzMd="8" nzSm="24">
|
||||||
|
<nz-form-item>
|
||||||
|
<nz-form-label nzFor="name">{{ 'mxk.users.username' | i18n }}</nz-form-label>
|
||||||
|
<nz-form-control>
|
||||||
|
<input nz-input [(ngModel)]="query.params.username" [ngModelOptions]="{ standalone: true }"
|
||||||
|
name="username" placeholder="" id="username" />
|
||||||
|
</nz-form-control>
|
||||||
|
</nz-form-item>
|
||||||
|
</div>
|
||||||
|
<div nz-col [nzSpan]="query.expandForm ? 24 : 8" [class.text-right]="query.expandForm">
|
||||||
|
<button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query'
|
||||||
|
| i18n }}</button>
|
||||||
|
<button nz-button type="reset" (click)="onReset()" class="mx-sm">{{ 'mxk.text.reset' | i18n }}</button>
|
||||||
|
<button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
|
||||||
|
{{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</nz-card>
|
||||||
|
<nz-card [nzBordered]="false">
|
||||||
|
<div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
|
||||||
|
<div nz-col [nzSpan]="24" class="table-list-toolbar">
|
||||||
|
<button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n
|
||||||
|
}}</button>
|
||||||
|
<button nz-button type="button" (click)="onBatchDelete($event)" [nzType]="'primary'" nzDanger
|
||||||
|
class="mx-sm">{{
|
||||||
|
'mxk.text.delete' | i18n
|
||||||
|
}}</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div nz-col nzMd="24" nzSm="24">
|
||||||
|
<nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger
|
||||||
|
[nzData]="query.results.rows" [nzFrontPagination]="false" [nzTotal]="query.results.records"
|
||||||
|
[nzPageSizeOptions]="query.params.pageSizeOptions" [nzPageSize]="query.params.pageSize"
|
||||||
|
[nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
|
||||||
|
(nzQueryParams)="onQueryParamsChange($event)">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
|
||||||
|
(nzCheckedChange)="onTableAllChecked($event)"></th>
|
||||||
|
<th nzAlign="center">{{ 'mxk.roles.name' | i18n }}</th>
|
||||||
|
<th nzAlign="center">{{ 'mxk.users.username' | i18n }}</th>
|
||||||
|
<th nzAlign="center">{{ 'mxk.users.displayName' | i18n }}</th>
|
||||||
|
<th nzAlign="center">{{ 'mxk.users.department' | i18n }}</th>
|
||||||
|
<th nzAlign="center">{{ 'mxk.users.jobTitle' | i18n }}</th>
|
||||||
|
<th nzAlign="center">{{ 'mxk.users.gender' | i18n }}</th>
|
||||||
|
<th nzAlign="center" class="table_cell_action_1">{{ 'mxk.text.action' | i18n }}</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr *ngFor="let data of query.results.rows">
|
||||||
|
<td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
|
||||||
|
(nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
|
||||||
|
<td nzAlign="left"> {{ data.groupName }}</td>
|
||||||
|
<td nzAlign="left"> {{ data.username }}</td>
|
||||||
|
<td nzAlign="left"> {{ data.displayName }}</td>
|
||||||
|
<td nzAlign="left"> {{ data.department }}</td>
|
||||||
|
<td nzAlign="left"> {{ data.jobTitle }}</td>
|
||||||
|
<td nzAlign="center"> {{ data.gender == 1 ? ('mxk.users.gender.female' | i18n) :
|
||||||
|
('mxk.users.gender.male' | i18n) }}</td>
|
||||||
|
<td nzAlign="center" nzBreakWord="false">
|
||||||
|
<div nz-col>
|
||||||
|
<button *ngIf="data.category == 'static'" nz-button type="button"
|
||||||
|
(click)="onDelete($event, data.id)" nzDanger>{{
|
||||||
|
'mxk.text.delete' | i18n
|
||||||
|
}}</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</nz-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nz-card>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nz-card>
|
</nz-card>
|
||||||
@ -28,6 +28,7 @@ import { NzTableQueryParams } from 'ng-zorro-antd/table';
|
|||||||
import { NzFormatEmitEvent, NzTreeNode, NzTreeNodeOptions } from 'ng-zorro-antd/tree';
|
import { NzFormatEmitEvent, NzTreeNode, NzTreeNodeOptions } from 'ng-zorro-antd/tree';
|
||||||
|
|
||||||
import { GroupMembersService } from '../../../service/group-members.service';
|
import { GroupMembersService } from '../../../service/group-members.service';
|
||||||
|
import { GroupsService } from '../../../service/groups.service';
|
||||||
import { set2String } from '../../../shared/index';
|
import { set2String } from '../../../shared/index';
|
||||||
import { SelectGroupsComponent } from '../groups/select-groups/select-groups.component';
|
import { SelectGroupsComponent } from '../groups/select-groups/select-groups.component';
|
||||||
import { GroupMembersEditerComponent } from './group-members-editer/group-members-editer.component';
|
import { GroupMembersEditerComponent } from './group-members-editer/group-members-editer.component';
|
||||||
@ -67,44 +68,45 @@ export class GroupMembersComponent implements OnInit {
|
|||||||
indeterminate: boolean;
|
indeterminate: boolean;
|
||||||
checked: boolean;
|
checked: boolean;
|
||||||
} = {
|
} = {
|
||||||
params: {
|
params: {
|
||||||
groupName: '',
|
groupName: '',
|
||||||
displayName: '',
|
displayName: '',
|
||||||
username: '',
|
username: '',
|
||||||
groupId: '',
|
groupId: '',
|
||||||
appName: '',
|
appName: '',
|
||||||
appId: '',
|
appId: '',
|
||||||
startDate: '',
|
startDate: '',
|
||||||
endDate: '',
|
endDate: '',
|
||||||
startDatePicker: addDays(new Date(), -30),
|
startDatePicker: addDays(new Date(), -30),
|
||||||
endDatePicker: new Date(),
|
endDatePicker: new Date(),
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
pageNumber: 1,
|
pageNumber: 1,
|
||||||
pageSizeOptions: [10, 20, 50]
|
pageSizeOptions: [10, 20, 50]
|
||||||
},
|
},
|
||||||
results: {
|
results: {
|
||||||
records: 0,
|
records: 0,
|
||||||
rows: []
|
rows: []
|
||||||
},
|
},
|
||||||
expandForm: false,
|
expandForm: false,
|
||||||
submitLoading: false,
|
submitLoading: false,
|
||||||
tableLoading: false,
|
tableLoading: false,
|
||||||
tableInitialize: true,
|
tableInitialize: true,
|
||||||
tableCheckedId: new Set<String>(),
|
tableCheckedId: new Set<String>(),
|
||||||
indeterminate: false,
|
indeterminate: false,
|
||||||
checked: false
|
checked: false
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private modalService: NzModalService,
|
private modalService: NzModalService,
|
||||||
private groupMembersService: GroupMembersService,
|
private groupMembersService: GroupMembersService,
|
||||||
|
private groupsService: GroupsService,
|
||||||
private viewContainerRef: ViewContainerRef,
|
private viewContainerRef: ViewContainerRef,
|
||||||
private fb: FormBuilder,
|
private fb: FormBuilder,
|
||||||
private msg: NzMessageService,
|
private msg: NzMessageService,
|
||||||
@Inject(ALAIN_I18N_TOKEN) private i18n: I18NService,
|
@Inject(ALAIN_I18N_TOKEN) private i18n: I18NService,
|
||||||
private route: ActivatedRoute,
|
private route: ActivatedRoute,
|
||||||
private cdr: ChangeDetectorRef
|
private cdr: ChangeDetectorRef
|
||||||
) {}
|
) { }
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
if (this.route.snapshot.queryParams['username']) {
|
if (this.route.snapshot.queryParams['username']) {
|
||||||
@ -266,4 +268,94 @@ export class GroupMembersComponent implements OnInit {
|
|||||||
this.query.results.rows.filter(({ disabled }) => !disabled).forEach(({ id }) => this.updateTableCheckedSet(id, checked));
|
this.query.results.rows.filter(({ disabled }) => !disabled).forEach(({ id }) => this.updateTableCheckedSet(id, checked));
|
||||||
this.refreshTableCheckedStatus();
|
this.refreshTableCheckedStatus();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//group list
|
||||||
|
groupQuery: {
|
||||||
|
params: {
|
||||||
|
groupName: String;
|
||||||
|
pageSize: number;
|
||||||
|
pageNumber: number;
|
||||||
|
pageSizeOptions: number[];
|
||||||
|
};
|
||||||
|
results: {
|
||||||
|
records: number;
|
||||||
|
rows: NzSafeAny[];
|
||||||
|
};
|
||||||
|
expandForm: Boolean;
|
||||||
|
submitLoading: boolean;
|
||||||
|
tableLoading: boolean;
|
||||||
|
tableCheckedId: Set<String>;
|
||||||
|
indeterminate: boolean;
|
||||||
|
checked: boolean;
|
||||||
|
} = {
|
||||||
|
params: {
|
||||||
|
groupName: '',
|
||||||
|
pageSize: 10,
|
||||||
|
pageNumber: 1,
|
||||||
|
pageSizeOptions: [10, 20, 50]
|
||||||
|
},
|
||||||
|
results: {
|
||||||
|
records: 0,
|
||||||
|
rows: []
|
||||||
|
},
|
||||||
|
expandForm: false,
|
||||||
|
submitLoading: false,
|
||||||
|
tableLoading: false,
|
||||||
|
tableCheckedId: new Set<String>(),
|
||||||
|
indeterminate: false,
|
||||||
|
checked: false
|
||||||
|
};
|
||||||
|
|
||||||
|
onGroupSearch(): void {
|
||||||
|
this.fetchGroup();
|
||||||
|
}
|
||||||
|
|
||||||
|
onGroupQueryParamsChange(tableQueryParams: NzTableQueryParams): void {
|
||||||
|
this.groupQuery.params.pageNumber = tableQueryParams.pageIndex;
|
||||||
|
this.groupQuery.params.pageSize = tableQueryParams.pageSize;
|
||||||
|
this.fetchGroup();
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchGroup(): void {
|
||||||
|
this.groupQuery.submitLoading = true;
|
||||||
|
this.groupQuery.tableLoading = true;
|
||||||
|
this.groupQuery.indeterminate = false;
|
||||||
|
this.groupQuery.checked = false;
|
||||||
|
this.groupQuery.tableCheckedId.clear();
|
||||||
|
this.groupsService.fetch(this.groupQuery.params).subscribe(res => {
|
||||||
|
this.groupQuery.results = res.data;
|
||||||
|
this.groupQuery.submitLoading = false;
|
||||||
|
this.groupQuery.tableLoading = false;
|
||||||
|
this.cdr.detectChanges();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
updateGroupTableCheckedSet(id: String, checked: boolean): void {
|
||||||
|
if (checked) {
|
||||||
|
this.groupQuery.tableCheckedId.add(id);
|
||||||
|
} else {
|
||||||
|
this.groupQuery.tableCheckedId.delete(id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
refreshGroupTableCheckedStatus(): void {
|
||||||
|
const listOfEnabledData = this.groupQuery.results.rows.filter(({ disabled }) => !disabled);
|
||||||
|
this.groupQuery.checked = listOfEnabledData.every(({ id }) => this.groupQuery.tableCheckedId.has(id));
|
||||||
|
this.groupQuery.indeterminate = listOfEnabledData.some(({ id }) => this.groupQuery.tableCheckedId.has(id)) && !this.groupQuery.checked;
|
||||||
|
}
|
||||||
|
|
||||||
|
onGroupTableItemChecked(groupId: String, groupName: String, checked: boolean): void {
|
||||||
|
console.log(`checked ${checked} , groupId ${groupId} , groupName ${groupName}`);
|
||||||
|
this.onGroupTableAllChecked(false);
|
||||||
|
this.updateGroupTableCheckedSet(groupId, checked);
|
||||||
|
this.refreshGroupTableCheckedStatus();
|
||||||
|
this.query.params.groupId = groupId;
|
||||||
|
this.query.params.groupName = groupName;
|
||||||
|
this.fetch();
|
||||||
|
}
|
||||||
|
|
||||||
|
onGroupTableAllChecked(checked: boolean): void {
|
||||||
|
this.groupQuery.results.rows.filter(({ disabled }) => !disabled).forEach(({ id }) => this.updateGroupTableCheckedSet(id, checked));
|
||||||
|
this.refreshGroupTableCheckedStatus();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -24,7 +24,7 @@ import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
|
|||||||
|
|
||||||
import { Groups } from '../../../../entity/Groups';
|
import { Groups } from '../../../../entity/Groups';
|
||||||
import { TreeNodes } from '../../../../entity/TreeNodes';
|
import { TreeNodes } from '../../../../entity/TreeNodes';
|
||||||
import { GroupsService } from '../../../../service/Groups.service';
|
import { GroupsService } from '../../../../service/groups.service';
|
||||||
import { OrganizationsService } from '../../../../service/organizations.service';
|
import { OrganizationsService } from '../../../../service/organizations.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
@ -47,9 +47,9 @@ export class GroupEditerComponent implements OnInit {
|
|||||||
submitting: boolean;
|
submitting: boolean;
|
||||||
model: Groups;
|
model: Groups;
|
||||||
} = {
|
} = {
|
||||||
submitting: false,
|
submitting: false,
|
||||||
model: new Groups()
|
model: new Groups()
|
||||||
};
|
};
|
||||||
|
|
||||||
// TreeNodes
|
// TreeNodes
|
||||||
treeNodes = new TreeNodes(false);
|
treeNodes = new TreeNodes(false);
|
||||||
@ -66,7 +66,7 @@ export class GroupEditerComponent implements OnInit {
|
|||||||
private msg: NzMessageService,
|
private msg: NzMessageService,
|
||||||
@Inject(ALAIN_I18N_TOKEN) private i18n: I18NService,
|
@Inject(ALAIN_I18N_TOKEN) private i18n: I18NService,
|
||||||
private cdr: ChangeDetectorRef
|
private cdr: ChangeDetectorRef
|
||||||
) {}
|
) { }
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this.tree();
|
this.tree();
|
||||||
|
|||||||
@ -25,7 +25,7 @@ import { NzMessageService } from 'ng-zorro-antd/message';
|
|||||||
import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
|
import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
|
||||||
import { NzTableQueryParams } from 'ng-zorro-antd/table';
|
import { NzTableQueryParams } from 'ng-zorro-antd/table';
|
||||||
|
|
||||||
import { GroupsService } from '../../../service/Groups.service';
|
import { GroupsService } from '../../../service/groups.service';
|
||||||
import { set2String } from '../../../shared/index';
|
import { set2String } from '../../../shared/index';
|
||||||
import { GroupEditerComponent } from './group-editer/group-editer.component';
|
import { GroupEditerComponent } from './group-editer/group-editer.component';
|
||||||
|
|
||||||
@ -59,29 +59,29 @@ export class GroupsComponent implements OnInit {
|
|||||||
indeterminate: boolean;
|
indeterminate: boolean;
|
||||||
checked: boolean;
|
checked: boolean;
|
||||||
} = {
|
} = {
|
||||||
params: {
|
params: {
|
||||||
groupName: '',
|
groupName: '',
|
||||||
displayName: '',
|
displayName: '',
|
||||||
employeeNumber: '',
|
employeeNumber: '',
|
||||||
startDate: '',
|
startDate: '',
|
||||||
endDate: '',
|
endDate: '',
|
||||||
startDatePicker: addDays(new Date(), -30),
|
startDatePicker: addDays(new Date(), -30),
|
||||||
endDatePicker: new Date(),
|
endDatePicker: new Date(),
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
pageNumber: 1,
|
pageNumber: 1,
|
||||||
pageSizeOptions: [10, 20, 50]
|
pageSizeOptions: [10, 20, 50]
|
||||||
},
|
},
|
||||||
results: {
|
results: {
|
||||||
records: 0,
|
records: 0,
|
||||||
rows: []
|
rows: []
|
||||||
},
|
},
|
||||||
expandForm: false,
|
expandForm: false,
|
||||||
submitLoading: false,
|
submitLoading: false,
|
||||||
tableLoading: false,
|
tableLoading: false,
|
||||||
tableCheckedId: new Set<String>(),
|
tableCheckedId: new Set<String>(),
|
||||||
indeterminate: false,
|
indeterminate: false,
|
||||||
checked: false
|
checked: false
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private modalService: NzModalService,
|
private modalService: NzModalService,
|
||||||
@ -92,7 +92,7 @@ export class GroupsComponent implements OnInit {
|
|||||||
private router: Router,
|
private router: Router,
|
||||||
@Inject(ALAIN_I18N_TOKEN) private i18n: I18NService,
|
@Inject(ALAIN_I18N_TOKEN) private i18n: I18NService,
|
||||||
private cdr: ChangeDetectorRef
|
private cdr: ChangeDetectorRef
|
||||||
) {}
|
) { }
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this.fetch();
|
this.fetch();
|
||||||
@ -108,7 +108,7 @@ export class GroupsComponent implements OnInit {
|
|||||||
this.fetch();
|
this.fetch();
|
||||||
}
|
}
|
||||||
|
|
||||||
onReset(): void {}
|
onReset(): void { }
|
||||||
|
|
||||||
onBatchDelete(e: MouseEvent): void {
|
onBatchDelete(e: MouseEvent): void {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|||||||
@ -23,7 +23,7 @@ import { NzMessageService } from 'ng-zorro-antd/message';
|
|||||||
import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
|
import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
|
||||||
import { NzTableQueryParams } from 'ng-zorro-antd/table';
|
import { NzTableQueryParams } from 'ng-zorro-antd/table';
|
||||||
|
|
||||||
import { GroupsService } from '../../../../service/Groups.service';
|
import { GroupsService } from '../../../../service/groups.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-select-groups',
|
selector: 'app-select-groups',
|
||||||
@ -55,29 +55,29 @@ export class SelectGroupsComponent implements OnInit {
|
|||||||
indeterminate: boolean;
|
indeterminate: boolean;
|
||||||
checked: boolean;
|
checked: boolean;
|
||||||
} = {
|
} = {
|
||||||
params: {
|
params: {
|
||||||
groupName: '',
|
groupName: '',
|
||||||
displayName: '',
|
displayName: '',
|
||||||
protocol: '',
|
protocol: '',
|
||||||
startDate: '',
|
startDate: '',
|
||||||
endDate: '',
|
endDate: '',
|
||||||
startDatePicker: addDays(new Date(), -30),
|
startDatePicker: addDays(new Date(), -30),
|
||||||
endDatePicker: new Date(),
|
endDatePicker: new Date(),
|
||||||
pageSize: 5,
|
pageSize: 5,
|
||||||
pageNumber: 1,
|
pageNumber: 1,
|
||||||
pageSizeOptions: [5, 15, 50]
|
pageSizeOptions: [5, 15, 50]
|
||||||
},
|
},
|
||||||
results: {
|
results: {
|
||||||
records: 0,
|
records: 0,
|
||||||
rows: []
|
rows: []
|
||||||
},
|
},
|
||||||
expandForm: false,
|
expandForm: false,
|
||||||
submitLoading: false,
|
submitLoading: false,
|
||||||
tableLoading: false,
|
tableLoading: false,
|
||||||
tableCheckedId: new Set<String>(),
|
tableCheckedId: new Set<String>(),
|
||||||
indeterminate: false,
|
indeterminate: false,
|
||||||
checked: false
|
checked: false
|
||||||
};
|
};
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private modalRef: NzModalRef,
|
private modalRef: NzModalRef,
|
||||||
@ -86,7 +86,7 @@ export class SelectGroupsComponent implements OnInit {
|
|||||||
private fb: FormBuilder,
|
private fb: FormBuilder,
|
||||||
private msg: NzMessageService,
|
private msg: NzMessageService,
|
||||||
private cdr: ChangeDetectorRef
|
private cdr: ChangeDetectorRef
|
||||||
) {}
|
) { }
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this.fetch();
|
this.fetch();
|
||||||
@ -102,7 +102,7 @@ export class SelectGroupsComponent implements OnInit {
|
|||||||
this.fetch();
|
this.fetch();
|
||||||
}
|
}
|
||||||
|
|
||||||
onReset(): void {}
|
onReset(): void { }
|
||||||
|
|
||||||
fetch(): void {
|
fetch(): void {
|
||||||
this.query.submitLoading = true;
|
this.query.submitLoading = true;
|
||||||
|
|||||||
@ -36,7 +36,7 @@ import { NzTableQueryParams } from 'ng-zorro-antd/table';
|
|||||||
import { NzFormatEmitEvent, NzTreeNode, NzTreeNodeOptions, NzTreeComponent } from 'ng-zorro-antd/tree';
|
import { NzFormatEmitEvent, NzTreeNode, NzTreeNodeOptions, NzTreeComponent } from 'ng-zorro-antd/tree';
|
||||||
|
|
||||||
import { TreeNodes } from '../../../entity/TreeNodes';
|
import { TreeNodes } from '../../../entity/TreeNodes';
|
||||||
import { GroupsService } from '../../../service/Groups.service';
|
import { GroupsService } from '../../../service/groups.service';
|
||||||
import { GroupPrivilegesService } from '../../../service/group-privileges.service';
|
import { GroupPrivilegesService } from '../../../service/group-privileges.service';
|
||||||
import { ResourcesService } from '../../../service/resources.service';
|
import { ResourcesService } from '../../../service/resources.service';
|
||||||
import { set2String } from '../../../shared/index';
|
import { set2String } from '../../../shared/index';
|
||||||
@ -75,31 +75,31 @@ export class PrivilegesComponent implements OnInit {
|
|||||||
indeterminate: boolean;
|
indeterminate: boolean;
|
||||||
checked: boolean;
|
checked: boolean;
|
||||||
} = {
|
} = {
|
||||||
params: {
|
params: {
|
||||||
groupName: '',
|
groupName: '',
|
||||||
displayName: '',
|
displayName: '',
|
||||||
employeeNumber: '',
|
employeeNumber: '',
|
||||||
appId: '',
|
appId: '',
|
||||||
appName: '',
|
appName: '',
|
||||||
startDate: '',
|
startDate: '',
|
||||||
endDate: '',
|
endDate: '',
|
||||||
startDatePicker: addDays(new Date(), -30),
|
startDatePicker: addDays(new Date(), -30),
|
||||||
endDatePicker: new Date(),
|
endDatePicker: new Date(),
|
||||||
pageSize: 10,
|
pageSize: 10,
|
||||||
pageNumber: 1,
|
pageNumber: 1,
|
||||||
pageSizeOptions: [10, 20, 50]
|
pageSizeOptions: [10, 20, 50]
|
||||||
},
|
},
|
||||||
results: {
|
results: {
|
||||||
records: 0,
|
records: 0,
|
||||||
rows: []
|
rows: []
|
||||||
},
|
},
|
||||||
expandForm: false,
|
expandForm: false,
|
||||||
submitLoading: false,
|
submitLoading: false,
|
||||||
tableLoading: false,
|
tableLoading: false,
|
||||||
tableCheckedId: new Set<String>(),
|
tableCheckedId: new Set<String>(),
|
||||||
indeterminate: false,
|
indeterminate: false,
|
||||||
checked: false
|
checked: false
|
||||||
};
|
};
|
||||||
|
|
||||||
treeNodes = new TreeNodes(true);
|
treeNodes = new TreeNodes(true);
|
||||||
|
|
||||||
@ -114,7 +114,7 @@ export class PrivilegesComponent implements OnInit {
|
|||||||
@Inject(ALAIN_I18N_TOKEN) private i18n: I18NService,
|
@Inject(ALAIN_I18N_TOKEN) private i18n: I18NService,
|
||||||
private cdr: ChangeDetectorRef,
|
private cdr: ChangeDetectorRef,
|
||||||
private http: _HttpClient
|
private http: _HttpClient
|
||||||
) {}
|
) { }
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this.fetch();
|
this.fetch();
|
||||||
@ -130,7 +130,7 @@ export class PrivilegesComponent implements OnInit {
|
|||||||
this.fetch();
|
this.fetch();
|
||||||
}
|
}
|
||||||
|
|
||||||
onReset(): void {}
|
onReset(): void { }
|
||||||
|
|
||||||
onSave(e: MouseEvent): void {
|
onSave(e: MouseEvent): void {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user