mirror of
https://github.com/csunny/DB-GPT.git
synced 2025-07-31 15:47:05 +00:00
refactor: Update FlowTemplateModal component to use correct prop names
This commit is contained in:
谨欣
parent
21146bb40f
commit
95e119fa38
@ -1,18 +1,13 @@
|
||||
import { IFlowData, IFlowUpdateParam } from '@/types/flow';
|
||||
import { Button, Form, Input, Modal, Space, message,Table } from 'antd';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { ReactFlowInstance } from 'reactflow';
|
||||
import type { TableProps } from 'antd';
|
||||
|
||||
import { getFlowTemplates } from '@/client/api';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
import CanvasWrapper from '@/pages/construct/flow/canvas/index';
|
||||
import type { TableProps } from 'antd';
|
||||
import { Button, Modal, Space, Table } from 'antd';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
type Props = {
|
||||
isTemplateFlowModalOpen: boolean;
|
||||
setIsTemplateFlowModalOpen: (value: boolean) => void;
|
||||
isFlowTemplateModalOpen: boolean;
|
||||
setIsFlowTemplateModalOpen: (value: boolean) => void;
|
||||
};
|
||||
|
||||
interface DataType {
|
||||
@ -22,49 +17,57 @@ interface DataType {
|
||||
address: string;
|
||||
tags: string[];
|
||||
}
|
||||
export const TemplateFlowModa: React.FC<Props> = ({
|
||||
isTemplateFlowModalOpen,
|
||||
setIsTemplateFlowModalOpen,
|
||||
}) => {
|
||||
|
||||
export const FlowTemplateModal: React.FC<Props> = ({ isFlowTemplateModalOpen, setIsFlowTemplateModalOpen }) => {
|
||||
const { t } = useTranslation();
|
||||
const [dataSource, setDataSource] = useState([]);
|
||||
const ReferenceTemplate = (record: any,) => {
|
||||
|
||||
const onTemplateImport = (record: DataType) => {
|
||||
if (record?.name) {
|
||||
localStorage.setItem('importFlowData', JSON.stringify(record));
|
||||
CanvasWrapper()
|
||||
setIsTemplateFlowModalOpen(false);
|
||||
CanvasWrapper();
|
||||
setIsFlowTemplateModalOpen(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const columns: TableProps<DataType>['columns'] = [
|
||||
{
|
||||
title: t('BringName'),
|
||||
title: t('Template_Name'),
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title:t('BringAction'),
|
||||
title: t('Template_Action'),
|
||||
key: 'action',
|
||||
render: (_, record) => (
|
||||
<Space size="middle">
|
||||
<Button type="link" onClick={()=>{ReferenceTemplate(record)}} block>
|
||||
{t('BringTemplate')}
|
||||
<Space size='middle'>
|
||||
<Button
|
||||
type='link'
|
||||
onClick={() => {
|
||||
onTemplateImport(record);
|
||||
}}
|
||||
block
|
||||
>
|
||||
{t('Import_From_Template')}
|
||||
</Button>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
getFlowTemplates().then(res => {
|
||||
console.log(res);
|
||||
setDataSource(res?.data?.data?.items)
|
||||
setDataSource(res?.data?.data?.items);
|
||||
});
|
||||
},[])
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
title={t('LeadTemplate')}
|
||||
open={isTemplateFlowModalOpen}
|
||||
onCancel={() => setIsTemplateFlowModalOpen(false)}
|
||||
title={t('Import_From_Template')}
|
||||
open={isFlowTemplateModalOpen}
|
||||
onCancel={() => setIsFlowTemplateModalOpen(false)}
|
||||
cancelButtonProps={{ className: 'hidden' }}
|
||||
okButtonProps={{ className: 'hidden' }}
|
||||
>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
/* eslint-disable react-hooks/rules-of-hooks */
|
||||
import { metadataBatch } from '@/client/api';
|
||||
import { IFlowNodeParameter } from '@/types/flow';
|
||||
import { convertKeysToCamelCase } from '@/utils/flow';
|
||||
import { UploadOutlined } from '@ant-design/icons';
|
||||
@ -7,8 +8,6 @@ import { Button, Upload, message } from 'antd';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import { metadataBatch } from '@/client/api';
|
||||
|
||||
type Props = {
|
||||
formValuesChange: any;
|
||||
data: IFlowNodeParameter;
|
||||
@ -18,16 +17,16 @@ export const renderUpload = (params: Props) => {
|
||||
const { t } = useTranslation();
|
||||
const urlList = useRef<string[]>([]);
|
||||
const { data, formValuesChange } = params;
|
||||
const [fileList, setFileList] = useState<UploadFile[]>([])
|
||||
const [fileList, setFileList] = useState<UploadFile[]>([]);
|
||||
|
||||
// 获取上传文件元数据
|
||||
useEffect(() => {
|
||||
useEffect(() => {
|
||||
if (data.value) {
|
||||
let uris: string[] = [];
|
||||
typeof data.value === 'string' ? uris.push(data.value) : (uris = data.value);
|
||||
const parameter:any = {
|
||||
const parameter: any = {
|
||||
uris,
|
||||
}
|
||||
};
|
||||
metadataBatch(parameter)
|
||||
.then(res => {
|
||||
const urlList: UploadFile[] = [];
|
||||
|
||||
@ -6,15 +6,11 @@ export const FlowEn = {
|
||||
Open_Code_Editor: 'Open Code Editor',
|
||||
Export_Flow_Success: 'Export flow success',
|
||||
Import_Flow_Success: 'Import flow success',
|
||||
BringTemplate: 'Bring In Template',
|
||||
BringName: 'Bring Name',
|
||||
BringAction: 'Bring Action',
|
||||
Import: 'Import',
|
||||
Export: 'Export',
|
||||
Import_Flow: 'Import Flow',
|
||||
Export_Flow: 'Export Flow',
|
||||
Select_File: 'Select File',
|
||||
LeadTemplate: 'Lead-in template',
|
||||
Save_After_Import: 'Save after import',
|
||||
Export_File_Type: 'File_Type',
|
||||
Export_File_Format: 'File_Format',
|
||||
@ -25,4 +21,7 @@ export const FlowEn = {
|
||||
Add_Parameter: 'Add Parameter',
|
||||
Higher_Order_Nodes: 'Higher Order',
|
||||
All_Nodes: 'All',
|
||||
Import_From_Template: 'Import from template',
|
||||
Template_Name: 'Template Name',
|
||||
Template_Action: 'Action',
|
||||
};
|
||||
|
||||
@ -6,14 +6,10 @@ export const FlowZn = {
|
||||
Open_Code_Editor: '打开代码编辑器',
|
||||
Export_Flow_Success: '导出工作流成功',
|
||||
Import_Flow_Success: '导入工作流成功',
|
||||
BringTemplate: '引入模版',
|
||||
BringAction: '操作',
|
||||
Import: '导入',
|
||||
Export: '导出',
|
||||
BringName: '模版名称',
|
||||
Import_Flow: '导入工作流',
|
||||
Export_Flow: '导出工作流',
|
||||
LeadTemplate: '引入模版',
|
||||
Select_File: '选择文件',
|
||||
Save_After_Import: '导入后保存',
|
||||
Export_File_Type: '文件类型',
|
||||
@ -25,4 +21,7 @@ export const FlowZn = {
|
||||
Add_Parameter: '添加参数',
|
||||
Higher_Order_Nodes: '高阶',
|
||||
All_Nodes: '所有',
|
||||
Import_Template: '从模版导入',
|
||||
Template_Name: '模版名称',
|
||||
Template_Action: '操作',
|
||||
};
|
||||
|
||||
@ -5,9 +5,9 @@ import ButtonEdge from '@/components/flow/button-edge';
|
||||
import {
|
||||
AddFlowVariableModal,
|
||||
ExportFlowModal,
|
||||
FlowTemplateModal,
|
||||
ImportFlowModal,
|
||||
SaveFlowModal,
|
||||
TemplateFlowModa,
|
||||
} from '@/components/flow/canvas-modal';
|
||||
import CanvasNode from '@/components/flow/canvas-node';
|
||||
import { IFlowData, IFlowUpdateParam } from '@/types/flow';
|
||||
@ -49,7 +49,7 @@ const Canvas: React.FC = () => {
|
||||
const [isSaveFlowModalOpen, setIsSaveFlowModalOpen] = useState(false);
|
||||
const [isExportFlowModalOpen, setIsExportFlowModalOpen] = useState(false);
|
||||
const [isImportModalOpen, setIsImportFlowModalOpen] = useState(false);
|
||||
const [isTemplateFlowModalOpen, setIsTemplateFlowModalOpen] = useState(false);
|
||||
const [isFlowTemplateModalOpen, setIsFlowTemplateModalOpen] = useState(false);
|
||||
|
||||
if (localStorage.getItem('importFlowData')) {
|
||||
const importFlowData = JSON.parse(localStorage.getItem('importFlowData') || '');
|
||||
@ -198,27 +198,15 @@ const Canvas: React.FC = () => {
|
||||
setIsSaveFlowModalOpen(true);
|
||||
}
|
||||
|
||||
function onExport() {
|
||||
setIsExportFlowModalOpen(true);
|
||||
}
|
||||
|
||||
function onImport() {
|
||||
setIsImportFlowModalOpen(true);
|
||||
}
|
||||
|
||||
function onTemplate() {
|
||||
setIsTemplateFlowModalOpen(true);
|
||||
}
|
||||
|
||||
const getButtonList = () => {
|
||||
const buttonList = [
|
||||
{
|
||||
title: t('template'),
|
||||
icon: <FileAddOutlined className='block text-xl' onClick={onTemplate} />,
|
||||
icon: <FileAddOutlined className='block text-xl' onClick={() => setIsFlowTemplateModalOpen(true)} />,
|
||||
},
|
||||
{
|
||||
title: t('Import'),
|
||||
icon: <ImportOutlined className='block text-xl' onClick={onImport} />,
|
||||
icon: <ImportOutlined className='block text-xl' onClick={() => setIsImportFlowModalOpen(true)} />,
|
||||
},
|
||||
{
|
||||
title: t('save'),
|
||||
@ -229,7 +217,7 @@ const Canvas: React.FC = () => {
|
||||
if (id !== '') {
|
||||
buttonList.unshift({
|
||||
title: t('Export'),
|
||||
icon: <ExportOutlined className='block text-xl' onClick={onExport} />,
|
||||
icon: <ExportOutlined className='block text-xl' onClick={() => setIsExportFlowModalOpen(true)} />,
|
||||
});
|
||||
}
|
||||
|
||||
@ -304,9 +292,10 @@ const Canvas: React.FC = () => {
|
||||
isImportModalOpen={isImportModalOpen}
|
||||
setIsImportFlowModalOpen={setIsImportFlowModalOpen}
|
||||
/>
|
||||
<TemplateFlowModa
|
||||
isTemplateFlowModalOpen={isTemplateFlowModalOpen}
|
||||
setIsTemplateFlowModalOpen={setIsTemplateFlowModalOpen}
|
||||
|
||||
<FlowTemplateModal
|
||||
isFlowTemplateModalOpen={isFlowTemplateModalOpen}
|
||||
setIsFlowTemplateModalOpen={setIsFlowTemplateModalOpen}
|
||||
/>
|
||||
|
||||
{contextHolder}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user