/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable react-hooks/rules-of-hooks */
import { doFetch } from "@/utils/doFetch";
import { ProTable } from "@ant-design/pro-components";
import { Tooltip } from "@mui/material";
import { useAsyncEffect } from "ahooks";
import { memo, useEffect, useRef, useState } from "react";
import Resizecell from "./Resizecell";
let handlEmptyChild = (tree = []) => {
const newtree = tree.map((item) => {
if (!item.children || item.children.length == 0) {
item.value = item.key;
return item;
} else {
item.value = item.key;
return {
...item,
children: handlEmptyChild(item.children),
};
}
});
return newtree;
};
const AutoTable = (props) => {
const {
actionRef, //表格动作
formRef, //表单Ref
rowKey, // key
columns = [], //columns
style, //style
path, //接口地址
extraparams, //额外参数
pageSize, //修改默认pageSize
pagination, //分页设置
x, //横向滚动
resizeable = false,
rerendered = true,
onValuesChange = () => {},
dataSource = null,
setparams
} = props;
const actionRefs = actionRef ?? useRef(),
formRefs = formRef ?? useRef(),
ifspagination = pagination == "false" || pagination === false,
[size, setsize] = useState("large"),
[valueColumns, setvalueColumns] = useState({});
const [columnes, setcolumnes] = useState(
columns?.filter?.((it) => it.valueType != "split") ?? []
);
const [paramconfig, setparamconfig] = useState({});
//调用接口
const request = async (params, sort, filter) => {
if (!path) return;
let newparams = {
...params,
...extraparams, //父组件传参
pageIndex: params.current,
pageSize: params.pageSize || pageSize,
};
delete newparams.current;
if (ifspagination) {
delete newparams.pageIndex;
delete newparams.pageSize;
}
const result = await doFetch({ url: path, params: newparams });
//分页结果
let data = result?.data?.page?.records,
success = true,
total = result?.data?.page?.total;
//不带分页获取结果
if (ifspagination) {
data = result?.data?.dataList;
total = result?.data?.dataList?.length;
}
setparams?.(total);
return {
data,
success,
total,
};
};
useEffect(() => {
setcolumnes((s) => {
return columns
.filter((it) => it.valueType != "split")
.map((item, index) => {
let it = { ...item },
curkey = it?.key ?? it?.dataIndex;
if (it.valueType == "option") {
curkey = "option";
}
let options = {};
if (
["select", "treeSelect", "radio", "checkbox", "cascader"].includes(
it?.valueType
)
) {
if (Array.isArray(it.options)) {
options = {
fieldProps: {
...it?.fieldProps,
options: [...it.options],
popupMatchSelectWidth: 200,
},
};
} else if (it.options) {
options = {
fieldProps: {
...it?.fieldProps,
popupMatchSelectWidth: 200,
showSearch: true,
},
params: paramconfig[curkey],
request: async (parames) => {
delete parames?.keyWords;
if (Object.keys(it?.options).includes("linkParams")) {
let list = await doFetch({
url: it?.options?.path,
params: { ...parames, isAll: 1 },
});
const res = list.data.dataList;
return it.valueType == "treeSelect"
? handlEmptyChild(res)
: res;
} else {
let list = await doFetch({
url: it?.options?.path,
params: it?.options?.params,
});
const res = list.data.dataList;
return it.valueType == "treeSelect"
? handlEmptyChild(res)
: res;
}
},
};
}
}
if (it.valueType == "option") {
options = {
key: "option",
dataIndex: "option",
fixed: "right",
};
}
if (!it.render) {
options = {
...options,
render: (text, row) => {
return (
{row[it.dataIndex] ?? "-"}
);
},
};
}
options = {
...options,
};
delete it.formItemProps;
return {
...it,
...options,
onHeaderCell: (column) => ({
width: column.width,
onResize: handleResize(index),
onResizeStop: handleResizeStop(index),
}),
};
});
});
}, [paramconfig, columns]);
//调用重新渲染表格
useAsyncEffect(async () => {
rerendered && actionRefs?.current?.reload();
}, [path, columns, extraparams]);
//缩放表格
const handleResize =
(index) =>
(e, { size }) => {
e.stopImmediatePropagation();
setcolumnes((s) => {
const nextColumns = [...s];
nextColumns[index] = {
...nextColumns[index],
width: size.width,
};
return nextColumns;
});
};
//更新表格缩放
const handleResizeStop =
(index) =>
(e, { size }) => {
e.stopImmediatePropagation();
setvalueColumns((s) => {
let submitdata = { ...s } ?? {},
curkey = columnes[index]?.key ?? columnes[index]?.dataIndex;
if (!curkey) return;
submitdata[curkey] = submitdata[curkey] ?? {};
submitdata[curkey].width = parseInt(size.width);
delete submitdata["undefined"];
return submitdata;
});
};
const components = resizeable
? {
components: {
header: {
cell: Resizecell,
},
},
columnsState: {
value: valueColumns,
onChange: (val, state) => {
setvalueColumns((s) => {
let submitdata = {
...s,
...val,
};
return submitdata;
});
},
},
}
: {};
const dataparams = dataSource
? {
dataSource,
}
: {
request,
};
return (
{
let curchangekey = Object.keys(changedValues)[0];
let newparams = {},
resetkeys = [];
columns.map((it, i) => {
const { linkParams } = it?.options ?? {};
if (linkParams && Object.keys(linkParams).includes(curchangekey)) {
for (let dataindex in linkParams) {
let linkkey = "";
if (!linkParams[dataindex]) {
linkkey = dataindex;
} else {
linkkey = linkParams[dataindex];
}
newparams[linkkey] =
formRefs?.current?.getFieldValue?.(dataindex);
resetkeys.push(it?.key);
}
}
});
const resetkey = resetkeys?.filter((it) => it !== curchangekey)?.[0];
if (resetkey) {
formRefs?.current?.setFieldsValue({ [resetkey]: "" });
}
if (Object?.keys?.(newparams)?.length > 0) {
setparamconfig((s) => ({
...s,
[resetkey]: newparams,
}));
}
onValuesChange?.(changedValues, values);
},
}}
onSizeChange={(size) => {
localStorage.setItem("size", size); //设置全局表格规格缓存
setsize(size);
}}
columns={columnes ?? []}
style={style || {}}
actionRef={actionRefs}
formRef={formRefs}
rowKey={rowKey ?? "id"} //表格每行数据的key
dateFormatter="string"
pagination={{
size: !ifspagination ? "default" : "small",
showTotal: (total, range) => 共{total}条,
showQuickJumper: true,
showSizeChanger: true,
pageSizeOptions: [5, 10, 15, 30, 50, 100, 200],
defaultPageSize: pageSize || 15,
}}
search={{
filterType: "light", //轻量模式
placement: "bottomLeft",
}}
/>
);
};
export default memo(AutoTable);