SelectCorrespondenceUnits.tsx 4.3 KB
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);