feat(component): 实现组件审核功能并优化项目标识验证
parent
42021a122d
commit
fd9da62ad8
@ -0,0 +1,262 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Pagination, Table, Tag, Button, Space, Message, Rate } from '@arco-design/web-react';
|
||||
import styles from '@/pages/componentDevelopment/componentList/style/index.module.less';
|
||||
import { getReviewGroupByNew } from '@/api/componentMarket';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
// 审核记录接口定义
|
||||
interface ReviewRecord {
|
||||
id: string;
|
||||
identifier: string;
|
||||
componentBaseId: string;
|
||||
componentClassify: string;
|
||||
name: string;
|
||||
reviewOpinion: string;
|
||||
componentVersion: number;
|
||||
recommend: string;
|
||||
attachmentAddress: string;
|
||||
publicStatus: number;
|
||||
stars: number;
|
||||
reviewUserName: string;
|
||||
filesName: string;
|
||||
createTime: string;
|
||||
updateTime: string;
|
||||
}
|
||||
|
||||
// 发布状态映射
|
||||
const PUBLIC_STATUS_MAP = {
|
||||
0: { text: '待审核', color: 'orange' },
|
||||
1: { text: '审核通过', color: 'green' },
|
||||
2: { text: '审核拒绝', color: 'red' },
|
||||
3: { text: '已发布', color: 'arcoblue' }
|
||||
};
|
||||
|
||||
const CompAudit = () => {
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [data, setData] = useState<ReviewRecord[]>([]);
|
||||
const [pagination, setPagination] = useState({
|
||||
totalCount: 0,
|
||||
pageSize: 10,
|
||||
totalPage: 0,
|
||||
currPage: 1
|
||||
});
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '组件名称',
|
||||
dataIndex: 'name',
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
title: '分类',
|
||||
dataIndex: 'componentClassify',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '组件标识',
|
||||
dataIndex: 'identifier',
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: '组件版本',
|
||||
dataIndex: 'componentVersion',
|
||||
width: 100,
|
||||
render: (version: number) => `v${version}`
|
||||
},
|
||||
{
|
||||
title: '发布状态',
|
||||
dataIndex: 'publicStatus',
|
||||
width: 120,
|
||||
render: (status: number) => {
|
||||
const statusInfo = PUBLIC_STATUS_MAP[status] || { text: '未知', color: 'gray' };
|
||||
return <Tag color={statusInfo.color}>{statusInfo.text}</Tag>;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '组件评分',
|
||||
dataIndex: 'stars',
|
||||
width: 150,
|
||||
render: (stars: number) => {
|
||||
if (stars < 0) return <span style={{ color: '#999' }}>暂无评分</span>;
|
||||
return <Rate disabled value={stars} />;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '推荐度',
|
||||
dataIndex: 'recommend',
|
||||
width: 100,
|
||||
render: (recommend: string) => {
|
||||
const level = parseInt(recommend);
|
||||
const colors = ['red', 'orange', 'blue', 'green', 'arcoblue'];
|
||||
return <Tag color={colors[level - 1] || 'gray'}>等级 {recommend}</Tag>;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '审核人',
|
||||
dataIndex: 'reviewUserName',
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: '审核意见',
|
||||
dataIndex: 'reviewOpinion',
|
||||
width: 200,
|
||||
render: (opinion: string) => opinion || '-'
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
width: 180,
|
||||
render: (time: string) => dayjs(time).format('YYYY-MM-DD HH:mm:ss')
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'operations',
|
||||
width: 200,
|
||||
fixed: 'right' as const,
|
||||
render: (_, record: ReviewRecord) => (
|
||||
<Space>
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
onClick={() => handleViewDetail(record)}
|
||||
>
|
||||
查看详情
|
||||
</Button>
|
||||
{record.publicStatus === 0 && (
|
||||
<>
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
status="success"
|
||||
onClick={() => handleApprove(record)}
|
||||
>
|
||||
通过
|
||||
</Button>
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
status="danger"
|
||||
onClick={() => handleReject(record)}
|
||||
>
|
||||
拒绝
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
{record.attachmentAddress && (
|
||||
<Button
|
||||
type="text"
|
||||
size="small"
|
||||
onClick={() => handleDownloadAttachment(record)}
|
||||
>
|
||||
下载附件
|
||||
</Button>
|
||||
)}
|
||||
</Space>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
// 获取组件审核列表数据
|
||||
const fetchComponentReview = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res: any = await getReviewGroupByNew({
|
||||
queryType: 'create',
|
||||
current: pagination.currPage,
|
||||
size: pagination.pageSize
|
||||
});
|
||||
|
||||
console.log('组件审核列表:', res);
|
||||
|
||||
if (res.code === 200 && res.data) {
|
||||
setData(res.data.records || []);
|
||||
setPagination({
|
||||
totalCount: res.data.total || 0,
|
||||
pageSize: res.data.size || 10,
|
||||
totalPage: res.data.pages || 0,
|
||||
currPage: res.data.current || 1
|
||||
});
|
||||
}
|
||||
else {
|
||||
Message.error(res.msg || '获取审核列表失败');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取审核列表失败:', error);
|
||||
Message.error('获取审核列表失败');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 查看详情
|
||||
const handleViewDetail = (record: ReviewRecord) => {
|
||||
// TODO: 实现查看详情逻辑
|
||||
console.log('查看详情:', record);
|
||||
Message.info('查看详情功能待实现');
|
||||
};
|
||||
|
||||
// 审核通过
|
||||
const handleApprove = (record: ReviewRecord) => {
|
||||
// TODO: 实现审核通过逻辑
|
||||
console.log('审核通过:', record);
|
||||
Message.success('审核通过操作待实现');
|
||||
};
|
||||
|
||||
// 审核拒绝
|
||||
const handleReject = (record: ReviewRecord) => {
|
||||
// TODO: 实现审核拒绝逻辑
|
||||
console.log('审核拒绝:', record);
|
||||
Message.warning('审核拒绝操作待实现');
|
||||
};
|
||||
|
||||
// 下载附件
|
||||
const handleDownloadAttachment = (record: ReviewRecord) => {
|
||||
if (record.attachmentAddress) {
|
||||
window.open(record.attachmentAddress, '_blank');
|
||||
}
|
||||
};
|
||||
|
||||
// 分页变化处理
|
||||
const handlePageChange = (page: number, pageSize?: number) => {
|
||||
setPagination({
|
||||
...pagination,
|
||||
currPage: page,
|
||||
pageSize: pageSize || pagination.pageSize
|
||||
});
|
||||
};
|
||||
|
||||
// 监听分页变化
|
||||
useEffect(() => {
|
||||
fetchComponentReview();
|
||||
}, [pagination.currPage, pagination.pageSize]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
loading={loading}
|
||||
pagination={false}
|
||||
scroll={{ x: 1800, y: 'calc(100vh - 280px)' }}
|
||||
border={{
|
||||
wrapper: true,
|
||||
cell: true
|
||||
}}
|
||||
rowKey="id"
|
||||
/>
|
||||
<div className={styles['pagination-container']}>
|
||||
<Pagination
|
||||
current={pagination.currPage}
|
||||
pageSize={pagination.pageSize}
|
||||
total={pagination.totalCount}
|
||||
onChange={handlePageChange}
|
||||
showTotal
|
||||
showJumper
|
||||
sizeCanChange
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CompAudit;
|
||||
Loading…
Reference in New Issue