给A组件列表添加勾选框在B组件进行删除修改操作-CSDN博客

本文链接：https://blog.csdn.net/xiu_xiu_cdx/article/details/133384135

文章详细描述了如何在React应用中实现两个子组件之间的数据传递，包括Prescribed组件的勾选操作传给Filter组件，以及如何在表格中添加勾选功能、批量删除和修改标识的处理。还涉及了组件状态管理和下拉菜单的使用。

摘要由CSDN通过智能技术生成

1、两个子组件之间传值 —在 Prescribed 组件中勾选的ids传给 Filter 组件进行删除修改操作

首先找到两个组件共同的父组件，在父组件中创建中间方法，并在两个组件中分别添加取值和传值操作

// 获取勾选的ids
++getSelectOrderIds = (data) => {
  this.setState({
    orderIds: data,
  });
}

<Filter
  ++orderIds={this.state.orderIds} // 将Prescribed组件中取到的ids再传给这个组件进行删除修改操作
  saveOrderList={this.saveOrderList}
 />

<Prescribed
  dataSource={dataSource}
  getEndStopDateSource={this.handDateStopSource}
  ++getSelectOrderIds={this.getSelectOrderIds} // 从子组件Prescribed中拿到勾选的ids
 />

勾选列表组件Prescribed中勾选函数中添加回调将id传给父组件

handleChange = (ids, records) => {
  const { rowSelection } = this.state;
  this.setState({
    rowSelection: {
      ...rowSelection,
      selectedRowKeys: ids,
    }
  }, () => {
    // 传给父组件勾选的ids
    ++this.props.getSelectOrderIds(ids);
  })
}

此时操作组件Filter通过this.props.orderIds可以取得被勾选中的ids

2、给表格添加勾选框并能进行全选和取消全选

首先看有没有引入Table组件

state中添加属性及方法

this.state = {
  batchControlFlag: [], // 批量操作显示控制参数
  ++rowSelection: {
    onChange: (ids, records) => this.handleChange(ids, records),
    onSelect: (selected, record, records) => this.handleSelect(selected, record, records),
    onSelectAll: (selected, records) => this.handleSelectAll(selected, records),
    selectedRowKeys: [],
    getProps: record => this.handleProps(record),
  },
};

//添加对应方法
++handleChange = (ids, records) => {
  const { rowSelection } = this.state;
  this.setState({
    rowSelection: {
      ...rowSelection,
      selectedRowKeys: ids,
    }
  }, () => {
    // 传给父组件勾选的ids
    this.props.getSelectOrderIds(ids);
  })
}
++handleSelect = (selected, record, records) => {
}
++handleSelectAll = (selected, records) => {
}
// 控制子勾选框禁用
++handleProps = (record) => {
  return {
    disabled: record.parentOrderId && record.parentOrderId !== record.id,
  }
}

设置勾选框的样式及清除bug

componentWillReceiveProps(nextProps) {
  // 勾选后切换其他再切换回来勾选框清空
  const { rowSelection } = this.state;
  ++if (nextProps.dataSource !== this.props.dataSource) {
    this.setState({
      rowSelection: {
        ...rowSelection,
        selectedRowKeys: [],
      }
    })
  }
}

shouldComponentUpdate(nextProps, nextState) {
  // 勾选后显示勾选效果，不然页面不会重新渲染
  ++if (nextState.rowSelection !== this.state.rowSelection) {
    return true;
  }
  return true;
}

// 隐藏子医嘱的勾选框
#myTables #myTable label.next-checkbox-wrapper.disabled {
  display: none;
};

3、添加Dropdown下拉框式按钮并添加条件控制

首先看有没有引入组件

import { ++Dropdown, ++Icon, ++Menu } from '@alifd/next';

取控制参数

// 批量操作显示控制参数
queryBatchControlSystemParams = async () => {
  const res = await querySystemParam({ parameterCode: '10100679' });
  this.setState({
    batchControlFlag: res.split(','),   由1,0,0,0,0 --> [1,0,0,0,0]
  })
}

添加结构

