FEV2 / fw-cms

  import React from "react";

  import { Button, Col, Popconfirm, Row, Select, Input, message } from "antd";

  import { useStore } from "../index";
  import { CompanyCategoryTypeEnum } from "@/pages/finance/entitys";
  import { debounce } from "lodash";

  import { deleteCompanyRelationApi } from "@/pages/finance/CompanyRelationAuth/api";
  import { history } from "umi";

  
  const Search = Input.Search;
  const { Option } = Select;
  
  export default function Filter() {

    const {
      setVisible,
      dealerList,
      setCompanyParams,

      dealerLoading,
      disabled,
      setDisabled,

      setSelected,
      companyList,
      comBussinessList,

      selectedRelation,
      submitLoading,
      setSubmitLoading,
      companyParams,
      setLoading,

    } = useStore();

    const searchDealer = (dealerId: number) => {
      setCompanyParams({ ...companyParams, dealerId }, true);
    };
  
    function searchType(compCategory: number) {
      setCompanyParams({ ...companyParams, compCategory }, true);
    }
  

    function searchCompanyType(companyType: number) {
      setCompanyParams({ ...companyParams, companyType }, true);
    }
  
    const fetchListByName = debounce((value) => {

      setCompanyParams({ ...companyParams, keywords: value }, true);
    }, 500);
  
    function onCancel() {
      setDisabled(true);
      setSelected([...companyList]);
    }
  
    function onEdit() {
      setDisabled(false);
    }
  

    // 新增

    function onAdd() {

      history.push({ pathname: "/finance2/companyRelationAuth/create", state: companyParams });

    }

    /**
     * @param compId
     */
    async function onDelete() {
      const compIdList = selectedRelation.map((item) => item.compId);
      try {

        const pa = { ...companyParams, compIdList };

        setSubmitLoading(true);
        const { success, result } = await deleteCompanyRelationApi(pa);
        setSubmitLoading(false);
  
        if (!success) {
          return message.error(result);
        } else {
          message.success(result);
          setLoading(true);
        }
      } catch (e) {
        setSubmitLoading(false);
        message.error(e.message);
      }
    }

  
    return (

      <div
        style={{
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center",
          marginBottom: 20,
        }}
      >
        <Row style={{ display: "flex", flex: 1 }}>
          <Col span={9}>

            <Select
              placeholder="请选择商家"
              showSearch
              loading={dealerLoading}
              disabled={!disabled}
              optionFilterProp="children"
              onChange={searchDealer}
              value={companyParams.dealerId}

              style={{ width: "80%" }}

            >

              {dealerList.map((dealer) => (
                <Option value={dealer.id} key={dealer.id}>
                  {dealer.name}
                </Option>

              ))}
            </Select>
          </Col>

          <Col span={5}>

            <Search
              allowClear
              disabled={!disabled}
              placeholder="搜索单位名称"
              onChange={(e) => fetchListByName(e.target.value || undefined)}

              style={{ width: 200 }}

            />
          </Col>

          <Col span={3}>

            <Select
              placeholder="搜索单位类别"
              disabled={!disabled}
              onChange={searchType}
              value={companyParams.compCategory}
              style={{ width: 100 }}
            >

              {[1, 2].map((i) => (
                <Option value={i} key={i}>
                  {CompanyCategoryTypeEnum[i]}
                </Option>
              ))}
            </Select>
          </Col>
          <Col>
            <Select placeholder="搜索类型" disabled={!disabled} onChange={searchCompanyType} style={{ width: 150 }}>
              {comBussinessList.map((item) => (
                <Option key={item.id} value={item.id}>
                  {item.name}
                </Option>

              ))}
            </Select>
          </Col>

        </Row>

        <div style={{ display: "flex", flexDirection: "row-reverse" }}>

          <Button type="primary" onClick={onAdd}>

            新增
          </Button>

  
          <Popconfirm title="确定删除？" onConfirm={onDelete}>

            <Button style={{ marginRight: 10 }} hidden={!selectedRelation.length} danger loading={submitLoading}>

              删除
            </Button>
          </Popconfirm>

        </div>
      </div>

    );

  }