smallstonesk
4 years ago
8 changed files with 156 additions and 16 deletions
@ -0,0 +1,17 @@ |
|||||
|
.editModal { |
||||
|
|
||||
|
.content { |
||||
|
|
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: space-between; |
||||
|
height: 436px; |
||||
|
|
||||
|
.half { |
||||
|
display: flex; |
||||
|
flex: 1; |
||||
|
flex-direction: column; |
||||
|
overflow: scroll; |
||||
|
} |
||||
|
} |
||||
|
} |
@ -0,0 +1,116 @@ |
|||||
|
import React, { |
||||
|
useState, |
||||
|
useEffect, |
||||
|
useCallback |
||||
|
} from 'react'; |
||||
|
|
||||
|
import styles from './index.module.less'; |
||||
|
|
||||
|
import { Graph } from '@antv/x6'; |
||||
|
import { Modal } from 'antd'; |
||||
|
import JsonView from 'react-json-view'; |
||||
|
import CodeEditor from '../../../../components/codeEditor'; |
||||
|
|
||||
|
interface IProps { |
||||
|
flowChart: Graph; |
||||
|
selectedCell: any; |
||||
|
} |
||||
|
|
||||
|
const TestCase: React.FC<IProps> = (props) => { |
||||
|
const { flowChart } = props; |
||||
|
const [visible, setVisible] = useState(false); |
||||
|
|
||||
|
useEffect(() => { |
||||
|
flowChart.on('settingBar:runCode', showModal); |
||||
|
return () => { |
||||
|
flowChart.off('settingBar:runCode', showModal); |
||||
|
}; |
||||
|
}, [flowChart]); |
||||
|
|
||||
|
const showModal = useCallback(() => setVisible(true), []); |
||||
|
const closeModal = useCallback(() => setVisible(false), []); |
||||
|
const runCode = useCallback(() => { |
||||
|
// TODO: 运行节点代码
|
||||
|
}, []); |
||||
|
|
||||
|
return ( |
||||
|
<EditModal |
||||
|
visible={visible} |
||||
|
onOk={runCode} |
||||
|
onCancel={closeModal} |
||||
|
/> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
interface IEditModalProps { |
||||
|
visible: boolean; |
||||
|
onOk: () => void; |
||||
|
onCancel: () => void; |
||||
|
} |
||||
|
|
||||
|
// mock
|
||||
|
const defaultInputData = `const inputData = {
|
||||
|
// 上游数据
|
||||
|
pipe: { |
||||
|
|
||||
|
}, |
||||
|
// 公用数据
|
||||
|
context: { |
||||
|
|
||||
|
}, |
||||
|
// 通用数据
|
||||
|
payload: { |
||||
|
|
||||
|
} |
||||
|
}`;
|
||||
|
const mockRunResult = { |
||||
|
pipe: { |
||||
|
success: false, |
||||
|
message: '未登录' |
||||
|
}, |
||||
|
context: { |
||||
|
data: { |
||||
|
isLogin: false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const EditModal: React.FC<IEditModalProps> = (props): JSX.Element => { |
||||
|
const { visible, onOk, onCancel } = props; |
||||
|
return ( |
||||
|
<Modal |
||||
|
className={styles.editModal} |
||||
|
width={800} |
||||
|
title={'运行代码'} |
||||
|
visible={visible} |
||||
|
okText={'运行一次'} |
||||
|
cancelText={null} |
||||
|
onOk={onOk} |
||||
|
onCancel={onCancel} |
||||
|
> |
||||
|
<div className={styles.content}> |
||||
|
<div className={styles.half}> |
||||
|
<p>输入:</p> |
||||
|
<CodeEditor |
||||
|
width={'350px'} |
||||
|
height={'400px'} |
||||
|
value={defaultInputData} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className={styles.half}> |
||||
|
<p>输出:</p> |
||||
|
<JsonView |
||||
|
name={null} |
||||
|
collapsed={false} |
||||
|
enableClipboard={false} |
||||
|
displayDataTypes={false} |
||||
|
displayObjectSize={false} |
||||
|
src={mockRunResult} |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</Modal> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default TestCase; |
Loading…
Reference in new issue