fe_service_ebtp_frontend/src/pages/PartyMemberTopic/Management/OpinionCollection/index.tsx

import { UploadOutlined } from '@ant-design/icons';
import { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Button, Card, Space, Typography } from 'antd';
import React, { useState } from 'react';
import { useRef } from 'react';
import { getOpinionList } from './service';
import { isEmpty, managerAuthority } from '../../utils';
import { downloadFileObjectId } from '@/utils/DownloadUtils';

const OpinionCollection: React.FC<{}> = () => {
    const actionRef = useRef<ActionType>();
    const { Text, Link } = Typography;
    //loading
    const [loading, setLoading] = useState<boolean>(false);
    //select
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        setSelectedRowKeys(newSelectedRowKeys);
    };
    //下载附件
    const downloadClick = (e: any, record: any) => {
        e.preventDefault();
        downloadFileObjectId(record.attachmentImage);
    }

    //导出&全量导出
    const exportData = (ids?: any[]) => {
        let url = "/api/biz-service-ebtp-extend/v1/eventmaintain/suggestion/export/";
        let params = '';
        if (ids) {
            for (let i = 0, length = ids.length; i < length; i++) {
                if (i == 0) {
                    params += `?ids=${ids[i]}`;
                } else {
                    params += `&ids=${ids[i]}`;
                }
            }
        }
        url += params;
        window.location.href = url;
        actionRef.current?.reloadAndRest?.();
    }


    const columns: ProColumns<any>[] = [
        {
            title: '序号',
            dataIndex: 'index',
            valueType: 'index',
            width: 48,
        },
        {
            title: '意见类型',
            dataIndex: 'suggestionType',
            valueType: 'select',
            valueEnum: {
                "网络运营": { text: '网络运营' },
                "IT": { text: 'IT' },
                "市场": { text: '市场' },
                "综合行政": { text: '综合行政' },
                "其他": { text: '其他' },
            },
        },
        {
            title: '意见内容',
            dataIndex: 'suggestionContent',
            width: '30%',
            hideInSearch: true,
        },
        {
            title: '补充信息',
            dataIndex: 'instructions',
            width: '20%',
            hideInSearch: true,
        },
        {
            title: '提交时间',
            key: 'createTime',
            dataIndex: 'createTime',
            valueType: 'dateTime',
            hideInSearch: true,
        },
        {
            title: '开始时间',
            dataIndex: 'startTime',
            valueType: 'dateTime',
            hideInTable: true,
        },
        {
            title: '结束时间',
            dataIndex: 'endTime',
            valueType: 'dateTime',
            hideInTable: true,
        },
        {
            title: '提交人员',
            dataIndex: 'suggestionSponsor',
            hideInSearch: true,
        },
        {
            title: '附件管理',
            hideInSearch: true,
            render: (text, record, _, action) =>
                isEmpty(record.attachmentImage) ? [
                    <Text
                        key="download"
                        disabled
                    >
                        下载附件
                    </Text>,
                ] : [
                    <Link
                        key="download"
                        href='#'
                        onClick={(e) => downloadClick(e, record)}
                        hidden={managerAuthority("ebtp-party-admin")}
                    >
                        下载附件
                    </Link>,
                ]
        },
    ];
    return (
        <Card className="zjl-entrust confirm" bodyStyle={{ padding: '16px 24px 0px', height: window.innerHeight - 105, overflowY: 'auto' }}>
            <ProTable<any>
                columns={columns}
                actionRef={actionRef}
                loading={loading}
                request={async (params) => {
                    setLoading(true);
                    return await getOpinionList(params).then(res => {
                        if (res?.success) {
                            return {
                                data: res?.data.records,
                                success: res?.success,
                                total: res?.data.total
                            };
                        }
                        return {
                            data: [],
                            success: false,
                            total: 0,
                        };
                    }).finally(() => {
                        setLoading(false);
                    })
                }}
                rowKey="id"
                options={false}
                pagination={{
                    pageSize: 10,
                }}
                search={{
                    span: 6,
                    defaultCollapsed: false,//默认展开
                }}
                rowSelection={{
                    selectedRowKeys,
                    onChange: onSelectChange,
                    preserveSelectedRowKeys: true,
                }}
                tableAlertRender={({ selectedRowKeys, selectedRows, onCleanSelected }) => (
                    <Space size={24}>
                        <span>
                            已选 {selectedRowKeys.length} 项
                            <a
                                style={{ marginLeft: 8 }}
                                onClick={() => exportData(selectedRowKeys)}
                                hidden={managerAuthority("ebtp-party-admin")}
                            >
                                批量导出
                            </a>
                        </span>
                    </Space>
                )}
                dateFormatter="string"
                toolBarRender={() => [
                    <Button
                        key="button"
                        icon={<UploadOutlined />}
                        type="primary"
                        onClick={() => exportData()}
                        loading={loading}
                        hidden={managerAuthority("ebtp-party-admin")}
                    >
                        全量导出
                    </Button>
                ]}
            />
        </Card>
    );
};

export default OpinionCollection