FEV2 / fw-cms

  import React from 'react';

  import { Input } from 'antd';

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

  import {getPartTypeApi} from '@/pages/pms/part/Repertory/api';
  import useInitail from '@/hooks/useInitail';

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

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

    const { shops, setParams, storages, innerParams } = useStore();

    const { data: partTypeData } = useInitail(getPartTypeApi, [], {});

  
    const handleChangeKeywords = debounce((value: string) => {

      setParams({ current: 1, keyword: value }, true);

    }, 500);
  

    const isStock = (v:any) => {

      if (v == undefined) {
        setParams({current: 1, pageSize: 10, haveStock: undefined }, true);

        return;
      }
      const param = Boolean(v);
      setParams({current: 1, pageSize: 10, haveStock: param }, true);
    };
  
    const isSorter = (v:any) => {
      setParams({current: 1, pageSize: 10, orderBy: v }, true);
    };
  

    return (

      <div>

        <Search

          style={{ width: 180, marginRight: 10, marginBottom: 10 }}

          allowClear

          enterButton

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

        />

        <PmsSelect

          style={{ width: 180, marginRight: 10, marginBottom: 10 }}

          allowClear
          value={innerParams.shopId}
          onChange={value => {
            const st: any = storages.find(it => it.shopId == value) || {};
            setParams({ current: 1, shopId: value, storageId: st.id }, true);
          }}
          placeholder="请选择服务站"

          options={shops

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

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

          style={{ width: 180, marginRight: 10, marginBottom: 10 }}

          allowClear
          value={innerParams.storageId}
          onChange={value => {
            const st: any = storages.find(it => it.id == value) || {};
            setParams({ current: 1, storageId: value, shopId: st.shopId }, true);
          }}
          placeholder="请选择库房"

          options={storages

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

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

          allowClear

          style={{ width: 180, marginRight: 10, marginBottom: 10 }}

          onChange={(type) => {
            setParams({ ...innerParams, current: 1, type }, true);
          }}
          placeholder="请选择配件类型"

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

        <PmsSelect

          allowClear
          placeholder="有无库存筛选"
          onChange={v => isStock(v)}

          style={{ width: 180, marginRight: 10, marginBottom: 10 }}

          options={[
            {value: 1, label: "有库存"},
            {value: 0, label: "无库存"},
          ]}
        />
        <PmsSelect

          placeholder="排序方式"
          defaultValue={18}
          onChange={v => isSorter(v)}

          style={{ width: 180 }}

          options={[
            {value: 18, label: "总库存降序"},
            {value: 21, label: "锁定库存降序"},
          ]}
        />

      </div>

    );

  }