canrd-main / canrd-erp-front · Files

import {
  getOrderErpOrderZoNingSelectAll,
  getOrderErpOrderZoNingSelectUserAll,
  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;