Skip to content

H
H5Public
提交 8055ab38 authored 作者: 钟是志's avatar 钟是志
浏览文件
操作

bug修改

上级 c211fd1c
隐藏空白字符变更
内嵌 并排
正在显示 包含 174 行增加 和 157 行删除
baseComponents/FieldList/index.js
浏览文件 @ 8055ab38
...@@ -14,7 +14,7 @@ const FieldList = (props) => { ...@@ -14,7 +14,7 @@ const FieldList = (props) => {
{ {
config.map((x) =>{ config.map((x) =>{
return ( return (
<p className={styles.detailInfo}> <p className={styles.detailInfo} key={x.key}>
<span>{x.name}</span> <span>{x.name}</span>
<span>{data[x.key] || ''}</span> <span>{data[x.key] || ''}</span>
</p> </p>
......
baseComponents/FormArray/index.js
浏览文件 @ 8055ab38
import React, {Fragment, Component} from 'react'; import React, { Fragment, Component } from 'react';
import {DatePicker, Picker, TextareaItem, InputItem, List} from 'antd-mobile'; import { DatePicker, Picker, TextareaItem, InputItem, List } from 'antd-mobile';
import moment from 'moment'; import moment from 'moment';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import FieldList from '@/H5Public/baseComponents/FieldList'; import FieldList from '@/H5Public/baseComponents/FieldList';
const DiyInput = (props) => { const DiyInput = (props) => {
let {config, formValue, changeValue, otherProps} = props; let { config, formValue, changeValue, otherProps } = props;
return ( if (config.readOnly) {
<InputItem config.placeholder = '';
key={config.key} } else {
type={config.dataType} config.placeholder = config.placeholder || '点击输入';
editable={!config.readOnly} }
value={formValue[config.key]} return (
placeholder={config.placeholder || '点击输入'} <InputItem
onChange={(e) => { key={config.key}
changeValue(e, config.key) type={config.dataType}
}} editable={!config.readOnly}
{...config.otherProps} value={formValue[config.key]}
> placeholder={config.placeholder}
{giveRequiredName(config)} onChange={(e) => {
</InputItem> changeValue(e, config.key);
) }}
{...config.otherProps}
>
{giveRequiredName(config)}
</InputItem>
);
}; };
const DiyTextarea = (props) => { const DiyTextarea = (props) => {
let {config, formValue, changeValue} = props; let { config, formValue, changeValue } = props;
return ( if (config.readOnly) {
<TextareaItem config.placeholder = '';
key={config.key} } else {
title={giveRequiredName(config)} config.placeholder = config.placeholder || '点击输入';
maxLength={200} }
autoHeight={true} return (
placeholder={config.placeholder || '点击输入'} <TextareaItem
editable={!config.readOnly} key={config.key}
value={formValue[config.key]} title={giveRequiredName(config)}
onChange={(e) => { maxLength={200}
changeValue(e, config.key) autoHeight={true}
}} placeholder={config.placeholder}
{...config.otherProps} editable={!config.readOnly}
value={formValue[config.key]}
> onChange={(e) => {
</TextareaItem> changeValue(e, config.key);
) }}
{...config.otherProps}
>
</TextareaItem>
);
}; };
const DiyPicker = (props) => { const DiyPicker = (props) => {
let {config, formValue, changeValue} = props; let { config, formValue, changeValue } = props;
let opt = config.options.map((x) => { if (config.readOnly) {
return { config.placeholder = ' ';
label: x.name, } else {
value: x.key, config.placeholder = config.placeholder || '点击输入';
} }
}); let opt = config.options.map((x) => {
return ( return {
<Picker label: x.name,
data={opt} value: x.key,
cols={1} };
extra={config.placeholder || '请选择'} });
key={config.key} return (
value={[formValue[config.key]]} <Picker
disabled={config.readOnly} data={opt}
onChange={(val) => { cols={1}
changeValue(val[0], config.key); extra={' '}
}} key={config.key}
{...config.otherProps} value={[formValue[config.key]]}
disabled={config.readOnly}
> onChange={(val) => {
<List.Item arrow="horizontal"> changeValue(val[0], config.key);
{giveRequiredName(config)} }}
</List.Item> {...config.otherProps}
</Picker> >
); <List.Item arrow={config.readOnly ? '' : 'horizontal' }>
{giveRequiredName(config)}
</List.Item>
</Picker>
);
}; };
const DiyDatePicker = (props) => { const DiyDatePicker = (props) => {
let {config, formValue, changeValue} = props; let { config, formValue, changeValue } = props;
let value = formValue[config.key] ? new Date(formValue[config.key].replace(/-/g, '/')) : null; let value = formValue[config.key] ? new Date(formValue[config.key].replace(/-/g, '/')) : null;
const change = (date) => { const change = (date) => {
let v = moment(date.valueOf()).format('YYYY-MM-DD'); let v = moment(date.valueOf()).format('YYYY-MM-DD');
changeValue(v,config.key); changeValue(v, config.key);
}; };
return ( if (config.readOnly) {
<DatePicker config.placeholder = '';
value={value} } else {
extra={config.placeholder || '请选择'} config.placeholder = config.placeholder || '点击输入';
mode={'date'} }
key={config.key} return (
disabled={config.readOnly} <DatePicker
onChange={ (date) => change(date)} value={value}
{...otherProps} extra={config.placeholder}
mode={'date'}
> key={config.key}
<List.Item disabled={config.readOnly}
arrow="horizontal" onChange={(date) => change(date)}
> {...otherProps}
{config.name}
</List.Item> >
</DatePicker> <List.Item
); arrow="horizontal"
>
{config.name}
</List.Item>
</DatePicker>
);
}; };
const giveRequiredName = (config) => { const giveRequiredName = (config) => {
if(config.required){ if (config.required) {
return ( return (
<Fragment> <Fragment>
<i style={{color: 'red'}}>*&nbsp;</i> <i style={{ color: 'red' }}>*&nbsp;</i>
{config.name} {config.name}
</Fragment> </Fragment>
) );
}else{ } else {
return ( return (
<Fragment> <Fragment>
<i style={{color: 'red'}}>&nbsp;&nbsp;</i> <i style={{ color: 'red' }}>&nbsp;&nbsp;</i>
{config.name} {config.name}
</Fragment> </Fragment>
) );
} }
}; };
class FormArray extends Component { class FormArray extends Component {
changeValue = (value, key) => { changeValue = (value, key) => {
this.props.changeValue(value, key); this.props.changeValue(value, key);
}; };
detailDom = () => {
const { config, formValues, readOnly } = this.props;
return config.map((x) => {
x.readOnly = readOnly || false;
switch (x.type) {
case 'InputItem':
return (
<DiyInput
key={x.key}
config={x}
formValue={formValues}
changeValue={this.changeValue}
/>
);
case 'TextareaItem':
return (
<DiyTextarea
key={x.key}
config={x}
formValue={formValues}
changeValue={this.changeValue}
/>
);
case 'Picker':
return (
<DiyPicker
config={x}
key={x.key}
formValue={formValues}
changeValue={this.changeValue}
/>
);
case 'DatePicker':
return (
<DiyDatePicker
key={x.key}
config={x}
formValue={formValues}
changeValue={this.changeValue}
/>
);
default:
return null;
detailDom = () => {
const { config, formValues, readOnly } = this.props;
if(readOnly){
config.readOnly = true;
} }
return config.map((x) => { });
switch (x.type) { };
case 'InputItem':
return (
<DiyInput
key={x.key}
config={x}
formValue={formValues}
changeValue={this.changeValue}
/>
);
case 'TextareaItem':
return (
<DiyTextarea
key={x.key}
config={x}
formValue={formValues}
changeValue={this.changeValue}
/>
);
case 'Picker':
return (
<DiyPicker
config={x}
key={x.key}
formValue={formValues}
changeValue={this.changeValue}
/>
);
case 'DatePicker':
return (
<DiyDatePicker
key={x.key}
config={x}
formValue={formValues}
changeValue={this.changeValue}
/>
);
default:
return null;
}
});
};
render() { render() {
return ( return (
<List> <List>
{this.detailDom()} {this.detailDom()}
</List> </List>
) );
} }
} }
...@@ -199,8 +216,8 @@ FormArray.defaultProps = { ...@@ -199,8 +216,8 @@ FormArray.defaultProps = {
formValues: {}, formValues: {},
config: [ config: [
{ {
type: 'input' type: 'input',
} },
], ],
changeValue: (value, key) => { changeValue: (value, key) => {
console.log(value, key); console.log(value, key);
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论