删除
import { Button, Popconfirm, message } from "antd";
import axios from "axios";
import R from "../model/R";
export default function A6Delete({
id,
onSuccess,
}: {
id: number;
onSuccess?: () => void;
}) {
async function onConfirm() {
const resp = await axios.delete<R<string>>(
`http://localhost:8080/api/students/${id}`
);
message.success(resp.data.data);
onSuccess && onSuccess();
}
return (
<Popconfirm title="确定删除学生吗" onConfirm={onConfirm}>
<Button danger size="small">
删除
</Button>
</Popconfirm>
);
}
使用删除组件
import { Button, Input, Select, Space, Table } from "antd";
import { PageResp, Student, StudentQueryForm } from "../model/Student";
import { ColumnsType, TablePaginationConfig } from "antd/es/table";
import { ChangeEvent, useEffect, useState } from "react";
import axios from "axios";
import R from "../model/R";
import A6Delete from "./A6Delete";
import A6Update from "./A6Update";
import A6Insert from "./A6Insert";
import A6DeleteSelected from "./A6DeleteSelected";
// 服务端分页
const { Option } = Select;
export default function A6() {
const [students, setStudents] = useState<Student[]>([]);
const [loading, setLoading] = useState(true);
const [form, setForm] = useState<StudentQueryForm>({});
const options = [
{ label: "男", value: "男" },
{ label: "女", value: "女" },
];
const [pagination, setPagination] = useState<TablePaginationConfig>({
current: 1,
pageSize: 5,
showSizeChanger: true,
pageSizeOptions: [1, 3, 5, 7],
});
useEffect(() => {
async function getStudents() {
const resp = await axios.get<R<PageResp<Student>>>(
"http://localhost:8080/api/students/q",
{
params: {
page: pagination.current,
size: pagination.pageSize,
...form,
},
}
);
setStudents(resp.data.data.list);
setPagination((old) => {
const newPagination = { ...old, total: resp.data.data.total };
console.log(newPagination);
// 服务端分页需要total属性
return newPagination;
});
}
setLoading(false);
getStudents();
// 当页号和每页记录数改变了重新查询
}, [pagination.current, pagination.pageSize, form]);
function onTableChange(newPagination: TablePaginationConfig) {
setPagination(newPagination);
}
function onNameChang(e: ChangeEvent<HTMLInputElement>) {
setForm((old) => {
return { ...old, name: e.target.value };
});
}
function onSexChange(value: string) {
setForm((old) => {
return { ...old, sex: value };
});
}
function onAgeChange(value: string) {
setForm((old) => {
return { ...old, age: value };
});
}
function onDeleteSuccess() {
//当点击删除按钮删除成功之后,返回一个新的form对象,触发useEffect函数,重新查询数据更新页面
setForm((old) => {
return { ...old };
});
}
//修改功能开始
function onUpdateSuccess() {
setUpdateOpen(false);
setForm((old) => {
return { ...old };
});
}
function onUpdateClick(student: Student) {
setUpdateOpen(true);
setUpdateForm(student);
}
function onUpdateCancel() {
setUpdateOpen(false);
}
const [updateForm, setUpdateForm] = useState<Student>({
id: 3,
name: "",
sex: "女",
age: 33,
});
const [updateOpen, setUpdateOpen] = useState(false);
//修改功能结束
//新增功能开始
function onInsertSuccess() {
setInsertOpen(false);
setForm((old) => {
return { ...old };
});
}
function onInsertClick() {
setInsertOpen(true);
}
function onInsertCancel() {
setInsertOpen(false);
}
const [InsertForm, setInsertForm] = useState<Student>({
id: 3,
name: "拉拉",
sex: "女",
age: 33,
});
const [InsertOpen, setInsertOpen] = useState(false);
//新增功能结束
//删除选中功能开始
const [ids, setIds] = useState<React.Key[]>([]);
function onIdsChange(ids: React.Key[]) {
setIds(ids);
}
function onDeleteSelectedSuccess() {
setForm((old) => {
return { ...old };
});
setIds([]);
}
//删除选中功能结束
const columns: ColumnsType<Student> = [
{ title: "编号", dataIndex: "id" },
{ title: "姓名", dataIndex: "name" },
{ title: "性别", dataIndex: "sex" },
{ title: "年龄", dataIndex: "age" },
{
title: "操作",
dataIndex: "operation",
render: (_, student) => {
return (
<Space>
{/* 使用删除组件 */}
<A6Delete id={student.id} onSuccess={onDeleteSuccess}></A6Delete>
<Button
type="primary"
size="small"
// 如果事件函数需要传入参数,这个函数应该放在箭头函数里面
onClick={() => {
onUpdateClick(student);
}}
>
修改
</Button>
</Space>
);
},
},
];
return (
<div>
{/* 使用新增组件 */}
<A6Insert
open={InsertOpen}
onSuccess={onInsertSuccess}
onCancel={onInsertCancel}
student={InsertForm}
></A6Insert>
{/* 使用修改组件 每行都同用一个修改组件*/}
<A6Update
open={updateOpen}
student={updateForm}
onSuccess={onUpdateSuccess}
onCancel={onUpdateCancel}
></A6Update>
<div>
<Input
style={{ width: 120 }}
placeholder="请输入姓名"
onChange={onNameChang}
value={form.name}
></Input>
<Select
style={{ width: 120 }}
placeholder="请选择性别"
options={options}
allowClear={true}
value={form.sex}
onChange={onSexChange}
></Select>
<Select
style={{ width: 120 }}
placeholder="请选择年龄"
allowClear={true}
value={form.age}
onChange={onAgeChange}
>
<Option value="1,19">20以下</Option>
<Option value="20,29">20左右</Option>
<Option value="30,39">30左右</Option>
<Option value="40,120">40以上</Option>
</Select>
<Space>
<Button type="primary" size="small" onClick={onInsertClick}>
新增
</Button>
{/* 使用删除选中组件 */}
<A6DeleteSelected
ids={ids}
onSuccess={onDeleteSelectedSuccess}
></A6DeleteSelected>
</Space>
</div>
<Table
columns={columns}
dataSource={students}
rowKey="id"
loading={loading}
pagination={pagination}
onChange={onTableChange}
rowSelection={{ selectedRowKeys: ids, onChange: onIdsChange }}
></Table>
</div>
);
}