import { getOrderErpOrderZoNingSelectAll, postOrderErpOrderZoNingSelectSaleUserByProvince, 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: [null], productBelongBusiness: form.getFieldValue('productBelongBusiness'), maxAccount: form.getFieldValue('maxAccount'), includeExperimentalEquipment: form.getFieldValue( 'includeExperimentalEquipment', ), // beginTime:"", // endTime:"" }; // console.log(form.getFieldValue('zoning').value); // let res = await getOrderErpOrderZoNingSelectUserAll(); // if (res && res.data) { // let safeUserList = []; // res.data.forEach((element) => { // safeUserList.push(element.userName); // }); // body = { ...body, salesCode: safeUserList }; // } if (form.getFieldValue('salesCode')) { body = { ...body, salesCode: [form.getFieldValue('salesCode')] }; } if (form.getFieldValue('zoning')) { if ( form.getFieldValue('zoning').value !== '' || form.getFieldValue('zoning').value !== null || form.getFieldValue('zoning').value !== undefined ) { let res = await postOrderErpOrderZoNingSelectSaleUserByProvince({ data: form.getFieldValue('zoning').value, }); if (res && res.data) { body = { ...body, salesCode: res.data }; } } } if (form.getFieldValue('zoning')) { } // 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="包含实验设备事业部汇总统计" /> <ProFormSelect key="zoning" name="zoning" width="md" label="所属地区" fieldProps={{ labelInValue: true, }} placeholder="请选择" request={async () => { let zoningOptions = []; let res = await getOrderErpOrderZoNingSelectAll(); if (res && res.data) { console.log(res.data); zoningOptions = res.data.map((item) => ({ value: item.zoning, label: item.zoning, })); } return zoningOptions; }} /> </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;