diff --git a/components/apolloTable/component/Cell.less b/components/apolloTable/component/Cell.less index fba0e6bc7a53744adea6a5810b72ac2febc23ce0..6fe11dd3d740f11431265d7f126f76c9c70be8da 100644 --- a/components/apolloTable/component/Cell.less +++ b/components/apolloTable/component/Cell.less @@ -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; diff --git a/components/apolloTable/component/Cell.tsx b/components/apolloTable/component/Cell.tsx index e45cfafd17361a0b2ef1fb0733cd5f58546e8ebc..646ea65890b769529422d55a8821fc5f1bdf9131 100644 --- a/components/apolloTable/component/Cell.tsx +++ b/components/apolloTable/component/Cell.tsx @@ -1,5 +1,6 @@ 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'; diff --git a/components/apolloTable/component/Table.tsx b/components/apolloTable/component/Table.tsx index 0c16f14b3b73629ffe58cfaff16b8cffc279c133..dc71ada66db7b598a83e36f4ed7111bf2557e711 100644 --- a/components/apolloTable/component/Table.tsx +++ b/components/apolloTable/component/Table.tsx @@ -370,7 +370,6 @@ export default class AirTable extends Component { if (rowCount > 0 && rowCount * rowHeight > totalHeight) { realWidth = tableWidth + scrollbarWidth; } - console.log('rightColumns', rightColumns); return ( {({ locale }) => ( diff --git a/components/apolloTable/component/base/_utils/getFormatter.tsx b/components/apolloTable/component/base/_utils/getFormatter.tsx index 146a6d48ec2a03d908db1ab9569fedf6186b3005..983888be6deb55902bc380b23da5b60372198669 100644 --- a/components/apolloTable/component/base/_utils/getFormatter.tsx +++ b/components/apolloTable/component/base/_utils/getFormatter.tsx @@ -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) => { diff --git a/components/apolloTable/component/base/_utils/transferAttr.tsx b/components/apolloTable/component/base/_utils/transferAttr.tsx index d7c524867b4a68c6b0e3c48e1667a5c5914e7c4e..04f6e50476b26bcc35328fdd719e7155a72b1ab7 100644 --- a/components/apolloTable/component/base/_utils/transferAttr.tsx +++ b/components/apolloTable/component/base/_utils/transferAttr.tsx @@ -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; diff --git a/components/apolloTable/component/base/detail/number/index.tsx b/components/apolloTable/component/base/detail/number/index.tsx index 1456ca0c552907759e3bff23e4075b0f4f7ad5ad..f9ee42475d1f419b8f79c1cd8890dda33714bac0 100644 --- a/components/apolloTable/component/base/detail/number/index.tsx +++ b/components/apolloTable/component/base/detail/number/index.tsx @@ -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') { diff --git a/components/apolloTable/component/base/detail/upload/index.tsx b/components/apolloTable/component/base/detail/upload/index.tsx index f572a9119a7ca78f836f5e92146e627b4a02a13d..81134bb9d7b0256fba0238380bb8e56a6ca0ccce 100644 --- a/components/apolloTable/component/base/detail/upload/index.tsx +++ b/components/apolloTable/component/base/detail/upload/index.tsx @@ -1,8 +1,8 @@ -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) => { ); })} {themeValue.length > len && {`${themeValue.length - len}+`}} + ); }; diff --git a/components/apolloTable/component/base/edit/input/index.tsx b/components/apolloTable/component/base/edit/input/index.tsx index 7f01a1bc232527e1575d2a22809caad0e8509d24..df538b3f2fd180bd3973053a58f02a0125e7ad3f 100644 --- a/components/apolloTable/component/base/edit/input/index.tsx +++ b/components/apolloTable/component/base/edit/input/index.tsx @@ -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 ( -
- { - changeValue(e.target.value); - }} - /> - {!!maxLength && {`Entered ${(value || '').length}/${maxLength}`}} -
+ + {({ locale }) => { + return ( +
+ { + changeValue(e.target.value); + }} + /> + {!!maxLength && ( + {`${locale.alreadyInput} ${ + (value || '').length + }/${maxLength}`} + )} +
+ ); + }} + ); }; diff --git a/components/apolloTable/component/base/edit/textarea/index.tsx b/components/apolloTable/component/base/edit/textarea/index.tsx index 80522939f4b7980f6c18a9e4f24efa33d1b8ec35..4300e353aff8da7d041712892528ab31500e9b50 100644 --- a/components/apolloTable/component/base/edit/textarea/index.tsx +++ b/components/apolloTable/component/base/edit/textarea/index.tsx @@ -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 ( -
- - {!!maxLength && {`Entered ${(value || '').length}/${maxLength}`}} -
+ + {({ locale }) => { + return ( +
+ + {!!maxLength && ( + {`${locale.alreadyInput} ${ + (value || '').length + }/${maxLength}`} + )} +
+ ); + }} + ); }; diff --git a/components/apolloTable/detailForm/index.less b/components/apolloTable/detailForm/index.less new file mode 100644 index 0000000000000000000000000000000000000000..0e8b54af433d0a52ff8205f71a1fcda4a3b41bf7 --- /dev/null +++ b/components/apolloTable/detailForm/index.less @@ -0,0 +1,60 @@ +@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; + } + } + } + } +} diff --git a/components/apolloTable/detailForm/index.tsx b/components/apolloTable/detailForm/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..158b7cae783921d3c5fb4df03878d954a40fafbb --- /dev/null +++ b/components/apolloTable/detailForm/index.tsx @@ -0,0 +1,77 @@ +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 ( + + ); + }; + const renderBtn = () => { + return ( +
{ + return goEdit('editPage'); + }} + > + 编辑 +
+ ); + }; + return ( +
+
+
{title}
+ {renderBtn()} +
+
+ {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 ( +
+
{`${item.columnChsName}：`}
+
{renderDetailForm(item)}
+
+ ); + })} +
+
+ ); +}; +export default DetailForm; diff --git a/components/apolloTable/locale.ts b/components/apolloTable/locale.ts index a1734ea902f1360c5989654ec07efe69f32d2294..a71378ecc0340844ee81b73124a1a0540626c26f 100644 --- a/components/apolloTable/locale.ts +++ b/components/apolloTable/locale.ts @@ -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', }, };