canrd-main / canrd-erp-front · Files

import EllipsisDiv from '@/components/Div/EllipsisDiv';
import { RESPONSE_CODE } from '@/constants/enum';
import { INVOCING_STATUS, PAYEE_OPTIONS } from '@/pages/Order/constant';
import {
  postServiceBankStatementQueryBankStatement,
  postServiceInvoiceInvoiceWriteOff,
} from '@/services';
import { enumValueToLabel, formatDateTime } from '@/utils';
import { formatDate } from '@/utils/time';
import { PlusOutlined } from '@ant-design/icons';
import {
  ActionType,
  ProCard,
  ProFormInstance,
  ProTable,
} from '@ant-design/pro-components';
import { Button, Divider, Flex, Modal, Tag, message } from 'antd';
import { useEffect, useRef, useState } from 'react';
import { BANK_STATEMENT_COLUMNS, INVOICE_STATUS } from '../constant';
import '../index.less';
export default ({ invoiceId, setVisible, onClose }) => {
  const [bankData, setBankData] = useState([]);
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [total, setTotal] = useState(0);
  const [selectedStatement, setSelectedStatement] = useState([]);
  const [loading, setLoading] = useState(false);
  const [btnLoading, setBtnLoading] = useState(false);

  const actionRef = useRef<ActionType>();
  const formRef = useRef<ProFormInstance>();

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

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

    return target;
  };

  const loadBankData = async (params: any) => {
    setLoading(true);
    let searchParams = formRef?.current?.getFieldFormatValue();
    console.log(searchParams);
    const res = await postServiceBankStatementQueryBankStatement({
      data: { ...searchParams, ...params, status: 'ABNORMAL' },
    });
    if (res) {
      setBankData(res?.data?.data || []);
      setTotal(res?.data?.total || 0);
    }

    setLoading(false);
  };

  /**
   * 加载银行流水列表表格的各个列格式
   */
  const bankStatementColumnsInit = () => {
    let columns = BANK_STATEMENT_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 (
              <EllipsisDiv
                text={enumValueToLabel(
                  getTableCellText(textValue),
                  INVOCING_STATUS,
                )}
              />
            );

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

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

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

      return newItem;
    });

    columns.push({
      title: '操作',
      valueType: 'option',
      key: 'option',
      fixed: 'right',
      width: 70,
      render: (text, record) => [
        <Button
          className="p-0"
          key="choose"
          type="link"
          onClick={() => {
            //去掉表格中对应的数据
            let newBankData = bankData.filter((item) => {
              return item.id !== record.id;
            });
            setBankData(newBankData);

            //添加到已选中区域中
            let newSelectedStatement = [...selectedStatement];
            newSelectedStatement.push(record);
            setSelectedStatement(newSelectedStatement);
          }}
        >
          选中
        </Button>,
      ],
    });

    return columns;
  };

  /**
   * 银行流水表
   * @param param0
   * @returns
   */
  const BankTable = ({ actionRef = undefined }) => {
    return (
      <ProTable
        loading={loading}
        columns={bankStatementColumnsInit()}
        actionRef={actionRef}
        formRef={formRef}
        cardBordered
        pagination={{
          pageSize: pageSize,
          current: page,
          total: total,
          onChange: (page, pageSize) => {
            setPage(page);
            setPageSize(pageSize);
            loadBankData({ current: page, pageSize: pageSize });
          },
        }}
        dataSource={bankData}
        onDataSourceChange={() => {
          console.log('change');
        }}
        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',
          span: 8,
        }}
        options={{
          setting: {
            listsHeight: 400,
          },
        }}
        form={{}}
        onSubmit={() => {
          loadBankData({ current: 1 });
        }}
        onReset={() => {}}
        dateFormatter="string"
        headerTitle="银行流水"
        scroll={{ x: 1400, y: 360 }}
        toolBarRender={() => [
          <Button
            key="button"
            icon={<PlusOutlined />}
            onClick={() => {}}
            type="primary"
          >
            添加
          </Button>,
        ]}
      />
    );
  };

  const removeSelectedStatement = (record: any) => {
    console.log(record);
    console.log(selectedStatement);
    console.log(bankData);

    //在已选中区域中移除
    let newSelectedStatement = selectedStatement.filter((item) => {
      return item.id !== record.id;
    });
    setSelectedStatement(newSelectedStatement);

    //将数据添加回到表格中
    let newBankData = [...bankData];
    newBankData.push(record);
    setBankData(newBankData);
  };

  const showSelectedStatement = () => {
    console.log('show');
    console.log(selectedStatement);
    let i = 0;

    let tags = selectedStatement.map((item) => {
      return (
        <Tag
          key={i++}
          closable={true}
          style={{ userSelect: 'none' }}
          onClose={(e) => {
            e.preventDefault(); //需要加上这句代码，不然删除tag时，当前tag的下一个tag会被设置ant-tag-hidden
            removeSelectedStatement(item);
          }}
        >
          <span>{item.id}</span>
        </Tag>
      );
    });

    console.log(tags);

    return tags;
  };

  useEffect(() => {
    loadBankData({ current: page, pageSize: pageSize });
  }, []);

  return (
    <>
      <Modal
        open
        width="80%"
        title="发票详情"
        className="bank-statement-choose"
        onOk={async () => {
          setBtnLoading(true);
          let bankStatementIds = selectedStatement?.map((item) => {
            return item.id;
          });
          let res = await postServiceInvoiceInvoiceWriteOff({
            data: {
              invoiceId: invoiceId,
              bankStatementIds: bankStatementIds,
            },
          });

          if (res.result === RESPONSE_CODE.SUCCESS) {
            message.info(res.message);
            onClose();
          }

          setBtnLoading(false);
        }}
        okButtonProps={{
          loading: btnLoading,
        }}
        onCancel={() => {
          setVisible(false);
        }}
      >
        <Divider orientation="left" plain>
          已选中
        </Divider>
        <ProCard className="mb-[16px]" bordered style={{}}>
          <Flex>
            <div>{showSelectedStatement()}</div>
          </Flex>
        </ProCard>

        <BankTable actionRef={actionRef}></BankTable>
      </Modal>
    </>
  );
};