项目中Ant Design Pro业务问题解决方案
1、ProTable实现多选+反显+筛选项多级关联选择
import { forwardRef, useImperativeHandle, useEffect, useRef, useReducer } from 'react';
import { Drawer, Space, Button, message } from 'antd';
import { ProTable, ProColumns, ProFormText, ProFormSelect } 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((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();
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: ProColumns[] = [
{
dataIndex: 'demoName',
title: 'demo名称',
renderFormItem: () => {
return
}
>
{
//反显问题
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);
}}
/>
);
});
export default DemoDrawer;
反显时候onChange: (selectedRowKeys, selectedRows)中selectedRows可能会有undefined，需要把对应数据还原回去。
form={{ onFieldsChange }}实现级联选择。
2、Form表单项值前后去空格
{
return e?.target?.value?.trim();
}}
fieldProps={{ maxLength: 12 }}
rules={[{ required: true, message: "请输入demo名称" }]}
/>; 3 ProTable搜索提交表单值前后去空格
{
for (const item of Object.keys(params)) {
if (typeof params[item] === "string") {
params[item] = params[item].trim();
}
}
return params;
}}
/> 推广一下自己开发的微信小程序，有兴趣的朋友可以玩一玩
