1

baseComponents/FormArray/index.js

-import React, { Fragment, Component, useEffect, } from 'react';
-import { DatePicker, Picker, TextareaItem, InputItem, List, Switch, Modal, Button, Checkbox, } from 'antd-mobile';
+import React, { Fragment, Component, useEffect } from 'react';
+import {
+  DatePicker,
+  Picker,
+  TextareaItem,
+  InputItem,
+  List,
+  Switch,
+  Modal,
+  Button,
+  Checkbox,
+} from 'antd-mobile';
 import moment from 'moment';
 import PropTypes from 'prop-types';
 import FieldList from '@/H5Public/baseComponents/FieldList';
 
-import TextareaItemMultiRows from '../TextareaItemMultiRows'
+import TextareaItemMultiRows from '../TextareaItemMultiRows';
 import { useState } from 'react';
 
-
-const DiyInput = (props) => {
+const DiyInput = props => {
   let { config, formValue, changeValue, otherProps } = props;
   if (config.readOnly) {
     config.placeholder = '';
@@ -22,7 +31,7 @@ const DiyInput = (props) => {
       editable={!config.readOnly}
       value={formValue[config.key]}
       placeholder={config.placeholder}
-      onChange={(e) => {
+      onChange={e => {
         changeValue(e, config.key);
       }}
       {...config.otherProps}
@@ -32,8 +41,8 @@ const DiyInput = (props) => {
   );
 };
 
-const DiyTextarea = (props) => {
-  let { config, formValue, changeValue, noLengthLimit, rows, } = props;
+const DiyTextarea = props => {
+  let { config, formValue, changeValue, noLengthLimit, rows } = props;
   if (config.readOnly) {
     config.placeholder = '';
   } else {
@@ -48,24 +57,22 @@ const DiyTextarea = (props) => {
       placeholder={config.placeholder}
       editable={!config.readOnly}
       value={formValue[config.key]}
-      onChange={(e) => {
+      onChange={e => {
         changeValue(e, config.key);
       }}
       {...config.otherProps}
-
-    >
-    </TextareaItem>
+    ></TextareaItem>
   );
 };
 
-const DiyPicker = (props) => {
+const DiyPicker = props => {
   let { config, formValue, changeValue } = props;
   if (config.readOnly) {
     config.placeholder = ' ';
   } else {
     config.placeholder = config.placeholder || '点击输入';
   }
-  let opt = config.options.map((x) => {
+  let opt = config.options.map(x => {
     return {
       label: x.name,
       value: x.key,
@@ -79,19 +86,17 @@ const DiyPicker = (props) => {
       key={config.key}
       value={[formValue[config.key]]}
       disabled={config.readOnly}
-      onChange={(val) => {
+      onChange={val => {
         changeValue(val[0], config.key);
       }}
       {...config.otherProps}
     >
-      <List.Item arrow={config.readOnly ? '' : 'horizontal'}>
-        {giveRequiredName(config)}
-      </List.Item>
+      <List.Item arrow={config.readOnly ? '' : 'horizontal'}>{giveRequiredName(config)}</List.Item>
     </Picker>
   );
 };
 
-const DiySwitch = (props) => {
+const DiySwitch = props => {
   let { config, formValue, changeValue } = props;
   if (config.readOnly) {
     config.placeholder = ' ';
@@ -105,7 +110,7 @@ const DiySwitch = (props) => {
         <Switch
           checked={formValue[config.key]}
           disabled={config.readOnly}
-          onChange={(val) => {
+          onChange={val => {
             changeValue(val, config.key);
           }}
           {...config.otherProps}
@@ -117,10 +122,10 @@ const DiySwitch = (props) => {
   );
 };
 
-const DiyDatePicker = (props) => {
+const DiyDatePicker = props => {
   let { config, formValue, changeValue } = props;
   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(config.formatter || 'YYYY-MM-DD');
     changeValue(v, config.key);
   };
@@ -136,26 +141,19 @@ const DiyDatePicker = (props) => {
       mode={config.mode || 'date'}
       key={config.key}
       disabled={config.readOnly}
-      onChange={(date) => change(date)}
+      onChange={date => change(date)}
       {...config.otherProps}
-
     >
-      <List.Item
-        arrow="horizontal"
-      >
-        {giveRequiredName(config)}
-      </List.Item>
+      <List.Item arrow="horizontal">{giveRequiredName(config)}</List.Item>
     </DatePicker>
   );
-
 };
 
-
-const DiyCheckBox = ({config, formValue, changeValue}) => {
+const DiyCheckBox = ({ config, formValue, changeValue }) => {
   const [modalVisible, toggleModal] = useState(false);
   const [selectedKeys, setSelectedKeys] = useState([]);
   useEffect(() => {
-    setSelectedKeys(formValue[config.key] || [])
+    setSelectedKeys(formValue[config.key] || []);
   }, [formValue, config.key]);
 
   function onChange(item) {
@@ -174,7 +172,10 @@ const DiyCheckBox = ({config, formValue, changeValue}) => {
       <List.Item
         arrow="horizontal"
         onClick={() => !config.readOnly && toggleModal(true)}
-        extra={config.options.filter(i => formValue[config.key] && formValue[config.key].includes(i.key)).map(i => i.name).join('，')}
+        extra={config.options
+          .filter(i => formValue[config.key] && formValue[config.key].includes(i.key))
+          .map(i => i.name)
+          .join('，')}
       >
         {giveRequiredName(config)}
       </List.Item>
@@ -185,23 +186,29 @@ const DiyCheckBox = ({config, formValue, changeValue}) => {
         animationType="slide-up"
       >
         <List renderHeader={() => <div>{config.name}</div>}>
-          <div style={{maxHeight: '50vh', overflow: 'scroll'}}>
+          <div style={{ maxHeight: '50vh', overflow: 'scroll' }}>
             {config.options.map(i => (
-              <Checkbox.CheckboxItem checked={selectedKeys.includes(i.key)} key={i.key} onChange={() => onChange(i)}>
+              <Checkbox.CheckboxItem
+                checked={selectedKeys.includes(i.key)}
+                key={i.key}
+                onChange={() => onChange(i)}
+              >
                 {i.name}
               </Checkbox.CheckboxItem>
             ))}
           </div>
           <List.Item>
-            <Button type="primary" onClick={submit}>确定</Button>
+            <Button type="primary" onClick={submit}>
+              确定
+            </Button>
           </List.Item>
         </List>
       </Modal>
     </>
-  )
-}
+  );
+};
 
-const giveRequiredName = (config) => {
+const giveRequiredName = config => {
   if (config.required) {
     return (
       <Fragment>
@@ -219,16 +226,14 @@ const giveRequiredName = (config) => {
   }
 };
 
-
 class FormArray extends Component {
-
   changeValue = (value, key) => {
     this.props.changeValue(value, key);
   };
 
   detailDom = () => {
     const { config, formValues, readOnly } = this.props;
-    return config.map((x) => {
+    return config.map(x => {
       x.readOnly = readOnly || x.readOnly;
       switch (x.type) {
         case 'InputItem':
@@ -238,7 +243,6 @@ class FormArray extends Component {
               config={x}
               formValue={formValues}
               changeValue={this.changeValue}
-
             />
           );
         case 'TextareaItem':
@@ -258,7 +262,7 @@ class FormArray extends Component {
               value={formValues[x.key]}
               onChange={val => this.changeValue(val, x.key)}
             />
-          )
+          );
         case 'Picker':
           return (
             <DiyPicker
@@ -297,24 +301,18 @@ class FormArray extends Component {
           );
         default:
           return null;
-
       }
     });
   };
 
   render() {
-    return (
-      <List>
-        {this.detailDom()}
-      </List>
-    );
+    return <List>{this.detailDom()}</List>;
   }
 }
 
-
 FormArray.propTypes = {
   formValues: PropTypes.object.isRequired, //数据
-  config: PropTypes.array.isRequired,  // 配置项
+  config: PropTypes.array.isRequired, // 配置项
   changeValue: PropTypes.func.isRequired, // 改值的方法
   readOnly: PropTypes.bool, // 是否 只读
 };
@@ -332,4 +330,3 @@ FormArray.defaultProps = {
 };
 
 export default FormArray;
-