修改modal样式

components/apolloTable/detailForm/index.less

 @import '~@/theme/common';
 .wrap {
-    position: relative;
-    // width: 580px;
-    width: 100%;
-    height: 90vh;
     background: #fff;
-    .titleRow {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    .topWrap {
         display: flex;
-        flex-direction: row;
+        height: 60px;
         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 {
+        position: relative;
+        flex: 1;
         padding: @paddingLg;
-        height: calc(100% - 130px);
         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);
+            border: 1px solid #ececec;
+            &:first-child {
+                border-top: none;
+            }
 
             .listLeft {
                 width: 150px;
@@ -59,4 +57,14 @@
             }
         }
     }
+    .bottomWrap {
+        display: flex;
+        height: 68px;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 @paddingLg;
+        .delBtnCls {
+            color: @errorColor;
+        }
+    }
 }

components/apolloTable/detailForm/index.tsx

 import React from 'react';
+import { Button } from 'antd';
 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, hideEditBtn } = props;
+    const { data, rowData, name, goEdit, hideEditBtn, isShowDelBtn, handleDelete, delLabel } = props;
     const renderDetailForm = (item: any) => {
         const { columnType, columnAttrObj, value, renderDetailForm } = item;
         let detailConfig;
@@ -49,28 +50,27 @@ const DetailForm = (props: any) => {
     };
     return (
         <div className={styles.wrap}>
-            <div className={styles.titleRow}>
-                <div className={styles.titleCls}>{title}</div>
+            <div className={styles.topWrap}>
+                <div className={styles.titleCls}>{name}</div>
                 {!hideEditBtn && renderBtn()}
             </div>
             <div id="gotop" className={styles.formWrap}>
                 {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 (
-                        <div key={index} className={styles.row} style={border}>
+                        <div key={index} className={styles.row}>
                             <div className={styles.listLeft}>{`${item.columnChsName}：`}</div>
                             <div className={styles.listRight}>{renderDetailForm(item)}</div>
                         </div>
                     );
                 })}
             </div>
+            <div className={styles.bottomWrap}>
+                {isShowDelBtn && (
+                    <Button onClick={handleDelete} type="link" className={styles.delBtnCls}>
+                        {delLabel || '删除'}
+                    </Button>
+                )}
+            </div>
         </div>
     );
 };

components/apolloTable/editFormV3/index.less

 @import '~@/theme/common';
 
 .wrap {
-    position: relative;
-    width: 100%;
-    .titleCls {
-        position: absolute;
-        left: 26px;
-        // width: 520px;
-        font-size: 16px;
-        color: @textPrimaryColor;
-        line-height: 62px;
-        z-index: 10;
-        background: #fff;
+    background: white;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    .topWrap {
+        display: flex;
+        height: 60px;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 @paddingLg;
+        .titleCls {
+            font-size: @textFontGen;
+            color: #5a6876;
+        }
     }
 
     .formItemCls {
-        padding: 0 45px 0 26px;
-        height: 75vh;
+        flex: 1;
+        padding: 0 @paddingLg;
         overflow-x: hidden;
         overflow-y: auto;
         border-bottom: 1px solid #ececec;
-        margin: 62px 0 68px;
         position: relative;
 
         :global(.ant-form-item-control) {
@@ -43,20 +45,16 @@
         }
     }
 
-    .itemCls {
-    }
-
-    .btnCls {
-        min-width: 68px;
-        margin-left: 10px;
-    }
-
-    .buttonWrap {
-        position: absolute;
-        bottom: 16px;
-        left: 26px;
-        right: 45px;
-
+    .bottomWrap {
+        display: flex;
+        height: 68px;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 @paddingLg;
+        .btnCls {
+            min-width: 68px;
+            margin-left: 10px;
+        }
         .delBtnCls {
             color: @errorColor;
         }

components/apolloTable/editFormV3/index.tsx

@@ -32,9 +32,7 @@ class FormWrap extends Component {
     handleSubmit = (e) => {
         e.preventDefault();
         e.stopPropagation();
-        const {
-            rowId, form, handleSubmit, data, rowData, detailType,
-        } = this.props;
+        const { rowId, form, handleSubmit, data, rowData, detailType } = this.props;
         form.validateFieldsAndScroll((err, values) => {
             if (!err) {
                 const newValues: any[] = [];
@@ -95,12 +93,12 @@ class FormWrap extends Component {
         // 可输可选组件清空时数据格式有问题，单独处理一下
         if (item.requiredFlag && Number(item.columnType) === 15 && typeof value === 'object') {
             if (
-                !value.label
-                && value.label !== 0
-                && !value.text
-                && value.text !== 0
-                && !value.value
-                && value.value !== 0
+                !value.label &&
+                value.label !== 0 &&
+                !value.text &&
+                value.text !== 0 &&
+                !value.value &&
+                value.value !== 0
             ) {
                 return callback('必填项不能为空');
             }
@@ -204,14 +202,14 @@ class FormWrap extends Component {
     };
 
     render() {
-        const {
-            loading, isShowDelBtn, data, btnWrapStyle, name, colsNum, delLabel, hideOperateBtn,
-        } = this.props;
+        const { loading, isShowDelBtn, data, btnWrapStyle, name, colsNum, delLabel, hideOperateBtn } = this.props;
 
         return (
             <Provider value={{ locale: this.getContext() }}>
                 <div className={styles.wrap}>
-                    <p className={styles.titleCls}>{name}</p>
+                    <div className={styles.topWrap}>
+                        <div className={styles.titleCls}>{name}</div>
+                    </div>
                     <div
                         id="gotop"
                         className={styles.formItemCls}
@@ -237,30 +235,28 @@ class FormWrap extends Component {
                             })}
                         </Form>
                     </div>
-                    <div className={styles.buttonWrap} style={btnWrapStyle}>
-                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-                            {isShowDelBtn && (
-                                <Button onClick={this.handleDelete} type="link" className={styles.delBtnCls}>
-                                    {delLabel || '删除'}
+                    <div className={styles.bottomWrap}>
+                        {isShowDelBtn && (
+                            <Button onClick={this.handleDelete} type="link" className={styles.delBtnCls}>
+                                {delLabel || '删除'}
+                            </Button>
+                        )}
+                        {!hideOperateBtn && (
+                            <div style={{ display: 'flex', justifyContent: 'flex-end', width: '100%' }}>
+                                <Button onClick={this.handleCancel} className={styles.btnCls}>
+                                    取消
                                 </Button>
-                            )}
-                            {!hideOperateBtn && (
-                                <div style={{ display: 'flex', justifyContent: 'flex-end', width: '100%' }}>
-                                    <Button onClick={this.handleCancel} className={styles.btnCls}>
-                                        取消
-                                    </Button>
-                                    <Button
-                                        onClick={this.handleSubmit}
-                                        type="primary"
-                                        className={styles.btnCls}
-                                        loading={loading}
-                                        id="submitBtn" // 用于业务监听此dom节点
-                                    >
-                                        确定
-                                    </Button>
-                                </div>
-                            )}
-                        </div>
+                                <Button
+                                    onClick={this.handleSubmit}
+                                    type="primary"
+                                    className={styles.btnCls}
+                                    loading={loading}
+                                    id="submitBtn" // 用于业务监听此dom节点
+                                >
+                                    确定
+                                </Button>
+                            </div>
+                        )}
                     </div>
                 </div>
             </Provider>