canrd-main / canrd-erp-front · Files

import ButtonConfirm from '@/components/ButtomConfirm';
import { INVOICE_COLUMNS, INVOICE_STATUS } from '@/pages/Invoice/constant';
import {
  postServiceInvoiceDeleteInvoice,
  postServiceInvoiceQueryInvoice,
} from '@/services';
import { enumValueToLabel, formatDateTime } from '@/utils';
import { formatDate } from '@/utils/time';
import { getUserInfo } from '@/utils/user';
import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons';
import {
  ActionType,
  PageContainer,
  ProTable,
} from '@ant-design/pro-components';
import { Avatar, Button, Dropdown, Tabs, Tag, message } from 'antd';
import { useRef, useState } from 'react';
import { INVOCING_STATUS, PAYEE_OPTIONS } from '../Order/constant';
import BankImportModal from './components/BankImportModal';
import './index.less';
const InvoicePage = () => {
  const invoiceActionRef = useRef<ActionType>();
  const bankActionRef = useRef<ActionType>();
  const [bankImportModalVisible, setBankImportModalVisible] = useState(false);

  const userInfo = getUserInfo();

  const BreakWordDiv = ({ text = '暂无内容' }) => {
    return (
      <div
        title={text}
        className="overflow-hidden whitespace-no-wrap overflow-ellipsis whitespace-nowrap"
      >
        {text}
      </div>
    );
  };

  const getTableCellText = (target: any) => {
    if (!target) {
      return '';
    }

    if (target.props) {
      return target.props.text;
    }

    return target;
  };

  /**
   * 加载发票列表表格的各个列格式
   */
  const invoicecColumnsInit = () => {
    let columns = INVOICE_COLUMNS.map((item) => {
      let newItem = { ...item };
      let dataIndex = item.dataIndex;
      let dataType = item.valueType;

      newItem.render = (text, record) => {
        let textValue = record[dataIndex];

        if (dataType === 'date') {
          textValue = formatDate(textValue);
        }

        if (dataType === 'dateTime') {
          textValue = formatDateTime(textValue);
        }

        if (dataType === 'money') {
          textValue = '￥' + textValue;
        }

        switch (dataIndex) {
          case 'invoiceStatus':
            return (
              <BreakWordDiv
                text={enumValueToLabel(
                  getTableCellText(textValue),
                  INVOCING_STATUS,
                )}
              />
            );

          case 'status':
            return (
              <BreakWordDiv
                text={enumValueToLabel(
                  getTableCellText(textValue),
                  INVOICE_STATUS,
                )}
              />
            );

          case 'payee':
            return (
              <BreakWordDiv
                text={enumValueToLabel(
                  getTableCellText(textValue),
                  PAYEE_OPTIONS,
                )}
              />
            );

          default:
            return <BreakWordDiv text={getTableCellText(textValue)} />;
        }
      };

      return newItem;
    });

    columns.push({
      title: '操作',
      valueType: 'option',
      key: 'option',
      fixed: 'right',
      width: 120,
      render: (text, record, _, action) => [
        <a
          key="editable"
          onClick={() => {
            action?.startEditable?.(record.id);
          }}
        >
          核销
        </a>,
        <a
          href={record.url}
          target="_blank"
          rel="noopener noreferrer"
          key="view"
        >
          查看
        </a>,
        <ButtonConfirm
          key="delete"
          className="p-0"
          title="确认删除？"
          text="删除"
          onConfirm={async () => {
            let res = await postServiceInvoiceDeleteInvoice({
              data: { invoiceId: record.id },
            });
            if (res) {
              message.success(res.message);
            }
          }}
        />,
      ],
    });

    return columns;
  };

  /**
   * 发票表
   * @param param0
   * @returns
   */
  const InvoiceTable = ({ actionRef = undefined }) => {
    return (
      <ProTable
        columns={invoicecColumnsInit()}
        actionRef={actionRef}
        cardBordered
        pagination={{
          pageSize: 10,
        }}
        request={async (params) => {
          const res = await postServiceInvoiceQueryInvoice({
            data: { ...params },
          });
          if (res) {
            return {
              data: res?.data?.data || [],
              total: res?.data?.total || 0,
            };
          }
        }}
        columnsState={{
          persistenceKey: 'pro-table-singe-demos',
          persistenceType: 'localStorage',
          defaultValue: {
            option: { fixed: 'right', disable: true },
          },
          onChange(value) {
            console.log('value: ', value);
          },
        }}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        options={{
          setting: {
            listsHeight: 400,
          },
        }}
        form={{
          // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
          syncToUrl: (values, type) => {
            if (type === 'get') {
              return {
                ...values,
                created_at: [values.startTime, values.endTime],
              };
            }
            return values;
          },
        }}
        dateFormatter="string"
        headerTitle="发票列表"
        scroll={{ x: 1400, y: 360 }}
      />
    );
  };

  /**
   * 银行流水表
   * @param param0
   * @returns
   */
  const BankTable = ({ actionRef = undefined }) => {
    return (
      <ProTable
        columns={invoicecColumnsInit()}
        actionRef={actionRef}
        cardBordered
        pagination={{
          pageSize: 10,
        }}
        request={async (params) => {
          const res = await postServiceInvoiceQueryInvoice({
            data: { ...params },
          });
          if (res) {
            return {
              data: res?.data?.data || [],
              total: res?.data?.total || 0,
            };
          }
        }}
        columnsState={{
          persistenceKey: 'pro-table-singe-demos',
          persistenceType: 'localStorage',
          defaultValue: {
            option: { fixed: 'right', disable: true },
          },
          onChange(value) {
            console.log('value: ', value);
          },
        }}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        options={{
          setting: {
            listsHeight: 400,
          },
        }}
        form={{
          // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
          syncToUrl: (values, type) => {
            if (type === 'get') {
              return {
                ...values,
                created_at: [values.startTime, values.endTime],
              };
            }
            return values;
          },
        }}
        dateFormatter="string"
        headerTitle="银行流水列表"
        scroll={{ x: 1400, y: 360 }}
        toolBarRender={() => [
          <Button
            key="button"
            icon={<PlusOutlined />}
            onClick={() => {
              setBankImportModalVisible(true);
            }}
            type="primary"
          >
            导入
          </Button>,
        ]}
      />
    );
  };

  const tabsItems = [
    {
      key: 1,
      label: '发票管理',
      children: <InvoiceTable actionRef={invoiceActionRef} />,
    },
    {
      key: 2,
      label: '银行流水',
      children: <BankTable actionRef={bankActionRef} />,
    },
  ];
  return (
    <>
      <PageContainer
        className="invoice-index"
        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>,
          ],
        }}
      >
        <Tabs defaultActiveKey="1" items={tabsItems} />
      </PageContainer>

      {bankImportModalVisible ? (
        <BankImportModal
          setVisible={setBankImportModalVisible}
          onClose={() => {}}
        ></BankImportModal>
      ) : (
        ''
      )}
    </>
  );
};

export default InvoicePage;