@bit-sun/business-component 2.2.20 → 2.2.22

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

@@ -1,6 +1,6 @@
 .form-status-label {
-  height: 48px;
-  margin-right: 12px;
+  height: 38px;
+  margin-right: 7px;
   // flex-grow: 1;
   // flex-shrink: 1;
   display: inline-block;
@@ -9,7 +9,7 @@
   align-items: center;
 }
 .choosed-status-label.form-status-label {
-  background-color: #005CFF;
+  background-color: #68C900;
 }
 
 .form-status-label:last-child {
@@ -20,21 +20,23 @@
   position: absolute;
   display: block;
   content: '';
-  right: -48px;
+  right: -38px;
   top: 0;
-  width: 48px;
-  height: 48px;
-  border: 24px solid;
+  width: 38px;
+  height: 38px;
+  border: 19px solid;
   border-color: transparent transparent transparent transparent;
   border-left: 12px solid #B0B4B7;
 }
 
 .choosed-status-label.form-status-label::after {
-  border-left: 12px solid #005CFF;
+  border-left: 12px solid #68C900;
+  z-index: 9;
 }
 
 .choosed-status-label.form-status-label:not(:first-child):not(:last-child)::after {
-  border-left: 12px solid #005CFF;
+  border-left: 12px solid #68C900;
+  z-index: 10;
 }
 
 .form-status-label:last-child::after {
@@ -43,9 +45,9 @@
   content: '';
   left: 0;
   top: 0;
-  width: 48px;
-  height: 48px;
-  border: 24px solid;
+  width: 38px;
+  height: 38px;
+  border: 19px solid;
   border-color: transparent transparent transparent transparent;
   border-left: 12px solid #ffffff;
 }
@@ -56,9 +58,9 @@
   content: '';
   left: 0;
   top: 0;
-  width: 48px;
-  height: 48px;
-  border: 24px solid;
+  width: 38px;
+  height: 38px;
+  border: 19px solid;
   border-color: transparent transparent transparent transparent;
   border-left: 12px solid #ffffff;
 }
@@ -67,26 +69,44 @@
   position: absolute;
   display: block;
   content: '';
-  right: -48px;
+  right: -38px;
   top: 0;
-  width: 48px;
-  height: 48px;
-  border: 24px solid;
+  width: 38px;
+  height: 38px;
+  border: 19px solid;
   border-color: transparent transparent transparent transparent;
   border-left: 12px solid #B0B4B7;
+  z-index: 9;
 }
 
 .status-label-index {
   display: inline-block;
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
+  // border: 1px solid #FFFFFF;
+  // color: #FFFFFF;
+  background: #FFFFFF;
+  color: #68C900;
+  border-radius: 50%;
+  font-family: Montserrat;
+  font-weight: 500;
+  font-size: 12px;line-height: 16px;
+  text-align: center;
+  margin: 0 4px 0 20px;
+}
+.choosed-status-label-index{
   border: 1px solid #FFFFFF;
   color: #FFFFFF;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
   border-radius: 50%;
   font-family: Montserrat;
-  font-size: 14px;line-height: 24px;
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 16px;
   text-align: center;
-  margin: 0 6px 0 20px;
+  margin: 0 4px 0 20px;
 }
 
 .status-label-key {
@@ -111,18 +131,19 @@
   height: 100%;
   margin: 4px 0;
   &>div {
-    font-size: 12px;
-    height: 20px;
-    line-height: 20px;
+    font-size: 10px;
+    height: 14px;
+    line-height: 14px;
     color: #FFFFFF;
     font-family: PingFangSC;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    font-weight: 300;
   }
   &>div:first-child {
-    font-size: 14px;
-    font-weight: 600;
+    font-size: 12px;
+    font-weight: 500;
   }
 }
 

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

