bug修复

package.json

@@ -17,6 +17,7 @@
     "base-64": "^1.0.0",
     "copy-to-clipboard": "^3.3.2",
     "cron-parser": "^4.6.0",
+    "mark.js": "^8.11.1",
     "moment": "^2.29.4",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
@@ -61,4 +62,4 @@
     "cross-env": "^7.0.3",
     "dotenv-cli": "^6.0.0"
   }
-}
+}

src/module/datasource/component/DatasourceAdd.jsx

@@ -141,16 +141,20 @@ export default function DatasourceAdd({ updateDataSource }) {
         if (data.data) {
           message.success('添加成功')
           updateDataSource()
+          return true
         } else {
           message.error(data.msg)
+          return false
         }
       }
     } else {
       const { data } = await createDataSource(params)
       if (data.data) {
-        message.success('连接成功')
+        message.success('添加成功')
+        return true
       } else {
         message.error(data.msg)
+        return false
       }
     }
   }

src/module/datasource/component/LogWatcher.jsx

@@ -1,8 +1,10 @@
-import { Button, Checkbox, Space } from 'antd'
+import { Button, Checkbox, Input, Space } from 'antd'
 import React, { useEffect, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
 import { getOnceJoblog } from '../services/index'
+import { UpOutlined, DownOutlined } from '@ant-design/icons'
+import Mark from 'mark.js'
 
 const LogWrapper = styled.div`
   margin: 20px;
@@ -20,7 +22,7 @@ const LogWrapper = styled.div`
   }
   .return {
     display: flex;
-    justify-content: flex-end;
+    justify-content: space-between;
     padding-bottom: 10px;
   }
 `
@@ -33,6 +35,12 @@ const LogWatcher = () => {
   const [logData, setLogData] = useState(null)
   const [autoRefresh, setAutoRefresh] = useState(false)
 
+  const [keyWord, setKeyWord] = useState(null)
+
+  const [keyWordList, setKeyWordList] = useState([])
+
+  const [keyWordIndex, setKeyWordIndex] = useState(0)
+
   const fetchOnceJoblog = async () => {
     const { data } = await getOnceJoblog(state.id)
     if (data.code === 200) {
@@ -72,9 +80,93 @@ const LogWatcher = () => {
     fetchOnceJoblog()
   }
 
+  const findLast = () => {
+    if (keyWordList.length) {
+      const logWindow = document.getElementById('log')
+      keyWordList[keyWordIndex - 1].style.backgroundColor = '#fffd38'
+      if (keyWordIndex - 1 > 0) {
+        setKeyWordIndex(keyWordIndex - 1)
+        keyWordList[keyWordIndex - 2].style.backgroundColor = '#fd9640'
+        const targetbox =
+          document.getElementsByClassName('keyword_mark')[keyWordIndex - 2]
+        logWindow.scrollTop = targetbox.offsetTop - 150
+        logWindow.scrollLeft = targetbox.offsetLeft - logWindow.clientWidth
+      } else {
+        setKeyWordIndex(keyWordList.length)
+        keyWordList[keyWordList.length - 1].style.backgroundColor = '#fd9640'
+        const targetbox =
+          document.getElementsByClassName('keyword_mark')[
+            keyWordList.length - 1
+          ]
+        logWindow.scrollTop = targetbox.offsetTop - 150
+        logWindow.scrollLeft = targetbox.offsetLeft - logWindow.clientWidth
+      }
+    }
+  }
+  const findNext = () => {
+    if (keyWordList.length) {
+      const logWindow = document.getElementById('log')
+      keyWordList[keyWordIndex - 1].style.backgroundColor = '#fffd38'
+      if (keyWordIndex + 1 <= keyWordList.length) {
+        setKeyWordIndex(keyWordIndex + 1)
+        keyWordList[keyWordIndex].style.backgroundColor = '#fd9640'
+        const targetbox =
+          document.getElementsByClassName('keyword_mark')[keyWordIndex]
+        logWindow.scrollTop = targetbox.offsetTop - 150
+        logWindow.scrollLeft = targetbox.offsetLeft - logWindow.clientWidth
+      } else {
+        setKeyWordIndex(1)
+        keyWordList[0].style.backgroundColor = '#fd9640'
+        const targetbox = document.getElementsByClassName('keyword_mark')[0]
+        logWindow.scrollTop = targetbox.offsetTop - 150
+        logWindow.scrollLeft = targetbox.offsetLeft - logWindow.clientWidth
+      }
+    }
+  }
+  const changeKeyWord = e => {
+    setKeyWord(e.target.value)
+    setKeyWordIndex(0)
+    const markInstance = new Mark(document.querySelector('#log'))
+    markInstance.unmark({
+      done: () => {
+        const list = []
+        markInstance.mark(e.target.value, {
+          each: val => {
+            val.style.backgroundColor = '#fffd38'
+            val.style.padding = 0
+            val.className = 'keyword_mark'
+            list.push(val)
+          },
+        })
+        if (list.length > 0) {
+          setKeyWordIndex(1)
+          list[0].style.backgroundColor = '#fd9640'
+        }
+        setKeyWordList(list)
+      },
+    })
+  }
+  const searchTools = (
+    <Space>
+      <span>
+        {keyWordIndex}/{keyWordList.length}
+      </span>
+      <UpOutlined onClick={findLast} />
+      <DownOutlined onClick={findNext} />
+    </Space>
+  )
+
   return (
     <LogWrapper>
       <div className="return">
+        <Space>
+          <Input
+            value={keyWord}
+            onChange={changeKeyWord}
+            addonAfter={searchTools}
+            placeholder="输入关键词"
+          />
+        </Space>
         <Space>
           <Checkbox onChange={changeRefresh} checked={autoRefresh}>
             自动刷新
@@ -89,7 +181,9 @@ const LogWatcher = () => {
           </Button>
         </Space>
       </div>
-      <pre className="log">{logData}</pre>
+      <pre className="log" id="log">
+        {logData}
+      </pre>
     </LogWrapper>
   )
 }

src/module/tasklog/component/TaskLogWatcher.jsx

@@ -1,9 +1,11 @@
-import { Button, Card, Checkbox, message, Space, Table } from 'antd'
+import { Button, Card, Checkbox, Input, message, Space, Table } from 'antd'
 import React, { useEffect, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
 import { getAllTask, getTaskLog } from '../services/index'
 import moment from 'moment'
+import { UpOutlined, DownOutlined } from '@ant-design/icons'
+import Mark from 'mark.js'
 
 const LogWrapper = styled.div`
   padding: 20px;
