system-copyright-react/src/route/Refun/Refun.tsx

import './refun.css';
import { useState, useEffect } from 'react';
import {
    Table,
    //  Pagination,
    Modal, Tag, message
} from 'antd';
import { get,put } from '../../util/AjaxUtils'
import type { TableProps } from 'antd';
interface DataType {
    projName: string;
    projPayment: string;
    refundReason: string;
    gmtCreate: string;
    refundVoucherFileKVs: string;
    projRefundApplyId: string;
    gmtReview: string;
    applyStatus: string;
    reviewReason: 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 [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,
        },
        {
            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 == "PASS" ? '#87d068' : text == "NOPASS" ? '#f50' : text == "WAIT" ? '#2db7f5' : ''}
            >{text == "PASS" ? '通过' : text == "NOPASS" ? '未通过' : text == "WAIT" ? '待审核' : '未知'}</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>

            ),
        },

    ] : [
        {
            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,
        },
        {
            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 == "PASS" ? '#87d068' : text == "NOPASS" ? '#f50' : text == "WAIT" ? '#2db7f5' : ''}
            >{text == "PASS" ? '通过' : text == "NOPASS" ? '未通过' : text == "WAIT" ? '待审核' : '未知'}</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>

            ),
        },
        {
            title: '操作',
            align: 'center',
            width: 100,
            render: (_, record) => (
                // {record.name}
                <div className='refunBtn' onClick={() => {
                    console.log(record.projRefundApplyId);
                    setRevokeModal(true)
                    setprojRefundApplyId(record.projRefundApplyId)
                }}> 撤销</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: any) {
                console.log(data.data.rows);
                setData(data.data.rows)
            }
        })
    }
    // 撤销退款
    const projRefund = () => {
        put<any>({
            messageApi,
            url: `/api/proj/refund/apply/cancel/self/${projRefundApplyId}`,
           
            onBefore() {
                
            },
            onSuccess() {
                setRevokeModal(false)
                messageApi.success('已撤销');
           

            },
            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} */}
                <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="projId"
                />
                {/* <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>
    )
}