Explorar el Código

编辑项目-项目类型

魏熙美 hace 5 años
padre
commit
7196ecdecc

+ 10
- 2
src/components/XForm/ImageListUpload.jsx Ver fichero

@@ -34,9 +34,11 @@ class ImageListUpload extends React.Component {
34 34
 
35 35
   handleChange = ({ fileList }) => {
36 36
     this.setState({ fileList })
37
+    console.log(fileList)
37 38
     if (typeof this.props.onChange === 'function') {
38 39
       // return item.response.url
39 40
       const images = fileList.filter(item => item.status === 'done')
41
+      console.log(images)
40 42
       this.props.onChange(images.map(item => item.response.url))
41 43
     }
42 44
   };
@@ -45,6 +47,12 @@ class ImageListUpload extends React.Component {
45 47
     const { previewVisible, previewImage, fileList } = this.state;
46 48
 
47 49
     const { value } = this.props
50
+    let images = []
51
+    if (value !== undefined && value !== null) {
52
+      // ?x-oss-process=style/thumbnail
53
+      images = value.map(item => ({ response: { url: item, thumbUrl: item, status: 'done' } }))
54
+    }
55
+    console.log('imageList: ', images)
48 56
 
49 57
     const uploadButton = (
50 58
       <div>
@@ -56,12 +64,12 @@ class ImageListUpload extends React.Component {
56 64
       <div className="clearfix">
57 65
         <Upload
58 66
           listType="picture-card"
59
-          fileList={fileList || value}
67
+          fileList={fileList || images}
60 68
           onPreview={this.handlePreview}
61 69
           onChange={this.handleChange}
62 70
           { ...uploaderProps }
63 71
         >
64
-          {fileList.length >= 8 ? null : uploadButton}
72
+          {(fileList || images).length >= 8 ? null : uploadButton}
65 73
         </Upload>
66 74
         <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
67 75
           <img alt="example" style={{ width: '100%' }} src={previewImage} />

+ 9
- 4
src/pages/building/list/add/components/base.jsx Ver fichero

@@ -9,6 +9,7 @@ import ImageUpload from '../../../../../components/XForm/ImageUpload'
9 9
 import ImageListUpload from '../../../../../components/XForm/ImageListUpload'
10 10
 import Wangedit from '../../../../../components/Wangedit/Wangedit'
11 11
 import TagGroup from './tags'
12
+import BudildingProjectType from './buildingProjectType'
12 13
 
13 14
 const { Option } = Select
14 15
 const { TabPane } = Tabs;
@@ -55,6 +56,7 @@ function AddBuilding(props) {
55 56
     request({ url: tempUrl, method }).then(res => {
56 57
       res.openingDate = moment(res.openingDate)
57 58
       res.receivedDate = moment(res.receivedDate)
59
+      res.avatarImage = res.buildingImg.map(item => item.url)
58 60
       props.form.setFieldsValue(res)
59 61
     })
60 62
   }
@@ -71,11 +73,11 @@ function AddBuilding(props) {
71 73
   function addBuilding(data) {
72 74
     data.openingDate = moment(data.openingDate, 'yyyy-MM-dd HH:mm:ss')
73 75
     data.receivedDate = moment(data.receivedDate, 'yyyy-MM-dd HH:mm:ss')
74
-    data.buildingProjectType = []
75 76
     // 项目主图
76 77
     data.img = data.avatarImage && data.avatarImage.map((item, index) => ({ imgType: 'banner', url: item, orderNo: index + 1 }))
77 78
 
78
-    request({ ...apis.building.addBuilding, data: { ...data } }).then(() => {
79
+    const api = data.buildingId === undefined ? apis.building.addBuilding : apis.building.updateBuilding
80
+    request({ ...api, data: { ...data } }).then(() => {
79 81
       openNotificationWithIcon('success', '操作成功')
80 82
     }).catch(err => {
81 83
       openNotificationWithIcon('error', err.message)
@@ -84,6 +86,9 @@ function AddBuilding(props) {
84 86
 
85 87
   return (
86 88
         <Form {...formItemLayout} onSubmit={handleSubmit}>
89
+          <Form.Item label="项目Id" hasFeedback style={{ display: 'none' }}>
90
+            {getFieldDecorator('buildingId')(<Input disabled />)}
91
+          </Form.Item>
87 92
           <Form.Item label="楼盘编号" hasFeedback>
88 93
             {getFieldDecorator('code')(<Input />)}
89 94
           </Form.Item>
@@ -93,8 +98,8 @@ function AddBuilding(props) {
93 98
           <Form.Item label="别名" hasFeedback>
94 99
             {getFieldDecorator('name')(<Input />)}
95 100
           </Form.Item>
96
-          <Form.Item label="项目类型" hasFeedback>
97
-            {getFieldDecorator('buildingProjectType')(<Input />)}
101
+          <Form.Item label="项目类型">
102
+            {getFieldDecorator('buildingProjectType')(<BudildingProjectType />)}
98 103
           </Form.Item>
99 104
           <Form.Item label="均价" hasFeedback>
100 105
             {getFieldDecorator('price')(<Input />)}

+ 262
- 0
src/pages/building/list/add/components/buildingProjectType.jsx Ver fichero

@@ -0,0 +1,262 @@
1
+import React, { useEffect, useState } from 'react'
2
+import { Button, Radio, Icon, Form, Input, Row, Col, Modal, notification, Checkbox } from 'antd';
3
+import { render } from 'react-dom';
4
+import request from '../../../../../utils/request';
5
+import apis from '../../../../../services/apis';
6
+
7
+
8
+const formItemLayout = {
9
+  labelCol: {
10
+    xs: { span: 24 },
11
+    sm: { span: 3 },
12
+  },
13
+  wrapperCol: {
14
+    xs: { span: 24 },
15
+    sm: { span: 16 },
16
+  },
17
+};
18
+
19
+/**
20
+ * 项目类型 form 表单子组件
21
+ *
22
+ * @param {*} props
23
+ */
24
+class TypeForm extends React.Component {
25
+
26
+  componentDidMount() {
27
+    this.props.form.setFieldsValue(this.props.type)
28
+  }
29
+
30
+  onChange(e, name) {
31
+    // console.log(e.target.value)
32
+    this.props.form.validateFieldsAndScroll((err, values) => {
33
+      if (!err) {
34
+        // console.log('Received values of form: ', values);
35
+        values[name] = e.target.value
36
+        values.buildingTypeName = this.props.type.buildingTypeName
37
+        console.log('values: ', values)
38
+        this.props.onSuccess(values)
39
+      }
40
+    });
41
+  }
42
+
43
+  close() {
44
+    this.props.onClose(this.props.form.getFieldsValue(['buildingTypeId']))
45
+  }
46
+
47
+  render() {
48
+    const { getFieldDecorator } = this.props.form;
49
+
50
+    // this.props.form.setFieldsValue(this.props.type)
51
+
52
+    return (
53
+      <>
54
+        <div>
55
+          <Row>
56
+            <Col span={8}>{ this.props.type.buildingTypeName || ''}</Col>
57
+            <Col span={1}>
58
+              <Button type="link" icon="close" onClick={() => this.close()} />
59
+            </Col>
60
+          </Row>
61
+          <Row>
62
+            <Col span={12}>
63
+              <Form {...formItemLayout}>
64
+                <Form.Item label="类型编号" style={{ display: 'none' }}>
65
+                  {getFieldDecorator('buildingTypeId')(<Input disabled />)}
66
+                </Form.Item>
67
+                <Form.Item label="状态" style={{ display: 'none' }}>
68
+                  {getFieldDecorator('status')(<Input disabled />)}
69
+                </Form.Item>
70
+                <Form.Item label="价格">
71
+                  {getFieldDecorator('price')(<Input type="number" placeholder="元/㎡" onChange={e => this.onChange(e, 'price')}/>)}
72
+                </Form.Item>
73
+                <Form.Item label="装修标准">
74
+                  {getFieldDecorator('decoration')(<Input onChange={e => this.onChange(e, 'decoration')}/>)}
75
+                </Form.Item>
76
+                <Form.Item label="产权年限">
77
+                  {getFieldDecorator('rightsYear')(<Input onChange={e => this.onChange(e, 'rightsYear')}/>)}
78
+                </Form.Item>
79
+              </Form>
80
+            </Col>
81
+          </Row>
82
+        </div>
83
+      </>
84
+    )
85
+  }
86
+}
87
+
88
+const WrappedTypeForm = Form.create({ name: 'TypeForm' })(TypeForm);
89
+
90
+/**
91
+ *项目类型组件
92
+ *
93
+ * @param {*} props
94
+ */
95
+class ProjectTypeBody extends React.Component {
96
+
97
+  constructor(props) {
98
+    super(props)
99
+    this.state = {
100
+      one: false,
101
+      projectType: [],
102
+      defaultCheckboxValue: [], // 多选框默认选中的值
103
+      visible: false,
104
+      data: [],
105
+      // 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' }],
106
+    }
107
+  }
108
+
109
+  componentDidMount() {
110
+    this.getList({ pageNum: 1, pageSize: 999 })
111
+  }
112
+
113
+  componentDidUpdate(prevProps) {
114
+    // 典型用法(不要忘记比较 props):
115
+    if (this.props.value !== prevProps.data && !this.state.one) {
116
+      this.setValue()
117
+      this.setState({ one: true })
118
+    }
119
+  }
120
+
121
+  onSuccess = (values, item) => {
122
+    console.log('values: ', values)
123
+    console.log('data: ', this.state.data, 'item: ', item)
124
+    const newData = this.getNewProjectType(values)
125
+    console.log('newData: ', newData)
126
+    this.setState({ data: newData })
127
+    if (typeof this.props.onChange === 'function') {
128
+      this.props.onChange(newData)
129
+    }
130
+  }
131
+
132
+  onCheckboxChange = checkedValues => {
133
+      const checked = (`${checkedValues}` || '').split(',')
134
+      const { projectType } = this.state
135
+      const buildingType = projectType.filter(item => checked.includes(`${item.buildingTypeId}`))
136
+
137
+      // 这里会把值替换掉
138
+
139
+      const tempDate = buildingType.map(item => ({ buildingTypeId: item.buildingTypeId, buildingTypeName: item.buildingTypeName, price: '', decoration: '', rightsYear: '', status: '1' }))
140
+      const updateProjectDate = this.updateProjectType(checkedValues)
141
+      console.log('updateProjectDate: ', updateProjectDate)
142
+      this.setState({ data: updateProjectDate })
143
+  }
144
+
145
+  onClose = e => {
146
+    const { data } = this.state
147
+    const buildingType = data.filter(item => e.buildingTypeId !== item.buildingTypeId)
148
+    console.log('buildingType: ', buildingType)
149
+    this.setState({ data: buildingType })
150
+    this.setState({ defaultCheckboxValue: buildingType.map(item => item.buildingTypeId) })
151
+  }
152
+
153
+  getNewProjectType = values => {
154
+    const data = []
155
+    this.state.data.map(item => {
156
+      console.log('item: ', item)
157
+      if (item.buildingTypeId === values.buildingTypeId) {
158
+        data.push(values)
159
+      } else {
160
+        data.push(item)
161
+      }
162
+    })
163
+
164
+    return data
165
+  }
166
+
167
+  updateProjectType = values => {
168
+    const data = []
169
+    this.state.data.map(item => {
170
+      values.map(va => {
171
+        if (item.buildingTypeId === va.buildingTypeId) {
172
+          data.push(va)
173
+        } else {
174
+          data.push(item)
175
+        }
176
+      })
177
+    })
178
+
179
+    return data
180
+  }
181
+
182
+  getList = params => {
183
+    request({ ...apis.buildingType.getList, params: { ...params } }).then(res => {
184
+      this.setState({ projectType: res.records })
185
+    }).catch(err => {
186
+      this.openNotificationWithIcon('error', err.message)
187
+    })
188
+  }
189
+
190
+  setValue = () => {
191
+    let tempData = []
192
+    let tempCheckboxValue = []
193
+    const { value } = this.props
194
+    // console.log('value: ', value)
195
+    if (value !== undefined && value !== null) {
196
+      tempData = value
197
+      tempCheckboxValue = tempData.map(item => item.buildingTypeId)
198
+      this.setState({ defaultCheckboxValue: tempCheckboxValue })
199
+      this.setState({ data: tempData }, () => {
200
+        console.log("state: ", this.state.data)
201
+      })
202
+
203
+      console.log("tempData: ", tempData, "tempCheckboxValue: ", tempCheckboxValue, "value: ", value)
204
+    }
205
+  }
206
+
207
+  openNotificationWithIcon = (type, message) => {
208
+    notification[type]({
209
+      message,
210
+      description: '',
211
+    })
212
+  }
213
+
214
+  handleOk = e => {
215
+    this.setState({
216
+      visible: false,
217
+    });
218
+  };
219
+
220
+  handleCancel = e => {
221
+    this.setState({
222
+      visible: false,
223
+    });
224
+  };
225
+
226
+  showMadel = () => {
227
+    this.setState({ visible: true })
228
+    this.getList({ pageNum: 1, pageSize: 999 })
229
+  }
230
+
231
+  render () {
232
+
233
+    // let tempData = []
234
+    // let tempCheckboxValue = []
235
+    // const { value } = this.props
236
+    // if (value !== undefined && value !== null) {
237
+    //   tempData = value
238
+    // } else {
239
+    //   tempData = this.state.data
240
+    // }
241
+
242
+    // tempCheckboxValue = tempData.map(item => item.buildingTypeId)
243
+    return (
244
+      <>
245
+        <Button type="primary" icon="plus" size="large" onClick={() => this.showMadel()} />
246
+        <Modal
247
+          title="项目类型"
248
+          visible={this.state.visible}
249
+          onOk={this.handleOk}
250
+          onCancel={this.handleCancel}
251
+        >
252
+          <Checkbox.Group options={this.state.projectType.map(item => ({ label: item.buildingTypeName, value: item.buildingTypeId }))} defaultValue={this.state.defaultCheckboxValue} onChange={e => this.onCheckboxChange(e)} />
253
+        </Modal>
254
+        {
255
+          this.state.data.map(item => <WrappedTypeForm type={item} key={item.id} onSuccess={(e) => this.onSuccess(e, item)} onClose={(e) => this.onClose(e)} />)
256
+        }
257
+      </>
258
+    )
259
+  }
260
+}
261
+
262
+export default ProjectTypeBody

+ 19
- 23
src/pages/building/list/add/components/tags.jsx Ver fichero

@@ -3,15 +3,23 @@ import { Tag, Input, Tooltip, Icon } from 'antd';
3 3
 
4 4
 class EditableTagGroup extends React.Component {
5 5
   state = {
6
-    tags: [],
7 6
     inputVisible: false,
8 7
     inputValue: '',
9 8
   };
10 9
 
10
+  // 每次取值,都从 this.props.value 获取最新值
11
+  getTags = () => (this.props.value || '').split(',')
12
+
13
+  toggleOnChange = tags => {
14
+    if (typeof this.props.onChange === 'function') {
15
+      this.props.onChange(tags.join(','))
16
+    }
17
+  }
18
+
11 19
   handleClose = removedTag => {
12
-    const tags = this.state.tags.filter(tag => tag !== removedTag);
13
-    console.log(tags);
14
-    this.setState({ tags });
20
+    const tags = this.getTags().filter(tag => tag !== removedTag);
21
+    // this.setState({ tags });
22
+    this.toggleOnChange(tags)
15 23
   };
16 24
 
17 25
   showInput = () => {
@@ -24,39 +32,27 @@ class EditableTagGroup extends React.Component {
24 32
 
25 33
   handleInputConfirm = () => {
26 34
     const { inputValue } = this.state;
27
-    let { tags } = this.state;
35
+
36
+    const tags = this.getTags()
28 37
     if (inputValue && tags.indexOf(inputValue) === -1) {
29
-      tags = [...tags, inputValue];
38
+      // 如果有新的值,就把这个值追加到 tags 原本值的后面,在通过onChange事件传递出去
39
+      this.toggleOnChange(tags.concat(inputValue))
30 40
     }
31
-    console.log(tags);
41
+
32 42
     this.setState({
33
-      tags,
34 43
       inputVisible: false,
35 44
       inputValue: '',
36 45
     });
37
-
38
-    if (typeof this.props.onChange === 'function') {
39
-      const tempTags = tags.join(',')
40
-      this.props.onChange(tempTags);
41
-    }
42 46
   };
43 47
 
44 48
   saveInputRef = input => (this.input = input);
45 49
 
46 50
   render() {
47
-    const { tags, inputVisible, inputValue } = this.state;
48
-
49
-    const { value } = this.props
50
-    let data = []
51
-    if (value !== undefined && value !== null) {
52
-      data = value.split(',')
53
-    } else {
54
-      data = tags
55
-    }
51
+    const { inputVisible, inputValue } = this.state;
56 52
 
57 53
     return (
58 54
       <div>
59
-        {data.map((tag, index) => {
55
+        {this.getTags().map((tag, index) => {
60 56
           const isLongTag = tag.length > 20;
61 57
           const tagElem = (
62 58
             <Tag key={tag} closable onClose={() => this.handleClose(tag)}>

+ 4
- 0
src/services/apis.js Ver fichero

@@ -30,6 +30,10 @@ export default {
30 30
       method: 'POST',
31 31
       url: `${prefix}/building/add`,
32 32
     },
33
+    updateBuilding: {
34
+      method: 'PUT',
35
+      url: `${prefix}/building/update`,
36
+    },
33 37
     buildingGetById: {
34 38
       method: 'GET',
35 39
       url: `${prefix}/buildingSelectId/id`,