From 8f76c90a42b635b1d1f92b343cb14f378cde768f Mon Sep 17 00:00:00 2001 From: zhangwenshuai Date: Fri, 5 Jun 2020 14:06:32 +0800 Subject: [PATCH] update apolloTable --- components/apolloTable/assets/delIcon.png | Bin 0 -> 726 bytes components/apolloTable/component/Cell.tsx | 16 ++++- components/apolloTable/component/Column.less | 12 ++++ components/apolloTable/component/Column.tsx | 3 +- components/apolloTable/component/Table.less | 3 + components/apolloTable/component/Table.tsx | 16 ++++- .../component/base/edit/link/index.tsx | 65 +++++++++++------- .../component/base/edit/link/styles.less | 15 ++-- .../component/base/edit/search/index.less | 10 ++- .../component/base/edit/select/styles.less | 8 ++- .../component/base/edit/upload/index.less | 3 + .../component/base/edit/upload/index.tsx | 9 +-- .../base/extra/associationSearch/index.less | 9 ++- .../base/extra/associationSearch/index.tsx | 44 ++++++------ .../component/base/extra/upload/index.less | 4 ++ .../component/base/extra/upload/index.tsx | 3 +- .../apolloTable/component/filter/index.tsx | 18 ++--- .../apolloTable/component/interface.tsx | 4 ++ components/apolloTable/locale.ts | 6 ++ 19 files changed, 170 insertions(+), 78 deletions(-) create mode 100755 components/apolloTable/assets/delIcon.png diff --git a/components/apolloTable/assets/delIcon.png b/components/apolloTable/assets/delIcon.png new file mode 100755 index 0000000000000000000000000000000000000000..bb5671b492eae7c38fec5b80a1d481e3cd305d14 GIT binary patch literal 726 zcmV;{0xA88P)F|7{I^py-oXXQBr7K0y`9xNf7q;Bt_Pt4nldU-Psm{c4z62t0QQzv#k>B>_*A5 zGe(3SymZK-z(ZhmQObfkBy_2jA|tf2w4L|GEC^;g%kJJ{-(`mR{`}^B?|pv|GAvco z8v)=V5tU|89Y+97@w-(!J+u>sVqJ%XX+FvHQ*-5<^O`2FvwtxgTcD~Lmx)9N0NyQM z!_V1)$0p62B*=*XEq1%aVAME)Ks5_GBd8*xJ&5=U5C&~`N>oh*m549|h{Fr%qM&|M zH9bj0W!Z!+S6u{1Vklx%6VgEhN{3efC_u0hkcAn+=Uki%gi;_80EF+1SnI40L^klx z8LFE8k%%@FF~`;`zO$pb06U_$D`rIMEh2tWWNG7E9|hp38ZpiQh}w$slKQ&3x*01x z!HC{&JzM;eRTQANx3_3CInj*_`&wm|Eb zRTg_ZyMKqHU3*i)97Kc>MRxDX6R5u=q8$!o2LiI|X)N}zc+yP%vVg03`BJa<=yX^! z_NPb;Sox~R(#`_#uT-0#hpJWxY2ngjSxf)_OB2)*JqU2p!P%C^3$8IDLN%(V+m_;! zDiD#{Zy04MQ@jJfdx|Wb%B#{45es+rlr){M|2mtn@%a7a*1N}Zd}{XFwOie50}ZDq z5K&|aOuQ$8O^oyH&0go5TpDmF*0oKT=4(Xwpvdmc85(fn5fL0lfUAn%-IfbbjU?I# zpcN4wE3*5DJus%%l1Y7*QhHj0tmm3itGlG_IUZBI(gRzdB@9Ip4Fcgh5Tws4>xD4I z2rf1I-JSDo7afG#4P%x01FOI^*JTCd{0m<}&l_E?ZwuM|0gjo~yF2)+d;kCd07*qo IM6N<$f*Hz8x&QzG literal 0 HcmV?d00001 diff --git a/components/apolloTable/component/Cell.tsx b/components/apolloTable/component/Cell.tsx index 646ea65..7c3e327 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 c8167c6..7c26642 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 6d18832..62c296c 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 34e3555..7014c76 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 fe81385..7489cd4 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 f176b3f..c0287e0 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 7e5933c..0db3ba3 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 90ffaaf..d223212 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 bc9cc8e..b9ebf50 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 81a9607..02ad80d 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 4561957..77b1aa0 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 d2ca255..bcd42e0 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 4b9323b..4b3216f 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 e5ccc05..99aa206 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 b8957e8..31b9fde 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 815b90a..d45a4bd 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 a4e8373..0ce4fa2 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 a71378e..2d631f8 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:', }, }; -- 2.21.0