update apolloTable

components/apolloTable/component/Cell.tsx

@@ -250,7 +250,7 @@ const Cell = (props: CellProps) => {
 
         const EditComp: any = editConfig.cellComp;
         const transferColumn = transferAttr(columnType, {
-            ...(config.componentAttr || {}),
+            ...(editConfig.componentAttr || {}),
             ...(columnConfig.columnAttrObj || {}),
         });
         const newProps = {

components/apolloTable/component/base/_utils/getFormatter.tsx

@@ -47,8 +47,10 @@ export const GetFormatter = {
     },
     MULTIPLE_SELECT: (val) => {
         // 处理成[{}]结构
-        const obj = val[0] || {};
-        return { key: obj.value, label: obj.text };
+        if (!Array.isArray(val) || val.length === 0) return undefined;
+        return val.map((item) => {
+            return { key: item.value, label: item.text };
+        });
     },
     TEXT_SELECT: (val) => {
         return GetFormatter.SELECT(val);

components/apolloTable/component/base/detail/input/index.less

@@ -6,15 +6,16 @@
     width: 100%;
     height: 100%;
     align-items: center;
-    .text {
-        width: 100%;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-    }
     .itemBgTxt {
         position: absolute;
         z-index: -1;
         visibility: hidden;
     }
 }
+.text {
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    word-break: break-all;
+}

components/apolloTable/component/base/detail/input/index.tsx

@@ -5,7 +5,7 @@ import styles from './index.less';
 import { InputProps } from '../detailInterface';
 
 export const ApolloInputDetail = (props: InputProps) => {
-    const { className } = props;
+    const { className, origin } = props;
     const value = props.formatter ? props.formatter(props.value) : props.value;
     if (!value) {
         return null;
@@ -25,6 +25,10 @@ export const ApolloInputDetail = (props: InputProps) => {
         }
     }, [value]);
 
+    if (origin === 'detailForm') {
+        return <div className={classNames(styles.text, className)}>{value}</div>;
+    }
+
     if (typeof value === 'string') {
         return (
             <div className={styles.container} ref={container}>

components/apolloTable/component/base/edit/select/index.tsx

@@ -5,9 +5,9 @@ import { antiAssign } from '../../../../utils/utils';
 import styles from './styles.less';
 
 export const ApolloSelect = (props: ApolloSelectProps) => {
-    const { options = [], onChange, isMultiple, isMobile } = props;
+    const { options = [], onChange, isMultiple } = props;
     const selfProps = antiAssign(props, ['columnConfig', 'onChange', 'isMultiple', 'options']);
-    const changeValue = (value, option) => {
+    const changeValue = (value: any, option: any) => {
         if (typeof onChange === 'function') {
             onChange(value, option);
         }
@@ -16,9 +16,12 @@ export const ApolloSelect = (props: ApolloSelectProps) => {
     if (isMultiple) {
         selfProps.mode = 'multiple';
     }
-
     return (
-        <Select className={styles.select} {...selfProps} onChange={changeValue}>
+        <Select
+            className={styles.select}
+            {...selfProps}
+            onChange={changeValue}
+        >
             {options.map((item) => {
                 return (
                     <Select.Option key={item.id} value={item.id}>

components/apolloTable/editFormV3/index.tsx

@@ -14,9 +14,10 @@ import { Form, Button } from 'antd';
 import styles from './index.less';
 import { config } from '../component/base/config';
 import { transferAttr } from '../component/base/_utils/transferAttr';
-import { getFormat } from '../component/base';
+import { getFormat, setFormat } from '../component/base';
 import { Provider } from '../component/context';
 import { defaultLocale } from '@/submodule/components/apolloTable/locale';
+import _ from 'lodash';
 
 const FormItem = Form.Item;
 
@@ -24,17 +25,36 @@ class FormWrap extends Component {
     handleSubmit = (e) => {
         e.preventDefault();
         e.stopPropagation();
-        const { rowId, form, handleSubmit } = this.props;
+        const { rowId, form, handleSubmit, data, rowData } = this.props;
         form.validateFieldsAndScroll((err, values) => {
             if (!err) {
-                const result = [];
-                Object.keys(values).map((el) => {
-                    result.push({
-                        columnCode: el,
-                        cellValueList: values[el],
+                const newValues: any[] = [];
+                _.keys(values).map((key) => {
+                    const item = data.find((temp: any) => {
+                        return temp.columnName === key;
+                    });
+                    const { columnType, renderEditForm, readOnlyFlag, dynamicCellConfigDTO } = item;
+                    if (readOnlyFlag || (dynamicCellConfigDTO && dynamicCellConfigDTO.readonlyFlag)) {
+                        return;
+                    }
+                    let detailConfig: any;
+                    if (typeof renderEditForm === 'function') {
+                        detailConfig = renderEditForm({ cellData: values[key], rowData, columnConfig: item });
+                    } else {
+                        detailConfig = config[String(columnType)] || config['1'];
+                    }
+                    // if(key==='contactList'){
+                    // debugger
+                    // }
+                    const cellValueList = setFormat(detailConfig, item, values[key]);
+                    newValues.push({
+                        columnCode: key,
+                        cellValueList,
                     });
                 });
-                handleSubmit({ data: { id: rowId, value: result } });
+                if (typeof handleSubmit === 'function') {
+                    handleSubmit({ data: { value: newValues } });
+                }
             }
         });
     };
@@ -98,7 +118,7 @@ class FormWrap extends Component {
                     validateFirst,
                     validateTrigger,
                     rules: [{ required: !!item.requiredFlag }, ...rules],
-                    // initialValue: getFormat(detailConfig, item, value),
+                    initialValue: getFormat(detailConfig, item, value),
                 })(<EditComp {...transferColumn} columnConfig={item} disabled={readOnlyFlag} />)}
             </FormItem>
         );
@@ -135,6 +155,7 @@ class FormWrap extends Component {
                             {data.map((item: any, i: number) => {
                                 return (
                                     <div
+                                        key={i}
                                         className={styles.item}
                                         style={{
                                             width: `${100 / colsNum}%`,
@@ -200,4 +221,4 @@ function onValuesChange(props, changedValues, allValues) {
     }
 }
 
-export default Form.create({ name: 'form_view', mapPropsToFields, onValuesChange })(FormWrap);
+export default Form.create({ name: 'form_view' })(FormWrap);