feats

src/components/XForm/FileUpload.jsx

@@ -0,0 +1,84 @@
+import React, { useState, useEffect } from 'react'
+import { Upload, Button, Icon } from 'antd';
+import { uploaderProps } from '../../utils/upload';
+
+/**
+ * value 数据的接收格式 [{ url: xxxxx.mp4 }]
+ * size  参数限制可以上传多少个文件
+ * @param { value, size } props
+ */
+function fileUpload(props, ref) {
+
+  const { value } = props
+  // console.log('fileUploadProps： ', props)
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [defaultFileList, setDefaultFileList] = useState([])
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    setDefaultValue()
+  }, [props.value]);
+
+
+  function getFileList() {
+    console.log('fileUpload: ', value)
+    // value 数据的接收格式 [{ url: xxxxx.mp4 }, { url: xxxxx.jpg }]
+    return (value || []).filter(f => f !== undefined).map((img, inx) => ({ uid: inx, url: img, name: img.substring(img.lastIndexOf('/') + 1, img.length), status: 'done' }))
+  }
+
+  function setDefaultValue() {
+    if (!value) {
+      return;
+    }
+
+    setDefaultFileList(getFileList())
+  }
+
+  function onFileChange({ file, fileList }) {
+    console.log(file, fileList)
+    setDefaultFileList(fileList)
+    if (file.status === 'uploading') {
+      return
+    }
+
+    if (file.status === 'done' || file.status === 'removed') {
+
+      // 因为这个控件本身返回的数据格式 [{ ..., response: '服务器返回的数据' }]
+      // 但是 我这里自己用的时候 传入的数据是 [ 'xxxx.mp4', 'xxxx.jpg' ], 然后通过 getFileList() 转换成了 [{ url: 'xxx.mp4' }] 这样的格式
+
+      // 原因是因为 控件返回的数据 和 fileList 展示已经上传的数据 的格式字段不一样
+
+      const resFileList = fileList.filter(f => f.response !== undefined).map(i => i.response)
+      const tempFileList = fileList.filter(f => f.url !== undefined).map(i => i.url)
+      const resultList = tempFileList.concat(resFileList || [])
+      props.onChange(resultList)
+    }
+  }
+
+  return (
+    <>
+      <Upload
+        { ...uploaderProps }
+        {...props}
+        onChange={onFileChange}
+        fileList={defaultFileList}
+      >
+        {
+          props.size ?
+          (props.size > defaultFileList.length
+          && (
+            <Button>
+                <Icon type="upload" /> {props.label}
+              </Button>
+          )) : (
+            <Button>
+              <Icon type="upload" /> {props.label}
+            </Button>
+          )
+        }
+      </Upload>
+    </>
+  )
+}
+
+export default React.forwardRef(fileUpload)

