员工管理和楼盘选择下拉框改造

src/components/SelectButton/BuildSelect.jsx

@@ -23,11 +23,11 @@ const BuildingSelect = props => {
   const [data, setData] = useState([])
   const [value, setValue] = useState([])
   useEffect(() => {
-    getCityList();
+    getBuildList();
   }, [props.value])
 
 
-  const getCityList = e => {
+  const getBuildList = e => {
     request({ ...apis.building.buildingSelect, params: { pageNum: 1, pageSize: 999 } }).then(data => {
         setData(data.records)
         checkValue(data.records)

src/components/XForm2/Form.jsx

@@ -0,0 +1,82 @@
+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

@@ -0,0 +1,185 @@
+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

@@ -0,0 +1,101 @@
+# 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

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,30 @@
+
+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/staff/list/editStaff.jsx

@@ -5,7 +5,7 @@ import { FormattedMessage } from 'umi-plugin-react/locale';
 import BuildSelect from '../../../components/SelectButton/BuildSelect'
 import router from 'umi/router';
 import styles from '../../style/GoodsList.less';
-import XForm, { FieldTypes } from '../../../components/XForm';
+import { FieldTypes, createForm } from '../../../components/XForm';
 import Wangedit from '../../../components/Wangedit/Wangedit'
 import channels from './channelList.less';
 import Tagss from '../components/Tagss.jsx';
@@ -14,7 +14,17 @@ import request from '../../../utils/request'
 
 const { TextArea } = Input;
 const { Option } = Select;
+let consultantChecked = false;
 
+const setExtraData = (data) => {
+  consultantChecked = data.isConsultant
+}
+
+const handleFormValueChange = (props, changedValues, allValues) => {
+    setExtraData(allValues)
+}
+
+const XForm = createForm({ onValuesChange: handleFormValueChange })
 
 /**
  *
@@ -27,6 +37,7 @@ const Edit = (props) => {
   const [userData, setUserData] = useState({})
   const [tagData, setTagData] = useState([])
   const [roleData, setRoleData] = useState([])
+  const [buildData, setBuildData] = useState([])
 
   const getTagList = () => {
     request({ ...apis.staff.taTags, params: { pageNum: 1, pageSize: 999 } }).then((data) => {
@@ -41,10 +52,17 @@ const Edit = (props) => {
     })
   }
 
+  //获取项目列表
+  const getBuildList = e => {
+    request({ ...apis.building.buildingSelect, params: { pageNum: 1, pageSize: 999 } }).then(data => {
+        setBuildData(data.records)
+    })
+  }
+
   // 查询列表
   const getUserData = (userId) => {
     request({ ...apis.staff.getTaUser, urlData: { id: userId } }).then((data) => {
-      console.log(data, "tauser")
+      consultantChecked = data.isConsultant
       setUserData(data)
     })
   }
@@ -52,6 +70,7 @@ const Edit = (props) => {
   useEffect(() => {
     getTagList();
     getRoleList();
+    getBuildList();
     if (userId) {
       getUserData(userId);
     }
@@ -171,37 +190,31 @@ const Edit = (props) => {
       </Select>,
       value: userData.roleIds,
     },
-    // {
-    //   label: '标签',
-    //   name: 'taTags',
-    //   render: <Select
-    //     mode="multiple"
-    //     style={{ width: '100%' }}
-    //     placeholder="请选择标签"
-    //     onChange={tagsChange} >
-    //     {tagData.map(item => (
-    //       <Select.Option key={item.tagId} value={item.tagId}>
-    //         {item.tagName}
-    //       </Select.Option>
-    //     ))}
-    //   </Select>,
-    //   value: userData.taTags,
-    // },
-    // {
-    //   label: '地址',
-    //   name: 'address',
-    //   type: FieldTypes.Text,
-    //   placeholder: '请输入地址',
-    //   value: userData.address,
-    //   rules: [
-    //     { required: true, message: '请输入地址' },
-    //   ]
-    // },
     {
       label: '授权项目',
       name: 'buildingId',
       render: <BuildSelect />,
       value: userData.buildingId,
+      hidden: () => !consultantChecked,
+      rules: [
+        { required: true, message: '请选择授权项目' },
+      ]
+    },
+    {
+      label: '授权项目',
+      name: 'buildingIds',
+      render: <Select
+        mode="multiple"
+        style={{ width: '100%' }}
+        placeholder="请选择授权项目">
+        {buildData.map(item => (
+          <Select.Option key={item.buildingId} value={item.buildingId}>
+            {item.buildingName}
+          </Select.Option>
+        ))}
+      </Select>,
+      value: userData.buildingIds,
+      hidden: () => consultantChecked,
       rules: [
         { required: true, message: '请选择授权项目' },
       ]