FEV2 / fw-cms

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

  import { Button, message, Modal, Table, Descriptions } from 'antd';
  import { confirmApi, getDetail, Detail, Item, DetailItem } from "../api";

  import useInitail from "@/hooks/useInitail";
  import _ from "lodash";
  
  interface Props {
    visible: boolean,
    onCancel: Function,

    item: Item,
    confirm: boolean,

    fetchList: () => any
  }
  
  const { Column } = Table;
  export default function Index(props: Props) {

    const { visible, onCancel, fetchList, item, confirm } = props;

    const [delay, setDelay] = useState(true);

    const { data, setParams, loading: aloading} = useInitail<Detail, string | undefined>(getDetail, {}, item.shippingNo, delay);

    const [loading, setLoading] = useState(false);
  
    useEffect(() => {
      if (visible) {
        setParams(item.shippingNo, true);
        setDelay(false);
      }
    }, [visible]);
  
    const submit = _.throttle((valid: boolean) => {
      if (loading) {
        return;
      }
      setLoading(true);
      confirmApi({valid, shippingNo: item.shippingNo}).then(() => {
        message.success("操作成功");
        setLoading(false);
        onCancel();
        fetchList();
      }).catch(e => {
        message.error(e.message);
        setLoading(false);
      });
    }, 3000);
  
    return (
      <Modal
        title="发运单导入明细"
        width={1000}
        visible={visible}
        maskClosable={false}
        onCancel={() => onCancel()}

        footer={confirm ? [

          <Button key="1" loading={loading} onClick={() => submit(false)}>作废</Button>,
          <Button key="2" type="primary" loading={loading} disabled={loading} onClick={() => submit(true)}>确认</Button>

        ] : [<Button key="1" loading={loading} onClick={() => onCancel()}>取消</Button>]}

      >

        <Descriptions column={3}>
          <Descriptions.Item label="品牌">{data.brandName}</Descriptions.Item>
          <Descriptions.Item label="供应商" span={2}>{data.supplierName}</Descriptions.Item>
          <Descriptions.Item label="库房">{data.storageName}</Descriptions.Item>

          <Descriptions.Item label="提报门店" span={2}>{data.settleShopName}</Descriptions.Item>

        </Descriptions>
        <Table loading={aloading} rowKey={(v: DetailItem) => `${v.partId}`} scroll={{y: 500, x: 1200}} dataSource={data.list || []} pagination={false}>

          <Column title="配件名称" dataIndex="partName" />
          <Column title="配件编码" dataIndex="partCode" />
          <Column title="配件件号" dataIndex="partNo" />

          <Column title="发运数量" dataIndex="partCount" />

          <Column title="采购单价" dataIndex="price" />

          <Column title="总金额(元)" dataIndex="totalAmount" render={(t: number, _: DetailItem) => ((_.price || 0) * (_.partCount || 0) || '--')} />

          {!confirm && <Column title="入库数量" dataIndex="storageCnt" render={(t: number) => (t || '--')} />}
          {!confirm && <Column title="遗漏数量" dataIndex="omitCnt" render={(t: number) => (t || '--')} />}
          {!confirm && <Column title="破损数量" dataIndex="damagedCnt" render={(t: number) => (t || '--')} />}
          {!confirm && <Column title="补发数量" dataIndex="againCnt" render={(t: number) => (t || '--')} />}
          {!confirm && <Column title="对方责任占比" dataIndex="otherRatio" render={(t: number) => (t ? `${t*10}%` : '--')} />}

        </Table>
      </Modal>
    );
  }