ai-proj-demo/src/module/datasource/component/DatasourceSyncView.jsx

import { Table, Space, Switch, message, Popconfirm } from 'antd'
import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { getJobList, updateJobStatus, delJob, executeOnce } from '../services'

export default function DatasourceSyncView({ selectLog }) {
  const navigate = useNavigate()

  // 初始化同步配置任务列表
  const [jobList, setJobList] = useState([])
  // 任务列表完整数据
  const [jobData, setJobData] = useState([])

  // 开关加载状态
  const [switchLoading, setSwitchLoading] = useState(false)

  // 表格Loading状态
  const [dataLoading, setDataLoading] = useState(false)

  const [currentPage, setCurrentPage] = useState(1)
  const [currentPageSize, setCurrentPageSize] = useState(10)
  const [dataTotal, setDataTotal] = useState(0)

  // 请求任务列表数据
  const fetchJobList = async (page = 1, pageSize = 10) => {
    setDataLoading(true)
    const { data } = await getJobList({
      page: page,
      size: pageSize,
    })
    if (data.code === 200) {
      setDataTotal(data.data.extra_data.total)
      setCurrentPage(data.data.extra_data.page)
      setCurrentPageSize(data.data.extra_data.size)
      const list = data.data.item.map(item => {
        return {
          key: item.id,
          id: item.id,
          job_cron: item.job_cron,
          jsb_desc: item.job_desc,
          trigger_status: item.trigger_status,
        }
      })
      setJobList(list)
      setJobData(data.data.item)
    }
    setDataLoading(false)
  }

  const pageChange = (page, pageSize) => {
    fetchJobList(page, pageSize)
  }

  const handleDelete = async id => {
    const { data } = await delJob(id)
    if (data.code === 200) {
      message.success('删除成功')
      fetchJobList()
    } else {
      message.error('删除失败')
    }
  }
  const editSyncItem = id => {
    navigate('/datasource/sync-edit', { state: { id } })
  }
  const runTimeOnce = async id => {
    const { data } = await executeOnce(id)
    if (data.code === 200) {
      message.success('开始执行')
    } else {
      message.error(data.msg)
    }
  }

  useEffect(() => {
    fetchJobList()
  }, [])

  const columns = [
    {
      title: '任务ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '任务描述',
      dataIndex: 'jsb_desc',
      key: 'jsb_desc',
    },
    {
      title: '频次',
      dataIndex: 'job_cron',
      key: 'job_cron',
    },
    {
      title: '状态',
      key: 'trigger_status',
      render: (_, record) => (
        <Space>
          <Switch
            checkedChildren="开"
            unCheckedChildren="关"
            checked={record.trigger_status === 1}
            loading={switchLoading}
            onClick={async () => {
              setSwitchLoading(true)
              console.log(jobData, record.key)
              const switch_data = jobData.find(item => item.id === record.key)
              const trigger_status = switch_data.trigger_status === 1 ? 0 : 1

              const { data } = await updateJobStatus({
                id: record.key,
                trigger_status,
              })
              if (data.code === 200) {
                message.success(
                  record.trigger_status === 1 ? '关闭成功' : '开启成功'
                )
                fetchJobList()
              } else {
                message.error(
                  record.trigger_status === 1 ? '关闭失败' : '开启失败'
                )
              }
              setSwitchLoading(false)
            }}
          />
        </Space>
      ),
    },
    {
      title: '操作',
      key: 'operation',
      render: (_, record) => (
        <Space size="middle">
          <span
            onClick={() => {
              runTimeOnce(record.id)
            }}
            style={{ color: '#1881DA', cursor: 'pointer' }}>
            执行一次
          </span>
          <span
            onClick={() => {
              selectLog(record.id)
            }}
            style={{ color: '#1881DA', cursor: 'pointer' }}>
            查看日志
          </span>
          <span
            onClick={() => {
              editSyncItem(record.id)
            }}
            style={{ color: '#1881DA', cursor: 'pointer' }}>
            编辑
          </span>
          <Popconfirm
            title="确认删除？"
            okText="确认"
            cancelText="取消"
            onConfirm={() => handleDelete(record.id)}>
            <span style={{ color: '#1881DA', cursor: 'pointer' }}>删除</span>
          </Popconfirm>
        </Space>
      ),
    },
  ]
  return (
    <Table
      columns={columns}
      dataSource={jobList}
      bordered
      loading={dataLoading}
      pagination={{
        current: currentPage,
        total: dataTotal,
        pageSize: currentPageSize,
        onChange: pageChange,
      }}
    />
  )
}