业务开发

baseComponents/BlockTitle/index.js

+/**
+ * 钟是志
+ * 2019年9月4日
+ * 块级Title
+ * */
+import React, {Component, Fragment} from 'react';
+import { WingBlank,WhiteSpace } from 'antd-mobile';
+import styles from './index.less';
+import PropTypes from 'prop-types';
+
+const BlockTitle = (props) => {
+  const { sideColor, title } = props;
+  return (
+    <WingBlank>
+      <div className={styles.title}>
+        <span style={{backgroundColor: sideColor}}>
+          &nbsp;
+        </span>
+        <span className={styles.titleSpan}>{props.title}</span>
+      </div>
+      <WhiteSpace/>
+    </WingBlank>
+
+  );
+};
+
+BlockTitle.propTypes = {
+  title: PropTypes.string.isRequired, //title
+  sideColor: PropTypes.string,
+};
+BlockTitle.defaultProps = {
+  title: '基础信息完善',
+  sideColor: '#0F91FF',
+};
+
+export default BlockTitle;

baseComponents/BlockTitle/index.less

+.title{
+  font-size: 18px;
+  color: #333333;
+  font-weight: bold;
+}
+
+.titleSpan{
+  padding-left: 10px;
+}

baseComponents/FormArray/index.js

+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={'请输入'}
+            onChange={(e) => {
+                changeValue(e, config.key)
+            }}
+            {...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={'请输入'}
+            editable={!config.readOnly}
+            value={formValue[config.key]}
+            onChange={(e) => {
+                changeValue(e, config.key)
+            }}
+            {...otherProps}
+
+        >
+        </TextareaItem>
+    )
+};
+
+const DiyPicker = (props) => {
+    let {config, formValue, changeValue} = props;
+    let opt = config.options.map((x) => {
+        return {
+            label: x,
+            value: x,
+        }
+    });
+    return (
+        <Picker
+            data={opt}
+            cols={1}
+            extra="请选择"
+            key={config.key}
+            value={[formValue[config.key]]}
+            disabled={config.readOnly}
+            onChange={(val) => {
+                changeValue(val[0], config.key);
+            }}
+            {...otherProps}
+
+        >
+            <List.Item arrow="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="请选择"
+            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){
+    return (
+    <Fragment>
+      <i style={{color: 'red'}}>*&nbsp;</i>
+      {config.name}
+    </Fragment>
+    )
+  }else{
+    return config.name;
+  }
+};
+
+class FormArray extends Component {
+
+    changeValue = (value, key) => {
+        this.props.changeValue(value, key);
+    };
+
+    detailDom = () => {
+      const { config, formValues } = this.props;
+      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>
+        )
+    }
+}
+
+
+FormArray.propTypes = {
+  formValues: PropTypes.object.isRequired, //数据
+  config: PropTypes.array.isRequired,  // 配置项
+  changeValue: PropTypes.func.isRequired, // 改值的方法
+};
+FormArray.defaultProps = {
+  formValues: {},
+  config: [
+    {
+      type: 'input'
+    }
+  ],
+  changeValue: (value, key) => {
+    console.log(value, key);
+  }
+};
+
+export default FormArray;
+