{/* 批量操作按钮 */}
++{HUNANXK_ENV && batchControlFlag[0] === '1' && 
<React.Fragment>
  <Dropdown 
    trigger={
      <span className="drop-down">批量操作<Icon type="arrow-down-filling" size="xs" /></span>}
      triggerType={['hover']}
    >
    <Menu>
      {batchControlFlag[1] === '1' && <Menu.Item onClick={this.batchDelete}>批量删除</Menu.Item>}
      {batchControlFlag[2] === '1' && <Menu.Item onClick={this.batchModify}>批量修改标识</Menu.Item>}
    </Menu>
  </Dropdown>
</React.Fragment>
}

给下拉框按钮添加样式

++.drop-down {
  display: block;
  background-color: #fff;
  border: 1px solid $color-text1-2;
  border-radius: 4px;
  width: 95px;
  height: 28px;
  margin-left: 8px;
  line-height: 28px;
  text-align: center;
  color: #333;
  padding: 0 5px;
  cursor: pointer;

  &:hover {
    color: $color-brand1-6;
  }

  .next-icon-medium:before {
    font-size: 5px;
    margin-left: 5px;
  }
}

效果图

4、添加勾选框、渲染、切换清空

1、添加方法
this.state = {
	++rowSelection: {
    onChange: (ids, records) => this.handleChange(ids, records),
    onSelect: (selected, record, records) => this.handleSelect(selected, record, records),
    onSelectAll: (selected, records) => this.handleSelectAll(selected, records),
    selectedRowKeys: [],
    getProps: record => this.handleProps(record),
  },
}

handleChange = (ids, records) => {
  const { rowSelection } = this.state;
  this.setState({
    rowSelection: {
      ...rowSelection,
      selectedRowKeys: ids,
    }
  }, () => {
    // 传给父组件勾选的ids
    this.props.getSelectOrderIds(ids, records);
  })
}
handleSelect = (selected, record, records) => {
}
handleSelectAll = (selected, records) => {
}
handleProps = (record) => {
  return {
    // 控制子医嘱勾选框禁用  
    disabled: record.parentOrderId && record.parentOrderId !== record.id,
    // 隐藏子医嘱的勾选框  css中再设置下这个，可实现列表中成组的医嘱不显示子医嘱
    #myTables #myTable label.next-checkbox-wrapper.disabled {
      display: none;
    };
  }
}

2、患者勾选医嘱后切换其他患者再切换回来勾选框清空
componentWillReceiveProps(nextProps) {
  const { rowSelection } = this.state;
  ++if (nextProps.dataSource !== this.props.dataSource) {
    this.setState({
      rowSelection: {
        ...rowSelection,
        selectedRowKeys: [],
      }
    })
  }
}

3、勾选后显示勾选效果，不然页面不会重新渲染
shouldComponentUpdate(nextProps, nextState) {
  if ((nextProps.random === this.state.random) && nextProps.tableSize.height !== this.props.tableSize.height) {
    return true;
  }
  // 勾选后显示勾选效果，不然页面不会重新渲染
  ++if (nextState.rowSelection !== this.state.rowSelection) {
    return true;
  }
  if ((nextProps.random === this.state.random) && nextProps.tableSize.height === this.props.tableSize.height && this.state.scrollToRow === nextState.scrollToRow) {
    return false;
  }
  return true;
}

4、引用方法
<Table
  id="myTable"
  ref={ref => this.myTable = ref}
  dataSource={dataSource}
  // [2, 4].includes(patientInfo.encounterType) 代表  patientInfo.encounterType === 2 || patientInfo.encounterType === 4
  ++rowSelection={(+batchControlFlag[0] === 1 && [2, 4].includes(patientInfo.encounterType)) ? rowSelection: ''} // 控制勾选框是否展示
>
  {this.state.dataSource.length === 0 ? null : this.handleColumn(this.state.columnList)}
</Table>

2、批量操作改造专项–列表支持批量删除

1、未选提示、二次确定提示、仅提示

未选提示
```
notice.prompt('请选择医嘱'); 
```

二次确定提示

Confirm({
  title: '您确认要删除所选xx么？',
  content: '删除后无法恢复！',
  confirmKeyCode: 89, // 确认快捷键键码, // 默认A(65)
  cancelKeyCode: 78, // 取消快捷键键码，// 默认Z(90)
  confirmFunc: async () => {
    const params = {};
    const result = await batchDeleteOrder(params);
  },
});

