import React, { useState, useRef, forwardRef, useImperativeHandle, useEffect } from 'react';
import { Button, message } from 'antd';
import ProForm, {
ModalForm,
ProFormText,
ProFormDateRangePicker,
ProFormSelect,
} from '@ant-design/pro-form';
import { Popconfirm, Space, Menu, Dropdown } from 'antd';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { DownOutlined } from '@ant-design/icons';
const waitTime = (time: number = 100) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(true);
}, time);
});
};
export type Member = {
avatar: string;
realName: string;
nickName: string;
email: string;
outUserNo: string;
phone: string;
role: RoleType;
permission?: string[];
};
export type RoleMapType = Record<
string,
{
name: string;
desc: string;
}
;
// interface Props extends Partial
export type RoleType = 'admin' | 'operator';
const RoleMap: RoleMapType = {
admin: {
name: '管理員',
desc: '僅擁有指定項目的權限',
},
operator: {
name: '操作員',
desc: '擁有所有權限',
},
};
const tableListDataSource: Member[] = [];
const realNames = ['馬巴巴', '測試', '測試2', '測試3'];
const nickNames = ['巴巴', '測試', '測試2', '測試3'];
const emails = ['baba@antfin.com', 'test@antfin.com', 'test2@antfin.com', 'test3@antfin.com'];
const phones = ['12345678910', '10923456789', '109654446789', '109223346789'];
const permissions = [[], ['權限點名稱1', '權限點名稱4'], ['權限點名稱1'], []];
for (let i = 0; i < 5; i += 1) {
tableListDataSource.push({
outUserNo: ${102047 + i},
avatar: 'https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg',
role: i === 0 ? 'admin' : 'operator',
realName: realNames[i % 4],
nickName: nickNames[i % 4],
email: emails[i % 4],
phone: phones[i % 4],
permission: permissions[i % 4],
});
}
const roleMenu = (
<Menu>
<Menu.Item key="admin">管理員</Menu.Item>
<Menu.Item key="operator">操作員</Menu.Item>
</Menu>
);
export const Child = forwardRef((props, ref) => {
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
useImperativeHandle(ref, () => ({
selectedRowKeys: selectedRowKeys,
}));
const renderRemoveUser = (text: string) => (
<Popconfirm key="popconfirm" title={確認${text}嗎?} okText="是" cancelText="否">
<a>{text}</a>
</Popconfirm>
);
const columns: ProColumns<Member>[] = [
{
dataIndex: 'avatar',
title: '成員名稱',
valueType: 'avatar',
width: 150,
render: (dom, record) => (
<Space>
<span>{dom}</span>
{record.nickName}
</Space>
),
},
{
dataIndex: 'email',
title: '賬號',
},
{
dataIndex: 'phone',
title: '手機號',
},
{
dataIndex: 'role',
title: '角色',
render: (_, record) => (
<Dropdown overlay={roleMenu}>
<span>
{RoleMap[record.role || 'admin'].name} <DownOutlined />
</span>
</Dropdown>
),
},
{
dataIndex: 'permission',
title: '權限范圍',
render: (_, record) => {
const { role, permission = [] } = record;
if (role === 'admin') {
return '所有權限';
}
return permission && permission.length > 0 ? permission.join('涉馁、') : '無';
},
},
{
title: '操作',
dataIndex: 'x',
valueType: 'option',
render: (_, record) => {
let node = renderRemoveUser('退出');
if (record.role === 'admin') {
node = renderRemoveUser('移除');
}
return [<a key="edit">編輯</a>, node];
},
}，
];
const onSelectChange = (selectedRowKeys: any, selectedRows: any) => {
setSelectedRowKeys(selectedRowKeys);
};
return (
<ModalForm
title="新建表單"
trigger={<Button type="primary">新建表單</Button>}
autoFocusFirstInput
modalProps={{
onCancel: () => console.log('run'),
}}
onFinish={async (values) => {
await waitTime(2000);
console.log(values);
message.success('提交成功');
return true;
}}
>
<ProTable<Member>
rowSelection={{
selectedRowKeys,
onChange: onSelectChange,
// 自定義選擇項參考: https://ant.design/components/table-cn/#components-table-demo-row-selection-
custom
// 注釋該行則默認不顯示下拉選項
}}
scroll={{ x: 1300 }}
columns={columns}
request={(params, sorter, filter) => {
// 表單搜索項會從 params 傳入，傳遞給后端接口焕参。
console.log(params, sorter, filter);
return Promise.resolve({
data: tableListDataSource,
success: true,
});
}}
rowKey="outUserNo"
pagination={{
showQuickJumper: true,
}}
toolBarRender={false}
search={false}
/>
</ModalForm>
);
});
const Index = (props) => {
return (
<div>
{[1,2,3,4,5].map((item,index)=>{
return <Child ref={(dom)=>props.getRef(dom,index)} key={index}/>
})
}
</div>
);
}
const Page = () =>{
const refs = useRef([]);
const getRef = (dom,index)=>{
refs.current[index]=dom
}
return <div>
<Index getRef={getRef}/>
<button onClick={()=>{
console.log(refs,'1212')
}}>dian </button>
</div>
}
export default Page;
