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

<div *nzModalTitle> {{ isEdit ? ('mxk.text.edit' | i18n) : ('mxk.text.add' | i18n) }} </div>
<div>
  <form nz-form [formGroup]="formGroup" (ngSubmit)="onSubmit($event)" se-container="1">
    <nz-tabset style="width: 100%">
      <nz-tab nzTitle="{{ 'mxk.users.tab.basic' | i18n }}">
        <div nz-row>
          <nz-form-item style="display: none">
            <nz-form-label [nzMd]="8" nzFor="id">{{ 'mxk.text.id' | i18n }}</nz-form-label>
            <nz-form-control [nzMd]="16" nzErrorTip="The input is not valid id!">
              <input
                [(ngModel)]="form.model.id"
                disabled="{{ isEdit }}"
                [ngModelOptions]="{ standalone: true }"
                nz-input
                name="id"
                id="id"
              />
              <input
                [(ngModel)]="form.model.pictureId"
                disabled="{{ isEdit }}"
                [ngModelOptions]="{ standalone: true }"
                nz-input
                name="pictureId"
                id="pictureId"
              />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <div nz-row style="width: 100%; margin-bottom: 18px">
              <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="name">{{ 'mxk.users.displayName' | i18n }} </nz-form-label>
              <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid displayName!">
                <input
                  [(ngModel)]="form.model.displayName"
                  [ngModelOptions]="{ standalone: true }"
                  nz-input
                  name="displayName"
                  id="displayName"
                />
              </nz-form-control>
            </div>
            <div nz-row style="width: 100%; margin-bottom: 18px">
              <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="username">{{ 'mxk.users.username' | i18n }} </nz-form-label>
              <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid username!">
                <input [(ngModel)]="form.model.username" [ngModelOptions]="{ standalone: true }" nz-input name="username" id="username" />
              </nz-form-control>
            </div>
            <div nz-row class="{{ isEdit ? 'passwordhidden' : 'passwordshow' }}">
              <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="password">{{ 'mxk.users.password' | i18n }} </nz-form-label>
              <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid password!">
                <nz-input-group [nzAddOnAfter]="suffixPasswordButton" style="width: 100%">
                  <input
                    type="text"
                    nz-input
                    placeholder="new password"
                    [(ngModel)]="form.model.password"
                    [ngModelOptions]="{ standalone: true }"
                    name="password"
                    id="password"
                  />
                </nz-input-group>
                <ng-template #suffixPasswordButton>
                  <button nz-button nzType="primary" nzSearch (click)="onPassword($event)">{{ 'mxk.text.generate' | i18n }}</button>
                </ng-template>
              </nz-form-control>
            </div>
            <div nz-row style="width: 100%">
              <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="gender">{{ 'mxk.users.gender' | i18n }}</nz-form-label>
              <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid gender!">
                <nz-radio-group [(ngModel)]="form.model.gender_select" [ngModelOptions]="{ standalone: true }" nzButtonStyle="solid">
                  <label nz-radio-button nzValue="2">{{ 'mxk.users.gender.male' | i18n }}</label>
                  <label nz-radio-button nzValue="1">{{ 'mxk.users.gender.female' | i18n }}</label>
                </nz-radio-group>
              </nz-form-control>
            </div>
          </nz-form-item>

          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="uploadFile">{{ 'mxk.users.picture' | i18n }}</nz-form-label>
            <div nz-col class="clearfix" nzSm="16" nzXs="24">
              <nz-upload
                nzAction="/file/upload/"
                nzListType="picture-card"
                [(nzFileList)]="fileList"
                nzName="uploadFile"
                [nzShowButton]="fileList.length < 1"
                [nzPreview]="handlePreview"
                (nzChange)="uploadImageChange($event)"
              >
                <div>
                  <i nz-icon nzType="plus"></i>
                  <div style="margin-top: 8px">Upload</div>
                </div>
              </nz-upload>
              <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible = false">
                <ng-template #modalContent>
                  <img [src]="previewImage" [ngStyle]="{ width: '100%' }" />
                </ng-template>
              </nz-modal>
            </div>
          </nz-form-item>
        </div>
        <div nz-row>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="employeeNumber">{{ 'mxk.users.employeeNumber' | i18n }} </nz-form-label>
            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid employeeNumber!">
              <input
                [(ngModel)]="form.model.employeeNumber"
                [ngModelOptions]="{ standalone: true }"
                nz-input
                name="employeeNumber"
                id="employeeNumber"
              />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="windowsAccount">{{ 'mxk.users.windowsAccount' | i18n }} </nz-form-label>
            <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid status!">
              <input
                [(ngModel)]="form.model.windowsAccount"
                [ngModelOptions]="{ standalone: true }"
                nz-input
                name="windowsAccount"
                id="windowsAccount"
              />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-row>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="mobile">{{ 'mxk.users.mobile' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid mobile!">
              <input [(ngModel)]="form.model.mobile" [ngModelOptions]="{ standalone: true }" nz-input name="mobile" id="mobile" />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="email">{{ 'mxk.users.email' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid email!">
              <input [(ngModel)]="form.model.email" [ngModelOptions]="{ standalone: true }" nz-input name="email" id="email" />
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-row>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="userType">{{ 'mxk.users.userType' | i18n }} </nz-form-label>
            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid userType!">
              <nz-select [(ngModel)]="form.model.userType" [ngModelOptions]="{ standalone: true }" name="userType" id="userType">
                <nz-option nzValue="EMPLOYEE" nzLabel="{{ 'mxk.users.userType.employee' | i18n }}"> </nz-option>
                <nz-option nzValue="SUPPLIER" nzLabel="{{ 'mxk.users.userType.supplier' | i18n }}"> </nz-option>
                <nz-option nzValue="CUSTOMER" nzLabel="{{ 'mxk.users.userType.customer' | i18n }}"> </nz-option>
                <nz-option nzValue="CONTRACTOR" nzLabel="{{ 'mxk.users.userType.contractor' | i18n }}"></nz-option>
                <nz-option nzValue="DEALER" nzLabel="{{ 'mxk.users.userType.dealer' | i18n }}"></nz-option>
                <nz-option nzValue="PARTNER" nzLabel="{{ 'mxk.users.userType.partner' | i18n }}"></nz-option>
                <nz-option nzValue="EXTERNAL" nzLabel="{{ 'mxk.users.userType.external' | i18n }}"></nz-option>
                <nz-option nzValue="INTERN" nzLabel="{{ 'mxk.users.userType.intern' | i18n }}"></nz-option>
                <nz-option nzValue="TEMP" nzLabel="{{ 'mxk.users.userType.temp' | i18n }}"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="userState">{{ 'mxk.users.userstate' | i18n }} </nz-form-label>
            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid userState!">
              <nz-select [(ngModel)]="form.model.userState" [ngModelOptions]="{ standalone: true }" name="userState" id="userState">
                <nz-option nzValue="RESIDENT" nzLabel="{{ 'mxk.users.userstate.resident' | i18n }}"> </nz-option>
                <nz-option nzValue="WITHDRAWN" nzLabel="{{ 'mxk.users.userstate.withdrawn' | i18n }}"> </nz-option>
                <nz-option nzValue="INACTIVE" nzLabel="{{ 'mxk.users.userstate.inactive' | i18n }}"> </nz-option>
                <nz-option nzValue="RETIREE" nzLabel="{{ 'mxk.users.userstate.retiree' | i18n }}"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-row>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="sortIndex">{{ 'mxk.text.sortIndex' | i18n }} </nz-form-label>
            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid sortIndex!">
              <nz-input-number
                [(ngModel)]="form.model.sortIndex"
                [ngModelOptions]="{ standalone: true }"
                [nzMin]="1"
                [nzMax]="100000"
                [nzStep]="1"
              ></nz-input-number>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired nzFor="status">{{ 'mxk.text.status' | i18n }} </nz-form-label>
            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid status!">
              <nz-select [(ngModel)]="form.model.str_status" [ngModelOptions]="{ standalone: true }" name="status" id="status">
                <nz-option nzValue="1" nzLabel="{{ 'mxk.users.status.active' | i18n }}"></nz-option>
                <nz-option nzValue="2" nzLabel="{{ 'mxk.users.status.inactive' | i18n }}"></nz-option>
                <nz-option nzValue="4" nzLabel="{{ 'mxk.users.status.forbidden' | i18n }}"></nz-option>
                <nz-option nzValue="5" nzLabel="{{ 'mxk.users.status.lock' | i18n }}"></nz-option>
                <nz-option nzValue="9" nzLabel="{{ 'mxk.users.status.delete' | i18n }}"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
      </nz-tab>
      <nz-tab nzTitle="{{ 'mxk.users.tab.personal' | i18n }}">
        <div nz-row>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="familyName">{{ 'mxk.users.familyName' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="16" [nzXs]="16" nzErrorTip="The input is not valid familyName!">
              <input
                [(ngModel)]="form.model.familyName"
                [ngModelOptions]="{ standalone: true }"
                nz-input
                name="familyName"
                id="familyName"
              />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="middleName">{{ 'mxk.users.middleName' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid middleName!">
              <input
                [(ngModel)]="form.model.middleName"
                [ngModelOptions]="{ standalone: true }"
                nz-input
                name="middleName"
                id="middleName"
              />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-row>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="givenName">{{ 'mxk.users.givenName' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid givenName!">
              <input [(ngModel)]="form.model.givenName" [ngModelOptions]="{ standalone: true }" nz-input name="givenName" id="givenName" />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="nickName">{{ 'mxk.users.nickName' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid nickName!">
              <input [(ngModel)]="form.model.nickName" [ngModelOptions]="{ standalone: true }" nz-input name="nickName" id="nickName" />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-row>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="idType">{{ 'mxk.users.idtype' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid idType!">
              <nz-select [(ngModel)]="form.model.str_idType" [ngModelOptions]="{ standalone: true }" name="idType" id="idType">
                <nz-option nzValue="0" nzLabel="{{ 'mxk.users.idtype.unknown' | i18n }}"></nz-option>
                <nz-option nzValue="1" nzLabel="{{ 'mxk.users.idtype.idcard' | i18n }}"></nz-option>
                <nz-option nzValue="2" nzLabel="{{ 'mxk.users.idtype.passport' | i18n }}"></nz-option>
                <nz-option nzValue="3" nzLabel="{{ 'mxk.users.idtype.studentcard' | i18n }}"></nz-option>
                <nz-option nzValue="4" nzLabel="{{ 'mxk.users.idtype.militarycard' | i18n }}"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="idCardNo">{{ 'mxk.users.idCardNo' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid idCardNo!">
              <input [(ngModel)]="form.model.idCardNo" [ngModelOptions]="{ standalone: true }" nz-input name="idCardNo" id="idCardNo" />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-row>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="married">{{ 'mxk.users.married' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid married!">
              <nz-select [(ngModel)]="form.model.str_married" [ngModelOptions]="{ standalone: true }" name="married" id="married">
                <nz-option nzValue="0" nzLabel="{{ 'mxk.users.married.unknown' | i18n }}"></nz-option>
                <nz-option nzValue="1" nzLabel="{{ 'mxk.users.married.single' | i18n }}"></nz-option>
                <nz-option nzValue="2" nzLabel="{{ 'mxk.users.married.married' | i18n }}"></nz-option>
                <nz-option nzValue="3" nzLabel="{{ 'mxk.users.married.divorce' | i18n }}"></nz-option>
                <nz-option nzValue="4" nzLabel="{{ 'mxk.users.married.widowed' | i18n }}"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="birthDate">{{ 'mxk.users.birthDate' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid birthDate!">
              <input [(ngModel)]="form.model.birthDate" [ngModelOptions]="{ standalone: true }" nz-input name="birthDate" id="birthDate" />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-row>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="education">{{ 'mxk.users.education' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid education!">
              <input [(ngModel)]="form.model.education" [ngModelOptions]="{ standalone: true }" nz-input name="education" />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="graduateFrom">{{ 'mxk.users.graduateFrom' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid graduateFrom!">
              <input [(ngModel)]="form.model.graduateFrom" [ngModelOptions]="{ standalone: true }" nz-input name="graduateFrom" />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-row>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="graduateDate">{{ 'mxk.users.graduateDate' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid graduateDate!">
              <input [(ngModel)]="form.model.graduateDate" [ngModelOptions]="{ standalone: true }" nz-input name="graduateDate" />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="startWorkDate">{{ 'mxk.users.startWorkDate' | i18n }} </nz-form-label>
            <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid startWorkDate!">
              <input
                [(ngModel)]="form.model.startWorkDate"
                [ngModelOptions]="{ standalone: true }"
                nz-input
                name="startWorkDate"
                id="startWorkDate"
              />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-row>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="timeZone">{{ 'mxk.users.timeZone' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid timeZone!">
              <input [(ngModel)]="form.model.timeZone" [ngModelOptions]="{ standalone: true }" nz-input name="timeZone" />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="preferredLanguage">{{ 'mxk.users.preferredLanguage' | i18n }} </nz-form-label>
            <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid preferredLanguage!">
              <input
                [(ngModel)]="form.model.preferredLanguage"
                [ngModelOptions]="{ standalone: true }"
                nz-input
                name="preferredLanguage"
                id="preferredLanguage"
              />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-row>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="webSite">{{ 'mxk.users.website' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid webSite!">
              <input [(ngModel)]="form.model.webSite" [ngModelOptions]="{ standalone: true }" nz-input name="webSite" id="webSite" />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="defineIm">{{ 'mxk.users.ims' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="16" [nzXs]="24" nzErrorTip="The input is not valid defineIm!">
              <input [(ngModel)]="form.model.defineIm" [ngModelOptions]="{ standalone: true }" nz-input name="defineIm" id="defineIm" />
            </nz-form-control>
          </nz-form-item>
        </div>
      </nz-tab>
      <nz-tab nzTitle="{{ 'mxk.users.tab.business' | i18n }}">
        <div nz-row>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="organization">{{ 'mxk.users.organization' | i18n }} </nz-form-label>
            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid organization!">
              <input
                [(ngModel)]="form.model.organization"
                [ngModelOptions]="{ standalone: true }"
                nz-input
                name="organization"
                id="organization"
              />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="division">{{ 'mxk.users.division' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid division!">
              <input [(ngModel)]="form.model.division" [ngModelOptions]="{ standalone: true }" nz-input name="division" id="division" />
            </nz-form-control>
          </nz-form-item>
        </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-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" 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="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>
        <div nz-row>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="costCenter">{{ 'mxk.users.costCenter' | 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.costCenter"
                [ngModelOptions]="{ standalone: true }"
                nz-input
                name="costCenter"
                id="costCenter"
              />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="jobLevel">{{ 'mxk.users.jobLevel' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid jobLevel!">
              <input [(ngModel)]="form.model.jobLevel" [ngModelOptions]="{ standalone: true }" nz-input name="jobLevel" id="jobLevel" />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-row>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="jobTitle">{{ 'mxk.users.jobTitle' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid jobTitle!">
              <input [(ngModel)]="form.model.jobTitle" [ngModelOptions]="{ standalone: true }" nz-input name="jobTitle" id="jobTitle" />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="manager">{{ 'mxk.users.manager' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid manager!">
              <input [(ngModel)]="form.model.manager" [ngModelOptions]="{ standalone: true }" nz-input name="manager" id="manager" />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-row>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="assistant">{{ 'mxk.users.assistant' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid assistant!">
              <input [(ngModel)]="form.model.assistant" [ngModelOptions]="{ standalone: true }" nz-input name="assistant" id="assistant" />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="workOfficeName">{{ 'mxk.users.workOfficeName' | i18n }} </nz-form-label>
            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid workOfficeName!">
              <input
                [(ngModel)]="form.model.workOfficeName"
                [ngModelOptions]="{ standalone: true }"
                nz-input
                name="workOfficeName"
                id="workOfficeName"
              />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-row>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="entryDate">{{ 'mxk.users.entryDate' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid entryDate!">
              <input [(ngModel)]="form.model.entryDate" [ngModelOptions]="{ standalone: true }" nz-input name="entryDate" id="entryDate" />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="quitDate">{{ 'mxk.users.quitDate' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid quitDate!">
              <input [(ngModel)]="form.model.quitDate" [ngModelOptions]="{ standalone: true }" nz-input name="quitDate" id="quitDate" />
            </nz-form-control>
          </nz-form-item>
        </div>
      </nz-tab>
      <nz-tab nzTitle="{{ 'mxk.users.tab.business.extra' | i18n }}">
        <div nz-row>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="workPhoneNumber">{{ 'mxk.users.workPhoneNumber' | i18n }} </nz-form-label>
            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid workPhoneNumber!">
              <input
                [(ngModel)]="form.model.workPhoneNumber"
                [ngModelOptions]="{ standalone: true }"
                nz-input
                name="workPhoneNumber"
                id="workPhoneNumber"
              />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="workEmail">{{ 'mxk.users.workEmail' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid workEmail!">
              <input [(ngModel)]="form.model.workEmail" [ngModelOptions]="{ standalone: true }" nz-input name="workEmail" id="workEmail" />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-row>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="workCountry">{{ 'mxk.users.workCountry' | i18n }} </nz-form-label>
            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid workCountry!">
              <input
                [(ngModel)]="form.model.workCountry"
                [ngModelOptions]="{ standalone: true }"
                nz-input
                name="workCountry"
                id="workCountry"
              />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="region">{{ 'mxk.users.workRegion' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid region!">
              <input [(ngModel)]="form.model.workRegion" [ngModelOptions]="{ standalone: true }" nz-input name="region" id="region" />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-row>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="locality">{{ 'mxk.users.workLocality' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid locality!">
              <input [(ngModel)]="form.model.workLocality" [ngModelOptions]="{ standalone: true }" nz-input name="locality" id="locality" />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="street">{{ 'mxk.users.workStreetAddress' | i18n }} </nz-form-label>
            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid street!">
              <input
                [(ngModel)]="form.model.workStreetAddress"
                [ngModelOptions]="{ standalone: true }"
                nz-input
                name="street"
                id="street"
              />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-row>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="postalCode">{{ 'mxk.users.workPostalCode' | i18n }} </nz-form-label>
            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid postalCode!">
              <input
                [(ngModel)]="form.model.workPostalCode"
                [ngModelOptions]="{ standalone: true }"
                nz-input
                name="postalCode"
                id="postalCode"
              />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="workFax">{{ 'mxk.users.workFax' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid workFax!">
              <input [(ngModel)]="form.model.workFax" [ngModelOptions]="{ standalone: true }" nz-input name="workFax" id="workFax" />
            </nz-form-control>
          </nz-form-item>
        </div>
      </nz-tab>
      <nz-tab nzTitle="{{ 'mxk.users.tab.home' | i18n }}">
        <div nz-row>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="homeEmail">{{ 'mxk.users.homeEmail' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid homeEmail!">
              <input [(ngModel)]="form.model.homeEmail" [ngModelOptions]="{ standalone: true }" nz-input name="homeEmail" id="homeEmail" />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="homePhoneNumber">{{ 'mxk.users.homePhoneNumber' | i18n }} </nz-form-label>
            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid homePhoneNumber!">
              <input
                [(ngModel)]="form.model.homePhoneNumber"
                [ngModelOptions]="{ standalone: true }"
                nz-input
                name="homePhoneNumber"
                id="homePhoneNumber"
              />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-row>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="homeFax">{{ 'mxk.users.homeFax' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid homeFax!">
              <input [(ngModel)]="form.model.homeFax" [ngModelOptions]="{ standalone: true }" nz-input name="homeFax" id="homeFax" />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="homePostalCode">{{ 'mxk.users.homePostalCode' | i18n }} </nz-form-label>
            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid postalCode!">
              <input
                [(ngModel)]="form.model.homePostalCode"
                [ngModelOptions]="{ standalone: true }"
                nz-input
                name="homePostalCode"
                id="homePostalCode"
              />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-row>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="homeCountry">{{ 'mxk.users.homeCountry' | i18n }} </nz-form-label>
            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid homeCountry!">
              <input
                [(ngModel)]="form.model.homeCountry"
                [ngModelOptions]="{ standalone: true }"
                nz-input
                name="homeCountry"
                id="homeCountry"
              />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="region">{{ 'mxk.users.homeRegion' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid region!">
              <input [(ngModel)]="form.model.homeRegion" [ngModelOptions]="{ standalone: true }" nz-input name="region" id="region" />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-row>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="locality">{{ 'mxk.users.homeLocality' | i18n }}</nz-form-label>
            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid locality!">
              <input [(ngModel)]="form.model.homeLocality" [ngModelOptions]="{ standalone: true }" nz-input name="locality" id="locality" />
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label [nzSm]="8" [nzXs]="24" nzFor="homeStreetAddress">{{ 'mxk.users.homeStreetAddress' | i18n }} </nz-form-label>
            <nz-form-control [nzSm]="16" [nzMd]="16" [nzXs]="36" [nzXl]="48" nzErrorTip="The input is not valid street!">
              <input
                [(ngModel)]="form.model.homeStreetAddress"
                [ngModelOptions]="{ standalone: true }"
                nz-input
                name="street"
                id="street"
              />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-row> </div>
      </nz-tab>
    </nz-tabset>
  </form>
</div>

<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>