merge master

components/apolloTable/component/Cell.tsx

@@ -173,7 +173,7 @@ const Cell = (props: CellProps) => {
                 {showExpand && columnIndex === 0 && (
                     <div className={s.expand}>
                         <img
-                            onClick={showExpand.bind(null, { rowId: record.id })}
+                            onClick={showExpand.bind(null, { rowId: record.id, historyGroupId: record.historyGroupId })}
                             className={s.expandIcon}
                             alt=""
                             src={expandIcon}
@@ -213,11 +213,8 @@ const Cell = (props: CellProps) => {
         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 = (
             <div
                 className={s.detailCell}
@@ -337,6 +334,7 @@ const Cell = (props: CellProps) => {
                         const value = setFormat(editConfig, columnConfig, changedValue, optionValue);
                         emitChangeCellData(value, optionValue);
                     }}
+                    cellRenderProps={cellRenderProps}
                     style={{
                         minHeight: cellStyle.height,
                         borderRadius: 0,

components/apolloTable/component/Column.tsx

@@ -85,7 +85,7 @@ export default class TableColumn extends PureComponent<ColumnProps> {
         return (
             <div className={s.colContainer}>
                 {rowSelection && columnIndex === 0 && <div className={s.checkbox}>{this.getCheckbox()}</div>}
-                <div className={s.colBrief} style={{ marginLeft: showIndex && columnIndex === 0 ? '40px' : 0 }}>
+                <div className={s.colBrief} style={{ marginLeft: showIndex && columnIndex === 0 ? '56px' : 0 }}>
                     {icon && <div className={s.colIcon}>{icon()}</div>}
                     <span className={required ? classNames(s.colTitle, s.required) : s.colTitle}>
                         {columnChsName}

components/apolloTable/component/Table.tsx

@@ -55,11 +55,9 @@ export default class AirTable extends Component<TableProps, TableState> {
         };
         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<TableProps, TableState> {
             dataSource,
             tableWidth: width,
             tableHeight: height,
-            selectedCell: null,
         };
         this.config = {
             overscanColumnCount: 5,
@@ -216,12 +213,6 @@ export default class AirTable extends Component<TableProps, TableState> {
         }
     };
 
-    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<TableProps, TableState> {
         }
     };
     // 拖拽排序回调
-    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<TableProps, TableState> {
             >
                 <ResizableBox
                     width={style.width}
+                    height={style.height}
                     handle={
                         <span
                             className={styles.handleWidth}
@@ -430,7 +422,7 @@ export default class AirTable extends Component<TableProps, TableState> {
         }: { 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<TableProps, TableState> {
                 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<TableProps, TableState> {
                                             style={{
                                                 width: `${rightWidth}px`,
                                                 height: `${totalHeight - scrollbarWidth + headerHeight}px`,
-                                                right: scrollbarWidth,
+                                                right: paddingRight,
                                             }}
                                         >
                                             {

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;

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 <div className={classNames(styles.text, className)}>{value}</div>;

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 (
             <div className={s.container} style={{ overflow: 'hidden' }}>
-                <span className={s.item} style={{ ...itemStyle, background: `#${getColor(value[0])}` }}>
+                <span className={s.item} style={{ ...itemStyle, background: getColor(value[0], options) }}>
                     <div className={s.itemBgTxt}>{value[0].text}</div>
                 </span>
             </div>
@@ -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 (
         <div className={s.container}>
@@ -69,7 +81,7 @@ export const Tags = (props: any) => {
                                             <span
                                                 className={s.popItem}
                                                 key={index}
-                                                style={{ background: `#${getColor(item)}` }}
+                                                style={{ background: getColor(item, options) }}
                                             >
                                                 <div className={s.popItemBgTxt}>{item.text}</div>
                                             </span>
@@ -84,7 +96,7 @@ export const Tags = (props: any) => {
                                         <span
                                             key={index}
                                             className={classNames(s.item, s.multi)}
-                                            style={{ ...itemStyle, background: `#${getColor(item)}` }}
+                                            style={{ ...itemStyle, background: getColor(item, options) }}
                                         >
                                             <div className={s.itemBgTxt}>{item.text}</div>
                                         </span>
@@ -99,7 +111,7 @@ export const Tags = (props: any) => {
                                     <span
                                         key={index}
                                         className={classNames(s.item, s.multi)}
-                                        style={{ ...itemStyle, background: `#${getColor(item)}` }}
+                                        style={{ ...itemStyle, background: getColor(item, options) }}
                                     >
                                         <div className={s.itemBgTxt}>{item.text}</div>
                                     </span>

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) => {
                     )}
                 </div>
             </div>
-            <div
-                className={s.moreBtn}
-                onClick={() => {
-                    changeEdit();
-                }}
-            >
-                <IconFont type="iconzhankai1" />
-            </div>
+            {origin !== 'detailForm' && (
+                <div
+                    className={s.moreBtn}
+                    onClick={() => {
+                        changeEdit();
+                    }}
+                >
+                    <IconFont type="iconzhankai1" />
+                </div>
+            )}
         </div>
     );
 };

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;

components/apolloTable/component/base/detail/textarea/index.tsx

-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) => {
             <div className={styles.container} ref={container}>
                 {dotVisible ? (
                     <Tooltip
-                        overlayClassName={styles.tooltip}
+                        // overlayClassName={styles.tooltip}
                         title={
                             <div className={styles.tooltipTitle}>
                                 {value}

components/apolloTable/component/base/edit/container/index.tsx

@@ -31,7 +31,7 @@ export default function CellContainer<P extends Props>(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') {

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 (
         <InputSearch
             className={s.select}
-            request={(val) => { return request({ name: val, fieldValueName: type }); }}
+            request={request}
             fieldNames={{ value: 'fieldValueValue', label: 'fieldValueName' }}
             {...selfProps}
             onDropdownVisibleChange={singleBlurFn}

components/apolloTable/component/base/extra/dataEntry/textSelect/index.tsx

@@ -137,7 +137,11 @@ class TextSelect extends React.Component<Props, State> {
     onChange = (obj) => {
         const { onChange } = this.props;
         if (typeof onChange === 'function') {
-            onChange(obj);
+            if (!obj || (!obj.label && !obj.value)) {
+                onChange(undefined);
+            } else {
+                onChange(obj);
+            }
         }
     };
 

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;

components/apolloTable/component/index.tsx

@@ -58,6 +58,7 @@ class AirTable extends React.Component<CommonProps, CommonState> {
         const { columns, dataSource } = this.state;
         const {
             className,
+            tableClassName,
             rowStyle,
             rowClassName,
             distanceToLoad,
@@ -105,7 +106,11 @@ class AirTable extends React.Component<CommonProps, CommonState> {
                         <OperateConfig columns={columns} operateConfig={operateConfig} showCondition={showCondition} />
                     )}
                     <div
-                        className={onScroll ? classNames(styles.tableContainer, styles.scroll) : styles.tableContainer}
+                        className={
+                            onScroll
+                                ? classNames(styles.tableContainer, styles.scroll, tableClassName)
+                                : classNames(styles.tableContainer, tableClassName)
+                        }
                     >
                         {tableOperateConfig && (
                             <div className={styles.tableOperateContainer}>

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;
 }

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;
+                        }}
                     />,
                 )}
             </FormItem>