@@ -19,7 +21,7 @@ const LogWrapper = styled.div`
   .refresh {
     height: 50px;
     display: flex;
-    justify-content: flex-end;
+    justify-content: space-between;
   }
   .log {
     background-color: #012b36;
@@ -64,6 +66,12 @@ const TaskLogWatcher = () => {
 
   const [autoRefresh, setAutoRefresh] = useState(false)
 
+  const [keyWord, setKeyWord] = useState(null)
+
+  const [keyWordList, setKeyWordList] = useState([])
+
+  const [keyWordIndex, setKeyWordIndex] = useState(0)
+
   const columns = [
     {
       title: '序号',
@@ -215,6 +223,81 @@ const TaskLogWatcher = () => {
       }}
     />
   )
+  const findLast = () => {
+    if (keyWordList.length) {
+      const logWindow = document.getElementById('log')
+      keyWordList[keyWordIndex - 1].style.backgroundColor = '#fffd38'
+      if (keyWordIndex - 1 > 0) {
+        setKeyWordIndex(keyWordIndex - 1)
+        keyWordList[keyWordIndex - 2].style.backgroundColor = '#fd9640'
+        const targetbox =
+          document.getElementsByClassName('keyword_mark')[keyWordIndex - 2]
+        logWindow.scrollTop = targetbox.offsetTop - 150
+        logWindow.scrollLeft = targetbox.offsetLeft - logWindow.clientWidth
+      } else {
+        setKeyWordIndex(keyWordList.length)
+        keyWordList[keyWordList.length - 1].style.backgroundColor = '#fd9640'
+        const targetbox =
+          document.getElementsByClassName('keyword_mark')[
+            keyWordList.length - 1
+          ]
+        logWindow.scrollTop = targetbox.offsetTop - 150
+        logWindow.scrollLeft = targetbox.offsetLeft - logWindow.clientWidth
+      }
+    }
+  }
+  const findNext = () => {
+    if (keyWordList.length) {
+      const logWindow = document.getElementById('log')
+      keyWordList[keyWordIndex - 1].style.backgroundColor = '#fffd38'
+      if (keyWordIndex + 1 <= keyWordList.length) {
+        setKeyWordIndex(keyWordIndex + 1)
+        keyWordList[keyWordIndex].style.backgroundColor = '#fd9640'
+        const targetbox =
+          document.getElementsByClassName('keyword_mark')[keyWordIndex]
+        logWindow.scrollTop = targetbox.offsetTop - 150
+        logWindow.scrollLeft = targetbox.offsetLeft - logWindow.clientWidth
+      } else {
+        setKeyWordIndex(1)
+        keyWordList[0].style.backgroundColor = '#fd9640'
+        const targetbox = document.getElementsByClassName('keyword_mark')[0]
+        logWindow.scrollTop = targetbox.offsetTop - 150
+        logWindow.scrollLeft = targetbox.offsetLeft - logWindow.clientWidth
+      }
+    }
+  }
+  const changeKeyWord = e => {
+    setKeyWord(e.target.value)
+    setKeyWordIndex(0)
+    const markInstance = new Mark(document.querySelector('#log'))
+    markInstance.unmark({
+      done: () => {
+        const list = []
+        markInstance.mark(e.target.value, {
+          each: val => {
+            val.style.backgroundColor = '#fffd38'
+            val.style.padding = 0
+            val.className = 'keyword_mark'
+            list.push(val)
+          },
+        })
+        if (list.length > 0) {
+          setKeyWordIndex(1)
+          list[0].style.backgroundColor = '#fd9640'
+        }
+        setKeyWordList(list)
+      },
+    })
+  }
+  const searchTools = (
+    <Space>
+      <span>
+        {keyWordIndex}/{keyWordList.length}
+      </span>
+      <UpOutlined onClick={findLast} />
+      <DownOutlined onClick={findNext} />
+    </Space>
+  )
   return (
     <LogWrapper>
       <div className="job-list">
@@ -237,6 +320,14 @@ const TaskLogWatcher = () => {
           style={{ height: '100%', width: '100%' }}
           bodyStyle={{ height: '100%', width: '100%' }}>
           <div className="refresh">
+            <Space>
+              <Input
+                value={keyWord}
+                onChange={changeKeyWord}
+                addonAfter={searchTools}
+                placeholder="输入关键词"
+              />
+            </Space>
             <Space>
               <Checkbox onChange={changeRefresh} checked={autoRefresh}>
                 自动刷新
@@ -251,7 +342,9 @@ const TaskLogWatcher = () => {
               </Button>
             </Space>
           </div>
-          <pre className="log">{logData}</pre>
+          <pre className="log" id="log">
+            {logData}
+          </pre>
         </Card>
       </div>
     </LogWrapper>

yarn.lock

@@ -6635,6 +6635,11 @@ makeerror@1.0.12:
   dependencies:
     tmpl "1.0.5"
 
+mark.js@^8.11.1:
+  version "8.11.1"
+  resolved "https://registry.yarnpkg.com/mark.js/-/mark.js-8.11.1.tgz#180f1f9ebef8b0e638e4166ad52db879beb2ffc5"
+  integrity sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==
+
 mdn-data@2.0.14:
   version "2.0.14"
   resolved "https://registry.npmmirror.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"