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

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';
import { getMenuActive } from '../../util/cache'
import { useNavigate } from "react-router-dom";
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 nav = useNavigate();
    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()
    const type = state ? state.type : getMenuActive()
    // setMenuActive(type)
    // {state.type}
    const columns: TableProps<DataType>['columns'] =
        // 撤销状态
        type == 'CANCELED' ? [
            {
                title: '序号',
                dataIndex: 'index',
                align: 'center',
                width: 80,
                render: (_text, _record, index) => (page - 1) * 20 + 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: '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: 'refundVoucherFileKVs',
                key: 'refundVoucherFileKVs',
                // width: 100,
                align: 'center',
                render: (_, record) => (
                    (record.refundVoucherFileKVs).map((item: any, index: number) => (

                        <div style={{ cursor: 'pointer', color: 'var(--color-blue)' }}
                            className='ellipsis-text' title={item.value}
                            key={index} onClick={() => {
                                window.open(downloadUrl(item.key, false), '_blank')
                            }}>{item.value}</div>


                    ))

                ),
            },

        ]
            : 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: '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: '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)' }}
                                    className='ellipsis-text' title={item.value}
                                    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 ? text : '—'}</div>,
                    },
                    {
                        title: '退款凭证',
                        dataIndex: 'refundVoucherFileKVs',
                        key: 'refundVoucherFileKVs',
                        // width: 100,
                        align: 'center',
                        render: (_, record) => (

                            (record.refundVoucherFileKVs).map((item: any, index: number) => (

                                <div className='ellipsis-text' title={item.value} style={{ cursor: 'pointer', color: 'var(--color-blue)' }} key={index} onClick={() => {
                                    window.open(downloadUrl(item.key, false), '_blank')
                                }}>{item.value}</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: 20,
                    applyStatus: 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: 20,
                            applyStatus: type
                        }
                    },
                    onSuccess(data: any) {
                        // console.log(data.data.rows);
                        // setData(data.data.rows)

                        // setTotal(data.data.total)
                        if (data.data.rows.length == 0 && page > 1) {
                            getData(page - 1)
                        } else {
                            dispath({
                                type: 'upRefunArray',
                                val: data.data.rows
                            })
                            dispath({
                                type: 'upRefunTotal',
                                val: data.data.total
                            })
                        }
                    }
                })
            },
            onFinally() {
                // setIsProjIntroductionLoading(false)
                // renderData()
            }
        })
    }
    useEffect(() => {
        if (!state) {
            nav('/home')
        }
    }, [state])
    useEffect(() => {
        // getData(1)
        setPage(1)
        getData(1)
        // console.log(type);

    }, [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: 20,
                                total: total,
                                onChange: (currentPage) => {
                                    setPage(currentPage);
                                    getData(currentPage)
                                },
                                showSizeChanger: false,
                                current: page

                            }

                        }
                        scroll={{ y: height - 150 }}
                        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>
    )
}