canrd-main / canrd-erp-front · Files

import {
  postServiceOrderDeliverStatistics,
  postServiceOrderQueryLockOrders,
  postServiceOrderWarningOrderStatistics,
} from '@/services';
import { getUserInfo } from '@/utils/user';
import { useModel } from '@umijs/max';
import { Button, Card, Col, Modal, Row, message } from 'antd';
import { useEffect, useState } from 'react';
import OrderList from '../OrderList/OrderList';
import './index.less';
// import { useNavigate } from 'react-router-dom';
import { excelExport } from '@/services/exportRequest';
import { ProCard, ProTable } from '@ant-design/pro-components';
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, deliveryOpenCount, setDeliveryOpenCount } =
    useModel('count');

  const [pendingDelivery, setPendingDelivery] = useState(0);
  const [pendingCompletion, setPendingCompletion] = useState(0);
  const [deliveryOpen, setDeliveryOpen] = useState(false);
  const [messageApi, contextHolder] = message.useMessage();
  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);
  }

  async function getOrderDeliverStatistics() {
    const res = await postServiceOrderDeliverStatistics();
    if (
      (res.data.pendingDelivery !== 0 || res.data.pendingCompletion !== 0) &&
      deliveryOpenCount !== 'true'
    ) {
      setDeliveryOpenCount('true');
      setDeliveryOpen(true);
    }
    setPendingCompletion(res.data.pendingCompletion);
    setPendingDelivery(res.data.pendingDelivery);
  }

  useEffect(() => {
    //预警订单数
    getInvoiceWarningNum();
    getOrderDeliverStatistics();
  }, []);
  // 隐藏弹窗
  const navigateToWarning = () => {
    setOpen(false);
    setDeliveryOpen(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');
  };
  const navigateToOrderList = () => {
    setOpen(false);
    setDeliveryOpen(false);
    // history.push('/order/OrderWarning');
    // window.location.replace = '/order/OrderWarning';
    // navigate('/order/OrderWarning');
    history.push('/order/order');
    // 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_MANAGER' && (
        <Modal
          title="订单预警提醒"
          open={open}
          width={1200}
          closable={false}
          footer={[
            <Button
              key="confirm"
              size="large"
              type="primary"
              onClick={navigateToWarning}
            >
              去处理
            </Button>,
            roleCode === 'ADMIN' && (
              <Button key="cancel" size="large" onClick={() => setOpen(false)}>
                取消
              </Button>
            ),
          ]}
        >
          <ProCard
            tabs={{
              type: 'card',
            }}
          >
            <ProCard.TabPane key="tab1" tab="订单预警">
              <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>
            </ProCard.TabPane>
            <ProCard.TabPane key="tab2" tab="锁单提醒">
              <ProTable
                columns={[
                  {
                    dataIndex: 'index',
                    valueType: 'indexBorder',
                    width: 48,
                  },
                  {
                    title: '订单号',
                    dataIndex: 'subId',
                    key: 'subId',
                    hideInSearch: true,
                  },
                  {
                    title: '锁单时间',
                    dataIndex: 'limitDatetime',
                    key: 'limitDatetime',
                    hideInSearch: true,
                  },
                  {
                    title: '锁单原因',
                    dataIndex: 'limitReason',
                    key: 'limitReason',
                    hideInSearch: true,
                  },
                  {
                    title: '锁单原因',
                    width: 120,
                    dataIndex: 'warningStatus',
                    valueType: 'select',
                    hideInTable: true,
                    valueEnum: {
                      waitConfirmReicept: {
                        text: '待确认收货',
                        status: 'waitConfirmReicept',
                      },
                      invoicingWarning: {
                        text: '待开票',
                        status: 'invoicingWarning',
                      },
                      waitFeedbackWarning: {
                        text: '待回访登记',
                        status: 'waitFeedbackWarning',
                      },
                      invoiceConfirmWarning: {
                        text: '待确认发票',
                        status: 'invoiceConfirmWarning',
                      },
                      paymentReceiptStatusWarning: {
                        text: '待回款',
                        status: 'paymentReceiptStatusWarning',
                      },
                    },
                  },
                  {
                    title: '锁单时间',
                    dataIndex: 'limitDatetime',
                    valueType: 'dateTimeRange',
                    search: {
                      transform: (value: any) => ({
                        limitOrderDatetimeGe: value[0],
                        limitOrderDatetimeLe: value[1],
                      }),
                    },
                    hideInTable: true,
                  },
                ]}
                request={async (params) => {
                  const res = await postServiceOrderQueryLockOrders({
                    data: params,
                  });
                  return res.data;
                }}
                rowKey="index"
                search={{
                  labelWidth: 'auto',
                  defaultCollapsed: false,
                  optionRender: (searchConfig, formProps, dom) => [
                    ...dom,
                    <Button
                      key="out"
                      onClick={() => {
                        const searchParams =
                          searchConfig?.form?.getFieldsValue();
                        const values = {
                          ...searchConfig?.form?.getFieldsValue(),
                          limitOrderDatetimeGe: searchParams?.limitDatetime
                            ? searchParams.limitDatetime[0]
                            : null,
                          limitOrderDatetimeLe: searchParams?.limitDatetime
                            ? searchParams.limitDatetime[1]
                            : null,
                        };
                        messageApi.open({
                          type: 'loading',
                          content: '正在导出文件...',
                        });
                        excelExport(
                          '/api/service/order/exportLockOrders',
                          {
                            ...values,
                          },
                          () => {
                            messageApi.destroy();
                          },
                          '锁单',
                        );
                      }}
                    >
                      导出
                    </Button>,
                  ],
                }}
                pagination={{ pageSize: 10 }}
              />
            </ProCard.TabPane>
          </ProCard>
        </Modal>
      )}
      {roleCode === 'WAREHOUSE_KEEPER' && (
        <Modal
          title="订单交期提醒"
          open={deliveryOpen}
          width={600}
          closable={false}
          footer={[
            <Button
              key="confirm"
              size="large"
              type="primary"
              onClick={navigateToOrderList}
            >
              去处理
            </Button>,
          ]}
        >
          <Row
            gutter={4} // 调整间距，例如改为 8
            justify="space-between" // Aligns Cols to the start and end
            align="middle" // Vertically center contents
          >
            {/* 新增卡片1: 待确认收货订单 */}
            <Col span={8}>
              {' '}
              {/* 修改位置：将 span 改为 6，以保证一行四个卡片 */}
              <div
                style={{
                  display: 'flex',
                  justifyContent: 'center',
                  marginTop: '20px',
                }}
              >
                <Card
                  bordered={true}
                  style={{
                    backgroundColor: '#f0f0f0', // 背景颜色
                    width: '250px', // 卡片宽度
                    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',
                      }}
                    >
                      {pendingDelivery}
                    </div>
                    待转交提醒
                  </div>
                </Card>
              </div>
            </Col>

            {/* 新增卡片1: 待确认收货订单 */}
            <Col span={8}>
              {' '}
              {/* 修改位置：将 span 改为 6，以保证一行四个卡片 */}
              <div
                style={{
                  display: 'flex',
                  justifyContent: 'center',
                  marginTop: '20px',
                }}
              >
                <Card
                  bordered={true}
                  style={{
                    backgroundColor: '#f0f0f0', // 背景颜色
                    width: '250px', // 卡片宽度
                    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',
                      }}
                    >
                      {pendingCompletion}
                    </div>
                    交期延期提醒
                  </div>
                </Card>
              </div>
            </Col>
          </Row>
        </Modal>
      )}
      {contextHolder}
      <OrderList paramsNew={{}} searchShow={true} toolbarShow={true} />
    </div>
  );
};

export default OrderPage;