canrd-main / canrd-erp-front · Files

import {

  // postServiceOrderQueryServiceOrder,

  postServiceOrderWarningOrderStatistics,

} from '@/services';

import { downloadFile } from '@/services/order';
import { getSalesCodeOptions } from '@/utils/order';
import { getUserInfo } from '@/utils/user';
import {
  ActionType,
  ProFormInstance,
  ProFormSelect,
} from '@ant-design/pro-components';
import { Badge, Button, Radio, message } from 'antd';
import { format } from 'date-fns';
import React, { useEffect, useRef, useState } from 'react';
import OrderList from '../OrderList/OrderList';
import './index.less';
// import { useParams } from '@umijs/max';

const OrderPage = () => {
  const [salesCodeOptions, setSalesCodeOptions] = useState([]);
  const [salesCodeSelect, setSalesCodeSelect] = useState();
  const userInfo = getUserInfo();

  const mainTableRef = useRef<ActionType>();
  const mainTableFormRef = useRef<ProFormInstance>();
  let [searchParams] = useState(Object); //表格的查询条件存储
  console.log(searchParams);
  const [messageApi] = message.useMessage();
  console.log(messageApi);
  const [activeTabKey, setActiveTabKey] = useState(1); // **新增状态**

  //选择天数1
  const options1 = [
    {

      label: '超过7天',
      value: 7,

    },

    {

      label: '超过10天',
      value: 10,

    },

  ];
  const options2 = [
    {

      label: '超过21天',
      value: 21,
    },
    {
      label: '超过40天',
      value: 40,
    },
  ];
  const options3 = [
    {

      label: '超过20天',
      value: 20,

    },
    {

      label: '超过45天',
      value: 45,

    },
  ];

  const options4 = [

    {
      label: '超过5天',
      value: 5,
    },
    {

      label: '超过15天',
      value: 15,

    },
  ];

  const options5 = [

    {
      label: '超过30天',
      value: 30,
    },
    {
      label: '超过75天',
      value: 75,
    },
    {
      label: '超过90天',
      value: 90,
    },
    {
      label: '超过120天',
      value: 120,

    },
  ];

  //选择天数
  const [calDate, setCalDate] = useState<string | null>(null);
  const [value1, setValue1] = useState(0);
  const radioOnChange1 = ({ target: { value } }) => {

    const currentDate = new Date();
    // 创建一个新的日期对象，并在当前日期的基础上加上 daysToAdd 天
    const newDate = new Date(currentDate);

    newDate.setDate(currentDate.getDate() - value);

    const formattedDate = format(newDate, 'yyyy-MM-dd HH:mm:ss');

    setCalDate(formattedDate);
    setValue1(value);

  };

  function setOriginTime(value) {
    const currentDate = new Date();
    // 创建一个新的日期对象，并在当前日期的基础上加上 daysToAdd 天
    const newDate = new Date(currentDate);
    newDate.setDate(currentDate.getDate() - value);
    const formattedDate = format(newDate, 'yyyy-MM-dd HH:mm:ss');
    return formattedDate;
  }

  const [invoiceWarningNum, setInvoiceWarningNum] = useState(0);

  const [invoiceCreateWarningNum, setInvoiceCreateWarningNum] = useState(0);

  const [invoiceRefundWarningNum, setInvoiceRefundWarningNum] = useState(0);

  const [waitConfirmPayment, setWaitConfirmPayment] = useState(0);
  const [waitFeedback, setWaitFeedback] = useState(0);

  const [staticSalesCode, setStaticSalesCode] = useState(userInfo.username);

  const [salesCodePermission, setSalesCodePermission] = useState(false);

  //修改预警数请求salesCode
  const changeSalesCode = () => {
    if (salesCodeSelect === undefined) {

      setStaticSalesCode(userInfo.username);

    } else {
      setStaticSalesCode(salesCodeSelect);
    }
  };

  //选择栏权限
  const permission = () => {
    const { roles } = userInfo;
    const boolean =
      roles?.includes('SALES_MANAGER') || roles?.includes('ADMIN');
    if (boolean) {
      setSalesCodePermission(true);
    }
  };

  async function getInvoiceWarningNum() {

    changeSalesCode();
    const res = await postServiceOrderWarningOrderStatistics({
      data: {
        salesCode: staticSalesCode,

        waitConfirmReiceptStatusDateTimeLe: setOriginTime(options1[0].value),

        waitInvoicingStatusDateTimeLe: setOriginTime(options2[0].value),

        waitFeedbackStatusDateTimeLe: setOriginTime(options3[0].value),

        waitConfirmInvoiceStatusDateTimeLe: setOriginTime(options4[0].value),

        waitConfirmPaymentStatusDateTimeLe: setOriginTime(options5[0].value),

      },
    });

    setInvoiceWarningNum(res.data.waitConfirmInvoice);

    setInvoiceCreateWarningNum(res.data.waitInvoicing);

    setInvoiceRefundWarningNum(res.data.waitConfirmReceipt);

    setWaitConfirmPayment(res.data.waitConfirmPayment);
    setWaitFeedback(res.data.waitFeedback);

  }
  useEffect(() => {
    //预警订单数
    getInvoiceWarningNum();

    permission();

  }, [salesCodeSelect]);

  //biaojiup
  // 监听 calDate 变化，触发请求
  useEffect(() => {

    mainTableRef.current?.reload();

  }, [calDate]);

  useEffect(() => {

    if (
      activeTabKey === 1 ||
      activeTabKey === 2 ||
      activeTabKey === 3 ||

      activeTabKey === 4 ||
      activeTabKey === 5

    ) {
      setValue1(0); // 清空 value1

    }

    mainTableRef.current?.reload(); // **修改位置：在选择第二个标签时请求request2**

  }, [activeTabKey]);

  // 修改位置：监听 value1 的变化

  // useEffect(() => {
  //   // if (value1 === 0) {
  //   //   // 这里执行你希望在 value1 为 0 时的逻辑
  //   //   mainTableRef.current?.reload(); // 重新请求数据
  //   // }

  // }, [value1]); // 添加了 value1 作为依赖

  useEffect(() => {

    // 根据 activeTabKey 设置 value1 为当前选项组的第一个 value
    let options;
    switch (activeTabKey) {
      case 1:
        options = options1;
        break;
      case 2:
        options = options2;
        break;
      case 3:
        options = options3;
        break;
      case 4:
        options = options4;
        break;

      case 5:
        options = options5;
        break;

      default:
        options = []; // 如果没有匹配的选项组，默认为空

    }

    const firstOptionValue = options[0]?.value || 0; // 获取第一个值
    setValue1(firstOptionValue);
    const currentDate = new Date();
    // 创建一个新的日期对象，并在当前日期的基础上加上 daysToAdd 天
    const newDate = new Date(currentDate);
    newDate.setDate(currentDate.getDate() - firstOptionValue);
    const formattedDate = format(newDate, 'yyyy-MM-dd HH:mm:ss');
    setCalDate(formattedDate);
  }, [activeTabKey]);

  //biaojidown2
  //取消单选，将时间设为null
  const handleSetNull = () => {

    setCalDate(null); // 这应该会触发 useEffect

  };

  const selectSalesCode = (value) => {
    setSalesCodeSelect(value); // 这应该会触发 useEffect
  };

  const warningOptions = [
    {
      value: 1,
      label: (
        <span>
          确认收货预警

          <Badge count={invoiceRefundWarningNum} style={{ marginLeft: 8 }} />

        </span>
      ),
    },

    {

      value: 2,

      label: (
        <span>

          开票预警
          <Badge count={invoiceCreateWarningNum} style={{ marginLeft: 8 }} />
        </span>
      ),
    },
    {
      value: 3,
      label: (
        <span>

          回访登记预警
          <Badge count={waitFeedback} style={{ marginLeft: 8 }} />
        </span>
      ),
    },
    {

      value: 4,

      label: (
        <span>
          确认发票预警

          <Badge count={invoiceWarningNum} style={{ marginLeft: 8 }} />
        </span>
      ),

    },
    {

      value: 5,

      label: (
        <span>
          订单回款预警

          <Badge count={waitConfirmPayment} style={{ marginLeft: 8 }} />

        </span>
      ),
    },
  ];
  return (
    <div className="order-page-container">
      <div id="resizeDiv"></div>
      <div key={'activeTabKey'}>
        <Radio.Group
          options={warningOptions}
          onChange={(e) => {
            setActiveTabKey(e.target.value);
            mainTableRef.current?.reload(); // 重新请求数据
          }}
          value={activeTabKey}
          optionType="button"
        />
      </div>
      <div style={{ height: '25px' }}></div>

      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          width: '100%',
        }}

      >

        {/* 左边的 Radio.Group */}
        <span style={{ flex: '1' }}>
          {' '}
          {/* 修改：设置 flex 属性 */}
          <Radio.Group value={value1} onChange={radioOnChange1}>
            {(activeTabKey === 1
              ? options1
              : activeTabKey === 2
                ? options2
                : activeTabKey === 3
                  ? options3

                  : activeTabKey === 4
                    ? options4
                    : options5

            ).map((option) => (
              <Radio
                key={option.value}
                value={option.value}
                onClick={(e) => {
                  radioOnChange1(
                    e as unknown as React.ChangeEvent<HTMLInputElement>,
                  );
                  handleSetNull();
                }}
              >
                {option.label}
              </Radio>
            ))}
          </Radio.Group>
        </span>

        {/* 右边的 ProFormSelect */}
        <span style={{ width: '300px', marginLeft: 'auto', marginTop: '30px' }}>
          {' '}
          {/* 修改：设置 width 和 marginLeft */}

          {salesCodePermission && (
            <ProFormSelect
              name="salesCode"
              key="salesCode"
              width="200px"
              actionRef={mainTableRef}
              formRef={mainTableFormRef}

              initialValue={userInfo.username}

              showSearch
              label="销售代表"
              placeholder="请输入销售代表"
              options={salesCodeOptions}
              onChange={(_, option) => {
                if (option === undefined) {

                  selectSalesCode(userInfo.username);

                }
                // if (option.value !== undefined) {
                //   selectSalesCode(option.value);
                // }
                if (option && option.value !== undefined) {
                  selectSalesCode(option.value);
                }
                mainTableRef.current?.reload();
              }}
              request={async () => {
                let options = await getSalesCodeOptions();
                setSalesCodeOptions(options);
                return options;
              }}
            />
          )}

        </span>

        {/* 右边的 ProFormSelect */}
        <span style={{ width: '100px', marginLeft: '' }}>
          {' '}
          <Button
            key="out"
            onClick={() => {
              let initialParams = {};
              initialParams.isDeleteQueryOrder = false;
              initialParams.flag = 50;
              initialParams.current = 1;
              initialParams.pageSize = 10;
              initialParams.condition = 0;
              initialParams.sorted = false;
              // 根据activeTabKey动态扩展参数
              if (activeTabKey === 1) {
                initialParams = {
                  ...initialParams,
                  orderStatus: 'SHIPPED',
                  statusDatetimeLe: calDate,
                };
              } else if (activeTabKey === 2) {
                initialParams = {
                  ...initialParams,
                  warningStatus: 'invoicingWarning',
                  confirmReceiptDatetimeLe: calDate,
                };
              } else if (activeTabKey === 3) {
                initialParams = {
                  ...initialParams,
                  warningStatus: 'waitFeedbackWarning',
                  confirmReceiptDatetimeLe: calDate,
                };
              } else if (activeTabKey === 4) {
                initialParams = {
                  ...initialParams,
                  warningStatus: 'invoiceConfirmWarning',
                  invoicingEndTime: calDate,
                };
              } else if (activeTabKey === 5) {
                initialParams = {
                  ...initialParams,
                  warningStatus: 'paymentReceiptStatusWarning',
                  paymentNotReceipt: true,
                  applyTimeLe: calDate,
                };
              }
              messageApi.open({
                type: 'loading',
                content: '导出中...',
                duration: 0,
              });
              downloadFile(
                '/api/service/order/export',
                '预警订单.xlsx',
                'POST',
                initialParams,
                () => {
                  messageApi.destroy();
                },
              );
            }}
          >
            导出
          </Button>
        </span>

      </div>

      <div style={{ height: '15px' }}></div>

      {/* <OrderList
        params={{
          ...(salesCodePermission && {
            salesCode: salesCodeSelect !==
              undefined && salesCodeSelect !== null ? salesCodeSelect : userInfo.username
          }),
          ...(activeTabKey === 1 && {
            orderStatus: 'SHIPPED',
            warningStatus: 'waitConfirmReicept',
            statusDatetimeLe: calDate,
          }),
          ...(activeTabKey === 2 && {
            warningStatus: 'waitFeedbackWarning',
            confirmReceiptDatetimeLe: calDate,
          }),
          ...(activeTabKey === 3 && {
            warningStatus: 'invoiceConfirmWarning',
            invoicingEndTime: calDate,
          }),
          ...(activeTabKey === 4 && {
            warningStatus: 'paymentReceiptStatusWarning',
            paymentNotReceipt: true,
            applyTimeLe: calDate,
          }),

        }}

        searchShow={false}
        toolbarShow={false} /> */}
      <OrderList
        paramsNew={(function () {
          // 初始化参数
          let initialParams = {};
          initialParams.isDeleteQueryOrderNow = false;

          initialParams.salesCode = userInfo.username;

          if (salesCodePermission) {
            if (salesCodeSelect !== undefined && salesCodeSelect !== null) {
              initialParams.salesCode = salesCodeSelect;
            } else {
              initialParams.salesCode = userInfo.username;

            }
          }

          // 根据activeTabKey动态扩展参数

          if (activeTabKey === 1) {

            initialParams = {
              ...initialParams,
              orderStatus: 'SHIPPED',
              warningStatus: 'waitConfirmReicept',

              statusDatetimeLe: calDate,

            };
          } else if (activeTabKey === 2) {

            initialParams = {
              ...initialParams,
              warningStatus: 'invoicingWarning',

              confirmReceiptDatetimeLe: calDate,

            };
          } else if (activeTabKey === 3) {

            initialParams = {
              ...initialParams,
              warningStatus: 'waitFeedbackWarning',
              confirmReceiptDatetimeLe: calDate,

            };
          } else if (activeTabKey === 4) {

            initialParams = {
              ...initialParams,
              warningStatus: 'invoiceConfirmWarning',
              invoicingEndTime: calDate,
            };
          } else if (activeTabKey === 5) {
            initialParams = {
              ...initialParams,
              warningStatus: 'paymentReceiptStatusWarning',
              paymentNotReceipt: true,

              applyTimeLe: calDate,

            };
          }

          // 返回完整的参数对象
          return initialParams;
        })()}
        searchShow={false}
        toolbarShow={false}

      />

    </div>

  );
};

export default OrderPage;