@bit-sun/business-component 3.2.4 → 3.6.1-alpha.0

package/src/components/Business/BsSulaQueryTable/setting.tsx

@@ -472,6 +472,7 @@ class SortableTable extends React.Component {
   showModal = () => {
     this.setState({
       visible: true,
+      onSearchSort: false
     });
     this.setInitValue();
   };
@@ -630,7 +631,52 @@ class SortableTable extends React.Component {
   };
 
   handleResetSetting = () => {
-    this.patchUserColumnConfig('');
+    const { setShowColumns, datasource = [], setInitialTableInfo, appRequestConfig }: any = this.props;
+    let that = this;
+    let { bsTableCode } = this.state;
+
+    return new Promise((resolve: any, reject: any) => {
+      request({
+        url: handleRequestUrl('/user','/appConfig/saveUserOrder', appRequestConfig),
+        method: 'POST',
+        data: {
+          code: that.state.bsTableCode,
+          detail: '',
+        },
+      }).then((res:any) => {
+        if (judgeIsRequestSuccess(res?.data)) {
+          let config =
+          localStorage.getItem(ENUM.BROWSER_CACHE.COLUMN_CONDITION) || '[]';
+          let configArray = JSON.parse(config);
+          let currentSetting = configArray.filter(
+            (item) => item.code === bsTableCode,
+          );
+          if (currentSetting.length) {
+            currentSetting[0].detail = JSON.stringify([]);
+          } else {
+            configArray.push({
+              code: bsTableCode,
+              detail: JSON.stringify([]),
+            });
+          }
+
+          localStorage.setItem(
+            ENUM.BROWSER_CACHE.COLUMN_CONDITION,
+            JSON.stringify(configArray),
+          );
+
+          message.success('重置表头列成功！');
+
+          setInitialTableInfo(true);
+          this.setState({
+            visible: false,
+          });
+        } else {
+          message.error('重置表头列自定义失败，请稍后尝试');
+          reject('');
+        }
+      });
+    })
   };
 
   onSearch = (e: any) => {
@@ -854,11 +900,14 @@ class SortableTable extends React.Component {
                     pagination={false}
                     showHeader={false}
                     dataSource={
-                      onSearchSort
+                      (onSearchSort
                         ? sortDataSource.filter(
                             (item) => renderToString(item?.title)?.indexOf(onSearchSort) > -1,
                           )
-                        : sortDataSource
+                        : sortDataSource).map(item => ({
+                          ...item,
+                          key: item.key || item.dataIndex
+                        }))
                     }
                     columns={this.columns}
                     rowKey="key"

package/src/components/Business/BsSulaQueryTable/utils.less

@@ -52,7 +52,7 @@
   margin: 0 0 5px !important;
 }
 .card_department {
-  color: #005cff !important;
+  color: #00A94E !important;
 }
 
 .user_info_card {

package/src/components/Business/BsSulaQueryTable/utils.tsx

@@ -119,10 +119,10 @@ export const updateGuanDate = (requestParams: any, dateKeyParams: any = {}) => {
 };
 
 export const renderZeroInSummary = (value: any) =>
-  value != '0' ? value / 1000 : '- -';
+  value != '0' ? value / 1000 : '-';
 
 export const calculateValidPeriod = (start: any, end: any) => {
-  return `${moment(end).diff(start, 'days')} 天` || '- -';
+  return `${moment(end).diff(start, 'days')} 天` || '-';
 };
 
 // 带有toptile 清提示 并且会换行的
@@ -144,7 +144,7 @@ export const handleTextLineFeed = (
   width: number = 130,
 ) => {
   return (
-    <Tooltip title={text || '- -'}>
+    <Tooltip title={text || '-'}>
       <span
         style={{
           width: width ? width + 'px' : '130px',
@@ -154,7 +154,7 @@ export const handleTextLineFeed = (
           top: '5px',
         }}
       >
-        {text || '- -'}
+        {text || '-'}
       </span>
     </Tooltip>
   );
@@ -166,7 +166,7 @@ export const handleTextOverflow = (
   width: number = 130,
 ) => {
   return (
-    <Tooltip title={text || '- -'}>
+    <Tooltip title={text || '-'}>
       <span
         style={{
           width: width ? width + 'px' : '130px',
@@ -178,7 +178,7 @@ export const handleTextOverflow = (
           top: '5px',
         }}
       >
-        {text || '- -'}
+        {text || '-'}
       </span>
     </Tooltip>
   );
@@ -325,12 +325,12 @@ export const userInfoCard = (props: any) => {
 
 export function handleCommonTimeRenderHours(text: any, format?: any) {
   const formatType = format || 'YYYY-MM-DD';
-  return (text && moment(text).format(formatType)) || '- -';
+  return (text && moment(text).format(formatType)) || '-';
 }
 
 export function handleCommonTimeRender(text: any, format?: any) {
   const formatType = format || 'YYYY-MM-DD HH:mm:ss';
-  return (text && moment(text).format(formatType)) || '- -';
+  return (text && moment(text).format(formatType)) || '-';
 }
 
 interface ColumnsEditInterfave {

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

@@ -34,7 +34,7 @@ const CommodityEntry = (props: any) => {
 
   const handleOk = () => {
     // 方法获取当前组件内部的数据，然后进行自身的业务操作
-    const resultData = dataValidationRef.current?.getValidateData();
+    const resultData = dataValidationRef.getValidateData();
 
     if (!resultData.successData.length) {
       message.error("无校验通过数据，请校验数据");
@@ -67,7 +67,7 @@ const CommodityEntry = (props: any) => {
         <Modal {...modalProps} onOk={handleOk} onCancel={handleCancel} destroyOnClose={true} zIndex={15} {...otherModalProps} >
           <DataValidation
             {...props}
-            onRef={(ref) => { dataValidationRef.current = ref }}
+            onRef={(ref) => { dataValidationRef = ref }}
             columns={columns}
             validDataUrl={validDataUrl}
             isBrandAuth={isBrandAuth}

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

@@ -8,7 +8,7 @@ export default (props: any) => {
     <div style={{ width: '100%', background: '#fff', padding: '0 20px' }} className={'common_Alert'}>
       <Alert
         style={{
-          borderColor: '#005CFF',
+          borderColor: '#00A94E',
           background: '#e5eeff',
           borderRadius: '4px',
         }}

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

@@ -66,28 +66,19 @@
   }
 
   .white-card.bitsun-form-card-class {
-    .ant-card-body {
+    .guidewrapper-body-wrapper {
       background-color: #FFFFFF;
       padding: 0px;
     }
   }
 
   .bitsun-form-card-class {
-    &>.ant-card-body {
+    &>.guidewrapper-body-wrapper {
       margin-bottom: 10px;
     }
-  }
-
-  .bitsun-form-card-class {
-    .ant-card-head {
-      border: 0px;
-      padding: 0px;
-      height: 48px;
-    }
 
-    .ant-card-body {
+    .guidewrapper-body-wrapper {
       padding: 12px 0 0;
-      margin-top: -4px;
       background-color: #F3F3F3;
     }
 
@@ -97,7 +88,6 @@
       font-size: 16px;
       color: #000000;
       font-weight: 600;
-      font-family: PingFangSC;
       background-color: #FFFFFF;
       padding: 8px 0;
       margin: 0px;
@@ -106,7 +96,7 @@
         display: inline-block;
         width: 4px;
         height: 100%;
-        background-color: #005CFF;
+        background-color: #00A94E;
         height: 20px;
         margin-right: 16px;
       }
@@ -114,8 +104,53 @@
   }
 
   .field-group-hidden {
-    .ant-card-body {
+    .guidewrapper-body-wrapper {
       display: none !important;
     }
   }
+
+  .bs-guidewrap-icon-wrap {
+    cursor: pointer;
+    color: #B6B6B6;
+    .bs-guidewrap-icon {
+      transition: transform 0.3s;
+    }
+    .bs-guidewrap-icon-toogle {
+      transform: rotate(180deg);
+    }
+  }
+}
+
+.guidewrapper-head-wrap {
+  padding-left: 16px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #fff;
+  .guidewrapper-head-left {
+    display: flex;
+    align-items: center;
+    &::before {
+      content: '';
+      display: block;
+      width: 3px;
+      background: #02AA4C;
+      height: 20px;
+    }
+    .guidewrapper-head-title {
+      font-weight: 500;
+      font-size: 14px;
+      color: #000000;
+      padding: 0 6px;
+    }
+  }
 }
+
+.guidewrapper-head-border {
+  border-bottom: 1px solid #F0F0F0;;
+}
+
+.guidewrapper-title-extra-wrap {
+  padding-left: 5px;
+}

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

@@ -5,35 +5,57 @@ nav:
 group:
   title: 业务组件
   order: 1
-title: 模块导航容器组件
+title: GuideWrapper 模块导航容器组件
 order: 1
 ---
 
 # GuideWrapper
 
-
 ## 容器模块导航
 
 ```tsx
 import React, { useState } from 'react';
+import { Space, Tag } from 'antd';
 import { GuideWrapper } from '../../../index.ts';
 
 export default () => {
   const { Field } = GuideWrapper;
+  const titleExtra = (
+    <Space style={{ marginLeft: '5px' }}>
+      <Tag color="magenta">magenta</Tag>
+      <Tag color="red">red</Tag>
+    </Space>
+  );
 
   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>
-
+    <GuideWrapper>
+      <Field
+        id="test1"
+        title="基础信息"
+        titleExtra={titleExtra}
+        extra={<a href="#">More</a>}
+      >
+        <div
+          style={{ height: '400px', textAlign: 'center', lineHeight: '400px' }}
+        >
+          模块一
+        </div>
+      </Field>
+      <Field id="test2" title="销售信息" isWhiteCard={true} bordered>
+        <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

@@ -1,48 +1,55 @@
-import React, { Component } from "react";
+import React, { Component } from 'react';
+import classNames from 'classnames';
+import { DownCircleFilled } from '@ant-design/icons';
 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';
-import classNames from "classnames";
 
-const Field = ({ children, ...props }: any) => {
+const Field = ({ children, titleExtra, title, extra, bordered, ...props }: any) => {
   const [fieldGroupVisible, setVisible] = React.useState(true);
   return (
     <div
-      className={
-        `bitsun-form-card-class
-        ${fieldGroupVisible ? '' : 'field-group-hidden'}
-        ${props.isWhiteCard ? 'white-card' : ''}
-        `
-      }
+      className={classNames({
+        'bitsun-form-card-class': true,
+        'field-group-hidden': !fieldGroupVisible,
+        'white-card': props.isWhiteCard,
+      })}
       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}
+      <div className={
+        classNames({
+          'guidewrapper-head-wrap': true,
+          'guidewrapper-head-border': bordered,
+        })
+      }>
+        <div className="guidewrapper-head-left">
+          <div className="guidewrapper-head-title">{ title }</div>
+          <div
             onClick={(e) => {
               e.stopPropagation();
               setVisible(!fieldGroupVisible);
             }}
-          />
+            className="bs-guidewrap-icon-wrap"
+          >
+            <DownCircleFilled
+              className={classNames({
+                'bs-guidewrap-icon-toogle': fieldGroupVisible,
+                'bs-guidewrap-icon': true,
+              })}
+            />
+          </div>
+          <div className='guidewrapper-title-extra-wrap'>
+            {titleExtra}
+          </div>
+        </div>
+        <div className="guidewrapper-head-right">
+          {extra}
         </div>
       </div>
-      <div className="ant-card-body">
-        {children}
-      </div>
+      <div className="guidewrapper-body-wrapper">{children}</div>
     </div>
-  )
-}
+  );
+};
 
 export default class GuideWrapper extends Component {
   static Field = Field;
@@ -50,45 +57,52 @@ export default class GuideWrapper extends Component {
     const { children = [], ...props }: any = this.props;
     // 兼容容器下只有一个dom元素非数组的情况
     const domList = Array.isArray(children) ? children : [children];
-    let cardGroups = domList.filter((item:any) => item?.props?.id && item?.props?.title);
+    let cardGroups = domList.filter(
+      (item: any) => item?.props?.id && item?.props?.title,
+    );
     return (
       <div {...props} className={classNames('guide-wrapper', props?.className)}>
         {children}
-        <div
-          className='form-guide'
-        >
-          <div className='form-guide-top'>
+        {/* TODO:移除右侧固定栏，暂时注释，下个版本移除 */}
+        {/* <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: any = document.getElementById(item.props.id);
-                      currentDom && currentDom.scrollIntoView({ block: 'center', behavior: 'smooth' });
+          <div className="form-guide-center">
+            {cardGroups.map((item: any) => {
+              return (
+                <span
+                  className="form-guide-item"
+                  onClick={() => {
+                    let currentDom: any = document.getElementById(
+                      item.props.id,
+                    );
+                    currentDom &&
+                      currentDom.scrollIntoView({
+                        block: 'center',
+                        behavior: 'smooth',
+                      });
 
-                      // 高亮
-                      let heightLight = currentDom.getElementsByClassName('ant-card-head-title')
-                      heightLight[0].style.backgroundColor = '#2065c7'
-                      setTimeout(() => {
-                        heightLight[0].style.backgroundColor = ''
-                      }, 800);
-                    }}
-                  >
-                    {item.props.title}
-                  </span>
-                )
-              })
-            }
+                    // 高亮
+                    let heightLight = currentDom.getElementsByClassName(
+                      'ant-card-head-title',
+                    );
+                    heightLight[0].style.backgroundColor = '#2065c7';
+                    setTimeout(() => {
+                      heightLight[0].style.backgroundColor = '';
+                    }, 800);
+                  }}
+                >
+                  {item.props.title}
+                </span>
+              );
+            })}
           </div>
-          <div className='form-guide-bottom'>
+          <div className="form-guide-bottom">
             <img width={24} src={label_icon_bottom} />
           </div>
-        </div>
+        </div> */}
       </div>
-    )
+    );
   }
 }

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

@@ -1,5 +1,5 @@
 .detail_page_head {
-  height: 54px;
+  padding: 8px 0;
   z-index: 5;
   display: flex;
   align-items: center;
@@ -26,16 +26,16 @@
 }
 .detail_page_wrapper {
   // padding-top: 51px;
-  min-height: calc(100vh - 80px);
+  height: calc(100vh - 80px);
   background-color: #FFF;
 }
 
 .back_home_img_content {
   display: inline-block;
-  height: 28px;
-  width: 28px;
+  height: 24px;
+  width: 24px;
   border: 1px solid #BABABA;
-  margin: 0 12px 0 20px;
+  margin: 0 8px 0 16px;
   border-radius: 14px;
   display: flex;
   align-items: center;
@@ -47,8 +47,8 @@
 }
 
 .back_home_img_content:hover {
-  background-color: #005CFF;
-  border: 1px solid #005CFF;
+  background-color: #00A94E;
+  border: 1px solid #00A94E;
   .anticon-arrow-left {
     color: #FFFFFF;
   }
@@ -56,14 +56,16 @@
 
 .detail_page_title_box {
   flex-grow: 1;
+  display: flex;
+  align-items: center;
 }
 
 .detail_page_title {
   height: 20px;
   font-family: PingFangSC;
   font-weight: 600;
-  font-size: 16px;
-  margin-top: 2px;
+  font-size: 14px;
+  padding-right: 10px;
   color: #000000;
   letter-spacing: 0;
   line-height: 20px;

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

@@ -221,7 +221,7 @@ const DetailWrapper = React.memo(
     };
 
     return (
-      <div style={{ height: '54px' }} ref={wrapperContainerRef}>
+      <div ref={wrapperContainerRef}>
         <div
           className={'detail_page_head'}
           style={{
@@ -233,7 +233,6 @@ const DetailWrapper = React.memo(
             className={'back_home_img_content'}
             onClick={() => {
               go2BackAndClose(backHistoryPath);
-              // history.goBack();
             }}
           >
             <ArrowLeftOutlined />
@@ -244,28 +243,8 @@ const DetailWrapper = React.memo(
               {breadcrumbArr.map((item) => (
                 <Breadcrumb.Item
                   key={item}
-                  onClick={() => {
-                    // if (
-                    //   item.path &&
-                    //   !item.children &&
-                    //   !pathToRegexp(item.path).test(`${basePath}${pathname}`)
-                    // ) {
-                    //   history.push({
-                    //     pathname: item.path.replace(basePath, ''),
-                    //   });
-                    // }
-                  }}
                 >
-                  <span
-                    style={{
-                      // color:
-                      //   item.path &&
-                      //   pathToRegexp(item.path).test(`${basePath}${pathname}`)
-                      //     ? '#000000d9'
-                      //     : '',
-                    }}
-                    className="bread_name"
-                  >
+                  <span className="bread_name" >
                     {item}
                   </span>
                 </Breadcrumb.Item>

package/src/components/Business/DetailPageWrapper/utils.tsx

@@ -147,7 +147,7 @@ export function matchRoute(path, routeObj, hideRouteObj) {
 export const getDetailMatchRoute = (path, routeObj, hideRouteArray, { pathToRegexp }) => {
   const newPath = path.split('?')[0]
   const hideRouteObj = {
-    [newPath]: Array.isArray(hideRouteArray) && hideRouteArray?.find((itemRoute) => pathToRegexp(itemRoute.path).test(newPath))
+    [newPath]: hideRouteArray.find((itemRoute) => pathToRegexp(itemRoute.path).test(newPath))
   }
   const matchedRoute = matchRoute(newPath, routeObj, hideRouteObj);
   if (matchedRoute) {

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

@@ -1,11 +1,14 @@
 .home_page_head {
-  height: 54px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: #FFFFFF;
   border-bottom: 1px solid #f0f0f0;
-  padding: 0 20px;
+  padding: 10px 20px;
+  .home_page_title_wrapper {
+    display: flex;
+    align-items: center;
+  }
   .home_page_title {
     height: 20px;
     font-family: PingFangSC-Medium;
@@ -15,7 +18,7 @@
     letter-spacing: 0;
     line-height: 20px;
     flex-grow: 1;
-    margin-top: 2px;
+    padding-right: 10px;
   }
   .ant-breadcrumb {
     display: block !important;