zy-pc/src/app/views/users-management/users-management.component.html

<div class="list-template">
  <div class="list-template__content">
    <div class="list-template__top" nz-row>
      <div nz-col nzXl='16' class="list-template__searchBox">
        <div class="list-template__searchItem">
          <span class="label">用户类型</span>：
          <nz-select class="formItem" [nzDropdownMatchSelectWidth]="false" nzShowSearch nzAllowClear
            nzPlaceHolder="请选择用户类型" [(ngModel)]="userType">
            <nz-option nzLabel="{{data.name}}" nzValue="{{data.id}}" *ngFor="let data of userTypes"></nz-option>
          </nz-select>
        </div>
        <div class="list-template__searchItem">
          <span class="label">所属科室</span>：
          <nz-select class="formItem" (nzOnSearch)="changeInp(hosId,'search',$event)"
            [nzDropdownMatchSelectWidth]="false" nzServerSearch nzShowSearch nzAllowClear nzPlaceHolder="请选择所属科室"
            [(ngModel)]="department">
            <ng-container *ngFor="let option of alldepart1">
              <nz-option *ngIf="!isLoading" [nzLabel]="option.dept" [nzValue]="option.id"></nz-option>
            </ng-container>
            <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
              <i nz-icon nzType="loading" class="loading-icon"></i> 搜索中...
            </nz-option>
          </nz-select>
        </div>
        <div class="list-template__searchItem">
          <span class="label">所属组</span>：
          <nz-select class="formItem" [nzDropdownMatchSelectWidth]="false" nzShowSearch nzAllowClear
            nzPlaceHolder="请选择所属组" [(ngModel)]="userGroup1">
            <nz-option nzLabel="{{data.groupName}}" nzValue="{{data.id}}" *ngFor="let data of allUserGroup1">
            </nz-option>
          </nz-select>
        </div>
        <div class="list-template__searchItem">
          <span class="label">用户名</span>：
          <input nz-input class="formItem" [(ngModel)]="num" placeholder="请输入用户名" nzSize="default" />
        </div>
        <div class="list-template__searchItem">
          <span class="label">姓名</span>：
          <input nz-input class="formItem" [(ngModel)]="name" placeholder="请输入姓名" nzSize="default" />
        </div>
      </div>
      <div nz-col nzXl='8' class="list-template__btns">
        <button nz-button class="btn default" (click)='search()'>搜索</button>
        <button nz-button class="btn ml8 default" (click)='reset()'>重置</button>
        <button nz-button *ngIf="coopBtns.add" class="btn ml8 default" (click)="showModal()">新增</button>
        <button nz-button *ngIf="coopBtns.templateDownload" class="btn ml8 default" (click)="excelExport()">模板下载</button>
        <button nz-button *ngIf="coopBtns.import" class="btn ml8 default" (click)="excelImport()">导入</button>
      </div>
    </div>
    <div class="list-template__bottom">
      <nz-table class="list-template__nzTable" [nzData]="listOfData" nzSize="middle" [nzShowPagination]="false"
        [nzLoading]="loading1">
        <thead>
          <tr class="thead">
            <th nzWidth="5%">序号</th>
            <th nzWidth="10%">姓名</th>
            <th nzWidth="10%">用户名</th>
            <th nzWidth="5%">性别</th>
            <th nzWidth="10%">手机号码</th>
            <th nzWidth="15%">所属科室</th>
            <th nzWidth="15%">所属组</th>
            <th nzWidth="10%">用户类型</th>
            <th nzWidth="20%">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let data of listOfData;let index=index;">
            <td>{{index+(pageIndex-1) * pageSize + 1}}</td>
            <td>{{ data.name||'-' }}</td>
            <td>{{ data.account||'-' }}</td>
            <td>{{data.gender?data.gender.name:'-'}}</td>
            <td>{{ data.phone||'-' }}</td>
            <td>{{ data.dept?data.dept.dept:'-' }}</td>
            <td>
              <div *ngIf="data.group&&data.group.length">
                <div *ngFor="let gro of data.group;let i=index;">
                  <span *ngIf='i!=data.group.length-1'>{{gro.groupName}},</span>
                  <span *ngIf='i==data.group.length-1'>{{gro.groupName}}</span>

                </div>
              </div>
              <div *ngIf="!data.group||!data.group.length">
                -
              </div>
            </td>
            <td>{{ data.usertype ? data.usertype.name : '' }}</td>
            <td>
              <div class="coop">
                <span *ngIf="coopBtns.look" (click)="detail(data.id)">查看</span>
                <span *ngIf="coopBtns.edit" (click)="edit(data)">编辑</span>
                <span *ngIf="coopBtns.del" (click)="del(data)">删除</span>
                <span *ngIf="coopBtns.resetPwd" (click)="resetPwd(data)">重置密码</span>
              </div>
            </td>
          </tr>
        </tbody>
      </nz-table>
      <div class="list-template__pagination">
        <nz-pagination [(nzPageIndex)]="pageIndex" [(nzTotal)]="listLength" nzShowSizeChanger [(nzPageSize)]="pageSize"
          (nzPageIndexChange)="getList()" (nzPageSizeChange)="getList()">
        </nz-pagination>
      </div>
    </div>
  </div>
