@bit-sun/business-component 2.0.31 → 2.0.33

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

@@ -0,0 +1,150 @@
+// @ts-nocheck
+import React, { useEffect, useState, useMemo } from 'react';
+import { history } from 'umi';
+import { memoizeOneFormatter, getBreadcrumbNameMap } from '../DetailPageWrapper/utils';
+import pathToRegexp from 'path-to-regexp';
+import { Breadcrumb, Space } from 'antd';
+import './index.less';
+import { useLocation, formatMessage } from 'umi';
+import CommonAlert from '../CommonAlert';
+
+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,
+  }: { pathname: string, routes: any[], itemPath: string, alertProps: any }) => {
+    const basePath = window.top == window ? '' : `/${itemPath}`;
+    const menuRoutes =
+      window.top == window
+        ? routes.find((item) => item.path === '/')?.routes || []
+        : JSON.parse(localStorage.getItem('limitedMenuData') || '[]');
+
+    const breadcrumbNameMap = getBreadcrumbNameMap(
+      memoizeOneFormatter(menuRoutes, ''),
+    );
+
+    const matchParamsPath = (pathname: string, breadcrumbNameMap: object) => {
+      const pathKey: any = Object.keys(breadcrumbNameMap).find((key) =>
+        pathToRegexp(key).test(pathname),
+      );
+      return breadcrumbNameMap[pathKey];
+    };
+
+    const getPageTitle = (pathname: string) => {
+      const currRouterData = matchParamsPath(
+        `${basePath}${pathname}`,
+        breadcrumbNameMap,
+      );
+
+      if (!currRouterData) {
+        return '';
+      }
+      const pageName = formatMessage({
+        id: currRouterData.locale || currRouterData.name,
+        defaultMessage: currRouterData.name,
+      });
+      return `${pageName}`;
+    };
+
+    const pageTitle = useMemo(() => getPageTitle(pathname), [pathname]);
+
+    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.path}
+                  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.name}
+                  </span>
+                </Breadcrumb.Item>
+              ))}
+            </Breadcrumb>
+          </div>
+          {
+            extra ? 
+            <Space>
+              {
+                extra
+              }
+            </Space> : ''
+          }
+        </div>
+        {
+          alertProps && (
+            <CommonAlert
+              {
+                ...alertProps
+              }
+            />
+          )
+        }
+      </div>
+    );
+  },
+  (prevProps, nextProps) => {
+    // if (prevProps.pathname === nextProps.pathname) {
+    //   return true;
+    // }
+    return true;
+  },
+);

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

@@ -11,6 +11,10 @@ import { arrayMoveImmutable } from 'array-move';
 import shezhi from '../../../assets/icon-shezhi.svg';
 import close from '../../../assets/close.svg';
 import drag from '../../../assets/drag.svg';
+import fixedLeft from '../../../assets/fixed-left.svg';
+import fixedLeftActive from '../../../assets/fixed-left-active.svg';
+import fixedRight from '../../../assets/fixed-right.svg';
+import fixedRightActive from '../../../assets/fixed-right-active.svg';
 import axios from 'axios';
 // import { request } from 'umi';
 import './index.less';
@@ -155,6 +159,164 @@ class SortableTable extends React.Component<SortTableProps> {
       className: 'drag-visible',
       width: 100,
     },
