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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bit-sun/business-component",
-  "version": "4.0.11",
+  "version": "4.0.12-alpha.3",
   "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/assets/copyImg.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 28</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="单据-详情页订单金额信息" transform="translate(-418.000000, -1210.000000)">
+            <g id="编组-2" transform="translate(280.000000, 998.000000)">
+                <g id="编组" transform="translate(0.000000, 204.000000)">
+                    <g id="编组-28" transform="translate(138.000000, 8.000000)">
+                        <rect id="矩形" stroke="#979797" fill="#005CFF" opacity="0" x="0.5" y="0.5" width="23" height="23"></rect>
+                        <path d="M13.5,9 C14.3284271,9 15,9.67157287 15,10.5 L15,18.5 C15,19.3284271 14.3284271,20 13.5,20 L5.5,20 C4.67157288,20 4,19.3284271 4,18.5 L4,10.5 C4,9.67157287 4.67157288,9 5.5,9 L13.5,9 Z M13.5,10.5 L5.5,10.5 L5.5,18.5 L13.5,18.5 L13.5,10.5 Z M12,15 L12,16.5 L7,16.5 L7,15 L12,15 Z M18.5,4 C19.3284271,4 20,4.67157288 20,5.5 L20,13.5 C20,14.3284271 19.3284271,15 18.5,15 L16,15 L16,13.5 L18.5,13.5 L18.5,5.5 L10.5,5.5 L10.5,8 L9,8 L9,5.5 C9,4.67157288 9.67157287,4 10.5,4 L18.5,4 Z M12,12.5 L12,14 L7,14 L7,12.5 L12,12.5 Z" id="形状" fill="#005CFF" fill-rule="nonzero"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/assets/zhankaitiaojian-icon.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>zhankaitiaojian-icon</title>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="24" height="24"></rect>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon" transform="translate(-702.000000, -498.000000)">
+            <g id="zhankaitiaojian-icon" transform="translate(702.000000, 498.000000)">
+                <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1"></use>
+                </mask>
+                <use id="蒙版" fill="#D8D8D8" opacity="0" xlink:href="#path-1"></use>
+                <path d="M12.0142082,6 L18,11.9972435 L12.0142082,18 L11.04209,17.0260337 L16.0562218,11.9972435 L11.04209,6.97396631 L12.0142082,6 Z M6.97257658,6 L12.9583683,11.9972435 L6.97257658,18 L6.00091666,17.0260337 L11.0150485,11.9972435 L6,6.97396631 L6.97257658,6 Z" id="形状" fill="#005CFF" fill-rule="nonzero" mask="url(#mask-2)" transform="translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>

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/index.tsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
 import React, { useState, useEffect, useRef, useMemo } from 'react';
-import { useLocation } from 'umi';
+import { useLocation, history } from 'umi';
 import { QueryTable } from 'bssula';
 import { Menu, Tooltip, Dropdown, Table, Typography } from 'antd';
 import { Resizable } from 'react-resizable';
@@ -460,6 +460,14 @@ export default (props: any) => {
         },
         ...tableProps?.components,
       },
+      ...(props.viewPagePath ? // 详情页查看地址 存在该参数时 默认列表支持双击打开
+        {
+          onRow: (record: any) => ({
+            onDoubleClick: (e: any) => {
+              history.push(eval(`\`${props.viewPagePath.replace(/'/g, '`').replace(/#{(.*?)}/g, (match: any, p: any) => `\${${p}}`)}\``));
+            },
+          }),
+        } : {}),
     };
 
     // @ts-ignore
@@ -741,6 +749,20 @@ export default (props: any) => {
     }
   };
 
+  const columnsDom = <span className="ant-dropdown-link">
+    <div onClick={sortTableRef?.current?.showModal} className="ant-dropdown-link">
+      <img style={{position: 'relative', left: '-7px'}} width={24} src={shezhi} />
+    </div>
+  </span>
+
+  const queryFieldsDom = <SearchItemTable
+    ref={searchTableRef}
+    setShowSearchFields={setShowSearchFields}
+    showSearchFields={showSearchFields}
+    datasource={value?.fields || []}
+    bsTableCode={bsTableCode}
+  />
+
   const memoConfig = useMemo(
     () => ({
       ...config,
@@ -748,6 +770,8 @@ export default (props: any) => {
       summaryList: props.summaryList ? getTableSummaryInfo : undefined,
       statusMapping: props.statusMapping,
       isBsSulaQueryTable: true,
+      columnsDom:columnsDom,
+      queryFieldsDom,
     }),
     [
       checkedList,
@@ -758,23 +782,9 @@ export default (props: any) => {
     ],
   );
 
-  const columnsDom = <span className="ant-dropdown-link">
-    <div onClick={sortTableRef?.current?.showModal} className="ant-dropdown-link">
-      <img style={{position: 'relative', left: '-7px'}} width={24} src={shezhi} />
-    </div>
-  </span>
-
-  const queryFieldsDom = <SearchItemTable
-      ref={searchTableRef}
-      setShowSearchFields={setShowSearchFields}
-      showSearchFields={showSearchFields}
-      datasource={value?.fields || []}
-      bsTableCode={bsTableCode}
-    />
-
   return (
     <div id="bs-sula-query-table">
-      <MemoQueryTable {...memoConfig} columnsDom={columnsDom} queryFieldsDom={queryFieldsDom} />
+      <MemoQueryTable {...memoConfig} />
       {/* 列设置弹出框表格 */}
       <SortableTable
         ref={sortTableRef}

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/BsSulaQueryTable/utils.tsx

@@ -165,20 +165,41 @@ export const handleTextOverflow = (
   width: number = 130,
 ) => {
   return (
-    <Tooltip title={text || '-'}>
-      <span
-        style={{
-          width: width ? width + 'px' : '130px',
-          display: 'inline-block',
-          textOverflow: 'ellipsis',
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
-          verticalAlign: 'middle',
-        }}
-      >
-        {text || '-'}
-      </span>
-    </Tooltip>
+<Tooltip title={text || '-'}>
+    <span
+      style={{
+        width: width ? width + 'px' : '130px',
+        display: 'inline-block',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        verticalAlign: 'middle',
+      }}
+    >
+      {text || '-'}
+    </span>
+</Tooltip>
+  );
+};
+
+// 超出缩略 无提示 ...
+export const handleTextOverflowNoTooltip = (
+  text: string | undefined,
+  width: number = 130,
+) => {
+  return (
+    <span
+      style={{
+        width: width ? width + 'px' : '130px',
+        display: 'inline-block',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        verticalAlign: 'middle',
+      }}
+    >
+      {text || '-'}
+    </span>
   );
 };
 
@@ -232,7 +253,7 @@ export const tableColumnsImage = (
     <>
       {url ? (
         <div className={`clomnsImg`}>
-          <Image src={url} width="28px" height="28px" {...paramsObj}></Image>
+          <Image src={url} width="16px" height="16px" {...paramsObj}></Image>
         </div>
       ) : (
         <div className={`clomnsImg2`}>

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;
     }
   }
@@ -31,7 +40,6 @@
 .detail_page_wrapper {
   // padding-top: 51px;
   height: calc(100vh - 80px);
-  background-color: #FFF;
 }
 
 .back_home_img_content {
@@ -81,7 +89,7 @@
   gap: 8px;
   margin-right: 20px;
   button {
-    height: 32px !important;
+    height: 24px !important;
     display: flex;
     align-items: center;
     gap: 2px;