@bit-sun/business-component 2.2.22 → 2.2.24

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

@@ -1,60 +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}
-   />
-  );
-};
-```
+---
+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

@@ -1,33 +1,30 @@
-import React from "react";
-import './index.less'
-
-export default (props: any) => {
-  const { formStatusMapping = [] } = props;
-  return (
-    <div style={{display: 'flex', 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'
-                            className={`${item.isDone?'status-label-index':'choosed-status-label-index' }`}
-                            >{index+1}</span>
-                          </div>
-                          <div className='status-label-operate'>
-                            <div style={!item.isDone ? {height: '30px', lineHeight: '30px'} : {}}>{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>
-  )
+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>
+  )
 }

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

@@ -1,154 +1,154 @@
----
-nav:
-  title: '组件'
-  order: 1
-group:
-  title: 业务组件
-  order: 1
-title: 树型业务选择器
-order: 2
----
-
-## BusinessTreeSearchSelect
-
-Demo
-
-行政组织(部门)选择器:
-
-```tsx
-import React, { useState } from 'react';
-import { BusinessTreeSearchSelect } from '../../../index';
-
-export default () => {
-
-  const [value, setValue] = useState();
-  
-  const props = {
-    mode: 'create',
-    value,
-    onChange: (v) => {
-      setValue(v)
-    },
-    businessType: 'department'
-  };
-
-  return (
-    <div>
-      <BusinessTreeSearchSelect {...props} />
-    </div>
-  );
-};
-```
-
-
-销售组织选择器:
-
-```tsx
-import React, { useState } from 'react';
-import { BusinessTreeSearchSelect } from '../../../index';
-
-export default () => {
-
-  const [value, setValue] = useState();
-  
-  const props = {
-    mode: 'create',
-    value,
-    onChange: (v) => {
-      setValue(v)
-    },
-    businessType: 'sales-organization'
-  };
-
-  return (
-    <div>
-      <BusinessTreeSearchSelect {...props} />
-    </div>
-  );
-};
-```
-
-采购组织选择器:
-
-```tsx
-import React, { useState } from 'react';
-import { BusinessTreeSearchSelect } from '../../../index';
-
-export default () => {
-
-  const [value, setValue] = useState();
-  
-  const props = {
-    mode: 'create',
-    value,
-    onChange: (v) => {
-      setValue(v)
-    },
-    businessType: 'purchase-organization'
-  };
-
-  return (
-    <div>
-      <BusinessTreeSearchSelect {...props} />
-    </div>
-  );
-};
-```
-
-库存组织选择器:
-
-```tsx
-import React, { useState } from 'react';
-import { BusinessTreeSearchSelect } from '../../../index';
-
-export default () => {
-
-  const [value, setValue] = useState();
-  
-  const props = {
-    mode: 'create',
-    value,
-    isChoose: false, // 控制是否父节点可选中，默认不可选中
-    onChange: (v) => {
-      setValue(v)
-    },
-    businessType: 'stock-organization'
-  };
-
-  return (
-    <div>
-      <BusinessTreeSearchSelect {...props} />
-    </div>
-  );
-};
-```
-
-
-营销区域选择器:
-
-```tsx
-import React, { useState } from 'react';
-import { BusinessTreeSearchSelect } from '../../../index';
-
-export default () => {
-
-  const [value, setValue] = useState();
-  
-  const props = {
-    mode: 'create',
-    value,
-    onChange: (v) => {
-      setValue(v)
-    },
-    businessType: 'market-area'
-  };
-
-  return (
-    <div>
-      <BusinessTreeSearchSelect {...props} />
-    </div>
-  );
-};
-```
-
-More skills for writing demo: https://d.umijs.org/guide/demo-principle
+---
+nav:
+  title: '组件'
+  order: 1
+group:
+  title: 业务组件
+  order: 1
+title: 树型业务选择器
+order: 2
+---
+
+## BusinessTreeSearchSelect
+
+Demo
+
+行政组织(部门)选择器:
+
+```tsx
+import React, { useState } from 'react';
+import { BusinessTreeSearchSelect } from '../../../index';
+
+export default () => {
+
+  const [value, setValue] = useState();
+  
+  const props = {
+    mode: 'create',
+    value,
+    onChange: (v) => {
+      setValue(v)
+    },
+    businessType: 'department'
+  };
+
+  return (
+    <div>
+      <BusinessTreeSearchSelect {...props} />
+    </div>
+  );
+};
+```
+
+
+销售组织选择器:
+
+```tsx
+import React, { useState } from 'react';
+import { BusinessTreeSearchSelect } from '../../../index';
+
+export default () => {
+
+  const [value, setValue] = useState();
+  
+  const props = {
+    mode: 'create',
+    value,
+    onChange: (v) => {
+      setValue(v)
+    },
+    businessType: 'sales-organization'
+  };
+
+  return (
+    <div>
+      <BusinessTreeSearchSelect {...props} />
+    </div>
+  );
+};
+```
+
+采购组织选择器:
+
+```tsx
+import React, { useState } from 'react';
+import { BusinessTreeSearchSelect } from '../../../index';
+
+export default () => {
+
+  const [value, setValue] = useState();
+  
+  const props = {
+    mode: 'create',
+    value,
+    onChange: (v) => {
+      setValue(v)
+    },
+    businessType: 'purchase-organization'
+  };
+
+  return (
+    <div>
+      <BusinessTreeSearchSelect {...props} />
+    </div>
+  );
+};
+```
+
+库存组织选择器:
+
+```tsx
+import React, { useState } from 'react';
+import { BusinessTreeSearchSelect } from '../../../index';
+
+export default () => {
+
+  const [value, setValue] = useState();
+  
+  const props = {
+    mode: 'create',
+    value,
+    isChoose: false, // 控制是否父节点可选中，默认不可选中
+    onChange: (v) => {
+      setValue(v)
+    },
+    businessType: 'stock-organization'
+  };
+
+  return (
+    <div>
+      <BusinessTreeSearchSelect {...props} />
+    </div>
+  );
+};
+```
+
+
+营销区域选择器:
+
+```tsx
+import React, { useState } from 'react';
+import { BusinessTreeSearchSelect } from '../../../index';
+
+export default () => {
+
+  const [value, setValue] = useState();
+  
+  const props = {
+    mode: 'create',
+    value,
+    onChange: (v) => {
+      setValue(v)
+    },
+    businessType: 'market-area'
+  };
+
+  return (
+    <div>
+      <BusinessTreeSearchSelect {...props} />
+    </div>
+  );
+};
+```
+
+More skills for writing demo: https://d.umijs.org/guide/demo-principle

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

@@ -1,34 +1,34 @@
-import React, { useMemo } from 'react';
-import { handleDefaultProps } from './utils';
-import TreeSearchSelect from '@/components/Functional/TreeSearchSelect';
-
-const MemoTreeSearchSelect = React.memo(TreeSearchSelect)
-
-const  BusinessTreeSearchSelect = (props: any) => {
-  const businessType = props?.businessType || 'department';
-
-  const handleBusinessProps = handleDefaultProps(businessType);
-
-  const currentProps = useMemo(() => {
-    return {
-      ...handleBusinessProps,
-      ...props,
-    }
-  }, [props?.value])
-
-  return (
-    <div>
-      <MemoTreeSearchSelect {...currentProps} />
-    </div>
-  );
-};
-
-export default React.memo(BusinessTreeSearchSelect, (props, nextProps) => {
-  if(props && props.labelInValue && props.value && JSON.stringify(props.value) !== JSON.stringify(nextProps.value)) {
-    return false
-  }
-  if(props && props.value !== nextProps.value) {
-    return false
-  }
-  return true
-});
+import React, { useMemo } from 'react';
+import { handleDefaultProps } from './utils';
+import TreeSearchSelect from '@/components/Functional/TreeSearchSelect';
+
+const MemoTreeSearchSelect = React.memo(TreeSearchSelect)
+
+const  BusinessTreeSearchSelect = (props: any) => {
+  const businessType = props?.businessType || 'department';
+
+  const handleBusinessProps = handleDefaultProps(businessType);
+
+  const currentProps = useMemo(() => {
+    return {
+      ...handleBusinessProps,
+      ...props,
+    }
+  }, [props?.value])
+
+  return (
+    <div>
+      <MemoTreeSearchSelect {...currentProps} />
+    </div>
+  );
+};
+
+export default React.memo(BusinessTreeSearchSelect, (props, nextProps) => {
+  if(props && props.labelInValue && props.value && JSON.stringify(props.value) !== JSON.stringify(nextProps.value)) {
+    return false
+  }
+  if(props && props.value !== nextProps.value) {
+    return false
+  }
+  return true
+});