amis [BUG] InputTable 无法渲染自定义组件

vuv7lop3  于 4个月前  发布在  其他
关注(0)|答案(6)|浏览(70)
描述问题:

InputTable 无法渲染自定义组件

截图或视频:

如何复现(请务必完整填写下面内容):
  1. 你是如何使用 amis 的?
    在React中使用
  2. amis 版本是什么?请先在最新 beta 版本测试问题是否存在
    amis: ^2.1.0
  3. 粘贴有问题的完整 amis schema 代码:
    自定义组件
import { Func } from '@/interface/func';
import FuncGraph from '@/pages/Processor/function/Edit/FuncGraph';
import { FormControlProps, FormItem, Schema } from 'amis';
import { Drawer, Select } from 'antd';
import { useEffect, useState } from 'react';

export const FUNC_COMPONENT_TYPE = 'func-edit' as const;

interface Props extends FormControlProps {
  returnType?: Func.EDataType;
}

const FuncEdit = (props: Props) => {
  const { value, onChange, returnType, data, env } = props;

  env.enableAMISDebug = true;

  const [drawerVisible, setDrawerVisible] = useState(false);
  const [baseType, setBaseType] = useState<Func.EType>();

  // console.log(data);

  const handleFinish = (json: string) => {
    onChange(json);
  };

  useEffect(() => {
    setDrawerVisible(baseType === Func.EType.function);
  }, [baseType]);

  return (
    <>
      <Select
        value={baseType}
        onChange={setBaseType}
        style={{ width: 150 }}
        options={[
          {
            label: '字面量',
            value: Func.EType.literal,
          },
          {
            label: '字段',
            value: Func.EType.field,
          },
          {
            label: '函数',
            value: Func.EType.function,
          },
        ]}
      />
      <Drawer
        title="函数编辑"
        closable
        width={'100vw'}
        height={'100vh'}
        onClose={() => {
          setDrawerVisible(false);
        }}
        bodyStyle={{ padding: 0 }}
        visible={drawerVisible}
        placement={'top'}
      >
        <div style={{ position: 'relative', width: '100%', height: '100%' }}>
          <FuncGraph onFinish={handleFinish} initJSON={value} returnType={returnType} />
        </div>
      </Drawer>
    </>
  );
};

// https://aisuda.bce.baidu.com/amis/zh-CN/docs/extend/custom-react#%E8%A1%A8%E5%8D%95%E9%A1%B9%E7%9A%84%E6%89%A9%E5%B1%95
export default FormItem({ type: FUNC_COMPONENT_TYPE, autoVar: true })(FuncEdit);

export interface FuncEditSchema extends Schema {
  type: typeof FUNC_COMPONENT_TYPE;
  returnType: Func.EDataType;
}

Schema

{
    "type": "input-table",
    "name": "fields",
    "size": "full",
    "required": true,
    "readonly": false,
    "label": "输出字段集",
    "needConfirm": false,
    "addable": true,
    "editable": true,
    "removable": true,
    "columnsTogglable": false,
    "columns": [
      {
        "type": "func-edit",
        "label": "函数",
        "name": "function",
        "size": "md",
        "required": true,
        "returnType": "integer"
      },
      {
        "name": "field_name",
        "label": "字段名",
        "type": "input-text"
      },
      {
        "type": "select",
        "label": "字段类型",
        "name": "field_type",
        "size": "md",
        "required": true,
        "readOnly": false,
        "options": [
          {
            "label": "string",
            "value": "string"
          },
          {
            "label": "int",
            "value": "int"
          },
          {
            "label": "long",
            "value": "long"
          },
          {
            "label": "float",
            "value": "float"
          },
          {
            "label": "double",
            "value": "double"
          },
          {
            "label": "boolean",
            "value": "boolean"
          },
          {
            "label": "binary",
            "value": "binary"
          }
        ]
      }
    ]
  },

不再input-table中渲染是正常的

{
        "type": "func-edit",
        "label": "函数",
        "name": "function",
        "size": "md",
        "required": true,
        "returnType": "integer"
      },
  1. 操作步骤
lsmepo6l

lsmepo6l1#

👍 Thanks for this!
🏷 I have applied any labels matching special text in your issue.

Please review the labels and make any necessary changes.

lsmd5eda

lsmd5eda2#

👍 Thanks for this!
🏷 I have applied any labels matching special text in your issue.

Please review the labels and make any necessary changes.

ftf50wuq

ftf50wuq3#

同遇到这个问题了,有计划什么时候修复吗

dfuffjeb

dfuffjeb4#

同遇到这个问题了,有计划什么时候修复吗

我的解决方案是:用AMIS的自定义组件自己封装一个InputTable,我使用ant design实现的,你可以试试

2ul0zpep

2ul0zpep5#

同遇到这个问题了,有计划什么时候修复吗

我的解决方案是:用AMIS的自定义组件自己封装一个InputTable,我使用ant design实现的,你可以试试

好的,看看官方最近会不会修复先把,如果未修复后边可以考虑,工程量不小

相关问题