fix: '人员选择器，选择器交互优化'

src/pages/log/loginLog/index.jsx

@@ -2,8 +2,11 @@ import React, { useState, useEffect } from 'react';
 import { DatePicker, Table, Row, Col, Button, notification, message, Spin } from 'antd';
 import { SwapRightOutlined, SyncOutlined } from '@ant-design/icons';
 import moment from 'moment';
+import 'moment/dist/locale/zh-cn';
+import locale from 'antd/es/date-picker/locale/zh_CN';
 import { post, PUBLISH_SERVICE } from '@/services/index';
 import styles from './index.less';
+const { RangePicker } = DatePicker;
 
 const LoginLog = () => {
   const [loading, setLoading] = useState(false); // 源数据
@@ -16,6 +19,10 @@ const LoginLog = () => {
   const [endTime, setEndTime] = useState(
     moment(new Date(), 'YYYY-MM-DD HH:mm:ss'), // 默认值当前时间
   );
+  const [allTime, setAllTime] = useState([
+    moment().startOf('month'),
+    moment(new Date(), 'YYYY-MM-DD HH:mm:ss'),
+  ]);
   const [filteredValue, setFilteredValue] = useState([]);
 
   const columns = [
@@ -64,15 +71,15 @@ const LoginLog = () => {
   ];
   // 在起止时间任意一个变化后获取数据
   useEffect(() => {
-    if (startTime && endTime) {
+    if (allTime) {
       setLoading(true);
       getData();
     }
-  }, [startTime, endTime]);
+  }, [allTime]);
   const getData = () => {
     post(`${PUBLISH_SERVICE}/LogCenter/GetLoginLog`, {
-      DateFrom: startTime.format('YYYY-MM-DD HH:mm:ss'),
-      DateTo: endTime.format('YYYY-MM-DD HH:mm:ss'),
+      DateFrom: allTime[0].format('YYYY-MM-DD HH:mm:ss'),
+      DateTo: allTime[1].format('YYYY-MM-DD HH:mm:ss'),
       IP: '',
       Module: '',
       Description: '',
@@ -114,15 +121,24 @@ const LoginLog = () => {
   const changeEndTime = time => {
     setEndTime(time);
   };
+
+  const changeTime = time => {
+    setAllTime(time);
+  };
   // 近1/6/12/24小时
   const setTime = time => {
     setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'));
     setStartTime(
       moment(new Date(new Date().getTime() - time * 60 * 60 * 1000), 'YYYY-MM-DD HH:mm:ss'),
     );
+    setAllTime([
+      moment(new Date(new Date().getTime() - time * 60 * 60 * 1000), 'YYYY-MM-DD HH:mm:ss'),
+      moment(new Date(), 'YYYY-MM-DD HH:mm:ss'),
+    ]);
   };
   const handleReset = () => {
     setStartTime(moment().startOf('week'));
+    setAllTime([moment().startOf('week'), moment(new Date(), 'YYYY-MM-DD HH:mm:ss')]);
     setFilteredValue([]);
   };
   const onChangeInput = filters => {
@@ -135,7 +151,15 @@ const LoginLog = () => {
         <Row className={styles.head}>
           <Col span={24}>
             <span style={{ lineHeight: 2 }}>时间：</span>
-            <DatePicker
+            <RangePicker
+              locale={locale}
+              showTime
+              format="YYYY-MM-DD HH:mm:ss"
+              onChange={changeTime}
+              value={allTime}
+              allowClear={false}
+            />
+            {/* <DatePicker
               showTime
               format="YYYY-MM-DD HH:mm:ss"
               placeholder="起始时间"
@@ -152,8 +176,10 @@ const LoginLog = () => {
               onChange={changeEndTime}
               style={{ marginRight: '10px' }}
               allowClear={false}
-            />
-            <Button onClick={() => setTime(1)}>近1小时</Button>
+            /> */}
+            <Button onClick={() => setTime(1)} style={{ marginLeft: '20px' }}>
+              近1小时
+            </Button>
             <Button onClick={() => setTime(6)}>近6小时</Button>
             <Button onClick={() => setTime(24)}>近1天</Button>
             <Button onClick={() => setTime(24 * 7)}>近1周</Button>

src/pages/log/omsLog/index.jsx

@@ -14,9 +14,13 @@ import {
 } from 'antd';
 import { SwapRightOutlined, SyncOutlined } from '@ant-design/icons';
 import moment from 'moment';
+import 'moment/dist/locale/zh-cn';
+import locale from 'antd/es/date-picker/locale/zh_CN';
 import { get, PUBLISH_SERVICE } from '@/services/index';
 import styles from './index.less';
 
+const { RangePicker } = DatePicker;
+
 const OmsLog = () => {
   const [loading, setLoading] = useState(false); // 源数据
   const [data, setData] = useState([]); // 源数据
@@ -28,6 +32,10 @@ const OmsLog = () => {
   const [endTime, setEndTime] = useState(
     moment(new Date(), 'YYYY-MM-DD HH:mm:ss'), // 默认值当前时间
   );
+  const [allTime, setAllTime] = useState([
+    moment().startOf('month'),
+    moment(new Date(), 'YYYY-MM-DD HH:mm:ss'),
+  ]);
   const [showSearchStyle, setShowSearchStyle] = useState(false); // 是否显示模糊查询样式
   const [total, setTotal] = useState();
   const [pageSize, setPageSize] = useState(20);
@@ -57,9 +65,21 @@ const OmsLog = () => {
       title: '标签',
       dataIndex: 'Label',
       key: 'Label',
-      ellipsis: 'true',
-      width: 300,
-      render: item => searchStyle1(item),
+      // width: 300,
+      onCell: () => ({
+        style: {
+          maxWidth: 300,
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+          cursor: 'pointer',
+        },
+      }),
+      render: record => (
+        <Tooltip placement="topLeft" title={record}>
+          {searchStyle1(record)}
+        </Tooltip>
+      ),
     },
     {
       title: '操作信息',
@@ -129,16 +149,16 @@ const OmsLog = () => {
 
   // 在起止时间任意一个变化后获取数据
   useEffect(() => {
-    if (startTime && endTime) {
+    if (allTime) {
       setLoading(true);
       getData();
     }
-  }, [startTime, endTime]);
+  }, [allTime]);
   const getData = () => {
     get(`${PUBLISH_SERVICE}/LogCenter/GetOmsCustomerLog`, {
       logType: 'operationLog',
-      StartDateTime: startTime.format('YYYY-MM-DD HH:mm:ss'),
-      EndDate: endTime.format('YYYY-MM-DD HH:mm:ss'),
+      StartDateTime: allTime[0].format('YYYY-MM-DD HH:mm:ss'),
+      EndDate: allTime[1].format('YYYY-MM-DD HH:mm:ss'),
       function: functionName,
       label,
       PageIndex: 1,
@@ -183,8 +203,8 @@ const OmsLog = () => {
   const getData1 = (page, size) => {
     get(`${PUBLISH_SERVICE}/LogCenter/GetOmsCustomerLog`, {
       logType: 'operationLog',
-      StartDateTime: startTime.format('YYYY-MM-DD HH:mm:ss'),
-      EndDate: endTime.format('YYYY-MM-DD HH:mm:ss'),
+      StartDateTime: allTime[0].format('YYYY-MM-DD HH:mm:ss'),
+      EndDate: allTime[1].format('YYYY-MM-DD HH:mm:ss'),
       function: functionName,
       label,
       PageIndex: page,
@@ -230,16 +250,24 @@ const OmsLog = () => {
   const changeEndTime = time => {
     setEndTime(time);
   };
+  const changeTime = time => {
+    setAllTime(time);
+  };
   // 近1/6/12/24小时
   const setTime = time => {
     setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'));
     setStartTime(
       moment(new Date(new Date().getTime() - time * 60 * 60 * 1000), 'YYYY-MM-DD HH:mm:ss'),
     );
+    setAllTime([
+      moment(new Date(new Date().getTime() - time * 60 * 60 * 1000), 'YYYY-MM-DD HH:mm:ss'),
+      moment(new Date(), 'YYYY-MM-DD HH:mm:ss'),
+    ]);
   };
   const handleReset = () => {
     setStartTime(moment().startOf('month'));
     setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'));
+    setAllTime([moment().startOf('month'), moment(new Date(), 'YYYY-MM-DD HH:mm:ss')]);
     setFunctionName('');
     setFilteredValue([]);
     setLabel('');
@@ -261,7 +289,15 @@ const OmsLog = () => {
         <Row className={styles.head}>
           <Col span={24}>
             <span style={{ lineHeight: 2 }}>时间：</span>
-            <DatePicker
+            <RangePicker
+              locale={locale}
+              showTime
+              format="YYYY-MM-DD HH:mm:ss"
+              onChange={changeTime}
+              value={allTime}
+              allowClear={false}
+            />
+            {/* <DatePicker
               showTime
               format="YYYY-MM-DD HH:mm:ss"
               placeholder="起始时间"
@@ -278,8 +314,10 @@ const OmsLog = () => {
               onChange={changeEndTime}
               style={{ marginRight: '10px' }}
               allowClear={false}
-            />
-            <Button onClick={() => setTime(1)}>近1小时</Button>
+            /> */}
+            <Button onClick={() => setTime(1)} style={{ marginLeft: '20px' }}>
+              近1小时
+            </Button>
             {/* <Button onClick={() => setTime(6)}>近6小时</Button> */}
             <Button onClick={() => setTime(24)}>近1天</Button>
             <Button onClick={() => setTime(24 * 7)}>近1周</Button>

src/pages/log/omsLog/index.less

-.omsLog{
-    .head{
-        padding: 10px;
-        background: white;
-        margin-bottom: 2px;
-        min-width: 1030px;
+.omsLog {
+  .head {
+    padding: 10px;
+    background: white;
+    margin-bottom: 2px;
+    min-width: 1030px;
+  }
+  .chart {
+    padding: 16px;
+    background: white;
+  }
+  .table {
+    border-top: 1px solid #f0eded;
+    // overflow: auto;//不要这个，pagination否则无法固定底部
+    .ant-table-thead tr th {
+      font-weight: 600;
+      color: rgba(0, 0, 0, 0.85);
+      background-color: #f6f9fe;
     }
-    .chart{
-        padding: 16px;
-        background: white;
+    .ant-table-body {
+      height: calc(100vh - 208px);
+      border-right: white;
+      overflow: auto !important;
+      // .ant-table-tbody{
+      //     overflow: scroll !important;
+      // }
     }
-    .table{
-        border-top: 1px solid #f0eded;
-        // overflow: auto;//不要这个，pagination否则无法固定底部
-        .ant-table-thead tr th{
-            font-weight: 600;
-            color:rgba(0,0,0,0.85);
-            background-color:#F6F9FE;
-        }
-        .ant-table-body{
-            height:calc(100vh - 208px);
-            border-right: white;
-            overflow: auto !important;
-            // .ant-table-tbody{
-            //     overflow: scroll !important;
-            // }
-        }
-        .ant-pagination{
-            z-index: 999;
-            border-top: 1px solid #f0eded;
-        }
-        .ant-table.ant-table-small {
-            width: 99%;
-            margin: 10px auto;
-        }
-        .ant-table-pagination{
-            padding-right: 12px;
-            background: white;
-            margin: 1px 0;
-            padding:8px;
-            padding-right: 20px;
-        }
-    } 
-    .ant-spin-container {
-        background-color: white;
-    } 
-    .icon{
-        margin-top: -5px !important;
-        vertical-align: text-bottom;
-    }    
-}
+    .ant-table-cell {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .ant-pagination {
+      z-index: 999;
+      border-top: 1px solid #f0eded;
+    }
+    .ant-table.ant-table-small {
+      width: 99%;
+      margin: 10px auto;
+    }
+    .ant-table-pagination {
+      padding-right: 12px;
+      background: white;
+      margin: 1px 0;
+      padding: 8px;
+      padding-right: 20px;
+    }
+  }
+  .ant-spin-container {
+    background-color: white;
+  }
+  .icon {
+    margin-top: -5px !important;
+    vertical-align: text-bottom;
+  }
+}
\ No newline at end of file

src/pages/log/serviceLog/index.jsx

@@ -15,11 +15,15 @@ import {
 } from 'antd';
 import { SwapRightOutlined, SyncOutlined, CaretUpFilled, CaretDownFilled } from '@ant-design/icons';
 import { Chart, Interval, Line, Axis } from 'bizcharts';
-import moment from 'moment';
 import { post, PUBLISH_SERVICE } from '@/services/index';
+import moment from 'moment';
+import 'moment/dist/locale/zh-cn';
+import locale from 'antd/es/date-picker/locale/zh_CN';
 import styles from './index.less';
+
 const { Option } = Select;
 const { Search } = Input;
+const { RangePicker } = DatePicker;
 
 const ServiceLog = () => {
   const [loading, setLoading] = useState(false); // 源数据
@@ -32,6 +36,10 @@ const ServiceLog = () => {
   const [endTime, setEndTime] = useState(
     moment(new Date(), 'YYYY-MM-DD HH:mm:ss'), // 默认值，当前时间
   );
+  const [allTime, setAllTime] = useState([
+    moment().startOf('month'),
+    moment(new Date(), 'YYYY-MM-DD HH:mm:ss'),
+  ]);
   const [logType, setLogType] = useState('9999'); // 请求参数，日志类型，默认是正常，0:成功 -1:异常 9999:全部
   const [searchWord, setSearchWord] = useState(''); // 关键字
   const [showSearchStyle, setShowSearchStyle] = useState(false); // 是否显示模糊查询样式
@@ -45,8 +53,8 @@ const ServiceLog = () => {
   const [keepOrder, setKeepOrder] = useState('');
 
   // 计算时间间隔（分钟）
-  const start = new Date(startTime).getTime();
-  const end = new Date(endTime).getTime();
+  const start = new Date(allTime[0]).getTime();
+  const end = new Date(allTime[1]).getTime();
   const minuteInterval = (end - start) / (60 * 1000); // 相隔多少分钟
   const countInterval = () => {
     if (minuteInterval > 0 && minuteInterval <= 30) {
@@ -60,11 +68,16 @@ const ServiceLog = () => {
     }
   };
   // 计算时间间隔（月份），禁止跨月份查询
-  const startMonth = new Date(startTime).getMonth();
-  const endMonth = new Date(endTime).getMonth();
-  const startYear = new Date(startTime).getYear();
-  const endYear = new Date(endTime).getYear();
+  const startMonth = new Date(allTime[0]).getMonth();
+  const endMonth = new Date(allTime[1]).getMonth();
+  const startYear = new Date(allTime[0]).getYear();
+  const endYear = new Date(allTime[1]).getYear();
   if (minuteInterval <= 0) {
+    console.log(start);
+    console.log(end);
+    console.log(allTime[0]);
+    console.log(allTime[1]);
+    console.log(minuteInterval);
     notification.error({
       message: '时间设置有误',
       description: '起始时间应该早于结束时间',
@@ -82,7 +95,7 @@ const ServiceLog = () => {
       dataIndex: 'Path',
       key: 'Path',
       fixed: 'left',
-      width: 400,
+      width: 300,
       render: item => searchStyle(item),
     },
     {
@@ -207,8 +220,8 @@ const ServiceLog = () => {
       // 获取日志表数据时PageSize设置为200，其他接口默认值20
       PageIndex: 1,
       PageSize: 20,
-      DateFrom: startTime.format('YYYY-MM-DD HH:mm:ss'),
-      DateTo: endTime.format('YYYY-MM-DD HH:mm:ss'),
+      DateFrom: allTime[0].format('YYYY-MM-DD HH:mm:ss'),
+      DateTo: allTime[1].format('YYYY-MM-DD HH:mm:ss'),
       IP: '',
       Module: searchWord,
       LogType: +logType,
@@ -258,8 +271,8 @@ const ServiceLog = () => {
       // 获取日志表数据时PageSize设置为200，其他接口默认值20
       PageIndex: 1,
       PageSize: 20,
-      DateFrom: startTime.format('YYYY-MM-DD HH:mm:ss'),
-      DateTo: endTime.format('YYYY-MM-DD HH:mm:ss'),
+      DateFrom: allTime[0].format('YYYY-MM-DD HH:mm:ss'),
+      DateTo: allTime[1].format('YYYY-MM-DD HH:mm:ss'),
       IP: '',
       Module: searchWord,
       LogType: +logType,
@@ -310,42 +323,24 @@ const ServiceLog = () => {
   };
   // 在起止时间任意一个变化后获取数据,且起止时间应该早于结束时间,且不允许跨月查询
   useEffect(() => {
-    if (
-      startTime &&
-      endTime &&
-      end - start > 0 &&
-      startMonth === endMonth &&
-      startYear === endYear
-    ) {
+    if (allTime && end - start > 0 && startMonth === endMonth && startYear === endYear) {
       countInterval(); // 根据起止时间计算时间间隔
     }
-  }, [startTime, endTime]);
+  }, [allTime]);
   useEffect(() => {
-    if (
-      startTime &&
-      endTime &&
-      end - start > 0 &&
-      startMonth === endMonth &&
-      startYear === endYear
-    ) {
+    if (allTime && end - start > 0 && startMonth === endMonth && startYear === endYear) {
       setLoading(true);
       getData('/TrafficStatistics', setVisitedCount); // 访问量统计
     }
-  }, [startTime, endTime, logType, timeInterval]);
+  }, [allTime, logType, timeInterval]);
   useEffect(() => {
-    if (
-      startTime &&
-      endTime &&
-      end - start > 0 &&
-      startMonth === endMonth &&
-      startYear === endYear
-    ) {
+    if (allTime && end - start > 0 && startMonth === endMonth && startYear === endYear) {
       setLoading(true);
       getData('/TopCountList', setPathCount); // 接口调用频次统计
       getData('/TopConsumeList', setReponseTime); // 接口平均耗时统计
       getData('/GetOMSLog', setDataTable); // 接口调用记录
     }
-  }, [startTime, endTime, logType]);
+  }, [allTime, logType]);
 
   // 封装接口请求，参数url/设置方法set
   const getData = (url, set) => {
@@ -353,8 +348,8 @@ const ServiceLog = () => {
       // 获取日志表数据时PageSize设置为200，其他接口默认值20
       PageIndex: 1,
       PageSize: 20,
-      DateFrom: startTime.format('YYYY-MM-DD HH:mm:ss'),
-      DateTo: endTime.format('YYYY-MM-DD HH:mm:ss'),
+      DateFrom: allTime[0].format('YYYY-MM-DD HH:mm:ss'),
+      DateTo: allTime[1].format('YYYY-MM-DD HH:mm:ss'),
       IP: '',
       Module: url === '/GetOMSLog' ? searchWord : '',
       LogType: +logType,
@@ -408,8 +403,8 @@ const ServiceLog = () => {
       data = {
         PageIndex: page,
         PageSize: size,
-        DateFrom: startTime.format('YYYY-MM-DD HH:mm:ss'),
-        DateTo: endTime.format('YYYY-MM-DD HH:mm:ss'),
+        DateFrom: allTime[0].format('YYYY-MM-DD HH:mm:ss'),
+        DateTo: allTime[1].format('YYYY-MM-DD HH:mm:ss'),
         IP: '',
         Module: searchWord,
         LogType: +logType,
@@ -424,8 +419,8 @@ const ServiceLog = () => {
       data = {
         PageIndex: page,
         PageSize: size,
-        DateFrom: startTime.format('YYYY-MM-DD HH:mm:ss'),
-        DateTo: endTime.format('YYYY-MM-DD HH:mm:ss'),
+        DateFrom: allTime[0].format('YYYY-MM-DD HH:mm:ss'),
+        DateTo: allTime[1].format('YYYY-MM-DD HH:mm:ss'),
         IP: '',
         Module: searchWord,
         LogType: +logType,
@@ -466,16 +461,26 @@ const ServiceLog = () => {
 
   // DatePicker改变点击确定时
   const changeStartTime = time => {
+    console.log(time);
     setStartTime(time);
   };
   const changeEndTime = time => {
+    console.log(time);
     setEndTime(time);
   };
+  const changeTime = time => {
+    console.log(time);
+    setAllTime(time);
+  };
   // 近1/6/12/24小时,同时设置对应的时间间隔
   const setTime = (time, value) => {
     setTimeInterval(value);
-    setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'));
     setStartTime(moment(new Date(new Date().getTime() - time * 60 * 1000), 'YYYY-MM-DD HH:mm:ss'));
+    setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'));
+    setAllTime([
+      moment(new Date(new Date().getTime() - time * 60 * 1000), 'YYYY-MM-DD HH:mm:ss'),
+      moment(new Date(), 'YYYY-MM-DD HH:mm:ss'),
+    ]);
   };
   // 设置返回状态
   const changeStatus = value => {
@@ -494,6 +499,7 @@ const ServiceLog = () => {
     setTimeInterval('4');
     setStartTime(moment().startOf('month'));
     setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'));
+    setAllTime([moment().startOf('month'), moment(new Date(), 'YYYY-MM-DD HH:mm:ss')]);
     setSearchWord('');
     setShowSearchStyle(false);
   };
@@ -515,7 +521,16 @@ const ServiceLog = () => {
         <Row className={styles.head}>
           <Col span={24}>
             <span>时间：</span>
-            <DatePicker
+            <RangePicker
+              locale={locale}
+              showTime
+              format="YYYY-MM-DD HH:mm:ss"
+              onChange={changeTime}
+              value={allTime}
+              allowClear={false}
+            />
+            {/* <DatePicker
+              locale={locale}
               showTime
               format="YYYY-MM-DD HH:mm:ss"
               placeholder="起始时间"
@@ -525,6 +540,7 @@ const ServiceLog = () => {
             />
             <SwapRightOutlined style={{ verticalAlign: '0.125em' }} />
             <DatePicker
+              locale={locale}
               showTime
               format="YYYY-MM-DD HH:mm:ss"
               placeholder="结束时间"
@@ -532,8 +548,10 @@ const ServiceLog = () => {
               onChange={changeEndTime}
               style={{ marginRight: '10px' }}
               allowClear={false}
-            />
-            <Button onClick={() => setTime(15, '1')}>近15分钟</Button>
+            /> */}
+            <Button onClick={() => setTime(15, '1')} style={{ marginLeft: '10px' }}>
+              近15分钟
+            </Button>
             <Button onClick={() => setTime(60, '2')}>近1小时</Button>
             <Button onClick={() => setTime(12 * 60, '3')}>近12小时</Button>
             <Button onClick={() => setTime(24 * 60, '3')}>近1天</Button>

src/pages/log/serviceLog/index.less

@@ -65,3 +65,7 @@
 .ant-select-arrow .anticon > svg {
   vertical-align: middle;
 }
+.ant-picker-separator {
+  display: flex;
+  align-items: center;
+}

src/pages/platformCenter/integratedLogin/AddModal.jsx

+/* eslint-disable no-else-return */
+/* eslint-disable prefer-promise-reject-errors */
 /* eslint-disable prefer-template */
 /* eslint-disable react/jsx-boolean-value */
 import React, { useState, useEffect } from 'react';
@@ -294,8 +296,12 @@ const AddModal = props => {
               {
                 validator: (rule, value) => {
                   let aa = form.getFieldValue().systemName;
+                  let regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im;
+                  let regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im;
                   if (keepSystemName.indexOf(aa) != -1) {
                     return Promise.reject('名称已存在');
+                  } else if (regEn.test(aa) || regCn.test(aa)) {
+                    return Promise.reject('名称不能包含特殊字符');
                   }
                   return Promise.resolve();
                 },