src/components/XForm/ImageListUpload.jsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Upload, Icon, Modal } from 'antd';
+import './style.less';
+import { uploaderProps } from '../../utils/upload';
+
+/**
+ * unlimited  属性表示上传图片无限制
+ * 例子： <ImageListUpload unlimited/>
+ */
+class ImageListUpload extends React.Component {
+  state = {
+    previewVisible: false,
+    previewImage: '',
+    loadding: false,
+  };
+
+  getFileList = () => {
+    return (this.props.value || []).map((img, inx) => ({ uid: inx, url: img, status: 'done' }))
+  }
+
+  handleCancel = () => this.setState({ previewVisible: false });
+
+  handlePreview = async file => {
+    this.setState({
+      previewImage: file.url ,
+      previewVisible: true,
+    });
+  };
+
+  handleChange = (e) => {
+    if (e.file.status === "uploading") {
+      this.setState({ loading: true });
+      return;
+    }
+
+    const fileList = (this.props.value || []).filter(x => x != e.file.url);
+    this.props.onChange(fileList);
+
+    // console.log('删除图片触发了', e.file)
+    // if (e.file.state === 'removed') {
+    //   const fileList = (this.props.value || []).filter(x => x != e.file.url);
+    //   this.props.onChange(fileList);
+    // }
+
+    // if (e.file.status === "done") {
+    //   this.setState({
+    //     loading: false,
+    //   })
+
+    //   if (e.file.response && e.file.response.url) {
+    //     if (typeof this.props.onChange === 'function') {
+    //       const fileList = this.getFileList()
+    //       this.props.onChange([...fileList || [], e.file.response.url]);
+    //     }
+    //   }
+    // }
+  };
+
+  handleUploadSucess = (url) => {
+    this.setState({ loading: false });
+    if (typeof this.props.onChange === 'function') {
+      const fileList = this.props.value || [];
+      this.props.onChange([...fileList, url]);
+    }
+  }
+
+  render() {
+    const { previewVisible, previewImage } = this.state;
+    const fileList = this.getFileList();
+
+    const uploadButton = (
+      <div>
+        <Icon style={{ fontSize: '2em', color: '#aaa' }} type={this.state.loading ? "loading" : "plus"}  />
+      </div>
+    );
+    return (
+      <div className="clearfix">
+        <Upload
+          listType="picture-card"
+          multiple={true}
+          fileList={fileList}
+          onPreview={this.handlePreview}
+          onChange={this.handleChange}
+          { ...uploaderProps }
+          onSuccess={this.handleUploadSucess}
+        >
+          {/* unlimited 表示上传无限制数量 */}
+          {(this.props.unlimited && uploadButton) || ((fileList || images).length >= 8 ? null : uploadButton)}
+        </Upload>
+        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
+          <img alt="example" style={{ width: '100%' }} src={previewImage} />
+        </Modal>
+      </div>
+    );
+  }
+}
+
+export default ImageListUpload;

src/components/XForm/ImageUpload.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Upload, Icon, message } from 'antd';
+import './style.less';
+import { uploaderProps } from '../../utils/upload';
+
+
+
+class ImageUpload extends React.Component {
+  state = {
+    loading: false,
+    imageUrl: undefined,
+  };
+
+  handleChange = info => {
+    if (info.file.status === "uploading") {
+      this.setState({ loading: true });
+      return;
+    }
+    
+    if (info.file.status === 'removed') {
+      this.props.onChange();
+    }
+
+    // if (info.file.status === "done") {
+    //   this.setState({
+    //     loading: false,
+    //   })
+
+    //   if (info.file.response && info.file.response.url) {
+    //     this.setState({
+    //       imageUrl: info.file.response.thumbUrl,
+    //     });
+
+    //     if (typeof this.props.onChange === 'function') {
+    //       this.props.onChange(info.file.response.url);
+    //     }
+    //   }
+    // }
+  };
+
+  handleUploadSucess = (url) => {
+    this.setState({ loading: false });
+    if (typeof this.props.onChange === 'function') {
+      this.props.onChange(url);
+    }
+  }
+
+  render() {
+    const uploadButton = (
+      <div>
+        <Icon style={{ fontSize: '2em', color: '#aaa' }} type={this.state.loading ? "loading" : "plus"} />
+      </div>
+    );
+
+    const value = this.props.value;
+    return (
+      <Upload
+        listType="picture-card"
+        className="avatar-uploader"
+        showUploadList={false}
+        beforeUpload={this.props.beforeUpload}
+        onChange={this.handleChange}
+        {...uploaderProps}
+        disabled={this.props.disabled}
+        onSuccess={this.handleUploadSucess}
+      >
+        {(this.state.imageUrl || value) ? (
+          <img src={this.state.imageUrl || value} alt="avatar" style={{ width: "100%" }} />
+        ) : (
+            uploadButton
+          )}
+      </Upload>
+    );
+  }
+}
+
+export default ImageUpload;

src/components/XForm/README.md

