FEV2 / fw-cms

  import {Table} from 'antd';
  import React, {useEffect, useState} from 'react';
  import useInitial from "@/hooks/useInitail";
  import {getList, ListVO} from "@/pages/pms/partPlan/PlanPool/api";
  import DetailModal from './DetailModal';
  import {useStore} from "@/pages/pms/partPlan/PlanPool";

  import _ from 'lodash';

  
  const { Column } = Table;
  interface Props {
    showAnalyse?: boolean
    // eslint-disable-next-line react/no-unused-prop-types
    type?: number, // 类型1区域库2库房3车系4车型5配件
    // eslint-disable-next-line react/no-unused-prop-types
    detailType?: number, // 类型1区域库2库房3车系4车型5配件
    // eslint-disable-next-line react/no-unused-prop-types
    id?: number, // 上一个列表ID
  }
  export default function Index(props: Props = {}) {

    const { dfParams, key, setItem, setOutVisible, setCustVisible } = useStore();

    const {showAnalyse=true} = props;

    const { data: parts, setParams, loading } = useInitial(getList, [], {...dfParams, ...props});

    const [visible, setVisible] = useState(false);
    // 类型1区域库2库房3车系4车型5配件
    const [detailType, setDetailType] = useState<number>();
    const [id, setId] = useState<number>();
  
    useEffect(() => {
      if (key == props.type) {
        setParams(dfParams, true);
      }
    }, [dfParams, key]);
  
    return (
      <div>

        <Table rowKey={(v: ListVO) => `${v.id}`} scroll={{y: 500, x: 3000}} dataSource={parts || []} pagination={false} loading={loading}>

          <Column title="配件编码" dataIndex="code" fixed="left" />

          <Column title="配件名称" dataIndex="name" fixed="left" />
          <Column title="本次计划数量(个)" dataIndex="cnt" fixed="left" />

          <Column title="来源类型" dataIndex="typeName" />

          <Column title="配件类型" dataIndex="partTypeName" />

          <Column title="计划前库销比" dataIndex="ratio" render={t => (t ? t.toFixed(2) : "--")} />

          <Column title="计划后库销比" dataIndex="planRatio" render={t => (t ? t.toFixed(2) : "--")} />

          <Column title="本次计划金额(元)" dataIndex="thisTimeAmount" />

          <Column title="客户订件数量(个)" render={r => (r.buyCnt ? <a onClick={() => { setCustVisible(true); setItem(r); }}>{r.buyCnt}</a> : r.buyCnt)} />

          <Column title="客户订件金额(元)" dataIndex="buyAmount" />

          <Column title="在途未锁(个)" dataIndex="onTheWayUnlockCnt" />

          <Column title="在库未锁(个)" dataIndex="storageUnlockCnt" />

          <Column title="在库已锁(个)" dataIndex="storageLockedCnt" />

          <Column title="近90天月均出库(个)" render={r => (r.outStockCnt ? <a onClick={() => { setOutVisible(true); setItem(r); }}>{_.floor(r.outStockCnt/3)}</a> : r.outStockCnt)} />

          {showAnalyse && (
            <>
              <Column
                title="区域库分析"
                render={(t, _: ListVO) => (
                  <a onClick={() => {
                    setVisible(true);
                    setId(_.id);
                    setDetailType(1);
                  }}
                  >
                    查看
                  </a>
                )}
              />
              <Column
                title="库房分析"
                render={(t, _: ListVO) => (
                  <a onClick={() => {
                    setVisible(true);
                    setId(_.id);
                    setDetailType(2);
                  }}
                  >
                    查看
                  </a>
                )}
              />
              <Column
                title="车系分析"
                render={(t, _: ListVO) => (
                  <a onClick={() => {
                    setVisible(true);
                    setId(_.id);
                    setDetailType(3);
                  }}
                  >
                    查看
                  </a>
                )}
              />

            </>
          )}
        </Table>
        <DetailModal
          visible={visible}
          onCancel={() => setVisible(false)}
          id={id}
          detailType={detailType}
          type={5}
        />
      </div>
    );
  }