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

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

@@ -1,11 +1,10 @@
-// 列自定义
 .sort_table_wrapper {
   .sort_table {
     display: flex;
 
     .sort_table_column_wrapper {
       width: 560px;
-      margin-right: 10px;
+      margin-right: 8px;
     }
 
     .sort_table_content_wrapper {
@@ -17,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;
       }
     }
 
@@ -47,7 +46,7 @@
           text-align: center;
           font-family: PingFangSC-Regular;
           font-weight: 400;
-          font-size: 14px;
+          font-size: 12px;
           color: #848484;
         }
       }
@@ -58,22 +57,25 @@
         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;
       }
 
-      .ant-checkbox-wrapper+.ant-checkbox-wrapper {
+      .ant-checkbox-wrapper + .ant-checkbox-wrapper {
         margin-left: 0px;
       }
     }
 
     .sort_table_content {
+      height: 430px;
       margin-top: 10px;
       padding-top: 10px;
       padding-bottom: 10px;
@@ -83,7 +85,6 @@
       .ant-table-wrapper {
         padding: 0px !important;
       }
-
       .sort_table_title {
         height: 32px;
         line-height: 32px;
@@ -92,29 +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;
@@ -130,7 +113,7 @@
   }
 
   input {
-    height: 32px;
+    height: 22px;
     padding: 6px 4px;
     border-radius: 5px;
   }
@@ -138,34 +121,33 @@
   .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;
       }
 
-      &:first-child {
-        margin-right: 524px;
-      }
+      // &:first-child {
+      //   margin-right: 524px;
+      // }
     }
   }
 
@@ -180,14 +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;
 
@@ -199,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 {
@@ -216,7 +197,7 @@
         &:last-child {
           padding-left: 0px !important;
           padding-right: 3px !important;
-          width: 34px !important;
+          width: 30px !important;
 
           img {
             // border: 1px dashed #d9d9d9;
@@ -227,27 +208,8 @@
       }
     }
   }
-}
-
-.global_tab_nav_style {
-  top: 2px !important;
-}
-
-.row-dragging {
-  background: #fafafa;
-  border: 1px solid #ccc;
-  z-index: 10000;
-}
-
-.row-dragging td {
-  padding: 7px 16px;
-  display: none;
-
-}
-.row-dragging td:first-child {
-  display: inline-block;
-}
 
-.row-dragging .drag-visible {
-  visibility: visible;
+  .ant-dropdown-link {
+    cursor: pointer;
+  }
 }

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

@@ -159,7 +159,7 @@ export default class ColumnSettingTable extends React.Component {
       ...restProps,
     };
     let showSummary = null;