@@ -0,0 +1,31 @@
+# XForm
+Antd Form 扩展
+
+## 使用说明
+
+```jsx
+import XForm, { FieldTypes } from '/path/to/XForm';
+
+const tplJSON = [
+  {},
+  {}
+]
+
+```
+
+通过 `json` 对象来实现自动构造 form 表单
+
+计划支持的属性
+
+[] label      显示的文字
+
+[] name       form name, 用于表单提交
+
+[] type       组件类型, 参见 FieldTypes
+
+[] rules      校验规则
+
+[] element    函数, 用于生成组件. (props) => <></> . 其中 props 包含 ...
+
+[] value      绑定的数据
+

src/components/XForm/WrapperForm.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Form, Button } from 'antd';
+import WrapperItem from './WrapperItem';
+
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 8 },
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 16 },
+  },
+};
+
+class WrapperForm extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {}
+  }
+
+  handleSubmit = e => {
+    e.preventDefault();
+    this.props.form.validateFieldsAndScroll((err, values) => {
+      if (err) {
+        if (typeof this.props.onError === 'function') {
+          typeof this.props.onError(err)
+        } else {
+          window.console.error(err)
+        }
+      } else {
+        if (typeof this.props.onSubmit === 'function') {
+          typeof this.props.onSubmit(values)
+        }
+      }
+    });
+  }
+
+  handleCancel = e => {
+    e.preventDefault();
+
+    if (typeof this.props.onCancel === 'function') {
+      typeof 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 ? <WrapperItem action render={<>{FieldSubmit}{FieldCancel}</>} /> : null
+  }
+
+  render () {
+    const {fields, form, children, submitBtn, cancelBtn, ...formProps} = this.props;
+    console.log('fields:', fields)
+    const FeildItems = (fields || []).filter(x => x).map((props, inx) => (<WrapperItem key={inx} {...props} form={form} />))
+    
+    return (
+      <Form {...formItemLayout} {...formProps} onSubmit={this.handleSubmit}>
+        {FeildItems}
+        {this.renderDefaultAction(submitBtn, cancelBtn)}
+        {children}
+      </Form>
+    );
+  }
+}
+
+WrapperForm.propTypes = {
+  fields: PropTypes.array.isRequired
+}
+
+export default WrapperForm;

src/components/XForm/WrapperItem.jsx

