fix: Close alibaba/lowcode-engine#783

twinkle77 · JackLian · commit 1623e8fdfb26 · 2022-08-05T09:37:31.000+08:00
diff --git a/demo/src/index.ts b/demo/src/index.ts
@@ -31,7 +31,7 @@ preference.set('DataSourcePane', {
                 type: "boolean",
               },
               timeout: {
-                type: "integer",
+                type: "number",
               },
               uri: {
                 type: "string",
diff --git a/packages/plugin-datasource-pane/src/components/DataSourceForm/DataSourceForm.tsx b/packages/plugin-datasource-pane/src/components/DataSourceForm/DataSourceForm.tsx
@@ -34,6 +34,7 @@ import { generateClassName } from '../../utils/misc';
 import { filterXDisplay } from '../../utils/filter-x-display';
 
 import { DataSourceFormProps, DataSourceFormMode } from '../../types';
+import { isJSExpression } from '@alilc/lowcode-types';
 
 const SCHEMA = {
   type: 'object',
@@ -79,8 +80,8 @@ const SCHEMA = {
         },
         params: {
           title: '请求参数',
-          type: 'object',
-          default: {},
+          type: 'array',
+          default: [],
           'x-decorator-props': {
             addonAfter: <ComponentSwitchBtn component="LowcodeExpression" />,
           },
@@ -117,9 +118,9 @@ const SCHEMA = {
           },
         },
         headers: {
-          type: 'object',
+          type: 'array',
           title: '请求头信息',
-          default: {},
+          default: [],
           'x-decorator-props': {
             addonAfter: <ComponentSwitchBtn component="LowcodeExpression" />,
           },
@@ -218,9 +219,8 @@ export class DataSourceForm extends PureComponent<DataSourceFormProps> {
   deriveInitialData = (dataSource: object = {}) => {
     const { dataSourceType } = this.props;
     const result: any = _cloneDeep(dataSource);
-
     // TODO
-    if (_isPlainObject(_get(result, 'options.params'))) {
+    if (_isPlainObject(_get(result, 'options.params')) && !isJSExpression(_get(result, 'options.params'))) {
       result.options.params = Object.keys(result.options.params).reduce(
         (acc: any, cur: any) => {
           acc.push({
@@ -232,7 +232,7 @@ export class DataSourceForm extends PureComponent<DataSourceFormProps> {
         [],
       );
     }
-    if (_isPlainObject(_get(result, 'options.headers'))) {
+    if (_isPlainObject(_get(result, 'options.headers')) && !isJSExpression(_get(result, 'options.headers'))) {
       result.options.headers = Object.keys(result.options.headers).reduce(
         (acc: any, cur: any) => {
           acc.push({
diff --git a/packages/plugin-datasource-pane/src/components/Forms/component-switch-btn.tsx b/packages/plugin-datasource-pane/src/components/Forms/component-switch-btn.tsx
@@ -5,13 +5,16 @@ import _get from 'lodash/get';
 import { connect, mapProps } from '@formily/react';
 import cn from 'classnames';
 import { generateClassName } from '../../utils/misc';
+import { Field } from '@formily/core'
+import { isJSExpression, JSExpression } from '@alilc/lowcode-types';
 
 export interface ComponentSwitchBtnCompProps {
   className?: string;
   style?: React.CSSProperties;
   component: string;
   originalComponent: string;
   setComponent: (component: string) => void;
+  field: Field
 }
 
 export interface ComponentSwitchBtnCompState {
@@ -34,17 +37,62 @@ class ComponentSwitchBtnCompComp extends PureComponent<
 
   componentDidMount() {
     this.originalComponent = this.props.originalComponent;
+
+    // 表单回调的时候，如果初始值是 expression，那需要切换组件
+    if (isJSExpression(this.props.field.value)) {
+      this.props.setComponent('LowcodeExpression')
+      this.setState({ currentComponent: 'LowcodeExpression' });
+    }
   }
 
   handleSwitch = () => {
+    const { field, setComponent } = this.props
+
     let nextComponent = null;
     if (this.state.currentComponent === this.originalComponent) {
       nextComponent = this.props.component;
     } else {
       nextComponent = this.originalComponent;
     }
-    this.setState({ currentComponent: nextComponent });
-    this.props.setComponent?.(nextComponent);
+
+    let nextValue: number | boolean | string | JSExpression | Array<any> = field.value
+
+    switch(nextComponent) {
+      case 'Switch':
+        // expression 转 boolean
+        if (isJSExpression(nextValue)) {
+          nextValue = (nextValue && nextValue.value === 'true') || false;
+        }
+        break;
+      case 'NumberPicker':
+        // expression 转 number
+        if (isJSExpression(nextValue)) {
+          const val = +(nextValue && nextValue.value)
+          nextValue = isNaN(val) ? 0 : val
+        }
+        break;
+      case 'ArrayItems':
+         // expression 转 array
+        if (isJSExpression(nextValue)) {
+          nextValue = []
+        }
+        break;
+      case 'LowcodeExpression':
+        // 普通组件转 array
+        nextValue = {
+          type: 'JSExpression',
+          value: nextValue + '',
+        }
+        break;
+      default: // 默认 expression 转 string （Input、Select 组件走这）
+        if (isJSExpression(nextValue)) {
+          nextValue = (nextValue && nextValue.value) || ''
+        }
+    }
+
+    this.setState({ currentComponent: nextComponent! });
+    field.setValue(nextValue)
+    setComponent?.(nextComponent!);
   };
 
   render() {
@@ -66,6 +114,7 @@ export const ComponentSwitchBtn = connect(
   ComponentSwitchBtnCompComp,
   mapProps((props, field) => {
     return {
+      field,
       setComponent: field.setComponent,
       originalComponent: _get(field, 'component[0]'),
     };
