feat: Add input parameter to begin operator #3355 (#3375)

### What problem does this PR solve?

feat: Add input parameter to begin operator #3355

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/flow/form/begin-form/paramater-modal.tsx

@@ -0,0 +1,113 @@
+import { useResetFormOnCloseModal } from '@/hooks/logic-hooks';
+import { IModalProps } from '@/interfaces/common';
+import { Form, Input, Modal, Select, Switch } from 'antd';
+import { DefaultOptionType } from 'antd/es/select';
+import { useEffect, useMemo } from 'react';
+import { BeginQueryType } from '../../constant';
+import { BeginQuery } from '../../interface';
+import BeginDynamicOptions from './begin-dynamic-options';
+
+export const ModalForm = ({
+  visible,
+  initialValue,
+  hideModal,
+  otherThanCurrentQuery,
+}: IModalProps<BeginQuery> & {
+  initialValue: BeginQuery;
+  otherThanCurrentQuery: BeginQuery[];
+}) => {
+  const [form] = Form.useForm();
+  const options = useMemo(() => {
+    return Object.values(BeginQueryType).reduce<DefaultOptionType[]>(
+      (pre, cur) => {
+        return [
+          ...pre,
+          {
+            label: cur,
+            value: cur,
+          },
+        ];
+      },
+      [],
+    );
+  }, []);
+
+  useResetFormOnCloseModal({
+    form,
+    visible: visible,
+  });
+
+  useEffect(() => {
+    form.setFieldsValue(initialValue);
+  }, [form, initialValue]);
+
+  const onOk = () => {
+    form.submit();
+  };
+
+  return (
+    <Modal
+      title="Begin query"
+      open={visible}
+      onOk={onOk}
+      onCancel={hideModal}
+      centered
+    >
+      <Form form={form} layout="vertical" name="queryForm" autoComplete="false">
+        <Form.Item
+          name="type"
+          label="Type"
+          rules={[{ required: true }]}
+          initialValue={BeginQueryType.Line}
+        >
+          <Select options={options} />
+        </Form.Item>
+        <Form.Item
+          name="key"
+          label="Key"
+          rules={[
+            { required: true },
+            () => ({
+              validator(_, value) {
+                if (
+                  !value ||
+                  !otherThanCurrentQuery.some((x) => x.key === value)
+                ) {
+                  return Promise.resolve();
+                }
+                return Promise.reject(new Error('The key cannot be repeated!'));
+              },
+            }),
+          ]}
+        >
+          <Input />
+        </Form.Item>
+        <Form.Item name="name" label="Name" rules={[{ required: true }]}>
+          <Input />
+        </Form.Item>
+        <Form.Item
+          name="optional"
+          label={'Optional'}
+          valuePropName="checked"
+          initialValue={false}
+        >
+          <Switch />
+        </Form.Item>
+        <Form.Item
+          shouldUpdate={(prevValues, curValues) =>
+            prevValues.type !== curValues.type
+          }
+        >
+          {({ getFieldValue }) => {
+            const type: BeginQueryType = getFieldValue('type');
+            return (
+              type === BeginQueryType.Options && (
+                <BeginDynamicOptions></BeginDynamicOptions>
+              )
+            );
+          }}
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};