263 lines
6.7 KiB
TypeScript
263 lines
6.7 KiB
TypeScript
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>
|
||
)
|
||
}
|