your-workflow/frontend/src/pages/Flow/components/EditNode.jsx

74 lines
3.8 KiB
JavaScript

import { DrawerForm, ModalForm, ProFormDigit, ProFormGroup, ProFormSelect, ProFormText, ProFormTextArea } from "@ant-design/pro-components";
import { Button, Divider, Flex, Space, Typography } from "antd";
import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
import { tableList } from "../../../api/client";
const EditNode = forwardRef(({ onFinish }, ref) => {
const [open, setOpen] = useState(false);
const formRef = useRef(null);
const [record, setRecord] = useState(null);
const [clients, setClients] = useState([{ label: "Local", value: 'local' }]);
const onRequest = async () => {
const res = await tableList();
return [{label: "[LOCAL]", value: 0},...res?.data?.map(e => ({ label: e.name, value: e.id }))];
}
const onSubmit = async (params) => {
onFinish && onFinish({ ...params, id: record?.id})
return true;
}
useImperativeHandle(ref, () => ({
open: (data) => {
setOpen(true);
setTimeout(() => setRecord(data), 100);
}
}))
useEffect(() => {
if (record && formRef.current && open) {
formRef.current.setFieldsValue(record.detail);
}
}, [record, open, formRef.current]);
return <ModalForm
title="编辑"
open={open}
onOpenChange={e => setOpen(e)}
formRef={formRef}
onFinish={onSubmit}
modalProps={{ maskClosable: false, destroyOnHidden: true }}
>
<Divider orientation="left">基础信息</Divider>
<ProFormGroup>
<ProFormText name='uuid' disabled label='UUID' width='md'/>
<ProFormSelect label="节点" rules={[{ required: true }]} name={["detail", "client"]} options={clients} request={onRequest} width='md' />
<ProFormSelect label="是否 Root" rules={[{ required: true }]} name={["detail", "sudo"]} options={[{ "label": "True", "value": true }, { "label": "False", "value": false, }]} width='md' />
<ProFormText name='title' rules={[{ required: true }]} label='标题' fieldProps={{ maxLength: 20 }} width='md' />
<ProFormText fieldProps={{ maxLength: 50 }} name='description' label='描述' width="md" />
<div style={{ display: 'none'}}>
<ProFormText name='type' label='描述'/>
</div>
</ProFormGroup>
{record?.type === 'git' && <>
<Divider orientation="left">Git</Divider>
<ProFormGroup>
<ProFormText name={["detail", "git_url"]} rules={[{ required: true }]} label='地址' width="md" />
<ProFormText name={["detail", "git_branch"]} rules={[{ required: true }]} label='分支' width='md' />
<ProFormSelect name={["detail", "git_clone_type"]} rules={[{ required: true }]} label='协议' width='md' options={["http/https"]} />
<ProFormDigit name={["detail", "git_clone_depth"]} rules={[{ required: true }]} label='Depth' width='md' />
<ProFormText name={["detail", "git_path"]} rules={[{ required: true }]} label='路径' width="md" />
<ProFormText name={["detail", "git_user"]} rules={[{ required: true }]} label='帐号' width='md' />
<ProFormText.Password name={["detail", "git_password"]} rules={[{ required: true }]} label='密码' width='md' />
</ProFormGroup>
</>}
{record?.type === 'cmd' && <>
<Divider orientation="left">命令</Divider>
<ProFormTextArea fieldProps={{ rows: 10 }} name={["detail", "cmd"]} rules={[{ required: true }]} label='命令' width={690} />
</>}
{record?.type === 'status' && <>
<Divider orientation="left">健康监测</Divider>
<ProFormText name={["detail", "status_url"]} rules={[{ required: true }]} label='检测地址' width={690} />
</>}
</ModalForm>
})
export default EditNode;