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

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

@@ -1,101 +0,0 @@
-// @ts-nocheck
-import { request } from 'bssula';
-import { Modal } from 'antd';
-import { ExclamationCircleOutlined } from '@ant-design/icons';
-import React from 'react';
-import { history } from 'umi';
-
-interface actionItem {
-  [propName: string]: any;
-}
-
-export const doDetailPageAction = (config: actionItem) => {
-  if (config?.type == 'modal') {
-    const { confirm } = Modal;
-    let requestConfig = {
-      url: config.url,
-      method: config.method,
-      params: config.params || {},
-      successMessage: config?.successMessage,
-    };
-
-
-    const onOk = () => {
-      request(requestConfig).then((res) => {
-        if (config.backPath) {
-          history.push({
-            pathname: config.backPath
-          })
-        }
-        // 是否执行成功之后的回调
-        if (typeof (config.successCb) === 'function') {
-          config.successCb();
-        }
-      });
-    };
-
-    if (config.noConfirm) {
-      onOk();
-    } else {
-      confirm({
-        title: config.title,
-        icon: <ExclamationCircleOutlined />,
-        content: config.content,
-        okText: '确定',
-        okType: 'danger',
-        cancelText: '取消',
-        onOk,
-        onCancel() {
-          console.log('Cancel');
-        },
-      });
-    }
-  }
-}
-
-export const getBreadcrumbNameMap = (menuData) => {
-  const routerMap = {};
-
-  const flattenMenuData = (data) => {
-    data.forEach((menuItem) => {
-      if (menuItem.children) {
-        flattenMenuData(menuItem.children);
-      }
-      // Reduce memory usage
-      routerMap[menuItem.path] = menuItem;
-    });
-  };
-  flattenMenuData(menuData);
-  return routerMap;
-};
-
-export const judgeIsEmpty = (value: any) => {
-  if (value == null || value == undefined || String(value).trim() == '') {
-    return true;
-  }
-  return false;
-};
-
-export const getMainCrumbNameMap = (menuData) => {
-  const routerMap = {};
-
-  const flattenMenuData = (data, parent) => {
-    let pNameMap = parent.nameMap ? [...parent.nameMap] : [];
-    data.forEach((menuItem) => {
-      let newMenuItem = {
-        ...menuItem,
-        nameMap: [...pNameMap, menuItem.name]
-      }
-      if (newMenuItem.children) {
-        flattenMenuData(newMenuItem.children, newMenuItem);
-      }
-      
-      // Reduce memory usage
-      routerMap[menuItem.path] = {
-        ...newMenuItem,
-      };
-    });
-  };
-  flattenMenuData(menuData, {});
-  return routerMap;
-}

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

@@ -1,33 +0,0 @@
-.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;
-  .home_page_title {
-    height: 20px;
-    font-family: PingFangSC-Medium;
-    font-weight: 600;
-    font-size: 16px;
-    color: #000000;
-    letter-spacing: 0;
-    line-height: 20px;
-    flex-grow: 1;
-    margin-top: 2px;
-  }
-  .ant-breadcrumb {
-    display: block !important;
-    .ant-breadcrumb-separator {
-      margin: 0 2px;
-    }
-    li .bread_name {
-      
-      color: #8A8F8D;
-      font-size: 12px;
-      line-height: 16px;
-      cursor: pointer;
-    }
-  }
-}

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

@@ -1,45 +0,0 @@
----
-nav:
-  title: '组件'
-  order: 1
-group:
-  title: 业务组件
-  order: 1
-title: 标题组件
-order: 1
----
-
-# HomePageWrapper
-
-
-## 首页标题组件
-
-```tsx
-import { HomePageWrapper } from '../../../index.ts';
-import React, { useState } from 'react';
-
-export default () => {
-  const routes = [
-    {
-      path: '/',
-      name: 'welcome',
-      routes: [
-        {
-           path: '/components',
-           name: '组件',
-           routes: [
-            {
-              path: '/components/business/home-page-wrapper',
-              name: '标题组件',
-              component: 'aaa'
-            }
-           ]
-        }
-      ]
-    }
-  ]
-  return (
-    <HomePageWrapper routes={routes} />
-  );
-};
-```

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

