@bit-sun/business-component 4.0.11-alpha.9 → 4.0.12-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bit-sun/business-component",
-  "version": "4.0.11-alpha.9",
+  "version": "4.0.12-alpha.2",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",
@@ -28,7 +28,7 @@
   },
   "peerDependencies": {
     "antd": "^4.17.2",
-    "bssula": "4.0.8-alpha.3",
+    "bssula": "4.0.12-alpha.6",
     "umi-plugin-bssula": "4.0.8-alpha.3",
     "umi": "^3.5.20",
     "@ant-design/pro-layout": "^6.5.0",

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

@@ -507,11 +507,24 @@ class BasicLayout extends React.PureComponent {
               query: route.query,
               match: match,
               key: currentKey,
+              state: route.state,
               tab: this.getPageTitle(route.pathname) + '',
             },
           ];
           newListenRouterKey = [...listenRouterKey, currentKey];
         }
+      } else {
+        // 更新已存储路由的query和state
+        newListenRouterState = newListenRouterState.map(item => {
+          if (item.key === currentKey) {
+            return {
+              ...item,
+              query: route.query,
+              state: route.state,
+            };
+          }
+          return item;
+        })
       }
 
       // -------------------处理页签关闭----------------------------
@@ -1507,6 +1520,7 @@ class BasicLayout extends React.PureComponent {
                   getDictionaryTextByValue={this.getDictionaryTextByValue}
                   timeFormat={this.timeFormat}
                   transparentProps={transparentProps}
+                  activeKey={activeKey}
                 />
               </TabPane>
             ))}
