增加CheckBox组件

baseComponents/FormArray/index.js

-import React, { Fragment, Component } from 'react';
-import { DatePicker, Picker, TextareaItem, InputItem, List, Switch } 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 { useState } from 'react';
 
 
 const DiyInput = (props) => {
@@ -119,7 +121,7 @@ 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');
+    let v = moment(date.valueOf()).format(config.formatter || 'YYYY-MM-DD');
     changeValue(v, config.key);
   };
   if (config.readOnly) {
@@ -131,7 +133,7 @@ const DiyDatePicker = (props) => {
     <DatePicker
       value={value}
       extra={config.placeholder}
-      mode={'date'}
+      mode={config.mode || 'date'}
       key={config.key}
       disabled={config.readOnly}
       onChange={(date) => change(date)}
@@ -149,6 +151,56 @@ const DiyDatePicker = (props) => {
 };
 
 
+const DiyCheckBox = ({config, formValue, changeValue}) => {
+  const [modalVisible, toggleModal] = useState(false);
+  const [selectedKeys, setSelectedKeys] = useState([]);
+  useEffect(() => {
+    setSelectedKeys(formValue[config.key] || [])
+  }, [formValue, config.key]);
+
+  function onChange(item) {
+    if (selectedKeys.includes(item.key)) {
+      setSelectedKeys(selectedKeys.filter(i => i !== item.key));
+    } else {
+      setSelectedKeys([...selectedKeys, item.key]);
+    }
+  }
+  function submit() {
+    toggleModal(false);
+    changeValue(selectedKeys, config.key);
+  }
+  return (
+    <>
+      <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('，')}
+      >
+        {giveRequiredName(config)}
+      </List.Item>
+      <Modal
+        popup
+        visible={modalVisible}
+        onClose={() => toggleModal(false)}
+        animationType="slide-up"
+      >
+        <List renderHeader={() => <div>{config.name}</div>}>
+          <div style={{maxHeight: '50vh', overflow: 'scroll'}}>
+            {config.options.map(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>
+          </List.Item>
+        </List>
+      </Modal>
+    </>
+  )
+}
+
 const giveRequiredName = (config) => {
   if (config.required) {
     return (
@@ -167,6 +219,7 @@ const giveRequiredName = (config) => {
   }
 };
 
+
 class FormArray extends Component {
 
   changeValue = (value, key) => {
@@ -176,7 +229,7 @@ class FormArray extends Component {
   detailDom = () => {
     const { config, formValues, readOnly } = this.props;
     return config.map((x) => {
-      x.readOnly = readOnly || false;
+      x.readOnly = readOnly || x.readOnly;
       switch (x.type) {
         case 'InputItem':
           return (
@@ -233,6 +286,15 @@ class FormArray extends Component {
               changeValue={this.changeValue}
             />
           );
+        case 'CheckBox':
+          return (
+            <DiyCheckBox
+              key={x.key}
+              config={x}
+              formValue={formValues}
+              changeValue={this.changeValue}
+            />
+          );
         default:
           return null;