@bit-sun/business-component 2.0.37 → 2.0.39-alpha.0

package/src/components/Business/SearchSelect/index.md

@@ -1,1137 +1,1137 @@
----
-nav:
-  title: '组件'
-  order: 1
-group:
-  title: 业务组件
-  order: 1
-title: 业务档案选择器
-order: 1
----
-
-# BusinessSearchSelect
-
-
-## 供应商选择器 Select-GYS-001
-
-```tsx
-import React, { useState } from 'react';
-import { Tabs } from 'antd';
-import {BusinessSearchSelect} from '../../../index.ts';
-
-const { TabPane } = Tabs;
-
-export default () => {
-  // selectBusinessType 必传（不传默认为供应商选择器）
-  
-  const selectProps = {
-    // mode: 'multiple',
-    // maxTagCount: 1,
-    // disabled: true
-  }
-  const selectPropsMultiple = {
-    mode: 'multiple',
-    maxTagCount: 1,
-  }
-  
-  const [ tabKey, setTabKey ] = useState('single')
-  const [value, setValue] = useState(null);
-  
-  const props = {
-    value,
-    // labelInValue: true, // 非必填 默认为false
-    // requestConfig: {
-    //   url: `/bop/api/supplier`,
-    //   filter: 'qp-name,code-orGroup,like', // 过滤参数
-    //   otherParams: {}, // 默认参数
-    //   mappingTextField: 'name',
-    //   mappingValueField: 'code',
-    // },   // 非必传，业务字段已根据业务默认默认
-    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' }, // 非必传，下拉框和tableForm下拉框接口前缀，默认为bop的接口
-    selectProps, // 非必传
-    onChange: (value: any) => {
-      console.log(value)
-      setValue(value)
-    },
-    selectBusinessType: 'supplier',
-    disabled: true,
-  };
-  
-  const props2 = {
-    ...props,
-    // prefixUrl: { selectPrefix: '/channel-manage/', formSelectFix: '/channel-manage/' },
-    selectBusinessType: 'supplier2',
-  }
-  
-  const onTabChange = (key) => {
-    setTabKey(key)
-    setValue(key === 'single' ? null: [])
-  }
-  
-  return (
-    <div>
-      <Tabs onChange={onTabChange} activeKey={tabKey}>
-        <TabPane tab='单选' key='single'>
-          {tabKey === 'single' && (
-            <>
-              <span>版本1:支持英伦项目...</span>
-              <BusinessSearchSelect {...props} />
-              <span>版本2:支持麦克英孚项目...</span>
-              <BusinessSearchSelect {...props2} />
-            </>
-          )}
-        </TabPane>
-        <TabPane tab='多选' key='multiple'>
-          {tabKey === 'multiple' && (
-            <>
-              <span>版本1:支持英伦项目...</span>
-              <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />
-              <span>版本2:支持麦克英孚项目...</span>
-              <BusinessSearchSelect {...props2} selectProps={selectPropsMultiple} />
-            </>
-          )}
-        </TabPane>
-      </Tabs>
-    </div>
-  );
-};
-```
-
-
-## 商品SKU选择器 Select-SKU-001
-
-```tsx
-import React, { useState } from 'react';
-import { Tabs } from 'antd';
-import {BusinessSearchSelect} from '../../../index.ts';
-
-const { TabPane } = Tabs;
-export default () => {
-  const selectProps = {
-    // mode: 'multiple',
-    // maxTagCount: 1,
-    // disabled: true
-  }
-  const selectPropsMultiple = {
-    mode: 'multiple',
-    maxTagCount: 1,
-  }
-
-  const [ tabKey, setTabKey ] = useState('single')
-  const [value, setValue] = useState(selectProps?.mode ? [] : null);
-  
-  const props = {
-    value,
-    onChange: (value: any) => {
-      console.log(value)
-      setValue(value)
-    },
-    // requestConfig: {
-    //   url: `/bop/api/sku/pager/v2`,
-    //   filter: 'skuCodeAndSkuName',
-    //   mappingValueField: 'skuCode',
-    //   otherParams: {
-    //     sorter: 'desc-id'
-    //   }, // 默认参数
-    //   sourceName: 'skuCode',
-    // },
-    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
-    selectProps,
-    selectBusinessType: 'skuCommodity',
-  };
-
-  const onTabChange = (key) => {
-    setTabKey(key)
-    setValue(key === 'single' ? null: [])
-  }
-  
-  return (
-    <div>
-      <Tabs onChange={onTabChange} activeKey={tabKey}>
-        <TabPane tab='单选' key='single'>
-          {tabKey === 'single' && (
-            <BusinessSearchSelect {...props} />
-          )}
-        </TabPane>
-        <TabPane tab='多选' key='multiple'>
-          {tabKey === 'multiple' && (
-            <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />
-          )}
-        </TabPane>
-      </Tabs>
-    </div>
-  );
-};
-```
-
-[comment]: <> (## 商品规格选择器 Select-SPGG-001)
-
-[comment]: <> (```tsx)
-
-[comment]: <> (import React, { useState } from 'react';)
-
-[comment]: <> (import { Tabs } from 'antd';)
-
-[comment]: <> (import {BusinessSearchSelect} from '../../../index.ts';)
-
-[comment]: <> (const { TabPane } = Tabs;)
-
-[comment]: <> (export default &#40;&#41; => {)
-
-[comment]: <> (  const selectProps = {)
-
-[comment]: <> (    // mode: 'multiple',)
-
-[comment]: <> (    // maxTagCount: 1,)
-
-[comment]: <> (    // disabled: true)
-
-[comment]: <> (  })
-
-[comment]: <> (  const selectPropsMultiple = {)
-
-[comment]: <> (    mode: 'multiple',)
-
-[comment]: <> (    maxTagCount: 1,)
-
-[comment]: <> (  })
-
-[comment]: <> (  const [ tabKey, setTabKey ] = useState&#40;'single'&#41;)
-
-[comment]: <> (  const [value, setValue] = useState&#40;selectProps?.mode ? [] : null&#41;;)
-  
-[comment]: <> (  const props = {)
-
-[comment]: <> (    value,)
-
-[comment]: <> (    onChange: &#40;value: any&#41; => {)
-
-[comment]: <> (      console.log&#40;value&#41;)
-
-[comment]: <> (      setValue&#40;value&#41;)
-
-[comment]: <> (    },)
-
-[comment]: <> (    prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },)
-
-[comment]: <> (    selectProps,)
-
-[comment]: <> (    selectBusinessType: 'skuPropertyValue',)
-
-[comment]: <> (  };)
-
-[comment]: <> (  const onTabChange = &#40;key&#41; => {)
-
-[comment]: <> (    setTabKey&#40;key&#41;)
-
-[comment]: <> (    setValue&#40;key === 'single' ? null: []&#41;)
-
-[comment]: <> (  })
-  
-[comment]: <> (  return &#40;)
-
-[comment]: <> (    <div>)
-
-[comment]: <> (      <Tabs onChange={onTabChange} activeKey={tabKey}>)
-
-[comment]: <> (        <TabPane tab='单选' key='single'>)
-
-[comment]: <> (          {tabKey === 'single' && &#40;)
-
-[comment]: <> (            <BusinessSearchSelect {...props} />)
-
-[comment]: <> (          &#41;})
-
-[comment]: <> (        </TabPane>)
-
-[comment]: <> (        <TabPane tab='多选' key='multiple'>)
-
-[comment]: <> (          {tabKey === 'multiple' && &#40;)
-
-[comment]: <> (            <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />)
-
-[comment]: <> (          &#41;})
-
-[comment]: <> (        </TabPane>)
-
-[comment]: <> (      </Tabs>)
-
-[comment]: <> (    </div>)
-
-[comment]: <> (  &#41;;)
-
-[comment]: <> (};)
-
-[comment]: <> (```)
-
-## 商品SPU选择器 Select-SPU-001
-
-```tsx
-import React, { useState } from 'react';
-import { Tabs } from 'antd';
-import {BusinessSearchSelect} from '../../../index.ts';
-
-const { TabPane } = Tabs;
-export default () => {
-  const selectProps = {
-    // mode: 'multiple',
-    // maxTagCount: 1,
-    // disabled: true
-  }
-  const selectPropsMultiple = {
-    mode: 'multiple',
-    maxTagCount: 6,
-  }
-
-  const [ tabKey, setTabKey ] = useState('single')
-  const [value, setValue] = useState(selectProps?.mode ? [] : null);
-  
-  const props = {
-    value,
-    onChange: (value: any) => {
-      console.log(value)
-      setValue(value)
-    },
-    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
-    selectProps,
-    selectBusinessType: 'spuCommodity',
-  };
-
-  const onTabChange = (key) => {
-    setTabKey(key)
-    setValue(key === 'single' ? null: [])
-  }
-  
-  return (
-    <div>
-      <Tabs onChange={onTabChange} activeKey={tabKey}>
-        <TabPane tab='单选' key='single'>
-          {tabKey === 'single' && (
-            <BusinessSearchSelect {...props} />
-          )}
-        </TabPane>
-        <TabPane tab='多选' key='multiple'>
-          {tabKey === 'multiple' && (
-            <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />
-          )}
-        </TabPane>
-      </Tabs>
-    </div>
-  );
-};
-```
-
-
-## 仓库选择器(物理仓) Select-Warehouse-001
-
-```tsx
-import React, { useState, useEffect } from 'react';
-import { Tabs } from 'antd';
-import {BusinessSearchSelect} from '../../../index.ts';
-
-const { TabPane } = Tabs;
-
-export default () => {
-  const selectProps = {
-    // mode: 'multiple',
-    // maxTagCount: 1,
-    // disabled: true
-  }
-  const selectPropsMultiple = {
-    mode: 'multiple',
-    maxTagCount: 1,
-  }
-
-  const [ tabKey, setTabKey ] = useState('single')
-  const [value, setValue] = useState(selectProps?.mode ? [] : null);
-  
-  useEffect(() => {
-    if(tabKey === 'multiple') {
-      setValue(['1540295745870573570', '1540173160826613762'])
-    }
-  },[tabKey])
-  
-  const props = {
-    value,
-    onChange: (value: any) => {
-      console.log(value)
-      setValue(value)
-    },
-    requestConfig: {
-      // mappingValueField: 'physicalWarehouseCode',
-      // sourceName: 'physicalWarehouseCode',
-      filterInit: 'qp-id-in'
-    },
-    // modalTableProps: {
-    //   modalTableTitle: '选择物理仓-更改title测试',
-    //   needModalTable: false
-    // },
-    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
-    selectProps,
-    // labelInValue: true,
-    selectBusinessType: 'physicalWarehouse',
-  };
-
-  const onTabChange = (key) => {
-    setTabKey(key)
-    setValue(key === 'single' ? null: [])
-  }
-  
-  return (
-    <div>
-      <Tabs onChange={onTabChange} activeKey={tabKey}>
-        <TabPane tab='单选' key='single'>
-          {tabKey === 'single' && (
-            <BusinessSearchSelect {...props} />
-          )}
-        </TabPane>
-        <TabPane tab='多选' key='multiple'>
-          {tabKey === 'multiple' && (
-            <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />
-          )}
-        </TabPane>
-      </Tabs>
-    </div>
-  );
-};
-```
-
-## 仓库选择器(逻辑仓) Select-Warehouse-002
-
-```tsx
-import React, { useState } from 'react';
-import { Tabs } from 'antd';
-import {BusinessSearchSelect} from '../../../index.ts';
-
-const { TabPane } = Tabs;
-
-export default () => {
-  const selectProps = {
-    // mode: 'multiple',
-    // maxTagCount: 1,
-    // disabled: true
-  }
-  const selectPropsMultiple = {
-    mode: 'multiple',
-    maxTagCount: 1,
-  }
-
-  const [ tabKey, setTabKey ] = useState('single')
-  const [value, setValue] = useState(selectProps?.mode ? [] : null);
-  
-  const props = {
-    value,
-    onChange: (value: any) => {
-      console.log(value)
-      setValue(value)
-    },
-    // requestConfig: {
-    //   url: `/bop/api/realWarehouse`,
-    //   filter: 'qp-realWarehouseName,realWarehouseCode-orGroup,like',
-    //   mappingTextField: 'realWarehouseName',
-    //   mappingValueField: 'realWarehouseCode',
-    //   otherParams: {
-    //     sorter: 'desc-id'
-    //   }, // 默认参数
-    //   sourceName: 'warehouseIds',
-    // },
-    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
-    selectProps,
-    selectBusinessType: 'realWarehouse',
-  };
-
-  const onTabChange = (key) => {
-    setTabKey(key)
-    setValue(key === 'single' ? null: [])
-  }
-  
-  return (
-    <div>
-      <Tabs onChange={onTabChange} activeKey={tabKey}>
-        <TabPane tab='单选' key='single'>
-          {tabKey === 'single' && (
-            <BusinessSearchSelect {...props} />
-          )}
-        </TabPane>
-        <TabPane tab='多选' key='multiple'>
-          {tabKey === 'multiple' && (
-            <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />
-          )}
-        </TabPane>
-      </Tabs>
-    </div>
-  );
-};
-```
-
-## 仓库选择器(虚拟仓) Select-Warehouse-003
-
-```tsx
-import React, { useState } from 'react';
-import { Tabs } from 'antd';
-import {BusinessSearchSelect} from '../../../index.ts';
-
-const { TabPane } = Tabs;
-
-export default () => {
-  const selectProps = {
-    // mode: 'multiple',
-    // maxTagCount: 1,
-    // disabled: true
-  }
-  const selectPropsMultiple = {
-    mode: 'multiple',
-    maxTagCount: 1,
-  }
-
-  const [ tabKey, setTabKey ] = useState('single')
-  const [value, setValue] = useState(selectProps?.mode ? [] : null);
-  
-  const props = {
-    value,
-    onChange: (value: any) => {
-      console.log(value)
-      setValue(value)
-    },
-    // requestConfig: {
-    //   url: `/bop/api/virtualWarehouse`,
-    //   filter: 'qp-virtualWarehouseName,virtualWarehouseCode-orGroup,like',
-    //   mappingTextField: 'virtualWarehouseName',
-    //   mappingValueField: 'virtualWarehouseCode',
-    //   otherParams: {
-    //     sorter: 'desc-id'
-    //   }, // 默认参数
-    //   sourceName: 'warehouseIds',
-    // },
-    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
-    selectProps,
-    selectBusinessType: 'virtualWarehouse',
-  };
-
-  const onTabChange = (key) => {
-    setTabKey(key)
-    setValue(key === 'single' ? null: [])
-  }
-  
-  return (
-    <div>
-      <Tabs onChange={onTabChange} activeKey={tabKey}>
-        <TabPane tab='单选' key='single'>
-          {tabKey === 'single' && (
-            <BusinessSearchSelect {...props} />
-          )}
-        </TabPane>
-        <TabPane tab='多选' key='multiple'>
-          {tabKey === 'multiple' && (
-            <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />
-          )}
-        </TabPane>
-      </Tabs>
-    </div>
-  );
-};
-```
-
-## 仓库选择器(渠道仓) Select-Warehouse-004
-
-```tsx
-import React, { useState } from 'react';
-import { Tabs } from 'antd';
-import {BusinessSearchSelect} from '../../../index.ts';
-
-const { TabPane } = Tabs;
-
-export default () => {
-  const selectProps = {
-    // mode: 'multiple',
-    // maxTagCount: 1,
-    // disabled: true
-  }
-  const selectPropsMultiple = {
-    mode: 'multiple',
-    maxTagCount: 1,
-  }
-
-  const [ tabKey, setTabKey ] = useState('single')
-  const [value, setValue] = useState(selectProps?.mode ? [] : null);
-  
-  const props = {
-    value,
-    onChange: (value: any) => {
-      console.log(value)
-      setValue(value)
-    },
-    // requestConfig: {
-    //   url: `/bop/api/channelWarehouse`,
-    //   filter: 'qp-channelWarehouseName,channelWarehouseCode-orGroup,like',
-    //   mappingTextField: 'channelWarehouseName',
-    //   mappingValueField: 'channelWarehouseCode',
-    //   otherParams: {
-    //     sorter: 'desc-id'
-    //   }, // 默认参数
-    //   sourceName: 'warehouseIds',
-    // },
-    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
-    selectProps,
-    selectBusinessType: 'channelWarehouse',
-  };
-
-  const onTabChange = (key) => {
-    setTabKey(key)
-    setValue(key === 'single' ? null: [])
-  }
-  
-  return (
-    <div>
-      <Tabs onChange={onTabChange} activeKey={tabKey}>
-        <TabPane tab='单选' key='single'>
-          {tabKey === 'single' && (
-            <BusinessSearchSelect {...props} />
-          )}
-        </TabPane>
-        <TabPane tab='多选' key='multiple'>
-          {tabKey === 'multiple' && (
-            <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />
-          )}
-        </TabPane>
-      </Tabs>
-    </div>
-  );
-};
-```
-
-
-## 客户选择器 Select-KH-001
-
-```tsx
-import React, { useState } from 'react';
-import { Tabs } from 'antd';
-import {BusinessSearchSelect} from '../../../index.ts';
-
-const { TabPane } = Tabs;
-
-export default () => {
-  const selectProps = {
-    // mode: 'multiple',
-    // maxTagCount: 1,
-    // disabled: true
-  }
-  const selectPropsMultiple = {
-    mode: 'multiple',
-    maxTagCount: 1,
-  }
-
-  const [ tabKey, setTabKey ] = useState('single')
-  const [value, setValue] = useState(selectProps?.mode ? [] : null);
-  
-  const props = {
-    value,
-    onChange: (value: any) => {
-      console.log(value)
-      setValue(value)
-    },
-    // requestConfig: {
-    //   url: `/bop/api/customer`,
-    // filter: 'qp-name,code-orGroup,like', // 过滤参数
-    // mappingTextField: 'name',
-    // mappingValueField: 'code',
-    //   otherParams: {
-    //     sorter: 'desc-id'
-    //   }, // 默认参数
-    //   sourceName: 'customerCode',
-    // },
-    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
-    selectProps,
-    selectBusinessType: 'customer',
-  };
-
-  const props2 = {
-    ...props,
-    // prefixUrl: { selectPrefix: '/channel-manage/', formSelectFix: '/channel-manage/' },
-    selectBusinessType: 'customer2',
-  }
-
-  const onTabChange = (key) => {
-    setTabKey(key)
-    setValue(key === 'single' ? null: [])
-  }
-  
-  return (
-    <div>
-      <Tabs onChange={onTabChange} activeKey={tabKey}>
-        <TabPane tab='单选' key='single'>
-          {tabKey === 'single' && (
-            <>
-              <span>版本1:支持英伦项目...</span>
-              <BusinessSearchSelect {...props} />
-              <span>版本2:支持麦克英孚项目...</span>
-              <BusinessSearchSelect {...props2} />
-            </>
-          )}
-        </TabPane>
-        <TabPane tab='多选' key='multiple'>
-          {tabKey === 'multiple' && (
-            <>
-              <span>版本1:支持英伦项目...</span>
-              <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />
-              <span>版本2:支持麦克英孚项目...</span>
-              <BusinessSearchSelect {...props2} selectProps={selectPropsMultiple} />
-            </>
-          )}
-        </TabPane>
-      </Tabs>
-    </div>
-  );
-};
-```
-
-
-## 店铺选择器 Select-DP-001
-
-```tsx
-import React, { useState } from 'react';
-import { Tabs } from 'antd';
-import {BusinessSearchSelect} from '../../../index.ts';
-
-const { TabPane } = Tabs;
-
-export default () => {
-  const selectProps = {
-    // mode: 'multiple',
-    // maxTagCount: 1,
-    // disabled: true
-  }
-  const selectPropsMultiple = {
-    mode: 'multiple',
-    maxTagCount: 1,
-  }
-
-  const [ tabKey, setTabKey ] = useState('single')
-  const [value, setValue] = useState(selectProps?.mode ? [] : null);
-  
-  const props = {
-    value,
-    onChange: (value: any) => {
-      console.log(value)
-      setValue(value)
-    },
-    // requestConfig: {
-    //   url: `/bop/api/store`,
-    //   filter: 'qp-name,code-orGroup,like',,
-    //   mappingTextField: 'name',
-    //   mappingValueField: 'code',
-    //   otherParams: {
-    //     sorter: 'desc-id'
-    //   }, // 默认参数
-    //   sourceName: 'code',
-    // },
-    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
-    selectProps,
-    selectBusinessType: 'shopFile',
-  };
-
-  const props2 = {
-    ...props,
-    // prefixUrl: { selectPrefix: '/channel-manage/', formSelectFix: '/channel-manage/' },
-    selectBusinessType: 'shopFile2',
-  }
-
-  const onTabChange = (key) => {
-    setTabKey(key)
-    setValue(key === 'single' ? null: [])
-  }
-  
-  return (
-    <div>
-      <Tabs onChange={onTabChange} activeKey={tabKey}>
-        <TabPane tab='单选' key='single'>
-          {tabKey === 'single' && (
-            <>
-              <span>版本1:支持英伦项目...</span>
-              <BusinessSearchSelect {...props} />
-              <span>版本2:支持麦克英孚项目...</span>
-              <BusinessSearchSelect {...props2} />
-            </>
-          )}
-        </TabPane>
-        <TabPane tab='多选' key='multiple'>
-          {tabKey === 'multiple' && (
-            <>
-              <span>版本1:支持英伦项目...</span>
-              <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />
-              <span>版本2:支持麦克英孚项目...</span>
-              <BusinessSearchSelect {...props2} selectProps={selectPropsMultiple} />
-            </>
-          )}
-        </TabPane>
-      </Tabs>
-    </div>
-  );
-};
-```
-
-
-## 核算主体选择器 Select-HSZT-001
-
-```tsx
-import React, { useState } from 'react';
-import { Tabs } from 'antd';
-import {BusinessSearchSelect} from '../../../index.ts';
-
-const { TabPane } = Tabs;
-
-export default () => {
-  const selectProps = {
-    // mode: 'multiple',
-    // maxTagCount: 1,
-    // disabled: true
-  }
-  const selectPropsMultiple = {
-    mode: 'multiple',
-    maxTagCount: 1,
-  }
-
-  const [ tabKey, setTabKey ] = useState('single')
-  const [value, setValue] = useState(selectProps?.mode ? [] : null);
-  
-  const props = {
-    value,
-    onChange: (value: any) => {
-      console.log(value)
-      setValue(value)
-    },
-    // requestConfig: {
-    //   url: `/bop/api/accountingSubject`,
-    //   filter: 'qp-name,code-orGroup,like',
-    //   mappingTextField: 'name',
-    //   mappingValueField: 'code',
-    //   otherParams: {
-    //     sorter: 'desc-id'
-    //   }, // 默认参数
-    //   sourceName: 'accountingCode',
-    // },
-    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
-    selectProps,
-    selectBusinessType: 'accountingSubject',
-  };
-
-  const onTabChange = (key) => {
-    setTabKey(key)
-    setValue(key === 'single' ? null: [])
-  }
-  
-  return (
-    <div>
-      <Tabs onChange={onTabChange} activeKey={tabKey}>
-        <TabPane tab='单选' key='single'>
-          {tabKey === 'single' && (
-            <BusinessSearchSelect {...props} />
-          )}
-        </TabPane>
-        <TabPane tab='多选' key='multiple'>
-          {tabKey === 'multiple' && (
-            <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />
-          )}
-        </TabPane>
-      </Tabs>
-    </div>
-  );
-};
-```
-
-
-## 库存组织选择器 Select-KCZZ-001
-
-```tsx
-import React, { useState } from 'react';
-import { Tabs } from 'antd';
-import {BusinessSearchSelect} from '../../../index.ts';
-
-const { TabPane } = Tabs;
-
-export default () => {
-  const selectProps = {
-    // mode: 'multiple',
-    // maxTagCount: 1,
-    // disabled: true
-  }
-  const selectPropsMultiple = {
-    mode: 'multiple',
-    maxTagCount: 1,
-  }
-
-  const [ tabKey, setTabKey ] = useState('single')
-  const [value, setValue] = useState(selectProps?.mode ? [] : null);
-  
-  const props = {
-    value,
-    onChange: (value: any) => {
-      console.log(value)
-      setValue(value)
-    },
-    // requestConfig: {
-    //   url: `/bop/api/inventoryOrg`,
-    //   filter: 'qp-name,code-orGroup,like',
-    //   mappingTextField: 'name',
-    //   mappingValueField: 'code',
-    //   otherParams: {
-    //     sorter: 'desc-id'
-    //   }, // 默认参数
-    //   sourceName: 'inventoryOrgCode',
-    // },
-    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
-    selectProps,
-    selectBusinessType: 'inventoryOrg',
-  };
-
-  const props2 = {
-    ...props,
-    selectBusinessType: 'inventoryOrg2',
-  }
-
-  const onTabChange = (key) => {
-    setTabKey(key)
-    setValue(key === 'single' ? null: [])
-  }
-  
-  return (
-    
-    <div>
-      <Tabs onChange={onTabChange} activeKey={tabKey}>
-        <TabPane tab='单选' key='single'>
-          {tabKey === 'single' && <BusinessSearchSelect {...props} />}
-        </TabPane>
-        <TabPane tab='多选' key='multiple'>
-          {tabKey === 'multiple' && <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />}
-        </TabPane>
-      </Tabs>
-    </div>
-  );
-};
-```
-
-
-## 法人公司选择器 Select-FRGS-001
-
-```tsx
-import React, { useState } from 'react';
-import { Tabs } from 'antd';
-import {BusinessSearchSelect} from '../../../index.ts';
-
-const { TabPane } = Tabs;
-
-export default () => {
-  const selectProps = {
-    // mode: 'multiple',
-    // maxTagCount: 1,
-    // disabled: true
-  }
-  const selectPropsMultiple = {
-    mode: 'multiple',
-    maxTagCount: 1,
-  }
-
-  const [ tabKey, setTabKey ] = useState('single')
-  const [value, setValue] = useState(selectProps?.mode ? [] : null);
-  
-  const props = {
-    value,
-    onChange: (value: any) => {
-      console.log(value)
-      setValue(value)
-    },
-    // requestConfig: {
-    //   url: `/bop/api/company`,
-    //   filter: 'qp-name,code-orGroup,like',
-    //   mappingTextField: 'name',
-    //   mappingValueField: 'code',
-    //   otherParams: {
-    //    'qp-companyType-eq': '20',
-    //     sorter: 'desc-id'
-    //   }, // 默认参数
-    //   sourceName: 'companyCode',
-    // },
-    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
-    selectProps,
-    selectBusinessType: 'corporationCompany',
-  };
-
-  const onTabChange = (key) => {
-    setTabKey(key)
-    setValue(key === 'single' ? null: [])
-  }
-  
-  return (
-    <div>
-      <Tabs onChange={onTabChange} activeKey={tabKey}>
-        <TabPane tab='单选' key='single'>
-          {tabKey === 'single' && (
-            <BusinessSearchSelect {...props} />
-          )}
-        </TabPane>
-        <TabPane tab='多选' key='multiple'>
-          {tabKey === 'multiple' && (
-            <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />
-          )}
-        </TabPane>
-      </Tabs>
-    </div>
-  );
-};
-```
-
-
-## 员工选择器 Select-YG-001
-
-```tsx
-import React, { useState } from 'react';
-import { Tabs } from 'antd';
-import {BusinessSearchSelect} from '../../../index.ts';
-
-const { TabPane } = Tabs;
-
-export default () => {
-  const selectProps = {
-    // mode: 'multiple',
-    // maxTagCount: 1,
-    // disabled: true
-  }
-  const selectPropsMultiple = {
-    mode: 'multiple',
-    maxTagCount: 1,
-  }
-
-  const [ tabKey, setTabKey ] = useState('single')
-  const [value, setValue] = useState(selectProps?.mode ? [] : null);
-  
-  const props = {
-    value,
-    onChange: (value: any) => {
-      console.log(value)
-      setValue(value)
-    },
-    // requestConfig: {
-    //   url: `/bop/api/employee`,
-    //   filter: 'qp-name,code-orGroup,like',
-    //   mappingTextField: 'name',
-    //   mappingValueField: 'code',
-    //   otherParams: {
-    //     sorter: 'desc-id'
-    //   }, // 默认参数
-    //   sourceName: 'code',
-    // },
-    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
-    selectProps,
-    selectBusinessType: 'employee',
-  };
-  
-  const props2 = {
-    ...props,
-    // prefixUrl: { selectPrefix: '/user/api', formSelectFix: '/user/api' },
-    selectBusinessType: 'employee2',
-  }
-
-  const onTabChange = (key) => {
-    setTabKey(key)
-    setValue(key === 'single' ? null: [])
-  }
-  
-  return (
-    <div>
-      <Tabs onChange={onTabChange} activeKey={tabKey}>
-        <TabPane tab='单选' key='single'>
-          {tabKey === 'single' && (
-            <>
-              <span>版本1:支持英伦项目...</span>
-              <BusinessSearchSelect {...props} />
-              <span>版本2:支持麦克英孚项目...</span>
-              <BusinessSearchSelect {...props2} />
-            </>
-          )}
-        </TabPane>
-        <TabPane tab='多选' key='multiple'>
-          {tabKey === 'multiple' && (
-            <>
-              <span>版本1:支持英伦项目...</span>
-              <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />
-              <span>版本2:支持麦克英孚项目...</span>
-              <BusinessSearchSelect {...props2} selectProps={selectPropsMultiple} />
-            </>
-          )}
-        </TabPane>
-      </Tabs>
-    </div>
-  );
-};
-```
-
-
-## 配送方式选择器 Select-PSFS-001
-
-```tsx
-import React, { useState } from 'react';
-import { Tabs } from 'antd';
-import {BusinessSearchSelect} from '../../../index.ts';
-
-const { TabPane } = Tabs;
-
-export default () => {
-  const selectProps = {
-    // mode: 'multiple',
-    // maxTagCount: 1,
-    // disabled: true
-  }
-  const selectPropsMultiple = {
-    mode: 'multiple',
-    maxTagCount: 1,
-  }
-
-  const [ tabKey, setTabKey ] = useState('single')
-  const [value, setValue] = useState(selectProps?.mode ? [] : null);
-  
-  const props = {
-    value,
-    onChange: (value: any) => {
-      console.log(value)
-      setValue(value)
-    },
-    // requestConfig: {
-    //   url: `/bop/api/getDeliveryModeCodeNameMap`,
-    //   filter: 'qp-name,code-orGroup,like',
-    //   mappingTextField: 'name',
-    //   mappingValueField: 'code',
-    //   otherParams: {
-    //     sorter: 'desc-id'
-    //   }, // 默认参数
-    //   sourceName: 'deliveryModeCode',
-    // },
-    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
-    selectProps,
-    selectBusinessType: 'deliveryMode',
-  };
-
-  const onTabChange = (key) => {
-    setTabKey(key)
-    setValue(key === 'single' ? null: [])
-  }
-  
-  return (
-    <div>
-      <Tabs onChange={onTabChange} activeKey={tabKey}>
-        <TabPane tab='单选' key='single'>
-          {tabKey === 'single' && (
-            <BusinessSearchSelect {...props} />
-          )}
-        </TabPane>
-        <TabPane tab='多选' key='multiple'>
-          {tabKey === 'multiple' && (
-            <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />
-          )}
-        </TabPane>
-      </Tabs>
-    </div>
-  );
-};
-```
-
-More skills for writing demo: https://d.umijs.org/guide/demo-principle
+---
+nav:
+  title: '组件'
+  order: 1
+group:
+  title: 业务组件
+  order: 1
+title: 业务档案选择器
+order: 1
+---
+
+# BusinessSearchSelect
+
+
+## 供应商选择器 Select-GYS-001
+
+```tsx
+import React, { useState } from 'react';
+import { Tabs } from 'antd';
+import {BusinessSearchSelect} from '../../../index.ts';
+
+const { TabPane } = Tabs;
+
+export default () => {
+  // selectBusinessType 必传（不传默认为供应商选择器）
+  
+  const selectProps = {
+    // mode: 'multiple',
+    // maxTagCount: 1,
+    // disabled: true
+  }
+  const selectPropsMultiple = {
+    mode: 'multiple',
+    maxTagCount: 1,
+  }
+  
+  const [ tabKey, setTabKey ] = useState('single')
+  const [value, setValue] = useState(null);
+  
+  const props = {
+    value,
+    // labelInValue: true, // 非必填 默认为false
+    // requestConfig: {
+    //   url: `/bop/api/supplier`,
+    //   filter: 'qp-name,code-orGroup,like', // 过滤参数
+    //   otherParams: {}, // 默认参数
+    //   mappingTextField: 'name',
+    //   mappingValueField: 'code',
+    // },   // 非必传，业务字段已根据业务默认默认
+    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' }, // 非必传，下拉框和tableForm下拉框接口前缀，默认为bop的接口
+    selectProps, // 非必传
+    onChange: (value: any) => {
+      console.log(value)
+      setValue(value)
+    },
+    selectBusinessType: 'supplier',
+    disabled: true,
+  };
+  
+  const props2 = {
+    ...props,
+    // prefixUrl: { selectPrefix: '/channel-manage/', formSelectFix: '/channel-manage/' },
+    selectBusinessType: 'supplier2',
+  }
+  
+  const onTabChange = (key) => {
+    setTabKey(key)
+    setValue(key === 'single' ? null: [])
+  }
+  
+  return (
+    <div>
+      <Tabs onChange={onTabChange} activeKey={tabKey}>
+        <TabPane tab='单选' key='single'>
+          {tabKey === 'single' && (
+            <>
+              <span>版本1:支持英伦项目...</span>
+              <BusinessSearchSelect {...props} />
+              <span>版本2:支持麦克英孚项目...</span>
+              <BusinessSearchSelect {...props2} />
+            </>
+          )}
+        </TabPane>
+        <TabPane tab='多选' key='multiple'>
+          {tabKey === 'multiple' && (
+            <>
+              <span>版本1:支持英伦项目...</span>
+              <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />
+              <span>版本2:支持麦克英孚项目...</span>
+              <BusinessSearchSelect {...props2} selectProps={selectPropsMultiple} />
+            </>
+          )}
+        </TabPane>
+      </Tabs>
+    </div>
+  );
+};
+```
+
+
+## 商品SKU选择器 Select-SKU-001
+
+```tsx
+import React, { useState } from 'react';
+import { Tabs } from 'antd';
+import {BusinessSearchSelect} from '../../../index.ts';
+
+const { TabPane } = Tabs;
+export default () => {
+  const selectProps = {
+    // mode: 'multiple',
+    // maxTagCount: 1,
+    // disabled: true
+  }
+  const selectPropsMultiple = {
+    mode: 'multiple',
+    maxTagCount: 1,
+  }
+
+  const [ tabKey, setTabKey ] = useState('single')
+  const [value, setValue] = useState(selectProps?.mode ? [] : null);
+  
+  const props = {
+    value,
+    onChange: (value: any) => {
+      console.log(value)
+      setValue(value)
+    },
+    // requestConfig: {
+    //   url: `/bop/api/sku/pager/v2`,
+    //   filter: 'skuCodeAndSkuName',
+    //   mappingValueField: 'skuCode',
+    //   otherParams: {
+    //     sorter: 'desc-id'
+    //   }, // 默认参数
+    //   sourceName: 'skuCode',
+    // },
+    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
+    selectProps,
+    selectBusinessType: 'skuCommodity',
+  };
+
+  const onTabChange = (key) => {
+    setTabKey(key)
+    setValue(key === 'single' ? null: [])
+  }
+  
+  return (
+    <div>
+      <Tabs onChange={onTabChange} activeKey={tabKey}>
+        <TabPane tab='单选' key='single'>
+          {tabKey === 'single' && (
+            <BusinessSearchSelect {...props} />
+          )}
+        </TabPane>
+        <TabPane tab='多选' key='multiple'>
+          {tabKey === 'multiple' && (
+            <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />
+          )}
+        </TabPane>
+      </Tabs>
+    </div>
+  );
+};
+```
+
+[comment]: <> (## 商品规格选择器 Select-SPGG-001)
+
+[comment]: <> (```tsx)
+
+[comment]: <> (import React, { useState } from 'react';)
+
+[comment]: <> (import { Tabs } from 'antd';)
+
+[comment]: <> (import {BusinessSearchSelect} from '../../../index.ts';)
+
+[comment]: <> (const { TabPane } = Tabs;)
+
+[comment]: <> (export default &#40;&#41; => {)
+
+[comment]: <> (  const selectProps = {)
+
+[comment]: <> (    // mode: 'multiple',)
+
+[comment]: <> (    // maxTagCount: 1,)
+
+[comment]: <> (    // disabled: true)
+
+[comment]: <> (  })
+
+[comment]: <> (  const selectPropsMultiple = {)
+
+[comment]: <> (    mode: 'multiple',)
+
+[comment]: <> (    maxTagCount: 1,)
+
+[comment]: <> (  })
+
+[comment]: <> (  const [ tabKey, setTabKey ] = useState&#40;'single'&#41;)
+
+[comment]: <> (  const [value, setValue] = useState&#40;selectProps?.mode ? [] : null&#41;;)
+  
+[comment]: <> (  const props = {)
+
+[comment]: <> (    value,)
+
+[comment]: <> (    onChange: &#40;value: any&#41; => {)
+
+[comment]: <> (      console.log&#40;value&#41;)
+
+[comment]: <> (      setValue&#40;value&#41;)
+
+[comment]: <> (    },)
+
+[comment]: <> (    prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },)
+
+[comment]: <> (    selectProps,)
+
+[comment]: <> (    selectBusinessType: 'skuPropertyValue',)
+
+[comment]: <> (  };)
+
+[comment]: <> (  const onTabChange = &#40;key&#41; => {)
+
+[comment]: <> (    setTabKey&#40;key&#41;)
+
+[comment]: <> (    setValue&#40;key === 'single' ? null: []&#41;)
+
+[comment]: <> (  })
+  
+[comment]: <> (  return &#40;)
+
+[comment]: <> (    <div>)
+
+[comment]: <> (      <Tabs onChange={onTabChange} activeKey={tabKey}>)
+
+[comment]: <> (        <TabPane tab='单选' key='single'>)
+
+[comment]: <> (          {tabKey === 'single' && &#40;)
+
+[comment]: <> (            <BusinessSearchSelect {...props} />)
+
+[comment]: <> (          &#41;})
+
+[comment]: <> (        </TabPane>)
+
+[comment]: <> (        <TabPane tab='多选' key='multiple'>)
+
+[comment]: <> (          {tabKey === 'multiple' && &#40;)
+
+[comment]: <> (            <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />)
+
+[comment]: <> (          &#41;})
+
+[comment]: <> (        </TabPane>)
+
+[comment]: <> (      </Tabs>)
+
+[comment]: <> (    </div>)
+
+[comment]: <> (  &#41;;)
+
+[comment]: <> (};)
+
+[comment]: <> (```)
+
+## 商品SPU选择器 Select-SPU-001
+
+```tsx
+import React, { useState } from 'react';
+import { Tabs } from 'antd';
+import {BusinessSearchSelect} from '../../../index.ts';
+
+const { TabPane } = Tabs;
+export default () => {
+  const selectProps = {
+    // mode: 'multiple',
+    // maxTagCount: 1,
+    // disabled: true
+  }
+  const selectPropsMultiple = {
+    mode: 'multiple',
+    maxTagCount: 6,
+  }
+
+  const [ tabKey, setTabKey ] = useState('single')
+  const [value, setValue] = useState(selectProps?.mode ? [] : null);
+  
+  const props = {
+    value,
+    onChange: (value: any) => {
+      console.log(value)
+      setValue(value)
+    },
+    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
+    selectProps,
+    selectBusinessType: 'spuCommodity',
+  };
+
+  const onTabChange = (key) => {
+    setTabKey(key)
+    setValue(key === 'single' ? null: [])
+  }
+  
+  return (
+    <div>
+      <Tabs onChange={onTabChange} activeKey={tabKey}>
+        <TabPane tab='单选' key='single'>
+          {tabKey === 'single' && (
+            <BusinessSearchSelect {...props} />
+          )}
+        </TabPane>
+        <TabPane tab='多选' key='multiple'>
+          {tabKey === 'multiple' && (
+            <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />
+          )}
+        </TabPane>
+      </Tabs>
+    </div>
+  );
+};
+```
+
+
+## 仓库选择器(物理仓) Select-Warehouse-001
+
+```tsx
+import React, { useState, useEffect } from 'react';
+import { Tabs } from 'antd';
+import {BusinessSearchSelect} from '../../../index.ts';
+
+const { TabPane } = Tabs;
+
+export default () => {
+  const selectProps = {
+    // mode: 'multiple',
+    // maxTagCount: 1,
+    // disabled: true
+  }
+  const selectPropsMultiple = {
+    mode: 'multiple',
+    maxTagCount: 1,
+  }
+
+  const [ tabKey, setTabKey ] = useState('single')
+  const [value, setValue] = useState(selectProps?.mode ? [] : null);
+  
+  useEffect(() => {
+    if(tabKey === 'multiple') {
+      setValue(['1540295745870573570', '1540173160826613762'])
+    }
+  },[tabKey])
+  
+  const props = {
+    value,
+    onChange: (value: any) => {
+      console.log(value)
+      setValue(value)
+    },
+    requestConfig: {
+      // mappingValueField: 'physicalWarehouseCode',
+      // sourceName: 'physicalWarehouseCode',
+      filterInit: 'qp-id-in'
+    },
+    // modalTableProps: {
+    //   modalTableTitle: '选择物理仓-更改title测试',
+    //   needModalTable: false
+    // },
+    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
+    selectProps,
+    // labelInValue: true,
+    selectBusinessType: 'physicalWarehouse',
+  };
+
+  const onTabChange = (key) => {
+    setTabKey(key)
+    setValue(key === 'single' ? null: [])
+  }
+  
+  return (
+    <div>
+      <Tabs onChange={onTabChange} activeKey={tabKey}>
+        <TabPane tab='单选' key='single'>
+          {tabKey === 'single' && (
+            <BusinessSearchSelect {...props} />
+          )}
+        </TabPane>
+        <TabPane tab='多选' key='multiple'>
+          {tabKey === 'multiple' && (
+            <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />
+          )}
+        </TabPane>
+      </Tabs>
+    </div>
+  );
+};
+```
+
+## 仓库选择器(逻辑仓) Select-Warehouse-002
+
+```tsx
+import React, { useState } from 'react';
+import { Tabs } from 'antd';
+import {BusinessSearchSelect} from '../../../index.ts';
+
+const { TabPane } = Tabs;
+
+export default () => {
+  const selectProps = {
+    // mode: 'multiple',
+    // maxTagCount: 1,
+    // disabled: true
+  }
+  const selectPropsMultiple = {
+    mode: 'multiple',
+    maxTagCount: 1,
+  }
+
+  const [ tabKey, setTabKey ] = useState('single')
+  const [value, setValue] = useState(selectProps?.mode ? [] : null);
+  
+  const props = {
+    value,
+    onChange: (value: any) => {
+      console.log(value)
+      setValue(value)
+    },
+    // requestConfig: {
+    //   url: `/bop/api/realWarehouse`,
+    //   filter: 'qp-realWarehouseName,realWarehouseCode-orGroup,like',
+    //   mappingTextField: 'realWarehouseName',
+    //   mappingValueField: 'realWarehouseCode',
+    //   otherParams: {
+    //     sorter: 'desc-id'
+    //   }, // 默认参数
+    //   sourceName: 'warehouseIds',
+    // },
+    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
+    selectProps,
+    selectBusinessType: 'realWarehouse',
+  };
+
+  const onTabChange = (key) => {
+    setTabKey(key)
+    setValue(key === 'single' ? null: [])
+  }
+  
+  return (
+    <div>
+      <Tabs onChange={onTabChange} activeKey={tabKey}>
+        <TabPane tab='单选' key='single'>
+          {tabKey === 'single' && (
+            <BusinessSearchSelect {...props} />
+          )}
+        </TabPane>
+        <TabPane tab='多选' key='multiple'>
+          {tabKey === 'multiple' && (
+            <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />
+          )}
+        </TabPane>
+      </Tabs>
+    </div>
+  );
+};
+```
+
+## 仓库选择器(虚拟仓) Select-Warehouse-003
+
+```tsx
+import React, { useState } from 'react';
+import { Tabs } from 'antd';
+import {BusinessSearchSelect} from '../../../index.ts';
+
+const { TabPane } = Tabs;
+
+export default () => {
+  const selectProps = {
+    // mode: 'multiple',
+    // maxTagCount: 1,
+    // disabled: true
+  }
+  const selectPropsMultiple = {
+    mode: 'multiple',
+    maxTagCount: 1,
+  }
+
+  const [ tabKey, setTabKey ] = useState('single')
+  const [value, setValue] = useState(selectProps?.mode ? [] : null);
+  
+  const props = {
+    value,
+    onChange: (value: any) => {
+      console.log(value)
+      setValue(value)
+    },
+    // requestConfig: {
+    //   url: `/bop/api/virtualWarehouse`,
+    //   filter: 'qp-virtualWarehouseName,virtualWarehouseCode-orGroup,like',
+    //   mappingTextField: 'virtualWarehouseName',
+    //   mappingValueField: 'virtualWarehouseCode',
+    //   otherParams: {
+    //     sorter: 'desc-id'
+    //   }, // 默认参数
+    //   sourceName: 'warehouseIds',
+    // },
+    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
+    selectProps,
+    selectBusinessType: 'virtualWarehouse',
+  };
+
+  const onTabChange = (key) => {
+    setTabKey(key)
+    setValue(key === 'single' ? null: [])
+  }
+  
+  return (
+    <div>
+      <Tabs onChange={onTabChange} activeKey={tabKey}>
+        <TabPane tab='单选' key='single'>
+          {tabKey === 'single' && (
+            <BusinessSearchSelect {...props} />
+          )}
+        </TabPane>
+        <TabPane tab='多选' key='multiple'>
+          {tabKey === 'multiple' && (
+            <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />
+          )}
+        </TabPane>
+      </Tabs>
+    </div>
+  );
+};
+```
+
+## 仓库选择器(渠道仓) Select-Warehouse-004
+
+```tsx
+import React, { useState } from 'react';
+import { Tabs } from 'antd';
+import {BusinessSearchSelect} from '../../../index.ts';
+
+const { TabPane } = Tabs;
+
+export default () => {
+  const selectProps = {
+    // mode: 'multiple',
+    // maxTagCount: 1,
+    // disabled: true
+  }
+  const selectPropsMultiple = {
+    mode: 'multiple',
+    maxTagCount: 1,
+  }
+
+  const [ tabKey, setTabKey ] = useState('single')
+  const [value, setValue] = useState(selectProps?.mode ? [] : null);
+  
+  const props = {
+    value,
+    onChange: (value: any) => {
+      console.log(value)
+      setValue(value)
+    },
+    // requestConfig: {
+    //   url: `/bop/api/channelWarehouse`,
+    //   filter: 'qp-channelWarehouseName,channelWarehouseCode-orGroup,like',
+    //   mappingTextField: 'channelWarehouseName',
+    //   mappingValueField: 'channelWarehouseCode',
+    //   otherParams: {
+    //     sorter: 'desc-id'
+    //   }, // 默认参数
+    //   sourceName: 'warehouseIds',
+    // },
+    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
+    selectProps,
+    selectBusinessType: 'channelWarehouse',
+  };
+
+  const onTabChange = (key) => {
+    setTabKey(key)
+    setValue(key === 'single' ? null: [])
+  }
+  
+  return (
+    <div>
+      <Tabs onChange={onTabChange} activeKey={tabKey}>
+        <TabPane tab='单选' key='single'>
+          {tabKey === 'single' && (
+            <BusinessSearchSelect {...props} />
+          )}
+        </TabPane>
+        <TabPane tab='多选' key='multiple'>
+          {tabKey === 'multiple' && (
+            <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />
+          )}
+        </TabPane>
+      </Tabs>
+    </div>
+  );
+};
+```
+
+
+## 客户选择器 Select-KH-001
+
+```tsx
+import React, { useState } from 'react';
+import { Tabs } from 'antd';
+import {BusinessSearchSelect} from '../../../index.ts';
+
+const { TabPane } = Tabs;
+
+export default () => {
+  const selectProps = {
+    // mode: 'multiple',
+    // maxTagCount: 1,
+    // disabled: true
+  }
+  const selectPropsMultiple = {
+    mode: 'multiple',
+    maxTagCount: 1,
+  }
+
+  const [ tabKey, setTabKey ] = useState('single')
+  const [value, setValue] = useState(selectProps?.mode ? [] : null);
+  
+  const props = {
+    value,
+    onChange: (value: any) => {
+      console.log(value)
+      setValue(value)
+    },
+    // requestConfig: {
+    //   url: `/bop/api/customer`,
+    // filter: 'qp-name,code-orGroup,like', // 过滤参数
+    // mappingTextField: 'name',
+    // mappingValueField: 'code',
+    //   otherParams: {
+    //     sorter: 'desc-id'
+    //   }, // 默认参数
+    //   sourceName: 'customerCode',
+    // },
+    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
+    selectProps,
+    selectBusinessType: 'customer',
+  };
+
+  const props2 = {
+    ...props,
+    // prefixUrl: { selectPrefix: '/channel-manage/', formSelectFix: '/channel-manage/' },
+    selectBusinessType: 'customer2',
+  }
+
+  const onTabChange = (key) => {
+    setTabKey(key)
+    setValue(key === 'single' ? null: [])
+  }
+  
+  return (
+    <div>
+      <Tabs onChange={onTabChange} activeKey={tabKey}>
+        <TabPane tab='单选' key='single'>
+          {tabKey === 'single' && (
+            <>
+              <span>版本1:支持英伦项目...</span>
+              <BusinessSearchSelect {...props} />
+              <span>版本2:支持麦克英孚项目...</span>
+              <BusinessSearchSelect {...props2} />
+            </>
+          )}
+        </TabPane>
+        <TabPane tab='多选' key='multiple'>
+          {tabKey === 'multiple' && (
+            <>
+              <span>版本1:支持英伦项目...</span>
+              <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />
+              <span>版本2:支持麦克英孚项目...</span>
+              <BusinessSearchSelect {...props2} selectProps={selectPropsMultiple} />
+            </>
+          )}
+        </TabPane>
+      </Tabs>
+    </div>
+  );
+};
+```
+
+
+## 店铺选择器 Select-DP-001
+
+```tsx
+import React, { useState } from 'react';
+import { Tabs } from 'antd';
+import {BusinessSearchSelect} from '../../../index.ts';
+
+const { TabPane } = Tabs;
+
+export default () => {
+  const selectProps = {
+    // mode: 'multiple',
+    // maxTagCount: 1,
+    // disabled: true
+  }
+  const selectPropsMultiple = {
+    mode: 'multiple',
+    maxTagCount: 1,
+  }
+
+  const [ tabKey, setTabKey ] = useState('single')
+  const [value, setValue] = useState(selectProps?.mode ? [] : null);
+  
+  const props = {
+    value,
+    onChange: (value: any) => {
+      console.log(value)
+      setValue(value)
+    },
+    // requestConfig: {
+    //   url: `/bop/api/store`,
+    //   filter: 'qp-name,code-orGroup,like',,
+    //   mappingTextField: 'name',
+    //   mappingValueField: 'code',
+    //   otherParams: {
+    //     sorter: 'desc-id'
+    //   }, // 默认参数
+    //   sourceName: 'code',
+    // },
+    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
+    selectProps,
+    selectBusinessType: 'shopFile',
+  };
+
+  const props2 = {
+    ...props,
+    // prefixUrl: { selectPrefix: '/channel-manage/', formSelectFix: '/channel-manage/' },
+    selectBusinessType: 'shopFile2',
+  }
+
+  const onTabChange = (key) => {
+    setTabKey(key)
+    setValue(key === 'single' ? null: [])
+  }
+  
+  return (
+    <div>
+      <Tabs onChange={onTabChange} activeKey={tabKey}>
+        <TabPane tab='单选' key='single'>
+          {tabKey === 'single' && (
+            <>
+              <span>版本1:支持英伦项目...</span>
+              <BusinessSearchSelect {...props} />
+              <span>版本2:支持麦克英孚项目...</span>
+              <BusinessSearchSelect {...props2} />
+            </>
+          )}
+        </TabPane>
+        <TabPane tab='多选' key='multiple'>
+          {tabKey === 'multiple' && (
+            <>
+              <span>版本1:支持英伦项目...</span>
+              <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />
+              <span>版本2:支持麦克英孚项目...</span>
+              <BusinessSearchSelect {...props2} selectProps={selectPropsMultiple} />
+            </>
+          )}
+        </TabPane>
+      </Tabs>
+    </div>
+  );
+};
+```
+
+
+## 核算主体选择器 Select-HSZT-001
+
+```tsx
+import React, { useState } from 'react';
+import { Tabs } from 'antd';
+import {BusinessSearchSelect} from '../../../index.ts';
+
+const { TabPane } = Tabs;
+
+export default () => {
+  const selectProps = {
+    // mode: 'multiple',
+    // maxTagCount: 1,
+    // disabled: true
+  }
+  const selectPropsMultiple = {
+    mode: 'multiple',
+    maxTagCount: 1,
+  }
+
+  const [ tabKey, setTabKey ] = useState('single')
+  const [value, setValue] = useState(selectProps?.mode ? [] : null);
+  
+  const props = {
+    value,
+    onChange: (value: any) => {
+      console.log(value)
+      setValue(value)
+    },
+    // requestConfig: {
+    //   url: `/bop/api/accountingSubject`,
+    //   filter: 'qp-name,code-orGroup,like',
+    //   mappingTextField: 'name',
+    //   mappingValueField: 'code',
+    //   otherParams: {
+    //     sorter: 'desc-id'
+    //   }, // 默认参数
+    //   sourceName: 'accountingCode',
+    // },
+    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
+    selectProps,
+    selectBusinessType: 'accountingSubject',
+  };
+
+  const onTabChange = (key) => {
+    setTabKey(key)
+    setValue(key === 'single' ? null: [])
+  }
+  
+  return (
+    <div>
+      <Tabs onChange={onTabChange} activeKey={tabKey}>
+        <TabPane tab='单选' key='single'>
+          {tabKey === 'single' && (
+            <BusinessSearchSelect {...props} />
+          )}
+        </TabPane>
+        <TabPane tab='多选' key='multiple'>
+          {tabKey === 'multiple' && (
+            <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />
+          )}
+        </TabPane>
+      </Tabs>
+    </div>
+  );
+};
+```
+
+
+## 库存组织选择器 Select-KCZZ-001
+
+```tsx
+import React, { useState } from 'react';
+import { Tabs } from 'antd';
+import {BusinessSearchSelect} from '../../../index.ts';
+
+const { TabPane } = Tabs;
+
+export default () => {
+  const selectProps = {
+    // mode: 'multiple',
+    // maxTagCount: 1,
+    // disabled: true
+  }
+  const selectPropsMultiple = {
+    mode: 'multiple',
+    maxTagCount: 1,
+  }
+
+  const [ tabKey, setTabKey ] = useState('single')
+  const [value, setValue] = useState(selectProps?.mode ? [] : null);
+  
+  const props = {
+    value,
+    onChange: (value: any) => {
+      console.log(value)
+      setValue(value)
+    },
+    // requestConfig: {
+    //   url: `/bop/api/inventoryOrg`,
+    //   filter: 'qp-name,code-orGroup,like',
+    //   mappingTextField: 'name',
+    //   mappingValueField: 'code',
+    //   otherParams: {
+    //     sorter: 'desc-id'
+    //   }, // 默认参数
+    //   sourceName: 'inventoryOrgCode',
+    // },
+    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
+    selectProps,
+    selectBusinessType: 'inventoryOrg',
+  };
+
+  const props2 = {
+    ...props,
+    selectBusinessType: 'inventoryOrg2',
+  }
+
+  const onTabChange = (key) => {
+    setTabKey(key)
+    setValue(key === 'single' ? null: [])
+  }
+  
+  return (
+    
+    <div>
+      <Tabs onChange={onTabChange} activeKey={tabKey}>
+        <TabPane tab='单选' key='single'>
+          {tabKey === 'single' && <BusinessSearchSelect {...props} />}
+        </TabPane>
+        <TabPane tab='多选' key='multiple'>
+          {tabKey === 'multiple' && <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />}
+        </TabPane>
+      </Tabs>
+    </div>
+  );
+};
+```
+
+
+## 法人公司选择器 Select-FRGS-001
+
+```tsx
+import React, { useState } from 'react';
+import { Tabs } from 'antd';
+import {BusinessSearchSelect} from '../../../index.ts';
+
+const { TabPane } = Tabs;
+
+export default () => {
+  const selectProps = {
+    // mode: 'multiple',
+    // maxTagCount: 1,
+    // disabled: true
+  }
+  const selectPropsMultiple = {
+    mode: 'multiple',
+    maxTagCount: 1,
+  }
+
+  const [ tabKey, setTabKey ] = useState('single')
+  const [value, setValue] = useState(selectProps?.mode ? [] : null);
+  
+  const props = {
+    value,
+    onChange: (value: any) => {
+      console.log(value)
+      setValue(value)
+    },
+    // requestConfig: {
+    //   url: `/bop/api/company`,
+    //   filter: 'qp-name,code-orGroup,like',
+    //   mappingTextField: 'name',
+    //   mappingValueField: 'code',
+    //   otherParams: {
+    //    'qp-companyType-eq': '20',
+    //     sorter: 'desc-id'
+    //   }, // 默认参数
+    //   sourceName: 'companyCode',
+    // },
+    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
+    selectProps,
+    selectBusinessType: 'corporationCompany',
+  };
+
+  const onTabChange = (key) => {
+    setTabKey(key)
+    setValue(key === 'single' ? null: [])
+  }
+  
+  return (
+    <div>
+      <Tabs onChange={onTabChange} activeKey={tabKey}>
+        <TabPane tab='单选' key='single'>
+          {tabKey === 'single' && (
+            <BusinessSearchSelect {...props} />
+          )}
+        </TabPane>
+        <TabPane tab='多选' key='multiple'>
+          {tabKey === 'multiple' && (
+            <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />
+          )}
+        </TabPane>
+      </Tabs>
+    </div>
+  );
+};
+```
+
+
+## 员工选择器 Select-YG-001
+
+```tsx
+import React, { useState } from 'react';
+import { Tabs } from 'antd';
+import {BusinessSearchSelect} from '../../../index.ts';
+
+const { TabPane } = Tabs;
+
+export default () => {
+  const selectProps = {
+    // mode: 'multiple',
+    // maxTagCount: 1,
+    // disabled: true
+  }
+  const selectPropsMultiple = {
+    mode: 'multiple',
+    maxTagCount: 1,
+  }
+
+  const [ tabKey, setTabKey ] = useState('single')
+  const [value, setValue] = useState(selectProps?.mode ? [] : null);
+  
+  const props = {
+    value,
+    onChange: (value: any) => {
+      console.log(value)
+      setValue(value)
+    },
+    // requestConfig: {
+    //   url: `/bop/api/employee`,
+    //   filter: 'qp-name,code-orGroup,like',
+    //   mappingTextField: 'name',
+    //   mappingValueField: 'code',
+    //   otherParams: {
+    //     sorter: 'desc-id'
+    //   }, // 默认参数
+    //   sourceName: 'code',
+    // },
+    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
+    selectProps,
+    selectBusinessType: 'employee',
+  };
+  
+  const props2 = {
+    ...props,
+    // prefixUrl: { selectPrefix: '/user/api', formSelectFix: '/user/api' },
+    selectBusinessType: 'employee2',
+  }
+
+  const onTabChange = (key) => {
+    setTabKey(key)
+    setValue(key === 'single' ? null: [])
+  }
+  
+  return (
+    <div>
+      <Tabs onChange={onTabChange} activeKey={tabKey}>
+        <TabPane tab='单选' key='single'>
+          {tabKey === 'single' && (
+            <>
+              <span>版本1:支持英伦项目...</span>
+              <BusinessSearchSelect {...props} />
+              <span>版本2:支持麦克英孚项目...</span>
+              <BusinessSearchSelect {...props2} />
+            </>
+          )}
+        </TabPane>
+        <TabPane tab='多选' key='multiple'>
+          {tabKey === 'multiple' && (
+            <>
+              <span>版本1:支持英伦项目...</span>
+              <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />
+              <span>版本2:支持麦克英孚项目...</span>
+              <BusinessSearchSelect {...props2} selectProps={selectPropsMultiple} />
+            </>
+          )}
+        </TabPane>
+      </Tabs>
+    </div>
+  );
+};
+```
+
+
+## 配送方式选择器 Select-PSFS-001
+
+```tsx
+import React, { useState } from 'react';
+import { Tabs } from 'antd';
+import {BusinessSearchSelect} from '../../../index.ts';
+
+const { TabPane } = Tabs;
+
+export default () => {
+  const selectProps = {
+    // mode: 'multiple',
+    // maxTagCount: 1,
+    // disabled: true
+  }
+  const selectPropsMultiple = {
+    mode: 'multiple',
+    maxTagCount: 1,
+  }
+
+  const [ tabKey, setTabKey ] = useState('single')
+  const [value, setValue] = useState(selectProps?.mode ? [] : null);
+  
+  const props = {
+    value,
+    onChange: (value: any) => {
+      console.log(value)
+      setValue(value)
+    },
+    // requestConfig: {
+    //   url: `/bop/api/getDeliveryModeCodeNameMap`,
+    //   filter: 'qp-name,code-orGroup,like',
+    //   mappingTextField: 'name',
+    //   mappingValueField: 'code',
+    //   otherParams: {
+    //     sorter: 'desc-id'
+    //   }, // 默认参数
+    //   sourceName: 'deliveryModeCode',
+    // },
+    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
+    selectProps,
+    selectBusinessType: 'deliveryMode',
+  };
+
+  const onTabChange = (key) => {
+    setTabKey(key)
+    setValue(key === 'single' ? null: [])
+  }
+  
+  return (
+    <div>
+      <Tabs onChange={onTabChange} activeKey={tabKey}>
+        <TabPane tab='单选' key='single'>
+          {tabKey === 'single' && (
+            <BusinessSearchSelect {...props} />
+          )}
+        </TabPane>
+        <TabPane tab='多选' key='multiple'>
+          {tabKey === 'multiple' && (
+            <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />
+          )}
+        </TabPane>
+      </Tabs>
+    </div>
+  );
+};
+```
+
+More skills for writing demo: https://d.umijs.org/guide/demo-principle