ci4sManagement-cloud/react-ui/src/pages/Pipeline/index.jsx

import KFIcon from '@/components/KFIcon';
import {
  addWorkflow,
  cloneWorkflow,
  editWorkflow,
  getWorkflow,
  getWorkflowById,
  removeWorkflow,
} from '@/services/pipeline/index.js';
import themes from '@/styles/theme.less';
import { modalConfirm } from '@/utils/ui';
import { Button, ConfigProvider, Form, Input, Modal, Space, Table, message } from 'antd';
import momnet from 'moment';
import { useEffect, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import Styles from './index.less';
const { TextArea } = Input;

const Pipeline = () => {
  const [form] = Form.useForm();
  const navgite = useNavigate();

  const [formId, setFormId] = useState(null);
  const [dialogTitle, setDialogTitle] = useState('新建流水线');
  const [pipeList, setPipeList] = useState([]);
  const [total, setTotal] = useState(0);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const editTable = (e, record) => {
    e.stopPropagation();
    getWorkflowById(record.id).then((ret) => {
      if (ret.code === 200) {
        form.resetFields();
        form.setFieldsValue({ ...ret.data });
        setFormId(ret.data.id);
        setDialogTitle('编辑流水线');
        setIsModalOpen(true);
      }
    });
  };
  const routeToEdit = (e, record) => {
    e.stopPropagation();
    navgite({ pathname: `/pipeline/pytorchtext/${record.id}/${record.name}` });
  };
  const showModal = () => {
    form.resetFields();
    setDialogTitle('新建流水线');
    setIsModalOpen(true);
  };
  const handleOk = () => {
    console.log(1111);
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const onFinish = (values) => {
    if (formId) {
      editWorkflow({ ...values, id: formId }).then((ret) => {
        message.success('编辑成功');
        getList();
        setIsModalOpen(false);
      });
    } else {
      addWorkflow(values).then((ret) => {
        console.log(ret);
        if (ret.code == 200) {
          navgite({ pathname: `/pipeline/pytorchtext/${ret.data.id}/${ret.data.name}` });
        }
      });
    }
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  const pageOption = useRef({ page: 1, size: 10 });
  const paginationProps = {
    showQuickJumper: true,
    showTotal: () => `共${total}条`,
    total: total,
    page: pageOption.current.page,
    size: pageOption.current.size,
    onChange: (current, size) => paginationChange(current, size),
  };
  // 当前页面切换
  const paginationChange = async (current, size) => {
    console.log('page', current, size);
    pageOption.current = {
      page: current,
      size: size,
    };
    getList();
  };
  const getList = () => {
    let params = {
      offset: 1,
      page: pageOption.current.page - 1,
      size: pageOption.current.size,
    };
    console.log(params, pageOption);
    getWorkflow(params).then((ret) => {
      if (ret.code == 200) {
        setPipeList(ret.data.content);

        setTotal(ret.data.totalElements);
      }
    });
  };
  useEffect(() => {
    getList();
  }, []);
  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      width: 140,
      align: 'center',
      render(text, record, index) {
        return <span>{(pageOption.current.page - 1) * 10 + index + 1}</span>;
      },
      // render: (text, record, index) =>  `${((curPage-1)*10)+(index+1)}`,
    },
    {
      title: '流水线名称',
      dataIndex: 'name',
      key: 'name',
      render: (text, record) => <a onClick={(e) => routeToEdit(e, record)}>{text}</a>,
    },
    {
      title: '流水线描述',
      dataIndex: 'description',
      key: 'description',
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      key: 'create_time',
      render: (text) => <span>{momnet(text).format('YYYY-MM-DD HH:mm:ss')}</span>,
    },
    {
      title: '修改时间',
      dataIndex: 'update_time',
      key: 'update_time',
      render: (text) => <span>{momnet(text).format('YYYY-MM-DD HH:mm:ss')}</span>,
    },
    {
      title: '操作',
      key: 'action',
      width: 320,

      render: (_, record) => (
        <Space size="small">
          <Button
            type="link"
            size="small"
            key="edit"
            icon={<KFIcon type="icon-bianji" />}
            onClick={(e) => {
              editTable(e, record);
            }}
          >
            编辑
          </Button>
          <Button
            type="link"
            size="small"
            key="clone"
            icon={<KFIcon type="icon-fuzhi" />}
            onClick={async () => {
              Modal.confirm({
                title: '复制',
                content: '确定复制该条流水线吗？',
                okText: '确认',
                cancelText: '取消',
                onOk: () => {
                  console.log(record);
                  cloneWorkflow(record.id).then((ret) => {
                    if (ret.code === 200) {
                      message.success('复制成功');
                      getList();
                    } else {
                      message.error('复制失败');
                    }
                  });

                  // if (success) {
                  //   if (actionRef.current) {
                  //     actionRef.current.reload();
                  //   }
                  // }
                },
              });
            }}
          >
            复制
          </Button>
          <ConfigProvider
            theme={{
              token: {
                colorLink: themes['warningColor'],
              },
            }}
          >
            <Button
              type="link"
              size="small"
              key="batchRemove"
              icon={<KFIcon type="icon-shanchu" />}
              onClick={() => {
                modalConfirm({
                  title: '删除后，该流水线将不可恢复',
                  content: '是否确认删除?',
                  onOk: () => {
                    console.log(record);
                    removeWorkflow(record.id).then((ret) => {
                      if (ret.code === 200) {
                        message.success('删除成功');
                        getList();
                      } else {
                        message.error(ret.msg);
                      }
                    });

                    // if (success) {
                    //   if (actionRef.current) {
                    //     actionRef.current.reload();
                    //   }
                    // }
                  },
                });
              }}
            >
              删除
            </Button>
          </ConfigProvider>
        </Space>
      ),
    },
  ];
  return (
    <div>
      <div className={Styles.pipelineTopBox}>
        <Button type="default" onClick={showModal} icon={<KFIcon type="icon-xinjian2" />}>
          新建流水线
        </Button>
      </div>
      <Table columns={columns} dataSource={pipeList} pagination={paginationProps} rowKey="id" />
      <Modal
        title={
          <div style={{ display: 'flex', alignItems: 'center', fontWeight: 500 }}>
            <img
              style={{ width: '20px', marginRight: '10px' }}
              src={`/assets/images/pipeline-edit-icon.png`}
              alt=""
            />
            {dialogTitle}
          </div>
        }
        open={isModalOpen}
        className={Styles.modal}
        okButtonProps={{
          htmlType: 'submit',
          form: 'form',
        }}
        onCancel={handleCancel}
      >
        <Form
          name="form"
          form={form}
          layout="vertical"
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="流水线名称"
            name="name"
            rules={[
              {
                required: true,
                message: '请输入流水线名称',
              },
            ]}
          >
            <Input placeholder="请输入流水线名称" showCount maxLength={64} />
          </Form.Item>
          <Form.Item
            label="流水线描述"
            name="description"
            rules={[
              {
                required: true,
                message: '请输入流水线描述',
              },
            ]}
          >
            <Input placeholder="请输入流水线描述" showCount maxLength={128} />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};
export default Pipeline;