Skip to content

S
submodule
Commit 74d527ed authored by zhangwenshuai's avatar zhangwenshuai
Browse files
Options

update apolloTable

parent b645f18f
Hide whitespace changes
Inline Side-by-side
Showing with 212 additions and 26 deletions
components/apolloTable/component/Cell.less
View file @ 74d527ed
......@@ -10,6 +10,9 @@
height: 100%;
font-size: @textFontGen;
padding: 0 @paddingLg;
&.selected{
box-shadow: inset 0 0 0 1px @primaryColor;
}
.num {
min-width: 30px;
max-width: 100px;
......
components/apolloTable/component/Cell.tsx
View file @ 74d527ed
import React, { useEffect, useState } from 'react';
import { Checkbox, message, Popover } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import { config } from './base/config';
import { getEditComponent } from './base';
......
components/apolloTable/component/Table.tsx
View file @ 74d527ed
......@@ -370,7 +370,6 @@ export default class AirTable extends Component<TableProps, TableState> {
if (rowCount > 0 && rowCount * rowHeight > totalHeight) {
realWidth = tableWidth + scrollbarWidth;
}
console.log('rightColumns', rightColumns);
return (
<Consumer>
{({ locale }) => (
......
components/apolloTable/component/base/_utils/getFormatter.tsx
View file @ 74d527ed
......@@ -57,8 +57,12 @@ export const GetFormatter = {
const obj = Array.isArray(val) && val.length > 0 ? val[0] : {};
return obj.value || 0;
},
NUMBER: (val) => {
NUMBER: (val, config) => {
const obj = Array.isArray(val) && val.length > 0 ? val[0] : {};
const { precision } = config;
if (precision >= 0 && isNumber(obj.value)) {
return Number(obj.value).toFixed(precision);
}
return obj.value;
},
PERCENTAGE: (val, config) => {
......
components/apolloTable/component/base/_utils/transferAttr.tsx
View file @ 74d527ed
......@@ -4,10 +4,14 @@ export const transferAttr = (columnType, columnAttrObj) => {
switch (String(columnType)) {
case '9':
let precision9;
if (isNumber(columnAttrObj.precision)) {
precision9 = columnAttrObj.precision;
} else if (isNumber(columnAttrObj.decimalPartMaxLength)) {
precision9 = columnAttrObj.decimalPartMaxLength;
if (columnAttrObj.dataType === 'INT') {
precision9 = 0;
} else {
if (isNumber(columnAttrObj.precision)) {
precision9 = columnAttrObj.precision;
} else if (isNumber(columnAttrObj.decimalPartMaxLength)) {
precision9 = columnAttrObj.decimalPartMaxLength;
}
}
columnAttrObj.precision = precision9;
columnAttrObj.min = columnAttrObj.minValue;
......
components/apolloTable/component/base/detail/number/index.tsx
View file @ 74d527ed
......@@ -3,8 +3,8 @@ import styles from './index.less';
import { NumberProps } from '../detailInterface';
export const ApolloNumberDetail = (props: NumberProps) => {
const { value, formatter } = props;
const formatValue = formatter ? formatter(value) : value;
const { value, formatter, componentAttr } = props;
const formatValue = formatter ? formatter(value, componentAttr) : value;
if (!formatValue) return null;
if (typeof formatValue === 'string') {
......
components/apolloTable/component/base/detail/upload/index.tsx
View file @ 74d527ed
import React from 'react';
// import Upload from '../../extra/upload';
import React, { useRef } from 'react';
import styles from './styles.less';
import { UploadProps } from '../detailInterface';
import { checkoutFileType } from '../../extra/upload/utils';
import Preview from '../../extra/upload/preview';
const itemWidth = 20;
const itemSpace = 5;
......@@ -11,6 +11,7 @@ export const ApolloUploadDetail = (props: UploadProps) => {
const { value, formatter, width } = props;
const formatValue = formatter ? formatter(value) : value;
if (!formatValue) return null;
const previewModel = useRef(null);
let themeValue: any[] = [];
if (Array.isArray(formatValue)) {
themeValue = formatValue.map((item) => {
......@@ -20,6 +21,12 @@ export const ApolloUploadDetail = (props: UploadProps) => {
};
});
}
const onPreview = (item) => {
if (previewModel && previewModel.current && previewModel.current.onPreview) {
previewModel.current.onPreview(item.value, item.name);
}
};
// 根据宽度计算显示个数, 临时使用
const len = Math.floor(((width || 200) - 40) / (itemWidth + itemSpace));
return (
......@@ -29,14 +36,16 @@ export const ApolloUploadDetail = (props: UploadProps) => {
<img
alt=""
className={styles.img}
key={item.value + index}
key={index}
src={item.thumbUrl}
width={itemWidth}
style={{ marginRight: itemSpace }}
onClick={onPreview.bind(null, item)}
/>
);
})}
{themeValue.length > len && <span className={styles.moreBtn}>{`${themeValue.length - len}+`}</span>}
<Preview ref={previewModel} />
</div>
);
};
components/apolloTable/component/base/edit/input/index.tsx
View file @ 74d527ed
......@@ -3,6 +3,7 @@ import { Input } from 'antd';
import styles from './styles.less';
import { antiAssign } from '../../../../utils/utils';
import { ApolloInputProps } from '../editInterface';
import { Consumer } from '../../../context';
export const ApolloInput = (props: ApolloInputProps) => {
const { maxLength, onChange, value, style } = props;
......@@ -16,23 +17,38 @@ export const ApolloInput = (props: ApolloInputProps) => {
const newStyle: any = {
...style,
};
const wordNumStyle: any = {};
if (maxLength) {
newStyle.paddingRight = '110px';
if (style && style.minHeight) {
newStyle.minHeight = Number(style.minHeight) + 10;
newStyle.paddingRight = '11px';
newStyle.paddingBottom = '28px';
wordNumStyle.bottom = '4px';
wordNumStyle.marginTop = '0';
}
}
return (
<div className={styles.container}>
<Input
className={styles.input}
style={newStyle}
{...selfProps}
onChange={(e) => {
changeValue(e.target.value);
}}
/>
{!!maxLength && <span className={styles.wordNumber}>{`Entered ${(value || '').length}/${maxLength}`}</span>}
</div>
<Consumer>
{({ locale }) => {
return (
<div className={styles.container}>
<Input
className={styles.input}
style={newStyle}
{...selfProps}
onChange={(e) => {
changeValue(e.target.value);
}}
/>
{!!maxLength && (
<span className={styles.wordNumber} style={wordNumStyle}>{`${locale.alreadyInput} ${
(value || '').length
}/${maxLength}`}</span>
)}
</div>
);
}}
</Consumer>
);
};
components/apolloTable/component/base/edit/textarea/index.tsx
View file @ 74d527ed
......@@ -3,6 +3,7 @@ import { Input } from 'antd';
import styles from './styles.less';
import { antiAssign } from '../../../../utils/utils';
import { ApolloTextAreaProps } from '../editInterface';
import { Consumer } from '../../../context';
export const ApolloTextArea = (props: ApolloTextAreaProps) => {
const { maxLength, onChange, value } = props;
......@@ -15,9 +16,19 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => {
};
return (
<div className={styles.container}>
<Input.TextArea className={styles.input} {...selfProps} onChange={changeValue} />
{!!maxLength && <span className={styles.wordNumber}>{`Entered ${(value || '').length}/${maxLength}`}</span>}
</div>
<Consumer>
{({ locale }) => {
return (
<div className={styles.container}>
<Input.TextArea className={styles.input} {...selfProps} onChange={changeValue} />
{!!maxLength && (
<span className={styles.wordNumber}>{`${locale.alreadyInput} ${
(value || '').length
}/${maxLength}`}</span>
)}
</div>
);
}}
</Consumer>
);
};
components/apolloTable/detailForm/index.less 0 → 100644
View file @ 74d527ed
@import '~@/theme/common';
.wrap {
position: relative;
width: 580px;
background: #fff;
.titleRow {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 0 @paddingLg;
.titleCls {
font-size: 14px;
color: #5a6876;
line-height: 62px;
z-index: 10;
background: #fff;
}
.editClick {
cursor: pointer;
.detailEdit {
color: @primaryColor;
font-size: 14px;
margin-left: 6px;
}
}
}
.formWrap {
padding: @paddingLg;
height: 520px;
overflow-x: hidden;
overflow-y: auto;
margin-bottom: 68px;
position: relative;
background: rgb(250, 250, 250);
.row {
display: flex;
background-color: rgba(251, 251, 251, 1);
.listLeft {
width: 150px;
padding: 12px;
text-align: right;
align-self: center;
background-color: rgba(251, 251, 251, 1);
}
.listRight {
flex: 1;
padding: 12px 20px;
background-color: #fff;
.item {
white-space: initial;
}
}
}
}
}
components/apolloTable/detailForm/index.tsx 0 → 100644
View file @ 74d527ed
import React from 'react';
import { config } from '../component/base/config';
import { transferAttr } from '../component/base/_utils/transferAttr';
import styles from './index.less';
const DetailForm = (props: any) => {
const { data, rowData, title, goEdit } = props;
const renderDetailForm = (item: any) => {
const { columnType, columnAttrObj, value, renderDetailForm } = item;
let detailConfig;
if (typeof renderDetailForm === 'function') {
detailConfig = renderDetailForm({ cellData: value, rowData, columnConfig: item });
} else {
detailConfig = config[String(columnType)] || config['1'];
}
const DetailComp: any = detailConfig.detailComp;
const cellRenderProps: any = detailConfig.cellRenderProps || {};
const newProps = {
...(detailConfig.componentAttr || {}),
...(columnAttrObj || {}),
};
const transferColumn = transferAttr(columnType, newProps);
return (
<DetailComp
value={value}
rowData={rowData}
columnConfig={item}
componentAttr={transferColumn}
formatter={detailConfig.getFormatter}
cellRenderProps={cellRenderProps}
origin="detailForm"
className={styles.item}
/>
);
};
const renderBtn = () => {
return (
<div
role="presentation"
className={styles.editClick}
onClick={() => {
return goEdit('editPage');
}}
>
<span className={styles.detailEdit}>编辑</span>
</div>
);
};
return (
<div className={styles.wrap}>
<div className={styles.titleRow}>
<div className={styles.titleCls}>{title}</div>
{renderBtn()}
</div>
<div id="gotop" className={styles.formWrap}>
{data.map((item: any, index: number) => {
const border =
index === 0
? { border: '1px solid #ECECEC' }
: {
borderBottom: '1px solid #ECECEC',
borderLeft: '1px solid #ECECEC',
borderRight: '1px solid #ECECEC',
};
return (
<div key={index} className={styles.row} style={border}>
<div className={styles.listLeft}>{`${item.columnChsName}：`}</div>
<div className={styles.listRight}>{renderDetailForm(item)}</div>
</div>
);
})}
</div>
</div>
);
};
export default DetailForm;
components/apolloTable/locale.ts
View file @ 74d527ed
......@@ -18,6 +18,7 @@ export const defaultLocale: any = {
hideHideAll: '全部隐藏',
select: '请选择',
text: '请输入',
alreadyInput: '已输入',
},
en: {
empty: 'It’s empty here.',
......@@ -38,5 +39,6 @@ export const defaultLocale: any = {
hideHideAll: 'Hide all',
select: 'please select',
text: 'please input',
alreadyInput: 'Entered',
},
};
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