canrd-main / canrd-erp-front · Files

import { postServiceOrderWarningOrderStatistics } from '@/services';
import { getUserInfo } from '@/utils/user';
import { useModel } from '@umijs/max';
import { Button, Card, Col, Modal, Row } from 'antd';
import { useEffect, useState } from 'react';
import OrderList from '../OrderList/OrderList';
import './index.less';
// import { useNavigate } from 'react-router-dom';
import { history } from '@umijs/max';
// import { format } from 'fecha';

const OrderPage = () => {
  const userInfo = getUserInfo();
  const roleCode = userInfo?.roles[0];
  function setOriginTime(value) {
    const currentDate = new Date();

    // 创建一个新的日期对象，并在当前日期的基础上加上 daysToAdd 天
    const newDate = new Date(currentDate);
    newDate.setDate(currentDate.getDate() - value);
    // 检查日期是否有效，并格式化输出
    function formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需加1
      const day = String(date.getDate()).padStart(2, '0'); // 确保是两位数
      return `${year}-${month}-${day} ${date.toTimeString().split(' ')[0]}`; // 获取时间部分
    }
    const formattedDate = formatDate(newDate);
    // const formattedDate = format(newDate, 'YYYY-MM-dd HH:mm:ss');
    return formattedDate;
  }
  const [invoiceWarningNum, setInvoiceWarningNum] = useState(0);
  const [invoiceRefundWarningNum, setInvoiceRefundWarningNum] = useState(0);
  const [waitConfirmPayment, setWaitConfirmPayment] = useState(0);
  const [waitFeedback, setWaitFeedback] = useState(0);
  const [invoiceCreateWarningNum, setInvoiceCreateWarningNum] = useState(0);
  const [open, setOpen] = useState(false);
  const { openCount, setOpenCount } = useModel('count');

  async function getInvoiceWarningNum() {
    const res = await postServiceOrderWarningOrderStatistics({
      data: {
        salesCode: userInfo.username,
        waitConfirmReiceptStatusDateTimeLe: setOriginTime(7),
        waitConfirmInvoiceStatusDateTimeLe: setOriginTime(5),
        waitFeedbackStatusDateTimeLe: setOriginTime(20),
        waitInvoicingStatusDateTimeLe: setOriginTime(21),
        waitConfirmPaymentStatusDateTimeLe: setOriginTime(30),
      },
    });
    if (
      (res.data.waitConfirmInvoice !== 0 ||
        res.data.waitConfirmReceipt !== 0 ||
        res.data.waitConfirmPayment !== 0 ||
        res.data.waitFeedback !== 0 ||
        res.data.waitInvoicing !== 0) &&
      openCount !== 'true'
    ) {
      setOpenCount('true');
      setOpen(true);
    }
    setInvoiceWarningNum(res.data.waitConfirmInvoice);
    setInvoiceRefundWarningNum(res.data.waitConfirmReceipt);
    setWaitConfirmPayment(res.data.waitConfirmPayment);
    setWaitFeedback(res.data.waitFeedback);
    setInvoiceCreateWarningNum(res.data.waitInvoicing);
  }

  useEffect(() => {
    //预警订单数
    getInvoiceWarningNum();
  }, []);
  // 隐藏弹窗
  const navigateToWarning = () => {
    setOpen(false);
    // history.push('/order/OrderWarning');
    // window.location.replace = '/order/OrderWarning';
    // navigate('/order/OrderWarning');
    history.push('/order/OrderWarning');
    // location.href = '/order/OrderWarning';
    // history.pushState(null, '', '/order/OrderWarning');
  };
  return (
    <div className="order-page-container">
      <div id="resizeDiv"></div>
      <div id="resizeDiv"></div>
      {roleCode === 'SALES_REPRESENTATIVE' && (
        <Modal
          title="订单预警提醒"
          open={open}
          width={1200}
          closable={false}
          footer={[
            <Button
              key="confirm"
              size="large"
              type="primary"
              onClick={navigateToWarning}
            >
              去处理
            </Button>,
          ]}
        >
          <Row
            gutter={16}
            justify="space-between" // Aligns Cols to the start and end
            align="middle" // Vertically center contents
          >
            {/* 新增卡片1: 待确认收货订单 */}
            <Col span={4}>
              {' '}
              {/* 修改位置：将 span 改为 6，以保证一行四个卡片 */}
              <div
                style={{
                  display: 'flex',
                  justifyContent: 'center',
                  marginTop: '20px',
                }}
              >
                <Card
                  bordered={true}
                  style={{
                    backgroundColor: '#f0f0f0', // 背景颜色
                    width: '200px', // 卡片宽度
                    height: '200px', // 卡片高度
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}
                >
                  <div
                    style={{
                      fontWeight: 'bold', // 字体加粗
                      color: 'black', // 字体颜色
                      fontSize: '18px', // 字体大小
                    }}
                  >
                    <div
                      style={{
                        fontWeight: 'bold', // 字体加粗
                        color: 'black', // 字体颜色
                        fontSize: '40px', // 字体大小
                        justifyContent: 'center',
                        display: 'flex',
                        alignItems: 'center',
                        marginBottom: '20px',
                      }}
                    >
                      {invoiceRefundWarningNum}
                    </div>
                    待确认收货订单
                  </div>
                </Card>
              </div>
            </Col>

            {/* 新增卡片1: 待确认收货订单 */}
            <Col span={4}>
              {' '}
              {/* 修改位置：将 span 改为 6，以保证一行四个卡片 */}
              <div
                style={{
                  display: 'flex',
                  justifyContent: 'center',
                  marginTop: '20px',
                }}
              >
                <Card
                  bordered={true}
                  style={{
                    backgroundColor: '#f0f0f0', // 背景颜色
                    width: '200px', // 卡片宽度
                    height: '200px', // 卡片高度
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}
                >
                  <div
                    style={{
                      fontWeight: 'bold', // 字体加粗
                      color: 'black', // 字体颜色
                      fontSize: '18px', // 字体大小
                    }}
                  >
                    <div
                      style={{
                        fontWeight: 'bold', // 字体加粗
                        color: 'black', // 字体颜色
                        fontSize: '40px', // 字体大小
                        justifyContent: 'center',
                        display: 'flex',
                        alignItems: 'center',
                        marginBottom: '20px',
                      }}
                    >
                      {invoiceCreateWarningNum}
                    </div>
                    待开票订单
                  </div>
                </Card>
              </div>
            </Col>

            {/* 新增卡片2: 待回访登记订单 */}
            <Col span={4}>
              {' '}
              {/* 修改位置：将 span 改为 6，以保证一行四个卡片 */}
              <div
                style={{
                  display: 'flex',
                  justifyContent: 'center',
                  marginTop: '20px',
                }}
              >
                <Card
                  bordered={true}
                  style={{
                    backgroundColor: '#f0f0f0', // 背景颜色
                    width: '200px', // 卡片宽度
                    height: '200px', // 卡片高度
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}
                >
                  <div
                    style={{
                      fontWeight: 'bold', // 字体加粗
                      color: 'black', // 字体颜色
                      fontSize: '18px', // 字体大小
                    }}
                  >
                    <div
                      style={{
                        fontWeight: 'bold', // 字体加粗
                        color: 'black', // 字体颜色
                        fontSize: '40px', // 字体大小
                        justifyContent: 'center',
                        display: 'flex',
                        alignItems: 'center',
                        marginBottom: '20px',
                      }}
                    >
                      {waitFeedback}
                    </div>
                    待回访登记订单
                  </div>
                </Card>
              </div>
            </Col>

            {/* 现有卡片: 发票待确认订单 */}
            <Col span={4}>
              {' '}
              {/* 修改位置：将 span 改为 6，以保证一行四个卡片 */}
              <div
                style={{
                  display: 'flex',
                  justifyContent: 'center',
                  marginTop: '20px',
                }}
              >
                <Card
                  bordered={true}
                  style={{
                    backgroundColor: '#f0f0f0', // 背景颜色
                    width: '200px', // 卡片宽度
                    height: '200px', // 卡片高度
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}
                >
                  <div
                    style={{
                      fontWeight: 'bold', // 字体加粗
                      color: 'black', // 字体颜色
                      fontSize: '18px', // 字体大小
                    }}
                  >
                    <div
                      style={{
                        fontWeight: 'bold', // 字体加粗
                        color: 'black', // 字体颜色
                        fontSize: '40px', // 字体大小
                        justifyContent: 'center',
                        display: 'flex',
                        alignItems: 'center',
                        marginBottom: '20px',
                      }}
                    >
                      {invoiceWarningNum}
                    </div>
                    待确认发票订单
                  </div>
                </Card>
              </div>
            </Col>

            {/* 现有卡片: 回款待确认订单 */}
            <Col span={4}>
              {' '}
              {/* 修改位置：将 span 改为 6，以保证一行四个卡片 */}
              <div
                style={{
                  display: 'flex',
                  justifyContent: 'center',
                  marginTop: '20px',
                }}
              >
                <Card
                  bordered={true}
                  style={{
                    backgroundColor: '#f0f0f0', // 背景颜色
                    width: '200px', // 卡片宽度
                    height: '200px', // 卡片高度
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}
                >
                  <div
                    style={{
                      fontWeight: 'bold', // 字体加粗
                      color: 'black', // 字体颜色
                      fontSize: '18px', // 字体大小
                    }}
                  >
                    <div
                      style={{
                        fontWeight: 'bold', // 字体加粗
                        color: 'black', // 字体颜色
                        fontSize: '40px', // 字体大小
                        justifyContent: 'center',
                        display: 'flex',
                        alignItems: 'center',
                        marginBottom: '20px',
                      }}
                    >
                      {waitConfirmPayment}
                    </div>
                    待回款订单
                  </div>
                </Card>
              </div>
            </Col>
          </Row>

          <div>
            <p
              style={{
                color: 'red',
                paddingLeft: '20px',
                paddingRight: '20px',
                marginTop: '10px',
              }}
            >
              预警说明：
            </p>
            <div
              style={{
                marginLeft: '20px',
                marginRight: '20px',
                marginBottom: '20px',
              }}
            >
              <span style={{ color: 'red' }}>确认收货预警：</span>
              <span>
                从发货之日起计算，国内超过7天（海外30天）未【确认收货】，将进行确认收货预警提醒，超过10天（海外60天）未确认收货将锁单，并且每次登录都会提醒
              </span>
            </div>
            <div
              style={{
                marginLeft: '20px',
                marginRight: '20px',
                marginBottom: '20px',
              }}
            >
              <span style={{ color: 'red' }}>开票预警：</span>
              <span>
                需要开票的订单从确认收货后开始计算，超过21天未申请开票的订单将会在每日登录时进行预警提醒；超过40天未申请开票将预警并锁单。
              </span>
            </div>
            <div
              style={{
                marginLeft: '20px',
                marginRight: '20px',
                marginBottom: '20px',
              }}
            >
              <span style={{ color: 'red' }}>回访登记预警：</span>
              <span>
                从【确认收货】之日起计算，国内超过20天（海外30天）未【回访登记】，将进行回访登记预警提醒，超过45天（海外60天）未回访登记将锁单，并且每次登录都会提醒
              </span>
            </div>
            <div
              style={{
                marginLeft: '20px',
                marginRight: '20px',
                marginBottom: '20px',
              }}
            >
              <span style={{ color: 'red' }}>确认发票预警：</span>
              <span>
                从发票开出之日起，超过5天未和客户确认发票（不开票的订单除外）的订单将会进行第一次提醒；超过15天未和客户确认发票（不开票的订单除外）的订单将会每天进行一次提醒，并限制下单功能
              </span>
            </div>
            <div
              style={{
                marginLeft: '20px',
                marginRight: '20px',
                marginBottom: '20px',
              }}
            >
              <span style={{ color: 'red' }}>回款预警：</span>
              <span>
                从【发票确认】之日起，超过30天未确认回款的订单将会每周提醒，超过90天未确认回款的订单将会每天进行一次提醒，并限制下单功能
              </span>
            </div>
          </div>
        </Modal>
      )}

      <OrderList paramsNew={{}} searchShow={true} toolbarShow={true} />
    </div>
  );
};

export default OrderPage;