canrd-main / canrd-erp-front · Files

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;