@@ -1559,6 +1573,9 @@ class WrapperComponent extends React.Component {
     if (window.__POWERED_BY_WUJIE__ && nextProps?.item?.key?.indexOf('edit-template-template') > -1) { // 适配wujie环境主应用下渲染打印编辑器
       return true
     }
+    if (nextProps.activeKey === nextProps.item.key && JSON.stringify(nextProps.item) !== JSON.stringify(this.props.item)) {
+      return true;
+    }
     return false;
   }
   render() {

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

@@ -204,7 +204,6 @@ class SearchItemTable extends React.Component {
       title: '搜索字段名称',
       dataIndex: 'label',
       className: 'drag-visible',
-      width: 100,
     },
     {
       title: '删除',
@@ -212,15 +211,16 @@ class SearchItemTable extends React.Component {
       render: (text, record) => {
         return (
           <span
+            style={{paddingLeft: '46px'}}
             onClick={() => {
               this.setState({
                 sortDataSource: this.state.sortDataSource.filter((item) => {
-                  return item.label !== record.label;
+                  return item.name !== record.name;
                 }),
                 isDefaultValue: false,
                 dataSource: [
                   ...this.state.dataSource.map((item) => {
-                    if (item.label === record.label) {
+                    if (item.name === record.name) {
                       return {
                         ...item,
                         hidden: true,
@@ -265,6 +265,7 @@ class SearchItemTable extends React.Component {
     console.log(e);
     this.setState({
       visible: false,
+      searchDataSource: '',
     });
   };
 
@@ -326,17 +327,17 @@ class SearchItemTable extends React.Component {
     return <SortableItem index={index} {...restProps} />;
   };
 
-  onChange = (e: CheckboxChangeEvent, label) => {
+  onChange = (e: CheckboxChangeEvent, name) => {
     const { sortDataSource, dataSource } = this.state;
     if (!e.target.checked) {
       this.setState({
         sortDataSource: sortDataSource.filter((item) => {
-          return item.label !== label;
+          return item.name !== name;
         }),
         isDefaultValue: false,
         dataSource: [
           ...dataSource.map((item) => {
-            if (item.label === label) {
+            if (item.name === name) {
               return {
                 ...item,
                 hidden: true,
@@ -350,7 +351,7 @@ class SearchItemTable extends React.Component {
       let newSortData = [
         ...sortDataSource,
         ...dataSource
-          .filter((item) => item.label === label)
+          .filter((item) => item.name === name)
           .map((source) => {
             return {
               ...source,
@@ -363,7 +364,7 @@ class SearchItemTable extends React.Component {
         isDefaultValue: false,
         dataSource: [
           ...dataSource.map((item) => {
-            if (item.label === label) {
+            if (item.name === name) {
               return {
                 ...item,
                 hidden: false,
@@ -396,14 +397,41 @@ class SearchItemTable extends React.Component {
     });
   };
 
+  // 处理非标准 特殊搜索项 名称回显
+  showSearchItemLabel = (item: object) => {
+    //搜索项 存在 label默认返回
+    if(item.label){
+      return item.label;
+    } else {
+      switch(item.field.type){
+        //多值录入搜索组件 默认使用下拉框第一个选项
+        case 'bs-multiInput':
+          const { options = [] } = item?.field?.props;
+          return options[0]?.text;
+        default:
+          return '';
+      }
+    }
+  }
+
+
   render() {
     const {
-      dataSource = [],
+      dataSource: originDataSource = [],
       searchDataSource,
-      sortDataSource,
+      sortDataSource: originSortDataSource = [],
       visible,
       onSearchSort,
     } = this.state;
+    const dataSource = originDataSource.map((item: any) => ({
+      ...item,
+      label: this.showSearchItemLabel(item),
+    }));
+    const sortDataSource = originSortDataSource.map((item: any) => ({
+      ...item,
+      label: this.showSearchItemLabel(item),
+    }));
+
     let newSearchSource = dataSource.filter(
       (item) => item?.label?.indexOf(searchDataSource||'') > -1,
     );
@@ -411,7 +439,7 @@ class SearchItemTable extends React.Component {
       <div className={'sort_table_wrapper'}>
         {visible && (
           <Modal
-            title="设置搜索项内容"
+            title="筛选条件设置"
             wrapClassName={'sort_table_wrapper'}
             width={820}
             visible={visible}
@@ -439,15 +467,15 @@ class SearchItemTable extends React.Component {
             <div className={'sort_table'}>
               <div className={'sort_table_column_wrapper'}>
                 <span className={'sort_table_column_count'}>
-                  可选字段 <span>（共{dataSource.length}个）</span>
+                  <span>勾选你想使用的筛选条件</span>
                 </span>
                 <div className={'sort_table_column'}>
                   <Input
                     prefix={<SearchOutlined className="site-form-item-icon" />}
-                    placeholder="搜索"
+                    placeholder="输入筛选条件名称搜索"
                     allowClear
                     onChange={this.onSearch}
-                    style={{ width: 540 }}
+                    style={{ width: 525 }}
                   />
                   <div>
                     {!searchDataSource && (
@@ -487,7 +515,7 @@ class SearchItemTable extends React.Component {
                             <Checkbox
                               checked={!item.hidden}
                               onChange={(e) => {
-                                this.onChange(e, item.label);
+                                this.onChange(e, item.name);
                               }}
                             >
                               {item.label}
@@ -499,7 +527,7 @@ class SearchItemTable extends React.Component {
                             <Checkbox
                               checked={!item.hidden}
                               onChange={(e) => {
-                                this.onChange(e, item.label);
+                                this.onChange(e, item.name);
                               }}
                             >
                               {item.label}
@@ -520,7 +548,7 @@ class SearchItemTable extends React.Component {
               </div>
               <div className={'sort_table_content_wrapper'}>
                 <span className={'sort_table_content_count'}>
-                  已选字段 <span>（共{sortDataSource.length}个）</span>
+                  <span>已选择的搜索条件排序</span>
                 </span>
                 <div className={'sort_table_content'}>
                   <span style={{ paddingLeft: '10px' }}>

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

@@ -4,7 +4,7 @@
 
     .sort_table_column_wrapper {
       width: 560px;
-      margin-right: 10px;
+      margin-right: 8px;
     }
 
     .sort_table_content_wrapper {
@@ -16,12 +16,12 @@
       height: 20px;
       font-family: PingFangSC-Regular;
       font-weight: 400;
-      font-size: 14px;
+      font-size: 12px;
       color: #000000;
       letter-spacing: 0;
 
       span {
-        color: #848484;
+        color: #8E8E8E;
       }
     }
 
@@ -46,7 +46,7 @@
           text-align: center;
           font-family: PingFangSC-Regular;
           font-weight: 400;
-          font-size: 14px;
+          font-size: 12px;
           color: #848484;
         }
       }
@@ -57,13 +57,15 @@
         height: 20px;
         font-family: PingFangSC-Regular;
         font-weight: 400;
-        font-size: 14px;
+        font-size: 12px;
         color: #848484;
         letter-spacing: 0;
       }
 
       .ant-checkbox-wrapper {
         width: 144px;
+        height: 16px;
+        line-height: 16px;
         margin-top: 16px;
       }
 
@@ -73,6 +75,7 @@
     }
 
     .sort_table_content {
+      height: 430px;
       margin-top: 10px;
       padding-top: 10px;
       padding-bottom: 10px;
@@ -90,28 +93,11 @@
       }
     }
   }
-  div.ant-modal-header {
-    width: 820px;
-    height: 64px;
-    background: #ffffff;
-    padding: 20px;
-    border: 0px;
-
-    div.ant-modal-title {
-      height: 24px;
-      font-family: PingFangSC-Medium;
-      font-weight: 500;
-      font-size: 18px;
-      color: #000000;
-      letter-spacing: 0;
-      line-height: 24px;
-    }
-  }
+  
 
   .ant-modal-body {
-    padding: 0 20px !important;
+    padding: 10px 16px;
   }
-
   .ant-modal-close-x {
     height: 24px;
     font-family: PingFangSC-Medium;
@@ -127,7 +113,7 @@
   }
 
   input {
-    height: 32px;
+    height: 22px;
     padding: 6px 4px;
     border-radius: 5px;
   }
@@ -135,28 +121,25 @@
   .ant-input-prefix {
     width: 24px;
     height: 24px;
-    margin: 4px;
+    margin: 0 4px;
     // border: 1px dashed #d9d9d9;
     display: flex;
     justify-content: center;
   }
 
   .ant-modal-footer {
-    height: 70px;
-    border: 0;
-    padding: 20px;
+    padding: 8px 16px;
     display: flex;
     justify-content: space-between;
     
     .ant-btn {
       width: 80px;
-      height: 34px;
-      border-radius: 5px;
+      height: 28px;
 
       span {
         font-family: PingFangSC-Medium;
         font-weight: 600;
-        font-size: 14px;
+        font-size: 12px;
         letter-spacing: 0;
         text-align: center;
         line-height: 20px;
@@ -179,13 +162,13 @@
     padding-bottom: 50px;
 
     tr {
-      height: 36px;
+      height: 30px;
       td {
         width: 24px !important;
-        height: 36px !important;
+        height: 30px !important;
         font-family: PingFangSC-Regular;
         font-weight: 400;
-        font-size: 14px;
+        font-size: 12px;
         color: #000000;
         letter-spacing: 0;
 
@@ -197,8 +180,8 @@
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
-          height: 36px !important;
-          line-height: 36px !important;
+          height: 30px !important;
+          line-height: 30px !important;
         }
 
         img {
@@ -214,7 +197,7 @@
         &:last-child {
           padding-left: 0px !important;
           padding-right: 3px !important;
-          width: 34px !important;
+          width: 30px !important;
 
           img {
             // border: 1px dashed #d9d9d9;

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

@@ -711,9 +711,9 @@ class SortableTable extends React.Component {
       <div className={'sort_table_wrapper'}>
         {visible && (
           <Modal
-            title="设置表头内容"
+            title="筛选条件设置"
             wrapClassName={'sort_table_wrapper'}
-            width={820}
+            width={810}
             visible={visible}
             onOk={this.handleOk}
             onCancel={this.handleCancel}
@@ -748,7 +748,7 @@ class SortableTable extends React.Component {
             <div className={'sort_table'}>
               <div className={'sort_table_column_wrapper'}>
                 <span className={'sort_table_column_count'}>
-                  可选字段 <span>（共{dataSource.length}个）</span>
+                  <span>勾选你想使用的筛选条件</span>
                 </span>
                 <div className={'sort_table_column'}>
                   <Input
@@ -756,7 +756,7 @@ class SortableTable extends React.Component {
                     placeholder="搜索"
                     allowClear
                     onChange={this.onSearch}
-                    style={{ width: 540 }}
+                    style={{ width: 525, height: 24 }}
                   />
                   <div>
                     {!searchDataSource && (
@@ -882,7 +882,7 @@ class SortableTable extends React.Component {
               </div>
               <div className={'sort_table_content_wrapper'}>
                 <span className={'sort_table_content_count'}>
-                  已选字段 <span>（共{sortDataSource.length}个）</span>
+                  <span>已选择的搜索条件排序</span>
                 </span>
                 <div className={'sort_table_content'}>
                   <span style={{ paddingLeft: '10px' }}>

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

@@ -1,3 +1,12 @@
+.bs_detail_page_head_wrapper{
+  height: 32px;
+  position: sticky;
+  background: #fff;
+  width: 100%;
+  top: 0px;
+  z-index: 10;
+}
+
 .detail_page_head {
   height: 32px;
   z-index: 5;
@@ -23,7 +32,7 @@
       color: #282828;
     }
 
-    li .bread_name:hover {
+    li .bread_name_pre:hover {
       color: #000000d9;
     }
   }

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

@@ -107,6 +107,27 @@ const DetailWrapper = React.memo(
         breadcrumbArrs.pop();
         breadcrumbArrs.push(title);
       }
+
+      // 处理详情页上层列表页面路径
+      var pattern = /^(\/.*)\/(action|create|edit|view)(\/.*)*$/
+      const result = pathname.match(pattern)
+
+      if(result?.length && result[1]) {
+        const parentRoute = matchParamsPath(
+          `${basePath}${result[1]}`,
+          breadcrumbNameMap,
+        );
+
+        if(!parentRoute) return;
+
+        if(breadcrumbArrs.length >= 2) {
+          breadcrumbArrs.splice(-1, 0, {
+            title: parentRoute.name,
+            path: result[1]
+          })
+        }
+      }
+
       setBreadCrumbArr([...breadcrumbArrs]);
 
       const pageName = formatMessage({
@@ -221,7 +242,7 @@ const DetailWrapper = React.memo(
     };
 
     return (
-      <div ref={wrapperContainerRef}>
+      <div ref={wrapperContainerRef} className='bs_detail_page_head_wrapper'>
         <div
           className={'detail_page_head'}
           style={{
@@ -245,7 +266,11 @@ const DetailWrapper = React.memo(
                     key={item}
                   >
                     <span className={`${index === breadcrumbArr.length - 1 ? 'bread_name_last' : ''} bread_name`} >
-                      {item}
+                      {typeof item == 'object' ? <span className='bread_name_pre' onClick={()=> {
+                        history.push({
+                          pathname: item.path
+                        })
+                      }}>{item.title}</span> : item}
                     </span>
                   </Breadcrumb.Item>
                   })}

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

@@ -1,3 +1,12 @@
+.bs_home_page_head_wrapper{
+  height: 32px;
+  position: sticky;
+  background: #fff;
+  width: 100%;
+  top: 0px;
+  z-index: 10;
+}
+
 .home_page_head {
   display: flex;
   justify-content: space-between;

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

@@ -84,7 +84,7 @@ const HeaderWrapper = React.memo(
     useEffect(() => {}, [pathname]);
 
     return (
-      <div>
+      <div className='bs_home_page_head_wrapper'>
         <div className={'home_page_head'}>
           <div className='home_page_title_wrapper'>
             {/* <div className={'home_page_title'}>{pageTitle}</div> */}