Browse Source

新增登陆页面和字典页面

fengxiang 2 years ago
parent
commit
38c54aab98

+ 2 - 2
.env.development

@@ -1,2 +1,2 @@
-# VITE_SERVER_URL=http://172.20.105.85:9001
-VITE_SERVER_URL=http://teffwu.natappfree.cc
+VITE_SERVER_URL=http://172.20.105.85:9001
+#VITE_SERVER_URL=http://teffwu.natappfree.cc

+ 2 - 1
package.json

@@ -19,7 +19,8 @@
     "react-redux": "^9.0.4",
     "react-redux": "^9.0.4",
     "react-router-dom": "^6.14.1",
     "react-router-dom": "^6.14.1",
     "redux": "^5.0.1",
     "redux": "^5.0.1",
-    "sass": "^1.63.6"
+    "sass": "^1.63.6",
+    "snowflake-id-js": "^1.0.1"
   },
   },
   "devDependencies": {
   "devDependencies": {
     "@types/react": "^18.2.14",
     "@types/react": "^18.2.14",

+ 2 - 0
src/index.jsx

@@ -8,6 +8,7 @@ import {BrowserRouter, Routes, Route, Navigate} from "react-router-dom";
 import {Provider} from 'react-redux'
 import {Provider} from 'react-redux'
 import '../src/assets/css/clear.css'
 import '../src/assets/css/clear.css'
 import store from './store/index.js'
 import store from './store/index.js'
+import Dict from "@/pages/dict/dict.jsx";
 ReactDOM.createRoot(document.getElementById("root")).render(
 ReactDOM.createRoot(document.getElementById("root")).render(
     <Provider store={store}>
     <Provider store={store}>
         <React.StrictMode>
         <React.StrictMode>
@@ -17,6 +18,7 @@ ReactDOM.createRoot(document.getElementById("root")).render(
                     <Route path="/" element={<Home></Home>}>
                     <Route path="/" element={<Home></Home>}>
                         <Route path="test" element={<Test></Test>}></Route>
                         <Route path="test" element={<Test></Test>}></Route>
                         <Route path="user" element={<User></User>}></Route>
                         <Route path="user" element={<User></User>}></Route>
+                        <Route path="dict" element={<Dict></Dict>}></Route>
 
 
                     </Route>
                     </Route>
                     {/**这里重定向到home页面 */}
                     {/**这里重定向到home页面 */}

+ 180 - 0
src/pages/dict/components/dictType.jsx

@@ -0,0 +1,180 @@
+import './dictType.scss'
+import {Modal, Form, Input, Table , message,Button} from 'antd';
+import axios from '@/utils/axios.js'
+import {useState,useEffect} from 'react'
+import {snowflakeGenerator} from 'snowflake-id-js';
+export default function ModalHooks({isModalOpen, closeModal, row}) {
+    const [messageApi, contextHolder] = message.useMessage();
+    // 表单
+    const [form] = Form.useForm();
+    // 表单内容
+    const columns = [
+
+        {
+            title: '字典项名称',
+            dataIndex: 'name',
+            key:'id',
+            render: (text, record,index) => <Input value={text} onChange={(e)=>setValue(e.target.value,index,'name')}></Input>,
+        },
+        {
+            title: '字典项值',
+            dataIndex: 'val',
+            key:'id',
+            render: (text, record,index) => <Input value={text} onChange={(e)=>setValue(e.target.value,index,'val')}></Input>,
+        },
+        {
+            title: '操作',
+            render: (text, record,index) => (
+                <Button danger onClick={()=>removeRowList(index)}>删除</Button>
+            ),
+        }
+    ];
+    const [data,setData] = useState([
+
+    ])
+
+    /**
+     * 新增字典项
+     */
+    function addRow(){
+        form.validateFields().then(()=>{
+        const generator = snowflakeGenerator(512);
+        setData([...data,{
+            name:null,
+            val:null,
+            id:generator.next().value
+        }])
+        })
+    }
+
+    /**
+     * 设置每个input的数据类型
+     * @param value 数据值
+     * @param index 下标
+     * @param dataName 名称
+     */
+    function setValue(value,index,dataName){
+        console.log(value,index,dataName)
+        let newData = JSON.parse(JSON.stringify(data))
+        newData[index][dataName]=value
+        setData(newData)
+        console.log(data)
+    }
+
+    /**
+     * 删除每一行的数据
+     * @param index
+     */
+    function removeRowList(index){
+        let newData = JSON.parse(JSON.stringify(data))
+        newData.splice(index,1)
+        setData(newData)
+    }
+    /**
+     *确定时候的回调
+     */
+    function handleOk() {
+        // 验证表单
+        form.validateFields().then(async () => {
+            let newData = JSON.parse(JSON.stringify(form.getFieldsValue()))
+            if(data.length===0){
+                messageApi.error('未添加字典项')
+                return
+            }
+            for (const item of data) {
+                console.log(item)
+                if(item.name===null||item.val===null||item.name===''||item.val===''){
+                    messageApi.error('数据未填写完整')
+                    return
+                }
+                item.key=newData.key
+            }
+            newData.valueList=data
+            let {code, message} = await axios.post('/dict/saveOrUpdateKey', newData)
+            if (code === 200) {
+                handleCancel()
+            }
+        })
+    }
+
+    // 关闭页面
+    const handleCancel = () => {
+        closeModal(false);
+        form.resetFields()
+    };
+    // 表单
+    useEffect(() => {
+        // console.log(row)
+        if (row.id) {
+            let formData = JSON.parse(JSON.stringify(row))
+
+            form.setFieldsValue(formData)
+
+        }
+    }, [row])
+
+    return (
+        <div className="dict-modal">
+
+            {contextHolder}
+            <Modal title={row?.id?'修改字典':'新增字典'} open={isModalOpen} onOk={handleOk} onCancel={handleCancel} width={900}
+                   cancelText="取消" okText="确定" wrapClassName="dict-modal">
+                <Form
+                    name="basic"
+                    form={form}
+                    wrapperCol={
+                        {span: 30, offset: 0}
+                    }
+
+                    layout='inline'
+                    initialValues={{
+                        remember: true,
+                    }}
+
+                    autoComplete="off"
+                >
+
+
+                    <Form.Item
+                        label="字典名称"
+                        name="name"
+                        rules={[
+                            {
+                                required: true,
+                                message: '请输入字典名称',
+                            },
+                        ]}
+
+                    >
+                        <Input/>
+                    </Form.Item>
+
+                    <Form.Item
+                        label="字典值"
+                        name="key"
+                        rules={[
+                            {
+                                required: true,
+                                message: '字典值',
+
+                            },
+                        ]}
+                    >
+                        <Input/>
+                    </Form.Item>
+                </Form>
+                 <Button type="primary" className={'addrow'} onClick={addRow}>新增字典项</Button>
+                <Table
+                        bordered
+                        dataSource={data}
+                        pagination={false}
+                        scroll={{y:'400px'}}
+                        columns={columns}>
+
+                </Table>
+            </Modal>
+        </div>
+    )
+
+
+}

+ 5 - 0
src/pages/dict/components/dictType.scss

@@ -0,0 +1,5 @@
+.dict-modal{
+  .addrow{
+    margin-bottom: 10px;
+  }
+}

+ 126 - 0
src/pages/dict/dict.jsx

@@ -0,0 +1,126 @@
+import {Table, Button, Input, Popconfirm} from "antd";
+import {useState, useEffect} from "react";
+import ModalHooks from "./components/dictType.jsx";
+import "./dict.scss";
+import axios from "@/utils/axios.js";
+
+const {Column} = Table;
+
+export default function Dict() {
+    const [inputVal, setInputVal] = useState("");
+    // 页面数据
+    const [data, setData] = useState([]);
+    // 是否展示弹框
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [row, setRow] = useState({});
+
+    // 新增用户页面
+    function addUser() {
+        setRow([]);
+        setIsModalOpen(true);
+    }
+
+    // 关闭页面
+    function closeModal() {
+        setIsModalOpen(false);
+        getData()
+    }
+
+    // 点击修改的回调
+    function modify(data) {
+        setRow(data);
+        setIsModalOpen(true);
+
+    }
+
+    // 获取数据
+    async function getData() {
+        let {data} = await axios.get("/sys/select");
+        setData(data);
+    }
+
+    /**
+     * 删除页面
+     * @param data 删除每一条数据
+     * @returns {Promise<void>}
+     */
+    async function deleteRow(data) {
+        let {code} = await axios.get('/sys/delete', {params: {id: data.id}})
+        if (code === 200) {
+            await getData()
+        }
+    }
+
+    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" width="200px"/>
+                <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"/>
+                <Column
+                    title="操作"
+                    width="170px"
+                    dataIndex="id"
+                    key="id"
+                    render={(text, record) => (
+                        <div className="btn">
+                            <Button type="primary" onClick={() => modify(record)}>
+                                修改
+                            </Button>
+                            <Popconfirm
+                                title="删除数据"
+                                description="是否删除本条数据?"
+                                onConfirm={() => deleteRow(record)}
+                                okText="删除"
+                                cancelText="取消"
+                            >
+                                <Button type="primary" danger>
+                                    删除
+                                </Button>
+                            </Popconfirm>
+                        </div>
+                    )}
+                />
+            </Table>
+            <ModalHooks
+                isModalOpen={isModalOpen}
+                closeModal={closeModal}
+                row={row}
+            ></ModalHooks>
+        </div>
+    );
+}

+ 32 - 0
src/pages/dict/dict.scss

@@ -0,0 +1,32 @@
+.user{
+  width: 100%;
+  height: 100%;
+  .top{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 5px;
+    .input{
+      display: flex;
+      button{
+        margin-left: 10px;
+      }
+    }
+    .button{
+      button{
+        margin-left: 10px;
+      }
+    }
+  }
+  .btn{
+    display: flex;
+    justify-content: space-between;
+
+  }
+
+}
+#basic{
+
+.ant-form-item{
+  margin-bottom: 20px;
+}
+}

+ 83 - 45
src/pages/home/home.jsx

@@ -1,51 +1,89 @@
 import "./home.scss";
 import "./home.scss";
-import { Menu } from 'antd';
-import { useState } from "react";
-import {  MailOutlined, SettingOutlined,UserOutlined } from '@ant-design/icons';
-import { Outlet,useNavigate } from 'react-router-dom';
+import {Menu, Avatar, Popconfirm} from 'antd';
+import {useState} from "react";
+import {MailOutlined, SettingOutlined, UserOutlined,FileDoneOutlined} from '@ant-design/icons';
+import {Outlet, useNavigate} from 'react-router-dom';
+import axios from "@/utils/axios.js";
+
 export default function Home() {
 export default function Home() {
-  const navagate = useNavigate()
-  const [current, setCurrent] = useState('mail');
-  // 菜单数据
-  const items=[
-    {
-      label: '客流分析',
-      key: '',
-      icon: <MailOutlined />,
-    },
-    {
-      label: '主页',
-      key: 'test',
-      icon: <SettingOutlined />,
-    },
-    {
-      label: '基础信息配置',
-      key: 'setting',
-      icon: <SettingOutlined />,
-      children:[{
-        label: '用户管理',
-        key: 'user',
-        icon:<UserOutlined />,
-      }]
-    }
-  ]
+    const navagate = useNavigate()
+    const [current, setCurrent] = useState('mail')
+
+    // 菜单数据
+    const items = [
+        {
+            label: '客流分析',
+            key: '',
+            icon: <MailOutlined/>,
+        },
+        {
+            label: '主页',
+            key: 'test',
+            icon: <SettingOutlined/>,
+        },
+        {
+            label: '基础信息配置',
+            key: 'setting',
+            icon: <SettingOutlined/>,
+            children: [{
+                label: '用户管理',
+                key: 'user',
+                icon: <UserOutlined/>,
+            },{
+                label: '字典管理',
+                key: 'dict',
+                icon: <FileDoneOutlined />,
+            }]
+        }
+    ]
+    /**
+     * 电机左边弹框跳转页面
+     * @param e 电机的数据
+     */
+    const onClick = (e) => {
+        setCurrent(e.key);
+        navagate("/" + e.key)
+    };
+
   /**
   /**
-   * 电机左边弹框跳转页面
-   * @param e 电机的数据
+   * 退出登录
+   * @returns {Promise<void>}
    */
    */
-  const onClick = (e) => {
-    setCurrent(e.key);
-    navagate("/"+e.key)
-  };
-  return (
-    <div className="home">
-      <div className="menu">
+   async function logOut(){
+     let {code}= await  axios.post('/sys/logout')
+     if(code===200){
+       localStorage.removeItem('user')
+       navagate('/login')
+     }
+    }
+    return (
+        <div className="home">
+            <div className="head">
+                <h2>车站管理系统</h2>
+
+                <Popconfirm
+                    title="登出"
+                    description="是否登出此账号"
+                    onConfirm={logOut}
+                    okText="确认"
+                    cancelText="取消"
+                >
+                    <div className="ava">
+
+                        <Avatar size={30} icon={<UserOutlined/>}></Avatar>
+                        <p>{JSON.parse(localStorage.getItem('user')).name}</p>
+                    </div>
+                </Popconfirm>
+            </div>
+            <div className="body">
+                <div className="menu">
 
 
-      <Menu onClick={onClick} selectedKeys={[current]} mode="inline" items={items} />
-      </div>
-      <div className="contetn">
-        <Outlet></Outlet>
-      </div>
-    </div>
-  );
+                    <Menu onClick={onClick} selectedKeys={[current]} mode="inline" items={items}/>
+                </div>
+                <div className="contetn">
+                    <Outlet></Outlet>
+                </div>
+            </div>
+        </div>
+    );
 }
 }

+ 34 - 9
src/pages/home/home.scss

@@ -1,14 +1,39 @@
-.home{
+.home {
   width: 100vw;
   width: 100vw;
   height: 100vh;
   height: 100vh;
-  display: flex;
-  .menu{
-    width: 200px;
-    height: 100%;
+  .head{
+    text-align: center;
+    border-bottom: 1px solid #ccc;
+    line-height: 50px;
+    position: relative;
+    .ava{
+      position: absolute;
+      right: 2%;
+      top: 0px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      p{
+        font-size: 18px;
+        margin-left: 10px;
+      }
+
+    }
+
   }
   }
-  .contetn{
-    flex: 1;
-    overflow: hidden;
-    padding: 20px;
+  .body {
+    display: flex;
+    .menu {
+      width: 200px;
+      height: 100%;
+    }
+
+    .contetn {
+      flex: 1;
+      overflow: hidden;
+      padding: 20px;
+    }
   }
   }
+
 }
 }

+ 27 - 10
src/pages/user/components/modal.jsx

@@ -1,7 +1,8 @@
-import {Modal, Form, Input, InputNumber, Select, message} from 'antd';
+import {Modal, Form, Input, Select, message} from 'antd';
 import axios from '@/utils/axios.js'
 import axios from '@/utils/axios.js'
+import {useEffect} from 'react'
 
 
-export default function ModalHooks({isModalOpen, closeModal}) {
+export default function ModalHooks({isModalOpen, closeModal, row}) {
     const [messageApi, contextHolder] = message.useMessage();
     const [messageApi, contextHolder] = message.useMessage();
     // 表单
     // 表单
     const [form] = Form.useForm();
     const [form] = Form.useForm();
@@ -17,7 +18,12 @@ export default function ModalHooks({isModalOpen, closeModal}) {
     function handleOk() {
     function handleOk() {
         // 验证表单
         // 验证表单
         form.validateFields().then(async () => {
         form.validateFields().then(async () => {
-            let { code, message} = await axios.post('/sys/saveOrUpdate', form.getFieldsValue())
+            let newData = JSON.parse(JSON.stringify(form.getFieldsValue()))
+            if (row?.id) {
+                // 修改数据
+                newData.id = row.id
+            }
+            let {code, message} = await axios.post('/sys/saveOrUpdate', newData)
             if (code === 200) {
             if (code === 200) {
                 messageApi.success(message)
                 messageApi.success(message)
                 handleCancel()
                 handleCancel()
@@ -26,20 +32,29 @@ export default function ModalHooks({isModalOpen, closeModal}) {
             }
             }
         })
         })
     }
     }
+
     // 关闭页面
     // 关闭页面
     const handleCancel = () => {
     const handleCancel = () => {
         closeModal(false);
         closeModal(false);
         form.resetFields()
         form.resetFields()
     };
     };
     // 表单
     // 表单
+    useEffect(() => {
+        // console.log(row)
+        if (row.id) {
+            let formData = JSON.parse(JSON.stringify(row))
+
+            form.setFieldsValue(formData)
 
 
+        }
+    }, [row])
 
 
     return (
     return (
         <div className="form">
         <div className="form">
 
 
             {contextHolder}
             {contextHolder}
-            <Modal title="新增用户" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} width={900}>
-
+            <Modal title={row?.id?'修改用户':'新增用户'} open={isModalOpen} onOk={handleOk} onCancel={handleCancel} width={900}
+                   cancelText="取消" okText="确定">
                 <Form
                 <Form
                     name="basic"
                     name="basic"
                     form={form}
                     form={form}
@@ -76,11 +91,12 @@ export default function ModalHooks({isModalOpen, closeModal}) {
                         rules={[
                         rules={[
                             {
                             {
                                 required: true,
                                 required: true,
-                                message: '请输入密码',
+                                message: '请输入6位以上密码',
+                                min: 6
                             },
                             },
                         ]}
                         ]}
                     >
                     >
-                        <Input.Password/>
+                        <Input.Password disabled={row?.id}/>
                     </Form.Item>
                     </Form.Item>
 
 
                     <Form.Item
                     <Form.Item
@@ -102,12 +118,13 @@ export default function ModalHooks({isModalOpen, closeModal}) {
                         rules={[
                         rules={[
                             {
                             {
                                 required: true,
                                 required: true,
-                                message: '请输入手机号',
+                                message: '请输入11位手机号',
+                                len: 11
 
 
                             },
                             },
                         ]}
                         ]}
                     >
                     >
-                        <InputNumber style={{width: 183}}/>
+                        <Input style={{width: 183}}/>
                     </Form.Item>
                     </Form.Item>
 
 
 
 
@@ -138,7 +155,7 @@ export default function ModalHooks({isModalOpen, closeModal}) {
                             },
                             },
                         ]}
                         ]}
                     >
                     >
-                        <Input.TextArea style={{width:188}}/>
+                        <Input.TextArea style={{width: 188}}/>
                     </Form.Item>
                     </Form.Item>
 
 
                 </Form>
                 </Form>

+ 115 - 90
src/pages/user/user.jsx

@@ -1,101 +1,126 @@
-import { Table, Button, Input } from "antd";
-import { useState, useEffect } from "react";
+import {Table, Button, Input, Popconfirm} from "antd";
+import {useState, useEffect} from "react";
 import ModalHooks from "./components/modal.jsx";
 import ModalHooks from "./components/modal.jsx";
 import "./user.scss";
 import "./user.scss";
 import axios from "@/utils/axios.js";
 import axios from "@/utils/axios.js";
 
 
-const { Column } = Table;
+const {Column} = Table;
 
 
 export default function User() {
 export default function User() {
-  const [inputVal, setInputVal] = useState("");
-  // 页面数据
-  const [data, setData] = useState([]);
-  // 是否展示弹框
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [row, setRow] = useState({});
+    const [inputVal, setInputVal] = useState("");
+    // 页面数据
+    const [data, setData] = useState([]);
+    // 是否展示弹框
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [row, setRow] = useState({});
 
 
-  // 新增用户页面
-  function addUser() {
-    setRow([]);
-    setIsModalOpen(true);
-  }
+    // 新增用户页面
+    function addUser() {
+        setRow([]);
+        setIsModalOpen(true);
+    }
 
 
-  // 关闭页面
-  function closeModal() {
-    setIsModalOpen(false);
-  }
-  // 点击修改的回调
-  function modify(data) {
-    setRow(data);
-    setIsModalOpen(true);
-  }
-  // 获取数据
-  async function getData() {
-    let { data } = await axios.get("/sys/select");
-    setData(data);
-  }
+    // 关闭页面
+    function closeModal() {
+        setIsModalOpen(false);
+        getData()
+    }
 
 
-  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" width="200px" />
-        <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" />
-        <Column
-          title="操作"
-          width="170px"
-          dataIndex="id"
-          key="id"
-          render={(text, record) => (
-            <div className="btn">
-              <Button type="primary" onClick={() => modify(record)}>
-                修改
-              </Button>
-              <Button type="primary" danger>
-                删除
-              </Button>
+    // 点击修改的回调
+    function modify(data) {
+        setRow(data);
+        setIsModalOpen(true);
+
+    }
+
+    // 获取数据
+    async function getData() {
+        let {data} = await axios.get("/sys/select");
+        setData(data);
+    }
+
+    /**
+     * 删除页面
+     * @param data 删除每一条数据
+     * @returns {Promise<void>}
+     */
+    async function deleteRow(data) {
+        let {code} = await axios.get('/sys/delete', {params: {id: data.id}})
+        if (code === 200) {
+            await getData()
+        }
+    }
+
+    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>
             </div>
-          )}
-        />
-      </Table>
-      <ModalHooks
-        isModalOpen={isModalOpen}
-        closeModal={closeModal}
-        row={row}
-      ></ModalHooks>
-    </div>
-  );
+            <Table
+                dataSource={data}
+                pagination={{position: ["bottomRight"]}}
+                bordered={true}
+                rowKey="id"
+            >
+                <Column title="用户名" dataIndex="account" key="id" width="200px"/>
+                <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"/>
+                <Column
+                    title="操作"
+                    width="170px"
+                    dataIndex="id"
+                    key="id"
+                    render={(text, record) => (
+                        <div className="btn">
+                            <Button type="primary" onClick={() => modify(record)}>
+                                修改
+                            </Button>
+                            <Popconfirm
+                                title="删除数据"
+                                description="是否删除本条数据?"
+                                onConfirm={() => deleteRow(record)}
+                                okText="删除"
+                                cancelText="取消"
+                            >
+
+                                <Button type="primary" danger>
+                                    删除
+                                </Button>
+                            </Popconfirm>
+                        </div>
+                    )}
+                />
+            </Table>
+            <ModalHooks
+                isModalOpen={isModalOpen}
+                closeModal={closeModal}
+                row={row}
+            ></ModalHooks>
+        </div>
+    );
 }
 }

+ 23 - 12
src/utils/axios.js

@@ -1,36 +1,47 @@
 import axios from 'axios'
 import axios from 'axios'
+import {message} from 'antd';
+
 axios.interceptors.request.use(
 axios.interceptors.request.use(
     (config) => {
     (config) => {
         config.baseURL = import.meta.env.VITE_SERVER_URL
         config.baseURL = import.meta.env.VITE_SERVER_URL
         if (!config.url.includes('login')) {
         if (!config.url.includes('login')) {
             const user = localStorage.getItem('user')
             const user = localStorage.getItem('user')
             const headers = config.headers
             const headers = config.headers
-            let satoken=JSON.parse(user)?.satoken || ''
-            if(!satoken){
+            let satoken = JSON.parse(user)?.satoken || ''
+            // console.log(satoken)
+            if (!satoken) {
                 window.location.href = '/login'
                 window.location.href = '/login'
             }
             }
             headers.satoken = satoken
             headers.satoken = satoken
         }
         }
-        // const showLoading = config.showLoading || false
-        // if (showLoading) resetLoaing(true)
         return config
         return config
     },
     },
-    (err) => { throw err }
+    (err) => {
+        throw err
+    }
 )
 )
 
 
 // http response 拦截
 // http response 拦截
 axios.interceptors.response.use(
 axios.interceptors.response.use(
     (response) => {
     (response) => {
         const data = response.data
         const data = response.data
-        // if (data.code !== 200) {
-        //     if (data.code === 401) {
-        //
-        //         window.location.href = '/login.html'
-        //     }
-        // }
 
 
+        if (data.code !== 200) {
+            message.error(data.message)
+            if (data.code === 100) {
+                localStorage.removeItem('user')
+                window.location.href = '/login'
+            }
+        } else {
+
+            if (data.message) {
+                message.success(data.message)
+            }
+        }
         return data
         return data
     },
     },
-    (error) => { throw error }
+    (error) => {
+        throw error
+    }
 )
 )
 export default axios
 export default axios