-    if (this.state.showColumns.length) {
+    if (this.state.showColumns.length && !Array.isArray(summary)) {
       if (summary && summary().diy) {
         showSummary = this.getTableSummaryInfo();
       } else {
@@ -201,12 +201,13 @@ export default class ColumnSettingTable extends React.Component {
         ...scroll,
         x: restProps.overScrollX || this.getTableScrollXWidth(showCol)
       },
-      summary: showSummary,
+      ...(
+        showSummary ? { summary: showSummary } : {}
+      )
     }
     return (
-      <div>
-        <div style={{ overflow: 'hidden', padding: '0 8px 10px 0' }}>
-          <span style={{ float: 'right' }} className="ant-dropdown-link">
+      <div style={{ position: 'relative' }}>
+        <span style={{ position: 'absolute', zIndex: '10', right: '8px', top: '1px' }} className="ant-dropdown-link">
             <ColumnSetting
               setShowColumns={this.setShowColumns}
               showColumns={this.state.showColumns}
@@ -216,9 +217,9 @@ export default class ColumnSettingTable extends React.Component {
               appRequestConfig={appRequestConfig}
             />
           </span>
-        </div>
         <Table
           columns={showCol}
+          border={true}
           components={{
             header: {
               cell: this.ResizeableTitle,
@@ -228,6 +229,35 @@ export default class ColumnSettingTable extends React.Component {
           ...otherTableInfo
           }
         />
+        {Array.isArray(summary) && (
+          <>
+            <div 
+              className='table-bssula-summary' 
+              style={{
+                right: '20%',
+                bottom: 0,
+                whiteSpace: 'nowrap',
+                overflowX: 'auto',
+              }}
+            >
+              {summary.map(item => (
+                <Text type='danger'>
+                  {item.label}: <span className='table-bssula-summary-count'>{item.count || 0}</span>
+                </Text>
+              ))}
+            </div>
+            <div style={{
+              width: '16px',
+              height: '26px',
+              opacity: 0.32,
+              transform: 'scaleX(-1)',
+              backgroundImage:'linear-gradient(270deg, #ffffff00 0%, #A4A4A4 100%)',
+              right: '20%',
+              position: 'absolute',
+              bottom: 0,
+            }}></div>
+          </>
+       )}
       </div >
     )
   }

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

@@ -156,7 +156,7 @@ export default class ColumnSettingSulaTable extends React.Component {
       ...restProps,
     };
     let showSummary = null;
-    if (this.state.showColumns.length) {
+    if (this.state.showColumns.length && !Array.isArray(summary)) {
       if (summary && summary().diy) {
         showSummary = this.getTableSummaryInfo();
       } else {
@@ -197,12 +197,13 @@ export default class ColumnSettingSulaTable extends React.Component {
         ...scroll,
         x: restProps.overScrollX || this.getTableScrollXWidth(showCol)
       },
-      summary: showSummary,
+      ...(
+        showSummary ? { summary: showSummary } : {}
+      )
     }
     return (
-      <div>
-        <div style={{ overflow: 'hidden', padding: '0 8px 10px 0' }}>
-          <span style={{ float: 'right' }} className="ant-dropdown-link">
+      <div style={{ position: 'relative' }}>
+        <span style={{ position: 'absolute', zIndex: '10', right: '8px', top: '10px' }} className="ant-dropdown-link">
             <ColumnSetting
               setShowColumns={this.setShowColumns}
               showColumns={this.state.showColumns}
@@ -211,10 +212,9 @@ export default class ColumnSettingSulaTable extends React.Component {
               appRequestConfig={appRequestConfig}
             />
           </span>
-        </div>
         <SulaTable
           ref={this.sulaTableRef}
-          style={style}
+          border={true}
           columns={showCol}
           components={{
             header: {
@@ -225,6 +225,35 @@ export default class ColumnSettingSulaTable extends React.Component {
           ...otherTableInfo
           }
         />
+       {Array.isArray(summary) && (
+        <>
+          <div 
+            className='table-bssula-summary' 
+            style={{
+              right: '20%',
+              bottom: 0,
+              whiteSpace: 'nowrap',
+              overflowX: 'auto',
+            }}
+          >
+            {summary.map(item => (
+              <Text type='danger'>
+                {item.label}: <span className='table-bssula-summary-count'>{item.count || 0}</span>
+              </Text>
+            ))}
+          </div>
+           <div style={{
+            width: '16px',
+            height: '26px',
+            opacity: 0.32,
+            transform: 'scaleX(-1)',
+            backgroundImage:'linear-gradient(270deg, #ffffff00 0%, #A4A4A4 100%)',
+            right: '20%',
+            position: 'absolute',
+            bottom: 0,
+          }}></div>
+        </>
+       )}
       </div >
     )
   }

package/src/components/Common/ParagraphCopier/index.tsx

@@ -1,10 +1,6 @@
 import React, { useState } from 'react';
 import { Typography } from 'antd';
-import { createFromIconfontCN } from '@ant-design/icons';
-
-const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_4645959_8nhs21v6bnp.js',
-});
+import copyImg from '../../../assets/copyImg.svg';
 
 const { Paragraph } = Typography;
 
@@ -34,7 +30,7 @@ const ParagraphCopier = (props: ParagraphCopierProps) => {
   // 拷贝选项，包含图标和提示信息
   const copyableOptions = {
     text: text,
-    icon: <IconFont type="icon-qyhtfuzhi" style={{ fontSize: '14px' }} />,
+    icon: <img src={copyImg} />,
     tooltips: ['点击复制', '复制成功'],
   };
 

package/src/components/Functional/QueryMutipleInput/index.less

@@ -1,3 +1,6 @@
+@border-color: #d9d9d9;
+@primary-color-hover: #005cff;
+
 .query_input {
   &_show {
     display: flex;
@@ -5,33 +8,62 @@
 
   &_expand_button {
     position: relative;
+    right: -11px;
     width: 30px;
-    color: #ffffff;
+    border-left: 1px solid @border-color;
+    height: 24px;
     cursor: pointer;
-
-    span {
-      position: absolute;
-      height: 20px;
-      line-height: 14px;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-    }
+    font-size: 12px;
+    text-align: center;
+    line-height: normal;
+  }
+  &_expand_button:hover {
+    background-color: @primary-color-hover;
+    color: #fff;
   }
 
   &_wrapper {
-    display: flex;
-
-    &_left {
-      width: 100px;
-    }
-
-    &_right {
-      color: #9e9e9e;
+    &_top {
+      color: #8E8E8E;
     }
   }
 
   &_textArea {
-    margin-top: 15px;
+    margin-top: 10px;
+    .ant-input {
+      height: 300px;
+      background: #FAFAFA;
+      border: 0.8px solid #E0E0E0;
+      resize: none;
+      border-radius: 0;
+    }
   }
 }
+
+.multiInput_modal{
+  .ant-modal-header{
+    height: 32px;
+    padding: 0 16px;
+    font-size: 12px;
+  }
+  .ant-modal-title{
+    line-height: 32px;
+  }
+  .ant-modal-close-x{
+    width: 32px;
+    height: 32px;
+    line-height: 32px;
+  }
+  .ant-modal-footer{
+    padding-right: 8px;
+    height: 44px;
+    .ant-btn + .ant-btn:not(.ant-dropdown-trigger) {
+      margin-left: 6px;
+    }
+    .ant-btn {
+      width: 56px;
+      height: 28px;
+      font-weight: 500;
+    }
+  }
+}

package/src/components/Functional/QueryMutipleInput/index.tsx

@@ -8,7 +8,7 @@
 // @ts-nocheck
 import React, { useState, useEffect } from 'react';
 import { useDebounceFn } from 'ahooks';
-import { Input, Button, Modal } from 'antd';
+import { Input, Button, Modal, ConfigProvider } from 'antd';
 import './index.less';
 
 const QueryMutipleInput = ({ onValueChange,onPressEnter }) => {
@@ -31,6 +31,8 @@ const QueryMutipleInput = ({ onValueChange,onPressEnter }) => {
 
   const showModal = () => {
     setIsModalVisible(true);
+    //弹窗打开时 默认搜索内容换行显示
+    setPopValue(data => data.replace(/,/g, '\n'));
   };
 
   const handleOk = () => {
@@ -72,11 +74,11 @@ const QueryMutipleInput = ({ onValueChange,onPressEnter }) => {
             formaData(e.clipboardData.getData('text'));
             e.preventDefault();
           }}
-          style={{ width: 'calc(100% - 30px)' }}
+          style={{ width: 'calc(100%)' }}
+          suffix={<div className="query_input_expand_button" onClick={showModal}>...</div>}
           placeholder="请输入（查询多个值请用 ; 或 , 分割）"
           onPressEnter={()=>onPressEnter?.()}
         />
-        <Button style={{width: '30px', padding: '2px', height: 'auto'}} onClick={showModal} type="primary">...</Button>
       </div>
       <Modal
         width={600}
@@ -84,29 +86,33 @@ const QueryMutipleInput = ({ onValueChange,onPressEnter }) => {
         visible={isModalVisible}
         onOk={handleOk}
         onCancel={handleCancel}
+        className='multiInput_modal'
+        bodyStyle={{
+          padding: '10px 16px'
+        }}
         footer={[
-          <Button key="back" onClick={handleCancel}>
-            取消
-          </Button>,
-          <Button key="submit" type="primary" onClick={handleOk}>
-            录入
-          </Button>,
+          <ConfigProvider autoInsertSpaceInButton = { false }> 
+            <Button key="back" onClick={handleCancel} autoI>
+              取消
+            </Button>
+          </ConfigProvider>,
+          <ConfigProvider autoInsertSpaceInButton = { false }> 
+            <Button key="submit" type="primary" onClick={handleOk}>
+              录入
+            </Button>
+          </ConfigProvider>,
         ]}
       >
         <div className={'query_input_wrapper'}>
-          <div className={'query_input_wrapper_left'}>录入区：</div>
-          <div className={'query_input_wrapper_right'}>
-            <div>
-              如需同时使用多个值进行查询，请使用逗号、分号、空格或换行进行值的分隔，中英文格式的符号均支持
-            </div>
-            <div className={'query_input_textArea'}>
-              <Input.TextArea
-                value={popvalue}
-                onChange={onChange}
-                rows={6}
-                showCount
-              />
-            </div>
+          <div className={'query_input_wrapper_top'}>如需同时使用多个值进行查询，请使用逗号，分号、空格或换行进行值的分割，中英文格式的符号均支持</div>
+          <div className={'query_input_textArea'}>
+            <Input.TextArea
+              placeholder='在此录入...'
+              value={popvalue}
+              onChange={onChange}
+              rows={12}
+              showCount={false}
+            />
           </div>
         </div>
       </Modal>