system-copyright-react/src/route/agent/AgentCorrection.tsx

import './agent-correction.css'
import {Link, useParams} from "react-router-dom";
import {
    Breadcrumb,
    message,
    Spin,
    Table,
    TableProps,
    Upload,
} from "antd";
import {useEffect, useState} from "react";
import {DownloadOutlined, UploadOutlined} from '@ant-design/icons';
import {DevUserId, get, put, uploadFileUrl} from "../../util/AjaxUtils.ts";
import {IListPage} from "../../interfaces/listpage/IListPage.ts";
import useMessage from "antd/es/message/useMessage";

type TableDataType = {
    creator: string;
    gmtCreate: string;
    isMaterial: number;
    isUpload: number;
    materialAmendAttr: string;
    materialAmendExplain: string;
    materialAmendFile: string;
    materialAmendType: string;
    orderId: string;
    orderMaterialAmendId: string;
    orderNumber: string;
}

export default function AgentCorrection() {
    const pathParams = useParams();
    const [messageApi, contextHolder] = useMessage();
    const [isLoading, setIsLoading] = useState(false);
    const [isConfirmLoading, setIsConfirmLoading] = useState(false);
    const [page, setPage] = useState(1);
    const [total, setTotal] = useState(0);
    const [dataArray, setDataArray] = useState<TableDataType[]>([]);
    const [uploadSignFileId, setUploadSignFileId] = useState('');

    const domHeight = window.innerHeight - 180;

    const columns: TableProps<TableDataType>['columns'] = [
        {
            title: '资料类型',
            dataIndex: 'materialAmendType',
            key: 'materialAmendType',
            align: 'center',
            width: 200,
            render: (value) => {
                if(value === 'OM_FILE') {
                    return '操作手册';
                }
                if(value === 'CODE_FILE') {
                    return '源代码';
                }
                if(value === 'Af_File') {
                    return '申请表';
                }
                if(value === 'OTHER') {
                    return '其他';
                }
                return '错误'
            }
        },
        {
            title: '说明',
            dataIndex: 'materialAmendExplain',
            key: 'materialAmendExplain',
            align: 'center',

        },
        {
            title: '创建时间',
            dataIndex: 'gmtCreate',
            key: 'gmtCreate',
            align: 'center',
            width: 180
        },
        {
            title: '附件',
            dataIndex: 'materialAmendAttr',
            key: 'materialAmendAttr',
            align: 'center',
            width: 100,
            render: (value) => {
                return <a href={value} download><DownloadOutlined /> 下载</a>
            }
        },
        {
            title: '补正资料',
            dataIndex: 'materialAmendFile',
            key: 'materialAmendFile',
            align: 'center',
            width: 100,
            render: (value) => {
                if(!value) {
                    return '-';
                }
                return <a href={value} download><DownloadOutlined /> 下载</a>
            }
        },
        {
            title: '操作',
            dataIndex: 'option',
            key: 'option',
            align: 'center',
            width: 120,
            render: (_value, record) => {
                if(record.materialAmendFile) {
                    return '-';
                }
                return (
                    <Upload name="file"
                            action={uploadFileUrl()}
                            headers={{'X-USER-ID': DevUserId}}
                            maxCount={1}
                            showUploadList={false}
                            onChange={
                                (info) => {
                                    if (info.file.status !== 'uploading') {
                                        console.log(info.file, info.fileList);
                                    }
                                    if (info.file.status === 'done') {
                                        message.success('上传成功');
                                        info.fileList.splice(0);
                                        put<any>({
                                            messageApi,
                                            url: 'api/agent/order/correction/update',
                                            body: {
                                                orderMaterialAmendId: record.orderMaterialAmendId,
                                                fileId : info.file.response.data.fileId
                                            },
                                            onBefore() {
                                                setIsConfirmLoading(true);
                                            },
                                            onSuccess() {
                                                messageApi.success('提交成功')
                                                getData();
                                            },
                                            onFinally() {
                                                setIsConfirmLoading(false);
                                            }
                                        })
                                    } else if (info.file.status === 'error') {
                                        message.error('上传失败');
                                    }
                                }
                            }
                            onRemove={() => {
                                setUploadSignFileId('');
                            }}
                    >
                        <a href="/#" onClick={(e)=>{
                            e.preventDefault();
                        }}><UploadOutlined /> {uploadSignFileId ? '重新上传' : '上传'}</a>
                    </Upload>
                )
            }
        },
    ];

    const getData = () => {
        get<IListPage<TableDataType>>({
            messageApi,
            url: `/api/agent/order/correction/listpage/order-id/${pathParams.orderId}`,
            onBefore() {
                setIsLoading(true)
            },
            onSuccess({data}) {
                setDataArray([
                    ...data.rows
                ])
                setPage(data.page);
                setTotal(data.total);
            },
            onFinally() {
                setIsLoading(false)
            }
        })
    }

    useEffect(() => {
        getData();
    }, [page])

    return (
        <>
            <Breadcrumb
                items={[
                    {title: <Link to="/?type=agent">首页</Link>},
                    {title: '补正列表'},
                ]}
            />
            <div className="correction-container" style={{height: `${domHeight}px`}}>
                <Spin tip="加载中..." spinning={isLoading}>
                    <Table columns={columns} dataSource={dataArray} rowKey="orderMaterialAmendId" scroll={{y: domHeight - 105}} bordered pagination={{
                        current: page,
                        pageSize: 20,
                        total: total,
                        onChange: (page) => {
                            setPage(page);
                        }
                    }}/>
                </Spin>
            </div>
            <Spin tip="正在提交..." spinning={isConfirmLoading} fullscreen/>
            {contextHolder}
        </>
    )
}