74 lines
3.8 KiB
JavaScript
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; |