Skip to content

S
submodule
Commit f54de22e authored by zhangwenshuai's avatar zhangwenshuai
Browse files
Options

修改modal样式

parent 6524e07a
Hide whitespace changes
Inline Side-by-side
Showing with 91 additions and 89 deletions
components/apolloTable/detailForm/index.less
View file @ f54de22e
@import '~@/theme/common'; @import '~@/theme/common';
.wrap { .wrap {
position: relative;
// width: 580px;
width: 100%;
height: 90vh;
background: #fff; background: #fff;
.titleRow { display: flex;
flex-direction: column;
height: 100%;
.topWrap {
display: flex; display: flex;
flex-direction: row; height: 60px;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0 @paddingLg; padding: 0 @paddingLg;
.titleCls { .titleCls {
font-size: 14px; font-size: 14px;
color: #5a6876; color: #5a6876;
line-height: 62px;
z-index: 10;
background: #fff;
} }
.editClick { .editClick {
cursor: pointer; cursor: pointer;
.detailEdit { .detailEdit {
color: @primaryColor; color: @primaryColor;
font-size: 14px; font-size: 14px;
margin-left: 6px;
} }
} }
} }
.formWrap { .formWrap {
position: relative;
flex: 1;
padding: @paddingLg; padding: @paddingLg;
height: calc(100% - 130px);
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
margin-bottom: 68px;
position: relative;
background: rgb(250, 250, 250); background: rgb(250, 250, 250);
.row { .row {
display: flex; display: flex;
background-color: rgba(251, 251, 251, 1); background-color: rgba(251, 251, 251, 1);
border: 1px solid #ececec;
&:first-child {
border-top: none;
}
.listLeft { .listLeft {
width: 150px; width: 150px;
...@@ -59,4 +57,14 @@ ...@@ -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
View file @ f54de22e
import React from 'react'; import React from 'react';
import { Button } from 'antd';
import { config } from '../component/base/config'; import { config } from '../component/base/config';
import { transferAttr } from '../component/base/_utils/transferAttr'; import { transferAttr } from '../component/base/_utils/transferAttr';
import styles from './index.less'; import styles from './index.less';
const DetailForm = (props: any) => { 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 renderDetailForm = (item: any) => {
const { columnType, columnAttrObj, value, renderDetailForm } = item; const { columnType, columnAttrObj, value, renderDetailForm } = item;
let detailConfig; let detailConfig;
...@@ -49,28 +50,27 @@ const DetailForm = (props: any) => { ...@@ -49,28 +50,27 @@ const DetailForm = (props: any) => {
}; };
return ( return (
<div className={styles.wrap}> <div className={styles.wrap}>
<div className={styles.titleRow}> <div className={styles.topWrap}>
<div className={styles.titleCls}>{title}</div> <div className={styles.titleCls}>{name}</div>
{!hideEditBtn && renderBtn()} {!hideEditBtn && renderBtn()}
</div> </div>
<div id="gotop" className={styles.formWrap}> <div id="gotop" className={styles.formWrap}>
{data.map((item: any, index: number) => { {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 ( 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.listLeft}>{`${item.columnChsName}：`}</div>
<div className={styles.listRight}>{renderDetailForm(item)}</div> <div className={styles.listRight}>{renderDetailForm(item)}</div>
</div> </div>
); );
})} })}
</div> </div>
<div className={styles.bottomWrap}>
{isShowDelBtn && (
<Button onClick={handleDelete} type="link" className={styles.delBtnCls}>
{delLabel || '删除'}
</Button>
)}
</div>
</div> </div>
); );
}; };
......
components/apolloTable/editFormV3/index.less
View file @ f54de22e
@import '~@/theme/common'; @import '~@/theme/common';
.wrap { .wrap {
position: relative; background: white;
width: 100%; display: flex;
.titleCls { flex-direction: column;
position: absolute; height: 100%;
left: 26px; .topWrap {
// width: 520px; display: flex;
font-size: 16px; height: 60px;
color: @textPrimaryColor; align-items: center;
line-height: 62px; justify-content: space-between;
z-index: 10; padding: 0 @paddingLg;
background: #fff; .titleCls {
font-size: @textFontGen;
color: #5a6876;
}
} }
.formItemCls { .formItemCls {
padding: 0 45px 0 26px; flex: 1;
height: 75vh; padding: 0 @paddingLg;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
border-bottom: 1px solid #ececec; border-bottom: 1px solid #ececec;
margin: 62px 0 68px;
position: relative; position: relative;
:global(.ant-form-item-control) { :global(.ant-form-item-control) {
...@@ -43,20 +45,16 @@ ...@@ -43,20 +45,16 @@
} }
} }
.itemCls { .bottomWrap {
} display: flex;
height: 68px;
.btnCls { align-items: center;
min-width: 68px; justify-content: space-between;
margin-left: 10px; padding: 0 @paddingLg;
} .btnCls {
min-width: 68px;
.buttonWrap { margin-left: 10px;
position: absolute; }
bottom: 16px;
left: 26px;
right: 45px;
.delBtnCls { .delBtnCls {
color: @errorColor; color: @errorColor;
} }
......
components/apolloTable/editFormV3/index.tsx
View file @ f54de22e
...@@ -32,9 +32,7 @@ class FormWrap extends Component { ...@@ -32,9 +32,7 @@ class FormWrap extends Component {
handleSubmit = (e) => { handleSubmit = (e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
const { const { rowId, form, handleSubmit, data, rowData, detailType } = this.props;
rowId, form, handleSubmit, data, rowData, detailType,
} = this.props;
form.validateFieldsAndScroll((err, values) => { form.validateFieldsAndScroll((err, values) => {
if (!err) { if (!err) {
const newValues: any[] = []; const newValues: any[] = [];
...@@ -95,12 +93,12 @@ class FormWrap extends Component { ...@@ -95,12 +93,12 @@ class FormWrap extends Component {
// 可输可选组件清空时数据格式有问题，单独处理一下 // 可输可选组件清空时数据格式有问题，单独处理一下
if (item.requiredFlag && Number(item.columnType) === 15 && typeof value === 'object') { if (item.requiredFlag && Number(item.columnType) === 15 && typeof value === 'object') {
if ( if (
!value.label !value.label &&
&& value.label !== 0 value.label !== 0 &&
&& !value.text !value.text &&
&& value.text !== 0 value.text !== 0 &&
&& !value.value !value.value &&
&& value.value !== 0 value.value !== 0
) { ) {
return callback('必填项不能为空'); return callback('必填项不能为空');
} }
...@@ -204,14 +202,14 @@ class FormWrap extends Component { ...@@ -204,14 +202,14 @@ class FormWrap extends Component {
}; };
render() { render() {
const { const { loading, isShowDelBtn, data, btnWrapStyle, name, colsNum, delLabel, hideOperateBtn } = this.props;
loading, isShowDelBtn, data, btnWrapStyle, name, colsNum, delLabel, hideOperateBtn,
} = this.props;
return ( return (
<Provider value={{ locale: this.getContext() }}> <Provider value={{ locale: this.getContext() }}>
<div className={styles.wrap}> <div className={styles.wrap}>
<p className={styles.titleCls}>{name}</p> <div className={styles.topWrap}>
<div className={styles.titleCls}>{name}</div>
</div>
<div <div
id="gotop" id="gotop"
className={styles.formItemCls} className={styles.formItemCls}
...@@ -237,30 +235,28 @@ class FormWrap extends Component { ...@@ -237,30 +235,28 @@ class FormWrap extends Component {
})} })}
</Form> </Form>
</div> </div>
<div className={styles.buttonWrap} style={btnWrapStyle}> <div className={styles.bottomWrap}>
<div style={{ display: 'flex', justifyContent: 'space-between' }}> {isShowDelBtn && (
{isShowDelBtn && ( <Button onClick={this.handleDelete} type="link" className={styles.delBtnCls}>
<Button onClick={this.handleDelete} type="link" className={styles.delBtnCls}> {delLabel || '删除'}
{delLabel || '删除'} </Button>
)}
{!hideOperateBtn && (
<div style={{ display: 'flex', justifyContent: 'flex-end', width: '100%' }}>
<Button onClick={this.handleCancel} className={styles.btnCls}>
取消
</Button> </Button>
)} <Button
{!hideOperateBtn && ( onClick={this.handleSubmit}
<div style={{ display: 'flex', justifyContent: 'flex-end', width: '100%' }}> type="primary"
<Button onClick={this.handleCancel} className={styles.btnCls}> className={styles.btnCls}
取消 loading={loading}
</Button> id="submitBtn" // 用于业务监听此dom节点
<Button >
onClick={this.handleSubmit} 确定
type="primary" </Button>
className={styles.btnCls} </div>
loading={loading} )}
id="submitBtn" // 用于业务监听此dom节点
>
确定
</Button>
</div>
)}
</div>
</div> </div>
</div> </div>
</Provider> </Provider>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment