import { Button, Card, Form, Input, InputNumber, Modal, Select, Space, Table, Tag, } from 'antd'; import React, { useEffect, useState } from 'react'; import useStore from '../../store'; const { Option } = Select; const Home: React.FC = () => { const [form] = Form.useForm(); const list = useStore((state) => state.list); const loading = useStore((state) => state.loading); const editItem = useStore((state) => state.editItem); const { getList, removeList, editList, addList, setEditItem } = useStore.getState(); const [visible, setVisible] = useState<boolean>(false); useEffect(() => { getList(); }, []); const columns = [ { title: '姓名', dataIndex: 'name', key: 'name', }, { title: '年龄', dataIndex: 'age', key: 'age', }, { title: '住址', dataIndex: 'address', key: 'address', }, { title: 'Tags', key: 'tags', dataIndex: 'tags', // eslint-disable-next-line react/display-name render: (tags: any[]) => ( <> {tags?.map((tag) => { let color = tag.length > 5 ? 'geekblue' : 'green'; if (tag === 'loser') { color = 'volcano'; } return ( <Tag color={color} key={tag}> {tag.toUpperCase()} </Tag> ); })} </> ), }, { title: 'Action', key: 'action', // eslint-disable-next-line react/display-name render: (_: any, record: { key: string }) => ( <Space size="middle"> <Button type="primary" onClick={() => { setEditItem(record); setVisible(true); form.setFieldsValue(record); }}> 修改 </Button> <Button danger onClick={() => removeList(record.key)}> 删除 </Button> </Space> ), }, ]; const handleCancle = () => { setVisible(false); }; const hanldeOk = () => { handleCancle(); form.validateFields().then((res) => { console.log(res); editItem ? editList(res) : addList(res); }); }; console.log('list', list); return ( <div> <h2>Home</h2> <Space> {/* <Button type="primary" onClick={() => setVisible(true)}> 新增 </Button> <Button onClick={() => getList()}>refresh</Button> */} </Space> <Card loading={loading}> <Table dataSource={list} columns={columns} /> </Card> {/* transitionName=""和maskTransitionName=""是去除弹框动画属性 */} <Modal // transitionName="" // maskTransitionName="" title={editItem ? '修改信息' : '新增信息'} visible={visible} onOk={hanldeOk} onCancel={handleCancle} afterClose={() => { form.resetFields(); setEditItem(undefined); }}> <Form form={form}> <Form.Item required label="姓名" name="name"> <Input /> </Form.Item> <Form.Item label="年龄" name="age"> <InputNumber /> </Form.Item> <Form.Item name="tags" label="Tags"> <Select allowClear> <Option key="nice" value="nice"> nice </Option> <Option key="developer" value="developer"> developer </Option> <Option value="loser">loser</Option> <Option value="cool">cool</Option> <Option value="teacher">teacher</Option> </Select> </Form.Item> </Form> </Modal> </div> ); }; export default Home;