Skip to content

S
submodule
Commit 76b93f18 authored by zhangwenshuai's avatar zhangwenshuai
Browse files
Options

merge master

parents 18f321d0 83e120f5
Hide whitespace changes
Inline Side-by-side
Showing with 119 additions and 75 deletions
components/apolloTable/component/Cell.tsx
View file @ 76b93f18
......@@ -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
View file @ 76b93f18
......@@ -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
View file @ 76b93f18
......@@ -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
View file @ 76b93f18
......@@ -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
View file @ 76b93f18
......@@ -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
View file @ 76b93f18
......@@ -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
View file @ 76b93f18
......@@ -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
View file @ 76b93f18
......@@ -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
View file @ 76b93f18
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
View file @ 76b93f18
......@@ -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
View file @ 76b93f18
......@@ -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
View file @ 76b93f18
......@@ -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
View file @ 76b93f18
......@@ -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
View file @ 76b93f18
......@@ -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
View file @ 76b93f18
......@@ -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
View file @ 76b93f18
......@@ -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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment