代码压缩包下载地址
相关技术与第三方:react,ts,less,引用antd图标与组件
配置说明:
[
{
label: "输入框", // 标签名称
tips: "请输入", // 提示语
rule: "validateNone", // 需要的规则类型,正则表达式文件可自行修改配置
type: "Input", // 控件类型
required: false, //是否必填
value: "", //参数默认值
options: [], //选项参数-非必 选项手动编辑后续考虑导入
allowClear: true, //是否允许清除-默认true
},
]
即使不需要这个功能板块,reduction提供的表单生成在编写管理系统也非常方便,模板一键生成表单
使用说明:左边是表单配置,右边是生成后的效果可编辑,配置可自由更改,新增,通过json控制,方便使用。最终将右边所得的json串保存,就可以使用该json串通过组件reduction还原表单
说明:主要是为了配置表单,具体表单控件就不直接手写使用现在的比较快,组件目前在初版调试阶段
主文件展示,文件较多,后续上传到资源包
/*
* @Author: 刘强
* @Date: 2022-06-16 16:50:05
* @LastEditTime: 2022-07-05 16:33:36
* @LastEditors: 刘强
* @Description:
* @FilePath: \form\src\page\form\index.tsx
* 这是注释!
*/
import React, { useState } from "react";
import "./index.less";
import UiForm from "./module/index";
import UiCatalogue from "./catalogue/index";
import UiConfig from "./config/index";
const Drag = () => {
const [list, setList] = useState([]); //列表
const [newParams, setNewParams] = useState({}); //当前拖拽新增元素
const [dragEnd, setDragEnd] = useState(true); //拖拽是否结束
const [valid, setValid] = useState(false); //拖拽是否有效
const [active, setActive] = useState(-1); //当前编辑控件下标
return (
<div className="drag">
<UiCatalogue
formList={list}
setDragEnd={setDragEnd}
setNewParams={setNewParams}
setValid={setValid}
valid={valid}
/>
<UiForm
setActive={setActive.bind(this)}
setList={setList.bind(this)}
formList={list}
newParams={newParams}
dragEnd={dragEnd}
valid={valid}
active={active}
setValid={setValid}
/>
<UiConfig
setActive={setActive.bind(this)}
active={active}
formList={list}
setList={setList.bind(this)}
/>
</div>
);
};
export default Drag;