diff --git a/components/apolloTable/component/Cell.tsx b/components/apolloTable/component/Cell.tsx index 58c60b44466a4ea0e04f83202be8e7657b503b62..7b61b702fcb3f0cc9169ebfcf637d01f8d206b74 100644 --- a/components/apolloTable/component/Cell.tsx +++ b/components/apolloTable/component/Cell.tsx @@ -173,7 +173,7 @@ const Cell = (props: CellProps) => { {showExpand && columnIndex === 0 && (
{ const transferColumn = transferAttr(columnType, newProps); const style: any = {}; - if (columnIndex === 0 && (rowSelection || showExpand || showIndex)) { - style.paddingLeft = 0; - } - const { dynamicCellConfigDTO } = columnData; + const { dynamicCellConfigDTO } = columnData || {}; const detail = (
{ const value = setFormat(editConfig, columnConfig, changedValue, optionValue); emitChangeCellData(value, optionValue); }} + cellRenderProps={cellRenderProps} style={{ minHeight: cellStyle.height, borderRadius: 0, diff --git a/components/apolloTable/component/Column.tsx b/components/apolloTable/component/Column.tsx index 62c296cb6c79803742e6b4be4d53df5f0cdcc498..e3db4547e78d18b3756d39c1686266df2ffb25b4 100644 --- a/components/apolloTable/component/Column.tsx +++ b/components/apolloTable/component/Column.tsx @@ -85,7 +85,7 @@ export default class TableColumn extends PureComponent { return (
{rowSelection && columnIndex === 0 &&
{this.getCheckbox()}
} -
+
{icon &&
{icon()}
} {columnChsName} diff --git a/components/apolloTable/component/Table.tsx b/components/apolloTable/component/Table.tsx index 0a23587a961a50e226d1b5583684319da114dc45..409ab26371adf4fdbfb5386a8b00f41b59a28412 100644 --- a/components/apolloTable/component/Table.tsx +++ b/components/apolloTable/component/Table.tsx @@ -55,11 +55,9 @@ export default class AirTable extends Component { }; if (JSON.stringify(dataSource) !== JSON.stringify(nextProps.dataSource)) { nextState.dataSource = nextProps.dataSource; - nextState.selectedCell = null; } if (JSON.stringify(columns) !== JSON.stringify(nextProps.columns)) { nextState.columns = nextProps.columns; - nextState.selectedCell = null; } return nextState; } @@ -72,7 +70,6 @@ export default class AirTable extends Component { dataSource, tableWidth: width, tableHeight: height, - selectedCell: null, }; this.config = { overscanColumnCount: 5, @@ -216,12 +213,6 @@ export default class AirTable extends Component { } }; - changeSelectedCell = (key) => { - this.setState({ - selectedCell: key, - }); - }; - // 列伸缩回调 onResizeWidth = (e) => { const originLeft = (this.tableContainer && this.tableContainer.getBoundingClientRect().x) || 0; @@ -312,10 +303,10 @@ export default class AirTable extends Component { } }; // 拖拽排序回调 - onDragSorted = (dragColumn:any, dropColumn:any) => { + onDragSorted = (dragColumn: any, dropColumn: any) => { const { onDragSorted } = this.props; const { columns } = this.state; - const newColumns:any[] = []; + const newColumns: any[] = []; columns.map((item) => { if (dragColumn.orderNo > dropColumn.orderNo) { if (item.orderNo >= dropColumn.orderNo && item.orderNo <= dragColumn.orderNo) { @@ -387,6 +378,7 @@ export default class AirTable extends Component { > { }: { showColumns: ColumnProps[]; showData: RowProps; position?: string }, { columnIndex, key, rowIndex, style }: any, ) => { - const { columns, dataSource, selectedCell } = this.state; + const { columns, dataSource } = this.state; const { emitChangeCell, paginationConfig, @@ -507,8 +499,6 @@ export default class AirTable extends Component { cellEditable={cellEditable} rowSelection={position === 'right' ? false : rowSelection} contentMenu={contentMenu} - selectedCell={selectedCell} - changeSelectedCell={this.changeSelectedCell} cellKey={key} position={position} /> @@ -759,7 +749,7 @@ export default class AirTable extends Component { style={{ width: `${rightWidth}px`, height: `${totalHeight - scrollbarWidth + headerHeight}px`, - right: scrollbarWidth, + right: paddingRight, }} > { diff --git a/components/apolloTable/component/base/_utils/setFormatter.tsx b/components/apolloTable/component/base/_utils/setFormatter.tsx index 9ce706cb470490cf6b82f4795f2a862efbf1e655..aacfc49bc5b5eb19e6fc8d47230dd2aeada6c8be 100644 --- a/components/apolloTable/component/base/_utils/setFormatter.tsx +++ b/components/apolloTable/component/base/_utils/setFormatter.tsx @@ -95,8 +95,10 @@ export const SetFormatter = { PERCENTAGE: (val, config) => { val = `${val}`.replace('%', ''); if (!isNumber(val)) return emptyModel; + const { precision } = config || {}; // 设置单位 val = accDiv(val, 100); - return SetFormatter.NUMBER(val, config); + val = Number(val).toFixed(precision + 2); + return [{ value: val, text: val }]; }, DATE: (val, config) => { if (!val) return emptyModel; diff --git a/components/apolloTable/component/base/detail/input/index.tsx b/components/apolloTable/component/base/detail/input/index.tsx index 462666c278cf29c552d7f70d509010bf59518521..e56b5e495dff4d6039fb6d536b9c7e601c7f05d3 100644 --- a/components/apolloTable/component/base/detail/input/index.tsx +++ b/components/apolloTable/component/base/detail/input/index.tsx @@ -5,7 +5,7 @@ import styles from './index.less'; import { InputProps } from '../detailInterface'; export const ApolloInputDetail = (props: InputProps) => { - const { className, origin } = props; + const { className, origin, columnConfig } = props; const value = props.formatter ? props.formatter(props.value) : props.value; if (!value) { return null; @@ -13,17 +13,22 @@ export const ApolloInputDetail = (props: InputProps) => { const [dotVisible, setDotVisible] = useState(false); const container = useRef(null); const dom = useRef(null); + const detaWidth = useRef(columnConfig.width || 0); useEffect(() => { const containerTarget: any = container.current; const target: any = dom.current; + const deta = columnConfig.width - detaWidth.current; if (containerTarget && target) { - if (target.clientWidth > containerTarget.clientWidth) { + if (target.clientWidth > containerTarget.clientWidth + deta) { setDotVisible(true); } else { setDotVisible(false); } } - }, [value]); + if (deta !== 0) { + detaWidth.current = columnConfig.width; + } + }, [value, columnConfig.width]); if (origin === 'detailForm') { return
{value}
; diff --git a/components/apolloTable/component/base/detail/tag/index.tsx b/components/apolloTable/component/base/detail/tag/index.tsx index 7bc72947358ba6af1f152a50d637e69c88792ef0..ef7451ebce931317de182c014cfb05193168ca5b 100644 --- a/components/apolloTable/component/base/detail/tag/index.tsx +++ b/components/apolloTable/component/base/detail/tag/index.tsx @@ -3,34 +3,41 @@ import { Popover } from 'antd'; import classNames from 'classnames'; import s from './index.less'; +const getColor = (item: any, options: any[]) => { + let color = ''; + if (item.text === item.value) { + return 'transparent'; + } + if (options && Array.isArray(options) && options.length > 0) { + const obj = + options.find((ls) => { + return String(ls.id) === String(item.value); + }) || {}; + color = obj.color || 'e9eef9'; + } + return `#${color}`; +}; export const Tags = (props: any) => { - const { value, origin, componentAttr } = props; + const { value, origin, componentAttr, columnConfig } = props; if (!Array.isArray(value) || value.length === 0) return null; + if (value.length === 1 && !value[0].text && !value[0].value) { + return null; + } const { options, mode } = componentAttr || {}; const outStyle: any = {}; const innerStyle: any = {}; const itemStyle: any = {}; - if (origin === 'detailForm') { + if (origin === 'detailForm' || origin === 'editForm') { outStyle.width = 'auto'; innerStyle.flexWrap = 'wrap'; itemStyle.marginBottom = '5px'; } - const getColor = (item: any) => { - let color = ''; - if (options && Array.isArray(options) && options.length > 0) { - const obj = options.find((ls) => { - return String(ls.id) === String(item.value); - }) || {}; - color = obj.color || 'e9eef9'; - } - return color; - }; if (mode !== 'multiple') { // 单选 return (
- +
{value[0].text}
@@ -40,19 +47,24 @@ export const Tags = (props: any) => { const [dotVisible, setDotVisible] = useState(false); const outer = useRef(null); const inner = useRef(null); + const detaWidth = useRef(columnConfig.width || 0); useEffect(() => { const outerTarget: any = outer.current; const innerTarget: any = inner.current; let visible = false; + const deta = columnConfig.width - detaWidth.current; if (outerTarget && innerTarget && origin !== 'detailForm') { - if (innerTarget.clientWidth > outerTarget.clientWidth) { + if (innerTarget.clientWidth > outerTarget.clientWidth + deta) { visible = true; } else { visible = false; } } + if (deta !== 0) { + detaWidth.current = columnConfig.width; + } setDotVisible(visible); - }, [value]); + }, [value, columnConfig.width]); return (
@@ -69,7 +81,7 @@ export const Tags = (props: any) => {
{item.text}
@@ -84,7 +96,7 @@ export const Tags = (props: any) => {
{item.text}
@@ -99,7 +111,7 @@ export const Tags = (props: any) => {
{item.text}
diff --git a/components/apolloTable/component/base/detail/text-link/index.tsx b/components/apolloTable/component/base/detail/text-link/index.tsx index 19f66c333a024d1847b37965d75e6da7bac24f55..3b6d0be2df33310bfce0d0c53d357802c4869a74 100644 --- a/components/apolloTable/component/base/detail/text-link/index.tsx +++ b/components/apolloTable/component/base/detail/text-link/index.tsx @@ -5,7 +5,7 @@ import s from './index.less'; import IconFont from '@/submodule/components/IconFont'; export const ApolloTextLinkDetail = (props: any) => { - const { value, origin, formatter, changeEdit } = props; + const { value, origin, formatter, changeEdit, columnConfig } = props; const newValue = formatter ? formatter(value) : value; if (!newValue) return null; // 以逗号分隔 @@ -13,17 +13,22 @@ export const ApolloTextLinkDetail = (props: any) => { const [dotVisible, setDotVisible] = useState(false); const outer = useRef(null); const inner = useRef(null); + const detaWidth = useRef(columnConfig.width || 0); useEffect(() => { const outerTarget: any = outer.current; const innerTarget: any = inner.current; + const deta = columnConfig.width - detaWidth.current; if (outerTarget && innerTarget && origin !== 'detailForm') { - if (innerTarget.clientWidth > outerTarget.clientWidth) { + if (innerTarget.clientWidth > outerTarget.clientWidth + deta) { setDotVisible(true); } else { setDotVisible(false); } } - }, [value]); + if (deta !== 0) { + detaWidth.current = columnConfig.width; + } + }, [value, columnConfig.width]); const outStyle: any = {}; const innerStyle: any = {}; @@ -118,14 +123,16 @@ export const ApolloTextLinkDetail = (props: any) => { )}
-
{ - changeEdit(); - }} - > - -
+ {origin !== 'detailForm' && ( +
{ + changeEdit(); + }} + > + +
+ )}
); }; diff --git a/components/apolloTable/component/base/detail/textarea/index.less b/components/apolloTable/component/base/detail/textarea/index.less index e2b0499085eae0e01b51167b357066380110fa6f..3afdbb8922825a320aa40b7c9a944ec6635a5f01 100644 --- a/components/apolloTable/component/base/detail/textarea/index.less +++ b/components/apolloTable/component/base/detail/textarea/index.less @@ -25,6 +25,8 @@ } .tooltipTitle { //min-width: 500px; + max-height: 300px; + overflow: auto; .more { margin-left: @marginGen; color: @primaryColor; diff --git a/components/apolloTable/component/base/detail/textarea/index.tsx b/components/apolloTable/component/base/detail/textarea/index.tsx index 93a2d665a4ff49b3cc2c5e35ae6d44f5bb4729e3..4f9bb9c79b7acc462bdbee96ae9836e580796a26 100644 --- a/components/apolloTable/component/base/detail/textarea/index.tsx +++ b/components/apolloTable/component/base/detail/textarea/index.tsx @@ -1,11 +1,11 @@ -import React, { useEffect, useRef, useState } from 'react'; +import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'; import classNames from 'classnames'; import { Tooltip } from 'antd'; import styles from './index.less'; import { TextAreaProps } from '../detailInterface'; export const ApolloTextAreaDetail = (props: TextAreaProps) => { - const { className, origin, componentAttr, rowData, formatter } = props; + const { className, origin, componentAttr, rowData, formatter, columnConfig } = props; const formatValue = formatter ? formatter(props.value) : props.value; if (!formatValue) { return null; @@ -18,17 +18,23 @@ export const ApolloTextAreaDetail = (props: TextAreaProps) => { const [dotVisible, setDotVisible] = useState(false); const container = useRef(null); const dom = useRef(null); + const detaWidth = useRef(columnConfig.width || 0); + useEffect(() => { const containerTarget: any = container.current; const target: any = dom.current; + const deta = columnConfig.width - detaWidth.current; if (containerTarget && target) { - if (target.clientWidth > containerTarget.clientWidth) { + if (target.clientWidth > containerTarget.clientWidth + deta) { setDotVisible(true); } else { setDotVisible(false); } } - }, [value]); + if (deta !== 0) { + detaWidth.current = columnConfig.width; + } + }, [value, columnConfig.width]); const getMore = async () => { let newValue = await getDetail({ rowId: rowData.id }); @@ -47,7 +53,7 @@ export const ApolloTextAreaDetail = (props: TextAreaProps) => {
{dotVisible ? ( {value} diff --git a/components/apolloTable/component/base/edit/container/index.tsx b/components/apolloTable/component/base/edit/container/index.tsx index 7084e59ea9c8534eb0837f201c76bda0c520dafc..87bab5788d3bf168b6595b4424b230854324671a 100644 --- a/components/apolloTable/component/base/edit/container/index.tsx +++ b/components/apolloTable/component/base/edit/container/index.tsx @@ -31,7 +31,7 @@ export default function CellContainer

(Comp) { }; onBlur = (e: any) => { let currTarget = e.target; - while (currTarget != document) { + while (currTarget && currTarget != document) { let editing = currTarget.getAttribute('data-editing-cell'); // 当前点击div是正在编辑的cell时,阻止修改回调 if (editing === '1') { diff --git a/components/apolloTable/component/base/edit/text-select/index.tsx b/components/apolloTable/component/base/edit/text-select/index.tsx index 8ac26becff4aa28e58d0c57eb0512af10a562c1a..067115a8a03a0330f55bbbc6adb3e5c1635455d2 100644 --- a/components/apolloTable/component/base/edit/text-select/index.tsx +++ b/components/apolloTable/component/base/edit/text-select/index.tsx @@ -6,7 +6,7 @@ import { onBlurFn } from '../onBlurFn'; import s from './index.less'; export const ApolloInputSearch = (props: ApolloInputSearchProps) => { - const { onChange, request, type } = props; + const { onChange, request } = props; const selfProps = antiAssign(props, ['columnConfig', 'onChange', 'request']); const isOpen = useRef(); const changeValue = (value: any) => { @@ -23,7 +23,7 @@ export const ApolloInputSearch = (props: ApolloInputSearchProps) => { return ( { return request({ name: val, fieldValueName: type }); }} + request={request} fieldNames={{ value: 'fieldValueValue', label: 'fieldValueName' }} {...selfProps} onDropdownVisibleChange={singleBlurFn} diff --git a/components/apolloTable/component/base/extra/dataEntry/textSelect/index.tsx b/components/apolloTable/component/base/extra/dataEntry/textSelect/index.tsx index 78d47e64909b6413c930952e676c96baaeff8e4d..946f99b492699e21c368cfc72121b66f9dd406de 100644 --- a/components/apolloTable/component/base/extra/dataEntry/textSelect/index.tsx +++ b/components/apolloTable/component/base/extra/dataEntry/textSelect/index.tsx @@ -137,7 +137,11 @@ class TextSelect extends React.Component { onChange = (obj) => { const { onChange } = this.props; if (typeof onChange === 'function') { - onChange(obj); + if (!obj || (!obj.label && !obj.value)) { + onChange(undefined); + } else { + onChange(obj); + } } }; diff --git a/components/apolloTable/component/base/extra/dataEntry/textSelect/styles.less b/components/apolloTable/component/base/extra/dataEntry/textSelect/styles.less index 092e7da9eb4fc0b6e6cb36027a158cd7dc55f678..2c205e51f835c021509f9ae5052ae688eda085d0 100644 --- a/components/apolloTable/component/base/extra/dataEntry/textSelect/styles.less +++ b/components/apolloTable/component/base/extra/dataEntry/textSelect/styles.less @@ -5,7 +5,7 @@ } .overlayClassName { max-height: 300px; - //overflow: auto; + overflow: auto; margin-top: 20px; :global(.ant-dropdown-menu) { width: auto !important; diff --git a/components/apolloTable/component/index.tsx b/components/apolloTable/component/index.tsx index 07a5a5ffe4fd90f372efdad27d3ce1b215198acb..94b51e616a2bc2930b523d44f269c1438c2c6a4b 100644 --- a/components/apolloTable/component/index.tsx +++ b/components/apolloTable/component/index.tsx @@ -58,6 +58,7 @@ class AirTable extends React.Component { const { columns, dataSource } = this.state; const { className, + tableClassName, rowStyle, rowClassName, distanceToLoad, @@ -105,7 +106,11 @@ class AirTable extends React.Component { )}

{tableOperateConfig && (
diff --git a/components/apolloTable/component/interface.tsx b/components/apolloTable/component/interface.tsx index f7f341db93a29794862c378cc7c417fc3de98c9e..e67ebd864cdf4d18833aad9a47de17a99e821661 100644 --- a/components/apolloTable/component/interface.tsx +++ b/components/apolloTable/component/interface.tsx @@ -83,7 +83,6 @@ export interface TableState { dataSource: RowProps[]; tableHeight?: number; tableWidth?: number; - selectedCell?: any; } export interface CommonProps extends TableProps { operateConfig?: OperateConfigProps; @@ -91,6 +90,7 @@ export interface CommonProps extends TableProps { paginationConfig?: any; locale?: any; className?: string; + tableClassName?: string; showCondition?: boolean; id?:string; } diff --git a/components/apolloTable/editFormV3/index.tsx b/components/apolloTable/editFormV3/index.tsx index eb10eaace174d66cbd3913f7d996f082022a87d0..fb939f00848f84211ac0ae76a95dc17db77fb7e7 100644 --- a/components/apolloTable/editFormV3/index.tsx +++ b/components/apolloTable/editFormV3/index.tsx @@ -8,9 +8,9 @@ * 监听表单值发生变化是的回掉:onValuesChange:Function * * 样式:propClass:object - * + * * 增加字段:hideOperateBtn,有该字段,隐藏表单底部操作按钮 - * + * * 失去焦点:onBlurFn * */ import React, { Component } from 'react'; @@ -27,10 +27,11 @@ import _ from 'lodash'; const FormItem = Form.Item; class FormWrap extends Component { + wrapDom:any; handleSubmit = (e) => { e.preventDefault(); e.stopPropagation(); - const { rowId, form, handleSubmit, data, rowData } = this.props; + const { rowId, form, handleSubmit, data, rowData, detailType } = this.props; form.validateFieldsAndScroll((err, values) => { console.log(data, 8888) if (!err) { @@ -39,7 +40,7 @@ class FormWrap extends Component { const item = data.find((temp: any) => { return temp.columnName === key; }); - const { columnType, renderEditForm, readOnlyFlag, dynamicCellConfigDTO } = item; + const { columnType, columnAttrObj, renderEditForm, readOnlyFlag, dynamicCellConfigDTO } = item; if (readOnlyFlag || (dynamicCellConfigDTO && dynamicCellConfigDTO.readonlyFlag)) { return; } @@ -50,13 +51,15 @@ class FormWrap extends Component { detailConfig = config[String(columnType)] || config['1']; } const cellValueList = setFormat(detailConfig, item, values[key]); - newValues.push({ + const newData: any = { columnCode: key, cellValueList, - }); + }; + newValues.push(newData); }); + if (typeof handleSubmit === 'function') { - handleSubmit({ data: { value: newValues } }); + handleSubmit({ data: { value: newValues }, formValues: values, detailType }); } } }); @@ -88,7 +91,7 @@ class FormWrap extends Component { renderEditForm = (item) => { const { getFieldDecorator } = this.props.form; - const { rowData, onBlurFn, rowId } = this.props; + const { rowData, rowId, getInstanceDetail, onBlurFn } = this.props; const { columnType, columnName, @@ -100,6 +103,7 @@ class FormWrap extends Component { validateFirst = true, validateTrigger = 'onChange', dynamicCellConfigDTO, + cellRenderProps, } = item; let detailConfig: any; if (typeof renderEditForm === 'function') { @@ -146,9 +150,18 @@ class FormWrap extends Component { columnConfig={item} disabled={disabled} rowId={rowId} + onBlurFn={onBlurFn1} + rowData={{ id: rowId, rowData }} + cellRenderProps={cellRenderProps} origin="editForm" form={this.props.form} - onBlurFn={onBlurFn1} + getInstanceDetail={getInstanceDetail} + getCalendarContainer={() => { + return this.wrapDom; + }} + getPopupContainer={() => { + return this.wrapDom; + }} />, )}