仅提示

 Dialog.alert({
  title: '提示',
  content: (
    <div style={{ MaxWidth: '600px',maxHeight: '300px',overflowY: 'auto', lineHeight: '24px' }}>
      // 这里是把返回值通过弹窗换行展示出来
      {operateDetailsList.map((item, index) => <div>{(index+1) + '、' +item}</div>)}
    </div>),
  okProps: { children: '我知道了' },
  onOk: () => {
    // 删除能被删除的xx，触发列表刷新
    this.emit('reloadPrescribed');
  },
});

3、批量操作改造专项–列表支持批量修改标识

1、添加必填校验

this.state={初始设置};
this.batchUpdateOrderSignParam = {
  groupOneSign: null, //西成药
  groupTwoSign: null, //检查/检验/病理
  groupThreeSign: null //治疗/通知/材料/文本
};


// 批量修改标识
+batchModify = async () => {
  const { patientlist, patientInfo, orderIds } = this.props;
  const { showRequiredVerification, modifyIdentDialogVisible, categoryList} = this.state;
  const params = {
   。。。
   ...this.batchUpdateOrderSignParam,
  };

  this.filterOrderCategories(); // 根据所选医嘱筛选出分类
  // 添加必填校验
  if (modifyIdentDialogVisible) {
  let flag = false;
  categoryList.forEach((item) => {
    if (!this.batchUpdateOrderSignParam[item.value]) {
      showRequiredVerification[item.value] = true;
      flag = true;
    } else {
      showRequiredVerification[item.value] = false;
    }
  });
  this.setState({
    showRequiredVerification,
  });
  if (flag) return;
  }
  
  。。。
  showRequiredVerification: {}, // 成功和关闭弹窗时清空校验情况
  this.batchUpdateOrderSignParam = {}; // 成功和关闭时清空分类医嘱

}

2、根据医嘱筛选出分类并加校验和枚举

// 根据所选医嘱筛选出分类
filterOrderCategories = () => {
  const { records } = this.props;
  const IdentifyClassificationArray = []; // 标识分类去重数组
  const showNameList = [];
  records.map((item) => {
    if (item.orderCategory) {
      if (IdentifyClassificationArray.indexOf(item.orderCategory) < 0) {
        IdentifyClassificationArray.push(item.orderCategory)
        if (['FH0049.06', 'FH0049.07'].includes(item.orderCategory)) {
          showNameList.push('groupOneSign');
        } else if (item.orderCategory === 'FH0049.01' || item.orderCategory === 'FH0049.02' || item.orderCategory === 'FH0049.12') {
          showNameList.push('groupTwoSign');
        } else if (item.orderCategory === 'FH0049.03' || item.orderCategory === 'FH0049.05' || item.orderCategory === 'FH0049.09' || item.orderCategory === 'FH0049.10') {
          showNameList.push('groupThreeSign');
        }
      };
    }
  })
  const showNameListArr = Array.from(new Set(showNameList.map(item => JSON.stringify(item)))).map(str => JSON.parse(str)); // 医嘱标识分类去重
  // category是引入的枚举js文件
  const categoryList = category?.filter(item => showNameListArr.includes(item.value)); //添加枚举值
  this.setState({
    // 最终得到弹窗展示列表,
    categoryList,
  })
}

3、添加弹性弹窗

 {modifyIdentDialogVisible ? (
  <Dialog
    visible={modifyIdentDialogVisible}
    onCancel={this.visibleModifyDialogClose}
    onClose={this.visibleModifyDialogClose}
    onOk={() => this.batchModify()}
    pathologClose={this.visibleModifyDialogClose}
    title="批量修改标识"
    style={{ width: '480px' , MaxHeight: '300px' }}
    isFullScreen
    footerAlign="center"
  >
    {
      categoryList?.map(item => (
        <div style={{ height: '60px'}}>
          <div>
            <label style={{display: 'inline-block', width: '160px', textAlign: 'right' }}><span style={{ color: 'red', fontSize: '16px' }}>*</span>{item.name}：</label>
            <Select
              dataSource={item.options}
              style={{width: '200px'}}
              onChange={(val) => { this.handleCategoryChange(val, item.value); }}
            />
          </div>
          {showRequiredVerification[item.value] && <div style={{ color: 'red', marginLeft: '160px' }}>{item.name}标识必填</div>}
        </div>
      ))
    }
  </Dialog>
) : null}