Description
Something went wrong.
Converting circular structure to JSON --> starting at object with constructor 'FiberNode' | property 'stateNode' -> object with constructor 'HTMLDivElement' --- property '__reactFiber$flvkei3z9d9' closes the circle
`import type {ActionType} from '@ant-design/pro-components';
import {
FooterToolbar,
PageContainer,
ProColumns,
ProDescriptions,
ProDescriptionsItemProps,
ProTable,
} from '@ant-design/pro-components';
import {FormattedMessage, useIntl} from '@umijs/max';
import {Avatar, Button, Drawer, Switch} from 'antd';
import React, {useRef, useState} from 'react';
import {API} from "@/services/ant-design-pro/typings";
import {useAccess} from "@@/exports";
import {DeleteFilled} from "@ant-design/icons";
import {upsetUser} from "@/pages/Account/config/api/upsetUser";
import UserUpdateForm from "@/pages/Account/components/UpdateForm";
import {removeUser} from "@/pages/Account/config/api/removeUser";
import {getUser} from "@/pages/Account/config/api/getUser";
import AssignForm from "@/pages/Account/components/AssignForm";
import {getFileByUuId} from "@/pages/Account/config/api/getFileByUuId";
const TableList: React.FC = () => {
const [showDetail, setShowDetail] = useState(false);
const actionRef = useRef();
const [currentRow, setCurrentRow] = useState<API.User>();
const [selectedRowsState, setSelectedRows] = useState<API.User[]>([]);
const access = useAccess(); // access 实例的成员: canReadFoo, canUpdateFoo, canDeleteFoo
const intl = useIntl();
const columns: ProColumns<API.User>[] = [
{
title: (
),
dataIndex: 'name',
align: 'center',
render: (dom, entity) => {
return (
<a
onClick={() => {
setCurrentRow(entity);
setShowDetail(true);
}}
>
{dom}
);
},
},
{
title: (
),
dataIndex: 'avatar',
align: 'center',
valueType: 'avatar',
hideInSearch: true,
render: (text, record) => {
let res = getFileByUuId(record.avatar)
// text是当前单元格的值，record是当前行的数据
return <Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=2"/>
},
},
{
title: (
<FormattedMessage
id="user.table.email"
defaultMessage="Email"
/>
),
dataIndex: 'email',
valueType: 'email',
align: 'center',
hideInSearch: true
},
{
title: (
<FormattedMessage
id="user.table.phone"
defaultMessage="Phone"
/>
),
dataIndex: 'phone',
align: 'center',
hideInSearch: true
},
{
title: <FormattedMessage id="User.table.enable" defaultMessage="Enable"/>,
dataIndex: 'enable',
align: 'center',
valueType: "switch",
hideInSearch: true,
render: (text, record) => {
// text是当前单元格的值，record是当前行的数据
return <Switch
key={`${record.enable}`}
size={"small"}
checkedChildren={<FormattedMessage
id="pages.searchTable.enable.true"
defaultMessage="Enable"
/>}
unCheckedChildren={<FormattedMessage
id="pages.searchTable.enable.false"
defaultMessage="UnEnable"
/>}
checked={record.enable}
onChange={async (checked) => {
console.log("record", record);
await upsetUser({...record, enable: checked});
actionRef.current?.reload();
}}
/>;
},
},
{
title: <FormattedMessage id="User.table.status" defaultMessage="Status"/>,
dataIndex: 'status',
align: 'center',
valueType: "select",
hidden: true,
initialValue: "ALL",
valueEnum: {
ALL: {
text: (
<FormattedMessage id="pages.searchTable.enable.all" defaultMessage="ALL"/>
),
status: 'ALL',
},
ON: {
text: (
<FormattedMessage id="pages.searchTable.enable.true" defaultMessage="Online"/>
),
status: 'ON',
},
OFF: {
text: (
<FormattedMessage
id="pages.searchTable.enable.false"
defaultMessage="OFF"
/>
),
status: 'Default',
},
},
},
{
title: (
<FormattedMessage
id="pages.searchTable.updateAt"
defaultMessage="UpdateAt"
/>
),
dataIndex: 'updateAt',
valueType: 'date',
align: 'center',
hideInSearch: true,
},
{
title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="Operating"/>,
dataIndex: 'option',
valueType: 'option',
hidden: !access.upsetUser,
render: (_, record) => [
<>
<UserUpdateForm actionRef={actionRef} record={record} key={"pages.searchTable.edit"}/>
<AssignForm actionRef={actionRef} userId={record.id}/>
</>
],
},
];
return (
<ProTable<API.User, API.PageParams>
headerTitle={intl.formatMessage({
id: 'pages.searchTable.title',
defaultMessage: 'Enquiry form',
})}
actionRef={actionRef}
rowKey="id"
search={{
labelWidth: 120,
}}
expandable={{
indentSize: 20, // 缩进的大小，单位为 px
childrenColumnName: 'children', // 子节点的属性名称
}}
options={
{fullScreen: true, setting: true}
}
toolBarRender={() => [
<UserUpdateForm actionRef={actionRef} record={null} key={"pages.searchTable.new"}/>
]}
pagination={{
defaultPageSize: 2
}}
request={getUser}
columns={columns}
rowSelection={{
checkStrictly: false, // 设置为 true 以禁用父子节点关联选择
onChange: (_, selectedRows) => {
console.log(selectedRows, selectedRows)
setSelectedRows(selectedRows);
},
}}
/>
{selectedRowsState?.length > 0 && (
<FooterToolbar
extra={
{' '}
<a style={{fontWeight: 600}}>{selectedRowsState.length}{' '}
}
>
<Button
danger={true}
type={"primary"}
icon={}
onClick={async () => {
await removeUser(selectedRowsState);
setSelectedRows([]);
actionRef.current?.reloadAndRest?.();
}}
>
)}
<Drawer
width={600}
open={showDetail}
onClose={() => {
setCurrentRow(undefined);
setShowDetail(false);
}}
closable={false}
>
{currentRow?.name && (
<ProDescriptions<API.User>
column={2}
title={currentRow?.name}
request={async () => ({
data: currentRow || {},
})}
params={{
id: currentRow?.name,
}}
columns={columns.map(column => {
// 如果您想要在Drawer中禁用特定的列，可以在这里进行修改
if (column.dataIndex === 'enable') {
return {
title: <FormattedMessage id="pages.searchTable.enable" defaultMessage="Enable"/>,
dataIndex: 'enable',
hideInSearch: true,
align: 'center',
valueEnum: {
true: {
text: (
<FormattedMessage
id="pages.searchTable.enable.true"
defaultMessage="Running"
/>
),
status: 'Success',
},
false: {
text: (
<FormattedMessage id="pages.searchTable.enable.false" defaultMessage="Shut down"/>
),
status: 'Error',
},
},
}
}
return column as ProDescriptionsItemProps<API.User>[];
})}
/>
)}
</Drawer>
</PageContainer>
);
};
export default TableList;
`