Coder Social home page Coder Social logo

lowcode-ecology's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

lowcode-ecology's Issues

如何把自动生成的npm下的文件生成到lowcode

开发文档能否完善下?

遇到的问题:新增了components源码,重新执行yarn lowcode:dev,可以在npm文件夹下生成对应meta了。但是npm文件下的内容和 lowcode 文件夹下的内容是如何转化的?感觉是个黑盒啊。

另外一个疑问:官方物料脚手架执行yarn lowcode:dev会自动生成lowcode文件下的组件低代码,为何该项目是自动生成npm文件夹?与官方有何不同吗?

cdn资源不稳定

使用@seada/antd-plugins后,点击配置响应器,会加载一些cdn资源,默认会从jsdelivr加载。内网环境、国内墙的问题,会经常加载不了jsdelivr资源,导致页面白屏,需要支持配置自定义cdn资源,代码已经提pr了。
image

求助:关于EditableProTable的组件

我根据ProTable的封装尝试做一个EditableProTable的插件,但是现在数据源无法映射到表格内,能讲一下ProTable中数据源配置的逻辑吗?

FormilyArrayTable缺少数据类型描述

以下为可复现json schema

{
  "componentName": "Page",
  "id": "node_ocl6pvz1ch1",
  "props": {
    "ref": "outerView",
    "style": {
      "height": "100%",
      "overflow": "auto",
      "backgroundColor": "#fff"
    },
    "header": ""
  },
  "css": "body {\n  font-size: 12px;\n}\n\n.button {\n  width: 100px;\n  color: #ff00ff\n}",
  "title": "",
  "fileName": "/",
  "isLocked": false,
  "condition": true,
  "dataSource": {
    "list": []
  },
  "originCode": "class LowcodeComponent extends Component {\n  // 定义搭建所需要的 State\n  state = {\n    students: []\n  }\n\n  // 页面生命周期 - mount\n  componentDidMount() {\n    console.log('did mount');\n    \n  }\n\n  // 页面生命周期 - will unmount\n  componentWillUnmount() {\n    console.log('will unmount');\n  }\n\n}",
  "conditionGroup": "",
  "state": {
    "students": {
      "type": "JSExpression",
      "value": "[]"
    }
  },
  "methods": {},
  "lifeCycles": {
    "componentDidMount": {
      "type": "JSFunction",
      "value": "function componentDidMount() {\n  console.log('did mount');\n}"
    },
    "componentWillUnmount": {
      "type": "JSFunction",
      "value": "function componentWillUnmount() {\n  console.log('will unmount');\n}"
    }
  },
  "children": [
    {
      "componentName": "FormilyForm",
      "id": "node_ocll0o5ugd9",
      "props": {
        "componentProps": {
          "layout": "horizontal"
        },
        "__component_name": "FormilyForm",
        "ref": "formily_rdsnd4ql9h"
      },
      "title": "FormilyForm",
      "isLocked": false,
      "condition": true,
      "conditionGroup": "",
      "children": [
        {
          "componentName": "FormilyArrayTable",
          "id": "node_ocll0o5ugdn",
          "props": {
            "__component_name": "FormilyArrayTable",
            "fieldProps": {
              "x-validator": [],
              "name": "123"
            },
            "componentProps": {
              "x-component-props": {}
            },
            "decoratorProps": {
              "x-decorator-props": {}
            }
          },
          "title": "ArrayTable",
          "isLocked": false,
          "condition": true,
          "conditionGroup": "",
          "children": [
            {
              "componentName": "FormilyArrayTable.Addition",
              "id": "node_ocll0o5ugdo",
              "props": {
                "__component_name": "FormilyArrayTable.Addition"
              },
              "title": "",
              "isLocked": false,
              "condition": true,
              "conditionGroup": ""
            }
          ]
        }
      ]
    }
  ]
}
image 点击`+ addtion` 报错,原因是 FormilyArrayTable 的 fieldProps 缺少以下描述: image

官网antd-pro例子里,导航菜单组件报错

进入官网demo页面,选择如下demo
image
选择默认分组下导航菜单组件
image
该demo中以及目前自己项目中使用的antd 是>4.23.0版本,导致这个问题,是否更新下antd-material的逻辑,解决下这个问题。选择antd 4.19.4的版本是正常的。

lowcode-ecology 的 Demo 文件夹内容 能否当成编辑器项目使用

场景描述

业务系统需要 formily 物料, 因此使用了本项目,
业务系统本身需要嵌入 lowcode-engine , 根据官方说法是不支持 spa 接入方式,

所以我的方案是单开一个编辑器, 业务系统通过 iframe 或者 微前端引入编辑器项目

所以想咨询一下 , 源码我看了一下, Demo 文件夹本地正常启动 , 但是打包后的产物可能有点问题, 如果需要的话我可以提交 pr, 期待回复

lowcode文件夹内容无变化

