493 lines
20 KiB
TypeScript
493 lines
20 KiB
TypeScript
import './refun.css';
|
||
import { useState, useEffect } from 'react';
|
||
import {
|
||
Table,
|
||
// Pagination,
|
||
Modal, Tag, message, Spin
|
||
} from 'antd';
|
||
import { useSelector, useDispatch } from 'react-redux'
|
||
import { get, put, downloadUrl } from '../../util/AjaxUtils'
|
||
import type { TableProps } from 'antd';
|
||
interface DataType {
|
||
projName: string;
|
||
projPayment: string;
|
||
refundReason: string;
|
||
gmtCreate: string;
|
||
refundVoucherFileKVs: any;
|
||
projRefundApplyId: string;
|
||
gmtReview: string;
|
||
applyStatus: string;
|
||
reviewReason: string;
|
||
projId: 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 [isLoading, setIsLoading] = useState(false)
|
||
const [page, setPage] = useState(1) // 分页
|
||
// const [total, setTotal] = useState(0) // 数据总数
|
||
// const [data, setData] = useState<any[]>([])
|
||
const [revokeModal, setRevokeModal] = useState(false) //撤销弹窗
|
||
const [projRefundApplyId, setprojRefundApplyId] = useState('') //要撤销的id
|
||
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: 'projName',
|
||
align: 'center',
|
||
key: 'projName',
|
||
render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
|
||
},
|
||
{
|
||
title: '金额',
|
||
dataIndex: 'projPayment',
|
||
key: 'projPayment',
|
||
align: 'center',
|
||
width: 150,
|
||
render: (text) => <div style={{color:'red',fontWeight:700}}>{text/100}</div>,
|
||
},
|
||
{
|
||
title: '退款原因',
|
||
dataIndex: 'refundReason',
|
||
key: 'refundReason',
|
||
align: 'center',
|
||
render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
|
||
},
|
||
{
|
||
title: '申请退款时间',
|
||
dataIndex: 'gmtCreate',
|
||
key: 'gmtCreate',
|
||
align: 'center',
|
||
width: 200,
|
||
},
|
||
// {
|
||
// title: '审核时间',
|
||
// dataIndex: 'gmtReview',
|
||
// key: 'gmtReview',
|
||
// align: 'center',
|
||
// width: 200,
|
||
// },
|
||
{
|
||
title: '审核状态',
|
||
dataIndex: 'applyStatus',
|
||
key: 'applyStatus',
|
||
align: 'center',
|
||
width: 100,
|
||
render: (text) => <Tag
|
||
color={text == "APPROVED" ? '#87d068' : text == "REJECTED" ? '#f50' : text == "PENDING" ? '#2db7f5' : text == "CANCELED" ? '#108ee9' : ''}
|
||
>{text == "APPROVED" ? '已通过' : text == "REJECTED" ? '未通过' : text == "PENDING" ? '待审核' : text == "CANCELED" ? '已取消' : '未知'}</Tag>,
|
||
},
|
||
// {
|
||
// title: '审核意见',
|
||
// dataIndex: 'reviewReason',
|
||
// key: 'reviewReason',
|
||
// align: 'center',
|
||
// // width: 150,
|
||
// render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
|
||
// },
|
||
{
|
||
title: '退款凭证',
|
||
dataIndex: 'refundVoucherFileKVs',
|
||
key: 'refundVoucherFileKVs',
|
||
// width: 100,
|
||
align: 'center',
|
||
render: (_, record) => (
|
||
// {record.name}
|
||
// <div className='refunBtn' onClick={() => {
|
||
// // console.log(record.img);
|
||
// }}> 预览</div>
|
||
(record.refundVoucherFileKVs).map((item: any, index: number) => (
|
||
|
||
<div style={{ cursor: 'pointer', color: 'var(--color-blue)' }} key={index} onClick={() => {
|
||
window.open(downloadUrl(item.key, false), '_blank')
|
||
}}>{item.value}</div>
|
||
|
||
|
||
))
|
||
|
||
),
|
||
},
|
||
|
||
]
|
||
: state.type == 'PENDING' ?
|
||
// PENDING待审核状态
|
||
[
|
||
{
|
||
title: '序号',
|
||
dataIndex: 'index',
|
||
align: 'center',
|
||
width: 80,
|
||
render: (_text, _record, index) => (page - 1) * 10 + index + 1, // 显示序号，从1开始
|
||
},
|
||
{
|
||
title: '系统名称',
|
||
dataIndex: 'projName',
|
||
align: 'center',
|
||
key: 'projName',
|
||
render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
|
||
},
|
||
{
|
||
title: '金额',
|
||
dataIndex: 'projPayment',
|
||
key: 'projPayment',
|
||
align: 'center',
|
||
width: 150,
|
||
render: (text) => <div style={{color:'red',fontWeight:700}}>{text/100}</div>,
|
||
},
|
||
{
|
||
title: '退款原因',
|
||
dataIndex: 'refundReason',
|
||
key: 'refundReason',
|
||
align: 'center',
|
||
render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
|
||
},
|
||
{
|
||
title: '申请退款时间',
|
||
dataIndex: 'gmtCreate',
|
||
key: 'gmtCreate',
|
||
align: 'center',
|
||
width: 200,
|
||
},
|
||
// {
|
||
// title: '审核时间',
|
||
// dataIndex: 'gmtReview',
|
||
// key: 'gmtReview',
|
||
// align: 'center',
|
||
// width: 200,
|
||
// },
|
||
{
|
||
title: '审核状态',
|
||
dataIndex: 'applyStatus',
|
||
key: 'applyStatus',
|
||
align: 'center',
|
||
width: 100,
|
||
render: (text) => <Tag
|
||
color={text == "APPROVED" ? '#87d068' : text == "REJECTED" ? '#f50' : text == "PENDING" ? '#2db7f5' : text == "CANCELED" ? '#108ee9' : ''}
|
||
>{text == "APPROVED" ? '通过' : text == "REJECTED" ? '未通过' : text == "PENDING" ? '待审核' : text == "CANCELED" ? '已取消' : '未知'}</Tag>,
|
||
},
|
||
// {
|
||
// title: '审核意见',
|
||
// dataIndex: 'reviewReason',
|
||
// key: 'reviewReason',
|
||
// align: 'center',
|
||
// // width: 150,
|
||
// render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
|
||
// },
|
||
{
|
||
title: '退款凭证',
|
||
dataIndex: 'refundVoucherFileKVs',
|
||
key: 'refundVoucherFileKVs',
|
||
// width: 100,
|
||
align: 'center',
|
||
render: (_, record) => (
|
||
// {record.name}
|
||
// <div className='refunBtn' onClick={() => {
|
||
// console.log(record.refundVoucherFileKVs);
|
||
// }}> 预览</div>
|
||
(record.refundVoucherFileKVs).map((item: any,index:number) => (
|
||
|
||
<div style={{ cursor: 'pointer', color: 'var(--color-blue)' }} key={index} onClick={() => {
|
||
window.open(downloadUrl(item.key, false), '_blank')
|
||
}}>{item.value}</div>
|
||
|
||
|
||
))
|
||
|
||
),
|
||
|
||
},
|
||
{
|
||
title: '操作',
|
||
align: 'center',
|
||
width: 100,
|
||
render: (_, record) => (
|
||
// {record.name}
|
||
<div className='refunBtn' onClick={() => {
|
||
console.log(record.projRefundApplyId);
|
||
setRevokeModal(true)
|
||
setprojRefundApplyId(record.projRefundApplyId)
|
||
}}> 撤销</div>
|
||
|
||
),
|
||
},
|
||
] :
|
||
// 已通过 和未通过 状态
|
||
[
|
||
{
|
||
title: '序号',
|
||
dataIndex: 'index',
|
||
align: 'center',
|
||
width: 80,
|
||
render: (_text, _record, index) => (page - 1) * 10 + index + 1, // 显示序号，从1开始
|
||
},
|
||
{
|
||
title: '系统名称',
|
||
dataIndex: 'projName',
|
||
align: 'center',
|
||
key: 'projName',
|
||
render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
|
||
},
|
||
{
|
||
title: '金额',
|
||
dataIndex: 'projPayment',
|
||
key: 'projPayment',
|
||
align: 'center',
|
||
width: 150,
|
||
render: (text) => <div style={{color:'red',fontWeight:700}}>{text/100}</div>,
|
||
},
|
||
{
|
||
title: '退款原因',
|
||
dataIndex: 'refundReason',
|
||
key: 'refundReason',
|
||
align: 'center',
|
||
render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
|
||
},
|
||
{
|
||
title: '申请退款时间',
|
||
dataIndex: 'gmtCreate',
|
||
key: 'gmtCreate',
|
||
align: 'center',
|
||
width: 200,
|
||
},
|
||
{
|
||
title: '审核时间',
|
||
dataIndex: 'gmtReview',
|
||
key: 'gmtReview',
|
||
align: 'center',
|
||
width: 200,
|
||
},
|
||
{
|
||
title: '审核状态',
|
||
dataIndex: 'applyStatus',
|
||
key: 'applyStatus',
|
||
align: 'center',
|
||
width: 100,
|
||
render: (text) => <Tag
|
||
color={text == "APPROVED" ? '#87d068' : text == "REJECTED" ? '#f50' : text == "PENDING" ? '#2db7f5' : text == "CANCELED" ? '#108ee9' : ''}
|
||
>{text == "APPROVED" ? '通过' : text == "REJECTED" ? '未通过' : text == "PENDING" ? '待审核' : text == "CANCELED" ? '已取消' : '未知'}</Tag>,
|
||
},
|
||
{
|
||
title: '审核意见',
|
||
dataIndex: 'reviewReason',
|
||
key: 'reviewReason',
|
||
align: 'center',
|
||
// width: 150,
|
||
render: (text) => <div className='ellipsis-text' title={text}>{text}</div>,
|
||
},
|
||
{
|
||
title: '退款凭证',
|
||
dataIndex: 'refundVoucherFileKVs',
|
||
key: 'refundVoucherFileKVs',
|
||
// width: 100,
|
||
align: 'center',
|
||
render: (_, record) => (
|
||
// {record.name}
|
||
// <div className='refunBtn' onClick={() => {
|
||
// // console.log(record.img);
|
||
// }}> 预览</div>
|
||
(record.refundVoucherFileKVs).map((item: any, index: number) => (
|
||
|
||
<div style={{ cursor: 'pointer', color: 'var(--color-blue)' }} key={index} onClick={() => {
|
||
window.open(downloadUrl(item.key, false), '_blank')
|
||
}}>{item.value}</div>
|
||
|
||
))
|
||
|
||
),
|
||
},
|
||
// {
|
||
// title: '操作',
|
||
// align: 'center',
|
||
// width: 100,
|
||
// render: (_, record) => (
|
||
// // {record.name}
|
||
// <div className='refunBtn' onClick={() => {
|
||
// console.log(record.projRefundApplyId);
|
||
// setRevokeModal(true)
|
||
// setprojRefundApplyId(record.projRefundApplyId)
|
||
// }}> 撤销</div>
|
||
|
||
// ),
|
||
// },
|
||
];
|
||
const dispath = useDispatch()
|
||
const redxuState: any = useSelector(state => state)
|
||
const refunArray = redxuState.refunArray
|
||
const total = redxuState.refunTotal
|
||
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
|
||
}
|
||
},
|
||
onBefore() {
|
||
setIsLoading(true)
|
||
},
|
||
onSuccess(data: any) {
|
||
console.log(data.data.rows);
|
||
// setData(data.data.rows)
|
||
dispath({
|
||
type: 'upRefunArray',
|
||
val: data.data.rows
|
||
})
|
||
dispath({
|
||
type: 'upRefunTotal',
|
||
val: data.data.total
|
||
})
|
||
// setTotal(data.data.total)
|
||
},
|
||
onFinally() {
|
||
setIsLoading(false)
|
||
},
|
||
})
|
||
}
|
||
// 撤销退款
|
||
const projRefund = () => {
|
||
put<any>({
|
||
messageApi,
|
||
url: `/api/proj/refund/apply/cancel/self/${projRefundApplyId}`,
|
||
|
||
onBefore() {
|
||
|
||
},
|
||
onSuccess() {
|
||
setRevokeModal(false)
|
||
messageApi.success('已撤销');
|
||
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: any) {
|
||
// console.log(data.data.rows);
|
||
// setData(data.data.rows)
|
||
|
||
// setTotal(data.data.total)
|
||
if (data.data.rows.length == 0) {
|
||
getData(page - 1)
|
||
} else {
|
||
dispath({
|
||
type: 'upRefunArray',
|
||
val: data.data.rows
|
||
})
|
||
dispath({
|
||
type: 'upRefunTotal',
|
||
val: data.data.total
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
onFinally() {
|
||
// setIsProjIntroductionLoading(false)
|
||
// renderData()
|
||
}
|
||
})
|
||
}
|
||
// useEffect(()=>{
|
||
// getData(page)
|
||
// },[])
|
||
useEffect(() => {
|
||
// getData(1)
|
||
setPage(1)
|
||
getData(1)
|
||
}, [state.type])
|
||
|
||
return (
|
||
<div>
|
||
{contextHolder}
|
||
|
||
<div className='refun' style={{ height: `${height}px`, overflow: 'auto' }}>
|
||
{/* {state.type} */}
|
||
<Spin tip="加载中..." spinning={isLoading}>
|
||
<Table columns={columns} dataSource={refunArray}
|
||
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 - 140 }}
|
||
rowKey="projId"
|
||
/>
|
||
</Spin>
|
||
<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)
|
||
projRefund()
|
||
}}
|
||
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>
|
||
)
|
||
}
|