canrd-main / canrd-erp-front · Files

import {

  getOrderErpOrderZoNingSelectAll,
  postOrderErpOrderZoNingSelectSaleUserByProvince,

  postServiceOrderQueryReportFormsInformation,

  postServiceOrderQuerySalesCode,
} from '@/services';

import { enumToSelect } from '@/utils';
import {
  ProCard,

  ProForm,

  ProFormCheckbox,

  ProFormDigit,

  ProFormSelect,
  QueryFilter,
} from '@ant-design/pro-components';

import { Form, 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 getCurrentMonth = () => {
    const month = new Date().getMonth(); // Returns a 0-based month (0-11)
    return month + 1; // To make it 1-based (1-12)
  };
  const month = getCurrentMonth();

  const [selectedYear, setSelectedYear] = useState('2025');

  const [selectedMonth, setSelectedMonth] = useState(month);

  /**
   * 获取销售代码枚举，在复制和编辑的时候判断是否为旧的代码
   */
  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 [yearOptions] = useState([
    { value: '2025', label: '2025' },
    { value: '2024', label: '2024' },
    { value: '2023', label: '2023' },
  ]);

  const [monthOptions] = useState([
    { value: '0', label: '全部' },
    { value: '1', label: '1' },
    { value: '2', label: '2' },
    { value: '3', label: '3' },
    { value: '4', label: '4' },
    { value: '5', label: '5' },
    { value: '6', label: '6' },
    { value: '7', label: '7' },
    { value: '8', label: '8' },
    { value: '9', label: '9' },
    { value: '10', label: '10' },
    { value: '11', label: '11' },
    { value: '12', label: '12' },
  ]);

  /**
   * 加载页面数据
   */
  const loadData = async () => {

    if (selectedMonth === '0') {
      setStatisticsMethod('YEAR_STATISTICS');
    } else {
      setStatisticsMethod('MONTH_STATISTICS');
    }

    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.month = selectedMonth;
    body.year = selectedYear;
    const { data } = await postServiceOrderQueryReportFormsInformation({
      data: body,
    });

    if (data !== undefined) {
      setStatisticData(data);
    }

    setLoading(false);
  };

  const handleXValueClick = async (xValue, type) => {

    try {
      const [yearValue, monthValue] = xValue.split('-');

      if (type?.includes('年')) {
        const adjustedYearValue = (parseInt(yearValue, 10) - 1).toString();
        const adjustedMonthValue = monthValue.startsWith('0')
          ? monthValue.slice(1)
          : monthValue;
        // 更新年份和月份选项的选中值
        setSelectedYear(adjustedYearValue);
        setSelectedMonth(adjustedMonthValue);
      } else {
        // 更新年份和月份选项的选中值
        const adjustedMonthValue = monthValue.startsWith('0')
          ? monthValue.slice(1)
          : monthValue;
        setSelectedYear(yearValue);
        setSelectedMonth(adjustedMonthValue);
      }

    } catch (error) {
      console.error('Failed to fetch updated data:', error);
    }
  };

  useEffect(() => {
    loadData();

  }, [selectedMonth, selectedYear]);

  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={

            <div>
              <div>
                <ProForm.Group>
                  <ProFormSelect

                    name="selectedMonth"
                    key="selectedMonth"

                    width="100px"
                    // actionRef={mainTableRef}
                    // formRef={mainTableFormRef}

                    value={selectedMonth}

                    showSearch

                    placeholder="全部"

                    options={monthOptions}

                    onChange={(value) => {
                      const newValue = value === undefined ? '0' : value;
                      setSelectedMonth(newValue);
                    }}

                  />
                  <ProFormSelect

                    name="selectedYear"
                    key="selectedYear"

                    width="100px"
                    // actionRef={mainTableRef}
                    // formRef={mainTableFormRef}

                    value={selectedYear}

                    showSearch

                    placeholder="2025"

                    options={yearOptions}

                    onChange={(value) => {

                      const newValue = value === undefined ? '2025' : value;
                      setSelectedYear(newValue); // 更新选中值

                    }}

                  />
                </ProForm.Group>
              </div>
            </div>

          }
          bordered
        >
          <Spin spinning={loading}>

            <OrderDualAxes
              data={statisticData}

              statisticMethod={selectedMonth}
              onXValueClick={handleXValueClick}

            />

          </Spin>

        </ProCard>
      </Space>

    </div>

  );

};

export default OrderReportPage;