import { postServiceOrderQueryReportFormsInformation, postServiceOrderQuerySalesCode, } from '@/services'; import { enumToSelect } from '@/utils'; import { ProCard, ProFormCheckbox, ProFormDigit, ProFormSelect, QueryFilter, } from '@ant-design/pro-components'; import { Form, Segmented, Space, Spin } from 'antd'; import { useEffect, useState } from 'react'; import { PRODUCT_BELONG_DEPARTMENT_OPTIONS } from '../Order/constant'; import OrderDualAxes from './components/OrderDualAxes'; import OrderStatisticCard from './components/OrderStatisticCard'; import './index.less'; const OrderReportPage = () => { const [salesCodeOptions, setSalesCodeOptions] = useState([]); /** * 获取销售代码枚举,在复制和编辑的时候判断是否为旧的代码 */ const getSalesCodeOptions = async () => { const res = await postServiceOrderQuerySalesCode(); let options = res.data?.map((item) => { return { label: item.userName, value: item.userName, number: item.number, }; }); setSalesCodeOptions(options); }; const [form] = Form.useForm<{ salesCode: ''; productBelongBusiness: ''; dateRange: ''; }>(); const [statisticData, setStatisticData] = useState([]); const [loading, setLoading] = useState(false); const [statisticsMethod, setStatisticsMethod] = useState('MONTH_STATISTICS'); const onChange = (key: string) => { if (key === '本月') { setStatisticsMethod('MONTH_STATISTICS'); } if (key === '上月') { setStatisticsMethod('LAST_MONTH_STATISTICS'); } if (key === '本年') { setStatisticsMethod('YEAR_STATISTICS'); } }; /** * 加载页面数据 */ const loadData = async () => { setLoading(true); let body = { statisticsMethod: '', salesCode: form.getFieldValue('salesCode'), productBelongBusiness: form.getFieldValue('productBelongBusiness'), maxAccount: form.getFieldValue('maxAccount'), includeExperimentalEquipment: form.getFieldValue( 'includeExperimentalEquipment', ), // beginTime:"", // endTime:"" }; // if(form.getFieldValue("dateRange")!==undefined){ // body.beginTime=formatDate(form.getFieldValue("dateRange")[0]), // body.endTime=formatDate(form.getFieldValue("dateRange")[1]) // } body.statisticsMethod = statisticsMethod; const { data } = await postServiceOrderQueryReportFormsInformation({ data: body, }); if (data !== undefined) { setStatisticData(data); } setLoading(false); }; useEffect(() => { loadData(); }, [statisticsMethod]); useEffect(() => { loadData(); getSalesCodeOptions(); }, []); // const items: TabsProps['items'] = [ // { // key: 'MONTH_STATISTICS', // label: '本月统计', // children: '', // }, // { // key: 'YEAR_STATISTICS', // label: '本年统计', // children: '', // }, // ]; return ( <div> <Space direction="vertical" size="middle" className="flex"> <Spin spinning={loading}> <OrderStatisticCard data={statisticData} statisticsMethod={statisticsMethod} reFreshData={loadData} /> </Spin> <ProCard tooltip="这是提示" bordered> <QueryFilter split className="!p-0 order-statistic-search" labelWidth="auto" defaultCollapsed={false} form={form} onFinish={async () => { loadData(); return true; }} > <ProFormSelect name="salesCode" key="salesCode" width="lg" showSearch label="销售代表" placeholder="请选择销售代表" options={salesCodeOptions} /> <ProFormSelect key="productBelongBusiness" placeholder="请输入所属事业部" name="productBelongBusiness" label="所属事业部" options={enumToSelect(PRODUCT_BELONG_DEPARTMENT_OPTIONS)} onChange={(val: any) => { if (val === 'EXPERIMENTAL_EQUIPMENT') { //勾选上包含设备事业部 form.setFieldValue('includeExperimentalEquipment', true); } }} /> <ProFormDigit label="排除大订单金额" name="maxAccount" min={0} /> <ProFormCheckbox key="includeExperimentalEquipment" name="includeExperimentalEquipment" initialValue={false} label="包含实验设备事业部汇总统计" /> </QueryFilter> </ProCard> <ProCard id="order-dual-axes-card" title="汇总统计" tooltip="下方汇总统计未统计实验设备事业部数据,如需要请勾选包含实验设备事业部汇总统计" extra={ <Segmented options={['本月', '上月', '本年']} onChange={(val: any) => { onChange(val); }} /> } bordered > <Spin spinning={loading}> <OrderDualAxes data={statisticData} statisticMethod={statisticsMethod} /> </Spin> </ProCard> </Space> </div> ); }; export default OrderReportPage;