@@ -0,0 +1,151 @@
+import React from 'react';
+import {
+  Form,
+  Input,
+  InputNumber,
+  Checkbox,
+  Radio,
+  DatePicker,
+  TimePicker,
+  Select,
+  Switch,
+} from 'antd';
+import ImageUploader from './ImageUpload';
+
+const {Item} = Form
+const { Option } = Select;
+const { MonthPicker, RangePicker } = DatePicker
+
+const FieldTypes = {
+  Text: 'Text',
+  Password: 'Password',
+  Number: 'Number',
+  Switch: 'Switch',
+  TimePicker: 'TimePicker',
+  DatePicker: 'DatePicker',
+  RangePicker: 'RangePicker',
+  MonthPicker: 'MonthPicker',
+  Select: 'Select',
+  ImageUploader: 'ImageUploader',
+}
+
+const tailFormItemLayout = {
+  wrapperCol: {
+    xs: {
+      span: 24,
+      offset: 0,
+    },
+    sm: {
+      span: 16,
+      offset: 8,
+    },
+  },
+};
+
+const WrapperItem = props => {
+  const {
+    form,
+    label,
+    name,
+    type,
+    placeholder,
+    render,
+    rules,
+    value,
+    dict,
+    action,
+    props: fieldProps,
+    hidden = false,
+    help,
+    ...restProps
+  } = props;
+
+  const { getFieldDecorator } = form || {};
+
+  let config = {
+    rules,
+    initialValue: value,
+  }
+
+  if (type === FieldTypes.Switch) {
+    config = {
+      ...config,
+      valuePropName: 'checked',
+    };
+  }
+
+  if (type === FieldTypes.ImageUploader) {
+    config = {
+      ...config,
+      getValueFromEvent: x => x,
+    };
+  }
+
+  // 没有类型与组件, 生成隐藏字段
+  if (!type && !render) {
+    getFieldDecorator(name, config);
+    return null;
+  }
+
+  const SelectOpts = (dict || []).map((item, index) => (<Option value={item.value}>{item.label}</Option>))
+
+  let Field = <></>;
+  if (render) {
+    Field = typeof render === 'function' ? render(props) : render
+  } else {
+    switch (type) {
+      case FieldTypes.Text:
+        Field = <Input placeholder={placeholder} style={{ width: '100%' }} {...fieldProps}/>;
+        break;
+      case FieldTypes.Password:
+        Field = <Input.Password placeholder={placeholder} style={{ width: '100%' }} {...fieldProps}/>;
+        break;
+      case FieldTypes.Number:
+        Field = <InputNumber placeholder={placeholder} style={{ width: '100%' }} {...fieldProps}/>;
+        break;
+      case FieldTypes.Switch:
+        Field = <Switch {...fieldProps} />;
+        break;
+      case FieldTypes.TimePicker:
+        Field = <TimePicker {...fieldProps} style={{ width: '100%' }}/>;
+        break;
+      case FieldTypes.DatePicker:
+        Field = <DatePicker {...fieldProps} style={{ width: '100%' }}/>;
+        break;
+      case FieldTypes.RangePicker:
+        Field = <RangePicker {...fieldProps} style={{ width: '100%' }}/>;
+        break;
+      case FieldTypes.MonthPicker:
+        Field = <MonthPicker {...fieldProps} style={{ width: '100%' }}/>;
+        break;
+      case FieldTypes.Select:
+        Field = <Select placeholder={placeholder} style={{ width: '100%' }} {...fieldProps}>{SelectOpts}</Select>
+        break;
+      case FieldTypes.ImageUploader:
+        const beforeUpload = { beforeUpload: props.beforeUpload }
+        Field = <ImageUploader {...fieldProps} { ...beforeUpload}/>
+        break;
+      default:
+        throw new Error(`暂时不支持的组件类型: ${type}`)
+    }
+  }
+
+  const visible = typeof hidden === 'function' ? !hidden() : !hidden;
+
+  if (!label && !name && !action && !help) return visible ? Field : null;
+
+  const itemProps = action ? { ...restProps, ...tailFormItemLayout } : restProps
+  const labelNode = typeof label === 'function' ? label() : label;
+  const helpNode = typeof help === 'function' ? help() : help;
+
+  const newItemProps = { ...itemProps, help: helpNode }
+
+  return visible && (
+    <Item label={labelNode} { ...newItemProps }>
+      {action ? Field : getFieldDecorator(name, config)(Field)}
+    </Item>
+  )
+};
+
+export default WrapperItem;
+export { FieldTypes };

src/components/XForm/index.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Form } from 'antd';
+import WrapperForm from './WrapperForm';
+import { FieldTypes } from './WrapperItem';
+
+const createForm = option => Form.create(option)(WrapperForm);
+
+export default Form.create()(WrapperForm);
+export { FieldTypes, createForm };

src/components/XForm/style.css

@@ -0,0 +1,13 @@
+:global .avatar-uploader > .ant-upload {
+  width: 128px;
+  height: 128px;
+}
+/* you can make up upload button and sample style by using stylesheets */
+.ant-upload-select-picture-card i {
+  font-size: 32px;
+  color: #999;
+}
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}

src/components/XForm/style.less

@@ -0,0 +1,20 @@
+:global {
+  .avatar-uploader {
+    & > .ant-upload {
+      width: 128px;
+      height: 128px;
+    }
+  }
+}
+
+
+/* you can make up upload button and sample style by using stylesheets */
+.ant-upload-select-picture-card i {
+  font-size: 32px;
+  color: #999;
+}
+
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}

