@bit-sun/business-component 1.2.3 → 1.2.4-alpha.1

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

@@ -47,17 +47,19 @@ export default () => {
     //   mappingTextField: 'name',
     //   mappingValueField: 'code',
     // },   // 非必传，业务字段已根据业务默认默认
-    prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' }, // 非必传，下拉框和tableForm下拉框接口前缀，默认为bop的接口
+    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' }, // 非必传，下拉框和tableForm下拉框接口前缀，默认为bop的接口
     selectProps, // 非必传
     onChange: (value: any) => {
       console.log(value)
       setValue(value)
     },
     selectBusinessType: 'supplier',
+    disabled: true,
   };
   
   const props2 = {
-    prefixUrl: { selectPrefix: '/channel/api', formSelectFix: '/channel/api' },
+    ...props,
+    // prefixUrl: { selectPrefix: '/channel-manage/', formSelectFix: '/channel-manage/' },
     selectBusinessType: 'supplier2',
   }
   
@@ -133,7 +135,7 @@ export default () => {
     //   }, // 默认参数
     //   sourceName: 'skuCode',
     // },
-    prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
+    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
     selectProps,
     selectBusinessType: 'skuCommodity',
   };
@@ -290,7 +292,7 @@ export default () => {
       console.log(value)
       setValue(value)
     },
-    prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
+    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
     selectProps,
     selectBusinessType: 'spuCommodity',
   };
