From 9eebc11409e3478cb42b9b4b9edc222638e31517 Mon Sep 17 00:00:00 2001 From: zhangwenshuai Date: Sun, 7 Jun 2020 20:44:43 +0800 Subject: [PATCH] temp --- components/apolloTable/component/Cell.tsx | 30 ++- .../component/base/_utils/transferAttr.tsx | 4 +- .../component/base/detail/dateRange/index.tsx | 2 +- .../component/base/edit/date/index.tsx | 1 + .../component/base/edit/number/index.tsx | 26 ++- components/apolloTable/editFormV3/index.less | 69 ++++++ components/apolloTable/editFormV3/index.tsx | 203 ++++++++++++++++++ 7 files changed, 317 insertions(+), 18 deletions(-) create mode 100644 components/apolloTable/editFormV3/index.less create mode 100644 components/apolloTable/editFormV3/index.tsx diff --git a/components/apolloTable/component/Cell.tsx b/components/apolloTable/component/Cell.tsx index 3619fba..1026312 100644 --- a/components/apolloTable/component/Cell.tsx +++ b/components/apolloTable/component/Cell.tsx @@ -1,9 +1,9 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import { Checkbox, message, Popover } from 'antd'; import classNames from 'classnames'; import _ from 'lodash'; import { config } from './base/config'; -import { getEditComponent } from './base'; +import { getEditComponent, getFormat, setFormat } from './base'; import s from './Cell.less'; import { CellProps, CellDataProps } from './interface'; import FormHelper from '../utils/formHelper'; @@ -52,12 +52,13 @@ const Cell = (props: CellProps) => { setStatus('detail'); }, [cellData]); - const changeCellData = (changedValue: any) => {}; + const changeCellData = (changedValue: any, option?: any) => {}; const emitChangeCellData = (changedValue: any, optionValue: any) => { const temp: CellDataProps[] = []; cellData.map((item: CellDataProps) => { temp.push({ text: item.text, value: item.value }); }); + if (_.isEqual(temp, changedValue)) { setStatus('detail'); return; @@ -178,9 +179,6 @@ const Cell = (props: CellProps) => { changeSelectedCell && changeSelectedCell(`${position}_${cellKey}`); } }} - // onDoubleClick={() => { - // cellEditable && !readOnlyFlag && setStatus('edit'); - // }} style={style} > {rowSelection && columnIndex === 0 &&
{getCheckbox()}
} @@ -243,22 +241,32 @@ const Cell = (props: CellProps) => { }; const selfRenderEditCell = () => { - let editConfig; + let editConfig: any; if (typeof renderEditCell === 'function') { editConfig = renderEditCell({ cellData, rowData: record, columnConfig }); } else { editConfig = config[String(columnType)] || config['1']; } - const EditComp: any = getEditComponent(editConfig, true); - + const EditComp: any = editConfig.cellComp; + const transferColumn = transferAttr(columnType, { + ...(config.componentAttr || {}), + ...(columnConfig.columnAttrObj || {}), + }); + const newProps = { + ...(transferColumn || {}), + }; return (
{ + const value = setFormat(editConfig, columnConfig, changedValue, optionValue); + emitChangeCellData(value, optionValue); + }} style={{ minHeight: cellStyle.height, borderRadius: 0, diff --git a/components/apolloTable/component/base/_utils/transferAttr.tsx b/components/apolloTable/component/base/_utils/transferAttr.tsx index 6930503..267cdba 100644 --- a/components/apolloTable/component/base/_utils/transferAttr.tsx +++ b/components/apolloTable/component/base/_utils/transferAttr.tsx @@ -15,7 +15,7 @@ export const transferAttr = (columnType, columnAttrObj) => { } columnAttrObj.precision = precision9; columnAttrObj.min = columnAttrObj.minValue; - columnAttrObj.max = columnAttrObj.maxValue || 10 ** columnAttrObj.intPartMaxLength; + columnAttrObj.max = columnAttrObj.maxValue || 10 ** columnAttrObj.intPartMaxLength - 1 / 10 ** precision9; break; case '10': let precision10; @@ -25,7 +25,7 @@ export const transferAttr = (columnType, columnAttrObj) => { const precision = Number(precision10) - 2; columnAttrObj.precision = precision > 0 ? precision : 0; columnAttrObj.min = columnAttrObj.minValue; - columnAttrObj.max = columnAttrObj.maxValue || 10 ** columnAttrObj.intPartMaxLength; + columnAttrObj.max = columnAttrObj.maxValue || 10 ** columnAttrObj.intPartMaxLength - 1 / 10 ** precision10; break; case '11': case '20': diff --git a/components/apolloTable/component/base/detail/dateRange/index.tsx b/components/apolloTable/component/base/detail/dateRange/index.tsx index 3404b17..56d4b2f 100644 --- a/components/apolloTable/component/base/detail/dateRange/index.tsx +++ b/components/apolloTable/component/base/detail/dateRange/index.tsx @@ -29,7 +29,7 @@ export const ApolloDateRangeDetail = (props: DateProps) => { const arr: any[] = []; formatValue.map((item) => { - arr.push(item.format ? item.format(format) : item); + arr.push(item && item.format ? item.format(format) : item); }); const dateStr = arr.join('~'); diff --git a/components/apolloTable/component/base/edit/date/index.tsx b/components/apolloTable/component/base/edit/date/index.tsx index 37d3ee0..900d638 100644 --- a/components/apolloTable/component/base/edit/date/index.tsx +++ b/components/apolloTable/component/base/edit/date/index.tsx @@ -11,6 +11,7 @@ export const ApolloDate = (props: any) => { onChange(date, dateString); } }; + return null; return ( { const { onChange, columnConfig }: any = props; const { columnAttrObj = {} } = columnConfig; + const { precision, dataType } = columnAttrObj; const selfProps = antiAssign(props, ['columnConfig', 'onChange']); - const changeValue = (value) => { + const changeValue = (newValue: any) => { + if (dataType === 'INT') { + if (!intNumberReg.test(newValue)) { + return false; + } + } + if (dataType === 'DECIMAL') { + if (!floatNumberReg.test(newValue)) { + return false; + } + } if (typeof onChange === 'function') { - onChange(value); + onChange(newValue); } }; - const precision = selfProps.precision || columnAttrObj.precision || 0; const { onEmitChange, ...o } = selfProps; - return ; + return ( + + ); }; diff --git a/components/apolloTable/editFormV3/index.less b/components/apolloTable/editFormV3/index.less new file mode 100644 index 0000000..bafc69a --- /dev/null +++ b/components/apolloTable/editFormV3/index.less @@ -0,0 +1,69 @@ +@import "~@/theme/common"; + +.wrap { + position: relative; + width: 580px; + + .titleCls { + position: absolute; + left: 26px; + width: 520px; + font-size: 16px; + color: @textPrimaryColor; + line-height: 62px; + z-index: 10; + background: #fff; + } + + .formItemCls { + padding: 0 45px 0 26px; + max-height: 520px; + min-height: 520px; + overflow-x: hidden; + overflow-y: auto; + border-bottom: 1px solid #ECECEC; + margin: 62px 0 68px; + position: relative; + + :global(.ant-form-item-control) { + line-height: 28px; + } + :global(.ant-form-item-required:before){ + position: initial; + vertical-align: middle; + } + .titleContainer{ + vertical-align: middle; + .colIcon{ + width: @textFontGen; + color: @textSupplyColor; + } + .itemTitle{ + margin-left: @marginSm; + color: @textPrimaryColor; + } + } + + } + + .itemCls { + + } + + .btnCls { + width: 68px; + margin-left: 10px; + } + + .buttonWrap { + position: absolute; + bottom: 16px; + right: 45px; + + .delBtnCls { + color: @errorColor; + position: relative; + left: -303px + } + } +} diff --git a/components/apolloTable/editFormV3/index.tsx b/components/apolloTable/editFormV3/index.tsx new file mode 100644 index 0000000..7ee4b04 --- /dev/null +++ b/components/apolloTable/editFormV3/index.tsx @@ -0,0 +1,203 @@ +/** + * 表单提交：handleSubmit: Function, + * + * 表单取消：handleCancel:Function + * + * 数据回显：mapPropsToFields:Function + * + * 监听表单值发生变化是的回掉：onValuesChange:Function + * + * 样式：propClass：object + * */ +import React, { Component } from 'react'; +import { Form, Button } from 'antd'; +import styles from './index.less'; +import { config } from '../component/base/config'; +import { transferAttr } from '../component/base/_utils/transferAttr'; +import { getFormat } from '../component/base'; +import { Provider } from '../component/context'; +import { defaultLocale } from '@/submodule/components/apolloTable/locale'; + +const FormItem = Form.Item; + +class FormWrap extends Component { + handleSubmit = (e) => { + e.preventDefault(); + e.stopPropagation(); + const { rowId, form, handleSubmit } = this.props; + form.validateFieldsAndScroll((err, values) => { + if (!err) { + const result = []; + Object.keys(values).map((el) => { + result.push({ + columnCode: el, + cellValueList: values[el], + }); + }); + handleSubmit({ data: { id: rowId, value: result } }); + } + }); + }; + + handleCancel = () => { + const { handleCancel } = this.props; + if (typeof handleCancel === 'function') { + handleCancel(); + } + }; + + handleDelete = () => { + const { rowId, handleDelete } = this.props; + if (typeof handleDelete === 'function') { + handleDelete({ data: { id: rowId } }); + } + }; + + renderLabel = (item) => { + // const { icon } = config[item.columnType]; + return ( + + {/* icon &&
{icon}
*/} + {item.columnChsName} + + ); + }; + + renderEditForm = (item) => { + const { getFieldDecorator } = this.props.form; + const { rowData } = this.props; + const { + columnType, + columnName, + 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 ( + + {getFieldDecorator(columnName, { + validateFirst, + validateTrigger, + rules: [{ required: !!item.requiredFlag }, ...rules], + // initialValue: getFormat(detailConfig, item, value), + })()} + + ); + }; + + getContext = () => { + const { locale } = this.props; + if (locale) { + if (locale.context) { + if (locale.lang && defaultLocale[locale.lang]) { + return { ...defaultLocale[locale.lang], ...locale.context }; + } + return locale.context; + } + } + return defaultLocale.cn; + }; + + render() { + const { loading, isShowDelBtn, data, btnWrapStyle, name, colsNum } = this.props; + + return ( + +
+

{name || '客户跟进'}

+
{ + this.wrapDom = r; + }} + > +
+ {data.map((item: any, i: number) => { + return ( +
1 && i % colsNum === 0 ? '-50px' : 0, + paddingLeft: colsNum > 1 ? '50px' : 0, + }} + > + {this.renderEditForm(item)} +
+ ); + })} +
+
+
+
+ {isShowDelBtn ? ( + + ) : null} + + +
+
+
+ + ); + } +} + +function mapPropsToFields(props) { + const returnObj = {}; + const { data, renderEditForm, rowData } = props; + data.forEach((el) => { + // let detailConfig: any; + // if (typeof renderEditForm === 'function') { + // detailConfig = renderEditForm({ cellData: el.value, rowData, columnConfig: el }); + // } else { + // detailConfig = config[String(el.columnType)] || config['1']; + // } + // const formatValue = getFormat(detailConfig, el, el.value); + // console.log('formatValue',formatValue) + returnObj[el.columnType] = Form.createFormField({ + value: el.value, + }); + }); + return returnObj; +} + +function onValuesChange(props, changedValues, allValues) { + if (props.changeValue) { + props.changeValue(changedValues, allValues); + } +} + +export default Form.create({ name: 'form_view', mapPropsToFields, onValuesChange })(FormWrap); -- 2.21.0