bug修改

baseComponents/FieldList/index.js

@@ -14,7 +14,7 @@ const FieldList = (props) => {
       {
         config.map((x) =>{
           return (
-            <p className={styles.detailInfo}>
+            <p className={styles.detailInfo} key={x.key}>
               <span>{x.name}</span>
               <span>{data[x.key] || ''}</span>
             </p>

baseComponents/FormArray/index.js

-import React, {Fragment, Component} from 'react';
-import {DatePicker, Picker, TextareaItem, InputItem, List} from 'antd-mobile';
+import React, { Fragment, Component } from 'react';
+import { DatePicker, Picker, TextareaItem, InputItem, List } from 'antd-mobile';
 import moment from 'moment';
 import PropTypes from 'prop-types';
 import FieldList from '@/H5Public/baseComponents/FieldList';
 
 
 const DiyInput = (props) => {
-    let {config, formValue, changeValue, otherProps} = props;
-    return (
-        <InputItem
-            key={config.key}
-            type={config.dataType}
-            editable={!config.readOnly}
-            value={formValue[config.key]}
-            placeholder={config.placeholder || '点击输入'}
-            onChange={(e) => {
-                changeValue(e, config.key)
-            }}
-            {...config.otherProps}
-        >
-            {giveRequiredName(config)}
-        </InputItem>
-    )
+  let { config, formValue, changeValue, otherProps } = props;
+  if (config.readOnly) {
+    config.placeholder = '';
+  } else {
+    config.placeholder = config.placeholder || '点击输入';
+  }
+  return (
+    <InputItem
+      key={config.key}
+      type={config.dataType}
+      editable={!config.readOnly}
+      value={formValue[config.key]}
+      placeholder={config.placeholder}
+      onChange={(e) => {
+        changeValue(e, config.key);
+      }}
+      {...config.otherProps}
+    >
+      {giveRequiredName(config)}
+    </InputItem>
+  );
 };
 
 const DiyTextarea = (props) => {
-    let {config, formValue, changeValue} = props;
-    return (
-        <TextareaItem
-            key={config.key}
-            title={giveRequiredName(config)}
-            maxLength={200}
-            autoHeight={true}
-            placeholder={config.placeholder || '点击输入'}
-            editable={!config.readOnly}
-            value={formValue[config.key]}
-            onChange={(e) => {
-                changeValue(e, config.key)
-            }}
-            {...config.otherProps}
-
-        >
-        </TextareaItem>
-    )
+  let { config, formValue, changeValue } = props;
+  if (config.readOnly) {
+    config.placeholder = '';
+  } else {
+    config.placeholder = config.placeholder || '点击输入';
+  }
+  return (
+    <TextareaItem
+      key={config.key}
+      title={giveRequiredName(config)}
+      maxLength={200}
+      autoHeight={true}
+      placeholder={config.placeholder}
+      editable={!config.readOnly}
+      value={formValue[config.key]}
+      onChange={(e) => {
+        changeValue(e, config.key);
+      }}
+      {...config.otherProps}
+
+    >
+    </TextareaItem>
+  );
 };
 
 const DiyPicker = (props) => {
-    let {config, formValue, changeValue} = props;
-    let opt = config.options.map((x) => {
-        return {
-            label: x.name,
-            value: x.key,
-        }
-    });
-    return (
-        <Picker
-            data={opt}
-            cols={1}
-            extra={config.placeholder || '请选择'}
-            key={config.key}
-            value={[formValue[config.key]]}
-            disabled={config.readOnly}
-            onChange={(val) => {
-                changeValue(val[0], config.key);
-            }}
-            {...config.otherProps}
-
-        >
-            <List.Item arrow="horizontal">
-              {giveRequiredName(config)}
-            </List.Item>
-        </Picker>
-    );
+  let { config, formValue, changeValue } = props;
+  if (config.readOnly) {
+    config.placeholder = ' ';
+  } else {
+    config.placeholder = config.placeholder || '点击输入';
+  }
+  let opt = config.options.map((x) => {
+    return {
+      label: x.name,
+      value: x.key,
+    };
+  });
+  return (
+    <Picker
+      data={opt}
+      cols={1}
+      extra={' '}
+      key={config.key}
+      value={[formValue[config.key]]}
+      disabled={config.readOnly}
+      onChange={(val) => {
+        changeValue(val[0], config.key);
+      }}
+      {...config.otherProps}
+    >
+      <List.Item arrow={config.readOnly ? '' : 'horizontal' }>
+        {giveRequiredName(config)}
+      </List.Item>
+    </Picker>
+  );
 
 };
 
 const DiyDatePicker = (props) => {
-    let {config, formValue, changeValue} = props;
-    let value = formValue[config.key] ? new Date(formValue[config.key].replace(/-/g, '/')) : null;
-    const change = (date) => {
-      let v = moment(date.valueOf()).format('YYYY-MM-DD');
-      changeValue(v,config.key);
-    };
-    return (
-        <DatePicker
-            value={value}
-            extra={config.placeholder || '请选择'}
-            mode={'date'}
-            key={config.key}
-            disabled={config.readOnly}
-            onChange={ (date) => change(date)}
-            {...otherProps}
-
-        >
-            <List.Item
-                arrow="horizontal"
-            >
-                {config.name}
-            </List.Item>
-        </DatePicker>
-    );
+  let { config, formValue, changeValue } = props;
+  let value = formValue[config.key] ? new Date(formValue[config.key].replace(/-/g, '/')) : null;
+  const change = (date) => {
+    let v = moment(date.valueOf()).format('YYYY-MM-DD');
+    changeValue(v, config.key);
+  };
+  if (config.readOnly) {
+    config.placeholder = '';
+  } else {
+    config.placeholder = config.placeholder || '点击输入';
+  }
+  return (
+    <DatePicker
+      value={value}
+      extra={config.placeholder}
+      mode={'date'}
+      key={config.key}
+      disabled={config.readOnly}
+      onChange={(date) => change(date)}
+      {...otherProps}
+
+    >
+      <List.Item
+        arrow="horizontal"
+      >
+        {config.name}
+      </List.Item>
+    </DatePicker>
+  );
 
 };
 
 
 const giveRequiredName = (config) => {
-  if(config.required){
+  if (config.required) {
     return (
-    <Fragment>
-      <i style={{color: 'red'}}>*&nbsp;</i>
-      {config.name}
-    </Fragment>
-    )
-  }else{
+      <Fragment>
+        <i style={{ color: 'red' }}>*&nbsp;</i>
+        {config.name}
+      </Fragment>
+    );
+  } else {
     return (
       <Fragment>
-        <i style={{color: 'red'}}>&nbsp;&nbsp;</i>
+        <i style={{ color: 'red' }}>&nbsp;&nbsp;</i>
         {config.name}
       </Fragment>
-    )
+    );
   }
 };
 
 class FormArray extends Component {
 
-    changeValue = (value, key) => {
-        this.props.changeValue(value, key);
-    };
+  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() {
-        return (
-            <List>
-                {this.detailDom()}
-            </List>
-        )
-    }
+  render() {
+    return (
+      <List>
+        {this.detailDom()}
+      </List>
+    );
+  }
 }
 
 
@@ -199,8 +216,8 @@ FormArray.defaultProps = {
   formValues: {},
   config: [
     {
-      type: 'input'
-    }
+      type: 'input',
+    },
   ],
   changeValue: (value, key) => {
     console.log(value, key);