继续增删改查的练习，使用Ant Design(Day:24)

[XJQ124]

完成界面的增删改查

进度：百分之50（UI部分的工作结束）

---

代码内容：

import React, { useState } from 'react';
import { Button, Table, Input, Dropdown, Modal, Form, Select } from 'antd';
import {MoreOutlined} from '@ant-design/icons';

const columns = [
  {
    title: '序号',
    width: 60,
    dataIndex: 'number',
    key: 'number',
    fixed: 'left',
  },
  {
    title: '姓名',
    width: 100,
    dataIndex: 'name',
    key: 'name',
    fixed: 'left',
  },
  {
    title: '邮箱',
    dataIndex: 'email',
    key: 'email',
    width: 150,
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    key: 'phone',
    width: 150,
  },
  {
    title: '部门',
    dataIndex: 'department',
    key: 'department',
    width: 150,
  },
  {
    title: '工号',
    dataIndex: 'work',
    key: 'work',
    width: 150,
  },
  {
    title: '职务',
    dataIndex: 'job',
    key: 'job',
    width: 150,
  },
  {
    title: '登录次数',
    dataIndex: 'login',
    key: 'login',
    width: 150,
  },
  {
    title: '最近登录时间',
    dataIndex: 'times',
    key: 'times',
    width: 150,
  },
  {
    title: '允许登录',
    dataIndex: 'allow',
    key: 'allow',
  },
  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    width: 100,
    render: () => (
      <Dropdown
        menu={{
          items:[
            {
              key:'edit',
              label:'编辑'
            },
            {
              key:'delet',
              label:'删除'
            }
          ],
          onClick:({items,key})=>{

          }
        }}
        placement="bottom"
        arrow
      >
        <MoreOutlined />
      </Dropdown>
    ),
  },
];

const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i,
    name: `Edward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
  });
}
const App = () => {
  const { Search } = Input;
  const onSearch = (value, _e, info) => console.log(info?.source, value);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () =>{
    setIsModalOpen(false);
  };
  const handleCancel = () =>{
    setIsModalOpen(false)
  };

  return(
    <div style={{margin:'20px'}}>
      <h3 style={{ fontSize: '20px', margin: '10px' }}>用户管理</h3>
      <div>
        <Button type="primary" onClick={showModal}>+ 新增用户</Button>
      </div>
      <hr style={{ marginTop: '30px' }} />
      <Search
        placeholder="请输入姓名、邮箱、手机号码..."
        onSearch={onSearch}
        style={{
          fontSize: '20px', 
          margin: '10px',
          width: 200,
        }}
      />
      <Table
        style={{ fontSize: '20px', margin: '10px'}}
        columns={columns}
        dataSource={data}
        bordered
        scroll={{
          x: 1500,
          y: 300,
        }}
      />
      <Modal title="新增用户" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Form labelCol={{
          span: 4,
        }}
          wrapperCol={{
            span: 20,
          }}

          >
        <Form.Item label="姓名" name="name" rules={[{ required: true, message: '请输入公司姓名' }]} >
          <Input />
        </Form.Item>
        <Form.Item label="邮箱" name="address" rules={[{ required: true, message: '请输入邮箱地址' }]}>
          <Input />
        </Form.Item>
        <Form.Item label="手机号码" name="phone" rules={[{ message: '请输入手机号码' }]}>
          <Input />
        </Form.Item>
        <Form.Item label="工号" name="work" rules={[{ message: '请输入公号' }]}>
          <Input />
        </Form.Item>
        <Form.Item label="部门" name="department" rules={[{ message: '请输入所在部门' }]}>
          <Input />
          </Form.Item>
          <Form.Item label="职务" name="job" rules={[{ message: '请输入你所担任的职务' }]}>
            <Input />
        </Form.Item>
        <Form.Item label="登录">
          <Select>
            <Select.Option value="demo">允许</Select.Option>
            <Select.Option value="demo">不允许</Select.Option>
          </Select>
        </Form.Item>

        </Form>
      </Modal>
    </div>
  )
};
export default App;

2、界面展示

今晚回去争取把这部分搞掉，争取明天结束