|
|
@@ -8,6 +8,7 @@ const {Column} = Table;
|
|
|
|
|
|
export default function User() {
|
|
|
const [inputVal, setInputVal] = useState("");
|
|
|
+ const [phone, setPhone] = useState("");
|
|
|
// 页面数据
|
|
|
const [data, setData] = useState([]);
|
|
|
// 是否展示弹框
|
|
|
@@ -31,7 +32,14 @@ export default function User() {
|
|
|
setIsModalOpen(false);
|
|
|
getData()
|
|
|
}
|
|
|
-
|
|
|
+ /**
|
|
|
+ * @description: 获取数据
|
|
|
+ * @return {*}
|
|
|
+ */
|
|
|
+ function serchData() {
|
|
|
+ setCurrent(1)
|
|
|
+ getData()
|
|
|
+ }
|
|
|
// 点击修改的回调
|
|
|
function modify(data) {
|
|
|
setRow(data);
|
|
|
@@ -44,6 +52,8 @@ export default function User() {
|
|
|
params: {
|
|
|
pageSize,
|
|
|
pageNum: current,
|
|
|
+ name: inputVal,
|
|
|
+ phone
|
|
|
|
|
|
}
|
|
|
});
|
|
|
@@ -74,77 +84,84 @@ export default function User() {
|
|
|
getData();
|
|
|
}, [current]);
|
|
|
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={{
|
|
|
- total: total, // 数据的总数
|
|
|
- current: current, // 当前页数
|
|
|
- pageSize: pageSize, // 每页显示的数量
|
|
|
- onChange: changeSize
|
|
|
- }}
|
|
|
- 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 className="user">
|
|
|
+ <div className="top">
|
|
|
+ <div className="input">
|
|
|
+ <p>姓名:</p>
|
|
|
+ <Input
|
|
|
+ value={inputVal}
|
|
|
+ onChange={(e) => setInputVal(e.target.value)}
|
|
|
+ style={{ width: "200px" }}
|
|
|
+ />
|
|
|
+ <p>手机号:</p>{" "}
|
|
|
+ <Input
|
|
|
+ value={phone}
|
|
|
+ onChange={(e) => setPhone(e.target.value)}
|
|
|
+ style={{ width: "200px" }}
|
|
|
+ />
|
|
|
+ <Button type="primary" onClick={()=> serchData()}>搜索</Button>
|
|
|
+ </div>
|
|
|
+ <div className="button">
|
|
|
+ <Button type="primary" onClick={addUser}>
|
|
|
+ 添加用户
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <Table
|
|
|
+ dataSource={data}
|
|
|
+ pagination={{
|
|
|
+ total: total, // 数据的总数
|
|
|
+ current: current, // 当前页数
|
|
|
+ pageSize: pageSize, // 每页显示的数量
|
|
|
+ onChange: changeSize,
|
|
|
+ }}
|
|
|
+ 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>
|
|
|
);
|
|
|
}
|