You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
189 lines
6.0 KiB
189 lines
6.0 KiB
<app-page class="p-3" [actions]="actionsTpl">
|
|
<ng-template #actionsTpl>
|
|
<nz-space>
|
|
<button
|
|
*nzSpaceItem
|
|
nz-button
|
|
nzType="primary"
|
|
[disabled]="organization?.organizationType !== '2'"
|
|
(click)="onCreate()"
|
|
>
|
|
新建
|
|
</button>
|
|
</nz-space>
|
|
</ng-template>
|
|
<div class="flex flex-1">
|
|
<nz-card [nzBordered]="false" class="org shadow" nzSize="small">
|
|
<app-component-org-tree class="block w-60" (onOrgSelectedChange)="onOrgSelectedChange($event)" />
|
|
</nz-card>
|
|
<div class="flex-1 pl-3">
|
|
<app-server-paginated-table [options]="table" [renderColumn]="renderColumnTpl" [formGroup]="queryForm">
|
|
<ng-template #renderColumnTpl let-data let-key="key" let-row="row">
|
|
@switch (key) {
|
|
@case ('avatar') {
|
|
@if (data) {
|
|
<nz-avatar [nzSrc]="data"></nz-avatar>
|
|
} @else {
|
|
<nz-avatar [nzText]="row.userName[0]" class="!bg-orange-400"></nz-avatar>
|
|
}
|
|
}
|
|
@case ('status') {
|
|
<nz-badge
|
|
[nzText]="data === 0 ? '在职' : '离职'"
|
|
[nzStatus]="data === 0 ? 'processing' : 'error'"
|
|
/>
|
|
}
|
|
@case ('sex') {
|
|
<nz-tag>
|
|
@switch (data) {
|
|
@case ('0') {
|
|
男
|
|
}
|
|
@case ('1') {
|
|
女
|
|
}
|
|
@default {
|
|
未知
|
|
}
|
|
}
|
|
</nz-tag>
|
|
}
|
|
@default {
|
|
{{ data }}
|
|
}
|
|
}
|
|
</ng-template>
|
|
<ng-container *appTableAction>
|
|
<nz-space>
|
|
<button *nzSpaceItem nz-button nzType="link">删除</button>
|
|
</nz-space>
|
|
</ng-container>
|
|
<ng-container *appTableForm>
|
|
<app-query-item label="账号名">
|
|
<input nz-input placeholder="请输入" formControlName="loginName" />
|
|
</app-query-item>
|
|
<app-query-item label="姓名">
|
|
<input nz-input placeholder="请输入" formControlName="userName" />
|
|
</app-query-item>
|
|
<app-query-item label="手机号">
|
|
<input nz-input placeholder="请输入" formControlName="phone" />
|
|
</app-query-item>
|
|
<app-query-item label="状态">
|
|
<nz-select
|
|
nzPlacement="bottomRight"
|
|
nzBorderless
|
|
class="!w-auto"
|
|
[nzDropdownMatchSelectWidth]="false"
|
|
formControlName="status"
|
|
nzAllowClear
|
|
>
|
|
<nz-option [nzValue]="0" nzLabel="在职"></nz-option>
|
|
<nz-option [nzValue]="1" nzLabel="离职"></nz-option>
|
|
</nz-select>
|
|
</app-query-item>
|
|
<app-query-item label="性别">
|
|
<nz-select
|
|
nzPlacement="bottomRight"
|
|
nzBorderless
|
|
class="!w-auto"
|
|
[nzDropdownMatchSelectWidth]="false"
|
|
formControlName="sex"
|
|
nzAllowClear
|
|
>
|
|
<nz-option [nzValue]="0" nzLabel="男"></nz-option>
|
|
<nz-option [nzValue]="1" nzLabel="女"></nz-option>
|
|
<nz-option [nzValue]="2" nzLabel="未知"></nz-option>
|
|
</nz-select>
|
|
</app-query-item>
|
|
</ng-container>
|
|
</app-server-paginated-table>
|
|
</div>
|
|
</div>
|
|
</app-page>
|
|
|
|
<ng-template #drawerFooterTpl>
|
|
<nz-space>
|
|
<button *nzSpaceItem nz-button nzType="primary" (click)="onConfirm()">确定</button>
|
|
<button *nzSpaceItem nz-button nzType="default" (click)="onCancel()">取消</button>
|
|
</nz-space>
|
|
</ng-template>
|
|
|
|
<ng-template #formContentTpl>
|
|
<form nz-form nzLayout="vertical" [formGroup]="createForm">
|
|
<nz-form-item>
|
|
<nz-form-label nzRequired> 姓名 </nz-form-label>
|
|
<nz-form-control [nzErrorTip]="errorTpl">
|
|
<input type="text" nz-input formControlName="userName" placeholder="请输入姓名" />
|
|
</nz-form-control>
|
|
</nz-form-item>
|
|
<nz-form-item>
|
|
<nz-form-label nzRequired> 账号名 </nz-form-label>
|
|
<nz-form-control [nzErrorTip]="errorTpl">
|
|
<input type="text" nz-input formControlName="loginName" placeholder="请输入账号名" />
|
|
</nz-form-control>
|
|
</nz-form-item>
|
|
<nz-form-item>
|
|
<nz-form-label nzRequired> 联系电话 </nz-form-label>
|
|
<nz-form-control [nzErrorTip]="errorTpl">
|
|
<input type="text" nz-input formControlName="phone" placeholder="请输入联系电话" />
|
|
</nz-form-control>
|
|
</nz-form-item>
|
|
<nz-form-item>
|
|
<nz-form-label> 邮箱 </nz-form-label>
|
|
<nz-form-control [nzErrorTip]="errorTpl">
|
|
<input type="text" nz-input formControlName="email" placeholder="请输入邮箱" />
|
|
</nz-form-control>
|
|
</nz-form-item>
|
|
|
|
<nz-form-item>
|
|
<nz-form-label> 密码 </nz-form-label>
|
|
<nz-form-control [nzErrorTip]="errorTpl">
|
|
<input type="password" nz-input formControlName="password" placeholder="请输入密码" />
|
|
</nz-form-control>
|
|
</nz-form-item>
|
|
|
|
<nz-form-item>
|
|
<nz-form-label> 确认密码 </nz-form-label>
|
|
<nz-form-control [nzErrorTip]="errorTpl">
|
|
<input type="password" nz-input formControlName="repassword" placeholder="请输入密码" />
|
|
</nz-form-control>
|
|
</nz-form-item>
|
|
<nz-form-item>
|
|
<nz-form-label> 状态 </nz-form-label>
|
|
<nz-form-control [nzErrorTip]="errorTpl">
|
|
<nz-radio-group formControlName="status">
|
|
<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> 头像 </nz-form-label>
|
|
<nz-form-control [nzErrorTip]="errorTpl">
|
|
<input type="hidden" nz-input formControlName="avatar" />
|
|
<div class="mb-2" *ngIf="iconPreview">
|
|
<img [src]="iconPreview" class="h-20 w-20" />
|
|
</div>
|
|
<button class="upload-btn" nz-button [nzLoading]="uploadLoading">
|
|
<i nz-icon nzType="upload"></i>
|
|
上传图片
|
|
<input type="file" (change)="onFileChange($event)" accept=".jpg,.jpeg,.png" />
|
|
</button>
|
|
</nz-form-control>
|
|
</nz-form-item>
|
|
<nz-form-item>
|
|
<nz-form-label> 性别 </nz-form-label>
|
|
<nz-form-control [nzErrorTip]="errorTpl">
|
|
<nz-radio-group formControlName="sex">
|
|
<label nz-radio nzValue="0"> 男 </label>
|
|
<label nz-radio nzValue="1"> 女 </label>
|
|
<label nz-radio nzValue="2"> 未知 </label>
|
|
</nz-radio-group>
|
|
</nz-form-control>
|
|
</nz-form-item>
|
|
</form>
|
|
</ng-template>
|
|
|
|
<ng-template #errorTpl let-control>
|
|
<form-error-tips [control]="control"></form-error-tips>
|
|
</ng-template>
|
|
|