|
|
@@ -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 "./user.scss";
|
|
|
import axios from "@/utils/axios.js";
|
|
|
|
|
|
-const { Column } = Table;
|
|
|
+const {Column} = Table;
|
|
|
|
|
|
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>
|
|
|
- )}
|
|
|
- />
|
|
|
- </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>
|
|
|
+ );
|
|
|
}
|