src/components/XForm/style.wxss

@@ -0,0 +1,13 @@
+:global .avatar-uploader > .ant-upload {
+  width: 128px;
+  height: 128px;
+}
+/* you can make up upload button and sample style by using stylesheets */
+.ant-upload-select-picture-card i {
+  font-size: 32px;
+  color: #999;
+}
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}

src/pages/building/Edit/Basic.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Form, Input } from 'antd'
+import { Form, Input, notification, Select } from 'antd'
+import FileUpload from '@/components/XForm/FileUpload';
 import BuildingType from './components/BuildingTypeSelect'
 import { formItemLayout } from './utils'
 
@@ -9,6 +10,20 @@ const BuildingBasic = (props) => {
   const { form } = props;
   const { getFieldDecorator } = form;
 
+  
+  // 视频文件上传前 回调
+  const fileUploadBeforeUpload = (file, fileList) => {
+    return new Promise((resolve, reject) => {
+      if (file.type === 'video/mp4' || file.type === '.mp4') {
+          // setVideoImage(true)
+          resolve(file)
+      } else {
+        notification.error({ message: '项目视频，仅支持MP4格式' })
+        reject()
+      }
+    })
+  }
+
   return (
     <Form {...formItemLayout}>
       <Item label="项目Id" style={{ display: 'none' }}>
@@ -29,9 +44,53 @@ const BuildingBasic = (props) => {
           rules: [{ required: true, message: '请选择项目类型' }],
         })(<BuildingType />)}
       </Form.Item>
+      <Form.Item label="列表均价" help="项目列表展示价格，示例：约10000元/㎡、约1000万元/套起">
+        {getFieldDecorator('price')(<Input />)}
+      </Form.Item>
+      <Form.Item label="开盘时间" >
+        {getFieldDecorator('openingDate')(<Input placeholder="预计xxxx年xx月开盘" />)}
+      </Form.Item>
+      <Form.Item label="电话" >
+        {getFieldDecorator('tel', {
+          rules: [
+            {
+              pattern: new RegExp('^[0-9]*$'),
+              message: '请输入正确的电话号码',
+            },
+          ],
+        })(<Input placeholder="手机或者座机号码" />)}
+      </Form.Item>
+      <Form.Item label="项目说明" >
+        {getFieldDecorator('dynamic')(<Input placeholder="项目动态等，不超过30个字" maxLength={30}/>)}
+      </Form.Item>
+      <Form.Item label="物业类型" >
+        {getFieldDecorator('propertyType')(<Input />)}
+      </Form.Item>
+      <Form.Item label="销售状态" >
+        {getFieldDecorator('marketStatus', {
+          rules: [{ required: true, message: '请选择销售状态' }],
+        })(
+          <Select placeholder="销售状态" style={{ width: '100%' }}>
+            <Select.Option value="待售">待售</Select.Option>
+            <Select.Option value="在售">在售</Select.Option>
+            <Select.Option value="售罄">售罄</Select.Option>
+            <Select.Option value="在租">在租</Select.Option>
+          </Select>,
+        )}
+      </Form.Item>
+      <Form.Item label="项目标签" >
+        {getFieldDecorator('tag')(
+          <Select mode="tags" placeholder="输入后选中" style={{ width: '100%' }} />
+        )}
+      </Form.Item>
+      <Form.Item label="项目视频" help="视频仅支持mp4格式，建议尺寸：750*600，比例5:4，用于楼盘详情">
+        {getFieldDecorator('videoUrl')(
+          <FileUpload accept=".mp4" beforeUpload={fileUploadBeforeUpload} label="上传视频" size={1} />,
+        )}
+      </Form.Item>
 
     </Form>
   )
 }
 
-export default Form.create()(BuildingBasic)
+export default Form.create({ onValuesChange: console.log })(BuildingBasic)

