ai-proj-demo/src/module/workmgmt/component/JobItems.jsx

/* eslint-disable jsx-a11y/anchor-is-valid */
import { Button, Form, Input, message, Popconfirm, Table } from 'antd';
import React, { useContext, useEffect, useRef, useState, props, useRoutes } from 'react';
import styled from 'styled-components'
import { Link } from 'react-router-dom';
import bus from '../../../bus.js'
import { getJobDataList, deleteJob, getJobInfo  } from '../services'
import {routes} from '../../../routes/index.js'
const EditableContext = React.createContext(null);
const FormItem = Form.Item

const JobItems = styled.div`
  background-color: #FFFFFF;
  height: 45vw;
  margin-left: 24px;
  .delButton {
  margin-left: 40px;
  }
  .ant-table-wrapper {
  margin-right: 12px;
  .ant-table {
  margin-left: 16px;
    }
  }
  
  `
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>
    );
  }

  return <td {...restProps}>{childNode}</td>;
};

const App = () => {
  //获取作业列表数据
  const getJobTables = async () => {
    const project_id = 'test'
    const { data } = await getJobDataList(project_id)
    if (data.code === 200) {
      const list = data.data.map(item => {
        return {
          key: item.id,
          name: item.name,
          type: item.type,
          tag: item.tag,
          create_time: item.create_time,
          update_time: item.update_time,
        }
      })
      setDataSource(list)
    }
  }
  


  // componentDidMount
  useEffect(() => {
    getJobTables()
  },[])
  const [dataSource, setDataSource] = useState();
  //   [
  //   {
  //     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 [JobData, setJobData] =useState()

  //删除作业
  const handleDelete = async (key) => {
    const { data } = await deleteJob(key)
    if (data.code === 200) {
      const newData = dataSource.filter((item) => item.key !== key);
      setDataSource(newData);
      message.success('删除成功');
    } else {
      message.error('删除失败')
    }
    
  };
  
  const editJobitem = async(key) => {
    const data = await getJobInfo(key)
    setJobData(data)
  }

  // 格式化事件
  const formatTime = time => {
    const date = new Date(Number(time) * 1000)
    const YY = date.getFullYear()
    const MM =
      date.getMonth() + 1 < 10
        ? '0' + (date.getMonth() + 1)
        : date.getMonth() + 1
    const DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
    const hh = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
    const mm =
      date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
    const ss =
      date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
    return YY + '-' + MM + '-' + DD + ' ' + hh + ':' + mm + ':' + ss
  }

  const defaultColumns = [
    {
      title: '作业名称',
      dataIndex: 'name',
      width: '16.6%',
    },
    {
      title: '作业类型',
      dataIndex: 'type',
      width: '16.6%',
    },
    {
      title: '作业分类',
      dataIndex: 'tag',
      width: '16.6%',

    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      width: '16.6%',
      render: time => formatTime(time),
    },
    {
      title: '更新时间',
      dataIndex: 'update_time',
      width: '16.6%',
      render: time => formatTime(time),
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: '16.6%',

      render: (_, record) =>
        dataSource.length >= 1 ? (
          <>
            <Link to={'/work-management/cre?data=' + JobData}>
              <Button onClick={() => editJobitem(record.key)}>
                编辑
              </Button>
            </Link>
            
            <Popconfirm 
            title="确认删除？" 
            okText="确认"
            cancelText="取消"
            onConfirm={() => handleDelete(record.key)}
            >
              <a className='delButton'>删除</a>
            </Popconfirm>
          </>
        ) : null,
          
    },
  ];
//创建作业

  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 components = {
    body: {
      row: EditableRow,
      cell: EditableCell,
    },
  };
  const columns = defaultColumns.map((col) => {
    if (!col.editable) {
      return col;
    }

    return {
      ...col,
      onCell: (record) => ({
        record,
        editable: col.editable,
        dataIndex: col.dataIndex,
        title: col.title,
        handleSave,
      }),
    };
  });
  useEffect (() => {
    bus.on('sendDataForm',data => {
      
    })
  },[])
  return (
    <JobItems>
      <Link to="/work-management/cre">
        <Button
        type="primary"
        style={{
          float: 'right',
          marginBottom: 16,
          marginTop: '18px',
          marginRight: '16px',
          fontSize: '12px',
        }}
      >
        创建作业
      </Button>
      </Link>
      
      <Table
        components={components}
        rowClassName={() => 'editable-row'}
        bordered
        dataSource={dataSource}
        columns={columns}
      />
    </JobItems>
  );
};

export default App;