diff --git a/src/apollo-table/component/Cell.less b/src/apollo-table/component/Cell.less index 80181b2745fbc2e19d3eee7bec3906e49f0f06a2..d7dc642bc5f0a5ab5db7f00e58422babc4f6ac89 100644 --- a/src/apollo-table/component/Cell.less +++ b/src/apollo-table/component/Cell.less @@ -15,7 +15,6 @@ 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 c71dfa7a5a476a23e44100e0b142268461a5bd09..5a492f8246173125624ae7f049d3a357da765680 100644 --- a/src/apollo-table/component/Cell.tsx +++ b/src/apollo-table/component/Cell.tsx @@ -32,6 +32,7 @@ const Cell = (props: CellProps) => { cellData.map((item) => { temp.push({ text: item.text, value: item.value }); }); + debugger if (_.isEqual(temp, changedValue)) { setStatus('detail'); return; diff --git a/src/apollo-table/component/Table.less b/src/apollo-table/component/Table.less index 6b72e723568674b869b0dd2c20fb8d5e9dd89021..69b969309a0b2f8b635962dcf08e97c73fd9a158 100644 --- a/src/apollo-table/component/Table.less +++ b/src/apollo-table/component/Table.less @@ -64,3 +64,12 @@ .bodyCell { font-size: 20px; } +.fillHandleWrapper { + position: absolute; + overflow: hidden; + top: 0; + bottom: 0; + left: 0; + right: 0; + pointer-events: none; +} diff --git a/src/apollo-table/component/Table.tsx b/src/apollo-table/component/Table.tsx index 7b6a61f7b3a4e1104bc8a9f5af4c3658f41ca62c..581800da950955a792e7a9d5cf8c905f1460ce2d 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 (scrollTop > 0 && height + distanceToLoad >= scrollHeight && typeof onScroll === 'function') { + if (scrollTop > 0 && height >= (scrollHeight - distanceToLoad) && typeof onScroll === 'function') { onScroll(); } }; @@ -331,11 +331,11 @@ export default class AirTable extends Component { width={width} rowHeight={rowHeight} rowCount={rowCount} - height={totalHeight} onScroll={(...arg: Array) => { onScroll(...arg); this.onScroll(arg[0]); }} + height={totalHeight} cellRenderer={this.renderBodyRow.bind(this, data)} columns={columns} /> @@ -346,6 +346,7 @@ export default class AirTable extends Component { }} +
); }} diff --git a/src/apollo-table/component/base/_utils/getFormatter.tsx b/src/apollo-table/component/base/_utils/getFormatter.tsx index 3e76755def5283ed7d3baa8289d75e2ef68ac622..8e5abe0fe05e2f8e427e34f158b931be8a210292 100644 --- a/src/apollo-table/component/base/_utils/getFormatter.tsx +++ b/src/apollo-table/component/base/_utils/getFormatter.tsx @@ -26,7 +26,15 @@ export const GetFormatter = { return { value: item.value, name: text, size }; }); }, - CHECKBOX: (val) => { + CHECKBOX: (val, config) => { + const { isMultiple } = config || {}; + if (isMultiple) { + return Array.isArray(val) + ? val.map((item) => { + return item.value; + }) + : []; + } const obj = Array.isArray(val) && val.length > 0 ? val[0] : {}; return obj.value; }, @@ -57,8 +65,7 @@ export const GetFormatter = { return obj.value ? moment(obj.value) : void 0; }, LINK: (val) => { - const obj = Array.isArray(val) && val.length > 0 ? val[0] : {}; - return obj.value; + return Array.isArray(val) && val.length > 0 ? val : []; }, MULTIPLE_SEARCH: (val) => { if (!Array.isArray(val)) return void 0; diff --git a/src/apollo-table/component/base/_utils/setFormatter.tsx b/src/apollo-table/component/base/_utils/setFormatter.tsx index 8a938cd07c26953610e931613ec8cf4268d1050d..793e7e0e219051f7558f60e32b288a270d3ffaf9 100644 --- a/src/apollo-table/component/base/_utils/setFormatter.tsx +++ b/src/apollo-table/component/base/_utils/setFormatter.tsx @@ -28,9 +28,16 @@ export const SetFormatter = { if (!val) return null; return val.map((item) => ({ value: item.value, text: item.name + '(' + item.size + ')' })); }, - CHECKBOX: (event) => { - const node = event.currentTarget || {}; - return [{ value: node.value, text: node.value }]; + CHECKBOX: (value) => { + if (!value) { + return emptyModel; + } + if (Array.isArray(value)) { + return value.map((item) => { + return { value: item, text: item }; + }); + } + return [{ value: value, text: value }]; }, SELECT: (val) => { // 处理成[{}]结构 @@ -77,9 +84,8 @@ export const SetFormatter = { val = val.format ? val.format(setFormat) : val; return [{ value: val, text: val }]; }, - LINK: (event) => { - const node = event.currentTarget || {}; - return [{ value: node.value, text: node.value }]; + LINK: (val) => { + return Array.isArray(val) && val.length > 0 ? val : [emptyModel]; }, MULTIPLE_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 b68eb2b5150e7e27f0cc74f010ff8fd7c87ab345..9e1053b399e7832e0828dd275f257879f04c6869 100644 --- a/src/apollo-table/component/base/config.tsx +++ b/src/apollo-table/component/base/config.tsx @@ -17,7 +17,7 @@ export const config: any = { }, '2': { name: '超链接', - component: require('./edit/search').default, + component: require('./edit/link').default, getFormatter: GetFormatter.LINK, setFormatter: SetFormatter.LINK, detail: require('./detail/link').default, @@ -45,6 +45,10 @@ export const config: any = { component: require('./edit/checkbox').default, // 暂未添加 getFormatter: GetFormatter['CHECKBOX'], setFormatter: SetFormatter['CHECKBOX'], + componentAttr: { + autoFocus: true, + emitTrigger: 'onBlur', + }, detail: require('./detail/checkbox').default, }, '6': { diff --git a/src/apollo-table/component/base/detail/checkbox/index.tsx b/src/apollo-table/component/base/detail/checkbox/index.tsx index 7b70e55fd50126c2f2c265ea50b57330d08710f8..db90fe82d6eb3c711271e1937399ac99d708829c 100644 --- a/src/apollo-table/component/base/detail/checkbox/index.tsx +++ b/src/apollo-table/component/base/detail/checkbox/index.tsx @@ -3,13 +3,20 @@ import styles from './index.less'; import { CommonProps } from '../detailInterface'; export default function Detail(props: CommonProps) { - const { value, formatter } = props; - const formatValue = formatter ? formatter(value) : value; - if (!formatValue) return null; + const { value, componentAttr } = props; + if (!value) return null; - if (typeof formatValue === 'string') { - return
{formatValue}
; + const { isMultiple } = componentAttr || {}; + let text = ''; + if (isMultiple) { + text = (Array.isArray(value) + ? value.map((item) => { + return item.text; + }) + : [] + ).join(','); } else { - return '数据错误'; + text = Array.isArray(value) && value.length > 0 ? value[0].text : ''; } + return
{text}
; } diff --git a/src/apollo-table/component/base/detail/link/index.tsx b/src/apollo-table/component/base/detail/link/index.tsx index 7e26692705b55d85f7875aae0f22705278697c71..aba93f078f078aea4a70976a6b4033438de2641c 100644 --- a/src/apollo-table/component/base/detail/link/index.tsx +++ b/src/apollo-table/component/base/detail/link/index.tsx @@ -3,13 +3,21 @@ import styles from './index.less'; import { LinkProps } from '../detailInterface'; export default function Detail(props: LinkProps) { - const { value, formatter } = props; - const formatValue = formatter ? formatter(value) : value; - if (!formatValue) return null; - - if (typeof formatValue === 'string') { - return
{formatValue}
; - } else { - return '数据错误'; + const { value } = props; + if (!value) return null; + if (Array.isArray(value)) { + return ( +
+ {value.map((item, i) => { + return ( + + ); + })} +
+ ); } } diff --git a/src/apollo-table/component/base/edit/checkbox/index.tsx b/src/apollo-table/component/base/edit/checkbox/index.tsx index 9034235ee1264078ea6fe47315454482328f89aa..0f5ec025a6a53ea8f354ac52f78dcd47533d9886 100644 --- a/src/apollo-table/component/base/edit/checkbox/index.tsx +++ b/src/apollo-table/component/base/edit/checkbox/index.tsx @@ -1,14 +1,95 @@ -import React from 'react'; -import { Input } from 'antd'; +import React, { useEffect, useRef, useState } from 'react'; +import { Checkbox } from 'antd'; import styles from './styles.less'; -import { CommonProps } from '../editInterface'; +import { ApolloCheckboxProps, ApolloCheckboxGroupProps } from '../editInterface'; -export default function(props: CommonProps) { - const { value, placeholder,onChange } = props; - const selfProps = { value, placeholder,onChange }; +import { antiAssign } from '@/apollo-table/utils/utils'; + +const ApolloCheckbox = (props: ApolloCheckboxProps) => { + const { onChange, emitTrigger, onEmitChange, label } = props; + const selfProps = antiAssign(props, ['value', 'onChange', 'emitTrigger', 'onEmitChange', 'label']); + const [checked, setChecked] = useState(!!props.value); + const changeValue = (e) => { + setChecked(e.target.checked); + if (typeof onChange === 'function') { + onChange(e.target.checked); + } + if (!emitTrigger || emitTrigger === 'onChange') { + emitChange(e.target.checked); + } + }; + + const emitChange = (value) => { + if (typeof onEmitChange === 'function') { + onEmitChange(value); + } + }; + const onBlur = (e) => { + emitChange(e.target.checked); + }; + if (emitTrigger === 'onBlur') { + selfProps.onBlur = onBlur; + } return (
- + + {label} + +
+ ); +}; +const ApolloCheckboxGroup = (props: ApolloCheckboxGroupProps) => { + 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 dom = useRef(); + const changeValue = (value) => { + setValue(value); + dom.current = value; + if (typeof onChange === 'function') { + onChange(value); + } + if (!emitTrigger || emitTrigger === 'onChange') { + emitChange(value); + } + }; + + const emitChange = (value) => { + if (typeof onEmitChange === 'function') { + onEmitChange(value); + } + }; + const onBlur = () => { + emitChange(dom.current); + }; + useEffect(() => { + document.addEventListener('click', onBlur, false); + return () => { + document.removeEventListener('click', onBlur, false); + }; + }, []); + const onClick = (e) => { + e.stopPropagation(); //阻止事件冒泡 + e.nativeEvent.stopImmediatePropagation(); + }; + return ( +
+
); -} +}; +const ApolloCheck = (props) => { + const { isMultiple } = props; + + if (isMultiple) { + const groupProps = antiAssign(props, ['columnConfig', 'isMultiple']); + return ApolloCheckboxGroup(groupProps); + } + const selfProps = antiAssign(props, ['columnConfig', 'isMultiple', 'options']); + return ApolloCheckbox(selfProps); +}; + +export default ApolloCheck; diff --git a/src/apollo-table/component/base/edit/checkbox/styles.less b/src/apollo-table/component/base/edit/checkbox/styles.less index 7b82a93104654caa21e3daa5e730376914555bba..cb2a67cff0aac4c981df14c7fef9657a259eba76 100644 --- a/src/apollo-table/component/base/edit/checkbox/styles.less +++ b/src/apollo-table/component/base/edit/checkbox/styles.less @@ -2,16 +2,14 @@ position: relative; top: 0; left: 0; - - .input { - padding-right: 100px; + width: 100%; + height: 100%; + font-size: 0; + .checkbox { + width: 100%; } - - .wordNumber { - position: absolute; - color: #E1E1E1FF; - font-size: 12px; - right: 7px; - top: 7px; + .checkboxGroup { + width: 100%; + padding: 5px; } } diff --git a/src/apollo-table/component/base/edit/editInterface.tsx b/src/apollo-table/component/base/edit/editInterface.tsx index 344d84d6e14ff5ee1fee80b0a06d0d0a2f6290ce..0e234235705e297351fb69cf9099d54ae1f399c4 100644 --- a/src/apollo-table/component/base/edit/editInterface.tsx +++ b/src/apollo-table/component/base/edit/editInterface.tsx @@ -2,7 +2,12 @@ import { DatePickerProps } from 'antd/es/date-picker/interface'; import { TextAreaProps, InputProps } from 'antd/es/input'; import { InputNumberProps } from 'antd/es/input-number'; import { SelectProps } from 'antd/es/select'; +import { CheckboxProps, CheckboxGroupProps } from 'antd/es/checkbox'; +export interface LinkData { + text?: string; + value: string; +} export interface CommonProps { onEmitChange?: Function; emitTrigger?: string; @@ -10,13 +15,10 @@ export interface CommonProps { export interface ApolloInputProps extends InputProps, CommonProps { value: string | undefined; } -export interface LinkProps extends CommonProps { - value: any[]; - maxLength: number; -} -export interface LinkState { - prevProps: LinkProps; - value: any[]; +export interface ApolloLinkProps extends CommonProps { + value: LinkData[]; + onChange: Function; + columnConfig: any; } export interface ApolloTextAreaProps extends TextAreaProps, CommonProps { value: string | undefined; @@ -45,3 +47,7 @@ export interface ApolloNumberProps extends InputNumberProps, CommonProps { floatRange?: number; } export interface ApolloDateProps extends DatePickerProps, CommonProps {} +export interface ApolloCheckboxProps extends CheckboxProps, CommonProps { + label: string; +} +export interface ApolloCheckboxGroupProps extends CheckboxGroupProps, CommonProps {} diff --git a/src/apollo-table/component/base/edit/input/index.tsx b/src/apollo-table/component/base/edit/input/index.tsx index ade8a62b70eb34d156a4491918ff6f7c09409f3e..74a090b0bd41e3fd3afcc6bc9f2c5f4a6c6e22a1 100644 --- a/src/apollo-table/component/base/edit/input/index.tsx +++ b/src/apollo-table/component/base/edit/input/index.tsx @@ -6,7 +6,7 @@ import { ApolloInputProps } from '../editInterface'; const ApolloInput = (props: ApolloInputProps) => { const { maxLength, onChange, emitTrigger, onEmitChange, style } = props; - const selfProps = antiAssign(props, ['value', 'onChange', 'emitTrigger', 'onEmitChange', 'style']); + const selfProps = antiAssign(props, ['columnConfig', 'value', 'onChange', 'emitTrigger', 'onEmitChange', 'style']); const [value, setValue] = useState(props.value); useEffect(() => { setValue(props.value); diff --git a/src/apollo-table/component/base/edit/link/index.tsx b/src/apollo-table/component/base/edit/link/index.tsx index 23425c4040acd0a273fe6c9b4d5606ce6bf96cc2..0eb7840c33cba8095ca5b8ed4a82b1c00cfa74d7 100644 --- a/src/apollo-table/component/base/edit/link/index.tsx +++ b/src/apollo-table/component/base/edit/link/index.tsx @@ -1,104 +1,83 @@ -import React from 'react'; -import { Input, Button } from 'antd'; +import React, { useEffect, useRef, useState } from 'react'; +import { Input } from 'antd'; import IconFont from '../../extra/iconFont'; import styles from './styles.less'; -import { LinkProps, LinkState } from '../editInterface'; +import { ApolloLinkProps } from '../editInterface'; -class Link extends React.Component { - static getDerivedStateFromProps(nextProps: LinkProps, prevState: LinkState) { - const { prevProps } = prevState; - let nextState: LinkState = { - ...prevState, - prevProps: nextProps, - }; - if (JSON.stringify(prevProps.value) !== JSON.stringify(nextProps.value)) { - nextState.value = nextProps.value; - } - return nextState; - } - constructor(props: LinkProps) { - super(props); - const { value } = props; - this.state = { - prevProps: props, - value, - }; - } - - addLink = () => { - const { value } = this.state; +const Link = (props: ApolloLinkProps) => { + const { onEmitChange } = props; + const [value, setValue] = useState(props.value); + const dom = useRef(value); + const changeText = (i, e) => { const newValue = (value && value.slice()) || []; - newValue.push({}); - this.setState({ - value: newValue, - }); + newValue[i].text = e.target.value; + setValue(newValue); + dom.current = newValue; }; - - changeLinkValue = (index, e) => { - const { value } = this.state; - const temp = value[index]; - temp.value = e.target.value; - this.setState( - { - value, - }, - this.changeLink, - ); + const changeValue = (i, e) => { + const newValue = (value && value.slice()) || []; + newValue[i].value = e.target.value; + setValue(newValue); + dom.current = newValue; }; - - changeLinkText = (index, e) => { - const { value } = this.state; - const temp = value[index]; - temp.text = e.target.value; - this.setState( - { - value, - }, - this.changeLink, - ); + const addLink = () => { + const newValue = (value && value.slice()) || []; + newValue.push({ text: '', value: '' }); + setValue(newValue); + dom.current = newValue; }; - - changeLink = () => { - const { onChange } = this.props; - const { value } = this.state; - if (typeof onChange === 'function') { - onChange(value); + const delLink = (i) => { + let newValue = (value && value.slice()) || []; + newValue.splice(i, 1); + setValue(newValue); + dom.current = newValue; + }; + const emitChange = (value) => { + if (typeof onEmitChange === 'function') { + onEmitChange(value); } }; - - render() { - const { value } = this.state; - return ( -
- {value && - value.map((link, i) => { - return ( -
-
- 链接地址: - -
-
- 显示文字: - + const onBlur = () => { + emitChange(dom.current); + }; + useEffect(() => { + document.addEventListener('click', onBlur, false); + return () => { + document.removeEventListener('click', onBlur, false); + }; + }, []); + const onClick = (e) => { + e.stopPropagation(); //阻止事件冒泡 + e.nativeEvent.stopImmediatePropagation(); + }; + return ( +
+ {value && + value.map((link, i) => { + return ( +
+
+ 显示文字: + +
+
+ 链接地址: + +
+
- ); - })} - +
+ ); + })} +
+
- ); - } -} +
+ ); +}; export default Link; diff --git a/src/apollo-table/component/base/edit/link/styles.less b/src/apollo-table/component/base/edit/link/styles.less index 7b82a93104654caa21e3daa5e730376914555bba..8e555b7301ddbf655c415695208d93db221f31ec 100644 --- a/src/apollo-table/component/base/edit/link/styles.less +++ b/src/apollo-table/component/base/edit/link/styles.less @@ -1,17 +1,39 @@ +@import '~@/common'; .container { position: relative; top: 0; left: 0; - - .input { - padding-right: 100px; + width: 100%; + background: white; + padding: @paddingSmX; + border: 1px solid @primaryColor; + .content { + border-bottom: 1px solid @borderColor; + .row { + display: flex; + align-items: center; + padding: @paddingSmX 0; + .label { + width: 60px; + font-size: @textFontSm; + } + .input { + flex: 1; + } + .delContainer { + width: 20px; + text-align: center; + cursor: pointer; + .del { + font-size: @textFontSm; + } + } + } } - - .wordNumber { - position: absolute; - color: #E1E1E1FF; - font-size: 12px; - right: 7px; - top: 7px; + .btn { + .icon{ + font-size: @textFontSm; + cursor: pointer; + } } } diff --git a/src/apollo-table/component/base/edit/number/index.tsx b/src/apollo-table/component/base/edit/number/index.tsx index 5d3404ffa3e4d6af0ff58499e08a6a80555144dc..f247bddaca89e0f760634918a5d904e5fac8cc0c 100644 --- a/src/apollo-table/component/base/edit/number/index.tsx +++ b/src/apollo-table/component/base/edit/number/index.tsx @@ -6,7 +6,7 @@ import { antiAssign } from '@/apollo-table/utils/utils'; const ApolloNumber = (props: ApolloNumberProps) => { const { onChange, emitTrigger, onEmitChange } = props; - const selfProps = antiAssign(props, ['value', 'onChange', 'emitTrigger', 'onEmitChange']); + const selfProps = antiAssign(props, ['columnConfig', 'value', 'onChange', 'emitTrigger', 'onEmitChange']); const [value, setValue] = useState(props.value); useEffect(() => { setValue(props.value); diff --git a/src/apollo-table/component/base/edit/select/index.tsx b/src/apollo-table/component/base/edit/select/index.tsx index 139252db6d2587e042c648389060fff04e238f1f..9483b99255a4799fb1e4307229f99c1a15e5c235 100644 --- a/src/apollo-table/component/base/edit/select/index.tsx +++ b/src/apollo-table/component/base/edit/select/index.tsx @@ -6,7 +6,7 @@ import styles from './styles.less'; const ApolloSelect = (props: ApolloSelectProps) => { const { options = [], onChange, emitTrigger, onEmitChange, isMultiple } = props; - const selfProps = antiAssign(props, ['value', 'onChange', 'emitTrigger', 'onEmitChange', 'isMultiple', 'options']); + const selfProps = antiAssign(props, ['columnConfig', 'value', 'onChange', 'emitTrigger', 'onEmitChange', 'isMultiple', 'options']); const [value, setValue] = useState(props.value); const [option, setOption] = useState(undefined); useEffect(() => { diff --git a/src/apollo-table/component/base/edit/textarea/index.tsx b/src/apollo-table/component/base/edit/textarea/index.tsx index 5e18f0e66040c1310deb363ad7dd558f7d950211..3d6c9c2a350f21d92a31230b96b24bf8fcbd9e88 100644 --- a/src/apollo-table/component/base/edit/textarea/index.tsx +++ b/src/apollo-table/component/base/edit/textarea/index.tsx @@ -6,7 +6,7 @@ import { ApolloTextAreaProps } from '../editInterface'; const ApolloTextArea = (props: ApolloTextAreaProps) => { const { maxLength, onChange, emitTrigger, onEmitChange } = props; - const selfProps = antiAssign(props, ['value', 'onChange', 'emitTrigger', 'onEmitChange']); + const selfProps = antiAssign(props, ['columnConfig', 'value', 'onChange', 'emitTrigger', 'onEmitChange']); const [value, setValue] = useState(props.value); useEffect(() => { setValue(props.value); diff --git a/src/test/demo1.tsx b/src/test/demo1.tsx index bd40c27f43741ced7f65c7aae0fc7207a68c2aba..f0ec789e57cc2abe4d4d4d7b1c8713e09f487821 100644 --- a/src/test/demo1.tsx +++ b/src/test/demo1.tsx @@ -31,7 +31,8 @@ const Demo1 = (props) => { const getColumnsList = async () => { const res = await getColumnConfig({ tableId }); if (res && res.success && res.data) { - const arr = Array.isArray(res.data) ? res.data : []; + let arr = Array.isArray(res.data) ? res.data : []; + arr[0].columnType=2; setColumns(formatColumns(arr)); } }; @@ -104,12 +105,7 @@ const Demo1 = (props) => { const value = moment(cellData[0] && cellData[0].value); return (
- { - return trigger.parentElement; - }} - /> +
); } @@ -132,7 +128,7 @@ const Demo1 = (props) => { dataSource={dataSource} onScroll={debounceScroll} emitChangeCell={emitChangeCell} - bordered={true} + bordered={false} rowClassName={s.row} /> );