[Feat]:通过原有openblocks-plugin编辑器开发lowcoder的amis表单插件过程

exqmjmz commented 11 months ago

安装基础插件

https://mousheng.github.io/lowcoder_CN/#/develop-plugins

阅读这个教程，可以通过openblocks-plugin安装一个最小化版的插件，包含了入参、方法、动作、数据修改后重新赋值等功能示例

SDK复用

SDK可以直接用lowcoder的sdk属性，可以通过查看lowcoder-sdk源文件获取，或直接到lowcoder插件目录下找类似插件用了什么控制器，直接复制。

UICompBuilder对应界面组件渲染

入参与动作

childrenMap定义了组件入参类型、可以执行动作入参类型控制器可以通过以下文件查到，如果嫌麻烦，也可以直接到comps中找到最接近的组件使用的控制器，直接复制

client/packages/lowcoder/src/comps/controls/codeControl.tsx

也可以通过关键词StateControl搜索控制器，然后找到需要的组件直接复制需要的控制器

控制器对应关系

eventHandlerControl是执行动作控制器，可以在以下文件找到

client/packages/lowcoder/src/comps/controls/eventHandlerControl.tsx

方法设置

withMethodExposing设置这个组件可以输出的方法，默认有三个基础方法setValue、clearValue、resetValue

调试多个组件

在插件编辑器下的index.ts，把需要调试的插件引入同时package.json也需要添加对应的

移植到lowcoder原生插件

调试完成后，确认组件可用后，可以按照以下方式建立插件文件，然后把修改好的插件代码全部复制到这个文件中 https://mousheng.github.io/lowcoder_CN/#/developer/addComponent 记得在 client/packages/lowcoder 安装好插件要的依赖

需要调整地方

在SDK部分要把openblocks-sdk改成lowcoder-sdk

最底下改成要输出的组件名称

通过以上方式可以通过插件编辑器快速调试出需要用的组件。如果通过复制原有插件修改，过于复杂，原有的插件会调用各种方法，不够精简。通过插件编辑器开发，可以从最简单实例化插件开始，并且不用单独再开lowcoder前端调试。确认可用后，然后再引入到原生组件中以下是通过插件编辑器调试完成后，按照以上步骤迁移到lowcoder中amis表单编辑器

Daqiv commented 11 months ago

逆天, 你已超神...............

exqmjmz commented 11 months ago

后续如果是已经登录的用户，可以直接调用api，不用传入请求头cookie，请求时会自带cookie，以下是通过post执行了/api/query/execute这个执行查询接口的测试，传入查询参数可以返回需要的信息

mousheng commented 11 months ago

这周在休假没什么时间，我看哥们你又整活了哈。这个就有点6了，直接把amis给整成插件了吗？不过得提一嘴，包括amis和pageplug把formily给整进来，交互逻辑会有很大的割裂，简单的整合效果并不理想，我之前使用过pageplug也挺长一段时间，原平台的编码逻辑和formily表单的编码逻辑是完全不一样的，总体学习成本很高，使用体检也不好

exqmjmz commented 11 months ago

这周在休假没什么时间，我看哥们你又整活了哈。这个就有点6了，直接把amis给整成插件了吗？不过得提一嘴，包括amis和pageplug把formily给整进来，交互逻辑会有很大的割裂，简单的整合效果并不理想，我之前使用过pageplug也挺长一段时间，原平台的编码逻辑和formily表单的编码逻辑是完全不一样的，总体学习成本很高，使用体检也不好

主要是我们的一些业务会存在微表单的情况，就是不同的应用实例会有多种表单，比如客户种类，针对不同的客户种类、产品种类我们会有多种应对的表单，如果是用lowcoder，异味着要创建N个应用，看了一下内置的JSON表单，发现没法满足太多东西。对，在逻辑查询上确实是麻烦，主要是存在查询逻辑的交互麻烦。

exqmjmz commented 11 months ago

还有的，就是不同类型的业务客户，我们给他展现的页面也不会不一样，所以大致的想法就是用，用lowcoder做第一层大页面逻辑应用框架，固定化的，amis、formily这种表单框架，做为二层内页、微页面逻辑应用框架。可以动态可变，绑定不同的实例显示不同的页面和数据录入界面。 https://docs.steedos.cn/zh-CN/no-code/application/pages 类似于这个华炎魔方产品 AMIS在他们的应用结构中就属于微页面的一个部分

exqmjmz commented 11 months ago

想办法集成AMIS或者formily这种表单框架进来，还有一个因素，就是大的应用发布后，我们一线的业务人员、系统实施工程师，他可以通过表单编辑器，去新建数据表单或者定制、修改简单的页面，快速响应用户，而不是通过lowcoder研发或者程序研发去重新做一个新的lowcoder业务页面。因为现场的业务是多变的，对于B端开发来说，经常会出现用户需求变动，如何快速响应，这一直都是一个好问题。

exqmjmz commented 11 months ago

https://wenku.baidu.com/view/3e442b4adeccda38376baf1ffc4ffe473368fdc0.html?fr=income9-doc-search&_wkts_=1702090646912&wkQuery=%E4%BD%93%E7%B3%BB%E7%A8%8B%E5%BA%8F%E6%96%87%E4%BB%B6%2B%E7%99%BE%E5%BA%A6%E6%96%87%E5%BA%93&needWelcomeRecommand=1

这个是一个百度文库链接，可以打个比方，在目录这块，各种各种执行程序，类似于lowcoder的应用在每个程序里面，同时会要求用什么表单记录这个过程每个程序会有不同的表单，然后这个表单每隔一年或者一段时间，就会有新的版本产生，每个程序里面的表单字段要求都不一样 AMIS或者formily这种表单框架所需要做的就是由一线人员或者软件实施工程师快速生成出用户的表单，交由用户使用。

Tristan0430 commented 9 months ago

@exqmjmz 大哥我需要整一个sql编辑组件，整了半天没成功，能不能出个comps详细点的教程啊（跪求），或者这个源代码可以看看不……

mousheng / lowcoder_CN