update pipeline module

4.0
vapao 2023-03-12 23:41:49 +08:00
parent 3aa5e8fe66
commit 29fe6e0742
4 changed files with 32 additions and 22 deletions

View File

@ -5,32 +5,51 @@
*/ */
import React, { useState } from 'react'; import React, { useState } from 'react';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import { Button, Form, Upload } from 'antd'; import { Button, Form, Upload, message } from 'antd';
import { ArrowRightOutlined, UploadOutlined } from '@ant-design/icons'; import { ThunderboltOutlined, UploadOutlined } from '@ant-design/icons';
import Parameter from '../modules/Parameter'; import Parameter from '../modules/Parameter';
import { http, X_TOKEN } from 'libs'; import { http, X_TOKEN } from 'libs';
import S from './store'; import S from './store';
import lds from 'lodash';
function Ask(props) { function Ask(props) {
const [form] = Form.useForm(); const [form] = Form.useForm();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
function handleOk() { function handleOk() {
const params = form.getFieldsValue(); const data = form.getFieldsValue();
const params = {};
for (let item of S.dynamicParams) {
if (item.required && lds.isEmpty(data[item.variable])) {
message.error(`请设置参数 ${item.name}`);
return
}
if (item.type !== 'upload') params[item.variable] = data[item.variable]
}
setLoading(true) setLoading(true)
http.patch('/api/pipeline/do/', {id: 1, token: S.token, params}) http.patch('/api/pipeline/do/', {id: S.record.id, token: S.token, params})
.then(res => { .then(res => {
S.dynamicParams = null S.dynamicParams = null
}) }, () => setLoading(false))
.finally(() => setLoading(false)) }
function beforeUpload(file, size) {
if (size) {
const fileSize = file.size / 1024 / 1024;
if (fileSize > size) {
message.error(`上传文件大小不能超过 ${size}MB`);
return Upload.LIST_IGNORE;
}
}
} }
return ( return (
<Form form={form} labelCol={{span: 6}} wrapperCol={{span: 16}}> <Form form={form} labelCol={{span: 6}} wrapperCol={{span: 16}}>
{(S.dynamicParams ?? []).map((item, idx) => item.type === 'upload' ? ( {(S.dynamicParams ?? []).map((item, idx) => item.type === 'upload' ? (
<Form.Item key={idx} required label={item.name}> <Form.Item key={idx} required name={item.variable} label={item.name} valuePropName="fileList"
<Upload multiple action="/api/pipeline/upload/" headers={{'X-Token': X_TOKEN}} getValueFromEvent={e => Array.isArray(e) ? e : e?.fileList}>
data={{token: S.token, id: item.id}}> <Upload multiple accept={item.accept} action="/api/pipeline/upload/" headers={{'X-Token': X_TOKEN}}
data={{token: S.token, id: item.variable}} beforeUpload={file => beforeUpload(file, item.size)}>
<Button icon={<UploadOutlined/>}>点击上传</Button> <Button icon={<UploadOutlined/>}>点击上传</Button>
</Upload> </Upload>
</Form.Item> </Form.Item>
@ -40,7 +59,7 @@ function Ask(props) {
</Form.Item> </Form.Item>
))} ))}
<Form.Item wrapperCol={{offset: 6, span: 16}}> <Form.Item wrapperCol={{offset: 6, span: 16}}>
<Button icon={<ArrowRightOutlined/>} loading={loading} type="primary" onClick={handleOk}>下一步</Button> <Button icon={<ThunderboltOutlined/>} loading={loading} type="primary" onClick={handleOk}>开始执行</Button>
</Form.Item> </Form.Item>
</Form> </Form>
) )

View File

@ -78,7 +78,6 @@ function Body() {
} }
} }
socket.onerror = () => setWSState('2') socket.onerror = () => setWSState('2')
socket.onclose = () => setWSState('2')
return () => socket && socket.close() return () => socket && socket.close()
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, []) }, [])

View File

@ -14,20 +14,18 @@ import css from './index.module.less';
function Index() { function Index() {
function handleClose() { function handleClose() {
S.open = false S.record = null
S.dynamicParams = null
} }
return ( return (
<Modal <Modal
open={S.open} open={S.record}
width={S.dynamicParams ? '540px' : '80%'} width={S.dynamicParams ? '540px' : '80%'}
title={S.dynamicParams ? '执行参数设置' : '执行控制台'} title={S.dynamicParams ? '执行参数设置' : '执行控制台'}
footer={null} footer={null}
destroyOnClose destroyOnClose
maskClosable={false} maskClosable={false}
wrapClassName={css.fade} wrapClassName={css.fade}
afterClose={S.initial}
onCancel={handleClose}> onCancel={handleClose}>
{S.dynamicParams ? ( {S.dynamicParams ? (
<Ask/> <Ask/>

View File

@ -9,7 +9,7 @@ import { transfer } from '../utils';
class Store { class Store {
host_id = null; host_id = null;
@observable token = null; @observable token = null;
@observable open = false; @observable record = null;
@observable node = {}; @observable node = {};
@observable nodes = []; @observable nodes = [];
@observable outputs = {}; @observable outputs = {};
@ -22,12 +22,6 @@ class Store {
@computed get matrixNodes() { @computed get matrixNodes() {
return transfer(this.nodes) return transfer(this.nodes)
} }
initial = () => {
this.node = {}
this.nodes = []
this.outputs = {}
}
} }
export default new Store() export default new Store()