@@ -323,7 +325,7 @@ export default () => {
 ## 仓库选择器(物理仓) Select-Warehouse-001
 
 ```tsx
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Tabs } from 'antd';
 import {BusinessSearchSelect} from '../../../index.ts';
 
@@ -343,21 +345,30 @@ export default () => {
   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',
-    // },
+    requestConfig: {
+      // mappingValueField: 'physicalWarehouseCode',
+      // sourceName: 'physicalWarehouseCode',
+      filterInit: 'qp-id-in'
+    },
     // modalTableProps: {
     //   modalTableTitle: '选择物理仓-更改title测试',
+    //   needModalTable: false
     // },
-    prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
+    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
     selectProps,
+    // labelInValue: true,
     selectBusinessType: 'physicalWarehouse',
   };
 
@@ -424,7 +435,7 @@ export default () => {
     //   }, // 默认参数
     //   sourceName: 'warehouseIds',
     // },
-    prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
+    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
     selectProps,
     selectBusinessType: 'realWarehouse',
   };
@@ -492,7 +503,7 @@ export default () => {
     //   }, // 默认参数
     //   sourceName: 'warehouseIds',
     // },
-    prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
+    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
     selectProps,
     selectBusinessType: 'virtualWarehouse',
   };
@@ -560,7 +571,7 @@ export default () => {
     //   }, // 默认参数
     //   sourceName: 'warehouseIds',
     // },
-    prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
+    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
     selectProps,
     selectBusinessType: 'channelWarehouse',
   };
@@ -629,13 +640,14 @@ export default () => {
     //   }, // 默认参数
     //   sourceName: 'customerCode',
     // },
-    prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
+    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
     selectProps,
     selectBusinessType: 'customer',
   };
 
   const props2 = {
-    prefixUrl: { selectPrefix: '/channel/api', formSelectFix: '/channel/api' },
+    ...props,
+    // prefixUrl: { selectPrefix: '/channel-manage/', formSelectFix: '/channel-manage/' },
     selectBusinessType: 'customer2',
   }
 
@@ -713,11 +725,17 @@ export default () => {
     //   }, // 默认参数
     //   sourceName: 'code',
     // },
-    prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
+    // 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: [])
@@ -728,12 +746,22 @@ export default () => {
       <Tabs onChange={onTabChange} activeKey={tabKey}>
         <TabPane tab='单选' key='single'>
           {tabKey === 'single' && (
-            <BusinessSearchSelect {...props} />
+            <>
+              <span>版本1:支持英伦项目...</span>
+              <BusinessSearchSelect {...props} />
+              <span>版本2:支持麦克英孚项目...</span>
+              <BusinessSearchSelect {...props2} />
+            </>
           )}
         </TabPane>
         <TabPane tab='多选' key='multiple'>
           {tabKey === 'multiple' && (
-            <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />
+            <>
+              <span>版本1:支持英伦项目...</span>
+              <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />
+              <span>版本2:支持麦克英孚项目...</span>
+              <BusinessSearchSelect {...props2} selectProps={selectPropsMultiple} />
+            </>
           )}
         </TabPane>
       </Tabs>
@@ -782,7 +810,7 @@ export default () => {
     //   }, // 默认参数
     //   sourceName: 'accountingCode',
     // },
-    prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
+    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
     selectProps,
     selectBusinessType: 'accountingSubject',
   };
@@ -851,28 +879,30 @@ export default () => {
     //   }, // 默认参数
     //   sourceName: 'inventoryOrgCode',
     // },
-    prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
+    // 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} />
-          )}
+          {tabKey === 'single' && <BusinessSearchSelect {...props} />}
         </TabPane>
         <TabPane tab='多选' key='multiple'>
-          {tabKey === 'multiple' && (
-            <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />
-          )}
+          {tabKey === 'multiple' && <BusinessSearchSelect {...props} selectProps={selectPropsMultiple} />}
         </TabPane>
       </Tabs>
     </div>
@@ -921,7 +951,7 @@ export default () => {
     //   }, // 默认参数
     //   sourceName: 'companyCode',
     // },
-    prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
+    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
     selectProps,
     selectBusinessType: 'corporationCompany',
   };
@@ -990,14 +1020,14 @@ export default () => {
     //   }, // 默认参数
     //   sourceName: 'code',
     // },
-    prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
+    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
     selectProps,
     selectBusinessType: 'employee',
   };
   
   const props2 = {
     ...props,
-    prefixUrl: { selectPrefix: '/user/api', formSelectFix: '/user/api' },
+    // prefixUrl: { selectPrefix: '/user/api', formSelectFix: '/user/api' },
     selectBusinessType: 'employee2',
   }
 
@@ -1075,7 +1105,7 @@ export default () => {
     //   }, // 默认参数
     //   sourceName: 'deliveryModeCode',
     // },
-    prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
+    // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
     selectProps,
     selectBusinessType: 'deliveryMode',
   };

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

@@ -2,20 +2,22 @@
  * @Description:
  * @Author: rodchen
  * @Date: 2022-05-07 15:17:28
- * @LastEditTime: 2022-05-08 21:01:21
- * @LastEditors: rodchen
+ * @LastEditTime: 2022-09-09 16:17:36
+ * @LastEditors: Sirius-kk
  */
-import React, { useMemo } from 'react';
+import React, { useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
 import { commonFun } from './BusinessUtils';
+import { handleDefaultPrefixUrl } from './utils';
 import SearchSelect from '@/components/Functional/SearchSelect';
 
 const MemoSearchSelect = React.memo(SearchSelect)
 
-const  BusinessSearchSelect = (props: any) => {
+const BusinessSearchSelect = forwardRef((props: any, ref: any) => {
   const businessType = props?.selectBusinessType || 'supplier';
-  const prefixUrl = props?.prefixUrl || { selectPrefix: '/bop/api', formSelectFix: '/bop/api' };
+  const prefixUrl = props?.prefixUrl || { selectPrefix: handleDefaultPrefixUrl(businessType), formSelectFix: handleDefaultPrefixUrl(businessType) };
+  const innerRef = useRef();
 
-  const { requestConfig, modalTableProps, needModalTable } = commonFun(businessType, prefixUrl,props?.requestConfig || {}, props?.modalTableProps || {});
+  const { requestConfig, modalTableProps, needModalTable } = commonFun(businessType, prefixUrl, props?.requestConfig || {}, props?.modalTableProps || {});
   const currentProps = useMemo(() => {
     return {
       ...props,
@@ -23,21 +25,28 @@ const  BusinessSearchSelect = (props: any) => {
       needModalTable,
       modalTableProps
     }
-  }, [props?.value])
+  }, [props?.value, props.disabled]);
+
+  useImperativeHandle(ref, () => ({
+    getRef: () => innerRef,
+  }))
 
   return (
     <div>
-      <MemoSearchSelect {...currentProps} />
+      <MemoSearchSelect {...currentProps} ref={innerRef} />
     </div>
   );
-};
+});
 
 export default React.memo(BusinessSearchSelect, (props, nextProps) => {
-  if(props && props.labelInValue && props.value && JSON.stringify(props.value) !== JSON.stringify(nextProps.value)) {
+  if (props && props.labelInValue && props.value && JSON.stringify(props.value) !== JSON.stringify(nextProps.value)) {
     return false
   }
-  if(props && props.value !== nextProps.value) {
+  if (props && props.value !== nextProps.value) {
+    return false
+  }
+  if (props && props.disabled !== nextProps.disabled) {
     return false
   }
   return true
-});
+});

package/src/components/Business/SearchSelect/utils.ts

@@ -1,13 +1,14 @@
 import axios from 'axios';
 import { message } from 'antd';
 import { stringify } from 'querystring';
+import ENUM from '@/utils/enumConfig';
 
 const getDicData = (dicCode: string) => {
   let dicData = {};
   let dictionaryData;
   if (!dictionaryData) {
-    let storageDic = localStorage.getItem('dicData')
-      ? JSON.parse(localStorage.getItem('dicData') || '{}')
+    let storageDic = localStorage.getItem(ENUM.BROWSER_CACHE.DICT_CODES)
+      ? JSON.parse(localStorage.getItem(ENUM.BROWSER_CACHE.DICT_CODES) || '{}')
       : {};
     dicData = storageDic[dicCode];
   } else {
@@ -59,7 +60,7 @@ const loadSelectSource = (url: string, params?: any) => {
       .get(`${url}?${stringify(params)}`)
       .then((result: any) => {
         result = result.data;
-        if ((result.status && result.status !== '0') || (result?.code && result.code !== '000000')) {
+        if ((result?.status && result.status !== '0') || (result?.code && result.code !== '000000')) {
           message.error(result.msg);
           return;
         }
@@ -71,4 +72,29 @@ const loadSelectSource = (url: string, params?: any) => {
   })
 };
 
-export { getDictionarySource, getDictionaryTextByValue, loadSelectSource }
+const handleDefaultPrefixUrl = (type: string) => {
+  let result;
+  switch (type){
+    case 'supplier2': case 'customer2': case 'shopFile2':
+      result =  '/channel-manage';
+      break;
+    case 'skuCommodity': case 'skuPropertyValue': case 'spuCommodity':
+      result =  '/items';
+      break;
+    case 'physicalWarehouse': case 'realWarehouse': case 'virtualWarehouse': case 'channelWarehouse':
+      result =  '/stock';
+      break;
+    case 'inventoryOrg2': case 'purchaseOrg': case 'salesOrg': case 'employee2':
+      result =  '/user';
+      break;
+    case 'deliveryMode':
+      result =  '/basic';
+      break;
+    default:
+      result = '/bop/api';
+      break
+  }
+  return result;
+};
+
+export { getDictionarySource, getDictionaryTextByValue, loadSelectSource, handleDefaultPrefixUrl }

package/src/components/Business/StateFlow/index.less

@@ -0,0 +1,131 @@
+.form-status-label {
+  height: 48px;
+  margin-right: 12px;
+  // flex-grow: 1;
+  // flex-shrink: 1;
+  display: inline-block;
+  position: relative;
+  background-color: #B0B4B7;
+  align-items: center;
+}
+.choosed-status-label.form-status-label {
+  background-color: #005CFF;
+}
+
+.form-status-label:last-child {
+  margin-right: 0px;
+}
+
+.form-status-label:first-child::after {
+  position: absolute;
+  display: block;
+  content: '';
+  right: -48px;
+  top: 0;
+  width: 48px;
+  height: 48px;
+  border: 24px solid;
+  border-color: transparent transparent transparent transparent;
+  border-left: 12px solid #B0B4B7;
+}
+
+.choosed-status-label.form-status-label::after {
+  border-left: 12px solid #005CFF;
+}
+
+.choosed-status-label.form-status-label:not(:first-child):not(:last-child)::after {
+  border-left: 12px solid #005CFF;
+}
+
+.form-status-label:last-child::after {
+  position: absolute;
+  display: block;
+  content: '';
+  left: 0;
+  top: 0;
+  width: 48px;
+  height: 48px;
+  border: 24px solid;
+  border-color: transparent transparent transparent transparent;
+  border-left: 12px solid #ffffff;
+}
+
+.form-status-label:not(:first-child):not(:last-child)::before {
+  position: absolute;
+  display: block;
+  content: '';
+  left: 0;
+  top: 0;
+  width: 48px;
+  height: 48px;
+  border: 24px solid;
+  border-color: transparent transparent transparent transparent;
+  border-left: 12px solid #ffffff;
+}
+
+.form-status-label:not(:first-child):not(:last-child)::after {
+  position: absolute;
+  display: block;
+  content: '';
+  right: -48px;
+  top: 0;
+  width: 48px;
+  height: 48px;
+  border: 24px solid;
+  border-color: transparent transparent transparent transparent;
+  border-left: 12px solid #B0B4B7;
+}
+
+.status-label-index {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border: 1px solid #FFFFFF;
+  color: #FFFFFF;
+  border-radius: 50%;
+  font-family: Montserrat;
+  font-size: 14px;line-height: 24px;
+  text-align: center;
+  margin: 0 6px 0 20px;
+}
+
+.status-label-key {
+  width: 50px;
+  height: 100%;
+  display: inline-flex;
+  float: left;
+  // flex-grow: 0;
+  // flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+}
+
+.status-label-operate {
+  // flex-grow: 1;
+  // flex-shrink: 1;
+  float: left;
+  width: calc(100% - 50px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  height: 100%;
+  margin: 4px 0;
+  &>div {
+    font-size: 12px;
+    height: 20px;
+    line-height: 20px;
+    color: #FFFFFF;
+    font-family: PingFangSC;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  &>div:first-child {
+    font-size: 14px;
+    font-weight: 600;
+  }
+}
+
+.only-one-child.form-status-label::after,.only-one-child.form-status-label::before {
+  border-left: 0px;
+}

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

@@ -0,0 +1,60 @@
+---
+nav:
+  title: '组件'
+  order: 1
+group:
+  title: 业务组件
+  order: 1
+title: 状态流转
+order: 1
+---
+
+# StateFlow
+
+
+## 单据状态流转
+
+```tsx
+import React, { useState } from 'react';
+import { StateFlow } from '../../../index.ts';
+
+export default () => {
+  const formStatusMapping = [
+    {
+      text: '状态1',
+      modifyUserName: '张三',
+      modifyTime: '2022-09-01 12:20:20',
+      isDone: true,
+    },
+    {
+      text: '状态2',
+      modifyUserName: '李四',
+      modifyTime: '2022-09-01 12:20:20',
+      isDone: true,
+    },
+    {
+      text: '状态3',
+      modifyUserName: '王五',
+      modifyTime: '2022-09-01 12:20:20',
+      isDone: true,
+    },
+    {
+      text: '状态4',
+      modifyUserName: '韩梅梅',
+      isDone: true,
+      modifyTime: '2022-09-01 12:20:20',
+    },
+    {
+      text: '状态5',
+      modifyUserName: '李雷',
+      isDone: true,
+      modifyTime: '2022-09-01 12:20:20',
+    },
+  ]
+  return (
+   <StateFlow 
+      formStatusMapping={formStatusMapping}
+   />
+  );
+};
+```

package/src/components/Business/StateFlow/index.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import './index.less'
+
+export default (props: any) => {
+  const { formStatusMapping = [] } = props;
+  return (
+    <div style={{display: 'flex', padding: '10px 60px 0px', background: '#FFFFFF'}}>
+      {
+        formStatusMapping.map((item:any, index:number) => {
+          return (
+            <div style={{width: `${(100/formStatusMapping.length).toFixed(2)}%`}} className={`form-status-label ${item.isDone ? 'choosed-status-label' : ''} ${formStatusMapping.length === 1 ? 'only-one-child' : ''}`}>
+              <div className='status-label-key'>
+                <span className='status-label-index'>{index+1}</span>
+              </div>
+              <div className='status-label-operate'>
+                <div style={!item.isDone ? {height: '40px', lineHeight: '40px'} : {}}>{item.text}</div>
+                {
+                  item.isDone ? (
+                    <div title={`${item.modifyUserName || '--'} ${item.modifyTime || '--'}`}>{`${item.modifyUserName || '--'} ${item.modifyTime || '--'}`}</div>
+                  ) : null
+                }
+              </div>
+              <div style={{clear: 'both'}}></div>
+            </div>
+          )
+        })
+      }
+    </div>
+  )
+}