src/pages/building/Edit/components/BuildingTypeDetail.jsx

@@ -1,19 +1,56 @@
-import React from 'react'
-import { Button, Card, Form, Radio, Input, Select } from 'antd'
+import React, { useState } from 'react'
+import { Button, Drawer, Form, Radio, Input, Select } from 'antd'
 import { formItemLayout } from '../utils'
+import styles from '../style.less'
 
 const Item = Form.Item
 
+const priceUnit = {
+  average: '元/㎡',
+  total: '万元/套',
+  lease: '元/㎡/天',
+}
+
+const noBorderInput = {
+  width: '30px',
+  borderLeft: 0,
+  pointerEvents: 'none',
+  backgroundColor: '#fff',
+}
+
 const BuildingTypeDetail = (props) => {
-  const { buildingType, form } = props
-  const { getFieldDecorator } = form
+  const { title, dataset, form, visible, onClose, onSubmit } = props
+  const { getFieldDecorator, validateFieldsAndScroll } = form
+  const [priceType, setPriceType] = useState()
+
+  const handleSubmit = () => {
+    validateFieldsAndScroll((err, values) => {
+      if (err) {
+        console.error(err);
+        return;
+      };
+
+      const data = {
+        ...values,
+        ...dataset || {},
+      }
+
+      onSubmit(data)
+    })
+  }
 
   return (
-    <Card size="small" title={buildingType?.buildingTypeName} extra={<Button type="link" icon="close" />}>
+    <Drawer
+      width={600}
+      title={title} 
+      visible={visible}
+      onClose={onClose}
+      bodyStyle={{ paddingBottom: 80 }}
+      >
       <Form>
         <Item label="价格类型" {...formItemLayout}>
           {getFieldDecorator('priceType')(
-            <Radio.Group>
+            <Radio.Group onChange={({target}) => setPriceType(target.value)}>
               <Radio value="average">均价</Radio>
               <Radio value="total">总价</Radio>
               <Radio value="lease">租赁价</Radio>
@@ -21,18 +58,22 @@ const BuildingTypeDetail = (props) => {
           )}
         </Item>
         <Item label="价格区间" help='最高价与最低价一致时，只展示一个' {...formItemLayout}>
-          <span>{getFieldDecorator('startPrice')(<Input type="number" placeholder="最低价" style={{width: '120px'}} maxLength="9" />)}</span>
-          <span>-</span>
-          <span>{getFieldDecorator('endPrice')(<Input type="number" placeholder="最高价" style={{width: '120px'}} maxLength="9" />)}</span>
-          {/* <span>{this.props.type.priceType === "average" ? "元/㎡" : this.props.type.priceType === "lease" ? "元/㎡/天" : "万元/套"}</span> */}
+          <Input.Group compact>
+            {getFieldDecorator('startPrice')(<Input placeholder="最低价" style={{width: 'calc(50% - 50px)'}} />)}
+            {<Input style={{...noBorderInput, borderRight: 0}} placeholder="~" disabled />}
+            {getFieldDecorator('endPrice')(
+              <Input placeholder="最高价" style={{width: 'calc(50% - 60px)', borderLeft: 0, borderRight: 0}} />
+              )}
+            {<Input style={{...noBorderInput, width: '80px', textAlign: 'right'}} placeholder={priceUnit[priceType]} disabled />}
+          </Input.Group>
         </Item>
         <Item label="销售状态" {...formItemLayout}>
           {getFieldDecorator('marketStatus')(
             <Select placeholder="销售状态">
-              <Option value="待售">待售</Option>
-              <Option value="在售">在售</Option>
-              <Option value="售罄">售罄</Option>
-              <Option value="在租">在租</Option>
+              <Select.Option value="待售">待售</Select.Option>
+              <Select.Option value="在售">在售</Select.Option>
+              <Select.Option value="售罄">售罄</Select.Option>
+              <Select.Option value="在租">在租</Select.Option>
             </Select>,
           )}
         </Item>
@@ -40,10 +81,15 @@ const BuildingTypeDetail = (props) => {
           {getFieldDecorator('decoration')(<Input />)}
         </Item>
         <Item label="产权年限" {...formItemLayout}>
-          {getFieldDecorator('rightsYear')(<Input />)}
+          {getFieldDecorator('rightsYear', {
+            initialValue: 70,
+          })(<Input />)}
         </Item>
       </Form>
-    </Card>
+      <div className={styles['drawer-form-action']}>
+        <Button type="primary" onClick={handleSubmit}>确定</Button>
+      </div>
+    </Drawer>
   )
 }
 

src/pages/building/Edit/components/BuildingTypeSelect.jsx

@@ -1,19 +1,104 @@
 import React, { useState, useEffect } from 'react'
-import { Checkbox, Card, notification } from 'antd'
-import request, { apis } from '@/utils/request'
-import CheckBuildingType from './CheckBuildingType'
+import { Button, Icon, Checkbox, Card, notification } from 'antd'
 import BuildingTypeDetail from './BuildingTypeDetail'
+import request, { apis } from '@/utils/request'
+
+const gridStyle = {
+  width: '25%',
+  // textAlign: 'center',
+};
+
+export default React.forwardRef((props, ref) => {
+  const {value, onChange} = props;
+  const [showDrawer, setShowDrawer] = useState(false)
+  const [curRow, setCurRow] = useState()
+  const [curBuildingType, setBuildingType] = useState()
+  const [typeList, setTypeList] = useState([])
+
+  const handleChange = (buildingType) => (e) => {
+    const current = (value || []).filter((it) => it.buildingTypeId === buildingType.buildingTypeId)[0] || {buildingTypeId: buildingType.buildingTypeId}
+    const checked = e.target.checked
+
+    // 打开 form 表单
+    if (checked) {
+      setCurRow(current)
+      setBuildingType(buildingType)
+      setShowDrawer(true)
+    } else {
+      // 取消选择
+      const data = (value || []).filter((it) => it.buildingTypeId !== buildingType.buildingTypeId)
+      onChange(data)
+    }
+  }
+
+  const handleClick = (buildingType) => () => {
+    const current = (value || []).filter((it) => it.buildingTypeId === buildingType.buildingTypeId)[0] || {buildingTypeId: buildingType.buildingTypeId}
+    
+    setCurRow(current)
+    setBuildingType(buildingType)
+    setShowDrawer(true)
+  }
+
+  const handleClose = () => {
+    setCurRow()
+    setBuildingType()
+    setShowDrawer(false)
+  }
+
+  const handleSubmit = (val) => {
+    const data = []
+    let found = false
+    for (let it of (value || [])) {
+      if (it.buildingTypeId === val.buildingTypeId) {
+        found = true
+        data.push(val)
+      } else {
+        data.push(it)
+      }
+    }
+
+    if (!found) {
+      data.push(val)
+    }
 
-export default (props) => {
-  const [checkedType, setCheckedType] = useState([])
+    onChange(data)
+    setShowDrawer(false)
+  }
 
   useEffect(() => {
+    // 请求类型列表
+    request({ ...apis.buildingType.getList, params: { pageNum: 1, pageSize: 999 } }).then(res => {
+      setTypeList(res.records)
+    }).catch((err) => {
+      notification.error({ message: err.message })
+    })
   }, [])
 
   return (
-    <div>
-      <CheckBuildingType />
-      <BuildingTypeDetail />
-    </div>
+    <Card bordered={false}>
+      {
+        typeList.map((it) => {
+          const checked = !!(value || []).filter((x) => it.buildingTypeId === x.buildingTypeId)[0]
+          return (
+            <Card.Grid style={gridStyle} key={it.buildingTypeId} hoverable={false}>
+              <Checkbox
+                checked={checked}
+                onChange={handleChange(it)}
+              >
+                {it.buildingTypeName}
+              </Checkbox>
+              {checked && <a href="#" onClick={handleClick(it)}><Icon type="edit" /></a>}              
+            </Card.Grid>
+          )
+        })
+      }
+      <BuildingTypeDetail
+        title={curBuildingType?.buildingTypeName}
+        dataset={curRow}
+        visible={showDrawer}
+        onClose={handleClose}
+        onSubmit={handleSubmit}
+      />
+    </Card>
   )
-}
+})

src/pages/building/Edit/components/CheckBuildingType.jsx

@@ -1,36 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { Checkbox, Card, notification } from 'antd'
-import request, { apis } from '@/utils/request'
-
-const gridStyle = {
-  width: '25%',
-  // textAlign: 'center',
-};
-
-export default (props) => {
-  const [checkedType, setCheckedType] = useState([])
-  const [typeList, setTypeList] = useState([])
-
-  useEffect(() => {
-    // 请求类型列表
-    request({ ...apis.buildingType.getList, params: { pageNum: 1, pageSize: 999 } }).then(res => {
-      setTypeList(res.records)
-    }).catch((err) => {
-      notification.error({ message: err.message })
-    })
-  }, [])
-
-  return (
-    <Checkbox.Group style={{ width: '100%' }}>
-      <Card bordered={false}>
-        {
-          typeList.map((it) => (
-            <Card.Grid style={gridStyle} key={it.buildingTypeId} hoverable={false}>
-              <Checkbox value={it.buildingTypeId}>{it.buildingTypeName}</Checkbox>
-            </Card.Grid>
-          ))
-        }
-      </Card>
-    </Checkbox.Group>
-  )
-}

src/pages/building/Edit/index.jsx

@@ -10,7 +10,7 @@ export default (props) => {
     <Card>
       <Tabs defaultActiveKey="1">
         <TabPane tab="基础信息" key="1">
-          <div className={styles['tab-wrapper']} style={{maxWidth: 900}}>
+          <div className={styles['tab-wrapper']} style={{maxWidth: 1000}}>
             <Basic />
           </div>
         </TabPane>

src/pages/building/Edit/style.less

@@ -2,3 +2,14 @@
 .tab-wrapper {
   padding-top: 1em;
 }
+
+.drawer-form-action {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  border-top: 1px solid #e9e9e9;
+  padding: 10px 16px;
+  background: #fff;
+  text-align: right;
+}

src/pages/building/Edit/utils.js

@@ -2,10 +2,10 @@
 export const formItemLayout = {
   labelCol: {
     xs: { span: 24 },
-    sm: { span: 4 },
+    sm: { span: 3 },
   },
   wrapperCol: {
     xs: { span: 24 },
-    sm: { span: 16 },
+    sm: { span: 19 },
   },
 }

src/utils/upload.js

@@ -0,0 +1,39 @@
+import { fetch, apis } from './request';
+import mixStr from './mixStr';
+
+const getToken = () => mixStr(window.localStorage.getItem('test-foobar'))
+
+const uploadImage = fetch(apis.image.upload)
+
+const uploaderProps = {
+  name: 'file',
+  // action: apis.image.uploadForAnt.url,
+  accept: '.png, .jpg, .jpeg, .gif',
+  // headers: {
+  //   Authorization: `Bearer ${getToken()}`
+  // },
+  customRequest({
+    action,
+    file,
+    headers,
+    onError,
+    onProgress,
+    onSuccess,
+    withCredentials,
+  }) {
+    const data = new FormData()
+    data.append('file', file)
+
+    uploadImage({ data }).then((img) => {
+      onSuccess(img, file);
+    }).catch(onError);
+
+    return {
+      abort() {
+        console.log('upload progress is aborted.');
+      },
+    };
+  },
+}
+
+export { uploaderProps }