fix #6119

src/components/XForm2/Form.jsx

@@ -1,82 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Form, Button, Select } from 'antd';
-import XItem2 from './Item';
-import { isFunction, isEmpty } from './utils';
-
-const formItemLayout = {
-  labelCol: {
-    xs: { span: 24 },
-    sm: { span: 8 },
-  },
-  wrapperCol: {
-    xs: { span: 24 },
-    sm: { span: 16 },
-  },
-};
-
-class Form2 extends React.PureComponent {
-  state = {}
-
-  handleSubmit = e => {
-    e.preventDefault();
-    const { form, onError, onSubmit } = this.props
-
-    form.validateFieldsAndScroll((err, values) => {
-      if (err) {
-        if (isFunction(onError)) {
-          onError(err)
-        } else {
-          window.console.error(err)
-        }
-      } else {
-        if (isFunction(onSubmit)) {
-          onSubmit(values)
-        }
-      }
-    });
-  }
-
-  handleCancel = e => {
-    e.preventDefault();
-
-    if (isFunction(this.props.onCancel)) {
-      this.props.onCancel()
-    }
-  }
-
-  renderDefaultAction = (submitBtn, cancelBtn) => {
-    let FieldSubmit = null
-    let FieldCancel = null
-    if (submitBtn !== false) {
-      FieldSubmit = <Button htmlType="submit" type="primary">提交</Button>
-    }
-    if (cancelBtn !== false) {
-      FieldCancel = <Button htmlType="button" onClick={this.handleCancel} style={{ marginLeft: '48px' }}>取消</Button>
-    }
-
-    return FieldSubmit || FieldCancel ? <XItem2 action render={() => (<>{FieldSubmit}{FieldCancel}</>)} /> : null
-  }
-
-  render () {
-    const {fields, form, children, submitBtn, cancelBtn, ...formProps} = this.props;
-
-    console.log('---------render parent------------')
-
-    return (
-      <Form {...formItemLayout} {...formProps} onSubmit={this.handleSubmit}>
-        {children}
-        {/* {FeildItems} */}
-        {this.renderDefaultAction(submitBtn, cancelBtn)}
-      </Form>
-    );
-  }
-}
-
-Form2.propTypes = {
-  fields: PropTypes.array.isRequired,
-  form: PropTypes.object.isRequired,
-  dataset: PropTypes.object,
-}
-
-export default Form2;

src/components/XForm2/Item.jsx

