diff --git a/components/apolloTable/editForm/index.less b/components/apolloTable/editForm/index.less new file mode 100644 index 0000000000000000000000000000000000000000..bd7a8e6c818cdfe0bfb1472fd172d9d414300c3b --- /dev/null +++ b/components/apolloTable/editForm/index.less @@ -0,0 +1,39 @@ +@import '~@/theme/common'; +.wrap { + position: relative; + //width: 580px; + background: #fff; + .item { + display: inline-block; + } + .row { + display: flex; + background-color: rgba(251, 251, 251, 1); + .listLeft { + width: 150px; + padding: 12px; + text-align: right; + align-self: center; + background-color: rgba(251, 251, 251, 1); + } + .listRight { + flex: 1; + padding: 12px 20px; + background-color: #fff; + .item { + white-space: initial; + } + } + } + .btns { + display: flex; + align-items: center; + justify-content: center; + .btn { + margin-left: @marginGen; + &:first-child { + margin-left: 0; + } + } + } +} diff --git a/components/apolloTable/editForm/index.tsx b/components/apolloTable/editForm/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..2a5f48d37399cc7d55ea04d77062d6a0a0b317e9 --- /dev/null +++ b/components/apolloTable/editForm/index.tsx @@ -0,0 +1,138 @@ +import React, { useEffect, useState } from 'react'; +import _ from 'lodash'; +import { Form, Button } from 'antd'; +import { config } from '../component/base/config'; +import { transferAttr } from '../component/base/_utils/transferAttr'; +import { setFormat, getFormat } from '../component/base'; +import styles from './index.less'; + +const FormItem = Form.Item; +const EditForm = (props: any) => { + const [form] = Form.useForm(); + const { + data, rowData, onFinish, initialValues, onCancel, colsNum = 1, + } = props; + const [loading, setLoading] = useState(false); + + useEffect(() => { + form.resetFields(); + }, [data]); + if (!rowData) { + form.resetFields(); + } + + const renderEditForm = (item: any) => { + const { + columnType, + columnName, + columnChsName, + columnAttrObj, + value, + renderEditForm, + readOnlyFlag, + rules = [], + validateFirst = true, + validateTrigger = 'onChange', + } = item; + let detailConfig: any; + if (typeof renderEditForm === 'function') { + detailConfig = renderEditForm({ cellData: value, rowData, columnConfig: item }); + } else { + detailConfig = config[String(columnType)] || config['1']; + } + const EditComp: any = detailConfig.editComp; + const newProps = { + ...(detailConfig.componentAttr || {}), + ...(columnAttrObj || {}), + }; + const transferColumn = transferAttr(columnType, newProps); + // if(item.columnName==='emails'){ + // debugger + // } + return ( + + + + ); + }; + const formItemLayout = { + labelCol: { span: 24 }, + wrapperCol: { span: 24 }, + }; + const onSelfFinish = async (values: any) => { + const newValues: any[] = []; + _.keys(values).map((key) => { + const item = data.find((temp: any) => { + return temp.columnName === key; + }); + const { columnType, value, renderEditForm, readOnlyFlag } = item; + if (readOnlyFlag) { + return; + } + let detailConfig: any; + if (typeof renderEditForm === 'function') { + detailConfig = renderEditForm({ cellData: value, rowData, columnConfig: item }); + } else { + detailConfig = config[String(columnType)] || config['1']; + } + // if(key==='contactList'){ + // debugger + // } + const cellValueList = setFormat(detailConfig, item, values[key], value); + newValues.push({ + columnCode: key, + cellValueList, + }); + }); + if (typeof onFinish === 'function') { + await setLoading(true); + await onFinish(newValues); + await setLoading(false); + } + }; + return ( +
+
+ {data.map((item: any, i: number) => { + return ( +
1 && i % colsNum === 0 ? '-50px' : 0, + paddingLeft: colsNum > 1 ? '50px' : 0, + }} + > + {renderEditForm(item)} +
+ ); + })} +
+ + +
+
+
+ ); +}; +export default EditForm;