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;
+  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 || '点击输入'}
+      placeholder={config.placeholder}
       onChange={(e) => {
-                changeValue(e, config.key)
+        changeValue(e, config.key);
       }}
       {...config.otherProps}
     >
       {giveRequiredName(config)}
     </InputItem>
-    )
+  );
 };
 
 const DiyTextarea = (props) => {
-    let {config, formValue, changeValue} = props;
+  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 || '点击输入'}
+      placeholder={config.placeholder}
       editable={!config.readOnly}
       value={formValue[config.key]}
       onChange={(e) => {
-                changeValue(e, config.key)
+        changeValue(e, config.key);
       }}
       {...config.otherProps}
 
     >
     </TextareaItem>
-    )
+  );
 };
 
 const DiyPicker = (props) => {
-    let {config, formValue, changeValue} = props;
+  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={config.placeholder || '请选择'}
+      extra={' '}
       key={config.key}
       value={[formValue[config.key]]}
       disabled={config.readOnly}
@@ -65,9 +80,8 @@ const DiyPicker = (props) => {
         changeValue(val[0], config.key);
       }}
       {...config.otherProps}
-
     >
-            <List.Item arrow="horizontal">
+      <List.Item arrow={config.readOnly ? '' : 'horizontal' }>
         {giveRequiredName(config)}
       </List.Item>
     </Picker>
@@ -76,20 +90,25 @@ const DiyPicker = (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;
   const change = (date) => {
     let v = moment(date.valueOf()).format('YYYY-MM-DD');
-      changeValue(v,config.key);
+    changeValue(v, config.key);
   };
+  if (config.readOnly) {
+    config.placeholder = '';
+  } else {
+    config.placeholder = config.placeholder || '点击输入';
+  }
   return (
     <DatePicker
       value={value}
-            extra={config.placeholder || '请选择'}
+      extra={config.placeholder}
       mode={'date'}
       key={config.key}
       disabled={config.readOnly}
-            onChange={ (date) => change(date)}
+      onChange={(date) => change(date)}
       {...otherProps}
 
     >
@@ -105,20 +124,20 @@ const DiyDatePicker = (props) => {
 
 
 const giveRequiredName = (config) => {
-  if(config.required){
+  if (config.required) {
     return (
       <Fragment>
-      <i style={{color: 'red'}}>*&nbsp;</i>
+        <i style={{ color: 'red' }}>*&nbsp;</i>
         {config.name}
       </Fragment>
-    )
-  }else{
+    );
+  } else {
     return (
       <Fragment>
-        <i style={{color: 'red'}}>&nbsp;&nbsp;</i>
+        <i style={{ color: 'red' }}>&nbsp;&nbsp;</i>
         {config.name}
       </Fragment>
-    )
+    );
   }
 };
 
@@ -130,10 +149,8 @@ class FormArray extends Component {
 
   detailDom = () => {
     const { config, formValues, readOnly } = this.props;
-      if(readOnly){
-        config.readOnly = true;
-      }
     return config.map((x) => {
+      x.readOnly = readOnly || false;
       switch (x.type) {
         case 'InputItem':
           return (
@@ -184,7 +201,7 @@ class FormArray extends Component {
       <List>
         {this.detailDom()}
       </List>
-        )
+    );
   }
 }
 
@@ -199,8 +216,8 @@ FormArray.defaultProps = {
   formValues: {},
   config: [
     {
-      type: 'input'
-    }
+      type: 'input',
+    },
   ],
   changeValue: (value, key) => {
     console.log(value, key);