react-sortablejs 实现自定义表单设计
一、业务需求描述
1. 能够拖动表单组件（不限制样式）到指定区域后，渲染成指定的组件
2. 能支持自定义标签名和属性，以及默认值
3. 能实现可支持预览、可排序、可编辑等功能
4. 能通过JSON数据格式前后端相互传递
二、业务前期准备
1. 在网上搜索了蛮多素材，但都是基于VUE的成品（http://www.maoyl.top/Demo/elformdesigndemo/index.html），与实际基于react实现不太符合，虽然自定义表单设计可以自己实现，但需一定时间，所以更偏向于使用已有的素材。
2. 综上，最后选择了react-sortablejs 工具（http://www.sortablejs.com/）来实现
三、业务正式开发
1. 效果预览图如下
2. 代码附上（不提供样式）
①CustomForm/index.js
import React, { useEffect, useState } from 'react';
import { Tag, Layout, Button, Modal, Divider, Form, Input, Select } from 'antd';
import Sortable from 'react-sortablejs';
import _ from 'lodash';
import uniqueId from 'lodash/uniqueId';
import update from 'immutability-helper';
import './index.less';
import { indexToArray, getItem, setInfo, isPath, getCloneItem, itemRemove, itemAdd } from './utils';
import { formItemData, GlobalComponent } from './config';
import EditableTable from '../../components/EditableTable';
const { Header, Sider, Content, Footer } = Layout;
const { Option } = Select;
const sortableOption = {
animation: 150,
fallbackOnBody: true,
swapThreshold: 0.65,
group: {
name: 'formItem',
pull: true,
put: true,
},
};
const CustomForm = () => {
const [itemData, setItemData] = useState(Array); // 组件数据
const [isShowModal, setIsShowModal] = useState(false); // 弹框是否显示
const [curItemKey, setCurItemKey] = useState(String); // 当前选中组件的Key
const [curItemName, setCurItemName] = useState(String); // 当前选中组件的Name
const [curItemType, setCurItemType] = useState(String); // 当前选中组件的Type
const [isChoose, setIsChoose] = useState(false); // 组件是否处于选中状态
useEffect(() => {
}, []);
const handleSubmit = () => {
};
const handlePreview = () => {
console.log('itemData:'+JSON.stringify(itemData))
setIsChoose(false)
setIsShowModal(true)
};
const handleLabelChange = (e) => {
const val = e.target.value;
setCurItemName(val);
itemData[curItemKey].label = val;
setItemData(...[itemData]);
}
const handleDel = () => {
let newTreeData = itemRemove(curItemKey, itemData);
setCurItemKey('');
setCurItemName('');
setCurItemType('');
setItemData([...newTreeData])
}
const sortableChoose = (e) => {
console.log(e)
setIsChoose(true);
const curKey = e.item.getAttribute('data-id');
const curName = e.item.firstChild.innerText;
const curType = e.item.getAttribute('type');
setCurItemKey(curKey);
setCurItemName(curName);
setCurItemType(curType)
};
// 拖拽的添加方法
const sortableAdd = e => {
// 组件名或路径
const nameOrIndex = e.clone.getAttribute('data-id');
// 父节点路径
const parentPath = e.path[1].getAttribute('data-id');
// 拖拽元素的目标路径
const { newIndex } = e;
// 新路径 为根节点时直接使用index
const newPath = parentPath ? `${parentPath}-${newIndex}` : newIndex;
console.log('nameOrIndex:'+nameOrIndex,'parentPath:'+parentPath,'newIndex:'+newIndex,'newPath:'+newPath)
// 判断是否为路径 路径执行移动，非路径为新增
if (isPath(nameOrIndex)) {
// 旧的路径index
const oldIndex = nameOrIndex;
// 克隆要移动的元素
const dragItem = getCloneItem(oldIndex, itemData)
// 比较路径的上下位置 先执行靠下的数据 再执行靠上数据
if (indexToArray(oldIndex) > indexToArray(newPath)) {
// 删除元素 获得新数据
let newTreeData = itemRemove(oldIndex, itemData);
// 添加拖拽元素
newTreeData = itemAdd(newPath, newTreeData, dragItem)
// 更新视图
setItemData([...newTreeData])
return
}
// 添加拖拽元素
let newData = itemAdd(newPath, itemData, dragItem)
// 删除元素 获得新数据
newData = itemRemove(oldIndex, newData);
setItemData([...newData])
return
}
// 新增流程 创建元素 => 插入元素 => 更新视图
const id = nameOrIndex
const newItem = _.cloneDeep(formItemData.find(item => (item.name === id)))
// 为容器或者弹框时增加子元素
if ( newItem.name === 'Containers') {
const ComponentsInfo = _.cloneDeep(GlobalComponent[newItem.name])
// 判断是否包含默认数据
newItem.children = [ComponentsInfo]
}
let Data = itemAdd(newPath, itemData, newItem)
setItemData([...Data])
};
// 拖拽的排序方法
const sortableUpdate = e => {
// 交换数组
const { newIndex, oldIndex } = e;
// 父节点路径
const parentPath = e.path[1].getAttribute('data-id');
// 父元素 根节点时直接调用data
let parent = parentPath ? getItem(parentPath, itemData) : itemData;
// 当前拖拽元素
const dragItem = parent[oldIndex];
// 更新后的父节点
parent = update(parent, {
$splice: [[oldIndex, 1], [newIndex, 0, dragItem]],
});
// 最新的数据 根节点时直接调用data
const Data = parentPath ? setInfo(parentPath, itemData, parent) : parent
// 调用父组件更新方法
setItemData([...Data])
};
// 递归函数
const loop = (arr, index) => {
return (
arr.map((item, i) => {
const indexs = index === '' ? String(i) : `${index}-${i}`;
if (item) {
if (item.children) {
return (
c && c.sortable}
options={{
...sortableOption,
onUpdate: e => sortableUpdate(e),
onAdd: e => sortableAdd(e),
onChoose: e => sortableChoose(e),
onSort: e => setIsChoose(false),
}}
>
{ loop(item.children, indexs) }
)
}
const ComponentInfo = GlobalComponent[item.name]
return (
{
item.name !== 'Divider' &&
{ isChoose ? (indexs === curItemKey ? curItemName : item.label) : item.label}
}
{
renderDiffComponents(item, indexs, ComponentInfo)
}
)
} else {
return null
}
})
)
};
const renderDiffComponents = (item, indexs, ComponentInfo) => {
switch (item.name) {
case 'Divider':
return
{
item.attr.options.map(subItem => )
}
)
default:
return
组件列表
{
formItemData.map(item => (
{item.label + '-' + item.name}
))
}
表单设计
c && c.sortable}
options={{
...sortableOption,
onUpdate: e => sortableUpdate(e),
onAdd: e => sortableAdd(e),
onChoose: e => sortableChoose(e),
onSort: e => setIsChoose(false),
}}
key={uniqueId()}
>
{ loop(itemData, '')}
字段设置
{
isShowModal &&
setIsShowModal(false)}
onOk={() => setIsShowModal(false)}
>
{ loop(itemData, '') }
}
);
}
export default CustomForm;
② CustomForm/utils.js
import _ from 'lodash';
/**
* 将下标数组转为数组
* @param {String|Number} pathStr 字符串类型的树路径 例：2-3-4
* return {Array} 数组类型
*/
const indexToArray = pathStr => `${pathStr}`.split('-').map(n => +n);
/**
*
* @param {String} index 下标路径
* @param {Array} cards treeData
* @return {object} 返回详情对象
*/
const getCloneItem = (index, cards) => {
const arr = indexToArray(index);
let result = {};
arr.forEach(n => {
result = cards[n];
cards = result.children;
});
return _.cloneDeep(result);
}
/**
* 根据下标获取父节点
* @param {String} index 下标路径
* @param {Array} cards treeData
* @return {object} 返回详情对象
*/
const getItem = (pathIndex, cards) => {
const arr = indexToArray(pathIndex)
// 嵌套节点删除
let parent;
if (arr.length === 0) {
return cards
}
arr.forEach((item, index) => {
if (index === 0) {
parent = cards[item]
} else {
parent = parent.children[item]
}
})
if (parent.children) return parent.children
return parent
}
const getParent = (pathIndex, cards) => {
const arr = indexToArray(pathIndex)
// 嵌套节点删除
let parent;
arr.pop()
if (arr.length === 0) {
return cards
}
arr.forEach((item, index) => {
if (index === 0) {
parent = cards[item]
} else {
parent = parent.children[item]
}
})
if (parent.children) return parent.children
return parent
}
/**
* 根据路径删除数据
* @param {*} index
* @param {*} cards
* @return {*}
*/
const itemRemove = (index, cards) => {
let parent = getParent(index, cards);
let arr = indexToArray(index)
let getIndex = arr.pop()
if (parent.children) {
parent.children.splice(getIndex, 1)
return cards
}
parent.splice(getIndex, 1)
return cards
}
/**
*
* @param {*} index
* @param {*} cards
* @param {*} item
*/
const itemAdd = (index, cards, item) => {
let parent = getParent(index, cards);
let arr = indexToArray(index)
let getIndex = arr.pop()
if (parent.children) {
parent.children.splice(getIndex, 0, item)
return cards
}
parent.splice(getIndex, 0, item)
return cards
}
/**
* 根据index设置排序
* @param {Array} arr 节点路径的数组格式
* @param {Array} treeData 树节点数据
* @param {object} param 要替换的数据
*/
const setInfo = (arrPath, treeData, param) => {
const arr = indexToArray(arrPath)
treeData = _.cloneDeep(treeData);
let parent;
arr.forEach((item, index) => {
if (index == 0) {
parent = treeData[item]
} else {
parent = parent.children[item]
}
})
parent.children = param
return treeData
}
/**
*
* @param {*} pathIndex
*/
const isPath = pathIndex => {
let result = true
indexToArray(pathIndex).forEach(item => {
if (isNaN(item)) {
result = false
return false
}
})
return result
}
/**
* 判断hover的路径是否为自己的子元素
* @param {String} dragIndex
* @param {String} hoverIndex
*/
const isChildrenPath = (dragIndex, hoverIndex) => {
let dragIndexArr = String(dragIndex).split('-')
let hoverIndexArr = String(hoverIndex).split('-')
if (hoverIndexArr > dragIndexArr) {
let sliceArr = hoverIndexArr.slice(0, dragIndexArr.length)
if (sliceArr.join('-') === dragIndexArr.join('-')) {
return true
}
}
return false
}
/**
* 根据数组路径 生成所有父级别的路径
* @param {String} index
*/
const generatePathArr = index => {
let arr = []
let indexArr = String(index).split('-');
let data = Array.from(indexArr)
indexArr.forEach((item, i) => {
data.pop()
arr.push(Array.from(data).join('-'))
})
arr.pop()
return arr
}
export { indexToArray, getParent, setInfo, isChildrenPath, generatePathArr, isPath, getCloneItem, getItem, itemRemove, itemAdd }③Custom/config.js
import { Rate, Input, Divider, DatePicker, InputNumber, Switch, Slider, Checkbox, Radio, Select } from 'antd';
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
const { TextArea } = Input;
const CheckboxGroup = Checkbox.Group;
const RadioGroup = Radio.Group;
const options = [];
for (let i = 0; i < 3; i++) {
options.push({
key: i.toString(),
label: `选项 ${i}`,
value: i.toString()
});
}
const GlobalComponent = {
Divider,
DatePicker,
RangePicker,
MonthPicker,
WeekPicker,
Input,
TextArea,
InputNumber,
Switch,
Slider,
CheckboxGroup,
RadioGroup,
Select,
Rate,
};
const formItemData = [
{
name: 'Containers',
attr: {
style: {
border: '1px solid #40a9ff'
}
},
label: '容器'
},
{
name: 'RangePicker',
attr: {
style: {
width: '100%'
},
defaultValue: undefined
},
label: '区间选择框'
},
{
name: 'DatePicker',
attr: {
style: {
width: '100%'
},
defaultValue: undefined
},
label: '日选择框'
},
{
name: 'MonthPicker',
attr: {
style: {
width: '100%'
},
defaultValue: undefined,
placeholder: '请选择月份'
},
label: '月选择框'
},
{
name: 'WeekPicker',
attr: {
style: {
width: '100%',
},
defaultValue: undefined,
placeholder: '请选择周期'
},
label: '周选择框'
},
{
name: 'Input',
attr: {
defaultValue: '',
placeholder: '请输入'
},
label: '文本框'
},
{
name: 'TextArea',
attr: {
defaultValue: '',
placeholder: '请输入'
},
label: '文本域'
},
{
name: 'InputNumber',
attr: {
defaultValue: undefined,
},
label: '数字框'
},
{
name: 'Switch',
attr: {
style: {
width: 44,
},
defaultValue: false,
},
label: '开关'
},
{
name: 'Slider',
attr: {
style: {
width: '100%',
padding: '0'
},
defaultValue: 10
},
label: '滑动条'
},
{
name: 'Rate',
attr: {
style: {
width: '100%',
color: '#47FECF'
},
defaultValue: 0
},
label: '评分'
},
{
name: 'Divider',
attr: {},
label: '分割线'
},
{
name: 'CheckboxGroup',
attr: {
options: options,
defaultValue: []
},
label: '多选框'
},
{
name: 'RadioGroup',
attr: {
options: options,
defaultValue: options[0].value
},
label: '单选框'
},
{
name: 'Select',
attr: {
options: options,
defaultValue: options[0].value
},
label: '下拉框'
},
];
export { formItemData, GlobalComponent, options }④组件EditableTable/index.js
import React from 'react';
import PropTypes from 'prop-types';
import { Table, Input, InputNumber, Form, Button } from 'antd';
import './index.less';
const EditableContext = React.createContext();
class EditableCell extends React.Component {
getInput = () => {
if (this.props.inputType === 'number') {
return
{editing ? (
{getFieldDecorator(dataIndex, {
rules: [
{
required: true,
message: `请输入 ${title}!`,
},
],
initialValue: record[dataIndex],
})(this.getInput())}
) : (
children
)}
);
};
render() {
return {this.renderCell} ;
}
}
class EditableTable extends React.Component {
constructor(props) {
super(props);
const { options } = this.props;
this.state = { data: options, editingKey: '', count: options.length };
this.columns = [
{
title: '显示值',
dataIndex: 'label',
width: '30%',
editable: true,
},
{
title: '传递值',
dataIndex: 'value',
width: '20%',
editable: true,
},
{
title: '操作',
dataIndex: 'operation',
render: (text, record) => {
const { editingKey } = this.state;
const editable = this.isEditing(record);
return editable ? (
{form => (
this.save(form, record.key)}
style={{ marginRight: 15 }}
>
保存
)}
this.cancel(record.key)}>取消
) : (
this.edit(record.key)}>编辑
this.delete(record.key)}>删除
);
},
},
];
}
componentDidUpdate({ curItemKey }) {
if (curItemKey !== this.props.curItemKey) {
this.setState({ data: this.props.options })
}
}
isEditing = record => record.key === this.state.editingKey;
cancel = () => {
this.setState({ editingKey: '' });
};
save(form, key) {
form.validateFields((error, row) => {
if (error) {
return;
}
const newData = [...this.state.data];
const index = newData.findIndex(item => key === item.key);
if (index > -1) {
const item = newData[index];
newData.splice(index, 1, {
...item,
...row,
});
} else {
newData.push(row);
}
this.props.getDataSource(newData)
this.setState({ data: newData, editingKey: '' });
});
}
edit(key) {
this.setState({ editingKey: key });
}
delete = key => {
const data = [...this.state.data];
this.props.getDataSource(data.filter(item => item.key !== key))
this.setState({ data: data.filter(item => item.key !== key) });
};
add = () => {
const { count, data } = this.state;
const newData = {
key: count,
label: `选项 ${count}`,
value: count
};
this.props.getDataSource([...data, newData])
this.setState({
data: [...data, newData],
count: count + 1,
});
};
render() {
const components = {
body: {
cell: EditableCell,
},
};
const columns = this.columns.map(col => {
if (!col.editable) {
return col;
}
return {
...col,
onCell: record => ({
record,
inputType: col.dataIndex === 'value' ? 'number' : 'text',
dataIndex: col.dataIndex,
title: col.title,
editing: this.isEditing(record),
}),
};
});
return (
);
}
}
const EditableFormTable = Form.create()(EditableTable);
EditableCell.propTypes = {
editing: PropTypes.bool,
dataIndex: PropTypes.string,
title: PropTypes.string,
inputType: PropTypes.string,
record: PropTypes.object,
index: PropTypes.string,
children: PropTypes.array.isRequired,
restProps: PropTypes.object,
}
EditableTable.propTypes = {
form: PropTypes.object.isRequired,
getDataSource: PropTypes.func.isRequired,
curItemKey: PropTypes.string.isRequired,
options: PropTypes.array,
disabled: PropTypes.bool.isRequired
}
export default EditableFormTable3. 其他工具
①lodash（https://www.lodashjs.com/）。是一个一致性、模块化、高性能的 JavaScript 实用工具库，它可以通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。
②immutability-helper（https://github.com/kolodny/immutability-helper）。它可以更改数据副本而不更改原始源。