Skip to content

feat:添加了审核界面 #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
fantasy123123 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat:添加了审核界面 #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 100 additions & 0 deletions src/routes/modules/ReportCheckDetailPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
// 具体举报审核，点击‘点击审核’按钮后进入的界面

import { Button, Descriptions } from '@arco-design/web-react';

const ReportCheckDetailPage = () => {
const data = [
{
label: '举报资源',
value: '资源',
},
{
label: '资源作者',
value: '作者',
},
{
label: '举报人',
value: '人',
},
{
label: '举报时间',
value: '时间',
},
{
label: '举报原因',
value: '原因',
},
{
label: '状态',
value: '未审核',
},
];
return (
<div
style={{
position: 'absolute',
left: '17%',
right: '0',
top: '18%',
bottom: '0',
display: 'table-cell',
verticalAlign: 'middle',
textAlign: 'center',
}}
>
<div style={{ fontSize: '25px', paddingTop: '20px' }}>举报信息详情</div>
<div
style={{
width: 900,
border: 'solid 1.5px #DCDCDC',
textAlign: 'center',
backgroundColor: 'white',
marginTop: 30,
display: 'inline-block',
}}
>
<Descriptions
column={1}
labelStyle={{ paddingRight: 46, textAlign: 'right' }}
size={'large'}
data={data}
style={{
marginLeft: 100,
marginBottom: 10,
marginTop: 30,
}}
/>
</div>
<div
style={{
display: 'flex',
marginTop: 40,
marginLeft: 250,
}}
>
<Button
type={'primary'}
status={'success'}
style={{ width: 120, height: 45, marginRight: 50, fontSize: 18 }}
>
通过审核
</Button>
<Button
type={'primary'}
status={'danger'}
style={{ width: 120, height: 45, marginRight: 50, fontSize: 18 }}
>
不通过审核
</Button>
<Button
type={'primary'}
style={{ width: 140, height: 45, fontSize: 18 }}
>
返回举报列表
</Button>
</div>
</div>
);
};

export default ReportCheckDetailPage;
256 changes: 256 additions & 0 deletions src/routes/modules/ReportCheckPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,256 @@
// 举报审核列表界面

import {
Button,
Radio,
Input,
Table,
TableColumnProps,
} from '@arco-design/web-react';

import { IconSearch } from '@arco-design/web-react/icon';
import { useRef, useState } from 'react';

const ReportCheckPage = () => {
const inputRef = useRef(null);

// 表格纵列相关数据
const columns: TableColumnProps[] = [
{
title: '举报资源',
dataIndex: 'report',
filterIcon: <IconSearch />,
filterDropdown: ({ filterKeys, setFilterKeys, confirm }) => {
return (
<div className="arco-table-custom-filter">
<Input.Search
ref={inputRef}
searchButton
placeholder=""
value={filterKeys[0] || ''}
onChange={value => {
setFilterKeys(value ? [value] : []);
}}
onSearch={() => {
confirm();
}}
/>
</div>
);
},
onFilter: (value, row) =>
value ? row.operation.indexOf(value) !== -1 : true,
onFilterDropdownVisibleChange: visible => {
if (visible) {
setTimeout(() => inputRef.current.focus(), 150);
}
},
},
{
title: '资源作者',
dataIndex: 'author',
},
{
title: '举报人',
dataIndex: 'person',
},
{
title: '举报时间',
dataIndex: 'time',
},
{
title: '举报原因',
dataIndex: 'reason',
},
{
title: '状态',
dataIndex: 'status',
},
{
title: '审核',
dataIndex: 'check',
},
];

// 初始数据
const initData = [
{
key: 1,
report: '举报记录',
reason: '举报原因',
status: '已审核',
author: '资源作者',
person: '举报人',
time: '2023年7月31日',
check: (
<Button type={'primary'} disabled>
点击审核
</Button>
),
},
{
key: 2,
report: '举报记录',
reason: '举报原因',
status: '未审核',
author: '资源作者',
person: '举报人',
time: '2023年7月31日',
check: <Button type={'primary'}>点击审核</Button>,
},
{
key: 3,
report: '举报记录',
reason: '举报原因',
status: '已审核',
author: '资源作者',
person: '举报人',
time: '2023年7月31日',
check: (
<Button type={'primary'} disabled>
点击审核
</Button>
),
},
{
key: 4,
report: '举报记录',
reason: '举报原因',
status: '已审核',
author: '资源作者',
person: '举报人',
time: '2023年7月31日',
check: (
<Button type={'primary'} disabled>
点击审核
</Button>
),
},
{
key: 5,
report: '举报记录',
reason: '举报原因',
status: '未审核',
author: '资源作者',
person: '举报人',
time: '2023年7月31日',
check: <Button type={'primary'}>点击审核</Button>,
},
{
key: 6,
report: '举报记录',
reason: '举报原因',
status: '已审核',
author: '资源作者',
person: '举报人',
time: '2023年7月31日',
check: (
<Button type={'primary'} disabled>
点击审核
</Button>
),
},
{
key: 7,
report: '举报记录',
reason: '举报原因',
status: '未审核',
author: '资源作者',
person: '举报人',
time: '2023年7月31日',
check: <Button type={'primary'}>点击审核</Button>,
},
];

// 用于渲染表格的数据
const [data, setData] = useState(initData);

// 筛选所有、已审核与未审核
function sortAll() {
setData(initData);
}

function sortChecked() {
setData(initData.filter(item => item.status === '已审核'));
}
function sortNotChecked() {
setData(initData.filter(item => item.status === '未审核'));
}

return (
<div
style={{
position: 'absolute',
left: '17%',
right: '0',
top: '18%',
bottom: '0',
}}
>
<div
style={{ fontSize: '25px', paddingTop: '15px', textAlign: 'center' }}
>
举报审核列表
</div>
<div
style={{
fontSize: '20px',
paddingLeft: '100px',
paddingTop: '15px',
}}
>
筛选
<Radio.Group
defaultValue={'所有'}
name="sort"
style={{ marginLeft: 15 }}
>
{['所有', '待审核', '已审核'].map(item => {
return (
<Radio key={item} value={item}>
{({ checked }) => {
return (
<Button
tabIndex={-1}
key={item}
type={checked ? 'primary' : 'outline'}
onClick={() => {
if (item === '所有') {
sortAll();
} else if (item === '待审核') {
sortNotChecked();
} else if (item === '已审核') {
sortChecked();
}
}}
>
{item}
</Button>
);
}}
</Radio>
);
})}
</Radio.Group>
</div>
<Table
borderCell={true}
stripe={true}
columns={columns}
data={data}
pagination={{
showTotal: true,
pageSize: 5,
}}
style={{
marginRight: '75px',
marginLeft: '75px',
marginTop: '20px',
marginBottom: '20px',
}}
/>
</div>
);
};

export default ReportCheckPage;
Loading