编辑项目-项目类型

src/components/XForm/ImageListUpload.jsx

@@ -34,9 +34,11 @@ class ImageListUpload extends React.Component {
 
   handleChange = ({ fileList }) => {
     this.setState({ fileList })
+    console.log(fileList)
     if (typeof this.props.onChange === 'function') {
       // return item.response.url
       const images = fileList.filter(item => item.status === 'done')
+      console.log(images)
       this.props.onChange(images.map(item => item.response.url))
     }
   };
@@ -45,6 +47,12 @@ class ImageListUpload extends React.Component {
     const { previewVisible, previewImage, fileList } = this.state;
 
     const { value } = this.props
+    let images = []
+    if (value !== undefined && value !== null) {
+      // ?x-oss-process=style/thumbnail
+      images = value.map(item => ({ response: { url: item, thumbUrl: item, status: 'done' } }))
+    }
+    console.log('imageList: ', images)
 
     const uploadButton = (
       <div>
@@ -56,12 +64,12 @@ class ImageListUpload extends React.Component {
       <div className="clearfix">
         <Upload
           listType="picture-card"
-          fileList={fileList || value}
+          fileList={fileList || images}
           onPreview={this.handlePreview}
           onChange={this.handleChange}
           { ...uploaderProps }
         >
-          {fileList.length >= 8 ? null : uploadButton}
+          {(fileList || images).length >= 8 ? null : uploadButton}
         </Upload>
         <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
           <img alt="example" style={{ width: '100%' }} src={previewImage} />

src/pages/building/list/add/components/base.jsx

@@ -9,6 +9,7 @@ import ImageUpload from '../../../../../components/XForm/ImageUpload'
 import ImageListUpload from '../../../../../components/XForm/ImageListUpload'
 import Wangedit from '../../../../../components/Wangedit/Wangedit'
 import TagGroup from './tags'
+import BudildingProjectType from './buildingProjectType'
 
 const { Option } = Select
 const { TabPane } = Tabs;
@@ -55,6 +56,7 @@ function AddBuilding(props) {
     request({ url: tempUrl, method }).then(res => {
       res.openingDate = moment(res.openingDate)
       res.receivedDate = moment(res.receivedDate)
+      res.avatarImage = res.buildingImg.map(item => item.url)
       props.form.setFieldsValue(res)
     })
   }
@@ -71,11 +73,11 @@ function AddBuilding(props) {
   function addBuilding(data) {
     data.openingDate = moment(data.openingDate, 'yyyy-MM-dd HH:mm:ss')
     data.receivedDate = moment(data.receivedDate, 'yyyy-MM-dd HH:mm:ss')
-    data.buildingProjectType = []
     // 项目主图
     data.img = data.avatarImage && data.avatarImage.map((item, index) => ({ imgType: 'banner', url: item, orderNo: index + 1 }))
 
-    request({ ...apis.building.addBuilding, data: { ...data } }).then(() => {
+    const api = data.buildingId === undefined ? apis.building.addBuilding : apis.building.updateBuilding
+    request({ ...api, data: { ...data } }).then(() => {
       openNotificationWithIcon('success', '操作成功')
     }).catch(err => {
       openNotificationWithIcon('error', err.message)
@@ -84,6 +86,9 @@ function AddBuilding(props) {
 
   return (
         <Form {...formItemLayout} onSubmit={handleSubmit}>
+          <Form.Item label="项目Id" hasFeedback style={{ display: 'none' }}>
+            {getFieldDecorator('buildingId')(<Input disabled />)}
+          </Form.Item>
           <Form.Item label="楼盘编号" hasFeedback>
             {getFieldDecorator('code')(<Input />)}
           </Form.Item>
@@ -93,8 +98,8 @@ function AddBuilding(props) {
           <Form.Item label="别名" hasFeedback>
             {getFieldDecorator('name')(<Input />)}
           </Form.Item>
-          <Form.Item label="项目类型" hasFeedback>
-            {getFieldDecorator('buildingProjectType')(<Input />)}
+          <Form.Item label="项目类型">
+            {getFieldDecorator('buildingProjectType')(<BudildingProjectType />)}
           </Form.Item>
           <Form.Item label="均价" hasFeedback>
             {getFieldDecorator('price')(<Input />)}

src/pages/building/list/add/components/buildingProjectType.jsx

@@ -0,0 +1,262 @@
+import React, { useEffect, useState } from 'react'
+import { Button, Radio, Icon, Form, Input, Row, Col, Modal, notification, Checkbox } from 'antd';
+import { render } from 'react-dom';
+import request from '../../../../../utils/request';
+import apis from '../../../../../services/apis';
+
+
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 3 },
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 16 },
+  },
+};
+
+/**
+ * 项目类型 form 表单子组件
+ *
+ * @param {*} props
+ */
+class TypeForm extends React.Component {
+
+  componentDidMount() {
+    this.props.form.setFieldsValue(this.props.type)
+  }
+
+  onChange(e, name) {
+    // console.log(e.target.value)
+    this.props.form.validateFieldsAndScroll((err, values) => {
+      if (!err) {
+        // console.log('Received values of form: ', values);
+        values[name] = e.target.value
+        values.buildingTypeName = this.props.type.buildingTypeName
+        console.log('values: ', values)
+        this.props.onSuccess(values)
+      }
+    });
+  }
+
+  close() {
+    this.props.onClose(this.props.form.getFieldsValue(['buildingTypeId']))
+  }
+
+  render() {
+    const { getFieldDecorator } = this.props.form;
+
+    // this.props.form.setFieldsValue(this.props.type)
+
+    return (
+      <>
+        <div>
+          <Row>
+            <Col span={8}>{ this.props.type.buildingTypeName || ''}</Col>
+            <Col span={1}>
+              <Button type="link" icon="close" onClick={() => this.close()} />
+            </Col>
+          </Row>
+          <Row>
+            <Col span={12}>
+              <Form {...formItemLayout}>
+                <Form.Item label="类型编号" style={{ display: 'none' }}>
+                  {getFieldDecorator('buildingTypeId')(<Input disabled />)}
+                </Form.Item>
+                <Form.Item label="状态" style={{ display: 'none' }}>
+                  {getFieldDecorator('status')(<Input disabled />)}
+                </Form.Item>
+                <Form.Item label="价格">
+                  {getFieldDecorator('price')(<Input type="number" placeholder="元/㎡" onChange={e => this.onChange(e, 'price')}/>)}
+                </Form.Item>
+                <Form.Item label="装修标准">
+                  {getFieldDecorator('decoration')(<Input onChange={e => this.onChange(e, 'decoration')}/>)}
+                </Form.Item>
+                <Form.Item label="产权年限">
+                  {getFieldDecorator('rightsYear')(<Input onChange={e => this.onChange(e, 'rightsYear')}/>)}
+                </Form.Item>
+              </Form>
+            </Col>
+          </Row>
+        </div>
+      </>
+    )
+  }
+}
+
+const WrappedTypeForm = Form.create({ name: 'TypeForm' })(TypeForm);
+
+/**
+ *项目类型组件
+ *
+ * @param {*} props
+ */
+class ProjectTypeBody extends React.Component {
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      one: false,
+      projectType: [],
+      defaultCheckboxValue: [], // 多选框默认选中的值
+      visible: false,
+      data: [],
+      // data: [{ buildingTypeId: '1', buildingTypeName: '公寓', price: '10', decoration: '全包', rightsYear: '10', status: '1' }, { buildingTypeId: '2', buildingTypeName: '住宅', price: '10', decoration: '全包', rightsYear: '10', status: '1' }, { buildingTypeId: '3', buildingTypeName: '太平房', price: '10', decoration: '全包', rightsYear: '10', status: '1' }],
+    }
+  }
+
+  componentDidMount() {
+    this.getList({ pageNum: 1, pageSize: 999 })
+  }
+
+  componentDidUpdate(prevProps) {
+    // 典型用法（不要忘记比较 props）：
+    if (this.props.value !== prevProps.data && !this.state.one) {
+      this.setValue()
+      this.setState({ one: true })
+    }
+  }
+
+  onSuccess = (values, item) => {
+    console.log('values: ', values)
+    console.log('data: ', this.state.data, 'item: ', item)
+    const newData = this.getNewProjectType(values)
+    console.log('newData: ', newData)
+    this.setState({ data: newData })
+    if (typeof this.props.onChange === 'function') {
+      this.props.onChange(newData)
+    }
+  }
+
+  onCheckboxChange = checkedValues => {
+      const checked = (`${checkedValues}` || '').split(',')
+      const { projectType } = this.state
+      const buildingType = projectType.filter(item => checked.includes(`${item.buildingTypeId}`))
+
+      // 这里会把值替换掉
+
+      const tempDate = buildingType.map(item => ({ buildingTypeId: item.buildingTypeId, buildingTypeName: item.buildingTypeName, price: '', decoration: '', rightsYear: '', status: '1' }))
+      const updateProjectDate = this.updateProjectType(checkedValues)
+      console.log('updateProjectDate: ', updateProjectDate)
+      this.setState({ data: updateProjectDate })
+  }
+
+  onClose = e => {
+    const { data } = this.state
+    const buildingType = data.filter(item => e.buildingTypeId !== item.buildingTypeId)
+    console.log('buildingType: ', buildingType)
+    this.setState({ data: buildingType })
+    this.setState({ defaultCheckboxValue: buildingType.map(item => item.buildingTypeId) })
+  }
+
+  getNewProjectType = values => {
+    const data = []
+    this.state.data.map(item => {
+      console.log('item: ', item)
+      if (item.buildingTypeId === values.buildingTypeId) {
+        data.push(values)
+      } else {
+        data.push(item)
+      }
+    })
+
+    return data
+  }
+
+  updateProjectType = values => {
+    const data = []
+    this.state.data.map(item => {
+      values.map(va => {
+        if (item.buildingTypeId === va.buildingTypeId) {
+          data.push(va)
+        } else {
+          data.push(item)
+        }
+      })
+    })
+
+    return data
+  }
+
+  getList = params => {
+    request({ ...apis.buildingType.getList, params: { ...params } }).then(res => {
+      this.setState({ projectType: res.records })
+    }).catch(err => {
+      this.openNotificationWithIcon('error', err.message)
+    })
+  }
+
+  setValue = () => {
+    let tempData = []
+    let tempCheckboxValue = []
+    const { value } = this.props
+    // console.log('value: ', value)
+    if (value !== undefined && value !== null) {
+      tempData = value
+      tempCheckboxValue = tempData.map(item => item.buildingTypeId)
+      this.setState({ defaultCheckboxValue: tempCheckboxValue })
+      this.setState({ data: tempData }, () => {
+        console.log("state: ", this.state.data)
+      })
+
+      console.log("tempData: ", tempData, "tempCheckboxValue: ", tempCheckboxValue, "value: ", value)
+    }
+  }
+
+  openNotificationWithIcon = (type, message) => {
+    notification[type]({
+      message,
+      description: '',
+    })
+  }
+
+  handleOk = e => {
+    this.setState({
+      visible: false,
+    });
+  };
+
+  handleCancel = e => {
+    this.setState({
+      visible: false,
+    });
+  };
+
+  showMadel = () => {
+    this.setState({ visible: true })
+    this.getList({ pageNum: 1, pageSize: 999 })
+  }
+
+  render () {
+
+    // let tempData = []
+    // let tempCheckboxValue = []
+    // const { value } = this.props
+    // if (value !== undefined && value !== null) {
+    //   tempData = value
+    // } else {
+    //   tempData = this.state.data
+    // }
+
+    // tempCheckboxValue = tempData.map(item => item.buildingTypeId)
+    return (
+      <>
+        <Button type="primary" icon="plus" size="large" onClick={() => this.showMadel()} />
+        <Modal
+          title="项目类型"
+          visible={this.state.visible}
+          onOk={this.handleOk}
+          onCancel={this.handleCancel}
+        >
+          <Checkbox.Group options={this.state.projectType.map(item => ({ label: item.buildingTypeName, value: item.buildingTypeId }))} defaultValue={this.state.defaultCheckboxValue} onChange={e => this.onCheckboxChange(e)} />
+        </Modal>
+        {
+          this.state.data.map(item => <WrappedTypeForm type={item} key={item.id} onSuccess={(e) => this.onSuccess(e, item)} onClose={(e) => this.onClose(e)} />)
+        }
+      </>
+    )
+  }
+}
+
+export default ProjectTypeBody

src/pages/building/list/add/components/tags.jsx

@@ -3,15 +3,23 @@ import { Tag, Input, Tooltip, Icon } from 'antd';
 
 class EditableTagGroup extends React.Component {
   state = {
-    tags: [],
     inputVisible: false,
     inputValue: '',
   };
 
+  // 每次取值，都从 this.props.value 获取最新值
+  getTags = () => (this.props.value || '').split(',')
+
+  toggleOnChange = tags => {
+    if (typeof this.props.onChange === 'function') {
+      this.props.onChange(tags.join(','))
+    }
+  }
+
   handleClose = removedTag => {
-    const tags = this.state.tags.filter(tag => tag !== removedTag);
-    console.log(tags);
-    this.setState({ tags });
+    const tags = this.getTags().filter(tag => tag !== removedTag);
+    // this.setState({ tags });
+    this.toggleOnChange(tags)
   };
 
   showInput = () => {
@@ -24,39 +32,27 @@ class EditableTagGroup extends React.Component {
 
   handleInputConfirm = () => {
     const { inputValue } = this.state;
-    let { tags } = this.state;
+
+    const tags = this.getTags()
     if (inputValue && tags.indexOf(inputValue) === -1) {
-      tags = [...tags, inputValue];
+      // 如果有新的值，就把这个值追加到 tags 原本值的后面，在通过onChange事件传递出去
+      this.toggleOnChange(tags.concat(inputValue))
     }
-    console.log(tags);
+
     this.setState({
-      tags,
       inputVisible: false,
       inputValue: '',
     });
-
-    if (typeof this.props.onChange === 'function') {
-      const tempTags = tags.join(',')
-      this.props.onChange(tempTags);
-    }
   };
 
   saveInputRef = input => (this.input = input);
 
   render() {
-    const { tags, inputVisible, inputValue } = this.state;
-
-    const { value } = this.props
-    let data = []
-    if (value !== undefined && value !== null) {
-      data = value.split(',')
-    } else {
-      data = tags
-    }
+    const { inputVisible, inputValue } = this.state;
 
     return (
       <div>
-        {data.map((tag, index) => {
+        {this.getTags().map((tag, index) => {
           const isLongTag = tag.length > 20;
           const tagElem = (
             <Tag key={tag} closable onClose={() => this.handleClose(tag)}>

src/services/apis.js

@@ -30,6 +30,10 @@ export default {
       method: 'POST',
       url: `${prefix}/building/add`,
     },
+    updateBuilding: {
+      method: 'PUT',
+      url: `${prefix}/building/update`,
+    },
     buildingGetById: {
       method: 'GET',
       url: `${prefix}/buildingSelectId/id`,