FEV2 / fw-cms

  import React, { useState, useEffect, memo } from "react";

  import { Modal, Table, Select, Input, message, Spin, Button, Divider } from "antd";

  import Column from "antd/lib/table/Column";
  import { RecordStateEnum } from "@/pages/finance/entitys";
  import usePagination from "@/hooks/usePagination";
  import { getCompAccountApi } from "@/pages/finance/TradeCompany/api";
  import { useStore } from "../index";
  import { debounce } from "lodash";

  interface Props {
    onNext?: () => void;
  }
  
  function SelectModal({ onNext }: Props) {

    const {
      visible,
      selected,
      setVisible,
      companyParams,
      comBussinessList,
      comBussinessLoading,
      setDisabled,

      selectData,
      setSelectData,

    } = useStore();

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

    const {
      list: compList,
      loading,
      paginationConfig,
      setParams,
      innerParams,

    } = usePagination<TradeCompany.ComList>(
      getCompAccountApi,
      {
        compCategory: companyParams.compCategory,
        excludeDealerId: companyParams.dealerId,
        recordState: RecordStateEnum["已备案"],
      },
      { delay }
    );
  
    useEffect(() => {
      if (companyParams.dealerId !== -1) {
        setDelay(false);
        setParams({ compCategory: companyParams.compCategory, excludeDealerId: companyParams.dealerId }, true);
      }
    }, [companyParams]);

    const fetchListByName = debounce((value) => {

      setParams({ ...innerParams, keywords: value }, true);
    }, 500);
  
    function searchType(compTypes: number) {
      setParams({ compTypes }, true);
    }

    return (

      <>
        <div style={{ display: "flex", flexDirection: "row", marginBottom: 20 }}>
          <Input.Search
            allowClear
            placeholder="搜索单位名称/社会信用代码"
            onChange={(e) => fetchListByName(e.target.value || undefined)}
            style={{ width: 250, marginRight: 10 }}
          />
          <Select
            placeholder="搜索业务类型"
            showSearch
            allowClear
            optionFilterProp="children"
            loading={comBussinessLoading}
            onChange={searchType}
            style={{ width: 200 }}

          >

            {comBussinessList.map((item) => (
              <Select.Option key={item.id} value={item.id}>
                {item.name}
              </Select.Option>
            ))}
          </Select>
        </div>
  
        <Table
          loading={loading}
          dataSource={compList}
          pagination={{ ...paginationConfig, showSizeChanger: false }}
          rowKey="id"
          rowSelection={{
            type: "checkbox",
            selectedRowKeys: selectData.map((row) => row.id as number),
            onSelect: (row: any, _selected: boolean) => {
              const index = selectData.findIndex((_row) => _row.id == row.id);
              if (_selected) {
                selectData.unshift(row);
              } else if (index > -1) {
                selectData.splice(index, 1);
              }
              setSelectData([...selectData]);
            },
            onSelectAll: (selected, selectedRows, changeRows) => {
              const changedKeys = changeRows.map((row) => row.id);
              let newData = [];
              // 全选
              if (selected) {
                // 过滤掉已选的
                newData = selectData.concat(changeRows.filter((row) => !selectData.some((item) => item == row.id)));
              } else {
                // 全不选 - 去掉已选的
                newData = selectData.filter((row) => !changedKeys.find((y) => y === row.id));
              }
              setSelectData(newData);
            },
          }}
        >
          <Column title="账户名称" dataIndex="compName" />
          <Column title="业务类型" dataIndex="compTypeName" />
          <Column title="社会信用代码" dataIndex="creditCode" width="15%" />
        </Table>
        <div style={{ width: "100%", textAlign: "center", marginTop: 30 }}>
          <Button type="primary" style={{ marginBottom: 10 }} onClick={() => history.back()}>
            返回列表
          </Button>
  
          {!!selectData.length && (
            <>
              <Divider type="vertical" />
              <Button
                type="primary"
                style={{ marginBottom: 10 }}
                onClick={() => {
                  onNext && onNext();
                }}
              >
                下一步
              </Button>
            </>
          )}
        </div>
      </>

    );
  }
  
  export default memo(SelectModal);