+    {
+      title: '列首',
+      dataIndex: 'fixedLeft',
+      render: (text, record) => {
+        return (
+          <span
+            onClick={() => {
+              const { sortDataSource } = this.state;
+              if (record?.fixed !== 'left') {
+                let newSortData = sortDataSource.map((item) => {
+                  if (item.title === record.title) {
+                    return {
+                      ...item,
+                      fixed: 'left',
+                    };
+                  }
+                  return item;
+                });
+                this.setState({
+                  sortDataSource: [
+                    ...newSortData.filter((item) => item.fixed === 'left'),
+                    ...newSortData.filter((item) => !item.fixed),
+                    ...newSortData.filter((item) => item.fixed === 'right'),
+                  ],
+                  dataSource: [
+                    ...this.state.dataSource.map((item) => {
+                      if (item.title === record.title) {
+                        return {
+                          ...item,
+                          fixed: 'left',
+                        };
+                      }
+                      return item;
+                    }),
+                  ],
+                });
+              } else {
+                let newSortData = sortDataSource.map((item) => {
+                  if (item.title === record.title) {
+                    return {
+                      ...item,
+                      fixed: null,
+                    };
+                  }
+                  return item;
+                });
+                this.setState({
+                  sortDataSource: [
+                    ...newSortData.filter((item) => item.fixed === 'left'),
+                    ...newSortData.filter((item) => !item.fixed),
+                    ...newSortData.filter((item) => item.fixed === 'right'),
+                  ],
+                  dataSource: [
+                    ...this.state.dataSource.map((item) => {
+                      if (item.title === record.title) {
+                        return {
+                          ...item,
+                          fixed: null,
+                        };
+                      }
+                      return item;
+                    }),
+                  ],
+                });
+              }
+            }}
+          >
+            <Tooltip
+              placement="top"
+              title={record?.fixed === 'left' ? '取消固定' : '固定列首'}
+            >
+              <img
+                src={record?.fixed === 'left' ? fixedLeftActive : fixedLeft}
+              />
+            </Tooltip>
+          </span>
+        );
+      },
+    },
+    {
+      title: '列尾',
+      dataIndex: 'fixedRight',
+      render: (text, record) => {
+        return (
+          <span
+            onClick={() => {
+              const { sortDataSource } = this.state;
+              if (record?.fixed !== 'right') {
+                let newSortData = sortDataSource.map((item) => {
+                  if (item.title === record.title) {
+                    return {
+                      ...item,
+                      fixed: 'right',
+                    };
+                  }
+                  return item;
+                });
+                this.setState({
+                  sortDataSource: [
+                    ...newSortData.filter((item) => item.fixed === 'left'),
+                    ...newSortData.filter((item) => !item.fixed),
+                    ...newSortData.filter((item) => item.fixed === 'right'),
+                  ],
+                  dataSource: [
+                    ...this.state.dataSource.map((item) => {
+                      if (item.title === record.title) {
+                        return {
+                          ...item,
+                          fixed: 'right',
+                        };
+                      }
+                      return item;
+                    }),
+                  ],
+                });
+              } else {
+                let newSortData = sortDataSource.map((item) => {
+                  if (item.title === record.title) {
+                    return {
+                      ...item,
+                      fixed: null,
+                    };
+                  }
+                  return item;
+                });
+                this.setState({
+                  sortDataSource: [
+                    ...newSortData.filter((item) => item.fixed === 'left'),
+                    ...newSortData.filter((item) => !item.fixed),
+                    ...newSortData.filter((item) => item.fixed === 'right'),
+                  ],
+                  dataSource: [
+                    ...this.state.dataSource.map((item) => {
+                      if (item.title === record.title) {
+                        return {
+                          ...item,
+                          fixed: null,
+                        };
+                      }
+                      return item;
+                    }),
+                  ],
+                });
+              }
+            }}
+          >
+            <Tooltip
+              placement="top"
+              title={record?.fixed === 'right' ? '取消固定' : '固定列尾'}
+            >
+              <img
+                src={record?.fixed === 'right' ? fixedRightActive : fixedRight}
+              />
+            </Tooltip>
+          </span>
+        );
+      },
+    },
     {
       title: '删除',
       dataIndex: 'title1',
@@ -251,17 +413,23 @@ class SortableTable extends React.Component<SortTableProps> {
   onSortEnd = ({ oldIndex, newIndex }: any) => {
     const { sortDataSource } = this.state;
     const { value, setValue }: any = this.props;
-    if (sortDataSource[oldIndex]['fixed']) {
-      message.warning('固定列不可移动');
-      return;
-    }
+    // if (sortDataSource[oldIndex]['fixed']) {
+    //   message.warning('固定列不可移动');
+    //   return;
+    // }
     if (oldIndex !== newIndex) {
       const newData = arrayMoveImmutable(
         [].concat(sortDataSource),
         oldIndex,
         newIndex,
       ).filter((el) => !!el);
-      this.setState({ sortDataSource: newData });
+      this.setState({
+        sortDataSource: [
+          ...newData.filter((item) => item.fixed === 'left'),
+          ...newData.filter((item) => !item.fixed),
+          ...newData.filter((item) => item.fixed === 'right'),
+        ],
+      });
     }
   };
 

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

@@ -143,6 +143,14 @@ export default class ColumnSettingTable extends React.Component {
     );
   }
 
+  getTableScrollXWidth = (cols: any[]) => {
+    if (cols.every((item: any) => item.width)) {
+      return cols.reduce((cur: any, obj: any) => cur += obj.width, 0)
+    } else {
+      return 'max-content'
+    }
+  };
+
   render() {
     const { columns, tableCode, summary = undefined, dynamicColumns = [], ...restProps }: any = this.props;
     let otherTableInfo = {
@@ -185,6 +193,7 @@ export default class ColumnSettingTable extends React.Component {
 
     otherTableInfo = {
       ...otherTableInfo,
+      scroll: { x: restProps.overScrollX || this.getTableScrollXWidth(showCol) },
       summary: showSummary,
     }
     return (

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

@@ -149,6 +149,14 @@ export default class ColumnSettingSulaTable extends React.Component {
     );
   }
 
+  getTableScrollXWidth = (cols: any[]) => {
+    if (cols.every((item: any) => item.width)) {
+      return cols.reduce((cur: any, obj: any) => cur += obj.width, 0)
+    } else {
+      return 'max-content'
+    }
+  };
+
   render() {
     const { style=null, columns, tableCode, summary = undefined, dynamicColumns = [], ...restProps }: any = this.props;
     let otherTableInfo = {
@@ -191,6 +199,7 @@ export default class ColumnSettingSulaTable extends React.Component {
 
     otherTableInfo = {
       ...otherTableInfo,
+      scroll: { x: restProps.overScrollX || this.getTableScrollXWidth(showCol) },
       summary: showSummary,
     }
     return (

package/src/index.ts

@@ -25,3 +25,6 @@ export { default as GuideWrapper } from './components/Business/CommonGuideWrappe
 export { default as ExportIcon } from './components/Functional/ExportFunctions/ExportIcon';
 export { default as SulaColumnSettingTable} from './components/Business/columnSettingTable/sulaSettingTable';
 export { default as ColumnSettingTable} from './components/Business/columnSettingTable';
+// export { default as DetailPageWrapper } from './components/Business/DetailPageWrapper';
+// export { default as HomePageWrapper } from './components/Business/HomePageWrapper';
+// export { default as BsSulaQueryTable } from './components/Business/BsSulaQueryTable';