152 lines
3.8 KiB
TypeScript
152 lines
3.8 KiB
TypeScript
import { useEffect, useState } from 'react'
|
||
import { // Table,
|
||
Pagination,
|
||
Table,
|
||
// message, Spin,
|
||
Empty,
|
||
} from 'antd';
|
||
import { get, Axios } from "../../util/AjaxUtils.ts";
|
||
import type { TableProps } from 'antd';
|
||
import useMessage from "antd/es/message/useMessage";
|
||
interface DataType {
|
||
contractManagementId: string;
|
||
firstPartyName: string;
|
||
firstPartyPhone: string;
|
||
firstPartyAddress: string;
|
||
gmtCreate: string;
|
||
}
|
||
import { useSelector, useDispatch } from 'react-redux'
|
||
export default function CONTRACT() {
|
||
const dispath = useDispatch()
|
||
const redxuState: any = useSelector(state => state)
|
||
const contractArray = redxuState.contractArray
|
||
const total = redxuState.contractTotal
|
||
const [messageApi, messageApiHolder] = useMessage();
|
||
const height = window.innerHeight - 180;
|
||
// const [contractArray, setContractArray] = useState<any[]>([])
|
||
// 分页
|
||
const [page, setPage] = useState(1)
|
||
const getContractArray = (page: any) => {
|
||
get({
|
||
messageApi,
|
||
url: `/api/contract/management/listpage/self`,
|
||
config: {
|
||
params: {
|
||
page: page,
|
||
rows: 10
|
||
}
|
||
},
|
||
onSuccess(data: any) {
|
||
// console.log(data);
|
||
dispath({
|
||
type: 'upContractArray',
|
||
val: data.data.rows
|
||
})
|
||
dispath({
|
||
type: 'upContractTotal',
|
||
val: data.data.total
|
||
})
|
||
// setContractArray(data.data.rows)
|
||
|
||
}
|
||
})
|
||
}
|
||
|
||
// 表格
|
||
const columns: TableProps<DataType>['columns'] = [
|
||
{
|
||
title: '序号',
|
||
dataIndex: 'index',
|
||
key: 'index',
|
||
align: 'center',
|
||
width: 100,
|
||
render: (_text, _record, index) => (page - 1) * 10 + index + 1, // 显示序号，从1开始
|
||
|
||
},
|
||
{
|
||
title: '甲方姓名',
|
||
dataIndex: 'firstPartyName',
|
||
key: 'firstPartyName',
|
||
align: 'center',
|
||
ellipsis: {
|
||
showTitle: true,
|
||
},
|
||
|
||
},
|
||
{
|
||
title: '联系电话',
|
||
dataIndex: 'firstPartyPhone',
|
||
key: 'firstPartyPhone',
|
||
align: 'center',
|
||
width: 320
|
||
},
|
||
{
|
||
title: '联系地址',
|
||
dataIndex: 'firstPartyAddress',
|
||
align: 'center',
|
||
key: 'firstPartyAddress',
|
||
ellipsis: {
|
||
showTitle: true,
|
||
},
|
||
},
|
||
{
|
||
title: '创建日期',
|
||
dataIndex: 'gmtCreate',
|
||
align: 'center',
|
||
key: 'gmtCreate',
|
||
width: 320
|
||
},
|
||
{
|
||
title: '操作',
|
||
dataIndex: 'contractManagementId',
|
||
align: 'center',
|
||
key: 'contractManagementId',
|
||
width: 200,
|
||
render: (text) => (
|
||
<div style={{
|
||
cursor: 'pointer',
|
||
color: '#007FFF',
|
||
}} onClick={() => {
|
||
|
||
window.open(`${Axios.defaults?.baseURL}/api/contract/management/download/${text}`)
|
||
|
||
}}>下载</div>
|
||
)
|
||
|
||
},
|
||
]
|
||
|
||
useEffect(() => {
|
||
getContractArray(page)
|
||
}, [])
|
||
return (
|
||
<div>
|
||
{messageApiHolder}
|
||
<div style={{
|
||
height: height - 60,
|
||
background: 'white',
|
||
overflow: 'auto', marginTop: 18, marginBottom: -10
|
||
}}>
|
||
{/* 表格 */}
|
||
<div style={{ display: contractArray.length > 0 ? 'block' : 'none', padding: 10 }}>
|
||
<Table<DataType> columns={columns}
|
||
dataSource={contractArray}
|
||
scroll={{ y: height - 160 }}
|
||
pagination={false} rowKey="contractManagementId" />
|
||
</div>
|
||
<div style={{ display: contractArray.length <= 0 ? 'block' : 'none' }}>
|
||
<div style={{ height: height - 60, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||
<Empty description="暂无数据" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className='pagination' >
|
||
<Pagination defaultCurrent={page} total={total} pageSize={10} showSizeChanger={false} onChange={(page) => {
|
||
setPage(page)
|
||
getContractArray(page)
|
||
}} />
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|