@@ -1,185 +0,0 @@
-import React from 'react';
-import { Form, Select } from 'antd';
-import PropTypes from 'prop-types'; 
-import { hasOwnProperty, isFunction, isBoolean } from './utils';
-
-const AntFormItem = Form.Item
-
-const tailFormItemLayout = {
-  wrapperCol: {
-    xs: {
-      span: 24,
-      offset: 0,
-    },
-    sm: {
-      span: 16,
-      offset: 8,
-    },
-  },
-};
-
-class Item extends React.PureComponent {
-  state = {
-    allFieldValues: this.getFormValues(),
-  }
-
-  componentDidMount() {
-    if (this.props.formChange) {
-      this.props.formChange((p, c, values) => {
-        this.setState({ allFieldValues: values || this.getFormValues()})
-      })
-    }
-  }
-
-  getFormValues() {
-    if (this.props.form) {
-      return this.props.form.getFieldsValue() || {}
-    }
-
-    return {}
-  }
-
-  getActualValue(fn, defVal) {
-    const val = isFunction(fn) ? fn(this.state.allFieldValues, this.props) : fn
-    return val === undefined ? defVal : val
-  }
-
-  getValueFromEvent = e => {
-    if (hasOwnProperty(e, 'checked')) {
-      return e.checked;
-    } else if (hasOwnProperty(e, 'target')) {
-      return e.target.value;
-    } else {
-      return e;
-    }
-  }
-
-  renderSelectOptions (dict) {
-    return (dict || []).map(x => <Select.Option key={x.value} value={x.value}>{x.label}</Select.Option>)
-  }
-
-  renderField() {
-    const {
-      form,
-      name,
-      node,
-      children,
-      placeholder,
-      render,
-      rules,
-      value,
-      action,
-      props,
-      options,
-    } = this.props || {}
-
-    const config = {
-      rules,
-      initialValue: value,
-      getValueFromEvent: this.getValueFromEvent,
-    }
-
-    const fieldProps = {
-      placeholder: Array.isArray(placeholder) ? placeholder(this.state.allFieldValues, this.props) : placeholder,
-      style: { width: '100%' },
-      ...(props || {})
-    }
-
-    const Childs = Array.isArray(options) ? this.renderSelectOptions(options) : (isFunction(children) ? children() : (children || null));
-    const Field = isFunction(render) ? render(this.props) : React.createElement(node, fieldProps, Childs);
-
-    return action ? Field : form.getFieldDecorator(name, config)(Field)
-  }
-
-  render () {
-    const {
-      form,
-      label,
-      name,
-      node,
-      children,
-      placeholder,
-      render,
-      rules,
-      value,
-      action,
-      props = {},
-      hidden = false,
-      reportChange,
-      listenChange,
-      options,
-      ...restProps
-    } = this.props;
-
-    const initialValue = value === undefined ? {} : { initialValue: value }
-    
-    const config = {
-      rules,
-      getValueFromEvent: this.getValueFromEvent,
-      ...initialValue,
-    }
-    
-    // 以下支持可变内容
-    // 暂时只支持 hidden, disable, label 的可变
-    const hiddenActual = isFunction(hidden) ? hidden(this.state.allFieldValues, this.props) : (
-      isBoolean(hidden) ? hidden : false
-    );
-    const labelActual = isFunction(label) ? label(this.state.allFieldValues, this.props) : label
-    const disabledActual = isFunction(props.disabled) ? props.disabled(this.state.allFieldValues, this.props) : (
-      isBoolean(props.disabled) ? props.disabled : false
-    )
-
-    // 没有类型与组件, 生成隐藏字段
-    if (name && hiddenActual === true) {
-      if (form && form.getFieldDecorator) {
-        form.getFieldDecorator(name, config);
-      }
-      return null;
-    }
-
-    const Field = this.renderField()
-
-    if (!labelActual && !name && !action) return !hiddenActual ? Field : null;
-    
-    const itemProps = action ? { ...restProps, ...tailFormItemLayout, disabled: disabledActual } : { ...restProps, disabled: disabledActual }
-
-    return !hiddenActual ? (
-      <AntFormItem label={labelActual} {...itemProps}>{Field}</AntFormItem>
-    ) : null
-  }
-};
-
-Item.propTypes = {
-  formChange: PropTypes.func,
-  form: PropTypes.object,
-  label: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.func,
-  ]),
-  placeholder: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.func,
-  ]),
-  name: PropTypes.string,
-  node: PropTypes.oneOfType([
-    PropTypes.elementType,
-    PropTypes.func,
-  ]),
-  children: PropTypes.oneOfType([
-    PropTypes.element,
-    PropTypes.func,
-    PropTypes.arrayOf(PropTypes.element),
-  ]),
-  render: PropTypes.func,
-  rules: PropTypes.array,
-  value: PropTypes.any,
-  action: PropTypes.bool,
-  props: PropTypes.object,
-  options: PropTypes.array,
-  hidden: PropTypes.oneOfType([
-    PropTypes.bool,
-    PropTypes.func,
-  ]),
-}
-
-export default Item;

src/components/XForm2/README.md

