@bit-sun/business-component 4.0.11 → 4.0.12-alpha.3

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

@@ -115,6 +115,11 @@ export default () => {
   const selectPropsMultiple = {
     mode: 'multiple',
     maxTagCount: 1,
+    onSaveCallback: (rows) => {
+      console.log('save call', rows);
+      return Promise.resolve(true);
+      // return Promise.reject('FAILE')
+    }
   }
 
   const singleConfirmModalTableProps = {
@@ -769,6 +774,7 @@ export default () => {
       setValue(value)
     },
     // requestConfig: {
+    //       noOperate: true,
     //   url: `/bop/api/customer`,
     // filter: 'qp-name,code-orGroup,like', // 过滤参数
     // mappingTextField: 'name',
@@ -1393,6 +1399,123 @@ export default () => {
 };
 ```
 
+
+## 销售渠道选择器 Select-MARKET-CHANNEL-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: 'market-channel',
+  };
+
+  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-BUSINESS-ORGANIZATION-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: 'business-organization',
+  };
+
+  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
@@ -1567,4 +1690,62 @@ export default () => {
 ```
 
 
+## 销售组织选择器 Select-SALES-ORGANIZATION-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: 'sales-organization',
+  };
+
+  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

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

@@ -17,10 +17,11 @@ const BusinessSearchSelect = forwardRef((props: any, ref: any) => {
   const prefixUrl = props?.prefixUrl || { selectPrefix: handleDefaultPrefixUrl(businessType), formSelectFix: handleDefaultPrefixUrl(businessType) };
   const innerRef = useRef();
 
-  const { requestConfig, modalTableProps, needModalTable } = commonFun(businessType, prefixUrl, props?.requestConfig || {}, props?.modalTableProps || {}, props?.hiddenFields || []  );
+  const { requestConfig, selectProps, modalTableProps, needModalTable } = commonFun(businessType, prefixUrl, props);
   const currentProps = useMemo(() => {
     return {
       ...props,
+      selectProps,
       requestConfig,
       needModalTable,
       modalTableProps

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

@@ -76,7 +76,7 @@ const loadSelectSource = (url: string, params?: any) => {
 const handleDefaultPrefixUrl = (type: string) => {
   let result;
   switch (type){
-    case 'supplier2': case 'customer2': case 'shopFile2': case 'platCompany':
+    case 'supplier2': case 'customer2': case 'shopFile2': case 'platCompany': case 'market-channel':
       result =  '/channel-manage';
       break;
     case 'skuCommodity': case 'skuPropertyValue': case 'spuCommodity': case 'skcCommodity': case 'brand':
@@ -91,6 +91,9 @@ const handleDefaultPrefixUrl = (type: string) => {
     case 'deliveryMode': case 'ruleTemplate': case 'priceItem':
       result =  '/basic';
       break;
+    case 'sales-organization': case 'business-organization':
+      result =  '/drp-ops';
+      break;
     default:
       result = '/bop/api';
       break

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

@@ -1,131 +1,147 @@
-.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;
+.state-flow {
+  .form-status-label {
+    height: 28px;
+    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: -28px;
+    top: 0;
+    width: 28px;
+    height: 28px;
+    border: 14px 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: 28px;
+    height: 28px;
+    border: 14px solid;
+    border-color: transparent transparent transparent transparent;
+    border-left: 12px solid #ffffff;
+  }
+  
+  .form-status-label:first-child {
+    padding-left: 10px;
+  }
+  
+  .form-status-label:not(:first-child) {
+    padding-left: 15px;
+  }
+  
+  .form-status-label:not(:first-child):not(:last-child)::before {
+    position: absolute;
+    display: block;
+    content: '';
+    left: 0;
+    top: 0;
+    width: 28px;
+    height: 28px;
+    border: 14px 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: -28px;
+    top: 0;
+    width: 28px;
+    height: 28px;
+    border: 14px 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: auto;
+    height: 100%;
+    display: inline-flex;
+    float: left;
+    // flex-grow: 0;
+    // flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
     color: #FFFFFF;
-    font-family: PingFangSC;
+    font-size: 14px;
+  }
+  
+  .status-label-operate {
+    // flex-grow: 1;
+    // flex-shrink: 1;
+    float: left;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    height: 12px;
+    margin: 8px 0;
+    margin-left: 8px;
+    padding-left: 8px;
+    font-size: 10px;
+    border-left: 1px solid #FFFFFF;
+  
+    &>div {
+      font-size: 12px;
+      height: 12px;
+      line-height: 12px;
+      color: #FFFFFF;
+      font-family: PingFangSC;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    &>div:first-child {
+      font-size: 10px;
+      font-weight: 400;
+    }
   }
-  &>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;
   }
-}
-
-.only-one-child.form-status-label::after,.only-one-child.form-status-label::before {
-  border-left: 0px;
 }

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

@@ -4,16 +4,16 @@ import './index.less'
 export default (props: any) => {
   const { formStatusMapping = [] } = props;
   return (
-    <div style={{display: 'flex', padding: '10px 60px 0px', background: '#FFFFFF'}}>
+    <div className="state-flow" 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 style={!item.isDone ? {height: '40px', lineHeight: '40px'} : {}}>{item.text}</div>
               </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>

package/src/components/Business/columnSettingTable/columnSetting.tsx

@@ -650,7 +650,7 @@ class SortableTable extends React.Component<SortTableProps> {
     return (
       <div className={'sort_table_wrapper'}>
         {visible && <Modal
-          title="设置表头内容"
+          title="筛选条件设置"
           wrapClassName={'sort_table_wrapper'}
           width={820}
           visible={visible}
@@ -687,15 +687,15 @@ class SortableTable extends React.Component<SortTableProps> {
           <div className={'sort_table'}>
             <div className={'sort_table_column_wrapper'}>
               <span className={'sort_table_column_count'}>
-                可选字段 <span>（共{dataSource.length}个）</span>
+                <span>勾选你想使用的筛选条件</span>
               </span>
               <div className={'sort_table_column'}>
                 <Input
                   prefix={<SearchOutlined className="site-form-item-icon" />}
-                  placeholder="搜索"
+                  placeholder="输入筛选条件名称搜索"
                   allowClear
                   onChange={this.onSearch}
-                  style={{ width: 540 }}
+                  style={{ width: 525 }}
                 />
                 <div>
                   {!searchDataSource && (
@@ -819,7 +819,7 @@ class SortableTable extends React.Component<SortTableProps> {
             </div>
             <div className={'sort_table_content_wrapper'}>
               <span className={'sort_table_content_count'}>
-                已选字段 <span>（共{sortDataSource.length}个）</span>
+                <span>已选择的搜索条件排序</span>
               </span>
               <div className={'sort_table_content'}>
                 <span style={{ paddingLeft: '10px' }}>
@@ -859,7 +859,7 @@ class SortableTable extends React.Component<SortTableProps> {
           </div>
         </Modal>}
         <Tooltip title="列设置">
-          <img width={32} onClick={this.showModal} src={shezhi} />
+          <div style={{background: '#f7f8fb'}}><img width={24} onClick={this.showModal} src={shezhi} /></div>
         </Tooltip>
       </div>
     );