@bit-sun/business-component 4.0.11-alpha.1 → 4.0.11-alpha.10

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

@@ -146,6 +146,11 @@ export default () => {
     // prefixUrl: { selectPrefix: '/bop/api', formSelectFix: '/bop/api' },
     selectProps,
     selectBusinessType: 'skuCommodity',
+    onSaveCallback: (rows) => {
+      console.log('save call', rows);
+      return Promise.resolve(true);
+      // return Promise.reject('FAILE')
+    }
   };
 
   const onTabChange = (key) => {
@@ -1393,6 +1398,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 +1689,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

@@ -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>
     );

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

@@ -204,9 +204,8 @@ export default class ColumnSettingTable extends React.Component {
       summary: showSummary,
     }
     return (
-      <div>
-        <div style={{ overflow: 'hidden', padding: '0 8px 10px 0' }}>
-          <span style={{ float: 'right' }} className="ant-dropdown-link">
+      <div style={{ position: 'relative' }}>
+        <span style={{ position: 'absolute', zIndex: '10', right: '8px', top: '1px' }} className="ant-dropdown-link">
             <ColumnSetting
               setShowColumns={this.setShowColumns}
               showColumns={this.state.showColumns}
@@ -216,9 +215,9 @@ export default class ColumnSettingTable extends React.Component {
               appRequestConfig={appRequestConfig}
             />
           </span>
-        </div>
         <Table
           columns={showCol}
+          border={true}
           components={{
             header: {
               cell: this.ResizeableTitle,

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

@@ -200,9 +200,8 @@ export default class ColumnSettingSulaTable extends React.Component {
       summary: showSummary,
     }
     return (
-      <div>
-        <div style={{ overflow: 'hidden', padding: '0 8px 10px 0' }}>
-          <span style={{ float: 'right' }} className="ant-dropdown-link">
+      <div style={{ position: 'relative' }}>
+        <span style={{ position: 'absolute', zIndex: '10', right: '8px', top: '10px' }} className="ant-dropdown-link">
             <ColumnSetting
               setShowColumns={this.setShowColumns}
               showColumns={this.state.showColumns}
@@ -211,10 +210,9 @@ export default class ColumnSettingSulaTable extends React.Component {
               appRequestConfig={appRequestConfig}
             />
           </span>
-        </div>
         <SulaTable
           ref={this.sulaTableRef}
-          style={style}
+          border={true}
           columns={showCol}
           components={{
             header: {

package/src/components/Common/ParagraphCopier/index.tsx

@@ -1,10 +1,6 @@
 import React, { useState } from 'react';
 import { Typography } from 'antd';
-import { createFromIconfontCN } from '@ant-design/icons';
-
-const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_4645959_8nhs21v6bnp.js',
-});
+import copyImg from '../../../assets/copyImg.svg';
 
 const { Paragraph } = Typography;
 
@@ -34,7 +30,7 @@ const ParagraphCopier = (props: ParagraphCopierProps) => {
   // 拷贝选项，包含图标和提示信息
   const copyableOptions = {
     text: text,
-    icon: <IconFont type="icon-qyhtfuzhi" style={{ fontSize: '14px' }} />,
+    icon: <img src={copyImg} />,
     tooltips: ['点击复制', '复制成功'],
   };