DataCenter/web/client/src/sections/business/containers/reserveItemsReporting.jsx

import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Select, Input, Button, Banner, Radio, Tooltip, Table } from '@douyinfe/semi-ui';
import { IconSearch } from '@douyinfe/semi-icons';
import '../style.less'
import moment from 'moment'

const ReserveItemsReporting = (props) => {
    const [downloadUrl, setDownloadUrl] = useState(null);
    const [warningBanner, setWarningBanner] = useState(null);

    const columns = [
        {
            title: '序号',
            dataIndex: 'index',
            render: (text, record, index) => index + 1
        },
        {
            title: '部门',
            dataIndex: 'department',
        },
        {
            title: '销售经理',
            dataIndex: 'salesManager',
        },
        {
            title: '项目名称',
            dataIndex: 'projectName',
        },
        {
            title: '客户名称',
            dataIndex: 'customerName',
        },
        {
            title: '项目类型',
            dataIndex: 'projectType',
        },
        {
            title: '项目状态',
            dataIndex: 'projectState',
        },
        {
            title: '项目描述',
            dataIndex: 'projectDescribe',
        },
        {
            title: '初次提交时间',
            dataIndex: 'creationTime',
        },
        {
            title: '储备项目周期',
            dataIndex: 'reserveProjectCycle',
        },
        {
            title: '最新更新时间',
            dataIndex: 'lastUpdateTime',
        },
        {
            title: '最近拜访时间',
            dataIndex: 'lastVisitTime',
        },
        {
            title: '拜访间隔周期（天）',
            dataIndex: 'intervalPeriodTime',
        },
        {
            title: '操作',
            dataIndex: 'action',
            render: (text, record, indexe) => (<Button theme='solid' type='secondary'>导出</Button>)
        },
    ];
    const data = [];
    const exportAll = () => {
        const { dispatch, actions } = props;
        dispatch(actions.businessManagement.getFilingReport()).then(res => {
            const { payload } = res;
            if (payload && payload.url) {
                setDownloadUrl(`${payload.url}/datacenter/reserve`);
            } else {
                setWarningBanner("导出地址有误,导出失败");
            }
        });
    }

    return (
        <>
            <div style={{ padding: '0px 12px' }}>
                <div style={{ display: 'flex' }}>
                    <div style={{ color: 'rgba(0,0,0,0.45)', fontSize: 14 }}>业务管理</div>
                    <div style={{ color: 'rgba(0,0,0,0.45)', fontSize: 14, margin: '0px 8px' }}>/</div>
                    <div style={{ color: 'rgba(0,0,0,0.45)', fontSize: 14 }}>项目报表</div>
                    <div style={{ color: '#033C9A', fontSize: 14, margin: '0px 8px' }}>/</div>
                    <div style={{ color: '#033C9A', fontSize: 14 }}>储备项目报备表</div>
                </div>
                <div style={{ background: '#FFFFFF', boxShadow: '0px 0px 12px 2px rgba(220,222,224,0.2)', borderRadius: 2, padding: '20px 0px 20px 19px ', marginTop: 9 }}>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                        <div style={{ display: 'flex', alignItems: 'baseline' }}>
                            <div style={{ width: 0, height: 20, borderLeft: '3px solid #0F7EFB', borderTop: '3px solid transparent', borderBottom: '3px solid transparent' }}></div>
                            <div style={{ fontFamily: "YouSheBiaoTiHei", fontSize: 24, color: '#033C9A', marginLeft: 8 }}>储备项目报备表</div>
                            <div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>REPORT FORM OF RESERVE ITEMS</div>
                        </div>
                    </div>
                    {
                        warningBanner &&
                        (<Banner
                            type="danger"
                            description={warningBanner}
                            onClose={() => setWarningBanner(null)}
                        />)}
                    <div style={{ display: 'flex', marginTop: 16, marginBottom: 17 }}>
                        {/* <div style={{ marginLeft: 12, marginRight: 18 }}>
                            <Input suffix={<IconSearch />}
                                showClear
                                placeholder='请输入或选择关键词'
                                style={{ width: 346 }}
                            // onChange={seachValueChange}
                            >
                            </Input>
                        </div>
                        <Button theme='solid' type='primary' style={{ width: 80, borderRadius: 2, height: 32, background: '#DBECFF', color: '#005ABD' }}
                            onClick={() => {
                                // dispatch(humanAffairs.getMemberList({ keywordTarget, keyword, state: typeChoose })).then((res) => {//搜索项企用户
                                //     if (res.success) {
                                //         setArchivesList(res.payload.data.rows)
                                //     }
                                // })
                            }}>查询</Button> */}

                        <Button theme='solid' type='secondary' style={{ width: 80, borderRadius: 2, marginLeft: 15 }}
                            onClick={exportAll}>导出全部</Button>
                    </div>
                    <div style={{ borderBottom: '1px solid #F2F3F5', marginBottom: 16 }}></div>

                    <Table columns={columns} dataSource={data} pagination={false} />
                </div>
                {
                    downloadUrl ? <iframe key={downloadUrl} src={downloadUrl} style={{ display: 'none' }} /> : ''
                }
            </div>
        </>
    )
}


function mapStateToProps(state) {
    const { auth, global } = state;
    return {
        user: auth.user,
        actions: global.actions,
    };
}

export default connect(mapStateToProps)(ReserveItemsReporting);