@bit-sun/business-component 4.0.11-alpha.1 → 4.0.11-alpha.11

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 }) => {
@@ -72,11 +72,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 +84,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>

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

@@ -1,115 +1,261 @@
+@border-color: #d9d9d9;
+@primary-color: #005cff;
+
 .search_select {
   &_show {
     display: flex;
+
+    // 下拉框清除图标位置调整
+    .ant-select-clear {
+      right: 33px;
+    }
   }
 
   &_expand_button {
     position: relative;
+    right: -11px;
     width: 30px;
-    color: #ffffff;
+    border-left: 1px solid @border-color;
+    height: 24px;
     cursor: pointer;
+    font-size: 14px;
+    font-weight: bolder;
 
     span {
       position: absolute;
-      height: 20px;
-      line-height: 14px;
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
     }
   }
+  &_expand_button:hover {
+    background-color: @primary-color;
+    color: #fff;
+  }
 
-  &_wrapper {
-    position: relative;
-    display: flex;
-    min-height: 60vh;
-    max-height: 60vh;
-    overflow: hidden;
-    font-size: 14px;
+  &_dropdown_table {
+    // padding: 4px 10px 6px;
 
-    &_click_flag {
-      position: absolute;
-      z-index: 10;
-      &_arrow {
-        transform: rotate(0deg);
-        transition: transform 0.5s;
-      }
-      &_arrow_1 {
-        transform: rotate(-180deg);
-        transition: transform 0.5s;
-      }
+    // 下拉table 复选框为单选时候隐藏
+    .ant-table-cell .ant-table-selection-column .ant-radio,table tr td.ant-table-selection-column .ant-radio-wrapper {
+      display: none;
     }
 
-    &_left {
-      width: 28%;
-      overflow-y: hidden;
-      //background-color: yellow;
-      transition: all 0.3s;
-      margin-left: 20px;
-    }
+    // 下拉table 表头表体样式
+    .ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table {
+      font-family: MiSans-Regular;
+      font-weight: 400;
+      font-size: 12px;
 
-    &_left1 {
-      width: 0;
-      height: 0;
-      transition: all 0.3s;
-      display: none;
-    }
+      thead > tr > th {
+        color: #7F7F7F;
+      }
+
+      .ant-table-thead .ant-table-selection .ant-checkbox-wrapper {
+        justify-content: center;
+      }
 
-    &_right {
-      width: 70%;
-      margin-left: 1%;
-      //background-color: pink;
+      tbody > tr > td  {
+        color: #333333;
+      }
     }
+  }
 
-    &_right1 {
-      width: 100%;
-      margin-left: 20px;
-      //background-color: green;
+  // 下拉table隐藏单选列
+  &_dropdown_table1 {
+    .ant-table.ant-table-bordered > .ant-table-container {
+      .ant-table-body > table > tbody > tr > td.ant-table-selection-column,
+      .ant-table-header > table > thead > tr > th.ant-table-selection-column {
+        display: none;
+      }
     }
+  }
 
-    &_right, &_right1 {
-      overflow-x: auto;
+  &_modal_wrapper {
+    .ant-modal {
+      top: 60px;
     }
+    .ant-modal-header {
+      padding: 6px 0px 6px 16px;
 
-    .select_list_columns {
-      width: 100%;
-      height: calc(60vh - 60px);
-      overflow-y: auto;
-      border: 1px solid #d8d8d8;
-      &_tips {
-        background: #eee;
-        padding: 6px 20px;
-        margin-bottom: 10px;
-      }
-      &_formItems {
-        padding: 0 20px;
+      .ant-modal-title {
+        height: 20px;
+        color: #000000;
+        line-height: 20px;
       }
     }
-    .select_list_searchButton {
-      display: flex;
-      margin: 10px 0px;
-      justify-content: flex-end;
+    .ant-modal-close-x {
+      width: 32px;
+      height: 32px;
+      line-height: 32px;
+    }
+    .ant-modal-body {
+      padding: 0px;
+      background: #F3F3F3;
+      height: 684px;
+      overflow: hidden;
     }
+  }
 
-    .select_list_button_space {
-      margin-right: 10px;
+  &_wrapper {
+    position: relative;
+    min-height: 80vh;
+    max-height: 80vh;
+    overflow: hidden;
+    font-size: 14px;
+
+    &_topForm {
+      .select_list_columns {
+        width: 100%;
+        padding: 10px 6px 2px 16px;
+        background-color: #fff;
+        .ant-form {
+          padding: 0;
+          overflow: hidden;
+          display: flex;
+          align-items: flex-start;
+
+          .ant-row .ant-form-item {
+            font-size: 12px !important;
+            margin-right: 0px !important;
+            margin-bottom: 8px !important;
+          }
+          .ant-row.ant-form-item-row {
+            background-color: #fafafa;
+            border: 0.8px solid #D9D9D9;
+            border-radius: 2px;
+            font-size: 12px;
+          }
+          .ant-row {
+            width: 100%;
+          }
+          .ant-row .ant-form-item-label {
+            width: 110px;
+            order: 1;
+    
+            label{
+              width: 100%;
+              text-align: left;
+              padding: 0 10px;
+              color: #333333;
+              font-size: 12px;
+              font-family: PingFangSC-Regular;
+              font-weight: 400; 
+            }
+          }
+          .ant-row .ant-form-item-control {
+            order: 2;
+            width: 100px;
+
+            // 输入框
+            .ant-input-affix-wrapper {
+              border: 0;
+              font-size: 12px;
+              background-color: #fafafa;
+              padding: 0 11px;
+              height: 24px;
+
+              .ant-input {
+                background-color: #fafafa !important;
+                border: 0;
+                font-size: 12px;
+              }
+            }
+            // 下拉框
+            .ant-select-selector {
+              border: 0 !important;
+              background-color: #fafafa !important;
+              font-size: 12px;
+            }
+            // 多值输入框
+            .query_input .ant-input {
+              background-color: #fafafa !important;
+              border: 0;
+              font-size: 12px;
+            }
+          }
+          .ant-btn-primary {
+            background: @primary-color;
+          }
+        }
+        .ant-form>.ant-row>.ant-col {
+          order: 2;
+          padding-right: 10px;
+        }
+      }
+      .select_list_button_space {
+        margin-right: 10px;
+      }
     }
 
-    .select_list_selectTips {
+    &_bottomTable {
+      margin: 10px;
       display: flex;
       justify-content: space-between;
-      height: 34px;
-      line-height: 32px;
-      background-color: #eee;
-      margin-bottom: 10px;
-      padding: 0 12px;
-    }
 
-    .select_list_selectAll {
-      position: relative;
-      top: -40px;
-      left: 20px;
-      width: 160px;
+      &_wrapLeft1, &_wrapLeft2, &_wrapRight{
+        background: #fff;
+        width: calc(50% - 5px);
+      }
+      &_wrapLeft1 {
+        width: 100%;
+      }
+      &_wrapRight {
+       margin-left: 10px;
+      }
+
+      .ant-tabs-nav {
+        margin: 0;
+        padding: 6px 18.5px;
+
+        .ant-tabs-nav-wrap {
+          height: 28px;
+          font-size: 14px;
+        }
+        .ant-tabs-tab {
+          padding: 4px 0;
+        }
+        .ant-tabs-ink-bar {
+          left: 3px !important;
+          width: 40px !important;
+          background: @primary-color;
+        }
+        .ant-tabs-extra-content > span {
+          color: @primary-color;
+          cursor: pointer;
+        }
+      }
+      .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+        color: @primary-color;
+      }
+      .ant-tabs-content-holder {
+        padding: 10px 10px 7px;
+        
+        .ant-tabs-content .ant-table-wrapper .ant-table .ant-table-container .ant-table-content {
+          // max-height: 472px;  // 空数据528px；非空数据因为有分页所以472px
+          // overflow: auto scroll !important; // 这样滑动会将表头滑走，使用table自带的scrolly 解决高度问题
+          
+          .ant-table-thead > tr > th {
+            color: #7F7F7F;
+          }
+          .ant-table-thead .ant-table-selection .ant-checkbox-wrapper {
+            justify-content: center;
+          }
+          .ant-table.ant-table-small .ant-table-tbody > tr > td {
+            color: #333333;
+          }
+        }
+      }
+      .ant-checkbox-checked .ant-checkbox-inner {
+        color: @primary-color;
+        background: @primary-color;
+      }
+      .ant-pagination-item-active a {
+        color: @primary-color;
+      }
+      .ant-pagination-item-active {
+        border-color: @primary-color;
+      }
     }
   }
 }