@@ -1,101 +0,0 @@
-# XForm2
-基于原来的 XForm 思想, 重新封装了一个表单。主要解决以下几个问题
-
-* 支持任意的表单组件， 不再受限
-* 支持组件的动态显示
-
-## 引用
-```jsx
-import createForm from 'path/to/xform2';
-```
-
-## 使用
-### 创建 Form
-
-```jsx
-// https://ant.design/components/form-cn/#Form.create(options)
-const options = {}
-
-// options 也可以不传
-const Form = createForm(options)
-
-// 这样就可以使用 Form 了
-class MyComponent extends React.Component {
-  render() {
-    return (
-      <Form onSubmit={xxx}></Form>
-    );
-  }
-}
-
-```
-
-生成的 Form 有如下 Props 设置
-
-| prop | 说明 | 类型 |
-|---|---|---|
-| onSubmit | 表单提交 | function(allFieldValues) {} |
-| onCancel | 表单取消 | function() {} |
-| submitBtn | 是否显示提交按钮 | 布尔值: 默认 true |
-| cancelBtn | 是否显示取消按钮 | 布尔值: 默认 true |
-| ... | 其他 [Antd Form](https://ant.design/components/form-cn/#Form) 支持的属性 |  |
-
-### 添加表单字段
-
-```jsx
-import React from 'react';
-import { Input, Select } from 'antd';
-
-const fields = [
-        {
-          label: '标题',
-          name: 'title',
-          placeholder: '填写标题',
-          node: Input,
-          value: data.title,
-        },
-        {
-          label: '发布位置',
-          name: 'showPosition',
-          node: Select,
-          options: [
-            { 
-              label: '首页',
-              value: 'index',
-            },
-            {
-              label: '积分商城',
-              value: 'mall',
-            }
-          ],
-          value: data.showPosition,
-          hidden: values => values.title === 'foobar',
-        },
-      ];
-
-
-// some codes
-// <Form onSubmit={xxx} fields={fields}></Form>
-
-```
-
-表单字段是通过 `json` 配置实现的。支持的属性有
-
-| 属性 | 说明 | 类型 |
-|---|---|---|
-| label | 字段文字标题 | string 或者 function(allFieldValues, props), 非必填 |
-| name | 字段 name | string, 非必填 |
-| node | 字段节点, 注意不是 `React.Element`。也就是不能是 `<Input />`, 而是 `Input` | react elementType 或者 可以生成 `React.Element` 的函数, 非必填 |
-| children | 字段如果复杂, 需要子元素。 子元素不能是节点, 必须是 `React.Element` | react element 或者 函数, 非必填 |
-| options | 如果 node 是 `antd.Select`, 这里提供了一个快捷方式自定义 `option` 列表 | array, 元素格式 `{ label: xxx, value: xxx }`, 非必填 |
-| render | 自定义的字段渲染逻辑 | function(props) {}, 非必填 |
-| action | 是否为功能类组件, 比如按钮 | boolean: 默认 false |
-| value | 字段默认值 | any: 非必填 |
-| placeholder | 字段 placeholder | string 或者 function(allFieldValues, props), 非必填 |
-| rules | 字段校验规则, 与 [antd.Form](https://ant.design/components/form-cn/#%E6%A0%A1%E9%AA%8C%E8%A7%84%E5%88%99) 的约定一致 | 类型 array: 非必填 |
-| props | 其余需要传入字段组件的属性或者事件 | object: 非必填 |
-| hidden | 如果有 `name`, 此值又是 `true`. 那么该字段则为隐藏字段放入 form 中。另外, 则为设置组件的显示, 隐藏 | boolean 或者 function(allFieldValues, props) : 非必填, 默认 false |
-
-## 注意事项
-* 字段组件支持自定义封装, 但是封装组件必须满足2个条件。1、值传递通过 `value` 属性, 2、提供 `onChange` 事件
-* 字段组件必须支持 `ref` 传递. 因此函数式组件, 请使用 `React.forwardRef` 包裹起来

src/components/XForm2/index.jsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import { Form } from 'antd';
-import Form2 from './Form';
-import Item from './Item';
-import { isFunction, isEmpty } from './utils';
-
-function withForm(option = {}) {
-
-  const createOption = {
-    ...option,
-    onValuesChange: (...args) => {
-
-      if (isFunction(option.onValuesChange)) {
-        option.onValuesChange(...args)
-      }
-      defaultListener(...args)
-    }
-  }
-
-  let listeners = []
-
-  function defaultListener(...args) {
-    listeners.map(fn => fn(...args))
-  }
-
-  function handleFormChange (fn) {
-    if (isFunction(fn)) {
-      listeners.push(fn)
-    }
-  }
-
-  class WrapperForm extends React.Component {
-    renderChildren() {
-      const { fields, form } = this.props;
-  
-      return (fields || []).filter(x => x).map((props, inx) => {  
-        return (<Item key={inx} {...props} form={form} formChange={handleFormChange} />)
-      })
-    }
-
-    render() {
-      return (
-        <Form2 {...this.props}>
-          {this.renderChildren()}
-        </Form2>
-      )
-    }
-  }
-
-  return Form.create(createOption)(WrapperForm)
-}
-
-export default withForm;

src/components/XForm2/utils.js

@@ -1,30 +0,0 @@
-
-export function hasOwnProperty(o, p) {
-  return Object.prototype.hasOwnProperty.call(o, p);
-}
-
-export function isFunction(fn) {
-  return typeof fn === 'function'
-}
-
-export function isBoolean(b) {
-  return typeof b === 'boolean'
-}
-
-export function isEmpty(t) {
-  if (t === undefined || t === null) {
-    return true
-  }
-
-  if (typeof t === 'object') {
-    return !Object.keys(t).length
-  }
-  
-  if (Array.isArray(t)) {
-    return t.length
-  }
-
-  return false
-}
-
-export function noop() {}

src/pages/system/messageList.jsx

@@ -43,18 +43,21 @@ const header = (props) => {
       dataIndex: 'phone',
       key: 'phone',
       align: 'center',
+      width: 200,
     },
     {
       title: '留言内容',
       dataIndex: 'message',
       key: 'message',
       align: 'center',
+      render: txt => (<p style={{ textAlign: 'left', lineHeight: '1.8em' }}>{txt}</p>)
     },
     {
       title: '创建时间',
       dataIndex: 'createDate',
       key: 'createDate',
       align: 'center',
+      width: 200,
       render: (x, row) => <><span>{moment(row.createDate).format('YYYY-MM-DD')}</span></>
     },
   ];