@bit-sun/business-component 1.2.3 → 1.2.4-alpha.1

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

@@ -9,10 +9,13 @@ const CommodityEntry = (props: any) => {
   const {
     buttonName=' + 录入商品',
     modalTitle = '录入商品',
+    buttonProps = {},
     callbackHideModal,
     callbackHandleOk,
     columns=["skuCode", "quantity", "price"],
-    validDataUrl="/bop/api/recordDetailImport/check"
+    validDataUrl="/items/sku/import/check",
+    isBrandAuth = true, // 默认做品牌过滤
+    isCheckStockNum = true
   } = props;
 
   const [modalProps, setModalProps]: any = useState({
@@ -58,13 +61,15 @@ const CommodityEntry = (props: any) => {
 
   return (
     <div>
-      <Button onClick={handleShowModal}>{buttonName}</Button>
+      <Button onClick={handleShowModal} {...buttonProps}>{buttonName}</Button>
       {modalProps.visible && (
         <Modal {...modalProps} onOk={handleOk} onCancel={handleCancel} destroyOnClose={true} zIndex={15}>
           <DataValidation
             onRef={(ref) => { dataValidationRef = ref }}
             columns={columns}
             validDataUrl={validDataUrl}
+            isBrandAuth={isBrandAuth}
+            isCheckStockNum={isCheckStockNum}
           />
         </Modal>
       ) || ''}

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Alert } from 'antd';
+import './index.less';
+
+export default (props: any) => {
+  const { message, type='info', ...reset } = props
+  return (
+    <div style={{ width: '100%', background: '#fff', padding: '0 20px' }} className={'common_Alert'}>
+      <Alert
+        style={{
+          borderColor: '#005CFF',
+          background: '#e5eeff',
+          borderRadius: '4px',
+        }}
+        message={message}
+        type={type}
+        showIcon
+        closable
+        {...reset}
+      />
+    </div>
+  )
+}

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/DetailPageWrapper/index.less

@@ -0,0 +1,80 @@
+.detail_page_head {
+  height: 54px;
+  display: flex;
+  align-items: center;
+  background-color: #FFFFFF;
+  border-bottom: 1px solid #f0f0f0;
+  .ant-breadcrumb {
+    display: block !important;
+    .ant-breadcrumb-separator {
+      margin: 0 2px;
+    }
+    li .bread_name {
+      color: #8A8F8D;
+      font-size: 12px;
+      cursor: pointer;
+    }
+    li .bread_name:hover {
+      color: #000000d9;
+    }
+  }
+}
+.detail_page_wrapper {
+  // padding-top: 51px;
+}
+
+.back_home_img_content {
+  display: inline-block;
+  height: 28px;
+  width: 28px;
+  border: 1px solid #BABABA;
+  margin: 0 12px 0 20px;
+  border-radius: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  .anticon-arrow-left {
+    color: #BABABA;
+  }
+}
+
+.back_home_img_content:hover {
+  background-color: #005CFF;
+  border: 1px solid #005CFF;
+  .anticon-arrow-left {
+    color: #FFFFFF;
+  }
+}
+
+.detail_page_title_box {
+  flex-grow: 1;
+}
+
+.detail_page_title {
+  height: 20px;
+  font-family: PingFangSC;
+  font-weight: 600;
+  font-size: 16px;
+  margin-top: 2px;
+  color: #000000;
+  letter-spacing: 0;
+  line-height: 20px;
+}
+
+.detail_page_btns {
+  display: flex;
+  gap: 8px;
+  margin-right: 20px;
+  button {
+    height: 32px !important;
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    border-radius: 3px;
+    padding: 0 10px;
+  }
+  .ant-btn-dangerous {
+    background-color: #EC5246 !important;
+  }
+}

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

@@ -0,0 +1,335 @@
+// @ts-nocheck
+import {
+  ArrowLeftOutlined,
+} from '@ant-design/icons';
+import { Anchor, Tooltip, Button, Menu, Dropdown, Breadcrumb } from 'antd';
+import React, { useEffect, useState, useMemo } from 'react';
+import { history } from 'umi';
+import { getMainCrumbNameMap, doDetailPageAction, judgeIsEmpty } from './utils';
+import { memoizeOneFormatter } from '@/utils/utils';
+import './index.less';
+import quanping from '../../../assets/icon-quanping.svg';
+import scanning from '../../../assets/scanning.svg';
+import editIcon from '../../../assets/btn-edit.svg';
+import submitIcon from '../../../assets/btn-submit.svg';
+import deleteIcon from '../../../assets/btn-delete.svg';
+import moreIcon from '../../../assets/btn-more.svg';
+import { useLocation, formatMessage } from 'umi';
+import CommonAlert from '../CommonAlert';
+import ENUM from '@/utils/enumConfig';
+
+interface actionItem {
+  type?: string;
+  name: string;
+  icon?: string;
+  visible?: boolean | string;
+  disabled?: boolean;
+  code?: string; //权限过滤todo
+  action: object;
+}
+
+export const iconMap = {
+  edit: <img src={editIcon} />,
+  delete: <img src={deleteIcon} />,
+  submit: <img src={submitIcon} />,
+  more: <img src={moreIcon} />,
+};
+
+export default (props: any) => {
+  const { pathname } = useLocation();
+  const [id]: any = useState(pathname + 'id');
+  const { children, ...restProps } = props;
+
+  return (
+    <div id={id} className={'detail_page_wrapper'}>
+      <DetailWrapper
+        pathname={pathname} 
+        {
+          ...restProps
+        }
+      />
+      {children}
+    </div>
+  );
+};
+
+const DetailWrapper = React.memo(
+  ({ 
+    pathname, 
+    actionList=[], 
+    routes=[], 
+    itemPath, 
+    alertProps,
+    donotNeedShowScreenIcon=false,
+    title,
+    pathToRegexp,
+  }: any) => {
+    const [isFullScreen, setIsFnllScreen]: any = useState(false);
+    const [breadcrumbArr, setBreadCrumbArr]: any = useState([]);
+
+    const basePath = window.top == window ? '' : `/${itemPath}`;
+
+    const menuRoutes =
+      window.top == window
+        ? routes.find((item) => item.path === '/')?.routes || []
+        : JSON.parse(localStorage.getItem(ENUM.BROWSER_CACHE.LIMIT_MENU_DATA) || '[]');
+
+    const breadcrumbNameMap = getMainCrumbNameMap(
+      memoizeOneFormatter(menuRoutes, ''),
+    );
+    const matchParamsPath = (pathname: string, breadcrumbNameMap: object) => {
+      const pathKey: any = Object.keys(breadcrumbNameMap).find((key) =>
+        pathToRegexp ? pathToRegexp(key).test(pathname) : false
+      );
+      return pathKey ? breadcrumbNameMap[pathKey] : undefined;
+    };
+
+    const getPageTitle = (pathname: string) => {
+      const currRouterData = matchParamsPath(
+        `${basePath}${pathname}`,
+        breadcrumbNameMap,
+      );
+
+      if (!currRouterData) {
+        return '';
+      }
+
+      let breadcrumbArrs = currRouterData.nameMap || [];
+      if (title && breadcrumbArrs.length) {
+        breadcrumbArrs.pop();
+        breadcrumbArrs.push(title)
+      }
+      setBreadCrumbArr([...breadcrumbArrs])
+
+      const pageName = formatMessage({
+        id: currRouterData.locale || currRouterData.name,
+        defaultMessage: currRouterData.name,
+      });
+
+      return title ? title : window.top === window ? pageName : `${currRouterData.name}`;
+    };
+
+    const pageTitle = useMemo(() => getPageTitle(pathname), [pathname, title]);
+
+    // const breadcrumbArr = `${basePath}${pathname}`
+    //   .split('/')
+    //   .slice(1)
+    //   .map((_item, index, arr) =>
+    //     matchParamsPath(
+    //       `/${arr.slice(0, index + 1).join('/')}`,
+    //       breadcrumbNameMap,
+    //     ),
+    //   )
+    //   .filter((item) => item);
+
+    useEffect(() => {}, []);
+
+    const ShowFullScreen = () => {
+      if (window.top != window) {
+        window.parent.postMessage(
+          {
+            type: 'screenChange',
+            id: itemPath,
+          },
+          '*',
+        );
+        setIsFnllScreen(!isFullScreen);
+      } else {
+        const isFullScreen: any =
+          document.fullScreen ||
+          document.webkitIsFullScreen ||
+          document.mozFullScreen;
+        let contentEle: any = document.querySelector(`body`);
+        // addTabsNavStyle(isFullScreen);
+        if (contentEle && !isFullScreen) {
+          let fullScreenEle =
+            contentEle.requestFullscreen ||
+            contentEle.mozRequestFullScreen ||
+            contentEle.webkitRequestFullScreen ||
+            contentEle.msRequestFullscreen;
+          if (fullScreenEle) {
+            fullScreenEle.call(contentEle);
+            setIsFnllScreen(true);
+            return;
+          }
+        }
+        if (document && isFullScreen) {
+          let exitFullScreen =
+            document.exitFullscreen ||
+            document.mozCancelFullScreen ||
+            document.webkitCancelFullScreen ||
+            document.msExitFullscreen;
+          if (exitFullScreen) {
+            exitFullScreen.call(document);
+            setIsFnllScreen(false);
+            return;
+          }
+        }
+      }
+    };
+
+    const renderPageActionList = (actionLists: Array<actionItem>) => {
+      const authButton = localStorage.getItem(ENUM.BROWSER_CACHE.MAIN_AUTH_CODES)
+      ? JSON.parse(localStorage.getItem(ENUM.BROWSER_CACHE.MAIN_AUTH_CODES) as string)
+      : [];
+      let visibleActions = actionLists.filter(
+        (action) =>
+          ((action.visible && action.visible !== 'false') || judgeIsEmpty(action.visible)) && 
+          (judgeIsEmpty(action.code) || authButton.filter(item => item === action.code)),
+      );
+
+      const renderButton = (item: actionItem, type?: any) => {
+        return (
+          <Button
+            type={type || 'primary'}
+            icon={item.icon ? iconMap[item.icon] : ''}
+            danger={item.name === '删除' ? true : false}
+            disabled={item.disabled}
+            onClick={() => {
+              if (typeof item.action === 'function') {
+                item.action();
+              } else {
+                doDetailPageAction(item.action);
+              }
+            }}
+          >
+            {item.name}
+          </Button>
+        );
+      };
+
+      if (visibleActions.length <= 3) {
+        return visibleActions.map((item) => {
+          return renderButton(item);
+        });
+      }
+
+      let moreOperate = visibleActions.splice(3);
+      const menu = (
+        <Menu>
+          {moreOperate.map((item: any, index: number) => (
+            <Menu.Item className="more-btn-action" key={index}>
+              {renderButton(item, 'link')}
+            </Menu.Item>
+          ))}
+        </Menu>
+      );
+      //按钮操作3个显示更多
+      return (
+        <div className="detail_btn_wrapper">
+          {visibleActions.map((item: any, index: number) => {
+            return renderButton(item);
+          })}
+          <Dropdown style={{ padding: '0px' }} overlay={menu}>
+            <Button type="primary">
+              <span style={{ margin: '0px' }}>更多</span>
+              <img src={moreIcon} />
+            </Button>
+          </Dropdown>
+        </div>
+      );
+    };
+
+    return (
+      <Anchor
+        key={`${pathname}_anchor`}
+        offsetTop={window.top == window ? 78 : 0}
+      >
+        <div>
+          <div className={'detail_page_head'}>
+            <div
+              className={'back_home_img_content'}
+              onClick={() => {
+                history.goBack();
+              }}
+            >
+              <ArrowLeftOutlined />
+            </div>
+            <div className={'detail_page_title_box'}>
+              <div className={'detail_page_title'}>{pageTitle}</div>
+              <Breadcrumb>
+                {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"
+                    >
+                      {item}
+                    </span>
+                  </Breadcrumb.Item>
+                ))}
+              </Breadcrumb>
+            </div>
+            <div
+              className={'detail_page_btns'}
+              style={{ marginRight: '20px', display: 'flex', gap: '8px' }}
+            >
+              {renderPageActionList(actionList)}
+              {
+                !donotNeedShowScreenIcon ? ( <a>
+                  {isFullScreen ? (
+                    <Tooltip title="取消全屏">
+                      <img
+                        onClick={() => {
+                          ShowFullScreen();
+                        }}
+                        width={32}
+                        src={scanning}
+                      />
+                    </Tooltip>
+                  ) : (
+                    <Tooltip title="全屏">
+                      <img
+                        onClick={() => {
+                          ShowFullScreen();
+                        }}
+                        width={32}
+                        src={quanping}
+                      />
+                    </Tooltip>
+                  )}
+                </a>) : null
+              }
+            </div>
+          </div>
+          {
+            alertProps && (
+              <CommonAlert
+                {
+                  ...alertProps
+                }
+              />
+            )
+          }
+        </div>
+      </Anchor>
+    );
+  },
+  (prevProps, nextProps) => {
+    if (
+      (JSON.stringify(prevProps.actionList) != JSON.stringify(nextProps.actionList)) || prevProps.title !== nextProps.title
+    ) {
+      return false;
+    }
+    return true;
+  },
+);