taskDetail.js

import './task.less'
import React from "react";
import axios from '@src/axios'
import Utils from '@utils/utils'
import { API_TASK_MONITOR } from '@src/Api'
import { UserManageBar } from '@components/Common'
import { NavLink, withRouter } from 'react-router-dom'
import storage from '@src/utils/localStorage'
import { Row, Col, Table, Form, Button, Input, Icon, message, Modal  } from 'antd'

const FormItem = Form.Item;

class taskDetail extends React.Component {
  state = {
    loading: false,
    btnAuth: null,
    isShowOpt: true,
    expandStatus: false,
  }
  params = {
    page: 1,
    pageSize: 10
  }
  stateArr={
    DISABLED:"失效",
    PENDING:"等待",
    SHARDING_FLAG:"",
    RUNNING:"运行中",
  }

  componentDidMount() {
    const { name } = this.props.match.params
    this.setState({taskName:name})
    //this.setState({taskName:`定时任务详情>${name}`})
    this.getTimeJobByName()
  }

  /*数据获取区域*/

  //根据条件查询table数据
  queryList = () => {
     let searchInfo = Utils.trim(this.props.form.getFieldsValue());
      console.log(searchInfo);
      this.setState({searchInfo},() => {
      this.getTimeJobByName(searchInfo)
    })  
  }
  //重置表单
  reset = () => {
    this.props.form.resetFields();
    let searchInfo = Utils.trim(this.props.form.getFieldsValue());
    this.setState({searchInfo},() => {
      this.getTimeJobByName()
    }) 
  }
  //获取多条件查询历史状态
  getTimeJobByName = (searchInfo) => {
    const { name } = this.props.match.params
    this.setState({
      loading: true
    })
    axios.ajax({
      url: API_TASK_MONITOR.getTimeJobByName,
      data: {
        //id:id,
        ...searchInfo,
        jobName:name,
        pageNum: this.params.page,
        pageSize: this.params.pageSize
      }
    }).then(res => {
        let list =res.map((item, index) => {
           item.key = index
           return item
        })
        this.setState({
          list,
          loading: false,
        })
    })
  }



  /*数据获取完成*/

  // 展开查询条件
   expandMenu = ()=> {
    this.setState({
      expandStatus: !this.state.expandStatus,
    })
  }
  
  render() {
  	const { getFieldDecorator } = this.props.form;
    const { loading ,taskName} = this.state;
    const stateArr =this.stateArr
    const columns = [
      {
        title: '分片项',
        dataIndex: 'item',
        className: 'pLeft',
        align: 'left',
      }, {
        title: '服务器IP',
        dataIndex: 'serverIp',
      },
      {
        title: '进程ID',
        dataIndex: 'instanceId',
      },
      {
        title: '状态',
        dataIndex: 'status',
        render(state) {
          return stateArr[state]
        }
      },
      
      {
        title: '支持自动失效转移',
        dataIndex: 'failover',
        className:'pRight',
        render(failover) {
          return {
            1: '是',
            2: '否',
          }[failover]
        }
      }
    ];

    return (
      <div className="taskDetail searchWrap">
       <div className="nav">
        <NavLink to='/home/monitor/TaskMonitor/scheduledTaskMonitor' > 定时任务</NavLink> ><span>{taskName}</span>
        </div>
        <UserManageBar title="定时任务详情"/>
          

        <UserManageBar title="详细数据" />

        <div className="detData">
          <Table 
            selections={false}
            bordered={false}
            loading={loading}
            pagination={false}
            dataSource={this.state.list}
            columns={columns}
          />
        </div>
      </div>
    )
  }


}
export default Form.create()(taskDetail);