ProTable实现多选+反显+筛选项多级关联选择

import {forwardRef,useImperativeHandle,useEffect,useRef,useReducer,
} from "react";
import { Drawer, Space, Button, message } from "antd";
import * as PC from "@ant-design/pro-components";
import type { FormInstance } from "antd";interface StateType {visible?: boolean; // 是否显示promotionList: any[];pageSize?: number; // 一页几条total?: number; // 总页数selectedRowKeys: any[];selectedRows: any[];oneList: any[]; //一级demo列表twoList: any[]; //二级demo列表threeList: any[]; //三级demo列表
}
interface ParamsType {pageSize?: number;current?: number;keyword?: string;pageNo?: number;
}interface PropsType {callback?: (selectedRows: any) => void; // 回调函数
}export type DemoRef = {show: (list: any[]) => void; // 显示抽屉
};const DemoDrawer = forwardRef<DemoRef, PropsType>((props, ref) => {const { callback } = props;const initState: StateType = {visible: false,pageSize: 10,total: 0,selectedRowKeys: [],selectedRows: [],oneList: [],twoList: [],threeList: [],};const [state, dispatch] = useReducer((oldState, action) => {return { ...oldState, ...action };}, initState);const formRef = useRef<FormInstance>();useImperativeHandle(ref, () => ({show: (list) => {if (list && list.length > 0) {const keys = list.map((item) => item.rowKey);dispatch({visible: true,selectedRows: list,selectedRowKeys: keys,});return;}dispatch({visible: true,});},}));// 获取列表const onQueryList = async (params: ParamsType) => {try {const res: any = await getDemoList({...params,});const total = res?.totalRow || 0;const list = res?.dataList?.map((item: any) => {return { ...item, rowKey: `${item.demoK1}-${item.demoK2}` };});dispatch({pageSize: params.pageSize,total,});return {success: true,data: list,total,...params,};} catch (err) {console.log("获取列表接口异常", err);return {};}};// 处理关闭事件const onClose = () => {dispatch(initState);};//获取一级列表const getPinLeiList = async ({id, getType }: any) => {const params: any = {};if (id&& getType) {params.id=id;}const res = await getPinLei(params);if (res) {const list = res.map((item: any) => ({label: item.name,value: item.id,}));if (!getType) {dispatch({oneList: list,});}if (getType === "getTwo") {dispatch({twoList: list,});}if (getType === "getThress") {dispatch({threeList: list,});}}};useEffect(() => {if (state?.visible) {getPinLeiList({});}}, [state?.visible]);// 处理提交事件const onSubmit = async () => {const { selectedRows } = state;if (selectedRows.length === 0) {onClose();return;}//数据校验if (selectedRows.length < 2) {message.error("至少选择2个demo");return;}if (selectedRows.length > 10) {message.error("至多选择10个demo");return;}callback?.(state.selectedRows);onClose();};const columns: PC.ProColumns<any>[] = [{dataIndex: "demoName",title: "demo名称",renderFormItem: () => {return <PC.ProFormText />;},},{dataIndex: "one",title: "一级",hideInTable: true,renderFormItem: () => {return <PC.ProFormSelect options={state?.oneList} showSearch />;},},{dataIndex: "two",title: "二级",hideInTable: true,renderFormItem: () => {return <PC.ProFormSelect options={state?.twoList} showSearch />;},},{dataIndex: "three",title: "三级",hideInTable: true,renderFormItem: () => {return <PC.ProFormSelect options={state?.threeList} showSearch />;},},];const onFieldsChange = (changedFields: any[]) => {const touched = changedFields?.[0];const field = touched?.name?.[0];if (field === "one") {if (touched.value) {//选择了一级,获取二级getPinLeiList({ id: touched.value, getType: "getTwo" });}//清空二级、三级,同时清空form值dispatch({twoList: [],threeList: [],});formRef.current?.setFieldsValue({two: undefined,three: undefined,});}if (field === "two") {if (touched.value) {//选择了二级，获取三级getPinLeiList({id: touched.value,getType: "getThress",});}//情况三级，同时清空form值dispatch({threeList: [],});formRef.current?.setFieldsValue({three: undefined,});}};return (<DrawerdestroyOnClosetitle={"添加demo"}placement="right"width="80%"closablemaskClosable={false}onClose={onClose}open={state?.visible}footer={<Space><Button onClick={onClose}>取消</Button><Buttontype="primary"onClick={onSubmit}disabled={state.selectedRows.length < 1}>确认</Button></Space>}><PC.ProTablerowKey="rowKey"options={false}columns={columns}pagination={{pageSizeOptions: ["10", "20", "50"],pageSize: state.pageSize,total: state.total,showSizeChanger: true,}}search={{defaultCollapsed: false,span: 8,}}form={{ onFieldsChange }}formRef={formRef}rowSelection={{preserveSelectedRowKeys: true,type: "checkbox",selectedRowKeys: state.selectedRowKeys,onChange: (selectedRowKeys, selectedRows) => {//反显问题const rowsList = selectedRows?.map((item, index) => {if (item) {return item;} else {const rowKey = selectedRowKeys[index];const row = state.selectedRows.filter((i: any) => i.rowKey === rowKey)[0];return row;}});dispatch({ selectedRowKeys, selectedRows: rowsList });},getCheckboxProps: (record: any) => ({disabled: record.type === "demo",}),}}request={(params: ParamsType) => {const newParams = {currentPage: params.current,pageSize: params.pageSize,...params,};delete newParams.current;return onQueryList(newParams);}}/></Drawer>);
});export default DemoDrawer;

反显时候onChange: (selectedRowKeys, selectedRows)中selectedRows可能会有undefined，需要把对应数据还原回去。

form={{ onFieldsChange }}实现级联选择。