@bit-sun/business-component 4.0.0-alpha.3 → 4.0.2

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

@@ -0,0 +1,1570 @@
+---
+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, Button } 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 singleConfirmModalTableProps = {
+    modalRadioNeedFooter: true
+  }
+
+   const fieldComponentProps = {
+    fieldComponent: <Button type='primary'>添加</Button>
+  }
+
+  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='singleConfirm'>
+          {tabKey === 'singleConfirm' && (
+            <BusinessSearchSelect {...props} modalTableProps={singleConfirmModalTableProps} />
+          )}
+        </TabPane>
+         <TabPane tab='点击按钮弹窗' key='buttonModal'>
+          {tabKey === 'buttonModal' && (
+            <BusinessSearchSelect {...props} {...fieldComponentProps} selectProps={selectPropsMultiple} />
+          )}
+        </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>
+  );
+};
+```
+
+## 商品SKC选择器 Select-SKC-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: 'skcCommodity',
+  };
+
+  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
+      // needStatusSearch: true
+    // },
+    // 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' },
+    // modalTableProps: {
+    //   needStatusSearch: true
+    // },
+    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-005
+
+```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)
+    },
+    selectProps,
+    modalTableProps: {
+      needStatusSearch: true
+    },
+    selectBusinessType: 'ownerWarehouse',
+  };
+
+  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' },
+    // prefixUrl: { selectPrefix: '/api/user-manage/', formSelectFix: '/api/user-manage/' },
+    modalTableProps: {
+      needTypeSearch: true
+    },
+    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 === 'multiple' ? []: 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
+
+
+## 规则模板选择器 Select-GZCJ-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)
+    },
+    selectProps,
+    selectBusinessType: 'ruleTemplate',
+  };
+
+  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-ROLE-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)
+    },
+    selectProps,
+    selectBusinessType: 'role',
+  };
+
+  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-PERSON-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)
+    },
+    selectProps,
+    selectBusinessType: 'person',
+  };
+
+  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-BRAND-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)
+    },
+    selectProps,
+    selectBusinessType: 'brand',
+  };
+
+  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-PRCICE_ITEM-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)
+    },
+    selectProps,
+    selectBusinessType: 'priceItem',
+  };
+
+  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