@@ -1,162 +0,0 @@
-// @ts-nocheck
-import React, { useEffect, useState, useMemo } from 'react';
-import { getMainCrumbNameMap } from '../DetailPageWrapper/utils';
-import { memoizeOneFormatter } from '@/utils/utils';
-import { Breadcrumb, Space } from 'antd';
-import './index.less';
-import { useLocation, formatMessage } from 'umi';
-import CommonAlert from '../CommonAlert';
-import ENUM from '@/utils/enumConfig';
-
-export default (props: any) => {
-  const { pathname } = useLocation();
-  const [id]: any = useState(pathname + 'id');
-  const { children, ...restProps} = props;
-
-  return (
-    <div id={id} className={'home_page_wrapper'}>
-      <HeaderWrapper 
-        pathname={pathname}
-        {
-          ...restProps
-        } 
-      />
-      {props.children}
-    </div>
-  );
-};
-
-const HeaderWrapper = React.memo(
-  ({ 
-    pathname, 
-    routes=[], 
-    itemPath,
-    alertProps,
-    extra,
-    title,
-    pathToRegexp, //改为从项目代码透传该方法
-  }: { pathname: string, routes: any[], itemPath: string, alertProps: any }) => {
-    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 (breadcrumbArrs.length && title) {
-        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]);
-
-    useEffect(() => {}, [pathname]);
-
-    // const breadcrumbArr = `${basePath}${pathname}`
-    //   .split('/')
-    //   .slice(1)
-    //   .map((_item, index, arr) =>
-    //     matchParamsPath(
-    //       `/${arr.slice(0, index + 1).join('/')}`,
-    //       breadcrumbNameMap,
-    //     ),
-    //   )
-    //   .filter((item) => item);
-
-
-    return (
-      <div>
-        <div className={'home_page_head'}>
-          <div>
-            <div className={'home_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: pathToRegexp(item.path).test(
-                      //   `${basePath}${pathname}`,
-                      // )
-                      //   ? '#000000d9'
-                      //   : '',
-                    }}
-                    className="bread_name"
-                  >
-                    {item}
-                  </span>
-                </Breadcrumb.Item>
-              ))}
-            </Breadcrumb>
-          </div>
-          {
-            extra ? 
-            <Space>
-              {
-                extra
-              }
-            </Space> : ''
-          }
-        </div>
-        {
-          alertProps && (
-            <CommonAlert
-              {
-                ...alertProps
-              }
-            />
-          )
-        }
-      </div>
-    );
-  },
-  (prevProps, nextProps) => {
-    if (prevProps.title !== nextProps.title) {
-      return false;
-    }
-    return true;
-  },
-);

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

@@ -1,131 +0,0 @@
-.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

@@ -1,60 +0,0 @@
----
-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

@@ -1,30 +0,0 @@
-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/Business/TreeSearchSelect/index.md

@@ -1,126 +0,0 @@
----
-nav:
-  title: '组件'
-  order: 1
-group:
-  title: 业务组件
-  order: 1
-title: 树型业务选择器
-order: 2
----
-
-## BusinessTreeSearchSelect
-
-Demo
-
-部门选择器:
-
-```tsx
-import React, { useState } from 'react';
-import { BusinessTreeSearchSelect } from '../../../index';
-
-export default () => {
-
-  const [value, setValue] = useState();
-  
-  const props = {
-    mode: 'create',
-    value,
-    onChange: (v) => {
-      setValue(v)
-    },
-    businessType: 'department'
-  };
-
-  return (
-    <div>
-      <BusinessTreeSearchSelect {...props} />
-    </div>
-  );
-};
-```
-
-
-销售组织选择器:
-
-```tsx
-import React, { useState } from 'react';
-import { BusinessTreeSearchSelect } from '../../../index';
-
-export default () => {
-
-  const [value, setValue] = useState();
-  
-  const props = {
-    mode: 'create',
-    value,
-    onChange: (v) => {
-      setValue(v)
-    },
-    businessType: 'sales-organization'
-  };
-
-  return (
-    <div>
-      <BusinessTreeSearchSelect {...props} />
-    </div>
-  );
-};
-```
-
-采购组织选择器:
-
-```tsx
-import React, { useState } from 'react';
-import { BusinessTreeSearchSelect } from '../../../index';
-
-export default () => {
-
-  const [value, setValue] = useState();
-  
-  const props = {
-    mode: 'create',
-    value,
-    onChange: (v) => {
-      setValue(v)
-    },
-    businessType: 'purchase-organization'
-  };
-
-  return (
-    <div>
-      <BusinessTreeSearchSelect {...props} />
-    </div>
-  );
-};
-```
-
-库存组织选择器:
-
-```tsx
-import React, { useState } from 'react';
-import { BusinessTreeSearchSelect } from '../../../index';
-
-export default () => {
-
-  const [value, setValue] = useState();
-  
-  const props = {
-    mode: 'create',
-    value,
-    isChoose: false, // 控制是否父节点可选中，默认不可选中
-    onChange: (v) => {
-      setValue(v)
-    },
-    businessType: 'stock-organization'
-  };
-
-  return (
-    <div>
-      <BusinessTreeSearchSelect {...props} />
-    </div>
-  );
-};
-```
-
-More skills for writing demo: https://d.umijs.org/guide/demo-principle