用户新增表单配置-PC端通用管理模块配置教程(3)
第一步:复制后台用户查询服务
在您的应用中,找到后台用户查询服务,复制一份作为用户新增服务的模板。
第二步:改为用户新增服务
- 修改流程:将后台组件方法调用改为调用用户表组件新增服务。
- 服务路径修改 :将服务路径改为
/user/add
。
第三步:调试用户新增服务
- 新增用户名、密码入参:在用户新增服务中添加用户名和密码的参数。
第四步:配置用户管理页组件接口API配置
在用户管理页组件的API配置中,添加{新增: "/user/add"}
。
第五步:打开展示新增js
在用户管理页组件中,找到控制新增按钮显示的js,将其设置为true
,以显示新增按钮。
第六步:配置表单字段配置
- 打开筛选表单配置js输入开关。
- 配置筛选表单项项属性值,以数组形式配置,例如:
json
[
{
"label": "用户名",
"name": "用户名",
"type": "input",
},
{
"label": "密码",
"name": "密码",
"type": "input",
},
]
标题: `label`
字段名: `name`
字段类型:`type` (
`input`: 单行输入框,
`number`: 数字输入框,
`textarea`: 多行输入框,
`select`: 下拉选择框,
`richtext`: 富文本输入框,
`date`: 开始结束日期时间,(`range`: `false`, `showTime`: `false`)
`custom`: 自定义节点
)
自定义节点渲染函数(当前表单实例): `render(form)`
第七步:点击新增后,会发现新增了一行,但用户名,密码是空的。
这表明目前表单还未绑定到数据,需要进一步配置。
第八步:配置后台自定义组件用户表组件
- 打开数据表字段配置js输入开关。
- 配置数据表的字段属性值,以数组形式配置,例如:
json
[
{
"dataIndex": "用户名",
"operate": "search|filter|add|edit",
},
{
"dataIndex": "密码",
"operate": "filter|add|edit",
},
]
字段名: `dataIndex`
字段操作权限(多个以|分隔): `operate` (
`search`: 关键字搜索,
`filter`: 精确匹配,
`add`: 新增,
`edit`: 编辑,
)
匹配类型:`filterType` (
`between`: 范围
)
请根据您的项目实际情况,将这些步骤和代码段应用到您的项目中。每个步骤都需要您在代码编辑器中实际操作,修改和添加代码。如果有任何疑问,请随时提问。