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

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

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

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

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

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`: 范围
     )

---

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