From ff47a1cbeaeafb6bf1580fc28b69139e706c0e51 Mon Sep 17 00:00:00 2001 From: zhangwenshuai Date: Tue, 30 Jun 2020 18:57:14 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=8D=95=E5=85=83=E6=A0=BC?= =?UTF-8?q?=E7=BC=96=E8=BE=91=E8=A7=A6=E5=8F=91=E9=80=BB=E8=BE=91=EF=BC=8C?= =?UTF-8?q?=E6=94=B9=E4=B8=BA=E7=82=B9=E5=87=BB=E6=97=B6=E5=88=A4=E6=96=AD?= =?UTF-8?q?=E6=98=AF=E5=90=A6=E4=B8=BA=E5=BD=93=E5=89=8D=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E5=8D=95=E5=85=83=E6=A0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/apolloTable/component/Cell.less | 67 +++++--- components/apolloTable/component/Cell.tsx | 61 +++++-- components/apolloTable/component/Table.less | 1 + components/apolloTable/component/Table.tsx | 27 ++-- .../component/base/detail/tag/index.tsx | 150 +++++------------- .../component/base/edit/container/index.tsx | 38 +++-- 6 files changed, 176 insertions(+), 168 deletions(-) diff --git a/components/apolloTable/component/Cell.less b/components/apolloTable/component/Cell.less index 83aead2..201acac 100644 --- a/components/apolloTable/component/Cell.less +++ b/components/apolloTable/component/Cell.less @@ -10,27 +10,25 @@ height: 100%; font-size: @textFontGen; padding: 0 @paddingLg; - &.hover { - background: @tableHoverBgColor; - .checkbox { - display: block; - &.hasNum { - display: block; - } - } - .num { - display: block; - &.hasCheckbox { - display: none; - } - } - .expand { - visibility: visible; - } - } - &.selected { - box-shadow: inset 0 0 0 1px @primaryColor; - } + //&.hover { + // background: @tableHoverBgColor; + // .checkbox { + // display: block; + // &.hasNum { + // display: block; + // } + // } + // .num { + // display: block; + // &.hasCheckbox { + // display: none; + // } + // } + // .expand { + // visibility: visible; + // } + //} + .num { min-width: 30px; max-width: 100px; @@ -38,7 +36,7 @@ .icon { width: 22px; } - &.checked{ + &.checked { display: none; } } @@ -49,7 +47,7 @@ &.hasNum { display: none; } - &.checked{ + &.checked { display: block; } } @@ -94,3 +92,26 @@ background: #333333; } } +&.selected { + box-shadow: inset 0 0 0 1px @primaryColor; +} +&.hover { + background: @tableHoverBgColor; + .detailCell { + .checkbox { + display: block; + &.hasNum { + display: block; + } + } + .num { + display: block; + &.hasCheckbox { + display: none; + } + } + .expand { + visibility: visible; + } + } +} diff --git a/components/apolloTable/component/Cell.tsx b/components/apolloTable/component/Cell.tsx index c485a7e..dac0dd8 100644 --- a/components/apolloTable/component/Cell.tsx +++ b/components/apolloTable/component/Cell.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useMemo, useState } from 'react'; +import React, { useEffect, useMemo, useState, useRef } from 'react'; import { Checkbox, message, Popover } from 'antd'; import classNames from 'classnames'; import _ from 'lodash'; @@ -33,10 +33,6 @@ const Cell = (props: CellProps) => { rowSelection, columns, contentMenu, - selectedCell, - cellKey, - changeSelectedCell, - position = 'center', } = props; const { columnType, @@ -47,6 +43,7 @@ const Cell = (props: CellProps) => { cellRenderProps, readOnlyFlag, } = columnConfig; + const cellUnit = useRef(null); const [status, setStatus] = useState('detail'); useEffect(() => { @@ -119,6 +116,7 @@ const Cell = (props: CellProps) => { }; const selfRenderDetailCell = () => { + // 数据为空 let empty = !cellData || cellData.length === 0 || (cellData.length === 1 && !cellData[0].text && !cellData[0].value); let detailConfig; @@ -138,7 +136,7 @@ const Cell = (props: CellProps) => { const style: any = {}; const { current = 1, pageSize = 20 } = paginationConfig || {}; - + // 构造序号 const getIndex = () => { // if (current === 1) { // let src = ''; @@ -159,6 +157,7 @@ const Cell = (props: CellProps) => { // } return (current - 1) * pageSize + rowIndex + 1; }; + // 获取当前行在所选列表中的index const getCheckedIndex = () => { if (!rowSelection) { return -1; @@ -171,6 +170,7 @@ const Cell = (props: CellProps) => { }); return index; }; + // 构造行复选框 const getCheckbox = () => { const { selectedRows, onChange } = rowSelection; const index = getCheckedIndex(); @@ -190,25 +190,43 @@ const Cell = (props: CellProps) => { }; const { dynamicCellConfigDTO } = columnData; - const detail = (
{ // 不可编辑状态 if (!cellEditable || readOnlyFlag || (dynamicCellConfigDTO && dynamicCellConfigDTO.readonlyFlag)) { return false; } - if (selectedCell === `${position}_${cellKey}`) { + // 获取当前节点的选中状态 + const dom = cellUnit.current; + let selected = false; + if (dom && dom.getAttribute('data-selectedCell')) { + selected = dom.getAttribute('data-selectedCell') === '1'; + } + if (selected) { + // 当前已选中，则进入编辑状态 setStatus('edit'); + if (dom) { + // 给当前dom添加编辑状态 + dom.setAttribute('data-editingCell', '1'); + } } else { - changeSelectedCell && changeSelectedCell(`${position}_${cellKey}`); + // 否则进入选中状态 + if (dom) { + // 先清除所有dom的选中状态及样式 + const doms = document.querySelectorAll('.cellUnit'); + if (doms) { + doms.forEach((item) => { + item.setAttribute('data-selectedCell', '0'); + item.classList.remove(s.selected); + }); + } + // 给当前dom添加选中状态 + dom.setAttribute('data-selectedCell', '1'); + // 给当前dom添加选中样式 + dom.classList.add(s.selected); + } } }} style={style} @@ -324,7 +342,16 @@ const Cell = (props: CellProps) => { }; return ( -
+
{status === 'detail' && selfRenderDetailCell()} {status === 'edit' && selfRenderEditCell()}
diff --git a/components/apolloTable/component/Table.less b/components/apolloTable/component/Table.less index db68117..15c9a9f 100644 --- a/components/apolloTable/component/Table.less +++ b/components/apolloTable/component/Table.less @@ -33,6 +33,7 @@ position: absolute; right: 0; z-index: 1; + overflow: hidden; } :global(.ReactVirtualized__Grid__innerScrollContainer) { overflow: unset !important; diff --git a/components/apolloTable/component/Table.tsx b/components/apolloTable/component/Table.tsx index 48351db..1c5483e 100644 --- a/components/apolloTable/component/Table.tsx +++ b/components/apolloTable/component/Table.tsx @@ -615,16 +615,16 @@ export default class AirTable extends Component { })} /> ) : ( - columnCount > 0 && - !loading && ( - - ) - )} + columnCount > 0 && + !loading && ( + + ) + )}
}
@@ -677,6 +677,7 @@ export default class AirTable extends Component { position: 'absolute', right: 0, top: headerHeight, + marginRight: -scrollbarWidth, }} > { columns: showColumns, showColumns: rightColumns, })} + onScroll={(...arg: Array) => { + onScroll({ scrollTop: arg[0].scrollTop }); + this.onScroll(arg[0]); + }} columnCount={rightCount} - width={rightWidth} + width={rightWidth + scrollbarWidth} rowHeight={rowHeight} rowCount={rowCount} height={totalHeight - scrollbarWidth} diff --git a/components/apolloTable/component/base/detail/tag/index.tsx b/components/apolloTable/component/base/detail/tag/index.tsx index c33dc9b..6c2f1f9 100644 --- a/components/apolloTable/component/base/detail/tag/index.tsx +++ b/components/apolloTable/component/base/detail/tag/index.tsx @@ -32,41 +32,15 @@ export const Tags = (props: any) => { itemStyle.marginBottom = '5px'; } return ( +
-
-
- {value.map((item, index) => { - let color = ''; - if (options && Array.isArray(options) && options.length > 0) { - const obj = options.find((ls) => ls.id === item.value) || {}; - color = obj.color || 'e9eef9'; - } - return ( - -
{item.text}
- - ); - })} -
-
{dotVisible && mode === 'multiple' && ( { - e.stopPropagation(); - }} placement="left" overlayClassName={s.popContainer} content={
{ - e.stopPropagation(); - }} > {value.map((item, index) => { let color = ''; @@ -83,91 +57,51 @@ export const Tags = (props: any) => {
} > -
- +
+
+ {value.map((item, index) => { + let color = ''; + if (options && Array.isArray(options) && options.length > 0) { + const obj = options.find((ls) => ls.id === item.value) || {}; + color = obj.color || 'e9eef9'; + } + return ( + +
{item.text}
+ + ); + })} +
)} + {!dotVisible && ( +
+
+ {value.map((item, index) => { + let color = ''; + if (options && Array.isArray(options) && options.length > 0) { + const obj = options.find((ls) => ls.id === item.value) || {}; + color = obj.color || 'e9eef9'; + } + return ( + +
{item.text}
+ + ); + })} +
+
+ )}
- - //
- // {dotVisible && mode === 'multiple' && ( - // { - // debugger - // e.stopPropagation(); - // }} - // placement="left" - // overlayClassName={s.popContainer} - // content={ - //
{ - // debugger - // e.stopPropagation(); - // }} - // > - // {value.map((item, index) => { - // let color = ''; - // if (options && Array.isArray(options) && options.length > 0) { - // const obj = options.find((ls) => ls.id === item.value) || {}; - // color = obj.color || 'e9eef9'; - // } - // return ( - // - //
{item.text}
- // - // ); - // })} - //
- // } - // > - //
- //
- // {value.map((item, index) => { - // let color = ''; - // if (options && Array.isArray(options) && options.length > 0) { - // const obj = options.find((ls) => ls.id === item.value) || {}; - // color = obj.color || 'e9eef9'; - // } - // return ( - // - //
{item.text}
- // - // ); - // })} - //
- //
- // - // )} - // {!dotVisible && ( - //
- //
- // {value.map((item, index) => { - // let color = ''; - // if (options && Array.isArray(options) && options.length > 0) { - // const obj = options.find((ls) => ls.id === item.value) || {}; - // color = obj.color || 'e9eef9'; - // } - // return ( - // - //
{item.text}
- // - // ); - // })} - //
- //
- // )} - //
); }; export default Tags; diff --git a/components/apolloTable/component/base/edit/container/index.tsx b/components/apolloTable/component/base/edit/container/index.tsx index 8dfccaa..3e4df61 100644 --- a/components/apolloTable/component/base/edit/container/index.tsx +++ b/components/apolloTable/component/base/edit/container/index.tsx @@ -11,13 +11,14 @@ interface State { } export default function CellContainer

(Comp) { return class extends React.Component

{ + container: any; constructor(props) { super(props); this.state = { value: props.value, // 组件的值 option: undefined, // 选择项 }; - console.log('props.value', props.value); + this.container = React.createRef(); } componentDidMount(): void { document.addEventListener('click', this.onBlur, false); @@ -26,30 +27,49 @@ export default function CellContainer

(Comp) { document.removeEventListener('click', this.onBlur, false); } changeValue = (value: any, option: any) => { - console.log('value', value); this.setState({ value, option }); }; - onBlur = () => { + onBlur = (e: any) => { + let currTarget = e.target; + while (currTarget != document) { + let editing = currTarget.getAttribute('data-editingCell'); + // 当前点击div是正在编辑的cell时，阻止修改回调 + if (editing === '1') { + return; + } + currTarget = currTarget.parentNode; + } + const { onEmitChange } = this.props; const { value, option } = this.state; - console.log('state.value', value); if (typeof onEmitChange === 'function') { onEmitChange(value, option); + // 清除所有dom的编辑状态 + const doms = document.querySelectorAll('.cellUnit'); + if (doms) { + doms.forEach((item) => { + item.setAttribute('data-editingCell', '0'); + }); + } } }; - onClick = (e) => { - e.stopPropagation(); //阻止事件冒泡 - e.nativeEvent.stopImmediatePropagation(); - }; + render() { const selfProps = antiAssign(this.props, ['onEmitChange', 'onChange', 'value']); const { value } = this.state; + // cellContainer默认将组件中的全局弹框挂载到当前cell上 return ( -

+
{ + return this.container.current; + }} + getCalendarContainer={() => { + return this.container.current; + }} />
); -- 2.21.0