update apolloTable

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 = (
             <div
-                className={s.detailCell}
-                onDoubleClick={() => {
-                    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 && <div className={s.checkbox}>{getCheckbox()}</div>}

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;

components/apolloTable/component/Column.tsx

@@ -75,6 +75,7 @@ export default class TableColumn extends PureComponent<ColumnProps> {
             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<ColumnProps> {
                 {rowSelection && columnIndex === 0 && <div className={s.checkbox}>{this.getCheckbox()}</div>}
                 <div className={s.colBrief} style={{ marginLeft: showIndex && columnIndex === 0 ? '40px' : 0 }}>
                     {icon && <div className={s.colIcon}>{icon()}</div>}
-                    <span className={s.colTitle}>
+                    <span className={required ? classNames(s.colTitle, s.required) : s.colTitle}>
                         {columnChsName}
                         {questionText && (
                             <Tooltip title={questionText}>

components/apolloTable/component/Table.less

@@ -32,6 +32,9 @@
         right: 0;
         z-index: 1;
     }
+    :global(.ReactVirtualized__Grid__innerScrollContainer){
+        overflow: unset !important;
+    }
 }
 
 .leftSideHeaderContainer,

components/apolloTable/component/Table.tsx

@@ -48,9 +48,11 @@ 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;
     }
@@ -63,6 +65,7 @@ export default class AirTable extends Component<TableProps, TableState> {
             dataSource,
             tableWidth: width,
             tableHeight: height,
+            selectedCell: null,
         };
         this.config = {
             overscanColumnCount: 5,
@@ -206,6 +209,12 @@ export default class AirTable extends Component<TableProps, TableState> {
         }
     };
 
+    changeSelectedCell=(key)=>{
+        this.setState({
+            selectedCell:key
+        })
+    }
+
     // 渲染表头
     renderHeaderCell = (
         { showColumns, position }: { showColumns: ColumnProps[]; position?: string },
@@ -221,6 +230,7 @@ export default class AirTable extends Component<TableProps, TableState> {
             sortFlag,
             questionText,
             icon,
+            requiredFlag,
         } = showColumns[columnIndex];
         return (
             <div className={styles.headerCell} key={key} style={style}>
@@ -237,6 +247,7 @@ export default class AirTable extends Component<TableProps, TableState> {
                     rowSelection={position === 'right' ? false : rowSelection}
                     dataSource={dataSource}
                     icon={icon}
+                    required={requiredFlag}
                 />
             </div>
         );
@@ -303,7 +314,7 @@ export default class AirTable extends Component<TableProps, TableState> {
         { 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<TableProps, TableState> {
                 cellEditable={cellEditable}
                 rowSelection={position === 'right' ? false : rowSelection}
                 contentMenu={contentMenu}
+                selectedCell={selectedCell}
+                changeSelectedCell={this.changeSelectedCell}
+                cellKey={key}
             />
         );
     };

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 (
-        <div className={styles.container}>
-            {value
-                && value.map((link, i) => {
-                    return (
-                        <div key={i} className={styles.content}>
-                            <div className={styles.row}>
-                                <span className={styles.label}>text：</span>
-                                <Input className={styles.input} value={link.text} onChange={changeText.bind(null, i)} />
-                            </div>
-                            <div className={styles.row}>
-                                <span className={styles.label}>url：</span>
-                                <Input
-                                    className={styles.input}
-                                    value={link.value}
-                                    onChange={changeValue.bind(null, i)}
-                                />
-                                <div className={styles.delContainer} onClick={delLink.bind(null, i)}>
-                                    Del
-                                </div>
-                            </div>
+        <Consumer>
+            {({ locale }) => {
+                return (
+                    <div className={styles.container}>
+                        {value &&
+                            value.map((link, i) => {
+                                return (
+                                    <div key={i} className={styles.content}>
+                                        <div className={styles.row}>
+                                            <span className={styles.label}>{locale.linkText}</span>
+                                            <Input
+                                                className={styles.input}
+                                                value={link.text}
+                                                onChange={changeText.bind(null, i)}
+                                            />
+                                        </div>
+                                        <div className={styles.row}>
+                                            <span className={styles.label}>{locale.linkUrl}</span>
+                                            <Input
+                                                className={styles.input}
+                                                value={link.value}
+                                                onChange={changeValue.bind(null, i)}
+                                            />
+                                            <div className={styles.delContainer} onClick={delLink.bind(null, i)}>
+                                                <img alt="" className={styles.delIcon} src={delIcon} />
+                                            </div>
+                                        </div>
+                                    </div>
+                                );
+                            })}
+                        <div className={styles.btn} onClick={addLink}>
+                            <img alt="" className={styles.icon} src={addIcon} />
                         </div>
-                    );
-                })}
-            <div className={styles.btn} onClick={addLink}>
-                Add
-            </div>
-        </div>
+                    </div>
+                );
+            }}
+        </Consumer>
     );
 };

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;
         }
     }

components/apolloTable/component/base/edit/search/index.less

 .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;
     }
 }

components/apolloTable/component/base/edit/select/styles.less

 .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;
+    }
 }

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;

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 (
         <div className={s.container} onClick={onClickContainer}>
             <div className={s.add} onClick={toggleUploadDialog.bind(null, true)}>
-                Add
+                <img alt="" className={s.addIcon} src={addIcon} />
             </div>
-            {value
-                && value.map((item, i) => {
+            {value &&
+                value.map((item, i) => {
                     return (
                         <div key={i} className={s.picContainer}>
                             <Tooltip placement="bottom" title={item.name}>

components/apolloTable/component/base/extra/associationSearch/index.less

-.suffixIcon {
-    width: 12px;
-    height: 12px;
+.searchContainer {
+    width: 100%;
+    height: 100%;
+    :global(.ant-select-selection){
+        min-height: 100%;
+    }
 }

components/apolloTable/component/base/extra/associationSearch/index.tsx

 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<Props, State> {
         const { data, fetching, value } = this.state;
         const { selfCom, autoFocus, onChange, ...rest } = this.props;
         return (
-            <div>
-                <Select
-                    filterOption={false}
-                    {...rest}
-                    value={value}
-                    showSearch={true}
-                    labelInValue={true}
-                    notFoundContent={this.notFoundContent()}
-                    onSearch={this.onSearch}
-                    onChange={this.handleChange}
-                    onFocus={this.onFocus}
-                    onBlur={this.onBlur}
-                >
-                    {data.map((d: any) => {
-                        return (
-                            <Select.Option key={d.value} value={d.value}>
-                                {d.label}
-                            </Select.Option>
-                        );
-                    })}
-                </Select>
-                {selfCom || null}
-            </div>
+            <Select
+                filterOption={false}
+                {...rest}
+                value={value}
+                showSearch={true}
+                labelInValue={true}
+                notFoundContent={this.notFoundContent()}
+                onSearch={this.onSearch}
+                onChange={this.handleChange}
+                onFocus={this.onFocus}
+                onBlur={this.onBlur}
+            >
+                {data.map((d: any) => {
+                    return (
+                        <Select.Option key={d.value} value={d.value}>
+                            {d.label}
+                        </Select.Option>
+                    );
+                })}
+            </Select>
         );
     }
 }

components/apolloTable/component/base/extra/upload/index.less

 .container {
     .upload {
     }
+    .addIcon {
+        cursor: pointer;
+        width: 12px;
+    }
 }

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
+                <img alt="" className={s.addIcon} src={addIcon} />
             </Upload>
             <Preview ref={previewModel} />
         </div>

components/apolloTable/component/filter/index.tsx

@@ -161,19 +161,19 @@ export default class Filter extends Component<Props, State> {
     };
 
     // 保存筛选匹配值
-    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<Props, State> {
                     <div
                         role="presentation"
                         className={classNames(styles.btn, styles.search)}
-                        onClick={this.saveFilterList}
+                        onClick={this.saveFilterList.bind(null, locale)}
                     >
                         {locale.filterSearch}
                     </div>

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 {

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:',
     },
 };