考试系统：新增试卷、回收站这节我们实现新增试卷和回收站的功能。
先在 interfaces/index.tsx 加一下 add 接口：
export async function examAdd(values: ExamAdd) {
return await examServiceInstance.post('/exam/add', values);
}
1
2
3
2
3
然后写一下新增试卷的弹窗：
pages/ExamList/ExamAddModal.tsx
import { Button, Form, Input, Modal, message } from "antd";
import { useForm } from "antd/es/form/Form";
import TextArea from "antd/es/input/TextArea";
import { examAdd } from "../../interfaces";
interface ExamAddModalProps {
isOpen: boolean;
handleClose: Function
}
const layout = {
labelCol: { span: 6 },
wrapperCol: { span: 18 }
}
export interface ExamAdd {
name: string;
}
export function ExamAddModal(props: ExamAddModalProps) {
const [form] = useForm<ExamAdd>();
const handleOk = async function() {
await form.validateFields();
const values = form.getFieldsValue();
try{
const res = await examAdd(values);
if(res.status === 201 || res.status === 200) {
message.success('创建成功');
form.resetFields();
props.handleClose();
}
} catch(e: any){
message.error(e.response?.data?.message || '系统繁忙，请稍后再试');
}
}
return <Modal
title="新增试卷"
open={props.isOpen}
onOk={handleOk}
onCancel={() => props.handleClose()}
okText={'创建'}
cancelText={'取消'}
>
<Form
form={form}
colon={false}
{...layout}
>
<Form.Item
label="试卷名"
name="name"
rules={[
{ required: true, message: '请输入试卷名!' },
]}
>
<Input />
</Form.Item>
</Form>
</Modal>
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
Modal 内是一个表单，点击创建会调用 examAdd 接口。
在 ExamList/index.tsx 里调用下：
import { Button, message } from "antd";
import "./index.scss";
import { useEffect, useState } from "react";
import { examList } from "../../interfaces";
import { ExamAddModal } from "./ExamAddModal";
interface Exam {
id: number
name: string
isPublish: boolean
isDelete: boolean
content: string
}
export function ExamList() {
const [list, setList] = useState<Array<Exam>>();
const [isExamAddModalOpen, setIsExamAddModalOpen] = useState(false);
async function query() {
try {
const res = await examList();
if(res.status === 201 || res.status === 200) {
setList(res.data)
}
} catch(e: any){
message.error(e.response?.data?.message || '系统繁忙，请稍后再试');
}
}
useEffect(() => {
query()
}, []);
return <div id="ExamList-container">
<div className="header">
<h1>考试系统</h1>
</div>
<div className="body">
<div className="operate">
<Button type="primary" onClick={() => {
setIsExamAddModalOpen(true);
}}>新建试卷</Button>
</div>
<div className="list">
{
list?.map(item => {
return <div className="item">
<p>{item.name}</p>
<div className="btns">
<Button className="btn" type="primary" style={{background: 'darkblue'}}>{item.isPublish ? '停止' : '发布' }</Button>
<Button className="btn" type="primary" style={{background: 'green'}}>编辑</Button>
<Button className="btn" type="primary" style={{background: 'darkred'}}>删除</Button>
</div>
</div>
})
}
</div>
</div>
<ExamAddModal isOpen={isExamAddModalOpen} handleClose={() => {
setIsExamAddModalOpen(false);
query();
}}/>
</div>
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
测试下：
没啥问题。
然后实现发布状态的修改：
之前我们只实现了 publish 接口，没实现 unpublish 接口。
在后端代码加一下：
@Get('unpublish/:id')
@RequireLogin()
async unpublish(@UserInfo('userId') userId: number, @Param('id') id: string) {
return this.examService.unpublish(userId, +id);
}
1
2
3
4
5
2
3
4
5
async unpublish(userId: number, id: number) {
return this.prismaService.exam.update({
where: {
id,
createUserId: userId
},
data: {
isPublish: false
}
})
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
试下效果：
在前端代码的 interfaces/index.tsx 调用下：
export async function examPublish(id: number) {
return await examServiceInstance.get('/exam/publish/' + id );
}
export async function examUnpublish(id: number) {
return await examServiceInstance.get('/exam/unpublish/' + id );
}
1
2
3
4
5
6
7
2
3
4
5
6
7
然后在 ExamList/index.tsx 组件里用一下：
async function changePublishState(id: number, publish: boolean) {
try {
const res = publish ? await examUnpublish(id) : await examPublish(id);
if(res.status === 201 || res.status === 200) {
message.success(publish ? '已取消发布' : '已发布');
query();
}
} catch(e: any){
message.error(e.response?.data?.message || '系统繁忙，请稍后再试');
}
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
试一下：
没啥问题。
然后再来实现删除功能。
在 interfaces/index.tsx 增加删除接口：
export async function examDelete(id: number) {
return await examServiceInstance.delete('/exam/delete/' + id );
}
1
2
3
2
3
点击删除按钮的时候调用下：
async function deleteExam(id: number) {
try {
const res = await examDelete(id);
if(res.status === 201 || res.status === 200) {
message.success('已删除');
query();
}
} catch(e: any){
message.error(e.response?.data?.message || '系统繁忙，请稍后再试');
}
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
试一下：
这时候其实已经删除了，只不过我们用的逻辑删除。
在列表过滤下：
list?.filter(item => {
return !item.isDelete
})
1
2
3
2
3
然后支持下回收站的显示：
加一个状态表示是否在回收站，点击按钮切换状态。
显示的时候根据是否在回收站决定显示 isDelete 是 true 还是 false 的数据。
const [bin, setBin] = useState(false);
1
<Button onClick={() => {
setBin(bin => !bin)
}}>{bin ? '退出回收站' : '打开回收站'}</Button>
1
2
3
2
3
list?.filter(item => {
return bin ? item.isDelete === true : item.isDelete === false
})
1
2
3
2
3
这样，回收站功能就完成了。
我们再给删除加个二次确认弹窗：
<Popconfirm
title="试卷删除"
description="确认放入回收站吗？"
onConfirm={() => deleteExam(item.id)}
okText="Yes"
cancelText="No"
>
<Button className="btn" type="primary" style={{background: 'darkred'}}>删除</Button>
</Popconfirm>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
整体测试下：
创建两个考试：
删除其中一个，然后进回收站看一下：
再试下发布功能：
没啥问题。
这样，试卷的新增、删除、回收站就都完成了。
案例代码在小册仓库：
# 总结
这节我们实现了试卷新增、发布试卷、回收站功能。
新增试卷会弹窗展示表单，输入信息后调用接口并刷新列表。
删除、发布后也会刷新列表。
回收站就是根据 isDelete 来过滤列表里的数据。
下节我们来做试卷编辑的功能。