提交修改用户部门名称由输入框->树形选择

This commit is contained in:
shibanglin 2022-09-20 10:53:45 +08:00
parent 45d32a59c5
commit aaae8f207c
3 changed files with 31 additions and 14 deletions

View File

@ -307,20 +307,28 @@
</div> </div>
<div nz-row> <div nz-row>
<nz-form-item> <nz-form-item>
<nz-form-label [nzSm]="8" [nzXs]="24" nzFor="departmentId">{{ 'mxk.users.departmentId' | i18n }} <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="departmentId">{{ 'mxk.users.departmentId' | i18n }}</nz-form-label>
</nz-form-label>
<nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
nzErrorTip="The input is not valid departmentId!"> nzErrorTip="The input is not valid departmentId!">
<input [(ngModel)]="form.model.departmentId" [ngModelOptions]="{ standalone: true }" nz-input <input [(ngModel)]="form.model.departmentId" [ngModelOptions]="{ standalone: true }" [disabled]="true" nz-input name="departmentId" id="departmentId" />
name="departmentId" id="departmentId" />
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<nz-form-item> <nz-form-item>
<nz-form-label [nzSm]="8" [nzXs]="24" nzFor="department">{{ 'mxk.users.department' | i18n }}</nz-form-label> <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="departmentId">{{ 'mxk.users.department' | i18n }}
<nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" </nz-form-label>
nzErrorTip="The input is not valid department!"> <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid departmentId!">
<input [(ngModel)]="form.model.department" [ngModelOptions]="{ standalone: true }" nz-input <!-- <input [(ngModel)]="form.model.departmentId" [ngModelOptions]="{ standalone: true }" nz-input name="departmentId" id="departmentId" />-->
name="department" id="department" /> <nz-tree-select
#orgTree
[nzNodes]="orgNodes"
nzShowSearch
nzPlaceHolder="Please select"
[(ngModel)]="form.model.departmentId"
[ngModelOptions]="{ standalone: true }"
(ngModelChange)="onDeptChange($event)"
nzVirtualHeight="300px"
></nz-tree-select>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
</div> </div>

View File

@ -14,7 +14,7 @@
* limitations under the License. * limitations under the License.
*/ */
import { Component, ChangeDetectorRef, Input, OnInit, Inject } from '@angular/core'; import { Component, ChangeDetectorRef, Input, OnInit, Inject, ViewChild} from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { I18NService } from '@core'; import { I18NService } from '@core';
import { _HttpClient, ALAIN_I18N_TOKEN, SettingsService } from '@delon/theme'; import { _HttpClient, ALAIN_I18N_TOKEN, SettingsService } from '@delon/theme';
@ -27,6 +27,7 @@ import { NzUploadFile, NzUploadChangeParam } from 'ng-zorro-antd/upload';
import { Users } from '../../../entity/Users'; import { Users } from '../../../entity/Users';
import { UsersService } from '../../../service/users.service'; import { UsersService } from '../../../service/users.service';
import { NzTreeSelectComponent } from "ng-zorro-antd/tree-select";
const getBase64 = (file: File): Promise<string | ArrayBuffer | null> => const getBase64 = (file: File): Promise<string | ArrayBuffer | null> =>
new Promise((resolve, reject) => { new Promise((resolve, reject) => {
@ -66,7 +67,8 @@ export class UserEditerComponent implements OnInit {
@Input() id?: String; @Input() id?: String;
@Input() parentNode?: NzTreeNode; @Input() parentNode?: NzTreeNode;
@Input() isEdit?: boolean; @Input() isEdit?: boolean;
@Input() orgNodes!: any[];
@ViewChild("orgTree") orgTree!: NzTreeSelectComponent;
form: { form: {
submitting: boolean; submitting: boolean;
model: Users; model: Users;
@ -128,7 +130,12 @@ export class UserEditerComponent implements OnInit {
} }
} }
} }
onDeptChange(key: string): void {
let node = this.orgTree.getTreeNodeByKey(key);
if (node){
this.form.model.department = node.title
}
}
onClose(e: MouseEvent): void { onClose(e: MouseEvent): void {
e.preventDefault(); e.preventDefault();
this.modalRef.destroy({ refresh: false }); this.modalRef.destroy({ refresh: false });

View File

@ -183,6 +183,7 @@ export class UsersComponent implements OnInit {
nzComponentParams: { nzComponentParams: {
isEdit: false, isEdit: false,
parentNode: this.treeNodes.activated, parentNode: this.treeNodes.activated,
orgNodes: this.treeNodes.nodes,
id: '' id: ''
}, },
nzWidth: 750, nzWidth: 750,
@ -204,6 +205,7 @@ export class UsersComponent implements OnInit {
nzViewContainerRef: this.viewContainerRef, nzViewContainerRef: this.viewContainerRef,
nzComponentParams: { nzComponentParams: {
isEdit: true, isEdit: true,
orgNodes: this.treeNodes.nodes,
id: editId id: editId
}, },
nzWidth: 750, nzWidth: 750,