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

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

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

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

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

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

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

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

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

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

第五步:打开展示新增js

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

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

  1. 打开筛选表单配置js输入开关
  2. 配置筛选表单项项属性值,以数组形式配置,例如:
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)`

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

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

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

  1. 打开数据表字段配置js输入开关
  2. 配置数据表的字段属性值,以数组形式配置,例如:
json 复制代码
[
    {
        "dataIndex": "用户名",
        "operate": "search|filter|add|edit",
    },
    {
        "dataIndex": "密码",
        "operate": "filter|add|edit",
    },
]
     字段名: `dataIndex`
     字段操作权限(多个以|分隔): `operate` (
       `search`: 关键字搜索,
       `filter`: 精确匹配,
       `add`: 新增,
       `edit`: 编辑,
     )
     匹配类型:`filterType` (
        `between`: 范围
     )

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

相关推荐
戏神25 分钟前
《云原生监控体系构建实录:从Prometheus到Grafana的观测革命》
云原生·prometheus源码编译·grafana可视化革命·exporter量子探针·时序数据库优化·全栈可观测性·百万级指标采集
蜡笔小新星26 分钟前
Flask项目框架
开发语言·前端·经验分享·后端·python·学习·flask
夏天的味道٥3 小时前
使用 Java 执行 SQL 语句和存储过程
java·开发语言·sql
海鸥814 小时前
查看k8s集群的资源使用情况
云原生·容器·kubernetes
Fantasywt4 小时前
THREEJS 片元着色器实现更自然的呼吸灯效果
前端·javascript·着色器
云上艺旅4 小时前
K8S学习之基础十八:k8s的灰度发布和金丝雀部署
学习·云原生·容器·kubernetes
IT、木易5 小时前
大白话JavaScript实现一个函数,将字符串中的每个单词首字母大写。
开发语言·前端·javascript·ecmascript
冰糖码奇朵5 小时前
大数据表高效导入导出解决方案,mysql数据库LOAD DATA命令和INTO OUTFILE命令详解
java·数据库·sql·mysql
好教员好5 小时前
【Spring】整合【SpringMVC】
java·spring
Mr.NickJJ5 小时前
JavaScript系列06-深入理解 JavaScript 事件系统:从原生事件到 React 合成事件
开发语言·javascript·react.js