无论是新增component,还是删除整个lowcode文件夹,执行 yarn lowcode:dev ,lowcode文件夹都无反应。

要怎么操作或修改,才能使lowcode下生成新的组件?

formily.-materials的物料仓库array-table功能使用失效,却当作物料引入时又是正常的

WechatIMG76
WechatIMG73
下载本仓库的formily.-materials的物料仓库并且用lowcode:dev运行在端口5551上,发现使用array-table去添加一列时报错,
但是在端口为5556的低代码平台中去引用了该物料仓库,在图片右边界面上5556的低代码平台上可以正常的操作array-table, 比如添加1列。但是在左边5551物料仓库中就同样去操作添加列就报错了,

报错内容是无法找到name, 就是控制台里显示的那行。我奇怪,同一个物料仓库,为啥在物料仓库里跑起来的界面上无法操作,被引入的地方却可以使用

本地已使用x-switch做了正确代理

安装依赖问题

xxgxxg@xxgxxg-All-Series:~/lowcode-ecology$ yarn
yarn install v1.22.19
$ cd demo && yarn
yarn install v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
error An unexpected error occurred: "https://npm.shopee.io/@alilc%2flowcode-datasource-types/-/lowcode-datasource-types-1.1.4.tgz: getaddrinfo ENOTFOUND npm.shopee.io".
info If you think this is a bug, please open a bug report with the information provided in "/home/xxgxxg/lowcode-ecology/demo/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

问ChatGPT说
Chatbot:
当运行 yarn 命令时,它会自动从指定的 registry 下载依赖包,然后将其存储在项目的 node_modules 目录中。如果在下载依赖包时遇到了网络问题,可以通过手动下载依赖包并将其解压到 node_modules 目录来解决问题。
下面是具体的操作步骤:

打开报错信息中的链接(如 https://npm.shopee.io/lodash/-/lodash-4.17.21.tgz),下载被报错的依赖包。如果链接无法访问,可以使用其他源下载相应的依赖包。
将下载好的依赖包保存到项目的根目录下。
进入项目的 node_modules 目录,找到对应的依赖包文件夹。以报错信息中的 lodash 为例,你可以进入 node_modules/lodash 目录。
将下载好的依赖包解压到该目录中,覆盖原有的 package.tgz 文件。以 lodash-4.17.21.tgz 为例,你可以使用以下命令将其解压到 node_modules/lodash 目录中:
tar -xzf lodash-4.17.21.tgz --strip-components 1 -C .
解压完成后,你可以在 node_modules/lodash 目录中看到解压出来的文件和目录。
重新运行 yarn 命令,查看是否能够成功安装依赖。如果成功安装,你应该可以在 package.json 文件中看到新安装的依赖。
前端新手请问下,换源挂代理都不行,请问有什么好的办法吗?
我手动安装完lodash后又出现其他依赖
请问还有些简便的办法吗

build 报错:@seada/antd-setters/esm/setters/FormilySchemaSetter/components/MonacoInput/index.js 中 Module parse failed: Unexpected token

(undefined) ./node_modules/@seada/antd-plugins/esm/plugins/plugin-code-generator/helper.js
Module not found: Can't resolve 'semver/functions/coerce' in '/Users/pengchao/develop/capfe/lowcode-engine/node_modules/@seada/antd-plugins/esm/plugins/plugin-code-generator'

(undefined) ./node_modules/@monaco-editor/react/dist/index.mjs 1:1806
Module parse failed: Unexpected token (1:1806)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

import _e from"@monaco-editor/loader";import{memo as Tt}from"react";import kt,{useState as rt,useRef as k,useCallback as ot,useEffect as nt}from"react";import St from"@monaco-editor/loader";import{memo as yt}from"react";import K from"react";var lt={wrapper:{display:"flex",position:"relative",textAlign:"initial"},fullWidth:{width:"100%"},hide:{display:"none"}},v=lt;import mt from"react";var at={container:{display:"flex",height:"100%",width:"100%",justifyContent:"center",alignItems:"center"}},Y=at;function Mt({children:t}){return mt.createElement("div",{style:Y.container},t)}var Z=Mt;var $=Z;function Et({width:t,height:r,isEditorReady:n,loading:e,_ref:a,className:m,wrapperProps:E}){return K.createElement("section",{style:{...v.wrapper,width:t,height:r},...E},!n&&K.createElement($,null,e),K.createElement("div",{ref:a,style:{...v.fullWidth,...!n&&v.hide},className:m}))}var tt=Et;var H=yt(tt);import{useEffect as xt}from"react";function Ct(t){xt(t,[])}var b=Ct;import{useEffect as gt,useRef as Rt}from"react";function ht(t,r,n=!0){let e=Rt(!0);gt(e.current||!n?()=>{e.current=!1}:t,r)}var l=ht;function h(){}function R(t,r,n,e){return Dt(t,e)||bt(t,r,n,e)}function Dt(t,r){return t.editor.getModel(et(t,r))}function bt(t,r,n,e){return t.editor.createModel(r,n,e?et(t,e):void 0)}function et(t,r){return t.Uri.parse(r)}function Ot({original:t,modified:r,language:n,originalLanguage:e,modifiedLanguage:a,originalModelPath:m,modifiedModelPath:E,keepCurrentOriginalModel:S=!1,keepCurrentModifiedModel:N=!1,theme:x="light",loading:P="Loading...",options:y={},height:V="100%",width:z="100%",className:F,wrapperProps:j={},beforeMount:A=h,onMount:q=h}){let[M,O]=rt(!1),[T,s]=rt(!0),u=k(null),c=k(null),w=k(null),d=k(q),o=k(A),D=k(!1);b(()=>{let i=St.init();return i.then(f=>(c.current=f)&&s(!1)).catch(f=>f?.type!=="cancelation"&&console.error("Monaco initialization: error:",f)),()=>u.current?I():i.cancel()}),l(()=>{let i=u.current.getModifiedEditor();i.getOption(c.current.editor.EditorOption.readOnly)?i.setValue(r||""):r!==i.getValue()&&(i.executeEdits("",[{range:i.getModel().getFullModelRange(),text:r||"",forceMoveMarkers:!0}]),i.pushUndoStop())},[r],M),l(()=>{u.current?.getModel()?.original.setValue(t||"")},[t],M),l(()=>{let{original:i,modified:f}=u.current.getModel();c.current.editor.setModelLanguage(i,e||n||"text"),c.current.editor.setModelLanguage(f,a||n||"text")},[n,e,a],M),l(()=>{c.current?.editor.setTheme(x)},[x],M),l(()=>{u.current?.updateOptions(y)},[y],M);let U=ot(()=>{if(!c.current)return;o.current(c.current);let i=R(c.current,t||"",e||n||"text",m||""),f=R(c.current,r||"",a||n||"text",E||"");u.current?.setModel({original:i,modified:f})},[n,r,a,t,e,m,E]),L=ot(()=>{!D.current&&w.current&&(u.current=c.current.editor.createDiffEditor(w.current,{automaticLayout:!0,...y}),U(),c.current?.editor.setTheme(x),O(!0),D.current=!0)},[y,x,U]);nt(()=>{M&&d.current(u.current,c.current)},[M]),nt(()=>{!T&&!M&&L()},[T,M,L]),l(()=>{if(u.current&&c.current){let i=u.current.getOriginalEditor(),f=R(c.current,t||"",e||n||"text",m||"");f!==i.getModel()&&i.setModel(f)}},[m],M),l(()=>{if(u.current&&c.current){let i=u.current.getModifiedEditor(),f=R(c.current,r||"",a||n||"text",E||"");f!==i.getModel()&&i.setModel(f)}},[E],M);function I(){let i=u.current?.getModel();S||i?.original?.dispose(),N||i?.modified?.dispose(),u.current?.dispose()}return kt.createElement(H,{width:z,height:V,isEditorReady:M,loading:P,ref:w,className:F,wrapperProps:j})}var it=Ot;var wt=Tt(it);import{useState as It}from"react";import ct from"@monaco-editor/loader";function Pt(){let[t,r]=It(ct.__getMonacoInstance());return b(()=>{let n;return t||(n=ct.init(),n.then(e=>{r(e)})),()=>n?.cancel()}),t}var Ut=Pt;import{memo as zt}from"react";import Wt,{useState as ut,useEffect as W,useRef as C,useCallback as t}from"react";import Nt from"@monaco-editor/loader";import{useEffect as Lt,useRef as vt}from"react";function Ht(t){let r=vt();return Lt(()=>{r.current=t},[t]),r.current}var st=Ht;var =new Map;function Vt({defaultValue:t,defaultLanguage:r,defaultPath:n,value:e,language:a,path:m,theme:E="light",line:S,loading:N="Loading...",options:x={},overrideServices:P={},saveViewState:y=!0,keepCurrentModel:V=!1,width:z="100%",height:F="100%",className:j,wrapperProps:A={},beforeMount:q=h,onMount:M=h,onChange:O,onValidate:T=h}){let[s,u]=ut(!1),[c,w]=ut(!0),d=C(null),o=C(null),D=C(null),U=C(M),L=C(q),I=C(),i=C(e),f=st(m),Q=C(!1),B=C(!1);b(()=>{let p=Nt.init();return p.then(g=>(d.current=g)&&w(!1)).catch(g=>g?.type!=="cancelation"&&console.error("Monaco initialization: error:",g)),()=>o.current?pt():p.cancel()}),l(()=>{let p=R(d.current,t||e||"",r||a||"",m||n||"");p!==o.current?.getModel()&&(y&&.set(f,o.current?.saveViewState()),o.current?.setModel(p),y&&o.current?.restoreViewState(.get(m)))},[m],s),l(()=>{o.current?.updateOptions(x)},[x],s),l(()=>{!o.current||e===void 0||(o.current.getOption(d.current.editor.EditorOption.readOnly)?o.current.setValue(e):e!==o.current.getValue()&&(B.current=!0,o.current.executeEdits("",[{range:o.current.getModel().getFullModelRange(),text:e,forceMoveMarkers:!0}]),o.current.pushUndoStop(),B.current=!1))},[e],s),l(()=>{let p=o.current?.getModel();p&&a&&d.current?.editor.setModelLanguage(p,a)},[a],s),l(()=>{S!==void 0&&o.current?.revealLine(S)},[S],s),l(()=>{d.current?.editor.setTheme(E)},[E],s);let X=t(()=>{if(!(!D.current||!d.current)&&!Q.current){L.current(d.current);let p=m||n,g=R(d.current,e||t||"",r||a||"",p||"");o.current=d.current?.editor.create(D.current,{model:g,automaticLayout:!0,...x},P),y&&o.current.restoreViewState(.get(p)),d.current.editor.setTheme(E),u(!0),Q.current=!0}},[t,r,n,e,a,m,x,P,y,E]);W(()=>{s&&U.current(o.current,d.current)},[s]),W(()=>{!c&&!s&&X()},[c,s,X]),i.current=e,W(()=>{s&&O&&(I.current?.dispose(),I.current=o.current?.onDidChangeModelContent(p=>{B.current||O(o.current.getValue(),p)}))},[s,O]),W(()=>{if(s){let p=d.current.editor.onDidChangeMarkers(g=>{let G=o.current.getModel()?.uri;if(G&&g.find(J=>J.path===G.path)){let J=d.current.editor.getModelMarkers({resource:G});T?.(J)}});return()=>{p?.dispose()}}return()=>{}},[s,T]);function pt(){I.current?.dispose(),V?y&&.set(m,o.current.saveViewState()):o.current.getModel()?.dispose(),o.current.dispose()}return Wt.createElement(H,{width:z,height:F,isEditorReady:s,loading:N,_ref:D,className:j,wrapperProps:A})}var ft=Vt;var dt=zt(ft);var Fe=dt;export{wt as DiffEditor,dt as Editor,Fe as default,_e as loader,Ut as useMonaco};
| //# sourceMappingURL=index.mjs.map
@ ./node_modules/@seada/antd-setters/esm/setters/FormilySchemaSetter/components/MonacoInput/index.js 40:0-54 225:32-38 238:32-38 245:21-27
@ ./node_modules/@seada/antd-setters/esm/setters/FormilySchemaSetter/components/ValueInput/index.js
@ ./node_modules/@seada/antd-setters/esm/setters/FormilySchemaSetter/components/index.js
@ ./node_modules/@seada/antd-setters/esm/setters/FormilySchemaSetter/SchemaField.js
@ ./node_modules/@seada/antd-setters/esm/setters/FormilySchemaSetter/index.js
@ ./node_modules/@seada/antd-setters/esm/setters/index.js
@ ./node_modules/@seada/antd-setters/esm/index.js
@ ./node_modules/@seada/antd-plugins/esm/plugins/plugin-formily/index.js
@ ./node_modules/@seada/antd-plugins/esm/plugins/index.js
@ ./node_modules/@seada/antd-plugins/esm/index.js
@ ./src/index.ts
@ multi ./src/index.ts

启动项目后控制台报错

下载的最新版本
node 版本:v14.20.0
按照 文档 yarn bootstrap , yarn start
访问localhost:8000 ,页面空白控制台报错

错误信息如下:
image

form嵌套能力的实现

问题

  • 如下所示,使用formily的Schema Markup方式或者完全schema的方式,都可以实现表单的嵌套;
/**
 * @desc 构建全局和局部,并实现全局和局部查询参数的联动
 * 1、日周月的类型会影响分析日期和对比日期
 * 2、实时情况下,展示分时和累计切换
 * 3、对比日期场景下,展示对比时间选择
 *
 */
import React from 'react';
import {
  Input,
  Select,
  FormItem,
  FormButtonGroup,
  Submit,
  FormLayout,
  TreeSelect,
  DatePicker,
  Radio,
  Checkbox,
  Space,
} from '@formily/antd';
import {
  createForm,
  onFormInit,
  onFormMount,
  onFormUnmount,
  onFormReact,
  onFormValuesChange,
  onFormSubmit,
  onFormSubmitStart,
  onFormSubmitEnd,
  onFormInitialValuesChange,
  onFormInputChange,
} from '@formily/core';
import { FormProvider, Field, createSchemaField } from '@formily/react';
import { FormilyTable } from './components/table';

import 'antd/dist/antd.css';
import './index.less';

const form = createForm({
  effects() {
    onFormInit(() => {
      console.log('表单已初始化: ', form);
    });
    onFormMount(() => {
      form.setValues({}, 'deepMerge');
      console.log('表单已挂载: ', form.values);
    });
    onFormValuesChange((form) => {
      console.log('表单值变化: ', form.values);
    });
  },
});

const SchemaField = createSchemaField({
  components: {
    FormItem,
    Input,
    DatePicker,
    Radio,
    Checkbox,
    Space,
    FormLayout,
    FormilyTable,
  },
});

export default () => {
  return (
    <>
      <FormProvider form={form}>
        <SchemaField>
          {/*************** topGlobal start ***************/}
          <SchemaField.Void
            x-component="FormLayout"
            x-component-props={{
              layout: 'inline',
              labelAlign: 'right',
              wrapperAlign: 'left',
              className: 'material-search-form',
            }}
          >
            <SchemaField.Object name="topGlobal">
              <SchemaField.String
                name="dateType"
                x-component="Radio.Group"
                x-component-props={{
                  options: [
                    { label: '日', value: 'day' },
                    { label: '周', value: 'week' },
                    { label: '月', value: 'month' },
                  ],
                  optionType: 'button',
                }}
                x-decorator="FormItem"
                default={2}
              />
              <SchemaField.String
                name="timeType"
                x-component="Radio.Group"
                x-component-props={{
                  options: [
                    { label: '离线', value: 2 },
                    { label: '实时', value: 1 },
                  ],
                  optionType: 'button',
                }}
                x-decorator="FormItem"
                default={2}
              />
              <SchemaField.String
                name="analysticTimeType"
                default={1}
                x-component-props={{
                  options: [
                    { label: '分时', value: 1 },
                    { label: '累计', value: 2 },
                  ],
                  optionType: 'button',
                }}
                x-component="Radio.Group"
                x-decorator="FormItem"
                x-reactions={{
                  fulfill: {
                    state: {
                      display: '{{$values.topGlobal.timeType === 1 ? "visible" : "none"}}',
                    },
                  },
                }}
              />
            </SchemaField.Object>
          </SchemaField.Void>
          {/*************** coreIndex start ***************/}
          {/*************** coreIndex filter start ***************/}
          <SchemaField.Void
            x-component="FormLayout"
            x-component-props={{
              layout: 'inline',
              labelAlign: 'right',
              wrapperAlign: 'left',
              className: 'material-search-form',
            }}
          >
            <SchemaField.Object name="coreIndex">
              <SchemaField.String
                name="date"
                x-component="DatePicker"
                x-decorator="FormItem"
                x-reactions={{
                  fulfill: {
                    schema: {
                      'x-component-props.picker': '{{$values.topGlobal.dateType}}',
                    },
                  },
                }}
              />
              <SchemaField.String
                name="ratio"
                default={['_hb_ratio']}
                enum={[
                  { label: '日环比', value: '_hb_ratio' },
                  { label: '周同比', value: '_tb_ratio' },
                  { label: '对比', value: '_compare_ratio' },
                ]}
                x-component="Checkbox.Group"
                x-decorator="FormItem"
              />
              <SchemaField.String
                name="compareDate"
                title="对比时间"
                x-component="DatePicker"
                x-decorator="FormItem"
                x-reactions={{
                  fulfill: {
                    state: {
                      display:
                        '{{$values.coreIndex.ratio.includes("_compare_ratio") ? "visible" : "none"}}',
                    },
                    schema: {
                      'x-component-props.picker': '{{$values.topGlobal.dateType}}',
                    },
                  },
                }}
              />
            </SchemaField.Object>
          </SchemaField.Void>
          {/*************** coreIndex table start ***************/}
          <SchemaField.Void
            x-component="FormLayout"
            x-component-props={{
              layout: 'vertical',
              wrapperWidth: '100%',
            }}
          >
            <SchemaField.Object name="coreIndexTable">
              <SchemaField.String
                name="selectedNames"
                default={{
                  selectedRowKeys: []
                }}
                x-component="FormilyTable"
                x-decorator="FormItem"
                x-component-props={{
                  columns: [
                    {
                      title: '姓名',
                      dataIndex: 'name',
                      key: 'name',
                    },
                    {
                      title: '年龄',
                      dataIndex: 'age',
                      key: 'age',
                    },
                    {
                      title: '住址',
                      dataIndex: 'address',
                      key: 'address',
                    },
                  ]
                }}
                x-reactions={{
                  fulfill: {
                    schema: {
                      'x-component-props.filterParams': '{{Object.assign({}, $values.topGlobal, $values.coreIndex)}}',
                    },
                  },
                }}
              />
            </SchemaField.Object>
          </SchemaField.Void>
          {/*************** coreIndex chart start ***************/}
          <SchemaField.Void
            x-component="FormLayout"
            x-component-props={{
              layout: 'vertical',
              wrapperWidth: '100%',
            }}
          >
            <SchemaField.Object name="coreIndexTable2">
              <SchemaField.String
                name="selectedChart"
                x-component="FormilyTable"
                x-decorator="FormItem"
                x-component-props={{
                  columns: [
                    {
                      title: '姓名',
                      dataIndex: 'name',
                      key: 'name',
                    },
                    {
                      title: '年龄',
                      dataIndex: 'age',
                      key: 'age',
                    },
                    {
                      title: '住址',
                      dataIndex: 'address',
                      key: 'address',
                    },
                  ]
                }}
                x-reactions={{
                  fulfill: {
                    state: {
                      display:
                        '{{ $values.coreIndexTable.selectedNames.selectedRowKeys.length > 0 ? "visible" : "none" }}',
                    },
                    schema: {
                      'x-component-props.filterParams': '{{Object.assign({}, $values.topGlobal, $values.coreIndex)}}',
                    },
                  },
                }}
              />
            </SchemaField.Object>
          </SchemaField.Void>
        </SchemaField>
      </FormProvider>
    </>
  );
};
  • 目前提供的FormilyLayout组件和FormilyContainer组件,都是基于Void Schema来实现的,从而不具有嵌套特性(虽然配置上有name,但是没有作用)
// packages/formily-materials/src/shared/hoc/getSchemaComponent.tsx
export const createVoidSchemaComponent = (options: ICreateSchemaComponent) => {
  return createSchemaComponent({
    ...options,
    transform(schema) {
      // 拦截
      schema.type = 'void';

      return options?.transform?.(schema);
    },
  });
};

需求

先说一下,目前需求的背景:使用ali-lowcode-engine + formily来实现数据报表的查询联动,报表配置化中要实现的能力如下:

  • 实现输入类组件到展示类组件的筛选,符合基本筛选诉求。
  • 实现展示类组件到展示类组件的筛选,属于图表联动图表的高级功能。
  • 实现输入类组件到输入类组件的筛选,属于筛选联动功能。
  • 实现组件自身到自身的筛选,实现下钻功能。

目前的思路如下:
(1)、基于formliy封装FilterContainerRoot和FilterContainerItem组件,FilterContainerRoot对应为page层面,FilterContainerItem包裹每一层具有筛选能力的组件,从而将整个页面构建为一个大表单;
(2)、可以直接使用fomily-antd来满足不同场景的布局需要和筛选组件能力:https://antd.formilyjs.org/zh-CN/components
(3)、可以使用formily-react中内置的schema能力实现配置化表达:https://react.formilyjs.org/zh-CN/api/shared/schema
这个思路使用formily原生实现的demo,就是上述问题中描述的JSX,这个结构应该是可以通过ali-lowcode-engine配置出来的;

期望

  • 目前是否有表单嵌套配置方向的规划,对于嵌套,目前的技术思路有没有大概的想法可以分享一下;
  • 是否可以参与进来建设这块的能力;

Antd Pro 组件时间或者时间区间确定后报错e.weekday is not a function

TypeError: e.weekday is not a function
at Object.getWeekDay (moment.js:17:18)
at np (dateUtil.js:98:41)
at we (react-dom.production.min.js:84:293)
at He (react-dom.production.min.js:97:464)
at zj (react-dom.production.min.js:228:406)
at Th (react-dom.production.min.js:152:223)
at tj (react-dom.production.min.js:152:152)
at Te (react-dom.production.min.js:146:151)
at react-dom.production.min.js:61:68
at unstable_runWithPriority (react.production.min.js:25:260)
at Da (react-dom.production.min.js:60:280)
at Pg (react-dom.production.min.js:61:14)
at ha (react-dom.production.min.js:60:451)
at mk.Events.current (react-dom.production.min.js:236:59)
at Ei (react-dom.production.min.js:41:88)

formily-materials无用文件删除

RT,官方物料的脚手架生成的一些文件,比如 tslint.json 等,在我们的 monorepo 里面是无用的,可以考虑进行删除

求助:Windows安装报错

node16和12都试过了,yarn bootstrap之后都会报错,求助~~必须要用mac嘛

在packages/antd-material里面run lowcode:dev也报错,Windows是跑不起来吗?生成的.tmp里面引用路径是错的

初始化参数失效

升级最新版本后默认值无效

版本信息

  • "@alilc/lowcode-engine": "^1.0.17"
  • "@alilc/lowcode-engine-ext": "^1.0.5"
  • "@seada/antd-plugins": "1.0.0-rc.24"

复现步骤

  1. 进入文件:packages/formily-materials/lowcode/formily-array-cards/propsSchema.ts
  2. 添加参数:image
  3. 拖拽FormilyArrayCards组件
  4. schema没有默认值

猜测原因

image

formily materials 只拖入 ProLayout 组件预览时按钮无法正常渲染

现象

  1. 设计器中只拖入 ProLayout 组件,设计器中渲染正常
  2. 预览模式下 ProLayout 中的 Button 组件无法正常渲染,控制台报错:Button component is not found in components list! component list is,component list is { AddonRenderer, BlockRenderer, ComponentRenderer, DivRenderer, PageRenderer, ProContainer, TempRenderer }
  3. 再在设计器中拖入一个 Button 组件后,预览正常

默认值无效

低代码项目,lowcode-engine升级到1.0.15版本后,多次拖入同一个组件(例如:ArrayCards),组件schema不会生成默认值。官方解决办法,具体原因不知道
image

跑不起来

ame-pointer -fno-rtti -fno-exceptions -std=gnu++14 -std=c++0x -MMD -MF ./Release/.deps/Release/obj.target/binding/src/binding.o.d.raw -c -o Release/obj.target/binding/src/binding.o ../src/binding.cpp
In file included from /home/nekic/.node-gyp/16.18.1/include/node/v8.h:30,
from /home/nekic/.node-gyp/16.18.1/include/node/node.h:73,
from ../../../../nan/nan.h:60,
from ../src/binding.cpp:1:
/home/nekic/.node-gyp/16.18.1/include/node/v8-internal.h: In function ‘void v8::internal::PerformCastCheck(T*)’:
/home/nekic/.node-gyp/16.18.1/include/node/v8-internal.h:492:38: error: ‘remove_cv_t’ is not a member of ‘std’; did you mean ‘remove_cv’?
492 | !std::is_same<Data, std::remove_cv_t>::value>::Perform(data);
| ^~~~~~~~~~~
| remove_cv
/home/nekic/.node-gyp/16.18.1/include/node/v8-internal.h:492:38: error: ‘remove_cv_t’ is not a member of ‘std’; did you mean ‘remove_cv’?
492 | !std::is_same<Data, std::remove_cv_t>::value>::Perform(data);
| ^~~~~~~~~~~
| remove_cv
/home/nekic/.node-gyp/16.18.1/include/node/v8-internal.h:492:50: error: template argument 2 is invalid
492 | !std::is_same<Data, std::remove_cv_t>::value>::Perform(data);
| ^
/home/nekic/.node-gyp/16.18.1/include/node/v8-internal.h:492:63: error: ‘::Perform’ has not been declared
492 | !std::is_same<Data, std::remove_cv_t>::value>::Perform(data);
| ^~~~~~~
../src/binding.cpp: In function ‘Nan::NAN_METHOD_RETURN_TYPE render(Nan::NAN_METHOD_ARGS_TYPE)’:
../src/binding.cpp:284:80: warning: cast between incompatible function types from ‘void ()(uv_work_t)’ {aka ‘void ()(uv_work_s)’} to ‘uv_after_work_cb’ {aka ‘void ()(uv_work_s, int)’} [-Wcast-function-type]
284 | int status = uv_queue_work(uv_default_loop(), &ctx_w->request, compile_it, (uv_after_work_cb)MakeCallback);
| ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../src/binding.cpp: In function ‘Nan::NAN_METHOD_RETURN_TYPE render_file(Nan::NAN_METHOD_ARGS_TYPE)’:
../src/binding.cpp:320:80: warning: cast between incompatible function types from ‘void ()(uv_work_t)’ {aka ‘void ()(uv_work_s)’} to ‘uv_after_work_cb’ {aka ‘void ()(uv_work_s, int)’} [-Wcast-function-type]
320 | int status = uv_queue_work(uv_default_loop(), &ctx_w->request, compile_it, (uv_after_work_cb)MakeCallback);
| ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
In file included from ../../../../nan/nan.h:60,
from ../src/binding.cpp:1:
../src/binding.cpp: At global scope:
/home/nekic/.node-gyp/16.18.1/include/node/node.h:887:7: warning: cast between incompatible function types from ‘void ()(Nan::ADDON_REGISTER_FUNCTION_ARGS_TYPE)’ {aka ‘void ()(v8::Localv8::Object)’} to ‘node::addon_register_func’ {aka ‘void ()(v8::Localv8::Object, v8::Localv8::Value, void)’} [-Wcast-function-type]
887 | (node::addon_register_func) (regfunc),
| ^~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/home/nekic/.node-gyp/16.18.1/include/node/node.h:921:3: note: in expansion of macro ‘NODE_MODULE_X’
921 | NODE_MODULE_X(modname, regfunc, NULL, 0) // NOLINT (readability/null_usage)
| ^~~~~~~~~~~~~
../src/binding.cpp:358:1: note: in expansion of macro ‘NODE_MODULE’
358 | NODE_MODULE(binding, RegisterModule);
| ^~~~~~~~~~~
make: *** [binding.target.mk:133: Release/obj.target/binding/src/binding.o] Error 1
make: Leaving directory '/data/projects/lowcode-ecology/node_modules/build-scripts-config/node_modules/node-sass/build'
gyp ERR! build error
gyp ERR! stack Error: make failed with exit code: 2
gyp ERR! stack at ChildProcess.onExit (/data/projects/lowcode-ecology/node_modules/build-scripts-config/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack at ChildProcess.emit (node:events:513:28)
gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:293:12)
gyp ERR! System Linux 5.15.0-53-generic
gyp ERR! command "/home/nekic/.local/share/fnm/node-versions/v16.18.1/installation/bin/node" "/data/projects/lowcode-ecology/node_modules/build-scripts-config/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /data/projects/lowcode-ecology/node_modules/build-scripts-config/node_modules/node-sass
gyp ERR! node -v v16.18.1
gyp ERR! node-gyp -v v3.8.0

FormilySchemaSetter中使用effects报错

在使用formilySchemaSetter的物料的createFormItemSchema函数中添加effects,报错:Error: Consume method cannot be used in asynchronous function body
image

复现步骤:在formily-materials/lowcod/utils/formilyFieldShared-index文件中,给FormilySchemaSetter的props添加effects
image
我想实现的功能是在设置器中实现配置的联动,比如在修改一项配置的同时自动修改另一设置项的下拉选项。我看formilySchemaSetter的props里面是有effects这个属性的,是我使用的问题还是bug?

官方demo中protable报错

  1. 选择AntDPro&Formily项目
  2. 拖入高级组件->CURD表格
  3. 在搜索表单的创建时间输入栏,选择时间,报错

image

ProTable物料表格列 数据字段应支持ArraySetter

Describe the bug (required) / 详细描述 bug(必填)

A clear and concise description of what the bug is. / 请提供清晰且精确的 bug 描述

高级组件ProTable(@seada/antd-materials [1.0.0-rc.29]),目前的数据字段仅支持StringSetter(这里不考虑变量绑定),但是在实际业务中可能是嵌套的数据结构,如下

const data=[
     {
       userInfo:{name:"张三",age:18},
       time:"2023-08-09"
     },
    {
       userInfo:{name:"李四",age:19},
       time:"2023-08-10"
     }
]

如果使用源码开发,我们可以这样获取name字段

const columns=[
     {
       title:"姓名",
       dataIndex:["userInfo","name"]
     },
    {
       title:"年龄",
       dataIndex:["userInfo","age"]
     },
    {
       title:"时间",
       dataIndex:"time"
     }
]

但是物料中却只能填入字符串,极大的增加了使用成本,希望优化
image

To Reproduce (required) / 如何复现 bug?(必填,非常重要)

Steps to reproduce the behavior: / 详细复现步骤:


English version example:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

中文版示例:

  1. 打开 demo
  2. 点击标题;
  3. 在右侧修改标题内容为「修改后的标题」;
  4. 渲染画布标题组件没有更新显示为「修改后的标题」;

Expected behavior (required) / 预期行为(必填,非常重要)

A clear and concise description of what did you expect to happen. / 请清晰和精确的描述你预期的行为


Screenshots (optional) / bug 截图(可选)

Sceenshots for further information. (If applicable.) / 一些有用的截图将会帮助我们更好的明确以及定位问题


Environments (please complete the following information) (required): / 请提供如下信息(必填)

  • AliLowCodeEngine version: [1.1.8-beta.3] / 低代码引擎版本
  • AliLowCodeEngineExt version: [1.0.6-beta.28] / 低代码引擎扩展包版本
  • Browser [e.g. chrome, safari] / 浏览器版本
  • materials / plugins / tools / 其他物料 / 插件 / 工具链版本
  • @seada/antd-materials [1.0.0-rc.29]

(this information can be collected via the manual plugin / 版本信息可通过低代码用户手册插件收集)

Additional context (optional) / 更多额外信息(可选)

Any other context of the problem here. / 可以追加更多的额外信息,帮助定位问题

执行 lerna bootstrap 报错

执行 lerna bootstrap 会一直报如下错误

image

info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
info There appears to be trouble with your network connection. Retrying...
error An unexpected error occurred: "https://npm.shopee.io/@seada%2flowcode-code-generator/-/lowcode-code-generator-1.0.1-beta.1.tgz: getaddrinfo ENOTFOUND npm.shopee.io".
info If you think this is a bug, please open a bug report with the information provided in "/Users/aipenghuang/lowcode/lowcode-ecology-main/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
lerna ERR! yarn install --mutex network:42424 --non-interactive --ignore-engines --no-package-lock exited 1 in 'lowcode-plugins'
lerna ERR! yarn install --mutex network:42424 --non-interactive --ignore-engines --no-package-lock exited 1 in 'lowcode-plugins'

国际化问题

moment打包的时候externals了。datepicker中英文混合,不知道怎么搞😅

image

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.