@bit-sun/business-component 2.0.14 → 2.0.17-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bit-sun/business-component",
-  "version": "2.0.14",
+  "version": "2.0.17-alpha.0",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",

package/src/assets/drag.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" class="design-iconfont">
+  <defs>
+    <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="l1lf23lgga">
+      <stop stop-color="#10295B" offset="0%"/>
+      <stop stop-color="#0F2A61" offset="100%"/>
+    </linearGradient>
+    <path id="okxu11mz5b" d="M0 0H24V24H0z"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <mask id="7u8dk2lilc" fill="#fff">
+      <use xlink:href="#okxu11mz5b"/>
+    </mask>
+    <g mask="url(#7u8dk2lilc)" fill="#999" fill-rule="nonzero">
+      <path d="M1.31655092,7 C2.03935948,7 2.6253116,7.58595212 2.6253116,8.30876068 C2.6253116,9.03156925 2.03935948,9.61752137 1.31655092,9.61752137 C0.593742351,9.61752137 0.00779023438,9.03156925 0.00779023438,8.30876068 C0.00779023438,7.58595212 0.593742351,7 1.31655092,7 Z M6.99034011,7 C7.71314867,7 8.29910079,7.58595212 8.29910079,8.30876068 C8.29910079,9.03156925 7.71314867,9.61752137 6.99034011,9.61752137 C6.26753154,9.61752137 5.68157942,9.03156925 5.68157942,8.30876068 C5.68157942,7.58595212 6.26753154,7 6.99034011,7 Z M12.6641293,7 C13.3869378,7 13.97289,7.58595212 13.97289,8.30876068 C13.97289,9.03156925 13.3869378,9.61752137 12.6641293,9.61752137 C11.9413207,9.61752137 11.3553686,9.03156925 11.3553686,8.30876068 C11.3553686,7.58595212 11.9413207,7 12.6641293,7 Z M1.31655092,-5.32907052e-15 C2.03935948,-5.32907052e-15 2.6253116,0.585952117 2.6253116,1.30876068 C2.6253116,2.03156925 2.03935948,2.61752137 1.31655092,2.61752137 C0.593742351,2.61752137 0.00779023438,2.03156925 0.00779023438,1.30876068 C0.00779023438,0.585952117 0.593742351,-5.32907052e-15 1.31655092,-5.32907052e-15 Z M6.99034011,-5.32907052e-15 C7.71314867,-5.32907052e-15 8.29910079,0.585952117 8.29910079,1.30876068 C8.29910079,2.03156925 7.71314867,2.61752137 6.99034011,2.61752137 C6.26753154,2.61752137 5.68157942,2.03156925 5.68157942,1.30876068 C5.68157942,0.585952117 6.26753154,-5.32907052e-15 6.99034011,-5.32907052e-15 Z M12.6641293,-5.32907052e-15 C13.3869378,-5.32907052e-15 13.97289,0.585952117 13.97289,1.30876068 C13.97289,2.03156925 13.3869378,2.61752137 12.6641293,2.61752137 C11.9413207,2.61752137 11.3553686,2.03156925 11.3553686,1.30876068 C11.3553686,0.585952117 11.9413207,-5.32907052e-15 12.6641293,-5.32907052e-15 Z" transform="translate(5 7)"/>
+    </g>
+  </g>
+</svg>