@@ -23,32 +23,32 @@ export default () => {
     {
       text: '状态1',
       modifyUserName: '张三',
-      modifyTime: '2022-09-01 12:20:20',
+      modifyTime: '2022/09/01 12:20:20',
       isDone: true,
     },
     {
       text: '状态2',
       modifyUserName: '李四',
-      modifyTime: '2022-09-01 12:20:20',
+      modifyTime: '2022/09/01 12:20:20',
       isDone: true,
     },
     {
       text: '状态3',
       modifyUserName: '王五',
-      modifyTime: '2022-09-01 12:20:20',
+      modifyTime: '2022/09/01 12:20:20',
       isDone: true,
     },
     {
       text: '状态4',
       modifyUserName: '韩梅梅',
       isDone: true,
-      modifyTime: '2022-09-01 12:20:20',
+      modifyTime: '2022/09/01 12:20:20',
     },
     {
       text: '状态5',
       modifyUserName: '李雷',
       isDone: true,
-      modifyTime: '2022-09-01 12:20:20',
+      modifyTime: '2022/09/01 12:20:20',
     },
   ]
   return (

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

@@ -4,24 +4,27 @@ import './index.less'
 export default (props: any) => {
   const { formStatusMapping = [] } = props;
   return (
-    <div style={{display: 'flex', padding: '10px 60px 0px', background: '#FFFFFF'}}>
+    <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'>{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 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>
           )
         })
       }

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

@@ -13,7 +13,7 @@ order: 2
 
 Demo
 
-部门选择器:
+行政组织(部门)选择器:
 
 ```tsx
 import React, { useState } from 'react';
@@ -123,4 +123,32 @@ export default () => {
 };
 ```
 
+
+营销区域选择器:
+
+```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/utils.ts

@@ -42,6 +42,15 @@ const handleDefaultProps = (type: string) => {
         },
       };
       break;
+    case 'market-area':
+      result =  {
+        isChoose: true,
+        remoteSource: {
+          url: `/channel-manage/tagNode/getTree/10`,
+          resKeyValue: ['code', 'name'],
+        },
+      };
+      break;
     default:
       result =  {
         treeCheckable: true,

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

@@ -25,10 +25,11 @@ const TreeSearchSelect = (props: any) => {
     labelInValue = false,
     showArrow = true,
     allowClear = true,
-    showCheckedStrategy = TreeSelect.SHOW_PARENT,
+    showCheckedStrategy = props?.treeCheckStrictly ? TreeSelect.SHOW_ALL : TreeSelect.SHOW_PARENT,
     style = { width: '100%' },
     getTreeData,
-    disabled
+    disabled,
+    ...restProps
   } = props;
 
   const {
@@ -69,7 +70,7 @@ const TreeSearchSelect = (props: any) => {
       const resData = res?.data || [];
       let coverData;
 
-      if(resData.status === '0') {
+      if(resData.status === '0' || resData.code === '000000') {
         const { data } = resData;
         if (remoteSource.converter) {
           coverData = await remoteSource.converter({ data: [data] })
@@ -88,10 +89,10 @@ const TreeSearchSelect = (props: any) => {
 
   const formatData = (value: any) => {
     if (labelInValue) {
-      const formatResult = multiple ? value.map((i: any) => ({...i, key: i.value})) : { ...value, key: value?.value };
+      const formatResult = multiple||treeCheckable ? value.map((i: any) => ({...i, key: i.value})) : { ...value, key: value?.value };
       return formatResult
     } else {
-      const formatResult = multiple ? value.map((i: any) => (i?.value || i)) : (_.get(value[0], 'value') || value)
+      const formatResult = multiple||treeCheckable ? value.map((i: any) => (i?.value || i)) : (_.get(value?.[0], 'value') || value)
       return formatResult
     }
   }
@@ -132,6 +133,7 @@ const TreeSearchSelect = (props: any) => {
   return (
     <div className={'tree_search_select'}>
       <TreeSelect
+        {...restProps}
         treeCheckable={treeCheckable}
         maxTagCount={maxTagCount}
         showSearch={showSearch}