123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263 |
- import { apiInterceptors, getFlows } from '@/client/api';
- import PreviewFlow from '@/components/flow/preview-flow';
- import { IFlowResponse } from '@/types/flow';
- import { useRequest } from 'ahooks';
- import { Form, Select } from 'antd';
- import cls from 'classnames';
- import React, { useEffect, useMemo } from 'react';
- import { useTranslation } from 'react-i18next';
- const AwelLayout: React.FC<{
- initValue: any;
- updateData: (data: any) => void;
- classNames?: string;
- }> = ({ initValue, updateData, classNames }) => {
- const { t } = useTranslation();
- const [form] = Form.useForm();
- const flow = Form.useWatch('flow', form);
- const { data, loading } = useRequest(async () => {
- const [, res] = await apiInterceptors(
- getFlows({
- page: 1,
- page_size: 10000,
- }),
- );
- form.setFieldsValue({ flow: initValue?.name });
- return res ?? ({} as IFlowResponse);
- });
- const flowOptions = useMemo(() => {
- return (
- data?.items?.map((item: any) => ({
- label: item.label,
- value: item.name,
- })) || []
- );
- }, [data]);
- const flowData = useMemo(() => {
- return data?.items?.find((item: any) => item.name === flow)?.flow_data;
- }, [data?.items, flow]);
- useEffect(() => {
- updateData([loading, data?.items?.find((item: any) => item.name === flow)]);
- }, [data?.items, flow, loading, updateData]);
- return (
- <div className={cls(classNames, 'mb-6')}>
- <Form form={form} style={{ width: '100%' }}>
- <Form.Item label={t('select_workflow')} name='flow'>
- <Select className='w-1/4' placeholder={t('please_select_workflow')} options={flowOptions} allowClear />
- </Form.Item>
- {flowData && (
- <div className='w-full h-[600px] mx-auto border-[0.5px] border-dark-gray'>
- <PreviewFlow flowData={flowData} />
- </div>
- )}
- </Form>
- </div>
- );
- };
- export default AwelLayout;
|