src/pages/pms/comonents/PartModal.tsx

import React, {useEffect, useState} from 'react';
import {Modal, Table, Input, message, Button} from 'antd';
import Column from 'antd/lib/table/Column';
import { debounce } from 'lodash';
import { PartVO } from '../partPlan/MinRatioPlan/api';
const Search = Input.Search;
interface Props {
  onCancel: () => any,
  visible: boolean,
  parts: any[]
  onOk: (parts: any[]) => any
}
export default function Index({ onCancel, visible, parts=[], onOk }: Props) {
  const [selectedParts, setSelectedParts] = useState<PartVO[]>([]);
  const [partList, setPartList] = useState(parts);
  useEffect(() => {
    if (!visible) {
      setSelectedParts([]);
      setPartList(parts);
    }
  }, [visible, parts]);
  function handSave() {
    if (selectedParts.length == 0) {
      message.error("请选择配件");
      return;
    }
    onOk && onOk(selectedParts);
    onCancel && onCancel();
  }
  const handleChange = debounce((value) => {
    setPartList(parts.filter(it => {
      return (it.partCode || '').includes(value)
      || (it.partName || '').includes(value)
      || (it.supplierName || '').includes(value);
    }));
  }, 500);
  return (
    <Modal
      width={800}
      visible={visible}
      title="配件采购品牌"
      onCancel={onCancel}
      footer={[
        <Button key="cancel" onClick={onCancel}>取消</Button>,
        <Button
          key="submit"
          disabled={selectedParts.length == 0}
          onClick={handSave}
          type="primary"
          htmlType="submit"
        >
          确认
        </Button>
      ]}
    >
      <Search
        enterButton
        allowClear
        placeholder="请输入配件名称/编码"
        onChange={e => handleChange(e.target.value)}
        onSearch={handleChange}
        style={{ maxWidth: 240, marginBottom: 20 }}
      />
      <Table
        dataSource={partList}
        scroll={{y: 600}}
        style={{width: '100%'}}
        pagination={false}
        rowSelection={{
          type: "checkbox",
          selectedRowKeys: selectedParts.map(part => `${part.partCode}-${part.storageId}`),
          onSelect: (row: PartVO, _selected: boolean) => {
            const index = selectedParts.findIndex(_row => _row.partCode == row.partCode && _row.storageId == row.storageId);
            let newData = [...selectedParts];
            if (_selected) {
              newData.unshift(row);
            } else if (index > -1) {
              newData.splice(index, 1);
            }
            setSelectedParts([...newData]);
          },
          onSelectAll: (selected, selectedRows, changeRows) => {
            const changedKeys = changeRows.map(row => `${row.partCode}-${row.storageId}`);
            let newData = [...selectedParts];
            // 全选
            if (selected) {
              // 过滤掉已选的
              newData = selectedParts.concat(changeRows.filter(row => !selectedParts.some(item => item.partCode == row.partCode && item.storageId == row.storageId)),);
            } else {
              // 全不选 - 去掉已选的
              newData = selectedParts.filter(row => !changedKeys.includes(`${row.partCode}-${row.storageId}`));
            }
            setSelectedParts(newData);
          },
        }}
        rowKey={(record) => `${record.partCode}-${record.storageId}`}
      >
        <Column title="配件编码" dataIndex="partCode" />
        <Column title="配件名称" dataIndex="partName" />
        <Column title="库房名称" dataIndex="storageName" />
        <Column title="门店名称" dataIndex="shopName" />
        <Column title="配件数量" dataIndex="count" />
        <Column title="上次采购供应商" dataIndex="supplierName" />
      </Table>
    </Modal>
  );
}