FEV2 / fw-cms

  import React, { useEffect, useState } from 'react';

  import { Input } from 'antd';

  import { useStore } from '../index';
  import debounce from 'lodash/debounce';

  import { planPoolTypeData, getUrl } from '@/pages/pms/entity';

  import usePagination from "@/hooks/usePagination";
  import {getStoragePage} from "@/pages/pms/storage/StorageManage/api";
  import useInitail from "@/hooks/useInitail";
  import * as api from "@/pages/pms/storage/partShop/api";

  import PmsSelect from '@/pages/pms/comonents/PmsSelect';

  const { Search } = Input;
  
  export default function Filter() {
    const { list: storages } = usePagination<PartStorageSpace.PageVO>(getStoragePage, {pageSize: 1000});
    const { data: shops } = useInitail<PmsStoragePartShop.Option[], {}>(api.getShopApi, [], {});

    const { dfParams, setDfParams, partTypeData } = useStore();

    const [url, setUrl] = useState('/api/pms/erp/plan/pool/export');
  
    useEffect(() => {
      setUrl(getUrl('/api/pms/erp/plan/pool/export', dfParams));
    }, [dfParams]);

  
    const handleChangeKeywords = debounce((value: string) => {
      setDfParams({ ...dfParams, current: 1, keywords: value });
    }, 500);
  
    return (

      <div style={{display: 'flex', flexWrap: 'wrap', justifyContent: 'flex-start', marginBottom: 10, alignItems: 'center'}}>

        <PmsSelect

          style={{ width: 200, marginRight: 10}}
          allowClear
          value={dfParams.shopId}
          onChange={value => {
            const st: any = storages.find(it => it.shopId == value) || {};
            setDfParams({ ...dfParams, current: 1, shopId: value, storageId: st.id });
          }}
          placeholder="请选择服务站"

          options={shops

          .filter(it => (dfParams.shopId && it.id == dfParams.shopId) || !dfParams.shopId)

          .map((item: PmsStoragePartShop.Option) => ({value: item.id, label: item.name}))}
        />
        <PmsSelect

          style={{ width: 200, marginRight: 10}}
          allowClear
          value={dfParams.storageId}
          onChange={value => {
            const st: any = storages.find(it => it.id == value) || {};
            setDfParams({ ...dfParams, current: 1, storageId: value, shopId: st.shopId });
          }}
          placeholder="请选择库房"

          options={storages

          .filter(it => (dfParams.shopId && it.shopId == dfParams.shopId) || !dfParams.shopId)

          .map((item: PartStorageSpace.PageVO) => ({value: item.id, label: item.storageName}))}
        />
        <PmsSelect

          allowClear
          style={{ width: 200, marginRight: 10}}
          onChange={(poolType) => {
            setDfParams({ ...dfParams, current: 1, poolType });
          }}
          placeholder="请选择来源类型"

          options={planPoolTypeData.map(i => ({value: i.value, label: i.label}))}
        />
        <PmsSelect

          allowClear

          style={{ width: 200, marginRight: 10}}

          onChange={(partType) => setDfParams({ ...dfParams, current: 1, partType })}
          placeholder="请选择配件类型"

          options={partTypeData.map(i => ({value: i.value, label: i.label}))}
        />

        <Search
          style={{ width: 200, marginRight: 10}}
          allowClear

          enterButton

          placeholder="配件编码|名称"
          onSearch={v => handleChangeKeywords(v)}

        />

        <a 
          href={url}
        >
          导出计划池表格
        </a>

      </div>
    );
  }