diff --git a/src/apollo-table/component/Cell.less b/src/apollo-table/component/Cell.less index d7dc642bc5f0a5ab5db7f00e58422babc4f6ac89..80181b2745fbc2e19d3eee7bec3906e49f0f06a2 100644 --- a/src/apollo-table/component/Cell.less +++ b/src/apollo-table/component/Cell.less @@ -15,6 +15,7 @@ position: absolute; z-index: 1; width: 100%; + height: 100%; top: 0; left: 0; } diff --git a/src/apollo-table/component/Cell.tsx b/src/apollo-table/component/Cell.tsx index 6f25299aa7507a6054da4489baa71784e716a85a..c71dfa7a5a476a23e44100e0b142268461a5bd09 100644 --- a/src/apollo-table/component/Cell.tsx +++ b/src/apollo-table/component/Cell.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { message } from 'antd'; import { config } from './config'; import s from './Cell.less'; @@ -11,7 +11,7 @@ interface CellData { } const Cell = (props: CellProps) => { const { columnConfig, cellClassName, cellStyle, rowData, cellData, emitChangeCell } = props; - const { width, columnType, columnName, requiredFlag } = columnConfig || {}; + const { width, columnType, columnName, requiredFlag, renderDetailCell, renderEditCell } = columnConfig || {}; if (config[String(columnType)] === undefined) { return null; @@ -19,6 +19,10 @@ const Cell = (props: CellProps) => { const Comp = config[String(columnType)].component; const [status, setStatus] = useState('detail'); + useEffect(() => { + setStatus('detail'); + }, [cellData]); + const changeCellData = (changedValue) => { console.log('onChange', changedValue); }; @@ -29,6 +33,7 @@ const Cell = (props: CellProps) => { temp.push({ text: item.text, value: item.value }); }); if (_.isEqual(temp, changedValue)) { + setStatus('detail'); return; } changeValue(changedValue, optionValue); @@ -67,7 +72,11 @@ const Cell = (props: CellProps) => { } }; - const renderDetailCell = () => { + const selfRenderDetailCell = () => { + let detailCell = null; + if (typeof renderDetailCell === 'function') { + detailCell = renderDetailCell({ cellData, rowData, columnConfig }); + } return (
{ setStatus('edit'); }} > - + {detailCell} + {!detailCell && }
); }; - const renderEditCell = () => { + const selfRenderEditCell = () => { + let editCell = null; + if (typeof renderEditCell === 'function') { + editCell = renderEditCell({ cellData, rowData, columnConfig }); + } + return (
{ - setStatus('detail'); - }} + // onBlur={() => { + // setStatus('detail'); + // }} > - + {editCell} + {!editCell && ( + + )}
); }; return (
- {status === 'detail' && renderDetailCell()} - {status === 'edit' && renderEditCell()} + {status === 'detail' && selfRenderDetailCell()} + {status === 'edit' && selfRenderEditCell()}
); }; diff --git a/src/apollo-table/component/Table.tsx b/src/apollo-table/component/Table.tsx index bcb2b427376674e881245e1cb5fa7f9f1e5315fc..7b6a61f7b3a4e1104bc8a9f5af4c3658f41ca62c 100644 --- a/src/apollo-table/component/Table.tsx +++ b/src/apollo-table/component/Table.tsx @@ -105,7 +105,7 @@ export default class AirTable extends Component { onScroll = ({ clientHeight, scrollHeight, scrollTop }: any) => { const height = clientHeight + scrollTop || 0; const { onScroll, distanceToLoad = 100 } = this.props; - if (height + distanceToLoad >= scrollHeight && typeof onScroll === 'function') { + if (scrollTop > 0 && height + distanceToLoad >= scrollHeight && typeof onScroll === 'function') { onScroll(); } }; diff --git a/src/apollo-table/component/base/_utils/setFormatter.tsx b/src/apollo-table/component/base/_utils/setFormatter.tsx index c76f6a6cc84f521b1e86671552619d31a19c326f..8a938cd07c26953610e931613ec8cf4268d1050d 100644 --- a/src/apollo-table/component/base/_utils/setFormatter.tsx +++ b/src/apollo-table/component/base/_utils/setFormatter.tsx @@ -1,11 +1,12 @@ export const formatStr = 'YYYY-MM-DD HH:mm:ss'; export const emptyModel = [{ text: '', value: '' }]; -const emptyFormat = (value) => {}; export const SetFormatter = { - INPUT: (event) => { - const node = event.currentTarget || {}; - return [{ value: node.value, text: node.value }]; + INPUT: (value) => { + if (!value) { + return emptyModel; + } + return [{ value: value, text: value }]; }, SEARCH: (val) => { if (!val || typeof val !== 'object') return val; diff --git a/src/apollo-table/component/base/config.tsx b/src/apollo-table/component/base/config.tsx index 4802eb006b1cb7ebb2d30f34cc3aac69eda53e55..b68eb2b5150e7e27f0cc74f010ff8fd7c87ab345 100644 --- a/src/apollo-table/component/base/config.tsx +++ b/src/apollo-table/component/base/config.tsx @@ -9,8 +9,11 @@ export const config: any = { component: require('./edit/input').default, setFormatter: SetFormatter['INPUT'], getFormatter: GetFormatter['INPUT'], + componentAttr: { + autoFocus: true, + emitTrigger: 'onBlur', + }, detail: require('./detail/input').default, - icon: require('../../assets/type/text.png'), }, '2': { name: '超链接', @@ -25,7 +28,7 @@ export const config: any = { getFormatter: GetFormatter['TEXTAREA'], setFormatter: SetFormatter['TEXTAREA'], componentAttr: { - autoSize: true, + autoFocus: true, emitTrigger: 'onBlur', }, detail: require('./detail/textarea').default, @@ -50,6 +53,8 @@ export const config: any = { componentAttr: { labelInValue: true, allowClear: true, + autoFocus: true, + emitTrigger: 'onBlur', }, getFormatter: GetFormatter['SELECT'], setFormatter: SetFormatter['SELECT'], @@ -62,6 +67,8 @@ export const config: any = { labelInValue: true, mode: 'tags', maxTagCount: 3, + autoFocus: true, + emitTrigger: 'onBlur', }, getFormatter: GetFormatter['MULTIPLE_SELECT'], setFormatter: SetFormatter['MULTIPLE_SELECT'], @@ -82,6 +89,8 @@ export const config: any = { name: '数字输入', component: require('./edit/number').default, componentAttr: { + autoFocus: true, + emitTrigger: 'onBlur', precision: 2, }, setFormatter: SetFormatter['NUMBER'], diff --git a/src/apollo-table/component/base/edit/date/index.tsx b/src/apollo-table/component/base/edit/date/index.tsx index f6adbcef982f094e6947fde6834595bb8e79424a..49bcf3833d688a05e9650f8aace8ca979577fe17 100644 --- a/src/apollo-table/component/base/edit/date/index.tsx +++ b/src/apollo-table/component/base/edit/date/index.tsx @@ -1,15 +1,42 @@ -import React from 'react'; +import React, { useState } from 'react'; import { DatePicker } from 'antd'; import styles from './styles.less'; -import { DateProps } from '../editInterface'; +import { ApolloDateProps } from '../editInterface'; +import { antiAssign } from '@/apollo-table/utils/utils'; -export default function(props: DateProps) { - const { value, placeholder, allowClear, disabled, format, showTime,onChange } = props; +const ApolloDate = (props: ApolloDateProps) => { + const { onChange, emitTrigger, onEmitChange, showTime } = props; + const selfProps = antiAssign(props, ['columnConfig', 'value', 'onChange', 'emitTrigger', 'onEmitChange']); + let trigger = emitTrigger; + if (showTime) { + trigger = 'onOk'; + } + const [value, setValue] = useState(props.value); + const changeValue = (value, dateString) => { + setValue(value); + if (typeof onChange === 'function') { + onChange(value, dateString); + } + if (!trigger || trigger === 'onChange') { + emitChange(value); + } + }; - const selfProps = { value, placeholder, allowClear, disabled, format, showTime,onChange }; + const emitChange = (value) => { + if (typeof onEmitChange === 'function') { + onEmitChange(value); + } + }; + const onOk = (value) => { + emitChange(value); + }; + if (trigger === 'onOk') { + selfProps.onOk = onOk; + } return (
- +
); -} +}; +export default ApolloDate; diff --git a/src/apollo-table/component/base/edit/date/styles.less b/src/apollo-table/component/base/edit/date/styles.less index 7b82a93104654caa21e3daa5e730376914555bba..4646b0c3989ccb6bb473ecec15f6a0bd87ca515f 100644 --- a/src/apollo-table/component/base/edit/date/styles.less +++ b/src/apollo-table/component/base/edit/date/styles.less @@ -2,16 +2,19 @@ position: relative; top: 0; left: 0; - - .input { - padding-right: 100px; - } - - .wordNumber { - position: absolute; - color: #E1E1E1FF; - font-size: 12px; - right: 7px; - top: 7px; + width: 100%; + height: 100%; + font-size: 0; + .date { + width: 100%; + height: 100%; + border-radius: 0; + div { + height: 100%; + } + :global(.ant-calendar-picker-input.ant-input) { + height: 100%; + border-radius: 0; + } } } diff --git a/src/apollo-table/component/base/edit/editInterface.tsx b/src/apollo-table/component/base/edit/editInterface.tsx index ad3b76d5722d7a08ca5acf1216b6de138449bead..344d84d6e14ff5ee1fee80b0a06d0d0a2f6290ce 100644 --- a/src/apollo-table/component/base/edit/editInterface.tsx +++ b/src/apollo-table/component/base/edit/editInterface.tsx @@ -1,12 +1,14 @@ import { DatePickerProps } from 'antd/es/date-picker/interface'; -import { TextAreaProps } from 'antd/es/input'; +import { TextAreaProps, InputProps } from 'antd/es/input'; +import { InputNumberProps } from 'antd/es/input-number'; +import { SelectProps } from 'antd/es/select'; export interface CommonProps { onEmitChange?: Function; emitTrigger?: string; } -export interface InputProps extends CommonProps { - maxLength: number; +export interface ApolloInputProps extends InputProps, CommonProps { + value: string | undefined; } export interface LinkProps extends CommonProps { value: any[]; @@ -26,12 +28,9 @@ export interface SearchProps extends CommonProps { tableId?: number; paramsJson?: any; } -export interface SelectProps extends CommonProps { +export interface ApolloSelectProps extends SelectProps, CommonProps { isMultiple?: boolean; - maxCount?: number; - tableId?: number; options?: any[]; - allowClear?: boolean; } export interface RateProps { value: number; @@ -41,21 +40,8 @@ export interface RateProps { onChange: any; disabled?: boolean; } -export interface NumberProps { +export interface ApolloNumberProps extends InputNumberProps, CommonProps { value: number | undefined; - onChange: Function; - cellData?: any[]; floatRange?: number; - rowId?: number; - columnConfig?: any; - precision: number; - min: number; - max: number; - step?: number | string; -} -export interface NumberState { - prevProps: NumberProps; - value: number | undefined; - cellData?: any[]; } -export interface DateProps extends DatePickerProps {} +export interface ApolloDateProps extends DatePickerProps, CommonProps {} diff --git a/src/apollo-table/component/base/edit/input/index.tsx b/src/apollo-table/component/base/edit/input/index.tsx index 3ee64ecd0fa7b95cea7bf697d266b5fe54bb26c8..ade8a62b70eb34d156a4491918ff6f7c09409f3e 100644 --- a/src/apollo-table/component/base/edit/input/index.tsx +++ b/src/apollo-table/component/base/edit/input/index.tsx @@ -1,20 +1,56 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; import { Input } from 'antd'; import styles from './styles.less'; -import { InputProps } from '../editInterface'; +import { antiAssign } from '@/apollo-table/utils/utils'; +import { ApolloInputProps } from '../editInterface'; -export default function(props: InputProps) { - const { value, maxLength, placeholder,onChange } = props; - const selfProps = { value, maxLength, placeholder,onChange }; +const ApolloInput = (props: ApolloInputProps) => { + const { maxLength, onChange, emitTrigger, onEmitChange, style } = props; + const selfProps = antiAssign(props, ['value', 'onChange', 'emitTrigger', 'onEmitChange', 'style']); + const [value, setValue] = useState(props.value); + useEffect(() => { + setValue(props.value); + }, [props.value]); + const changeValue = (e) => { + setValue(e.target.value); + if (typeof onChange === 'function') { + onChange(e.target.value); + } + if (!emitTrigger || emitTrigger === 'onChange') { + emitChange(e); + } + }; + const emitChange = (e) => { + if (typeof onEmitChange === 'function') { + onEmitChange(e.target.value); + } + }; + if (emitTrigger === 'onBlur') { + selfProps.onBlur = emitChange; + } + const newStyle:any = { + ...style + }; + if (maxLength && style) { + newStyle.minHeight = Number(style.minHeight) + 10; + newStyle.paddingBottom = 18; + } return (
- - {maxLength && ( + + {!!maxLength && ( - 已输入{(value || '').length || 0}/{maxLength} + 已输入{(value || '').length}/{maxLength} )}
); -} +}; +export default ApolloInput; diff --git a/src/apollo-table/component/base/edit/input/styles.less b/src/apollo-table/component/base/edit/input/styles.less index 7b82a93104654caa21e3daa5e730376914555bba..ffe22c75faa6ca62e47c21ba0722f2ba8ec8bf8c 100644 --- a/src/apollo-table/component/base/edit/input/styles.less +++ b/src/apollo-table/component/base/edit/input/styles.less @@ -2,16 +2,15 @@ position: relative; top: 0; left: 0; - .input { - padding-right: 100px; + //padding-bottom: 18px; } .wordNumber { position: absolute; - color: #E1E1E1FF; + right: 12px; + bottom: 2px; + color: #e1e1e1ff; font-size: 12px; - right: 7px; - top: 7px; } } diff --git a/src/apollo-table/component/base/edit/number/index.tsx b/src/apollo-table/component/base/edit/number/index.tsx index 3f5ce68c34dd3a535224c539a1e08495fc42b857..5d3404ffa3e4d6af0ff58499e08a6a80555144dc 100644 --- a/src/apollo-table/component/base/edit/number/index.tsx +++ b/src/apollo-table/component/base/edit/number/index.tsx @@ -1,89 +1,43 @@ -import React, { Component } from 'react'; -import { InputNumber, Modal } from 'antd'; +import React, { useEffect, useState } from 'react'; +import { InputNumber } from 'antd'; import styles from './styles.less'; -import { NumberProps, NumberState } from '../editInterface'; +import { ApolloNumberProps } from '../editInterface'; +import { antiAssign } from '@/apollo-table/utils/utils'; -export default class extends Component { - static getDerivedStateFromProps(nextProps: NumberProps, prevState: NumberState) { - const { prevProps } = prevState; - let nextState: NumberState = { - ...prevState, - prevProps: nextProps, - value: nextProps.value, - cellData: nextProps.cellData, - }; - if (JSON.stringify(prevProps.value) !== JSON.stringify(nextProps.value)) { - nextState.value = nextProps.value; +const ApolloNumber = (props: ApolloNumberProps) => { + const { onChange, emitTrigger, onEmitChange } = props; + const selfProps = antiAssign(props, ['value', 'onChange', 'emitTrigger', 'onEmitChange']); + const [value, setValue] = useState(props.value); + useEffect(() => { + setValue(props.value); + }, [props.value]); + const changeValue = (value) => { + setValue(value); + if (typeof onChange === 'function') { + onChange(value); } - if (JSON.stringify(prevProps.cellData) !== JSON.stringify(nextProps.cellData)) { - nextState.cellData = nextProps.cellData; + if (!emitTrigger || emitTrigger === 'onChange') { + emitChange(value); } - return nextState; - } - constructor(props: NumberProps) { - super(props); - const { value, cellData } = props; - this.state = { - prevProps: props, - value, - cellData, - }; - } - - onChange = (changedValue: number | undefined) => { - this.setState({ - value: changedValue, - }); }; - resetValue = () => { - const { cellData } = this.state; - this.setState({ - value: cellData && cellData.length > 0 ? cellData[0].value : undefined, - cellData, - }); + const onBlur = (e) => { + emitChange(e.target.value); }; - onBlur = (e: any) => { - const { - onChange, - floatRange, - columnConfig: { columnChsName }, - rowId, - } = this.props; - const { cellData } = this.state; - const originValue = Array.isArray(cellData) && cellData.length > 0 ? cellData[0].value : undefined; - // 检测浮动条件：编辑时，有浮动标记，原值不为0 - if (rowId && floatRange && originValue && Number(originValue) !== 0) { - // 新值默认取0只用于计算，对应清空操作 - const changedValue = e.target.value || 0; - const range = Math.abs(Number(changedValue) - Number(originValue)) / Number(originValue); - if (Number(range) > Number(floatRange)) { - const confirm = Modal.confirm({ - title: '确认提示', - content: `${columnChsName}变更浮动较大，是否确认提交？`, - onOk: () => { - onChange({ changedValue: e.target.value, isBlur: true }); - }, - onCancel: () => { - this.resetValue(); - confirm.destroy(); - }, - }); - return; - } + const emitChange = (value) => { + if (typeof onEmitChange === 'function') { + onEmitChange(value); } - onChange({ changedValue: e.target.value, isBlur: true }); }; - - render() { - const { value } = this.state; - const { precision, min, max } = this.props; - const selfProps = { value, precision, min, max }; - return ( -
- -
- ); + if (emitTrigger === 'onBlur') { + selfProps.onBlur = onBlur; } -} + + return ( +
+ +
+ ); +}; +export default ApolloNumber; diff --git a/src/apollo-table/component/base/edit/number/styles.less b/src/apollo-table/component/base/edit/number/styles.less index 11be4b3629e2f9d0a4a56894f46b360da436c086..52cd654dc79923dd28f9c2c9cf9f4d69d1131c6a 100644 --- a/src/apollo-table/component/base/edit/number/styles.less +++ b/src/apollo-table/component/base/edit/number/styles.less @@ -1,3 +1,14 @@ .container { - + position: relative; + top: 0; + left: 0; + .number { + width: 100%; + :global(.ant-input-number-input-wrap){ + height: 100%; + input { + height: 100%; + } + } + } } diff --git a/src/apollo-table/component/base/edit/select/index.tsx b/src/apollo-table/component/base/edit/select/index.tsx index e8efcf53a7ea6732014953aea42bf59729542fe5..139252db6d2587e042c648389060fff04e238f1f 100644 --- a/src/apollo-table/component/base/edit/select/index.tsx +++ b/src/apollo-table/component/base/edit/select/index.tsx @@ -1,20 +1,53 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { Select } from 'antd'; -import { SelectProps } from '../editInterface'; +import { ApolloSelectProps } from '../editInterface'; +import { antiAssign } from '@/apollo-table/utils/utils'; +import styles from './styles.less'; -export default function(props: SelectProps) { - const { options = [], allowClear, disabled, placeholder, value, onChange, isMultiple } = props; - const selfProps: any = { allowClear, disabled, placeholder, value, onChange }; +const ApolloSelect = (props: ApolloSelectProps) => { + const { options = [], onChange, emitTrigger, onEmitChange, isMultiple } = props; + const selfProps = antiAssign(props, ['value', 'onChange', 'emitTrigger', 'onEmitChange', 'isMultiple', 'options']); + const [value, setValue] = useState(props.value); + const [option, setOption] = useState(undefined); + useEffect(() => { + setValue(props.value); + setOption(undefined); + }, [props.value]); + const changeValue = (value, option) => { + setValue(value); + setOption(option); + if (typeof onChange === 'function') { + onChange(value, option); + } + if (!emitTrigger || emitTrigger === 'onChange') { + emitChange(value, option); + } + }; + + const emitChange = (value, option) => { + if (typeof onEmitChange === 'function') { + onEmitChange(value, option); + } + }; + const onBlur = () => { + emitChange(value, option); + }; + if (emitTrigger === 'onBlur') { + selfProps.onBlur = onBlur; + } if (isMultiple) { selfProps.mode = 'multiple'; } return ( - +
+ +
); -} +}; +export default ApolloSelect; diff --git a/src/apollo-table/component/base/edit/select/styles.less b/src/apollo-table/component/base/edit/select/styles.less new file mode 100644 index 0000000000000000000000000000000000000000..029a2af414973b46282d4891adf01ff8a38aeab4 --- /dev/null +++ b/src/apollo-table/component/base/edit/select/styles.less @@ -0,0 +1,17 @@ +.container { + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + font-size: 0; + .select { + width: 100%; + height: 100%; + border-radius: 0; + :global(.ant-select-selection--single) { + height: 100%; + border-radius: 0; + } + } +} diff --git a/src/apollo-table/component/base/edit/textarea/index.tsx b/src/apollo-table/component/base/edit/textarea/index.tsx index 7d8c4c927549d16606823660efb136b30d2285f6..5e18f0e66040c1310deb363ad7dd558f7d950211 100644 --- a/src/apollo-table/component/base/edit/textarea/index.tsx +++ b/src/apollo-table/component/base/edit/textarea/index.tsx @@ -4,7 +4,7 @@ import styles from './styles.less'; import { antiAssign } from '@/apollo-table/utils/utils'; import { ApolloTextAreaProps } from '../editInterface'; -const TextArea = (props: ApolloTextAreaProps) => { +const ApolloTextArea = (props: ApolloTextAreaProps) => { const { maxLength, onChange, emitTrigger, onEmitChange } = props; const selfProps = antiAssign(props, ['value', 'onChange', 'emitTrigger', 'onEmitChange']); const [value, setValue] = useState(props.value); @@ -31,11 +31,14 @@ const TextArea = (props: ApolloTextAreaProps) => { } return (
- - {maxLength && ( - {`已输入${(value || '').length}/${maxLength}`} - )} + + {!!maxLength && {`已输入${(value || '').length}/${maxLength}`}}
); }; -export default TextArea; +export default ApolloTextArea; diff --git a/src/apollo-table/component/base/edit/textarea/styles.less b/src/apollo-table/component/base/edit/textarea/styles.less index 19343004493e321392d2b198b900a4ee29cdc307..e56a171f6cf2f317456c80741d4e39524029d46e 100644 --- a/src/apollo-table/component/base/edit/textarea/styles.less +++ b/src/apollo-table/component/base/edit/textarea/styles.less @@ -5,9 +5,6 @@ .input { padding-bottom: 18px; } - textarea { - padding-bottom: 18px; - } .wordNumber { position: absolute; right: 12px; diff --git a/src/apollo-table/component/base/index.tsx b/src/apollo-table/component/base/index.tsx index 56bafa934f673538ec089bf939ff7bfc8f1138ca..db47abd7bdcf7f18ba8b824cdd098b476b6d2f18 100644 --- a/src/apollo-table/component/base/index.tsx +++ b/src/apollo-table/component/base/index.tsx @@ -68,12 +68,12 @@ export const getComponent = (type: string) => { } }; // 触发修改回调 - onEmitChange = (changedValue: any) => { + onEmitChange = (changedValue: any,option:any) => { const { columnConfig } = this.state; const { onEmitChange } = this.props; let value = setFormat(columnConfig, changedValue); if (typeof onEmitChange === 'function') { - onEmitChange(value,changedValue); + onEmitChange(value,option); } }; diff --git a/src/apollo-table/component/interface.tsx b/src/apollo-table/component/interface.tsx index c13725332c87c3f2aab42132073d4b16cfc66609..68e2e9fb29e01daae2c1ae3be228d8d73a0f6f12 100644 --- a/src/apollo-table/component/interface.tsx +++ b/src/apollo-table/component/interface.tsx @@ -80,7 +80,7 @@ export interface CellProps { cellData: any; emitChangeCell: Function; cellClassName?: string; - cellStyle: object; + cellStyle: any; } export interface CellState { status: string; diff --git a/src/test/demo1.less b/src/test/demo1.less index ec930977dc7c20bef94d95173d6a457893ccdd00..c0f6e372d037087ebed292cd3b3be6da292285e4 100644 --- a/src/test/demo1.less +++ b/src/test/demo1.less @@ -1,3 +1,6 @@ -.row{ +.row { color: green; } +.xxx { + color: blue; +} diff --git a/src/test/demo1.tsx b/src/test/demo1.tsx index 26a078a76888bc20a7c9e588abc9c771c506fa08..bd40c27f43741ced7f65c7aae0fc7207a68c2aba 100644 --- a/src/test/demo1.tsx +++ b/src/test/demo1.tsx @@ -2,7 +2,8 @@ import React, { useState, useEffect, useCallback } from 'react'; import _ from 'lodash'; import ApolloTable from '../apollo-table'; import { getColumnConfig, getDataSource, addOrUpdateDataSource } from './serives'; -import { message } from 'antd'; +import { Input, message, DatePicker } from 'antd'; +import moment from 'moment'; import s from './demo1.less'; const rowStyle = ({ rowIndex }) => { @@ -31,7 +32,7 @@ const Demo1 = (props) => { const res = await getColumnConfig({ tableId }); if (res && res.success && res.data) { const arr = Array.isArray(res.data) ? res.data : []; - setColumns(arr); + setColumns(formatColumns(arr)); } }; getColumnsList(); @@ -43,7 +44,7 @@ const Demo1 = (props) => { hasNextPage: false, nextPage: 1, }); - const [flush,setFlush]=useState(false); + const [flush, setFlush] = useState(false); useEffect(() => { const getDataList = async () => { const data = { @@ -85,6 +86,45 @@ const Demo1 = (props) => { fetchData(true); } }; + const renderDetailCell = (data) => { + const { columnConfig, cellData } = data; + const record = data.rowData; + const { id, rowData } = record; + const { columnName } = columnConfig; + if (columnName === 'customerNameInput') { + return
{cellData[0] && cellData[0].text}
; + } + }; + const renderEditCell = (data) => { + const { columnConfig, cellData } = data; + const record = data.rowData; + const { id, rowData } = record; + const { columnName } = columnConfig; + if (columnName === 'followUpDate') { + const value = moment(cellData[0] && cellData[0].value); + return ( +
+ { + return trigger.parentElement; + }} + /> +
+ ); + } + }; + const formatColumns = (columns) => { + columns.map((item) => { + if (item.columnName === 'followUpDate') { + item.renderDetailCell = renderDetailCell; + // item.renderEditCell = renderEditCell; + } + return item; + }); + return columns; + }; + return (