system-copyright-react/src/route/TrademarkMall/TrademarkMall.tsx
2025-06-18 21:03:36 +08:00

263 lines
6.7 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { useState, useEffect } from 'react'
import nothingImg from '../../static/appimgs/nothing.png'
import { useLocation, useNavigate } from 'react-router-dom';
import { trademarkList } from '../../request/api'
import { showImage } from '../../request/request'
import type { TableProps } from 'antd';
import {
message, Spin,
Pagination,
Table, Image
} from 'antd';
export default function TrademarkMall() {
const [messageApi, contextHolder] = message.useMessage();
const { state } = useLocation()
const nav = useNavigate();
const height = window.innerHeight - 180;
const columns: TableProps<any>['columns'] = [
{
title: '序号',
dataIndex: 'index',
key: 'index',
align: 'center',
fixed: 'left',
width: 90,
render: (_text, _record, index) => (page - 1) * 10 + index + 1, // 显示序号从1开始
},
{
title: '服务类型',
dataIndex: 'trademarkModeName',
fixed: 'left',
align: 'center',
key: 'trademarkModeName',
width: 150,
ellipsis: {
showTitle: true,
},
},
{
title: '类型/名称',
fixed: 'left',
dataIndex: 'trademarkName',
key: 'trademarkName',
align: 'center',
ellipsis: {
showTitle: true,
},
width: 200,
render: (_text, record) => (
<span>
{record.trademarkType == 'text' ? '文字' : record.trademarkType == 'image' ? '图形' : record.trademarkType == 'text-image' ? '图文' : '未知'} <span style={{
display: record.trademarkType == 'image' ? 'none' : 'unset',
}}>/{record.trademarkName}</span>
{/* {record} */}
</span>
)
},
{
title: '商标图样',
dataIndex: 'trademarkPhoto',
align: 'center',
key: 'trademarkPhoto',
width: 200,
render: (text) => (
<Image src={showImage(text, false)}
height={100}
style={{
maxWidth: 200,
}}
>
</Image>
)
},
{
title: '状态',
dataIndex: 'trademarkStatus',
align: 'center',
key: 'trademarkStatus',
width: 100,
render: (text) => (
<span>
{text == '-1' ?
<span ></span>
: text == '0' ?
<span
style={{
color: 'skyblue',
}}
></span>
: text == '1' ?
<span
style={{
color: 'green',
}}
></span>
:
<span style={{
color: 'rgb(122 126 130)',
}}></span>
}
</span>
)
},
{
title: '申请人',
dataIndex: 'leaderName',
align: 'center',
key: 'appOrderId',
width: 150,
render: (text) => (
<span>
{text ? text : '未完善'}
</span>
)
},
{
title: '申请人证件号',
dataIndex: 'leaderIdcard',
align: 'center',
key: 'appOrderId',
width: 150,
render: (text) => (
<span>
{text ? text : '未完善'}
</span>
)
},
{
title: '操作',
// dataIndex: 'contractManagementId',
align: 'center',
// key: 'appOrderId',
width: 150,
// bordeLeft: true,
fixed: 'right',
render: (record) => (
<div style={{
cursor: 'pointer',
color: '#007FFF',
}} onClick={() => {
nav(`/trademark-ai-edit/${record.trademarkId}`, {
// state: {
// trademarkMode: record.trademarkMode, //申请类型id
// trademarkModeName: record.trademarkModeName, //申请类型名称
// trademarkId: record.trademarkId, //商标id
// }
})
// console.log(record.checkStatus);
}}></div>
)
},
]
const [data, setData] = useState<any>([])
const [loading, setLoading] = useState(false)
const [page, setPage] = useState(1)
const [total, setTotal] = useState(0)
const getTrademarkList = async (page: any) => {
try {
setLoading(true)
const res: any = await trademarkList({
keywords: state && state.keywords ? state.keywords : '',
rows: 10,
page: page
})
console.log('结果', res);
setData(res.rows)
setTotal(res.total)
setLoading(false)
} catch (error: any) {
setLoading(false)
if (error.response) {
const data = error.response.data;
messageApi.open({
type: 'error',
content: data.msg ? data.msg : `${data.path}(${data.status})`,
});
} else {
console.error(error)
}
} finally {
setLoading(false)
}
}
// useEffect(() => {
// // console.log(state.keywords);
// getTrademarkList(1)
// // console.log(1);
// }, [])
useEffect(() => {
// console.log(state.keywords);
getTrademarkList(1)
}, [state])
return (
<Spin tip="正在处理,请稍后..." size="small" spinning={loading}>
<div className='appElectionBox' style={{ height: `${height}px`, overflow: 'auto' }}>
{contextHolder}
{data.length <= 0 ? (<div style={{ height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>
<img src={nothingImg} alt="" width={368} height={355} />
<div style={{
marginTop: 50,
fontSize: 16,
color: '#D0D0D0'
}}></div>
</div>) : (
<div className='' >
<div style={{
height: `${height - 80}px`,
// background: "pink" ,
paddingTop: 20
}}>
<Table
scroll={{ y: `${height - 150}px` }}
dataSource={data}
columns={columns}
bordered
// pagination={{
// defaultPageSize: 10, // 设置默认一页显示 5 条数据
// }}
pagination={false} // 不显示分页
style={{ textAlign: 'center' }} // 设置表格内容居中显示
rowKey="trademarkId" // 指定数据项的唯一标识符
locale={{ emptyText: '暂无数据' }}
></Table>
</div>
<div className='product-release-pagination'>
<Pagination
showSizeChanger={false}
current={page} total={total} defaultPageSize={10} onChange={(page) => {
setPage(page)
getTrademarkList(page)
}} />
</div>
</div>
)}
</div>
</Spin>
)
}