FEV2 / fw-cms

import usePagination from '@/hooks/usePagination';
import { getListApi } from '@/pages/capital/StandardMange/api';
import { Button, Input, Modal, Popover, Row, Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { debounce } from 'lodash';
import React, { useEffect, useState } from 'react';
import { AssetTypeEnum } from '@/pages/capital/entity';

interface Props {
  visible: boolean;
  onCancel: () => void;
  onChange?: Function;
  value?: any;
  multiple?: boolean;
}

const columns: ColumnsType<StanderList.ListVO> = [
  {
    title: '物品名称',
    dataIndex: 'name',
    render: (text: string, row: StanderList.ListVO) => {
      return (
        <>
          <div>{text}</div>
          <Tag style={{ fontSize: 12 }}>{row.type && AssetTypeEnum[row.type]}</Tag>
        </>
      );
    }
  },
  {
    title: '物品编码',
    dataIndex: 'code',
  },
  {
    title: '规格型号',
    dataIndex: 'specList',
    render: (text, record) => {
      const items = (text || []).map(i => `${i.standardSpecName}：${i.specDetails}`);
      return (
        <Popover
          placement="topLeft"
          content={<div style={{ maxWidth: 260 }}>{items.join('；')}</div>}
        >
          <div>
            {items.slice(0, 3).map((i: string) => {
              return (
                <p key={i} style={{ margin: 0, fontSize: 12 }}>{i}</p>
              );
            })}
            {items.length > 3 ? (<span>...</span>) : null}
          </div>
        </Popover>
      );
    },
  }];

const SelectGoodsTable = (props: Props) => {
  const { visible, onCancel, onChange, multiple = true, value = [] } = props;
  const { list, paginationConfig, loading, setLoading, setParams } = usePagination(getListApi, { status: 1 });
  const [selectedRow, setSelectedRow] = useState<StanderList.ListVO[]>([]);

  useEffect(() => {
    if (value.length > 0) {
      setSelectedRow([...value]);
    }
  }, [value]);
  const start = () => {
    setLoading(true);
    // ajax request after empty completing
    setTimeout(() => {
      setSelectedRow([]);
      setLoading(false);
    }, 1000);
  };

  function saveDate() {
    console.log("🚀 ~ file: SelectGoodsTable.tsx:80 ~ saveDate ~ selectedRow:", selectedRow);

    onChange && onChange(selectedRow);
    onCancel();
  }

  const onFilter = debounce((v: string) => {
    setParams({ keywords: v }, true);
  }, 600);

  const rowSelection = {
    type: multiple ? "checkbox" : "radio",
    selectedRowKeys: selectedRow.map(row => row.code),
    onSelect: (row: any, _selected: boolean) => {
      const index = selectedRow.findIndex((_row) => _row.code == row.code);
      if (!multiple) {
        setSelectedRow([row]);
        return;
      }
      if (_selected) {
       selectedRow.unshift(row);
      } else if (index > -1) {
        selectedRow.splice(index, 1);
      }
      setSelectedRow([...selectedRow]);
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
      const changedKeys = changeRows.map((row) => row.code);
      let newData = [...selectedRow];
      // 全选
      if (selected) {
        // 过滤掉已选的
        newData = selectedRow.concat(changeRows.filter((row: any) => !selectedRow.some((item) => item.code == row.code)));
      } else {
        // 全不选 - 去掉已选的
        newData = selectedRow.filter((row) => !changedKeys.includes(row.code));
      }
      setSelectedRow(newData);
    },
  };
  const hasSelected = selectedRow.length > 0;

  return (
    <Modal
      visible={visible}
      onCancel={onCancel}
      onOk={saveDate}
      centered
      title="选择规格型号标准"
      width={650}
    >
      <Row style={{ marginBottom: 16, alignItems: "center" }} justify="space-between">
        <Input
          allowClear
          style={{ width: 230 }}
          placeholder="搜索型号名称"
          onChange={(e) => onFilter(e.target.value)}
        />
        {!!multiple && (
          <div>
            <Button type="primary" onClick={start} disabled={!hasSelected} loading={loading}>
              重置
            </Button>
            <span style={{ marginLeft: 8 }}>
              {hasSelected ? `已选择 ${selectedRow.length} 项` : ''}
            </span>
          </div>
        )}
      </Row>
      <Table
        loading={loading}
        rowKey="code"
        pagination={paginationConfig}
        rowSelection={rowSelection}
        columns={columns}
        dataSource={list}
        size="small"
      />
    </Modal>
  );
};

export default SelectGoodsTable;