FEV2 / fw-cms

  import React, {useState, useEffect, useMemo} from 'react';

  import { Button, Modal, Table } from 'antd';

  import { getProgressDetail, ProgressVO, ListVO, Params, SubmitListVO } from "../api";
  import useInitial from "@/hooks/useInitail";

  import ProgressView from "./ProgressView";
  import ShippingDetailModal from './ShippingDetailModal';

  import PartDetailModal from './PartDetailModal';

  import {flattenDeep} from "@/pages/pms/entity";

  import {getDetail, DetailVO, Item} from "@/pages/pms/partPlan/PlanManage/subpages/Detail/api";

  
  interface Props {
    visible: boolean,
    onCancel: Function,

    item: ListVO,

  }
  
  const { Column } = Table;
  export default function DetailModal(props: Props) {
    const { visible, onCancel, item } = props;
    const params = {planId: item.planId};
    const [delay, setDelay] = useState(true);

    // @ts-ignore
    const { data: progresss, setParams: setProgresssParams } = useInitial<ProgressVO[], Params>(getProgressDetail, [], params, delay);
    // @ts-ignore

    const { data, setParams, loading } = useInitial<Item, Params>(getDetail, {}, params, delay);

    const [visibleDetail, setVisibleDetail] = useState(false);
    const [_item, setItem] = useState<SubmitListVO>({});

    const [visiblePartDetail, setVisiblePartDetail] = useState(false);

    const suppliers = useMemo(() => {

      return flattenDeep(data.list?.map((it: DetailVO) => (it.suppliers || []).map(su => ({...it, ...su}))));

    }, [data]);

  
    useEffect(() => {
      if (visible) {
        setProgresssParams(params, true);
        setParams(params, true);
        setDelay(false);
      }
    }, [visible]);
  
    return (
      <Modal
        title="配件计划进度"
        width={1000}
        visible={visible}
        maskClosable={false}
        onCancel={() => onCancel()}
        footer={
          <Button onClick={() => onCancel()}>取消</Button>
        }
      >
        <div style={{display: 'flex', flexDirection: 'row'}}>
          <ProgressView data={progresss} />

          <div style={{width: 700}}>

            <Table loading={loading} rowKey={(v: any) => `${v.planSupplierId}`} scroll={{y: 500, x: 650}} dataSource={suppliers} pagination={false}>

              <Column title="品牌" dataIndex="brandName" />

              <Column title="结算商家" dataIndex="settleDealerName" />
              <Column title="结算门店" dataIndex="settleShopName" />

              <Column title="供应商" dataIndex="supplierName" />

              <Column title="总金额(元)" dataIndex="totalAmount" render={(t: number) => t && t.toFixed(2) || 0} />

              <Column
                title="操作"

                render={(text, _item: SubmitListVO) => (
                  <>
                    <a onClick={() => { setVisiblePartDetail(true); setItem(_item); }} style={{marginRight: 20}}>查看配件</a>
                    <a onClick={() => { setVisibleDetail(true); setItem(_item); }}>查看进度</a>
                  </>
                )}

              />
            </Table>
          </div>
        </div>
        <ShippingDetailModal
          visible={visibleDetail}

          item={{..._item, ...params}}

          onCancel={() => setVisibleDetail(false)}
        />

        <PartDetailModal

          visible={visiblePartDetail}
          item={_item}
          onCancel={() => setVisiblePartDetail(false)}
        />

      </Modal>
    );
  }