Index.js:
import React from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import { Form, Button, Collapse, Col, Row } from 'antd'
import Header from './Header'
import useList from './useList'
import { DndProvider } from 'react-dnd'
import { HTML5Backend } from 'react-dnd-html5-backend'
import { Icon } from '../../../../components/light'
import { getComponentArr, getAttrFields } from './config'
import List from './List'
import BtnField from './BtnField'
const { Panel } = Collapse
function Index(props) {
const {
applicationTitle,
dataSource,
form,
formForAttr,
initValues,
initValuesForAttr,
tableId,
cardActiveId,
moveCard,
handleFinish,
handleFinishFailed,
handleAdd,
handleSave,
handleCardActiveId,
handleValuesChange,
handleDelete,
} = useList(props)
return (
<div className="m-admin-content">
<Header
applicationTitle={applicationTitle}
tableId={tableId}
onSave={handleSave}
></Header>
<div className="m-design-wrap">
<div className="m-design-sidebar">
<Collapse defaultActiveKey={['1', '2', '3']}>
<Panel header="通用字段" key="1">
<Row gutter={[2, 2]}>
<DndProvider backend={HTML5Backend}>
{getComponentArr().map((fieldInfo, index) => (
<BtnField key={index} fieldInfo={fieldInfo} onAdd={handleAdd} />
))}
</DndProvider>
</Row>
</Panel>
<Panel header="联系信息字段" key="2">
<Row gutter={[2, 2]}>
<Col span={8}>
<div className="m-component-item">
<div></div>
<div>敬请期待</div>
</div>
</Col>
</Row>
</Panel>
<Panel header="商品字段" key="3">
<Row gutter={[2, 2]}>
<Col span={8}>
<div className="m-component-item">
<div></div>
<div>敬请期待</div>
</div>
</Col>
</Row>
</Panel>
</Collapse>
</div>
<div className="m-design-content">
<Form
form={form}
labelCol={{ span: 4 }}
wrapperCol={{ span: 17 }}
initialValues={{ ...initValues }}
onFinish={handleFinish}
onFinishFailed={handleFinishFailed}
>
<DndProvider backend={HTML5Backend}>
<List
dataSource={dataSource}
cardActiveId={cardActiveId}
moveCard={moveCard}
handleCardActiveId={handleCardActiveId}
handleDelete={handleDelete}
/>
</DndProvider>
<Form.Item
wrapperCol={{ offset: 4, span: 17 }}
className="m-design-footer"
>
<Button type="primary" htmlType="submit" className="m-space">
<Icon name="submit" className="m-tool-btn-icon"></Icon>
提交
</Button>
<Button
className="m-space"
onClick={() => {
form.resetFields()
}}
>
<Icon name="reset" className="m-tool-btn-icon"></Icon>
重置
</Button>
</Form.Item>
</Form>
</div>
<div className="m-design-attr">
<Form
form={formForAttr}
labelCol={{ span: 8 }}
wrapperCol={{ span: 15 }}
initialValues={{ ...initValuesForAttr }}
scrollToFirstError={true}
onValuesChange={handleValuesChange}
id="m-set-application-modal-form"
className="m-set-application-modal-form"
>
{getAttrFields()}
</Form>
</div>
</div>
</div>
)
}
const mapStateToProps = (state) => {
return {}
}
const mapDispatchToProps = (dispatch) => {
return {
onSetState(key, value) {
dispatch({ type: 'SET_LIGHT_STATE', key, value })
},
onDispatch(action) {
dispatch(action)
},
}
}
export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Index))
BtnField.js:
import { useDrag } from 'react-dnd'
import { ItemTypes } from './ItemTypes'
import { Icon } from '../../../../components/light'
import { Col } from 'antd'
export default function BtnField({ fieldInfo, onAdd }) {
const [{ isDragging }, drag] = useDrag(() => ({
type: ItemTypes.BTN_FIELD,
item: { ...fieldInfo },
end: (item, monitor) => {
const dropResult = monitor.getDropResult()
if (item && dropResult) {
console.log(`${item.title} 加入 ${dropResult.name}`)
onAdd({fieldInfo})
}
},
collect: (monitor) => ({
isDragging: monitor.isDragging(),
handlerId: monitor.getHandlerId(),
}),
}))
const opacity = isDragging ? 0.4 : 1
return (
<Col span={8}>
<div
className="m-component-item"
ref={drag}
style={{ opacity }}
data-testid={`box-${fieldInfo.title}`}
onClick={() => onAdd({fieldInfo})}
>
<div>
<Icon name={fieldInfo.icon}></Icon>
</div>
<div>{fieldInfo.title}</div>
</div>
</Col>
)
}
config.js:
import { Form, Input, Button } from 'antd'
import { FieldRequired } from '../../../../components/light'
//表格列字段
const getColumns = (props) => {
return [
{
title: 'ID',
dataIndex: 'id',
},
{
title: '字段名称',
dataIndex: 'title',
},
{
title: '英文名称',
dataIndex: 'dataIndex',
},
{
title: '表单组件名',
dataIndex: 'formComponentName',
render: (text) => {
return text ? text : '无'
},
},
{
title: '渲染函数名',
dataIndex: 'renderFunName',
render: (text) => {
return text ? text : '无'
},
},
{
title: '字段必填',
dataIndex: 'rules',
render: (text) => {
const result = Array.isArray(text) && text.length > 0 && text[0]
return result ? (result.required ? '是' : '否') : '否'
},
},
{
title: '表格展示',
dataIndex: 'isColumn',
render: (text) => {
return text ? '是' : '否'
},
},
// {
// title: '搜索',
// dataIndex: 'isSearch',
// render: (text) => {
// return text ? '是' : '否'
// },
// },
{
title: '添加/编辑',
dataIndex: 'isModalField',
render: (text) => {
return text ? '是' : '否'
},
},
{
title: '顺序号',
dataIndex: 'orderIndex',
render: (text) => {
return typeof text === 'number' ? text : '无'
},
},
{
title: '操作',
220,
render: (record) => {
if (record.isSystem) {
return '系统字段'
} else {
return (
<div className="m-action">
<Button
className="m-action-btn"
size="small"
danger
onClick={() => props.onDelete(record)}
>
删除
</Button>
<Button
className="m-action-btn"
size="small"
onClick={() => props.onCheck(record)}
>
查看
</Button>
<Button
className="m-action-btn"
size="small"
onClick={() => props.onEdit(record)}
>
编辑
</Button>
</div>
)
}
},
},
]
}
//组件元素
const getComponentArr = () => {
return [
{
icon: 'input',
title: '单行文本',
formComponentName: "Input",
dataIndex: 'input',
renderFunName: "renderSpan"
},
{
icon: 'textarea',
title: '多行文本',
formComponentName: "TextArea",
dataIndex: 'textArea',
renderFunName: "renderSpan"
},
{
icon: 'number-input',
title: '数字',
formComponentName: "InputNumber",
dataIndex: 'inputNumber ',
renderFunName: "renderSpan"
},
]
}
//添加编辑查看对话框表单字段
const getAttrFields = () => {
return (
<>
<Form.Item
label="字段名称"
name="title"
rules={[
{
required: true,
message: '请输入字段名称！',
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="英文名称"
name="dataIndex"
rules={[
{
required: true,
message: '请输入字段名称！',
},
]}
>
<Input />
</Form.Item>
<Form.Item label="字段必填" name="rules">
<FieldRequired></FieldRequired>
</Form.Item>
</>
)
}
export { getColumns, getComponentArr, getAttrFields }
Header.js:
import React from 'react'
import { Button } from 'antd'
import { withRouter, Link } from 'react-router-dom'
import { Icon } from '../../../../components/light'
function Header(props) {
const { applicationTitle, tableId, onSave } = props
return (
<div className="m-design-header">
<div className="m-design-header-title">
<Icon
name="goback"
title="返回"
className="m-set-application-header-icon"
onClick={() => props.history.go(-1)}
></Icon>
<span title={applicationTitle}>{applicationTitle}</span>
</div>
<div className="m-design-header-middle"></div>
<div className="m-design-header-action">
<Button type="primary" onClick={onSave}>
保存
</Button>
<Link to={`/light/formview?id=${tableId}`} target="_blank" style={{display: 'inherit'}}>
<Button>预览</Button>
</Link>
</div>
</div>
)
}
export default withRouter(Header)
ItemTypes.js:
export const ItemTypes = {
LIST_ITEM: 'listItem',
BTN_FIELD: 'btnField' //'btnField',
}
List.js:
import { useDrop } from 'react-dnd'
import { ItemTypes } from './ItemTypes'
import ListItem from './ListItem'
export default function List({
dataSource,
cardActiveId,
moveCard,
handleCardActiveId,
handleDelete,
}) {
const [{ canDrop, isOver }, drop] = useDrop(() => ({
accept: ItemTypes.BTN_FIELD,
drop: () => ({ name: '容器' }),
collect: (monitor) => ({
isOver: monitor.isOver(),
canDrop: monitor.canDrop(),
}),
}))
const isActive = canDrop && isOver
return (
<div
ref={drop}
className={`m-center-list-wrap ${isActive ? 'active' : ''}`}
>
{dataSource.map((card, index) => (
<ListItem
key={card.id}
index={index}
cardActiveId={cardActiveId}
card={card}
moveCard={moveCard}
onCardActiveId={handleCardActiveId}
onDelete={handleDelete}
/>
))}
</div>
)
}
ListItem.js:
import { useRef } from 'react'
import { useDrag, useDrop } from 'react-dnd'
import { ItemTypes } from './ItemTypes'
import { Form, Input, Button } from 'antd'
import { getFormComponentArr } from '../../../../utils/tools'
export default function ListItem({
index,
cardActiveId,
card,
moveCard,
onCardActiveId,
onDelete,
}) {
const ref = useRef(null)
const [{ handlerId }, drop] = useDrop({
accept: ItemTypes.LIST_ITEM,
collect(monitor) {
return {
handlerId: monitor.getHandlerId(),
}
},
hover(item, monitor) {
if (!ref.current) {
return
}
const dragIndex = item.index
const hoverIndex = index
// Don't replace items with themselves
if (dragIndex === hoverIndex) {
return
}
// Determine rectangle on screen
const hoverBoundingRect = ref.current?.getBoundingClientRect()
// Get vertical middle
const hoverMiddleY =
(hoverBoundingRect.bottom - hoverBoundingRect.top) / 2
// Determine mouse position
const clientOffset = monitor.getClientOffset()
// Get pixels to the top
const hoverClientY = clientOffset.y - hoverBoundingRect.top
// Only perform the move when the mouse has crossed half of the items height
// When dragging downwards, only move when the cursor is below 50%
// When dragging upwards, only move when the cursor is above 50%
// Dragging downwards
if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
return
}
// Dragging upwards
if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
return
}
// Time to actually perform the action
moveCard(dragIndex, hoverIndex)
// Note: we're mutating the monitor item here!
// Generally it's better to avoid mutations,
// but it's good here for the sake of performance
// to avoid expensive index searches.
item.index = hoverIndex
console.log(hoverIndex)
},
})
const [{ isDragging }, drag] = useDrag({
type: ItemTypes.LIST_ITEM,
item: () => {
return { id: card.id, index }
},
collect: (monitor) => ({
isDragging: monitor.isDragging(),
}),
})
const opacity = isDragging ? 0 : 1
drag(drop(ref))
//console.log(card)
const renderDom = () => {
if (card.isModalField) {
const result = getFormComponentArr().find(
(componentItem) =>
componentItem.formComponentName === card.formComponentName
)
return (
<div
ref={ref}
style={{ opacity }}
data-handler-id={handlerId}
className={`m-design-card ${
cardActiveId === card.id ? 'active' : ''
}`}
onClick={() => onCardActiveId({ id: card.id })}
>
<div className="m-design-card-info">
<Form.Item
key={card.id}
label={card.title}
name={card.dataIndex}
rules={card.rules}
>
{result ? result.component : <Input></Input>}
</Form.Item>
</div>
<div className="m-design-card-action">
<Button
className="m-action-btn"
size="small"
danger
onClick={() => onDelete(card)}
>
删除
</Button>
</div>
</div>
)
} else {
return null
}
}
return <>{renderDom()}</>
}
useList.js:
import { useState, useEffect, useCallback } from 'react'
import Api from '../../../../api'
import { Modal, Form, message } from 'antd'
import update from 'immutability-helper'
import { getRouterSearchObj } from '../../../../utils/tools'
import { v4 as uuidv4 } from 'uuid'
const { confirm } = Modal
let currentDataSource = []
export default function useList(props) {
const [form] = Form.useForm()
const [formForAttr] = Form.useForm()
const [dataSource, setDataSource] = useState([])
const [applicationTitle, setApplicationTitle] = useState()
const [cardActiveId, setCardActiveId] = useState()
const [initValuesForAttr, setInitValuesForAttr] = useState({})
//获取路由参数
const routerSearchObj = getRouterSearchObj(props)
const tableId = routerSearchObj.id - 0
const addInitValues = {}
//搜索
const handleSearch = () => {
Api.light.fieldsSearch({ tableId }).then((res) => {
if (res.code === 200) {
let tempDataSource = res.data.fields.filter((item) => !item.isSystem)
setDataSource(tempDataSource)
setApplicationTitle(res.data.title)
if (Array.isArray(tempDataSource) && tempDataSource.length > 0) {
handleCardActiveId({
id: tempDataSource[0].id,
myDataSource: tempDataSource,
})
}
}
})
}
//拖动改变顺序
const moveCard = useCallback(
(dragIndex, hoverIndex) => {
const dragCard = dataSource[dragIndex]
setDataSource(
update(dataSource, {
$splice: [
[dragIndex, 1],
[hoverIndex, 0, dragCard],
],
})
)
},
[dataSource]
)
//添加新字段
const handleAdd = ({ fieldInfo }) => {
const orderIndexArr = currentDataSource.map((item) => item.orderIndex)
const orderIndex = Math.max.apply(Math, orderIndexArr) + 1
const id = uuidv4()
let tempValues = {
id,
dataIndex: `${fieldInfo.dataIndex}-${id}`,
isColumn: true,
isModalField: true,
orderIndex,
}
console.log({ ...fieldInfo, ...tempValues })
console.log(currentDataSource)
setDataSource([...currentDataSource, { ...fieldInfo, ...tempValues }])
}
//保存
const handleSave = () => {
console.log(dataSource)
const newDataSource = dataSource.map((item, index) => {
return { ...item, orderIndex: index + 1 }
})
console.log(newDataSource)
Api.light
.fieldsEditAll({ tableId, dataItem: newDataSource })
.then((res) => {
if (res.code === 200) {
message.success(res.message)
}
})
}
//删除
const handleDelete = (record) => {
console.log('删除, id:', record.id)
confirm({
title: '确认要删除吗？',
onOk() {
const newDataSource = dataSource.filter(item => item.id !== record.id)
setDataSource(newDataSource)
},
})
}
//添加或编辑
const handleFinish = (values) => {
console.log('Success:', values)
}
//校验失败
const handleFinishFailed = (errorInfo) => {
console.log('Failed:', errorInfo)
}
//设置当前card
const handleCardActiveId = ({ id, myDataSource = dataSource }) => {
setCardActiveId(id)
let currentItem = myDataSource.find((item) => item.id === id)
const rules =
Array.isArray(currentItem.rules) && currentItem.rules.length > 0
? currentItem.rules[0]
: {}
setInitValuesForAttr({ ...currentItem, rules })
}
//修改表单字段属性
const handleValuesChange = (changedValues, allValues) => {
const cardActiveIndex = dataSource.findIndex(
(item) => item.id === cardActiveId
)
let tempValues = {
rules: [allValues.rules],
}
dataSource[cardActiveIndex] = {
...dataSource[cardActiveIndex],
...allValues,
...tempValues,
}
setDataSource([...dataSource])
}
useEffect(() => {
formForAttr.resetFields()
// eslint-disable-next-line
}, [initValuesForAttr])
//挂载完
useEffect(() => {
handleSearch()
// eslint-disable-next-line
}, [])
//dataSource更新，同步更新currentDataSource,handleAdd函数中dataSource的值为空数组，这是一个bug
useEffect(() => {
currentDataSource = dataSource
}, [dataSource])
return {
form,
formForAttr,
initValuesForAttr,
dataSource,
applicationTitle,
addInitValues,
tableId,
cardActiveId,
handleSearch,
moveCard,
handleDelete,
handleFinish,
handleFinishFailed,
handleAdd,
handleSave,
handleCardActiveId,
handleValuesChange,
}
}