项目中Ant Design Pro业务问题解决方案

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 (
    <Drawer
      destroyOnClose
      title={"添加demo"}
      placement="right"
      width="80%"
      closable
      maskClosable={false}
      onClose={onClose}
      open={state?.visible}
      footer={
        <Space>
          <Button onClick={onClose}>取消</Button>
          <Button
            type="primary"
            onClick={onSubmit}
            disabled={state.selectedRows.length < 1}
          >
            确认
          </Button>
        </Space>
      }
    >
      <PC.ProTable
        rowKey="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 }}实现级联选择。