146 lines
5.1 KiB
JavaScript
146 lines
5.1 KiB
JavaScript
import React, {useEffect, useState} from 'react';
|
|
import {Form, Input, Modal, Radio, Select, Spin} from "antd";
|
|
import jobApi from "../../api/job";
|
|
import assetApi from "../../api/asset";
|
|
|
|
const {TextArea} = Input;
|
|
|
|
const JobModal = ({
|
|
visible,
|
|
handleOk,
|
|
handleCancel,
|
|
confirmLoading,
|
|
id,
|
|
}) => {
|
|
|
|
const [form] = Form.useForm();
|
|
|
|
let [func, setFunc] = useState('shell-job');
|
|
let [mode, setMode] = useState('all');
|
|
let [resources, setResources] = useState([]);
|
|
let [resourcesLoading, setResourcesLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
setResourcesLoading(true);
|
|
let result = await assetApi.GetAll('ssh');
|
|
setResources(result);
|
|
setResourcesLoading(false);
|
|
};
|
|
|
|
fetchData();
|
|
|
|
const getItem = async () => {
|
|
let data = await jobApi.getById(id);
|
|
if (data) {
|
|
form.setFieldsValue(data);
|
|
setMode(data['mode']);
|
|
setFunc(data['func']);
|
|
}
|
|
}
|
|
|
|
if (visible && id) {
|
|
getItem();
|
|
} else {
|
|
form.setFieldsValue({
|
|
func: 'shell-job',
|
|
mode: 'all',
|
|
});
|
|
}
|
|
|
|
}, [visible]);
|
|
|
|
const formItemLayout = {
|
|
labelCol: {span: 6},
|
|
wrapperCol: {span: 14},
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
title={id ? '更新计划任务' : '新建计划任务'}
|
|
visible={visible}
|
|
maskClosable={false}
|
|
destroyOnClose={true}
|
|
onOk={() => {
|
|
form
|
|
.validateFields()
|
|
.then(async values => {
|
|
let ok = await handleOk(values);
|
|
if (ok) {
|
|
form.resetFields();
|
|
}
|
|
});
|
|
}}
|
|
onCancel={() => {
|
|
form.resetFields();
|
|
handleCancel();
|
|
}}
|
|
confirmLoading={confirmLoading}
|
|
okText='确定'
|
|
cancelText='取消'
|
|
>
|
|
|
|
<Form form={form} {...formItemLayout}>
|
|
<Form.Item name='id' noStyle>
|
|
<Input hidden={true}/>
|
|
</Form.Item>
|
|
|
|
<Form.Item label="任务类型" name='func' rules={[{required: true, message: '请选择任务类型'}]}>
|
|
<Select onChange={(value) => {
|
|
setFunc(value);
|
|
}}>
|
|
<Select.Option value="shell-job">Shell脚本</Select.Option>
|
|
<Select.Option value="check-asset-status-job">资产状态检测</Select.Option>
|
|
</Select>
|
|
</Form.Item>
|
|
|
|
<Form.Item label="任务名称" name='name' rules={[{required: true, message: '请输入任务名称'}]}>
|
|
<Input autoComplete="off" placeholder="请输入任务名称"/>
|
|
</Form.Item>
|
|
|
|
{
|
|
func === 'shell-job' ?
|
|
<Form.Item label="Shell脚本" name='shell' rules={[{required: true, message: '请输入Shell脚本'}]}>
|
|
<TextArea autoSize={{minRows: 5, maxRows: 10}} placeholder="在此处填写Shell脚本内容"/>
|
|
</Form.Item> : undefined
|
|
}
|
|
|
|
<Form.Item label="cron表达式" name='cron' rules={[{required: true, message: '请输入cron表达式'}]}>
|
|
<Input placeholder="请输入cron表达式"/>
|
|
</Form.Item>
|
|
|
|
<Form.Item label="资产选择" name='mode' rules={[{required: true, message: '请选择资产'}]}>
|
|
<Radio.Group onChange={async (e) => {
|
|
setMode(e.target.value);
|
|
}}>
|
|
<Radio value={'all'}>全部资产</Radio>
|
|
<Radio value={'custom'}>自定义</Radio>
|
|
</Radio.Group>
|
|
</Form.Item>
|
|
|
|
{
|
|
mode === 'custom' ?
|
|
<Spin tip='加载中...' spinning={resourcesLoading}>
|
|
<Form.Item label="已选择资产" name='resourceIds' rules={[{required: true}]}>
|
|
<Select
|
|
mode="multiple"
|
|
allowClear
|
|
placeholder="请选择资产"
|
|
>
|
|
{
|
|
resources.map(item => {
|
|
return <Select.Option key={item['id']}>{item['name']}</Select.Option>
|
|
})
|
|
}
|
|
</Select>
|
|
</Form.Item>
|
|
</Spin>
|
|
: undefined
|
|
}
|
|
</Form>
|
|
</Modal>
|
|
)
|
|
};
|
|
|
|
export default JobModal;
|