feat: add DynamicParameters #918 (#1346)

### What problem does this PR solve? feat: add DynamicParameters #918 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
2024-07-03 12:00:56 +08:00
parent a7423e3a94
commit f6159ee4d3
8 changed files with 384 additions and 2 deletions
--- a/web/src/pages/flow/generate-form/next-dynamic-parameters.tsx
+++ b/web/src/pages/flow/generate-form/next-dynamic-parameters.tsx
@@ -0,0 +1,135 @@
+import { EditableCell, EditableRow } from '@/components/editable-cell';
+import { useTranslate } from '@/hooks/commonHooks';
+import { DeleteOutlined } from '@ant-design/icons';
+import { Button, Flex, Select, Table, TableProps } from 'antd';
+import { useEffect, useState } from 'react';
+import { v4 as uuid } from 'uuid';
+import { IGenerateParameter } from '../interface';
+
+import { Operator } from '../constant';
+import { useBuildFormSelectOptions } from '../form-hooks';
+import styles from './index.less';
+
+interface IProps {
+  nodeId?: string;
+}
+
+const components = {
+  body: {
+    row: EditableRow,
+    cell: EditableCell,
+  },
+};
+
+const DynamicParameters = ({ nodeId }: IProps) => {
+  const [dataSource, setDataSource] = useState<IGenerateParameter[]>([]);
+  const { t } = useTranslate('flow');
+
+  const buildCategorizeToOptions = useBuildFormSelectOptions(
+    Operator.Generate,
+    nodeId,
+  );
+
+  const handleRemove = (id?: string) => () => {
+    const newData = dataSource.filter((item) => item.id !== id);
+    setDataSource(newData);
+  };
+
+  const handleAdd = () => {
+    setDataSource((state) => [
+      ...state,
+      {
+        id: uuid(),
+        key: '',
+        component_id: undefined,
+      },
+    ]);
+  };
+
+  const handleSave = (row: IGenerateParameter) => {
+    const newData = [...dataSource];
+    const index = newData.findIndex((item) => row.id === item.id);
+    const item = newData[index];
+    newData.splice(index, 1, {
+      ...item,
+      ...row,
+    });
+    setDataSource(newData);
+  };
+
+  useEffect(() => {}, [dataSource]);
+
+  const handleOptionalChange = (row: IGenerateParameter) => (value: string) => {
+    const newData = [...dataSource];
+    const index = newData.findIndex((item) => row.id === item.id);
+    const item = newData[index];
+    newData.splice(index, 1, {
+      ...item,
+      component_id: value,
+    });
+    setDataSource(newData);
+  };
+
+  const columns: TableProps<IGenerateParameter>['columns'] = [
+    {
+      title: t('key'),
+      dataIndex: 'key',
+      key: 'key',
+      onCell: (record: IGenerateParameter) => ({
+        record,
+        editable: true,
+        dataIndex: 'key',
+        title: 'key',
+        handleSave,
+      }),
+    },
+    {
+      title: t('componentId'),
+      dataIndex: 'component_id',
+      key: 'component_id',
+      align: 'center',
+      render(text, record) {
+        return (
+          <Select
+            style={{ width: '100%' }}
+            allowClear
+            options={buildCategorizeToOptions([])}
+            // onChange={handleSelectChange(
+            //   form.getFieldValue(['parameters', field.name, 'key']),
+            // )}
+          />
+        );
+      },
+    },
+    {
+      title: t('operation'),
+      dataIndex: 'operation',
+      width: 20,
+      key: 'operation',
+      align: 'center',
+      render(_, record) {
+        return <DeleteOutlined onClick={handleRemove(record.id)} />;
+      },
+    },
+  ];
+
+  return (
+    <section>
+      <Flex justify="end">
+        <Button size="small" onClick={handleAdd}>
+          {t('add')}
+        </Button>
+      </Flex>
+      <Table
+        dataSource={dataSource}
+        columns={columns}
+        rowKey={'id'}
+        className={styles.variableTable}
+        components={components}
+        rowClassName={() => styles.editableRow}
+      />
+    </section>
+  );
+};
+
+export default DynamicParameters;