fix: '1.表格样式优化2.添加按钮'

src/core/TableRender/components/SearchGroup/index.js

-import React, { useCallback, useEffect, useMemo, useRef, useState,forwardRef,useImperativeHandle } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState, forwardRef, useImperativeHandle } from 'react';
 import { AudioOutlined } from '@ant-design/icons';
-import { Row,
+import {
+  Row,
   DatePicker,
   Select,
   Button,
@@ -16,12 +17,13 @@ import { Row,
   Dropdown,
   Menu,
   Popover,
-  Form, } from 'antd';
+  Form,
+} from 'antd';
 
-  import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/zh-cn';
 import locale from 'antd/es/date-picker/locale/zh_CN';
 
-  import {
+import {
   SnippetsOutlined,
   PlusOutlined,
   FormOutlined,
@@ -35,19 +37,18 @@ import locale from 'antd/es/date-picker/locale/zh_CN';
   ExclamationCircleOutlined,
   QuestionCircleOutlined,
   EditOutlined,
-    DownOutlined
-  } from '@ant-design/icons';
-  import styles from './search.less';
-  import moment from 'moment';
+  DownOutlined,
+} from '@ant-design/icons';
+import styles from './search.less';
+import moment from 'moment';
 const { Search } = Input;
 const { RangePicker } = DatePicker;
 const { Option } = Select;
 const dateFormat = 'YYYY-MM-DD';
 
 const SearchGroup = forwardRef((props, ref) => {
-
   useImperativeHandle(ref, () => ({
-    getQueryInfo
+    getQueryInfo,
   }));
   const [form] = Form.useForm();
 
@@ -55,20 +56,19 @@ const SearchGroup = forwardRef((props, ref) => {
   //   fieldSearch
   // } = props.params;
 
-  const [showPicker,setShowPicker] = useState(true)
+  const [showPicker, setShowPicker] = useState(true);
   const [dateArray, setDateArray] = useState([
     // moment(moment().format('YYYY-MM-DD 00:00:00')).subtract(1, 'years'),
     // moment(moment().format('YYYY-MM-DD 23:59:59')),
-  ])
-  const [formatterStr, setFormatterStr] = useState('YYYY-MM-DD HH:mm:ss')
-  const [searchValues, setSearchValues] = useState('')
+  ]);
+  const [formatterStr, setFormatterStr] = useState('YYYY-MM-DD HH:mm:ss');
+  const [searchValues, setSearchValues] = useState('');
   // const [queryWheres, setQueryWheres] = useState([
   //   props.params.tempQueryWhere || {},
   // ])
-  const [queryWheres, setQueryWheres] = useState([{}])
+  const [queryWheres, setQueryWheres] = useState([{}]);
   const [searchKey, setSearchKey] = useState(''); // 快速搜索字段名称
-  const [queryInfo,setQueryInfo] = useState({info: '',timeFrom: '',timeTo: ''})
-
+  const [queryInfo, setQueryInfo] = useState({ info: '', timeFrom: '', timeTo: '' });
 
   const rangerOptions = useMemo(() => {
     const todayRanger = [
@@ -168,7 +168,11 @@ const SearchGroup = forwardRef((props, ref) => {
   }, []);
   const dateChange = (dateObj, dateString) => {
     setDateArray(dateObj || ['', '']);
-    setQueryInfo({...queryInfo, timeFrom: dateObj[0].format('YYYY-MM-DD HH:mm:ss') || '',timeTo: dateObj[1].format('YYYY-MM-DD HH:mm:ss') || ''})
+    setQueryInfo({
+      ...queryInfo,
+      timeFrom: dateObj[0].format('YYYY-MM-DD HH:mm:ss') || '',
+      timeTo: dateObj[1].format('YYYY-MM-DD HH:mm:ss') || '',
+    });
   };
   const onSearch = e => {
     // if (fieldSearch) {
@@ -180,25 +184,28 @@ const SearchGroup = forwardRef((props, ref) => {
     // } else {
     //   getAccountData();
     // }
-    setQueryInfo({...queryInfo,info: e})
-    getQueryInfo(form.getFieldsValue())
+    setQueryInfo({ ...queryInfo, info: e });
+    getQueryInfo(form.getFieldsValue());
   };
 
-  const onValuesChange = (values) => {
-    let keys = Object.keys(values)
-    if (keys.includes('info')) return
-    getQueryInfo(form.getFieldsValue())
-  }
+  const onValuesChange = values => {
+    let keys = Object.keys(values);
+    if (keys.includes('info')) return;
+    getQueryInfo(form.getFieldsValue());
+  };
 
-  const getQueryInfo = (data) => {
-    let params = {}
-    params.timeFrom = data.time&&data.time[0].format('YYYY-MM-DD HH:mm:ss') || ''
-    params.timeTo = data.time&&data.time[1].format('YYYY-MM-DD HH:mm:ss') || ''
-    params.info = data.info
-    console.log(params,'666666666666666');
-    props&&props.onChange(params)
-    return params
-  }
+  const getQueryInfo = data => {
+    let params = {};
+    params.timeFrom = (data.time && data.time[0].format('YYYY-MM-DD HH:mm:ss')) || '';
+    params.timeTo = (data.time && data.time[1].format('YYYY-MM-DD HH:mm:ss')) || '';
+    params.info = data.info;
+    props && props.onChange(params);
+    return params;
+  };
+
+  const btnsClick = type => {
+    props && props.btnsClick(type);
+  };
 
   return (
     <div className={styles.accountFlexWrapper}>
@@ -206,9 +213,9 @@ const SearchGroup = forwardRef((props, ref) => {
         <Form layout={'horizontal'} form={form} onValuesChange={onValuesChange}>
           <Space className={styles.controlRowLeft} wrap>
             {showPicker ? (
-                  <Form.Item label={`录入时间`} name='time' className={styles.noMarginBottom}>
+              <Form.Item label={`录入时间`} name="time" className={styles.noMarginBottom}>
                 <RangePicker
-                      size='middle'
+                  size="middle"
                   value={[...dateArray]}
                   locale={locale}
                   // defaultValue={rangerOptions[timeQuantumStr]}
@@ -238,7 +245,7 @@ const SearchGroup = forwardRef((props, ref) => {
                     </Select>
                   </Form.Item>
                 ))} */}
-                <Form.Item label={'快捷搜索'} name='info' className={styles.noMarginBottom}>
+            <Form.Item label={'快捷搜索'} name="info" className={styles.noMarginBottom}>
               {/* {searchKey && fieldSearch ? <Select
                     style={{ maxWidth: '112px' }}
                     placeholder='请选择字段'
@@ -258,7 +265,7 @@ const SearchGroup = forwardRef((props, ref) => {
                 //   1,
                 //   -1,
                 // ) || ''}搜索`}
-                    size='middle'
+                size="middle"
                 // placeholder={`请输入${accountConfig?.searchFieldGroup?.slice(
                 //   1,
                 //   -1,
@@ -266,9 +273,9 @@ const SearchGroup = forwardRef((props, ref) => {
                 style={{
                   width: 320,
                   verticalAlign: 'middle',
-                      marginLeft: '10px'
+                  marginLeft: '10px',
                 }}
-                    placeholder='请输入值'
+                placeholder="请输入值"
                 // value={searchValues}
                 // onChange={e => setSearchValues(e.target.value)}
                 onSearch={onSearch}
@@ -277,17 +284,17 @@ const SearchGroup = forwardRef((props, ref) => {
           </Space>
         </Form>
         {/* 按钮区域 */}
-            {/* <div className={styles.controlRowRight}>
-              {
+        <div className={styles.controlRowRight}>
+          {/* {
                 state !== 'special' ? <Dropdown.Button type={permission.includes('addBtn') ? '' : 'primary'} icon={<DownOutlined />}
                   overlay={menu}>其他操作</Dropdown.Button> : ''
               }
               {
                 bulkButton ? <Dropdown.Button style={{ "marginLeft": "20px" }} type={permission.includes('addBtn') ? '' : 'primary'} icon={<DownOutlined />}
                   overlay={batchMenu}>批量操作</Dropdown.Button> : ''
-              }
+              } */}
           <div className={styles.controlBtns}>
-                {permission.includes('editBtn') && !bulkButton ? (
+            {/* {permission.includes('editBtn') && !bulkButton ? (
                   <Button
                     type="primary" ghost
                     size='middle'
@@ -299,8 +306,8 @@ const SearchGroup = forwardRef((props, ref) => {
                   </Button>
                 ) : (
                   ''
-                )}
-                {permission.includes('deleteBtn') && !bulkButton ? (
+                )} */}
+            {/* {permission.includes('deleteBtn') && !bulkButton ? (
                   <Button
                     type='primary' ghost
                     size='middle'
@@ -312,26 +319,25 @@ const SearchGroup = forwardRef((props, ref) => {
                   </Button>
                 ) : (
                   ''
-                )}
-                {permission.includes('addBtn') ? (
+                )} */}
+            {/* {permission.includes('addBtn') ? ( */}
             <Button
-                    type='primary'
-                    size='middle'
-                    onClick={() => addNewRecord()}
+              type="primary"
+              size="middle"
+              onClick={() => btnsClick('add')}
               icon={<PlusOutlined />}
               style={{ marginLeft: 20 }}
             >
               添加
             </Button>
-                ) : (
+            {/* ) : (
                   ''
-                )}
+                )} */}
+          </div>
         </div>
-            </div> */}
       </Row>
     </div>
-  )
-
-})
+  );
+});
 
-export default SearchGroup
+export default SearchGroup;
\ No newline at end of file

src/core/TableRender/index.less

@@ -24,5 +24,63 @@
         }
       }
     }
+    .ant-table.ant-table-bordered > .ant-table-container {
+      border-left: 1px solid #dbe7fb;
+
+      .ant-table-header > table {
+        border-top: 1px solid #dbe7fb;
+      }
+    }
+    // .ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table {
+    //   border-top: 1px solid #dbe7fb;
+    // }
+    .@{ant-prefix}-table-thead > tr {
+      height: 40px;
+      th {
+        border-right: 1px solid #dbe7fb!important;
+        border-bottom: 1px solid #dbe7fb;
+        background: white;
+      }
+      th:last-child {
+        border-left: 1px solid #dbe7fb;
+      }
+    }
+    .ant-table-tbody > tr {
+      &:nth-child(2n-1) {
+        td {
+          background: #f6f9fe;
+        }
+      }
+      td {
+        border-bottom: 1px solid #dbe7fb;
+        border-right: 1px solid #dbe7fb!important;
+  
+        &:last-child {
+          border-left: 1px solid #dbe7fb;
+        }
+      }
+    }
+    // .ant-table-tbody > tr > td:last-child {
+    //   border-left: 1px solid #dbe7fb;
+    // }
+    .@{ant-prefix}-table-body {
+      overflow-x: scroll;
+      &::-webkit-scrollbar {
+        width: 0;
+        height: 12px;
+      }
+      &::-webkit-scrollbar {
+        width: 0; // height: 12px;
+        height: 6px;
+      }
+      &::-webkit-scrollbar-thumb {
+        // background: #c8c8c8;
+        background: rgb(41, 166, 255);
+      }
+      &::-webkit-scrollbar-track {
+        background: #f7f4f5;
+        padding: 0 3px;
+      }
+    }
   }
 }