fix: 001

packages/li-editor/src/widgets/FetchDataset/FetchDataset.less

@@ -1,3 +1,5 @@
 .li-fetch-dataset {
   width: 800px;
+  min-height: 600px;
+  overflow-y: auto;
 }

packages/li-editor/src/widgets/FetchDataset/FetchDataset.tsx

@@ -7,6 +7,7 @@ import DynamicFormItem from './DynamicFormItem';
 import './FetchDataset.less';
 import { getProperties } from './helper';
 import type { FetchDatasetConfig } from './types';
+import ProcessingFunction from './ProcessingFunction';
 
 type FetchDatasetProps = ImplementEditorAddDatasetWidgetProps;
 
@@ -18,8 +19,18 @@ export default function FetchDataset(props: FetchDatasetProps) {
   const implementDatasetService = appService.getImplementService('GET_FETCH_DATA_LIST');
   const canAddDataset = datasetConfig && datasetConfig.name && datasetConfig.url && datasetConfig.method;
 
-  const onFormChange = (_: any, allValues: FetchDatasetConfig) => {
-    setDatasetConfig(allValues);
+  const onFormChange = (
+    _: any,
+    allValues: FetchDatasetConfig & {
+      processingFunction: {
+        onComplete?: { type: 'JSFunction'; value: string };
+        onError?: { type: 'JSFunction'; value: string };
+      };
+    },
+  ) => {
+    const { processingFunction, ...others } = allValues;
+    const { onComplete, onError } = processingFunction;
+    setDatasetConfig({ ...others, onComplete, onError });
   };
 
   const onAddTileset = async () => {
@@ -84,6 +95,10 @@ export default function FetchDataset(props: FetchDatasetProps) {
           <Form.Item label="请求头信息" name="headers">
             <DynamicFormItem fieldName="headers" />
           </Form.Item>
+
+          <Form.Item label="数据处理函数" name="processingFunction" style={{ height: 200 }}>
+            <ProcessingFunction />
+          </Form.Item>
         </Form>
       </div>
       <div className="li-fetch-dataset__footer ant-modal-footer">

packages/li-editor/src/widgets/FetchDataset/ProcessingFunction/helper.ts

@@ -0,0 +1,21 @@
+import type { FuncItem } from './index';
+
+export const getValue = (funList: FuncItem[]) => {
+  const funs: Record<string, any> = {};
+
+  funList.forEach((item) => {
+    if (item.key === 'success-func') {
+      funs.onComplete = {
+        value: item.value.toString(),
+        type: 'JSFunction',
+      };
+    } else {
+      funs.onError = {
+        value: item.value.toString(),
+        type: 'JSFunction',
+      };
+    }
+  });
+
+  return funs;
+};

packages/li-editor/src/widgets/FetchDataset/ProcessingFunction/index.less

@@ -0,0 +1,26 @@
+@import '../../../theme/index.less';
+
+.li-provessing-function {
+  &__success-and-err {
+    &__content {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &-json {
+        height: 80px;
+        background-color: '#1e1e1e';
+        flex: 1;
+      }
+
+      &-icon {
+        width: 30px;
+        text-align: center;
+
+        &:hover {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}

packages/li-editor/src/widgets/FetchDataset/ProcessingFunction/index.tsx

@@ -0,0 +1,124 @@
+import { DownOutlined, MinusCircleOutlined } from '@ant-design/icons';
+import MonacoEditor from '@monaco-editor/react';
+import { Button, Dropdown } from 'antd';
+import React, { useRef, useState } from 'react';
+import { getValue } from './helper';
+import './index.less';
+
+type ProcessingFunctionProps = {
+  onChange?: (funs: {
+    onComplete?: { type: string; value: string };
+    onError?: { type: string; value: string };
+  }) => void;
+};
+
+export type FuncItem = { name: string; value: any; key: string };
+
+const ItemList = [
+  {
+    key: 'success-func',
+    label: '请求成功对结果的处理函数',
+  },
+  {
+    key: 'error-func',
+    label: '请求失败对异常的处理函数',
+  },
+];
+
+const ProcessingFunction = (props: ProcessingFunctionProps) => {
+  const { onChange } = props;
+  const [menus, setMenus] = useState(ItemList);
+  const functionListRef = useRef<FuncItem[]>([]);
+
+  const onFunctionListChange = (list: FuncItem[]) => {
+    functionListRef.current = [...list];
+
+    const funs = getValue(list);
+    if (onChange) {
+      onChange(funs);
+    }
+
+    const selectedKeys: string[] = list.map((item) => item.key);
+    const _items = ItemList.filter(
+      (item) => item && item.key && typeof item.key === 'string' && !selectedKeys.includes(item.key),
+    );
+    setMenus(_items);
+  };
+
+  const onAddFunc = (val: { key: string; label: string }) => {
+    const _item =
+      val.key === 'success-func'
+        ? {
+            name: val.label,
+            value: 'function(res) { return res.data }',
+            key: val.key,
+          }
+        : {
+            name: val.label,
+            value: 'function(err) {}',
+            key: val.key,
+          };
+
+    const _funcList = [...functionListRef.current, _item];
+    onFunctionListChange(_funcList);
+  };
+
+  const onDel = (key: string) => {
+    const _funcList = functionListRef.current.filter((item) => item.key !== key);
+    onFunctionListChange(_funcList);
+  };
+
+  const handleEditorChange = (fun: any, key: string) => {
+    const _functionList = functionListRef.current.map((item) => (item.key === key ? { ...item, value: fun } : item));
+    const funs = getValue(_functionList);
+    if (onChange) {
+      onChange(funs);
+    }
+    functionListRef.current = _functionList;
+  };
+
+  return (
+    <div className="li-provessing-function">
+      <div className="li-provessing-function__btn">
+        <Dropdown menu={{ items: menus.map((item) => ({ ...item, onClick: () => onAddFunc(item) })) }}>
+          <Button>
+            选择添加 <DownOutlined />
+          </Button>
+        </Dropdown>
+      </div>
+
+      {functionListRef.current.map((item: FuncItem) => {
+        return (
+          <div className="li-provessing-function__success-and-err" key={item.key}>
+            <p>{item.name}:</p>
+            <div className="li-provessing-function__success-and-err__content">
+              <div className="li-provessing-function__success-and-err__content-json">
+                <MonacoEditor
+                  language="json"
+                  options={{
+                    readOnly: false,
+                    minimap: { enabled: false },
+                    lineNumbers: 'off',
+                    overviewRulerBorder: false,
+                  }}
+                  onChange={(fun) => handleEditorChange(fun, item.key)}
+                  theme="vs-dark"
+                  value={item.value}
+                />
+              </div>
+              <div className="li-provessing-function__success-and-err__content-icon">
+                <MinusCircleOutlined
+                  onClick={() => {
+                    onDel(item.key);
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default ProcessingFunction;