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