Feat: Solved the problem that BeginForm would get stuck when modifying data #3221 (#8080)

### What problem does this PR solve?

Feat: Solved the problem that BeginForm would get stuck when modifying
data #3221
### Type of change


- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
2025-06-05 15:12:21 +08:00
committed by GitHub
parent ee52000870
commit 7c7359a9b2
3 changed files with 17 additions and 22 deletions

View File

@ -39,15 +39,9 @@ const BeginForm = ({ node }: INextOperatorForm) => {
const FormSchema = z.object({ const FormSchema = z.object({
enablePrologue: z.boolean().optional(), enablePrologue: z.boolean().optional(),
prologue: z prologue: z.string().trim().optional(),
.string()
.min(1, {
message: t('common.namePlaceholder'),
})
.trim()
.optional(),
mode: z.string(), mode: z.string(),
query: z inputs: z
.array( .array(
z.object({ z.object({
key: z.string(), key: z.string(),
@ -68,7 +62,7 @@ const BeginForm = ({ node }: INextOperatorForm) => {
useWatchFormChange(node?.id, form); useWatchFormChange(node?.id, form);
const query = useWatch({ control: form.control, name: 'query' }); const inputs = useWatch({ control: form.control, name: 'inputs' });
const mode = useWatch({ control: form.control, name: 'mode' }); const mode = useWatch({ control: form.control, name: 'mode' });
const enablePrologue = useWatch({ const enablePrologue = useWatch({
@ -160,7 +154,7 @@ const BeginForm = ({ node }: INextOperatorForm) => {
{/* Create a hidden field to make Form instance record this */} {/* Create a hidden field to make Form instance record this */}
<FormField <FormField
control={form.control} control={form.control}
name={'query'} name={'inputs'}
render={() => <div></div>} render={() => <div></div>}
/> />
<Collapse <Collapse
@ -183,7 +177,7 @@ const BeginForm = ({ node }: INextOperatorForm) => {
} }
> >
<QueryTable <QueryTable
data={query} data={inputs}
showModal={showModal} showModal={showModal}
deleteRecord={handleDeleteRecord} deleteRecord={handleDeleteRecord}
></QueryTable> ></QueryTable>

View File

@ -8,9 +8,9 @@ export function useUpdateQueryToNodeForm({ form, node }: INextOperatorForm) {
const updateNodeForm = useGraphStore((state) => state.updateNodeForm); const updateNodeForm = useGraphStore((state) => state.updateNodeForm);
const update = useCallback( const update = useCallback(
(query: BeginQuery[]) => { (inputs: BeginQuery[]) => {
const values = form.getValues(); const values = form.getValues();
const nextValues = { ...values, query }; const nextValues = { ...values, inputs };
if (node?.id) { if (node?.id) {
updateNodeForm(node.id, nextValues); updateNodeForm(node.id, nextValues);
} }
@ -28,19 +28,19 @@ export const useEditQueryRecord = ({ form, node }: INextOperatorForm) => {
const { update } = useUpdateQueryToNodeForm({ form, node }); const { update } = useUpdateQueryToNodeForm({ form, node });
const otherThanCurrentQuery = useMemo(() => { const otherThanCurrentQuery = useMemo(() => {
const query: BeginQuery[] = form?.getValues('query') || []; const inputs: BeginQuery[] = form?.getValues('inputs') || [];
return query.filter((item, idx) => idx !== index); return inputs.filter((item, idx) => idx !== index);
}, [form, index]); }, [form, index]);
const handleEditRecord = useCallback( const handleEditRecord = useCallback(
(record: BeginQuery) => { (record: BeginQuery) => {
const query: BeginQuery[] = form?.getValues('query') || []; const inputs: BeginQuery[] = form?.getValues('inputs') || [];
console.log('🚀 ~ useEditQueryRecord ~ query:', query); console.log('🚀 ~ useEditQueryRecord ~ inputs:', inputs);
const nextQuery: BeginQuery[] = const nextQuery: BeginQuery[] =
index > -1 ? query.toSpliced(index, 1, record) : [...query, record]; index > -1 ? inputs.toSpliced(index, 1, record) : [...inputs, record];
form.setValue('query', nextQuery, { form.setValue('inputs', nextQuery, {
shouldDirty: true, shouldDirty: true,
shouldTouch: true, shouldTouch: true,
}); });
@ -63,12 +63,12 @@ export const useEditQueryRecord = ({ form, node }: INextOperatorForm) => {
const handleDeleteRecord = useCallback( const handleDeleteRecord = useCallback(
(idx: number) => { (idx: number) => {
const query = form?.getValues('query') || []; const inputs = form?.getValues('inputs') || [];
const nextQuery = query.filter( const nextQuery = inputs.filter(
(item: BeginQuery, index: number) => index !== idx, (item: BeginQuery, index: number) => index !== idx,
); );
form.setValue('query', nextQuery, { shouldDirty: true }); form.setValue('inputs', nextQuery, { shouldDirty: true });
update(nextQuery); update(nextQuery);
}, },

View File

@ -12,6 +12,7 @@ export function useValues(node?: RAGFlowNodeType) {
enablePrologue: true, enablePrologue: true,
prologue: t('chat.setAnOpenerInitial'), prologue: t('chat.setAnOpenerInitial'),
mode: AgentDialogueMode.Conversational, mode: AgentDialogueMode.Conversational,
inputs: [],
}), }),
[t], [t],
); );