feat: 任务日志模块页面

src/module/tasklog/component/LogTable.jsx

@@ -1,231 +1,131 @@
-import { Button, Form, Input, Popconfirm, Table } from 'antd'
-import React, { useContext, useEffect, useRef, useState } from 'react'
-import styled from 'styled-components'
-import { Link } from 'react-router-dom'
-const EditableContext = React.createContext(null)
-const FormItem = Form.Item
+import React, { useState, useEffect } from 'react'
+import { Table, Space } from 'antd'
+import moment from 'moment'
+import { useNavigate } from 'react-router-dom'
 
-const LogTable = styled.div`
-  margin-left: 24px;
-  .delButton {
-    margin-left: 40px;
-  }
-`
-
-const EditableRow = ({ index, ...props }) => {
-  const [form] = Form.useForm()
-  return (
-    <Form form={form} component={false}>
-      <EditableContext.Provider value={form}>
-        <tr {...props} />
-      </EditableContext.Provider>
-    </Form>
-  )
-}
-
-const EditableCell = ({
-  title,
-  editable,
-  children,
-  dataIndex,
-  record,
-  handleSave,
-  ...restProps
-}) => {
-  const [editing, setEditing] = useState(false)
-  const inputRef = useRef(null)
-  const form = useContext(EditableContext)
-  useEffect(() => {
-    if (editing) {
-      inputRef.current.focus()
-    }
-  }, [editing])
-
-  const toggleEdit = () => {
-    setEditing(!editing)
-    form.setFieldsValue({
-      [dataIndex]: record[dataIndex],
-    })
-  }
-
-  const save = async () => {
-    try {
-      const values = await form.validateFields()
-      toggleEdit()
-      handleSave({ ...record, ...values })
-    } catch (errInfo) {
-      console.log('Save failed:', errInfo)
-    }
-  }
-
-  let childNode = children
-
-  if (editable) {
-    childNode = editing ? (
-      <FormItem
-        style={{
-          margin: 0,
-        }}
-        name={dataIndex}
-        rules={[
-          {
-            required: true,
-            message: `${title} is required.`,
-          },
-        ]}>
-        <Input ref={inputRef} onPressEnter={save} onBlur={save} />
-      </FormItem>
-    ) : (
-      <div
-        className="editable-cell-value-wrap"
-        style={{
-          paddingRight: 24,
-        }}
-        onClick={toggleEdit}>
-        {children}
-      </div>
-    )
-  }
+const LogTable = () => {
+  // 初始化日志列表
+  const [logList, setLogList] = useState([])
+  // 表格Loading状态
+  const [dataLoading, setDataLoading] = useState(false)
 
-  return <td {...restProps}>{childNode}</td>
-}
-
-export default function LogItems() {
-  const itemData = [
-    {
-      key: '0',
-      name: '每日供应商销量预测作业2',
-      type: 'java',
-      sort: '业务预测',
-      creTime: '2022.8.18 12:00:00',
-      updTime: '2022.8.18 12:00:00',
-    },
-    {
-      key: '1',
-      name: '每日供应商销量预测作业21',
-      type: 'java',
-      sort: '业务预测',
-      creTime: '2022.8.18 12:00:00',
-      updTime: '2022.8.18 12:00:00',
-    },
-  ]
-  const [dataSource, setDataSource] = useState(
-    itemData
-    //   [
-    //   {
-    //     key: '0',
-    //     name: '每日供应商销量预测作业2',
-    //     type: 'java',
-    //     sort: '业务预测',
-    //     creTime: '2022.8.18 12:00:00',
-    //     updTime: '2022.8.18 12:00:00',
-    //   },
-    //   {
-    //     key: '1',
-    //     name: '每日供应商销量预测作业21',
-    //     type: 'java',
-    //     sort: '业务预测',
-    //     creTime: '2022.8.18 12:00:00',
-    //     updTime: '2022.8.18 12:00:00',
-    //   },
-    // ]
-  )
-  const [count, setCount] = useState(2)
+  const navigate = useNavigate()
 
-  const handleDelete = key => {
-    const newData = dataSource.filter(item => item.key !== key)
-    setDataSource(newData)
+  const changeTask = () => {}
+  const checkLog = id => {
+    navigate('/task-log/log-watcher', { state: { id } })
   }
-
-  const defaultColumns = [
+  const columns = [
     {
-      title: '作业名称',
-      dataIndex: 'name',
-      width: '16.6%',
+      title: '任务名称',
+      dataIndex: 'jobName',
+      key: 'jobName',
     },
     {
-      title: '作业类型',
-      dataIndex: 'type',
-      width: '16.6%',
+      title: '调度时间',
+      dataIndex: 'triggerTime',
+      key: 'triggerTime',
     },
     {
-      title: '作业分类',
-      dataIndex: 'sort',
-      width: '16.6%',
+      title: '调度结果',
+      dataIndex: 'triggerResult',
+      key: 'triggerResult',
+      render: code => (
+        <span
+          style={{
+            color: code === 0 ? '#FF4D4F' : code === 1 ? '#52C41A' : '#4A4A4A',
+          }}>
+          {code === 0 ? '失败' : code === 1 ? '成功' : '无'}
+        </span>
+      ),
     },
     {
-      title: '创建时间',
-      dataIndex: 'creTime',
-      width: '16.6%',
+      title: '执行时间',
+      dataIndex: 'handleTime',
+      key: 'handleTime',
     },
     {
-      title: '更新时间',
-      dataIndex: 'updTime',
-      width: '16.6%',
+      title: '执行结果',
+      dataIndex: 'handleResult',
+      key: 'handleResult',
+      render: code => (
+        <span
+          style={{
+            color: code === 0 ? '#FF4D4F' : code === 1 ? '#52C41A' : '#4A4A4A',
+          }}>
+          {code === 0 ? '失败' : code === 1 ? '成功' : '无'}
+        </span>
+      ),
     },
     {
       title: '操作',
-      dataIndex: 'operation',
-      width: '16.6%',
-
-      render: (_, record) =>
-        dataSource.length >= 1 ? (
-          <>
-            <Popconfirm>
-              <a>编辑</a>
-            </Popconfirm>
-            <Popconfirm
-              title="Sure to delete?"
-              onConfirm={() => handleDelete(record.key)}>
-              <a className="delButton">删除</a>
-            </Popconfirm>
-          </>
-        ) : null,
+      key: 'operation',
+      render: (_, record) => (
+        <Space size="middle">
+          <span
+            onClick={() => {
+              checkLog(record.key)
+            }}
+            style={{ color: '#1881DA', cursor: 'pointer' }}>
+            查看
+          </span>
+          {/* <a href="/#" onClick={editData} style={{ color: '#1881DA' }}>
+            编辑
+          </a> */}
+          <span
+            onClick={() => {
+              changeTask(record.key)
+            }}
+            style={{ color: '#1881DA', cursor: 'pointer' }}>
+            终止任务
+          </span>
+        </Space>
+      ),
     },
   ]
 
-  const handleSave = row => {
-    const newData = [...dataSource]
-    const index = newData.findIndex(item => row.key === item.key)
-    const item = newData[index]
-    newData.splice(index, 1, { ...item, ...row })
-    setDataSource(newData)
+  const fetchJoblog = async () => {
+    setDataLoading(true)
+    // const { data } = await getJoblog()
+    // if (data.code === 200) {
+    //   const list = data.data.items.map(item => {
+    //     return {
+    //       key: item.id,
+    //       jobId: item.job_id,
+    //       triggerTime: moment(item.trigger_time).format('YYYY.MM.DD HH:MM'),
+    //       triggerResult: item.trigger_code,
+    //       handleTime: moment(item.handle_time).format('YYYY.MM.DD HH:MM'),
+    //       handleResult: item.handle_code,
+    //     }
+    //   })
+    //   setLogList(list)
+    // }
+    const data = [
+      {
+        key: 1,
+        jobName: '每日供应商销量预测任务2',
+        triggerTime: moment(1663576651000).format('YYYY.MM.DD HH:MM'),
+        triggerResult: 1,
+        handleTime: moment(1663576651000).format('YYYY.MM.DD HH:MM'),
+        handleResult: 0,
+      }
+    ]
+    setLogList(data)
+    setDataLoading(false)
   }
 
-  const components = {
-    body: {
-      row: EditableRow,
-      cell: EditableCell,
-    },
-  }
-  const columns = defaultColumns.map(col => {
-    if (!col.editable) {
-      return col
-    }
+  useEffect(() => {
+    fetchJoblog()
+  }, [])
 
-    return {
-      ...col,
-      onCell: record => ({
-        record,
-        editable: col.editable,
-        dataIndex: col.dataIndex,
-        title: col.title,
-        handleSave,
-      }),
-    }
-  })
   return (
-    <LogTable>
-      <Table
-        components={components}
-        rowClassName={() => 'editable-row'}
-        bordered
-        dataSource={dataSource}
-        columns={columns}
-        style={{
-          marginTop: '20px',
-        }}
-      />
-    </LogTable>
+    <Table
+      columns={columns}
+      dataSource={logList}
+      bordered
+      loading={dataLoading}
+    />
   )
 }
+
+export default LogTable

src/module/tasklog/component/TaskLogWatcher.jsx

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react'
+import { useLocation } from 'react-router-dom'
+import styled from 'styled-components'
+// import { getOnceJoblog } from '../services/index'
+
+const LogWrapper = styled.div`
+  padding: 30px;
+  width: 100%;
+  height: 800px;
+  background-color: #fff;
+  .log {
+    background-color: #012b36;
+    height: 100%;
+    overflow-y: scroll;
+    color: #638691;
+    padding: 8px 10px;
+  }
+`
+
+const TaskLogWatcher = () => {
+  const { state } = useLocation()
+  const [logData, setLogData] = useState(null)
+
+  const fetchOnceJoblog = async () => {
+    // const { data } = await getOnceJoblog(state.id)
+    // if (data.code === 200) {
+    //   setLogData(data.data.handle_msg)
+    // }
+    setLogData('test log 123123123')
+  }
+  useEffect(() => {
+    fetchOnceJoblog()
+  }, [state])
+  return (
+    <LogWrapper>
+      <pre className="log">{logData}</pre>
+    </LogWrapper>
+  )
+}
+
+export default TaskLogWatcher

src/module/tasklog/page/TaskLog.jsx

@@ -1,7 +1,17 @@
 import React from 'react'
 import styled from 'styled-components'
 import LogTable from '../component/LogTable'
-const TSLog = styled.div``
+const TSLog = styled.div`
+  padding: 20px;
+  .icon_wrapper {
+    margin-right: 15px;
+  }
+  .link_btn {
+    display: flex;
+    justify-content: end;
+    margin-bottom: 20px;
+  }
+`
 
 export default function TaskLog() {
   return (

src/routes/index.js

@@ -4,6 +4,7 @@ import LogWatcher from '../module/datasource/component/LogWatcher.jsx'
 import TaskLog from '../module/tasklog/page/TaskLog.jsx';
 import TaskMgmtView from '../module/taskmgmt/page/TaskMgmtView.jsx';
 import TaskCreaterView from '../module/taskmgmt/component/TaskCreaterView.jsx';
+import TaskLogWatcher from '../module/tasklog/component/TaskLogWatcher.jsx';
 
 export const routes = [
     {
@@ -32,6 +33,11 @@ export const routes = [
         path: '/task-log',
         title: '任务日志',
         component: TaskLog,
-        children: []
+        children: [
+          {
+            path: '/task-log/log-watcher',
+            component: TaskLogWatcher
+          }
+        ]
     }
 ]