package/src/assets/label_icon_bottom.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 3备份 4</title>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="24" height="24"></rect>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="单据-详情页（二级页）-下拉" transform="translate(-1858.000000, -1326.000000)">
+            <g id="编组-20" transform="translate(280.000000, 866.000000)">
+                <g id="编组-5" transform="translate(1554.000000, 179.000000)">
+                    <g id="编组-3备份-4" transform="translate(24.000000, 281.000000)">
+                        <mask id="mask-2" fill="white">
+                            <use xlink:href="#path-1"></use>
+                        </mask>
+                        <use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use>
+                        <g id="编组" mask="url(#mask-2)" fill="#B1BAD4" fill-rule="nonzero">
+                            <g transform="translate(3.000000, 3.000000)" id="形状">
+                                <path d="M5.99072727,0.237481917 C6.50454545,-0.0418576482 6.56509091,-0.0745634228 6.97254545,0.138292264 L7.15527271,0.236945765 C7.31727271,0.445512161 7.34672726,0.483579531 7.3761818,0.664265595 L7.39690908,0.809565049 L7.39690908,17 L5.76054545,17 L5.76054545,2.73974241 L1.15690909,7.26654448 L0,6.12934831 L5.99072727,0.237481917 Z M13.0909091,13.6720525 L13.0909091,15.2805337 L9.81818182,15.2805337 L9.81818182,13.6720525 L13.0909091,13.6720525 Z M14.7272727,9.91892987 L14.7272727,11.527411 L9.81818182,11.527411 L9.81818182,9.91892987 L14.7272727,9.91892987 Z M16.3636364,6.16580723 L16.3636364,7.77428836 L9.81818182,7.77428836 L9.81818182,6.16580723 L16.3636364,6.16580723 Z M18,2.41268459 L18,4.02116572 L9.81818182,4.02116572 L9.81818182,2.41268459 L18,2.41268459 Z"></path>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -53,7 +53,8 @@ export default () => {
  
  const props = {
    callbackHideModal,
-   callbackHandleOk
+   callbackHandleOk,
+   isCheckStockNum: false   // 默认为true，校验库存数量，false，则不校验库存
  }
  
   return (

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

@@ -14,7 +14,8 @@ const CommodityEntry = (props: any) => {
     callbackHandleOk,
     columns=["skuCode", "quantity", "price"],
     validDataUrl="/items/sku/import/check",
-    isBrandAuth = true // 默认做品牌过滤
+    isBrandAuth = true, // 默认做品牌过滤
+    isCheckStockNum = true
   } = props;
 
   const [modalProps, setModalProps]: any = useState({
@@ -68,6 +69,7 @@ const CommodityEntry = (props: any) => {
             columns={columns}
             validDataUrl={validDataUrl}
             isBrandAuth={isBrandAuth}
+            isCheckStockNum={isCheckStockNum}
           />
         </Modal>
       ) || ''}

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

@@ -0,0 +1,112 @@
+.form-guide {
+  cursor: pointer;
+  position: fixed;
+  right: 5px;
+  color: #B1BAD4;
+  padding: 5px 0;
+  width: 48px;
+  z-index: 10;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: #141620;
+  .form-guide-top {
+    padding: 0px 10px;
+    display: flex;
+    justify-content: center;
+  }
+  border-radius: 5px;
+  .form-guide-center {
+    border-top: 1px solid #6E7588;
+    border-bottom: 1px solid #6E7588;
+    padding: 0px 10px;
+  }
+  .form-guide-item {
+    width: 28px;
+    padding: 5px 0;
+    display: block;
+    word-break: break-all;
+    color: #B1BAD4;
+    font-size: 14px;
+    line-height: 16px;
+    position: relative;
+  }
+  .form-guide-item::after {
+    content: '';
+    display: block;
+    width: 15px;
+    height: 1px;
+    background-color: #6E7588;
+    position: absolute;
+    bottom: 0px;
+    left: 7px;
+  }
+
+  .form-guide-bottom {
+    padding: 5px 10px;
+    display: flex;
+    justify-content: center;
+  }
+  .form-guide-item:last-child::after {
+    content: '';
+    display: none;
+    width: 15px;
+    height: 1px;
+    background-color: #6E7588;
+    position: absolute;
+    bottom: 0px;
+    left: 7px;
+  }
+}
+
+.white-card.bitsun-form-card-class {
+  .ant-card-body {
+    background-color: #FFFFFF;
+    padding: 0px;
+  }
+}
+
+.bitsun-form-card-class {
+  &>.ant-card-body {
+    margin-bottom: 10px;
+  }
+}
+
+.bitsun-form-card-class {
+  .ant-card-head {
+    border: 0px;
+    padding: 0px;
+    height: 48px;
+  }
+
+  .ant-card-body {
+    padding: 12px 0 0;
+    margin-top: -4px;
+    background-color: #F3F3F3;
+  }
+
+  .ant-card-head-title {
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    color: #000000;
+    font-weight: 600;
+    font-family: PingFangSC;
+    background-color: #FFFFFF;
+    padding: 8px 0;
+    margin: 0px;
+    .title-left-line {
+      display: inline-block;
+      width: 4px;
+      height: 100%;
+      background-color: #005CFF;
+      height: 20px;
+      margin-right: 16px;
+    }
+  }
+}
+
+.field-group-hidden {
+  .ant-card-body {
+    display: none !important;
+  }
+}

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

@@ -0,0 +1,39 @@
+---
+nav:
+  title: '组件'
+  order: 1
+group:
+  title: 业务组件
+  order: 1
+title: 模块导航容器组件
+order: 1
+---
+
+# GuideWrapper
+
+
+## 容器模块导航
+
+```tsx
+import React, { useState } from 'react';
+import { GuideWrapper } from '../../../index.ts';
+
+export default () => {
+  const { Field } = GuideWrapper;
+
+  return (
+     <GuideWrapper>
+        <Field id='test1' title='基础信息'>
+          <div style={{height: '400px', textAlign:'center', lineHeight: '400px'}}>模块一</div>
+        </Field>    
+        <Field id='test2' title='销售信息' isWhiteCard={true}>
+          <div style={{height: '400px', textAlign:'center', lineHeight: '400px'}}>模块二</div>
+        </Field>    
+        <Field id='test3' title='其他信息'>
+          <div style={{height: '400px', textAlign:'center', lineHeight: '400px'}}>模块三</div>
+        </Field>    
+     </GuideWrapper>
+
+  );
+};
+```

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

@@ -0,0 +1,84 @@
+import React, { Component } from "react";
+import dragImg from '../../../assets/drag.svg';
+import label_icon_bottom from '../../../assets/label_icon_bottom.svg';
+import arrow_top from '../../../assets/arrow_top.png';
+import './index.less';
+
+const Field = ({ children, ...props }: any) => {
+  const [fieldGroupVisible, setVisible] = React.useState(true);
+  return (
+    <div 
+      className={
+        `bitsun-form-card-class 
+        ${fieldGroupVisible ? '' : 'field-group-hidden'} 
+        ${props.isWhiteCard ? 'white-card' : ''}
+        `
+      } 
+      id={props.id}
+    >
+      <div className="ant-card-head">
+        <div className="ant-card-head-title">
+          <span className='title-left-line'></span>
+          <span style={{ marginRight: '5px' }}>
+            {props?.title}
+          </span>
+          <img
+            width={24}
+            style={{
+              transform: fieldGroupVisible ? 'inherit' : 'rotate(180deg)',
+              cursor: 'pointer'
+            }}
+            src={arrow_top}
+            onClick={(e) => {
+              e.stopPropagation();
+              setVisible(!fieldGroupVisible);
+            }}
+          />
+        </div>
+      </div>
+      <div className="ant-card-body">
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default class GuideWrapper extends Component {
+  static Field = Field;
+  render() {
+    const { children = [], ...props }: any = this.props;
+    let cardGroups = children.filter((item:any) => item?.props?.id && item?.props?.title);
+    return (
+      <div {...props}>
+        {children}
+        <div
+          className='form-guide'
+        >
+          <div className='form-guide-top'>
+            <img width={24} src={dragImg} />
+          </div>
+          <div className='form-guide-center'>
+            {
+              cardGroups.map((item:any) => {
+                return (
+                  <span
+                    className='form-guide-item'
+                    onClick={() => {
+                      let currentDom = document.getElementById(item.props.id);
+                      currentDom && currentDom.scrollIntoView({ block: 'center', behavior: 'smooth' });
+                    }}
+                  >
+                    {item.props.title}
+                  </span>
+                )
+              })
+            }
+          </div>
+          <div className='form-guide-bottom'>
+            <img width={24} src={label_icon_bottom} />
+          </div>
+        </div>
+      </div>
+    )
+  }
+}

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

@@ -2,21 +2,22 @@
  * @Description:
  * @Author: rodchen
  * @Date: 2022-05-07 15:17:28
- * @LastEditTime: 2022-05-08 21:01:21
- * @LastEditors: rodchen
+ * @LastEditTime: 2022-08-16 16:49:01
+ * @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: 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,
@@ -24,21 +25,25 @@ const  BusinessSearchSelect = (props: any) => {
       needModalTable,
       modalTableProps
     }
-  }, [props?.value])
+  }, [props?.value]);
+
+  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
   }
   return true
-});
+});

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>
+  )
+}

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

@@ -401,7 +401,7 @@ class DataValidation extends React.Component {
   };
 
   resetData = () => {
-    const { validDataUrl, updateData, columns, isBrandAuth } = this.props;
+    const { validDataUrl, updateData, columns, isBrandAuth, isCheckStockNum = true } = this.props;
     const resultData = this.getData().filter(d => {
       return _.compact(Object.values(d)).length
     })
@@ -417,6 +417,7 @@ class DataValidation extends React.Component {
         ...otherParams,
         columns: columns,
         data: resultData,
+        checkStockNum: isCheckStockNum
       })
       .then((result) => {
         result = result.data;