@bit-sun/business-component 1.1.21 → 1.1.24

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

@@ -0,0 +1,906 @@
+---
+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',
+  };
+  
+  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>
+  );
+};
+```
+
+
+## 商品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`,
+    //   filter: 'qp-name,skuCode-orGroup,like',
+    //   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>
+  );
+};
+```
+
+## 仓库选择器(物理仓) Select-Warehouse-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/physicalWarehouse`,
+    //   filter: 'qp-physicalWarehouseName,physicalWarehouseCode-orGroup,like',
+    //   mappingTextField: 'physicalWarehouseName',
+    //   mappingValueField: 'physicalWarehouseCode',
+    //   otherParams: {
+    //     sorter: 'desc-id'
+    //   }, // 默认参数
+    //   sourceName: 'warehouseIds',
+    // },
+    prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
+    selectProps,
+    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 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-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 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-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 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 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-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