diff --git a/components/apolloTable/assets/delIcon.png b/components/apolloTable/assets/delIcon.png new file mode 100755 index 0000000000000000000000000000000000000000..bb5671b492eae7c38fec5b80a1d481e3cd305d14 Binary files /dev/null and b/components/apolloTable/assets/delIcon.png differ diff --git a/components/apolloTable/component/Cell.tsx b/components/apolloTable/component/Cell.tsx index 646ea65890b769529422d55a8821fc5f1bdf9131..7c3e32774d9ab18ff93678492d30e6f0cc81cd57 100644 --- a/components/apolloTable/component/Cell.tsx +++ b/components/apolloTable/component/Cell.tsx @@ -30,6 +30,9 @@ const Cell = (props: CellProps) => { rowSelection, columns, contentMenu, + selectedCell, + cellKey, + changeSelectedCell, } = props; const { columnType, @@ -157,10 +160,17 @@ const Cell = (props: CellProps) => { const detail = (
{ - cellEditable && !readOnlyFlag && setStatus('edit'); + className={selectedCell === cellKey ? classNames(s.detailCell, s.selected) : s.detailCell} + onClick={() => { + if (selectedCell === cellKey) { + cellEditable && !readOnlyFlag && setStatus('edit'); + } else { + changeSelectedCell && changeSelectedCell(cellKey); + } }} + // onDoubleClick={() => { + // cellEditable && !readOnlyFlag && setStatus('edit'); + // }} style={style} > {rowSelection && columnIndex === 0 &&
{getCheckbox()}
} diff --git a/components/apolloTable/component/Column.less b/components/apolloTable/component/Column.less index c8167c681c845c510b767e2408fde2d2b016af0e..7c26642003f1c7b901256bd043c1a4da86e3d64b 100644 --- a/components/apolloTable/component/Column.less +++ b/components/apolloTable/component/Column.less @@ -29,6 +29,18 @@ color: @textPrimaryColor; font-weight: @weightSemiblod; display: flex; + &.required:before { + display: inline-block; + margin-right: 4px; + color: #f5222d; + font-size: 14px; + font-family: SimSun, sans-serif; + line-height: 1; + content: '*'; + vertical-align: top; + position: relative; + top: 5px; + } .tipContainer{ margin-left: @marginSmX; cursor: pointer; diff --git a/components/apolloTable/component/Column.tsx b/components/apolloTable/component/Column.tsx index 6d188329122b4de8f4e2e2d4e4f0ba0ab0646794..62c296cb6c79803742e6b4be4d53df5f0cdcc498 100644 --- a/components/apolloTable/component/Column.tsx +++ b/components/apolloTable/component/Column.tsx @@ -75,6 +75,7 @@ export default class TableColumn extends PureComponent { questionText, rowSelection, icon, + required, } = this.props; const { value = [] } = sortConfig || {}; const sort = value.find((item: any) => { @@ -86,7 +87,7 @@ export default class TableColumn extends PureComponent { {rowSelection && columnIndex === 0 &&
{this.getCheckbox()}
}
{icon &&
{icon()}
} - + {columnChsName} {questionText && ( diff --git a/components/apolloTable/component/Table.less b/components/apolloTable/component/Table.less index 34e3555e559fcc09ee53bdf7e3343a850b55e86d..7014c76efd80751ad9a516c14ee04fd3c0af4182 100644 --- a/components/apolloTable/component/Table.less +++ b/components/apolloTable/component/Table.less @@ -32,6 +32,9 @@ right: 0; z-index: 1; } + :global(.ReactVirtualized__Grid__innerScrollContainer){ + overflow: unset !important; + } } .leftSideHeaderContainer, diff --git a/components/apolloTable/component/Table.tsx b/components/apolloTable/component/Table.tsx index fe8138570fb3b1cea2a18efd4942b4a3973b4686..7489cd4e9291af1de94b3c2c7f4c8620458e1812 100644 --- a/components/apolloTable/component/Table.tsx +++ b/components/apolloTable/component/Table.tsx @@ -48,9 +48,11 @@ 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; } @@ -63,6 +65,7 @@ export default class AirTable extends Component { dataSource, tableWidth: width, tableHeight: height, + selectedCell: null, }; this.config = { overscanColumnCount: 5, @@ -206,6 +209,12 @@ export default class AirTable extends Component { } }; + changeSelectedCell=(key)=>{ + this.setState({ + selectedCell:key + }) + } + // 渲染表头 renderHeaderCell = ( { showColumns, position }: { showColumns: ColumnProps[]; position?: string }, @@ -221,6 +230,7 @@ export default class AirTable extends Component { sortFlag, questionText, icon, + requiredFlag, } = showColumns[columnIndex]; return (
@@ -237,6 +247,7 @@ export default class AirTable extends Component { rowSelection={position === 'right' ? false : rowSelection} dataSource={dataSource} icon={icon} + required={requiredFlag} />
); @@ -303,7 +314,7 @@ export default class AirTable extends Component { { showColumns, showData, position }: { showColumns: ColumnProps[]; showData: RowProps; position?: string }, { columnIndex, key, rowIndex, cellClassName, cellStyle }: any, ) => { - const { columns, dataSource } = this.state; + const { columns, dataSource, selectedCell } = this.state; const { emitChangeCell, paginationConfig, @@ -339,6 +350,9 @@ export default class AirTable extends Component { cellEditable={cellEditable} rowSelection={position === 'right' ? false : rowSelection} contentMenu={contentMenu} + selectedCell={selectedCell} + changeSelectedCell={this.changeSelectedCell} + cellKey={key} /> ); }; diff --git a/components/apolloTable/component/base/edit/link/index.tsx b/components/apolloTable/component/base/edit/link/index.tsx index f176b3f0ac84de0933befd6efacb102b5fd715b4..c0287e05a6bcfad57956fbb19b7f2eb3507feeef 100644 --- a/components/apolloTable/component/base/edit/link/index.tsx +++ b/components/apolloTable/component/base/edit/link/index.tsx @@ -2,6 +2,9 @@ import React from 'react'; import { Input } from 'antd'; import styles from './styles.less'; import { ApolloLinkProps } from '../editInterface'; +import addIcon from '../../../../assets/addIcon.png'; +import delIcon from '../../../../assets/delIcon.png'; +import { Consumer } from '../../../context'; export const ApolloLink = (props: ApolloLinkProps) => { const { onChange, value } = props; @@ -33,32 +36,42 @@ export const ApolloLink = (props: ApolloLinkProps) => { }; return ( -
- {value - && value.map((link, i) => { - return ( -
-
- text: - -
-
- url: - -
- Del -
-
+ + {({ locale }) => { + return ( +
+ {value && + value.map((link, i) => { + return ( +
+
+ {locale.linkText} + +
+
+ {locale.linkUrl} + +
+ +
+
+
+ ); + })} +
+
- ); - })} -
- Add -
-
+
+ ); + }} + ); }; diff --git a/components/apolloTable/component/base/edit/link/styles.less b/components/apolloTable/component/base/edit/link/styles.less index 7e5933c8ab77b40515c3b2c5cb62684e54cfdb14..0db3ba323322063ce8655b1311c94c65e8976b8f 100644 --- a/components/apolloTable/component/base/edit/link/styles.less +++ b/components/apolloTable/component/base/edit/link/styles.less @@ -7,6 +7,8 @@ background: white; padding: @paddingSmX; border: 1px solid @primaryColor; + min-height: 100%; + user-select: none; .content { border-bottom: 1px solid @borderColor; .row { @@ -14,8 +16,10 @@ align-items: center; padding: @paddingSmX 0; .label { - width: 60px; + width: 40px; font-size: @textFontSm; + text-align: right; + padding-right: @paddingSm; } .input { flex: 1; @@ -24,15 +28,18 @@ width: 20px; text-align: center; cursor: pointer; - .del { - font-size: @textFontSm; + .delIcon { + width: 14px; } } } } .btn { + width: 20px; + padding: @paddingSmX; + display: inline-block; .icon{ - font-size: @textFontSm; + width: 12px; cursor: pointer; } } diff --git a/components/apolloTable/component/base/edit/search/index.less b/components/apolloTable/component/base/edit/search/index.less index 90ffaaf2e9ca9c09fcb63116fdc6d04367558125..d223212c1debdd1ddf6bb873b4c8e052f8051a4f 100644 --- a/components/apolloTable/component/base/edit/search/index.less +++ b/components/apolloTable/component/base/edit/search/index.less @@ -1,12 +1,18 @@ .search { width: 100%; height: 100%; - border-radius: 0; :global(.ant-select-selector) { height: 100% !important; align-items: center; } - :global(.ant-select-selection-search-input){ + :global(.ant-select-selection) { + width: 100%; + min-height: 100%; + border-radius: 0; + display: flex; + align-items: center; + } + :global(.ant-select-selection-search-input) { height: 100% !important; } } diff --git a/components/apolloTable/component/base/edit/select/styles.less b/components/apolloTable/component/base/edit/select/styles.less index bc9cc8efe57c93546a31ab428e434035f75931fb..b9ebf507cc193d9c355e092ed97ae59130744345 100644 --- a/components/apolloTable/component/base/edit/select/styles.less +++ b/components/apolloTable/component/base/edit/select/styles.less @@ -1,9 +1,15 @@ .select { width: 100%; height: 100%; - border-radius: 0; :global(.ant-select-selector) { height: 100% !important; align-items: center; } + :global(.ant-select-selection) { + width: 100%; + min-height: 100%; + border-radius: 0; + display: flex; + align-items: center; + } } diff --git a/components/apolloTable/component/base/edit/upload/index.less b/components/apolloTable/component/base/edit/upload/index.less index 81a9607f11845b7b60480d0df18469ca6aa41050..02ad80df79f8c252ceb0cb8be97ca868ef48153f 100644 --- a/components/apolloTable/component/base/edit/upload/index.less +++ b/components/apolloTable/component/base/edit/upload/index.less @@ -8,6 +8,9 @@ .add { cursor: pointer; font-size: @textFontGen; + .addIcon{ + width: 12px; + } } .picContainer { margin-left: @marginSmX; diff --git a/components/apolloTable/component/base/edit/upload/index.tsx b/components/apolloTable/component/base/edit/upload/index.tsx index 45619570efb22c96951eb4713eeee706200a8685..77b1aa0fe4013271fb7c8320e4bce88abae93a39 100644 --- a/components/apolloTable/component/base/edit/upload/index.tsx +++ b/components/apolloTable/component/base/edit/upload/index.tsx @@ -4,8 +4,9 @@ import { ApolloUploadProps } from '../editInterface'; import { antiAssign } from '../../../../utils/utils'; import s from './index.less'; import Upload from '../../extra/upload'; +import addIcon from '../../../../assets/addIcon.png'; -export const ApolloUpload = (props:ApolloUploadProps) => { +export const ApolloUpload = (props: ApolloUploadProps) => { const { isMultiple, onEmitChange } = props; const selfProps = antiAssign(props, ['onChange', 'value']); if (isMultiple) { @@ -56,10 +57,10 @@ export const ApolloUpload = (props:ApolloUploadProps) => { return (
- Add +
- {value - && value.map((item, i) => { + {value && + value.map((item, i) => { return (
diff --git a/components/apolloTable/component/base/extra/associationSearch/index.less b/components/apolloTable/component/base/extra/associationSearch/index.less index d2ca2556588b3884a655314523a645cd4d1d4652..bcd42e0974bb8543472e29d56230ca811b2f0f75 100644 --- a/components/apolloTable/component/base/extra/associationSearch/index.less +++ b/components/apolloTable/component/base/extra/associationSearch/index.less @@ -1,4 +1,7 @@ -.suffixIcon { - width: 12px; - height: 12px; +.searchContainer { + width: 100%; + height: 100%; + :global(.ant-select-selection){ + min-height: 100%; + } } diff --git a/components/apolloTable/component/base/extra/associationSearch/index.tsx b/components/apolloTable/component/base/extra/associationSearch/index.tsx index 4b9323bdc5a6f83dedf5238ce0e0ac2a637eb213..4b3216f81900514a353fcd52813f647242b7e294 100644 --- a/components/apolloTable/component/base/extra/associationSearch/index.tsx +++ b/components/apolloTable/component/base/extra/associationSearch/index.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { Spin, Select } from 'antd'; import lodash from 'lodash'; +import s from './index.less'; interface Props { initDataType?: undefined | 'onfocus'; // 初始化请求方式 @@ -224,29 +225,26 @@ class AssociationSearch extends React.Component { const { data, fetching, value } = this.state; const { selfCom, autoFocus, onChange, ...rest } = this.props; return ( -
- - {selfCom || null} -
+ ); } } diff --git a/components/apolloTable/component/base/extra/upload/index.less b/components/apolloTable/component/base/extra/upload/index.less index e5ccc0529b8738a929d1ebccceebd563d94439d9..99aa20630d723e6af50e9762603a21ddc9107d75 100644 --- a/components/apolloTable/component/base/extra/upload/index.less +++ b/components/apolloTable/component/base/extra/upload/index.less @@ -1,4 +1,8 @@ .container { .upload { } + .addIcon { + cursor: pointer; + width: 12px; + } } diff --git a/components/apolloTable/component/base/extra/upload/index.tsx b/components/apolloTable/component/base/extra/upload/index.tsx index b8957e842b261873bd2800b0676e241b7ec3caf0..31b9fde8f40800985c6f52b67eae77825b3709ec 100644 --- a/components/apolloTable/component/base/extra/upload/index.tsx +++ b/components/apolloTable/component/base/extra/upload/index.tsx @@ -5,6 +5,7 @@ import s from './index.less'; import { antiAssign, getRandom } from '../../../../utils/utils'; import { checkoutFileType } from './utils'; import Preview from './preview'; +import addIcon from '../../../../assets/addIcon.png'; message.config({ maxCount: 1, @@ -143,7 +144,7 @@ const UploadCom = (props) => { showDownloadIcon: true, }} > - Add +
diff --git a/components/apolloTable/component/filter/index.tsx b/components/apolloTable/component/filter/index.tsx index 815b90a9e7770cd09c3c922a2bb6e7d98d10315c..d45a4bda8fdab5524e5ae16af1a99765fd762744 100644 --- a/components/apolloTable/component/filter/index.tsx +++ b/components/apolloTable/component/filter/index.tsx @@ -161,19 +161,19 @@ export default class Filter extends Component { }; // 保存筛选匹配值 - saveFilterList = () => { + saveFilterList = (locale) => { const { filterConfig } = this.state; for (let i = 0; i < filterConfig.length; i++) { // 筛选条件值为undefined或[]或[{text:'',value:''}]都算空,不能提交 if ( - !filterConfig[i].colName || - !filterConfig[i].operationCode || - !filterConfig[i].colValues || - filterConfig[i].colValues.length === 0 || - (!filterConfig[i].colValues && filterConfig[i].colValues !== 0) || - (!filterConfig[i].colValues[0].text && filterConfig[i].colValues[0].text !== 0) + !filterConfig[i].colName + || !filterConfig[i].operationCode + || !filterConfig[i].colValues + || filterConfig[i].colValues.length === 0 + || (!filterConfig[i].colValues && filterConfig[i].colValues !== 0) + || (!filterConfig[i].colValues[0].text && filterConfig[i].colValues[0].text !== 0) ) { - message.error('Filter conditions cannot be empty.'); + message.error(locale.filterEmpty); return; } } @@ -287,7 +287,7 @@ export default class Filter extends Component {
{locale.filterSearch}
diff --git a/components/apolloTable/component/interface.tsx b/components/apolloTable/component/interface.tsx index a4e8373b76fa46987488f9df862fa8fb465e2a59..0ce4fa2ae6cd7d9a577942152abcad08d6e533de 100644 --- a/components/apolloTable/component/interface.tsx +++ b/components/apolloTable/component/interface.tsx @@ -78,6 +78,7 @@ export interface TableState { dataSource: RowProps[]; tableHeight?: number; tableWidth?: number; + selectedCell?:any; } export interface CommonProps extends TableProps { operateConfig?: OperateConfigProps; @@ -99,6 +100,7 @@ export interface BaseComponentState { columnConfig: ColumnProps; } export interface CellProps { + cellKey:string; rowIndex: number; columnIndex: number; columnConfig: ColumnProps; @@ -115,6 +117,8 @@ export interface CellProps { cellEditable?: boolean; rowSelection?: any; contentMenu?: any; + selectedCell?:any; + changeSelectedCell?:Function; } export interface EditCellProps { diff --git a/components/apolloTable/locale.ts b/components/apolloTable/locale.ts index a71378ecc0340844ee81b73124a1a0540626c26f..2d631f82f4dc16f0b846fe914a37017ba37a8c33 100644 --- a/components/apolloTable/locale.ts +++ b/components/apolloTable/locale.ts @@ -5,6 +5,7 @@ export const defaultLocale: any = { filterAdd: '添加', filterSearch: '查询', filterReset: '重置', + filterEmpty: '筛选条件不能为空', selectedConditions: '已选条件:', saveShortcut: '新建快捷筛选', clearFilter: '重置', @@ -19,6 +20,8 @@ export const defaultLocale: any = { select: '请选择', text: '请输入', alreadyInput: '已输入', + linkText: '文本:', + linkUrl: 'url:', }, en: { empty: 'It’s empty here.', @@ -26,6 +29,7 @@ export const defaultLocale: any = { filterAdd: 'Add', filterSearch: 'Search', filterReset: 'Reset', + filterEmpty: 'Filter conditions cannot be empty.', selectedConditions: 'Selected conditions:', saveShortcut: 'Save as a shortcut', clearFilter: 'Clear filters', @@ -40,5 +44,7 @@ export const defaultLocale: any = { select: 'please select', text: 'please input', alreadyInput: 'Entered', + linkText: 'text:', + linkUrl: 'url:', }, };