---
title: 业务接口相关筛选器
order: 2


---



1. 供应商选择器 链接 http://yapi.ywfe.com/project/184/interface/api/64410

2. 人员查询接口 链接 http://yapi.ywfe.com/project/88/interface/api/59650

3. 部门树接口 链接 http://yapi.ywfe.com/project/88/interface/api/59642

4. 通过id查询人员接口 链接 http://yapi.ywfe.com/project/88/interface/api/59658

5. 商品类目选择 链接 http://yapi.ywfe.com/project/190/interface/api/20450

6. 地区选择接口 链接 http://yapi.ywfe.com/project/199/interface/api/63986

7. 通用字典接口 链接 http://yapi.ywfe.com/project/184/interface/api/32557

```jsx
import React, { useEffect, useState, Component } from 'react';
import ReactDOM from 'react-dom';
import { YwFilter } from '@ywfe/yw-design';
import 'antd/dist/antd.css';
const items = [
  {
    title: '供应商',
    name: 'supplierNo',
    component: 'Select',
    type: 'string',
 
    componentProps: {
      fieldNames: {label: 'supplierName', value: 'supplierNo'},
      getDataSource: (data)=>{
          // 统一接口地址 http://yapi.ywfe.com/project/184/interface/api/64410
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve([]);
          }, 1500);
        })
      }
    },
  },
  {
    title:'人员选择器',
    name:'user',
    component:'EmpSelector',
  
    defaultValue:[{userId:'U0163E11C76664755963690140871031',userName:'依然'}],
    componentProps:{
      maxItems: 3, // 最大选择数量
      fieldNames:{label:'userName',value:'userId'},
      getUserListForOrg: async (data) =>{ // 人员搜索接口
          //  接口地址 http://yapi.ywfe.com/project/88/interface/api/59658
          return new Promise((resolve) => {
          setTimeout(() => {
            resolve([]);
          }, 1500);
        });
      },
      getDataSource: async (data) =>{ // 人员搜索接口
          // 接口地址 http://yapi.ywfe.com/project/88/interface/api/59650
          return new Promise((resolve) => {
          setTimeout(() => {
            resolve([])
          }, 1500);
        });
      },
      getOrgList: async ()=>{ // 组织架构接口
        // 接口地址 http://yapi.ywfe.com/project/88/interface/api/59642
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve([]);
          }, 1500);
        });
      }
    }
  },
  {
    title:'组织架构选择器',
    name:'org',
    component:'OrgSelector',

    defaultValue:[{orgId: '5', orgName: '前端'}],
    componentProps:{
      maxItems: 3, // 最大选择数量
      fieldNames:{label:'orgName',value:'orgId'},
      getOrgList: async ()=>{ // 组织架构接口
        // 接口地址 http://yapi.ywfe.com/project/88/interface/api/59642
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve([]);
          }, 1500);
        });
      }
    }
  },
  {
    title: '地区选择器',
    name: 'cascader',
    component: 'CascaderSelect',

    // defaultValue:'2973',
    componentProps: {
         placeholder: "请选择",
        hasClear: true,
        expandTriggerType: "hover",
        fieldNames: {label: 'name', value: 'code',children: 'subList'},
        listStyle:{width:'180px'},
           getDataSource: async (field, data) => {
          return new Promise((resolve) => {
            setTimeout(() => {
              resolve(
              [
                {
                  code: "2973",
                  name: "陕西",
                  child: [
                    {
                      code: "2974",
                      name: "西安",
                      child: [
                        {
                          code: "2975",
                          name: "西安市",
                          isLeaf: true,
                          checkboxDisabled: true
                        },
                        { code: "2976", name: "高陵县", isLeaf: true }
                      ]
                    },
                    {
                      code: "2980",
                      name: "铜川",
                      disabled: true,
                      child: [
                        { code: "2981", name: "铜川市", isLeaf: true },
                        { code: "2982", name: "宜君县", isLeaf: true }
                      ]
                    }
                  ]
                }      
              ]
              )
            }, 1500);
          });
        },
        // getDataSource: async (field, data) => {
        //   // 接口地址 http://yapi.ywfe.com/project/199/interface/api/63986
        //   return new Promise((resolve) => {
        //     setTimeout(() => {
        //       resolve([])
        //     }, 1500);
        //   });
        // },
    },
  },
  {
    title: '字典数据',
    name: 'dictItem',
    component: 'Select',
 
    componentProps: {
        dict:[
            {dictName:'待审核',dictValue:1},
            {dictName:'已审核',dictValue:2}
        ]
    },
  },
  {
    title: '异步字典数据',
    name: 'dictItem',
    component: 'Select',

    componentProps: {
        fieldNames: {label: 'dictName', value: 'dictValue'},
        getDataSource: async (field, data) => {
          // 接口地址 http://yapi.ywfe.com/project/184/interface/api/32557
          return new Promise((resolve) => {
            setTimeout(() => {
              resolve([])
            }, 1500);
          });
        },
    },
  },

 


];

const App = () => {
  const [initialValues,setInitialValues] = useState({})

    return (
      <div>
        <YwFilter labelInset items={items} itemWidth={340} onSubmit={(values)=>{console.log(values)}} initialValues={initialValues}/>
      </div>
    );
}

ReactDOM.render(<App />, mountNode);
```