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

maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/users/user-editer/user-editer.component.html

@@ -307,20 +307,28 @@
         </div>
         <div nz-row>
           <nz-form-item>
-            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="departmentId">{{ 'mxk.users.departmentId' | i18n }}
-            </nz-form-label>
+            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="departmentId">{{ 'mxk.users.departmentId' | i18n }}</nz-form-label>
             <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-              nzErrorTip="The input is not valid departmentId!">
-              <input [(ngModel)]="form.model.departmentId" [ngModelOptions]="{ standalone: true }" nz-input
-                name="departmentId" id="departmentId" />
+                             nzErrorTip="The input is not valid departmentId!">
+              <input [(ngModel)]="form.model.departmentId" [ngModelOptions]="{ standalone: true }" [disabled]="true" nz-input name="departmentId" id="departmentId" />
             </nz-form-control>
           </nz-form-item>
+
           <nz-form-item>
-            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="department">{{ 'mxk.users.department' | i18n }}</nz-form-label>
-            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48"
-              nzErrorTip="The input is not valid department!">
-              <input [(ngModel)]="form.model.department" [ngModelOptions]="{ standalone: true }" nz-input
-                name="department" id="department" />
+            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="departmentId">{{ 'mxk.users.department' | i18n }}
+            </nz-form-label>
+            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid departmentId!">
+              <!-- <input [(ngModel)]="form.model.departmentId" [ngModelOptions]="{ standalone: true }" nz-input name="departmentId" id="departmentId" />-->
+              <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-item>
         </div>
@@ -562,4 +570,4 @@
 <div *nzModalFooter>
   <button nz-button nzType="default" (click)="onClose($event)">{{ 'mxk.text.close' | i18n }}</button>
   <button nz-button nzType="primary" (click)="onSubmit($event)">{{ 'mxk.text.submit' | i18n }}</button>
-</div>
+</div>

maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/users/user-editer/user-editer.component.ts

@@ -14,7 +14,7 @@
  * 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 { I18NService } from '@core';
 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 { UsersService } from '../../../service/users.service';
+import { NzTreeSelectComponent } from "ng-zorro-antd/tree-select";
 
 const getBase64 = (file: File): Promise<string | ArrayBuffer | null> =>
   new Promise((resolve, reject) => {
@@ -66,7 +67,8 @@ export class UserEditerComponent implements OnInit {
   @Input() id?: String;
   @Input() parentNode?: NzTreeNode;
   @Input() isEdit?: boolean;
-
+  @Input() orgNodes!: any[];
+  @ViewChild("orgTree") orgTree!: NzTreeSelectComponent;
   form: {
     submitting: boolean;
     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 {
     e.preventDefault();
     this.modalRef.destroy({ refresh: false });

maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/users/users.component.ts

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