Angular：某列表页面点击“新增”按钮弹出用户列表，选中某些记录后，将选中的记录塞到上级页面的列表中，并可以删除

想做一个功能，就是在一个页面上有一个空的用户列表（表中存放已经被选中的用户），点击列表上方的“新增”按钮，弹出一个子列表，子列表中显示所有有权限的用户，在子列表中选择某些用户，点击弹窗下方的“确定”按钮，将这些选中的用户信息暂时存放到空的用户列表中，并可以点击某条数据后面的“删除”按钮，将暂存的用户信息删除，大概像下面这样：

 

 晕了吗？？？我们分解一下，一步一步来

 首先我们先使用NzModalService作一个弹窗的效果，将待选择的用户列表展示在弹窗的组件component中：

在空列表页面组件类component中，调用NzModalService方法，显示弹窗，弹窗标题自己设置，我这里是“新增供应商”，从当前页面不需要传什么参数到供应商列表组件中，所以nzComponentParams为空。下面的modal.afterClose方法是在弹窗关闭时（点击“确定”或“取消”按钮关闭弹窗时）从弹窗中传过来一些数据，在这里进行接收：

doAdd() {
    const modal = this.modalService.create({
      nzTitle: '新增供应商',
      nzContent: SuppliersComponent,     // 查询供应商列表
      nzWidth: 800,
      nzComponentParams: {
      },
      nzFooter: null
    });
    modal.afterClose.pipe(untilDestroyed(this)).subscribe(
      result => {
        if (!helpers.IsEmpty(result) && !helpers.IsEmpty(result.data)) {
          this.total = result.data.length;
          this.dataSet = result.data;
          this.selectedSuppliers = result.data;
          this.loading = false;
          this.setScrollValue();
        }
      },
      err => {
        this.loading = false;
        this.notice.error('数据加载失败！');
      }
    );
  }

我们来看看弹窗的组件SuppliersComponent中怎么进行选择和回传的操作的：

首先我们要用一个方法来调用接口加载用户列表，这里是searchData查询数据的方法，会在页面初始化的时候调用：

/**
   * 查询数据
   */
  searchData(reset: boolean = false): void {
    if (reset) {
      this.pageIndex = 1;
    }
    this.loading = true;
    this.UploadDrawingProvider.getSuppliersList(this.type, this.permissionParam, this.orgId).pipe(untilDestroyed(this)).subscribe(data => {
      if (!helper.IsEmpty(data)) {
        this.total = data;
        this.dataSet = data;
        this.dataSet.forEach(item => {
          if (this.selectedSuppliers.findIndex(user => user.id === item.vendorId) > -1) {
            item.checked = true;
          }
        });
        this.refreshStatus();
      }
      this.loading = false;
    }, err => {
      this.loading = false;
      this.notice.error('数据加载失败！');
    });
  }

我们查收到的数据是data数组，将data数组赋给dataSet用于页面的绑定显示。 

弹窗列表中我们监视单选和多选的动作：

首先是单选：

/**
   * 单选
   */
  refreshStatus(checked?: boolean, data?): void {
    if (!helper.IsEmpty(this.dataSet) && this.dataSet.length > 0) {
      const allChecked = this.dataSet.every(value => value.checked === true);
      const allUnChecked = this.dataSet.every(value => !value.checked);
      this.allChecked = allChecked;
      this.indeterminate = (!allChecked) && (!allUnChecked);
      this.disabledButton = !this.dataSet.some(value => value.checked);
      this.checkedNumber = this.dataSet.filter(value => value.checked).length;
    } else {
      this.allChecked = false;
      this.indeterminate = false;
      this.disabledButton = true;
      this.checkedNumber = 0;
    }
    // 页面单选事件
    if (data != null) {
      const index = this.selectedSuppliers.findIndex(value => value.id === data.vendorId);
      if (checked && index < 0) {
        // 选中且没有添加
        this.selectedSuppliers.push(data);
      } else if (!checked && index > -1) {
        // 取消选中，如果已经添加到selectedUsers，则从数组中去除该位置元素
        this.selectedSuppliers.splice(index, 1);
      }
    }
  }

单选后，判断数据data的checked属性是否为true，如果是true则表示数据被选中，selectedSuppliers参数是这个页面上定义用来存储被选中的数据的。将数据的id，也就是vendorId遍历存储到selectedSuppliers参数findIndex方法的value.id中。

其次，我们看一下全选的实现，和单选实际上差不多，无非就是遍历dataSet也就是所有的数据，存储它们的id也就是venorId：

 /**
   * 全选
   */
  checkAll(checked: boolean): void {
    this.dataSet.forEach(data => data.checked = checked);
    // this.refreshStatus();
    // 处理selectedUsers数据
    this.dataSet.forEach(data => {
      const index = this.selectedSuppliers.findIndex(value => value.id === data.vendorId);
      if (checked && index < 0) {
        // 选中且没有添加
        this.selectedSuppliers.push(data);
      } else if (!checked && index > -1) {
        // 取消选中，如果已经添加到selectedUsers，则从数组中去除该位置元素
        this.selectedSuppliers.splice(index, 1);
      }
    });
  }

点击弹窗上的“确定”按钮，则关闭弹窗，并将选择好的用户信息传到上级列表页面：

/**
   * 确认
   */
  emitDataOutside(event) {
    this.modal.destroy({ data: this.selectedSuppliers });
  }

如果点击的是“取消”按钮，那将只关闭弹窗：

/**
   * 取消
   * @param e
   */
  handleCancel(e) {
    this.modal.destroy({ data: null });
  }

 

 要想在上级列表页面删除某条暂存的用户信息，则需要对列表数据数组调用splice方法，将已经选择的用户从列表中删去：

operateData(type, data) {
    switch (type) {
      case 'delete': //  删除供应商
        this.modalService.confirm({
          nzTitle: '系统提示',
          nzContent: '您确认删除选中的记录吗？',
          nzOnOk: () => new Promise((resolve, reject) => {
            setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
            const index = this.selectedSuppliers.findIndex(value => value.id === data.vendorId);
            console.log(this.selectedSuppliers);
            this.selectedSuppliers.splice(index, 1);
            this.total = this.selectedSuppliers.length;
            this.dataSet = this.selectedSuppliers;
            resolve(true);
          }).catch(() => { })
        });
        break;
    }
  }

已经选中要删除的用户的id传给index，再从用户列表中删去index对应的用户，得到的新的用户列表传给列表绑定的dataSet。

 

这样，想要的功能就实现完毕了~