用户新增表单配置-PC端通用管理模块配置教程(3)

2023-12-29 12:17:14

第一步:复制后台用户查询服务

在您的应用中,找到后台用户查询服务,复制一份作为用户新增服务的模板。

第二步:改为用户新增服务

  1. 修改流程:将后台组件方法调用改为调用用户表组件新增服务。
  2. 服务路径修改:将服务路径改为/user/add

第三步:调试用户新增服务

  1. 新增用户名、密码入参:在用户新增服务中添加用户名和密码的参数。

第四步:配置用户管理页组件接口API配置

在用户管理页组件的API配置中,添加{新增: "/user/add"}

第五步:打开展示新增js

在用户管理页组件中,找到控制新增按钮显示的js,将其设置为true,以显示新增按钮。

第六步:配置表单字段配置

  1. 打开筛选表单配置js输入开关
  2. 配置筛选表单项项属性值,以数组形式配置,例如:
[
    {
        "label": "用户名",
        "name": "用户名",
        "type": "input",
    },
    {
        "label": "密码",
        "name": "密码",
        "type": "input",
    },
]

标题: `label`
字段名: `name`
字段类型:`type` (
   `input`: 单行输入框,
   `number`: 数字输入框,
   `textarea`: 多行输入框,
   `select`: 下拉选择框,
   `richtext`: 富文本输入框,
   `date`: 开始结束日期时间,(`range`: `false`, `showTime`: `false`)
   `custom`: 自定义节点
)
 自定义节点渲染函数(当前表单实例): `render(form)`

第七步:点击新增后,会发现新增了一行,但用户名,密码是空的。

这表明目前表单还未绑定到数据,需要进一步配置。

第八步:配置后台自定义组件用户表组件

  1. 打开数据表字段配置js输入开关
  2. 配置数据表的字段属性值,以数组形式配置,例如:
[
    {
        "dataIndex": "用户名",
        "operate": "search|filter|add|edit",
    },
    {
        "dataIndex": "密码",
        "operate": "filter|add|edit",
    },
]

     字段名: `dataIndex`
     字段操作权限(多个以|分隔): `operate` (
       `search`: 关键字搜索,
       `filter`: 精确匹配,
       `add`: 新增,
       `edit`: 编辑,
     )
     匹配类型:`filterType` (
        `between`: 范围
     )

请根据您的项目实际情况,将这些步骤和代码段应用到您的项目中。每个步骤都需要您在代码编辑器中实际操作,修改和添加代码。如果有任何疑问,请随时提问。

文章来源:https://blog.csdn.net/zyh320888/article/details/135286146
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。