401 lines
12 KiB
TypeScript
401 lines
12 KiB
TypeScript
|
import './refun.css';
|
|||
|
|
import { useState,useEffect } from 'react';
|
|||
|
|
import { Table,
|
|||
|
|
// Pagination,
|
|||
|
|
Modal, Tag, message } from 'antd';
|
|||
|
|
import { get } from '../../util/AjaxUtils'
|
|||
|
|
import type { TableProps } from 'antd';
|
|||
|
|
interface DataType {
|
|||
|
|
title: string;
|
|||
|
|
price: string;
|
|||
|
|
reason: string;
|
|||
|
|
time: string;
|
|||
|
|
img: string;
|
|||
|
|
id: string;
|
|||
|
|
examineTime: string;
|
|||
|
|
examineStatus: string;
|
|||
|
|
examineText: string;
|
|||
|
|
}
|
|||
|
|
import revokeImg from '../../static/revoke.png'
|
|||
|
|
import { useLocation } from 'react-router-dom'
|
|||
|
|
export default function Refun() {
|
|||
|
|
const height = window.innerHeight - 180;
|
|||
|
|
const [messageApi, contextHolder] = message.useMessage();
|
|||
|
|
const [page, setPage] = useState(1) // 分页
|
|||
|
|
const [total, setTotal] = useState(50) // 数据总数
|
|||
|
|
const [revokeModal, setRevokeModal] = useState(false) //撤销弹窗
|
|||
|
|
const { state } = useLocation()
|
|||
|
|
// {state.type}
|
|||
|
|
const columns: TableProps<DataType>['columns'] = state.type == 'CANCELED' ? [
|
|||
|
|
{
|
|||
|
|
title: '序号',
|
|||
|
|
dataIndex: 'index',
|
|||
|
|
align: 'center',
|
|||
|
|
width: 80,
|
|||
|
|
render: (_text, _record, index) => (page - 1) * 10 + index + 1, // 显示序号，从1开始
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '系统名称',
|
|||
|
|
dataIndex: 'title',
|
|||
|
|
align: 'center',
|
|||
|
|
key: 'title',
|
|||
|
|
render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '金额',
|
|||
|
|
dataIndex: 'price',
|
|||
|
|
key: 'price',
|
|||
|
|
align: 'center',
|
|||
|
|
width: 150,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '退款原因',
|
|||
|
|
dataIndex: 'reason',
|
|||
|
|
key: 'reason',
|
|||
|
|
align: 'center',
|
|||
|
|
render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '申请退款时间',
|
|||
|
|
dataIndex: 'time',
|
|||
|
|
key: 'time',
|
|||
|
|
align: 'center',
|
|||
|
|
width: 150,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '审核时间',
|
|||
|
|
dataIndex: 'examineTime',
|
|||
|
|
key: 'examineTime',
|
|||
|
|
align: 'center',
|
|||
|
|
width: 150,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '审核状态',
|
|||
|
|
dataIndex: 'examineStatus',
|
|||
|
|
key: 'examineStatus',
|
|||
|
|
align: 'center',
|
|||
|
|
width: 100,
|
|||
|
|
render: (text) => <Tag
|
|||
|
|
color={text == "PASS" ? '#87d068' : text == "NOPASS" ? '#f50' : text == "WAIT" ? '#2db7f5' : ''}
|
|||
|
|
>{text == "PASS" ? '通过' : text == "NOPASS" ? '未通过' : text == "WAIT" ? '待审核' : '未知'}</Tag>,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '审核意见',
|
|||
|
|
dataIndex: 'examineText',
|
|||
|
|
key: 'examineText',
|
|||
|
|
align: 'center',
|
|||
|
|
// width: 150,
|
|||
|
|
render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '退款凭证',
|
|||
|
|
dataIndex: 'img',
|
|||
|
|
key: 'img',
|
|||
|
|
width: 100,
|
|||
|
|
align: 'center',
|
|||
|
|
render: (_, record) => (
|
|||
|
|
// {record.name}
|
|||
|
|
<div className='refunBtn' onClick={() => {
|
|||
|
|
console.log(record.img);
|
|||
|
|
}}> 预览</div>
|
|||
|
|
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
] : [
|
|||
|
|
{
|
|||
|
|
title: '序号',
|
|||
|
|
dataIndex: 'index',
|
|||
|
|
align: 'center',
|
|||
|
|
width: 80,
|
|||
|
|
render: (_text, _record, index) => (page - 1) * 10 + index + 1, // 显示序号，从1开始
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '系统名称',
|
|||
|
|
dataIndex: 'title',
|
|||
|
|
align: 'center',
|
|||
|
|
key: 'title',
|
|||
|
|
render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '金额',
|
|||
|
|
dataIndex: 'price',
|
|||
|
|
key: 'price',
|
|||
|
|
align: 'center',
|
|||
|
|
width: 150,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '退款原因',
|
|||
|
|
dataIndex: 'reason',
|
|||
|
|
key: 'reason',
|
|||
|
|
align: 'center',
|
|||
|
|
render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '申请退款时间',
|
|||
|
|
dataIndex: 'time',
|
|||
|
|
key: 'time',
|
|||
|
|
align: 'center',
|
|||
|
|
width: 150,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '审核时间',
|
|||
|
|
dataIndex: 'examineTime',
|
|||
|
|
key: 'examineTime',
|
|||
|
|
align: 'center',
|
|||
|
|
width: 150,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '审核状态',
|
|||
|
|
dataIndex: 'examineStatus',
|
|||
|
|
key: 'examineStatus',
|
|||
|
|
align: 'center',
|
|||
|
|
width: 100,
|
|||
|
|
render: (text) => <Tag
|
|||
|
|
color={text == "PASS" ? '#87d068' : text == "NOPASS" ? '#f50' : text == "WAIT" ? '#2db7f5' : ''}
|
|||
|
|
>{text == "PASS" ? '通过' : text == "NOPASS" ? '未通过' : text == "WAIT" ? '待审核' : '未知'}</Tag>,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '审核意见',
|
|||
|
|
dataIndex: 'examineText',
|
|||
|
|
key: 'examineText',
|
|||
|
|
align: 'center',
|
|||
|
|
// width: 150,
|
|||
|
|
render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '退款凭证',
|
|||
|
|
dataIndex: 'img',
|
|||
|
|
key: 'img',
|
|||
|
|
width: 100,
|
|||
|
|
align: 'center',
|
|||
|
|
render: (_, record) => (
|
|||
|
|
// {record.name}
|
|||
|
|
<div className='refunBtn' onClick={() => {
|
|||
|
|
console.log(record.img);
|
|||
|
|
}}> 预览</div>
|
|||
|
|
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '操作',
|
|||
|
|
align: 'center',
|
|||
|
|
width: 100,
|
|||
|
|
render: (_, record) => (
|
|||
|
|
// {record.name}
|
|||
|
|
<div className='refunBtn' onClick={() => {
|
|||
|
|
console.log(record.id);
|
|||
|
|
setRevokeModal(true)
|
|||
|
|
}}> 撤销</div>
|
|||
|
|
|
|||
|
|
),
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
const getData = (page:number) => {
|
|||
|
|
get({
|
|||
|
|
messageApi,
|
|||
|
|
url: `/api/proj/refund/apply/listpage`,
|
|||
|
|
// url: `/api/proj/refund/apply/listpage?applyStatus=${state.type}`,
|
|||
|
|
config: {
|
|||
|
|
params: {
|
|||
|
|
page: page,
|
|||
|
|
rows: 10,
|
|||
|
|
applyStatus:state.type
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onSuccess({data}) {
|
|||
|
|
console.log(data);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
// useEffect(()=>{
|
|||
|
|
// getData(page)
|
|||
|
|
// },[])
|
|||
|
|
useEffect(()=>{
|
|||
|
|
// getData(1)
|
|||
|
|
setPage(1)
|
|||
|
|
getData(1)
|
|||
|
|
},[state.type])
|
|||
|
|
const data: DataType[] = [
|
|||
|
|
{
|
|||
|
|
title: 'xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统xxx系统',
|
|||
|
|
price: '100',
|
|||
|
|
reason: '没钱',
|
|||
|
|
img: 'xxxx-xxx.img',
|
|||
|
|
time: '2024-8-20 13:10',
|
|||
|
|
id: '1',
|
|||
|
|
examineTime: '2024-8-20 12:00',
|
|||
|
|
examineStatus: 'PASS',
|
|||
|
|
examineText: '额呵呵呵',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: 'xxx系统',
|
|||
|
|
price: '100',
|
|||
|
|
reason: '没钱',
|
|||
|
|
img: 'xxxx-xxx.img',
|
|||
|
|
time: '2024-8-20 13:10',
|
|||
|
|
id: '2',
|
|||
|
|
examineTime: '2024-8-20 12:00',
|
|||
|
|
examineStatus: 'NOPASS',
|
|||
|
|
examineText: '额呵呵呵',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: 'xxx系统',
|
|||
|
|
price: '100',
|
|||
|
|
reason: '没钱',
|
|||
|
|
img: 'xxxx-xxx.img',
|
|||
|
|
time: '2024-8-20 13:10',
|
|||
|
|
id: '3',
|
|||
|
|
examineTime: '2024-8-20 12:00',
|
|||
|
|
examineStatus: 'WAIT',
|
|||
|
|
examineText: '额呵呵呵',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: 'xxx系统',
|
|||
|
|
price: '100',
|
|||
|
|
reason: '没钱',
|
|||
|
|
img: 'xxxx-xxx.img',
|
|||
|
|
time: '2024-8-20 13:10',
|
|||
|
|
id: '4',
|
|||
|
|
examineTime: '2024-8-20 12:00',
|
|||
|
|
examineStatus: 'NOPASS',
|
|||
|
|
examineText: '额呵呵呵',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: 'xxx系统',
|
|||
|
|
price: '100',
|
|||
|
|
reason: '没钱',
|
|||
|
|
img: 'xxxx-xxx.img',
|
|||
|
|
time: '2024-8-20 13:10',
|
|||
|
|
id: '5',
|
|||
|
|
examineTime: '2024-8-20 12:00',
|
|||
|
|
examineStatus: 'PASS',
|
|||
|
|
examineText: '额呵呵呵',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: 'xxx系统',
|
|||
|
|
price: '100',
|
|||
|
|
reason: '没钱',
|
|||
|
|
img: 'xxxx-xxx.img',
|
|||
|
|
time: '2024-8-20 13:10',
|
|||
|
|
id: '6',
|
|||
|
|
examineTime: '2024-8-20 12:00',
|
|||
|
|
examineStatus: 'PASS',
|
|||
|
|
examineText: '额呵呵呵',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: 'xxx系统',
|
|||
|
|
price: '100',
|
|||
|
|
reason: '没钱',
|
|||
|
|
img: 'xxxx-xxx.img',
|
|||
|
|
time: '2024-8-20 13:10',
|
|||
|
|
id: '7',
|
|||
|
|
examineTime: '2024-8-20 12:00',
|
|||
|
|
examineStatus: 'PASS',
|
|||
|
|
examineText: '额呵呵呵',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: 'xxx系统',
|
|||
|
|
price: '100',
|
|||
|
|
reason: '没钱',
|
|||
|
|
img: 'xxxx-xxx.img',
|
|||
|
|
time: '2024-8-20 13:10',
|
|||
|
|
id: '8',
|
|||
|
|
examineTime: '2024-8-20 12:00',
|
|||
|
|
examineStatus: 'PASS',
|
|||
|
|
examineText: '额呵呵呵',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: 'xxx系统',
|
|||
|
|
price: '100',
|
|||
|
|
reason: '没钱',
|
|||
|
|
img: 'xxxx-xxx.img',
|
|||
|
|
time: '2024-8-20 13:10',
|
|||
|
|
id: '9',
|
|||
|
|
examineTime: '2024-8-20 12:00',
|
|||
|
|
examineStatus: 'PASS',
|
|||
|
|
examineText: '额呵呵呵',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: 'xxx系统',
|
|||
|
|
price: '100',
|
|||
|
|
reason: '没钱',
|
|||
|
|
img: 'xxxx-xxx.img',
|
|||
|
|
time: '2024-8-20 13:10',
|
|||
|
|
id: '10',
|
|||
|
|
examineTime: '2024-8-20 12:00',
|
|||
|
|
examineStatus: 'PASS',
|
|||
|
|
examineText: '额呵呵呵',
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
{contextHolder}
|
|||
|
|
<div className='refun' style={{ height: `${height}px`, overflow: 'auto' }}>
|
|||
|
|
{/* {state.type} */}
|
|||
|
|
<Table columns={columns} dataSource={data}
|
|||
|
|
style={{
|
|||
|
|
// height: height - 80,
|
|||
|
|
// height: 620,
|
|||
|
|
// background: 'skyblue'
|
|||
|
|
}}
|
|||
|
|
// pagination={false} // 不显示分页
|
|||
|
|
pagination={
|
|||
|
|
{
|
|||
|
|
pageSize: 10,
|
|||
|
|
total: total,
|
|||
|
|
onChange: (currentPage) => {
|
|||
|
|
setPage(currentPage);
|
|||
|
|
getData(currentPage)
|
|||
|
|
},
|
|||
|
|
showSizeChanger: false,
|
|||
|
|
current: page
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
scroll={{ y: height - 128 }}
|
|||
|
|
rowKey="id"
|
|||
|
|
/>
|
|||
|
|
{/* <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 15 ,width:'100%'}}>
|
|||
|
|
<Pagination defaultCurrent={page} total={total} pageSize={10} showSizeChanger={false} onChange={(page) => {
|
|||
|
|
setPage(page)
|
|||
|
|
// getData(page)
|
|||
|
|
}} />
|
|||
|
|
</div> */}
|
|||
|
|
</div>
|
|||
|
|
<Modal
|
|||
|
|
title="确认撤销"
|
|||
|
|
okText="撤销"
|
|||
|
|
cancelText="取消"
|
|||
|
|
destroyOnClose={true}
|
|||
|
|
open={revokeModal}
|
|||
|
|
onOk={() => {
|
|||
|
|
setRevokeModal(false)
|
|||
|
|
}}
|
|||
|
|
onCancel={() => {
|
|||
|
|
setRevokeModal(false)
|
|||
|
|
}}
|
|||
|
|
okButtonProps={{ style: { background: 'red', color: 'white' } }}
|
|||
|
|
style={{
|
|||
|
|
display: 'flex',
|
|||
|
|
alignItems: 'center',
|
|||
|
|
justifyContent: 'center',
|
|||
|
|
height: `${height}px`,
|
|||
|
|
}}>
|
|||
|
|
<div style={{ width: 384, display: 'flex', height: 50, alignItems: 'center' }}>
|
|||
|
|
<img src={revokeImg} alt="" style={{ width: 32, height: 32, marginLeft: 10 }} />
|
|||
|
|
<div style={{ marginLeft: 10, fontSize: 18 }}>
|
|||
|
|
是否撤销该条退款申请
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</Modal>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|