</div>
<!-- 新增/编辑模态框 -->
<div class="save add display_flex align-items_center justify-content_flex-center" *ngIf="modal">
  <div class="modalBody">
    <div class="title">用户管理 - {{add?"新增":"编辑"}}<i class="icon_transport transport-guanbi" (click)="hideModal()"></i>
    </div>
    <overlay-scrollbars #osComponentRef1 class="content">
      <form nz-form [formGroup]="validateForm" class="addForm" (ngSubmit)="submitForm()">
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">姓名</nz-form-label>
          <nz-form-control nzErrorTip="请填写姓名!">
            <nz-input-group>
              <input type="name" nz-input formControlName="name" placeholder="请填写姓名" />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="account">用户名</nz-form-label>
          <nz-form-control nzErrorTip="请填写用户名!">
            <nz-input-group>
              <input type="account" nz-input formControlName="account" placeholder="请填写用户名" />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" [nzRequired]="wxRequired" nzFor="weixin">微信</nz-form-label>
          <nz-form-control nzErrorTip="请填写微信!">
            <nz-input-group>
              <input type="weixin" nz-input formControlName="weixin" placeholder="请填写微信" />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="usertype">用户类型</nz-form-label>
          <nz-form-control nzErrorTip="请选择用户类型!">
            <nz-select [nzDropdownMatchSelectWidth]="false" type="usertype" nzShowSearch nzAllowClear
              formControlName="usertype" nzPlaceHolder="请选择用户类型" (ngModelChange)="usertypeChange()">
              <nz-option nzLabel="{{data.name}}" nzValue="{{data.id}}" *ngFor="let data of userTypes">
              </nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="dept">所属科室</nz-form-label>
          <nz-form-control nzErrorTip="请选择所属科室!">
            <nz-select (nzOnSearch)="changeInp(hosId,'add',$event)" [nzDropdownMatchSelectWidth]="false" type="dept"
              nzServerSearch nzShowSearch nzAllowClear formControlName="dept" nzPlaceHolder="请选择所属科室">
              <!-- <nz-option nzLabel="{{data.dept}}" nzValue="{{data.id}}" *ngFor="let data of alldepart">
              </nz-option> -->
              <ng-container *ngFor="let option of alldepart">
                <nz-option *ngIf="!isLoading" [nzLabel]="option.dept" [nzValue]="option.id"></nz-option>
              </ng-container>
              <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
                <i nz-icon nzType="loading" class="loading-icon"></i> 搜索中...
              </nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="deptPhone">手机号码</nz-form-label>
          <nz-form-control nzErrorTip="请填写正确的手机号码!">
            <nz-input-group>
              <input type="deptPhone" pattern="[\d-]+" nz-input formControlName="deptPhone" placeholder="请填写手机号码" />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label style="line-height:40px;" [nzSm]="6" [nzXs]="24" nzRequired nzFor="gender">性别</nz-form-label>
          <nz-form-control nzErrorTip="请选择性别!">
            <nz-radio-group type="gender" formControlName="gender">
              <label nz-radio nzValue="{{data.id}}" *ngFor="let data of genders">{{data.name}}</label>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="userGroup">用户组</nz-form-label>
          <nz-form-control nzErrorTip="请选择用户组!">
            <nz-select [nzDropdownMatchSelectWidth]="false" type="userGroup" nzAllowClear nzMode="multiple"
              formControlName="userGroup" nzPlaceHolder="请选择用户组">
              <nz-option nzLabel="{{data.groupName}}" nzValue="{{data.id}}" *ngFor="let data of allUserGroup">
              </nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="role">角色</nz-form-label>
          <nz-form-control nzErrorTip="请选择角色!">
            <nz-select [nzDropdownMatchSelectWidth]="false" type="role" nzShowSearch nzAllowClear nzMode="multiple"
              formControlName="role" nzPlaceHolder="请选择角色">
              <nz-option nzLabel="{{data.role}}" nzValue="{{data.id}}" *ngFor="let data of allUserRole">
              </nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </form>
    </overlay-scrollbars>
    <div class="display_flex justify-content_flex-center">
      <button nzType="primary" nz-button (click)="submitForm()" [nzLoading]="btnLoading">确认</button>
      <button class="btn cancel" nz-button nzType="default" (click)="hideModal()">取消</button>
    </div>
  </div>
</div>
<!-- 删除模态框 -->
<app-dialog-delete [delModal]="delModal" (hideDelModalEvent)="hideDelModal()" [btnLoading]="btnLoading" [cancenlLoading]="cancenlLoading"
  (confirmDelEvent)="confirmDel()" (cancelDelEvent)="cancelDel()" content="是否删除企业微信同用户？" confirmTxt="是" cancelTxt="否">
</app-dialog-delete>
<!-- 重置密码模态框 -->
<app-dialog-delete [delModal]="resetModal" (hideDelModalEvent)="hideResetModal()" [btnLoading]="btnLoading" [cancenlLoading]="cancenlLoading"
  (confirmDelEvent)="confirmReset()" (cancelDelEvent)="cancelReset()" content="是否重置密码？">
</app-dialog-delete>
<!-- 操作成功/失败提示框 -->
<app-prompt-modal *ngIf="promptModalShow" [content]="promptContent" [success]="ifSuccess" [show]="promptModalShow"
  [info]="promptInfo"></app-prompt-modal>

<!-- 查看详情 -->
<router-outlet (deactivate)="getList()"></router-outlet>

<!-- 遮罩 -->
<app-mask *ngIf="maskFlag"></app-mask>

<app-excel-import [isShow]="isShow" (hideFormHand)="hideExcelImport($event)" *ngIf="isShow" (submitFormHand)="submitExcelImport($event)"></app-excel-import>