canrd-main / canrd-erp-front · Files

import { postServiceOrderQueryReportFormsInformation } from '@/services';
import { enumToSelect } from '@/utils';

import { getUserInfo } from '@/utils/user';

import { EllipsisOutlined } from '@ant-design/icons';

import {
  PageContainer,
  ProCard,
  ProFormSelect,
  QueryFilter,
} from '@ant-design/pro-components';
import { history } from '@umijs/max';
import {
  Avatar,
  Button,
  Dropdown,
  Flex,
  Form,
  Space,
  Spin,
  Tabs,
  TabsProps,
  Tag,
} from 'antd';
import { useEffect, useState } from 'react';
import {
  PRODUCT_BELONG_DEPARTMENT_OPTIONS,
  SALES_CODE_OPTIONS,
} from '../Order/constant';

import OrderDualAxes from './components/OrderDualAxes';
import OrderStatisticCard from './components/OrderStatisticCard';

import './index.less';

const userInfo = getUserInfo();

const OrderReportPage = () => {

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

    setStatisticsMethod(key);

  };

  /**
   * 加载页面数据
   */
  const loadData = async () => {
    setLoading(true);
    let body = {
      statisticsMethod: '',
      salesCode: form.getFieldValue('salesCode'),
      productBelongBusiness: form.getFieldValue('productBelongBusiness'),
      // 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();

  }, []);

  const items: TabsProps['items'] = [
    {
      key: 'MONTH_STATISTICS',
      label: '本月统计',
      children: '',
    },
    {
      key: 'YEAR_STATISTICS',
      label: '本年统计',
      children: '',
    },
  ];

  return (
    <PageContainer
      header={{
        title: '订单汇总',
        extra: [
          <Avatar key="0" style={{ verticalAlign: 'middle' }} size="large">
            {userInfo?.username}
          </Avatar>,
          <Tag key="nickName">{userInfo?.nickName}</Tag>,
          <Dropdown
            key="dropdown"
            trigger={['click']}
            menu={{
              items: [
                {
                  label: '退出登录',
                  key: '1',
                  onClick: () => {
                    localStorage.removeItem('token');
                    history.push('/login');
                  },
                },
                // {
                //   label: '修改密码',
                //   key: '2',
                // },
              ],
            }}
          >
            <Button key="4" style={{ padding: '0 8px' }}>
              <EllipsisOutlined />
            </Button>
          </Dropdown>,
        ],
      }}
    >
      <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"
            form={form}
            onFinish={async () => {
              loadData();
              return true;
            }}
          >
            <ProFormSelect
              name="salesCode"
              key="salesCode"
              showSearch
              label="销售代表"
              placeholder="请输入销售代表"
              options={SALES_CODE_OPTIONS}
            />
            <ProFormSelect
              key="productBelongBusiness"
              placeholder="请输入所属事业部"
              name="productBelongBusiness"
              label="所属事业部"
              options={enumToSelect(PRODUCT_BELONG_DEPARTMENT_OPTIONS)}
            />
            {/* <ProFormDateRangePicker
              key="dateRange"
              name="dateRange"
              label="时间"
            /> */}
          </QueryFilter>

        </ProCard>

        <ProCard
          id="order-dual-axes-card"
          title="统计图表"
          extra={
            <Flex>
              <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
            </Flex>
          }
          bordered
        >
          <Spin spinning={loading}>

            <OrderDualAxes
              data={statisticData}
              statisticMethod={statisticsMethod}
            />

          </Spin>

        </ProCard>
      </Space>
    </PageContainer>
  );

};

export default OrderReportPage;