FEV2 / fw-cms

  import React, { useEffect, useState } from 'react';
  import {Button, Modal, Table} from 'antd';
  import {useStore} from '../index';

  import { outFlowApi, outListVO } from '../api';
  import useInitial from '@/hooks/useInitail';
  import OutFlowDetailModal from './OutFlowDetailModal';

  
  const {Column} = Table;
  
  export default function Index() {
    const {outVisible, setOutVisible, item} = useStore();
    const [delay, setDelay]= useState(true);

    const { data, setParams, loading } = useInitial(outFlowApi, [], {}, delay);
    const [current, setCurrent] = useState<{visible?: boolean, itemData?: any}>();

  
    useEffect(() => {
      if (outVisible && item?.poolIds) {
        setParams({poolIds: item.poolIds}, true);
        setDelay(false);
      }
    }, [outVisible]);

    const total = data
      .map(i => i.outCnt)
      .reduce((prev, cur) => {
        return (prev || 0) + (cur || 0);
      }, 0);

  
    return (
      <Modal
        title={`${item?.partName}滚动90天出库流水`}
        width={1000}
        visible={outVisible}
        maskClosable={false}
        onCancel={() => setOutVisible(false)}
        footer={[
          <Button onClick={() => setOutVisible(false)}>取消</Button>
        ]}
      >

        <div style={{marginBottom: 20}}>
          滚动90天出库数：
          <span
            style={{ color: '#0000FF', cursor: 'pointer' }} 
            onClick={() => setCurrent({ visible: true, itemData: { poolIds: item?.poolIds } })}
          >
            {total}
          </span>
        </div>

        <Table

          dataSource={data}

          loading={loading}

          rowKey={(v: outListVO) => `${v.date}`}
          pagination={false}
          scroll={{y: 400}}

        >

          <Column title="出库日期" dataIndex="date" />
          <Column title="出库数量" render={r => <a onClick={() => setCurrent({ visible: true, itemData: { ...r, poolIds: item?.poolIds }})}>{r.outCnt}</a>} />

        </Table>

        <OutFlowDetailModal visible={current?.visible} setVisible={() => setCurrent({visible: false, itemData: undefined})} item={current?.itemData} />

      </Modal>
    );
  }