接入数据

src/pages/user/components/modal.jsx

@@ -7,8 +7,8 @@ export default function ModalHooks({isModalOpen, closeModal}) {
     const [form] = Form.useForm();
     // 下拉选项
     const selectOption = [
-        {value: 1, label: '管理员'},
-        {value: 2, label: '访客'}
+        {value: 0, label: '管理员'},
+        {value: 1, label: '访客'}
     ]
 
     /**

src/pages/user/user.jsx

@@ -1,63 +1,57 @@
-import {  Table,Button,Input } from 'antd';
-import {useState} from 'react'
+import {Table, Button, Input} from 'antd';
+import {useState, useEffect} from 'react'
 import ModalHooks from "./components/modal.jsx";
 import './user.scss'
-const { Column } = Table;
+import axios from '@/utils/axios.js'
+
+const {Column} = Table;
 
 export default function User() {
-    const [inputVal,setInputVal] = useState('')
+    const [inputVal, setInputVal] = useState('')
     // 页面数据
-    const data = [
-        {
-            key: '1',
-            firstName: 'John',
-            lastName: 'Brown',
-            age: 32,
-            address: 'New York No. 1 Lake Park',
-            tags: ['nice', 'developer'],
-        },
-        {
-            key: '2',
-            firstName: 'Jim',
-            lastName: 'Green',
-            age: 42,
-            address: 'London No. 1 Lake Park',
-            tags: ['loser'],
-        },
-        {
-            key: '3',
-            firstName: 'Joe',
-            lastName: 'Black',
-            age: 32,
-            address: 'Sydney No. 1 Lake Park',
-            tags: ['cool', 'teacher'],
-        },
-    ];
+    const [data,setData] = useState([])
     // 是否展示弹框
     const [isModalOpen, setIsModalOpen] = useState(false);
+
     // 新增用户页面
-    function addUser(){
+    function addUser() {
         setIsModalOpen(true)
     }
-    function closeModal(){
+
+    // 关闭页面
+    function closeModal() {
         setIsModalOpen(false)
     }
-  return (
-    <div className="user">
-        <div className="top">
-            <div className="input">
-            <Input value={inputVal} onChange={(e)=>setInputVal(e.target.value)}/>  <Button type="primary">搜索</Button>
-            </div>
-            <div className="button">
-            <Button type="primary" onClick={addUser}>添加用户</Button>
+
+    async function getData() {
+        let {data} = await axios.get('/sys/select')
+        setData(data)
+    }
+
+    useEffect(() => {
+        getData()
+    }, [])
+    return (
+        <div className="user">
+            <div className="top">
+                <div className="input">
+                    <Input value={inputVal} onChange={(e) => setInputVal(e.target.value)}/> <Button
+                    type="primary">搜索</Button>
+                </div>
+                <div className="button">
+                    <Button type="primary" onClick={addUser}>添加用户</Button>
+                </div>
             </div>
+            <Table dataSource={data} pagination={{position: ['bottomRight']}} bordered={true} rowKey="id">
+                <Column title="用户名" dataIndex="account" key="id"/>
+                <Column title="姓名" dataIndex="name" key="id"/>
+                <Column title="手机号" dataIndex="phone" key="id"/>
+                <Column title="类型" dataIndex="type" key="id" render={(type)=>(<>
+                <span>{type===0?'管理员':"游客"}</span>
+                </>)}></Column>
+                <Column title="备注" dataIndex="remark" key="id"/>
+            </Table>
+            <ModalHooks isModalOpen={isModalOpen} closeModal={closeModal}></ModalHooks>
         </div>
-        <Table dataSource={data} pagination={{position:['bottomRight']}} bordered={true} >
-            <Column title="用户名" dataIndex="age" key="age" />
-            <Column title="密码" dataIndex="age" key="age" />
-            <Column title="备注" dataIndex="age" key="age" />
-        </Table>
-        <ModalHooks isModalOpen={isModalOpen} closeModal={closeModal}></ModalHooks>
-    </div>
-  );
+    );
 }