概述针对Amis的Crud组件在操作中,动辄几千行代码的情况下编辑和修改过程有诸多不便,设计本插件。 Amis Curd组件使用详见 https://aisuda.bce.baidu.com/amis/zh-CN/docs/index 本扩展数据库操作方面的内容使用的数据库为MySql或MariaDB,数据库连接的依赖库为mysql2 (3.2.0) 参数设置使用前,进入AmisCrud扩展的设置界面,有两个参数 1、Data Url这个是连接数据库的连接字符串,默认值为:mysql://root:123456@localhost:3306/admindata 其中mysql是当前连接的数据库 root是当前数据库连接的用户名 123456是当前数据库连接的用户密码 localhost:3306是当前数据库服务器及其端口 admindata是当前连接的默认数据库 以上参数请根据实际使用情况修改 2、Grid Max Rows这个是参数用于格式化新增和修改界面的FormItem内容时默认的每列行数,默认为12 【Javascript语言】1、读取表或视图,生成Crud组件表和视图名的来源表名称本扩展按照以下顺序获取字符串作为表名称读取数据库
视图名称确定表名称之后,用表名称+view为视图名称,比如userview,如果数据库中有对应的视图(view)则确定视图名称,否则视图名称为空 Crud的表格数据Crud的表格数据通过Crud的Api查询,Api格式如下: /api/general/find?tableName=xxxView... 上面Api的tableName传递当前要查询的表或视图的名称到后端Api,其中xxx为当前要查询的表名称,xxxview为当前要查询的视图名称。如果当前数据库没有和表名称相对应的视图名称,则此处的tableName参数为表的名称。 Crud的columns的内容根据数据库中读取到的表或视图的字段信息数据生成 Crud的增加和修改本扩展根据获取到的表名称(不论是否存在视图)读取数据库中的字段信息,根据字段信息确定生成的FormItem类型之后生成所有新增和修改需要的FormItem集合。 definitions因为新增和修改部分的界面高度的相似,本扩展使用生definitions的方式生成新增和修改功能需要用到的FormItem集合。在新增和修改界面的Form组件中,使用ref的方式引用新增和修改需要的组件集合。 关于definitions的使用详见:https://aisuda.bce.baidu.com/amis/zh-CN/docs/types/definitions grid在新增和修改的窗口中,使用grid组件组织FormItem集合。生成程序根据表中的字段数量自动分配FormItem到grid的columns,分配的时候,如果字段数量超过12(读取配置参数中的grid max rows)个,则新增一个grid的columns内容,Amis渲染的时候会根据grid组件的columns设置列,也就是说默认情况下字段信息超过12个,就会分成两列,字段超过24个的时候以此类推。并且生成程序判断如果字段信息超过12个,则新增或修改界面的对话框设置为全屏(size: "full")。 Crud的详情Crud的详情展示的是表格中的所有列,并使用static-text组件显示。 2、同化表格->详情操作增加或删除Crud组件的columns里面的字段内容之后,需要确保详情界面上面显示出来的内容和表格里面的内容一致,手动操作容易出错,本扩展提供同化操作,程序读取当前文档中(不论是否已经保存)Crud组件的columns数组,重新生成详情界面的所有内容。 3、格式所有表单项在修改和调整Crud组件的时候,经常需要增加或删除“新增”或“修改”界面里面的FormItem,这种调整会导致grid里面每列的组件数量不一致,从而导致渲染后界面的上面的内容不能很好的对齐。手动调整比较麻烦,本扩展提供格式操作,格式化所有表单项的时候,会读取当前文档中(无论是否保存)所有的FormItem,然后重新按照设置参数里面的Grid Max Rows里面的数值(默认为12)把组件依次放入到gird的columns数组里面,从而实现重新对齐的操作效果。 4、读取字段信息生成表格列5、读取字段信息生成编辑器(FormItem)6、折叠操作 |