Skip to content

W
WebPublic
提交 50c942ef authored 作者: 徐立's avatar 徐立
浏览文件
操作

修复bug

上级 4adc8e52
显示空白字符变更
内嵌 并排
正在显示 包含 152 行增加 和 82 行删除
one_stop_public/libs/ChildForm.jsx
浏览文件 @ 50c942ef
import React from 'react' import React from 'react';
import { Button, Row, Col, message } from 'antd'; import { Button, Row, Col, message } from 'antd';
import ZdyTable from '../Table' import ZdyTable from '../Table';
import UUID from 'react-native-uuid'; import UUID from 'react-native-uuid';
import { Card, WingBlank } from 'antd-mobile'; import { Card, WingBlank } from 'antd-mobile';
export default class ChildForm extends React.Component { export default class ChildForm extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props);
const value = props.value || {}; const value = props.value || {};
this.state = value this.state = value;
} }
triggerChange = (changedValue) => { triggerChange = changedValue => {
// Should provide an event to pass value to Form. // Should provide an event to pass value to Form.
const onChange = this.props.onChange; const onChange = this.props.onChange;
if (onChange) { if (onChange) {
onChange(Object.assign({}, this.state, changedValue)); onChange(Object.assign({}, this.state, changedValue));
} }
} };
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
// Should be a controlled component. // Should be a controlled component.
if ('value' in nextProps) { if ('value' in nextProps) {
const value = nextProps.value; const value = nextProps.value;
this.state = value this.state = value;
} }
} }
componentDidMount = () => { componentDidMount = () => {
if (Object.keys(this.state).length == 0 && this.props.isEdit) { if (Object.keys(this.state).length == 0 && this.props.isEdit) {
if (this.props.num != null && this.props.num > 0) { if (this.props.num != null && this.props.num > 0) {
const objs = this.state const objs = this.state;
if (this.props.min != null && this.props.min > this.props.num) { if (this.props.min != null && this.props.min > this.props.num) {
for (var i = 0; i < this.props.min; i++) { for (var i = 0; i < this.props.min; i++) {
objs["id_" + UUID.v4().replace(/-/g, "2")] = {} objs['id_' + UUID.v4().replace(/-/g, '2')] = {};
} }
} else { } else {
for (var i = 0; i < this.props.num; i++) { for (var i = 0; i < this.props.num; i++) {
objs["id_" + UUID.v4().replace(/-/g, "2")] = {} objs['id_' + UUID.v4().replace(/-/g, '2')] = {};
} }
} }
...@@ -47,114 +44,170 @@ export default class ChildForm extends React.Component { ...@@ -47,114 +44,170 @@ export default class ChildForm extends React.Component {
this.setState({ ...objs }); this.setState({ ...objs });
} }
this.triggerChange({ ...objs }); this.triggerChange({ ...objs });
}
} }
} }
delete = (uuid) => { };
const objs = this.state delete = uuid => {
const { json: { numCode }, form, base52 } = this.props const objs = this.state;
const {
json: { numCode },
form,
base52,
} = this.props;
if (this.props.min != null && Object.keys(objs).length - 1 < this.props.min) { if (this.props.min != null && Object.keys(objs).length - 1 < this.props.min) {
message.error("不能小于最小限制") message.error('不能小于最小限制');
return return;
} }
delete objs[uuid] delete objs[uuid];
if (!('value' in this.props)) { if (!('value' in this.props)) {
this.setState({ ...objs }); this.setState({ ...objs });
} }
this.triggerChange({ ...objs }); this.triggerChange({ ...objs });
if (numCode != null) { if (numCode != null) {
this.props.form.setFieldsValue({ [numCode]: Object.keys(objs).length }) this.props.form.setFieldsValue({ [numCode]: Object.keys(objs).length });
}
} }
};
add = () => { add = () => {
const objs = this.state const objs = this.state;
const { json: { numCode }, form, base52 } = this.props const {
json: { numCode },
form,
base52,
} = this.props;
if (this.props.max != null && Object.keys(objs).length + 1 > this.props.max) { if (this.props.max != null && Object.keys(objs).length + 1 > this.props.max) {
message.error("不能大于最大限制") message.error('不能大于最大限制');
return return;
} }
objs["id_" + UUID.v4().replace(/-/g, "2")] = {} objs['id_' + UUID.v4().replace(/-/g, '2')] = {};
if (!('value' in this.props)) { if (!('value' in this.props)) {
this.setState({ ...objs }); this.setState({ ...objs });
} }
this.triggerChange({ ...objs }); this.triggerChange({ ...objs });
if (numCode != null) { if (numCode != null) {
this.props.form.setFieldsValue({ [numCode]: Object.keys(objs).length }) this.props.form.setFieldsValue({ [numCode]: Object.keys(objs).length });
}
} }
};
render() { render() {
const objs = this.state; const objs = this.state;
const { form, mapData, sqlData, defaultValues, datas, base52, isEdit, addName, deleteName, obj, isMobile, json, modalInit,isPreview } = this.props const {
const span = json.span || 24 form,
const gutter = json.gutter != null ? json.gutter : 0 mapData,
const rights = this.props.rights sqlData,
defaultValues,
datas,
base52,
isEdit,
addName,
deleteName,
obj,
isMobile,
json,
modalInit,
isPreview,
} = this.props;
const span = json.span || 24;
const gutter = json.gutter != null ? json.gutter : 0;
const rights = this.props.rights;
if (datas == null) { if (datas == null) {
return (<div>还没有配置子表单key</div>) return <div>还没有配置子表单key</div>;
} }
if (isMobile) { if (isMobile) {
return ( return (
<WingBlank size="lg"> <WingBlank size="lg">
{Object.keys(objs).length > 1 || rights.includes("add") ? <Card > {Object.keys(objs).length > 1 || rights.includes('add') ? (
<Card>
<Card.Body style={{ minHeight: 10 }}> <Card.Body style={{ minHeight: 10 }}>
{Object.keys(objs).map((r) => { {Object.keys(objs).map(r => {
if (r == "") { if (r == '') {
return "" return '';
} }
return <Row key={r} gutter={gutter} ><Col span={isEdit ? 24 : span} > return (
<ZdyTable key={r} modalInit={modalInit} formCode={this.props.formCode} <Row key={r} gutter={gutter}>
<Col
style={{
zIndex: 55,
}}
span={isEdit ? 24 : span}
>
<ZdyTable
key={r}
modalInit={modalInit}
formCode={this.props.formCode}
formId={this.props.formId} formId={this.props.formId}
isPreview={isPreview} isPreview={isPreview}
formConfig={datas} get='mobile' fatherCode={base52} isEdit={isEdit} index={r} obj={objs[r]} fatherObj={this.props.fatherObj} init={objs} isChild={true} form={form} mapData={mapData} sqlData={sqlData} {...datas} defaultValues={defaultValues} /> formConfig={datas}
get="mobile"
fatherCode={base52}
isEdit={isEdit}
index={r}
obj={objs[r]}
fatherObj={this.props.fatherObj}
init={objs}
isChild={true}
form={form}
mapData={mapData}
sqlData={sqlData}
{...datas}
defaultValues={defaultValues}
/>
</Col>
{rights.includes('delete') && isEdit ? (
<Col style={{ textAlign: 'right' }}>
<Button type="danger" size="small" onClick={this.delete.bind(this, r)}>
{deleteName || '删除'}{' '}
</Button>{' '}
</Col> </Col>
{rights.includes("delete") && isEdit ? <Col style={{ textAlign: "right" }}><Button type='danger' size="small" onClick={this.delete.bind(this, r)}>{deleteName || "删除"} </Button> </Col>: ''} ) : (
''
)}
</Row> </Row>
);
})} })}
{rights.includes("add") ? <Row> {rights.includes('add') ? (
<Col style={{ textAlign: "center" }}><Button type="primary" size="small" style={{ margin: "auto" }} onClick={this.add}>{addName || "新增"}</Button> </Col> <Row>
</Row> : ""} <Col style={{ textAlign: 'center' }}>
<Button
type="primary"
size="small"
style={{ margin: 'auto' }}
onClick={this.add}
>
{addName || '新增'}
</Button>{' '}
</Col>
</Row>
) : (
''
)}
</Card.Body> </Card.Body>
</Card> : ""} </Card>
) : (
''
)}
</WingBlank> </WingBlank>
) );
} }
return ( return (
<div style={{ width: "100%" }}> <div style={{ width: '100%' }}>
<Row gutter={gutter}> <Row gutter={gutter}>
{Object.keys(objs).map(r => {
{Object.keys(objs).map((r) => { if (r == '') {
return '';
if (r == "") {
return ""
} }
return <Col return (
span={span} <Col span={span}>
>
<ZdyTable <ZdyTable
modalInit={modalInit} modalInit={modalInit}
formConfig={datas} formConfig={datas}
...@@ -167,17 +220,21 @@ export default class ChildForm extends React.Component { ...@@ -167,17 +220,21 @@ export default class ChildForm extends React.Component {
formCode={this.props.formCode} formCode={this.props.formCode}
formId={this.props.formId} formId={this.props.formId}
fatherObj={this.props.fatherObj} fatherObj={this.props.fatherObj}
init={objs} isChild={true} init={objs}
isChild={true}
get="web" get="web"
form={form} form={form}
mapData={mapData} mapData={mapData}
sqlData={sqlData} sqlData={sqlData}
{...datas} {...datas}
defaultValues={defaultValues} /> defaultValues={defaultValues}
/>
{rights.includes("delete") && isEdit ? <Button size="small" {rights.includes('delete') && isEdit ? (
<Button
size="small"
style={{ style={{
position: "absolute", position: 'absolute',
left: ' 95%', left: ' 95%',
top: '10px', top: '10px',
transform: 'translateY(-50%)', transform: 'translateY(-50%)',
...@@ -185,19 +242,32 @@ export default class ChildForm extends React.Component { ...@@ -185,19 +242,32 @@ export default class ChildForm extends React.Component {
height: '13px', height: '13px',
width: '13px', width: '13px',
padding: 0, padding: 0,
lineHeight: '10px' lineHeight: '10px',
}} }}
type='danger' type="danger"
onClick={this.delete.bind(this, r)}>{deleteName || "-"} onClick={this.delete.bind(this, r)}
</Button> : ""} >
{deleteName || '-'}
</Button>
) : (
''
)}
</Col> </Col>
);
})} })}
</Row> </Row>
{rights.includes("add") && isEdit ? <Row><Col span={24} style={{ textAlign: "center" }}><Button style={{ margin: "auto" }} type='primary' onClick={this.add} size="small">{addName || "新增"}</Button></Col> </Row> : ""} {rights.includes('add') && isEdit ? (
<Row>
<Col span={24} style={{ textAlign: 'center' }}>
<Button style={{ margin: 'auto' }} type="primary" onClick={this.add} size="small">
{addName || '新增'}
</Button>
</Col>{' '}
</Row>
) : (
''
)}
</div> </div>
); );
} }
} }
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论