张延森 il y a 3 ans
Parent
révision
f06f565254

+ 0
- 0
src/pages/building/Edit/Basic.jsx Voir le fichier


+ 48
- 0
src/pages/building/Edit/Basic/form.js Voir le fichier

1
+import { fetch, apis } from '@/utils/request';
2
+import moment from 'moment';
3
+
1
 export function initForm(form, data) {
4
 export function initForm(form, data) {
2
   if (!data) return;
5
   if (!data) return;
3
 
6
 
29
 
32
 
30
   form.setFieldsValue(formData);
33
   form.setFieldsValue(formData);
31
 }
34
 }
35
+
36
+export function saveData(formData) {
37
+  const {
38
+    arrounds,
39
+    pois,
40
+    receivedDate,
41
+    avatarImage,
42
+    listImage,
43
+    videoUrl,
44
+    tag,
45
+    videoImage,
46
+    ...data
47
+  } = formData
48
+  // 项目周边
49
+  const arroundsData = Object.keys(arrounds).reduce((acc, key) => {
50
+    return {
51
+      ...acc,
52
+      [key]: arrounds[key].map(it => it.name).join(',')
53
+    }
54
+  }, {})
55
+  Object.assign(data, arroundsData)
56
+
57
+  // 项目地图周边
58
+  data.mapJson = Object.keys(pois).map((key) => {
59
+    return {
60
+      key,
61
+      data: JSON.stringify(pois[key]),
62
+    }
63
+  })
64
+  //
65
+  data.receivedDate = moment(receivedDate, 'yyyy-MM-dd HH:mm:ss')
66
+  // 项目主图
67
+  data.img = avatarImage.map((item, index) => ({ imgType: 'banner', url: item, orderNo: index + 1 }))
68
+  // 列表图
69
+  data.listImg = listImage ? [{ imgType: 'list', url: listImage, orderNo: 1 }] : []
70
+  //
71
+  data.videoUrl = videoUrl ? videoUrl[0] : undefined
72
+  //
73
+  data.videoImage = videoImage ? [{ imgType: 'videoImage', url: data.videoImage, orderNo: 1 }] : []
74
+  // 项目标签
75
+  data.tag = tag.map((item, _) => ({ tagName: item }))
76
+
77
+  const request = fetch(data.buildingId ? apis.building.updateBuilding : apis.building.addBuilding)
78
+  return request({ data })
79
+}

+ 47
- 17
src/pages/building/Edit/Basic/index.jsx Voir le fichier

15
 import useArrounds from './useArrounds'
15
 import useArrounds from './useArrounds'
16
 import usePois from './usePois'
16
 import usePois from './usePois'
17
 import useQuery from './useQuery'
17
 import useQuery from './useQuery'
18
-import { initForm } from './form'
18
+import useBrands from './useBrands'
19
+import { initForm, saveData } from './form'
19
 
20
 
20
 const fullWidth= { width: '100%' }
21
 const fullWidth= { width: '100%' }
21
 const Item = Form.Item
22
 const Item = Form.Item
27
   const { id } = query;
28
   const { id } = query;
28
 
29
 
29
   const [ loading, setLoading ] = useState({ form: false, arround: false })
30
   const [ loading, setLoading ] = useState({ form: false, arround: false })
31
+  const [brands] = useBrands()
30
   const [
32
   const [
31
     arrounds,
33
     arrounds,
32
     initArrounds,
34
     initArrounds,
40
   ] = usePois()
42
   ] = usePois()
41
 
43
 
42
   const updateLoading = (key) => (state) => setLoading({ ...loading, [key]: state })
44
   const updateLoading = (key) => (state) => setLoading({ ...loading, [key]: state })
45
+  const updateFormLoading = updateLoading('form')
43
 
46
 
44
-  useQuery(id, updateLoading('form'), (res) => {
47
+  useQuery(id, updateFormLoading, (res) => {
45
     initPois(res.mapJson)
48
     initPois(res.mapJson)
46
     initArrounds(res)
49
     initArrounds(res)
47
     initForm(form, res)
50
     initForm(form, res)
89
     })
92
     })
90
   }
93
   }
91
 
94
 
95
+  function handleSubmit(e) {
96
+    e.preventDefault();
97
+    props.form.validateFieldsAndScroll((err, values) => {
98
+      if (!err) {
99
+        updateFormLoading(true)
100
+        saveData({
101
+          ...values,
102
+          pois,
103
+          arrounds,
104
+        }).then(() => {
105
+          updateFormLoading(false)
106
+          notification.success({ message: '保存项目基础信息成功' })
107
+        }).catch((err) => {
108
+          console.error(err)
109
+          updateFormLoading(false)
110
+          notification.error({ message: err.message || err })
111
+        })
112
+      }
113
+    });
114
+  }
115
+
92
   return (
116
   return (
93
     <Spin spinning={loading.form}>
117
     <Spin spinning={loading.form}>
94
-      <Form {...formItemLayout}>
118
+      <Form {...formItemLayout} onSubmit={handleSubmit}>
95
         <Item label="项目Id" style={{ display: 'none' }}>
119
         <Item label="项目Id" style={{ display: 'none' }}>
96
           {getFieldDecorator('buildingId')(<Input disabled />)}
120
           {getFieldDecorator('buildingId')(<Input disabled />)}
97
         </Item>
121
         </Item>
235
               type="Transport"
259
               type="Transport"
236
               pois={pois.Transport}
260
               pois={pois.Transport}
237
               tags={arrounds.buildingTransport}
261
               tags={arrounds.buildingTransport}
238
-              onChange={(e) => updateArrounds('buildingTransport', e)}
262
+              onChange={updateArrounds}
239
               onDelete={deleteArround}
263
               onDelete={deleteArround}
240
-              onPoiDelete={(poi) => deletePoi('Transport', poi)}
264
+              onPoiDelete={deletePoi}
241
             />
265
             />
242
           </Form.Item>
266
           </Form.Item>
243
           <Form.Item label="周边商业" >
267
           <Form.Item label="周边商业" >
245
               type="Mall"
269
               type="Mall"
246
               pois={pois.Mall}
270
               pois={pois.Mall}
247
               tags={arrounds.buildingMall}
271
               tags={arrounds.buildingMall}
248
-              onChange={(e) => updateArrounds('buildingMall', e)}
272
+              onChange={updateArrounds}
249
               onDelete={deleteArround}
273
               onDelete={deleteArround}
250
-              onPoiDelete={(poi) => deletePoi('Mall', poi)}
274
+              onPoiDelete={deletePoi}
251
             />
275
             />
252
           </Form.Item>
276
           </Form.Item>
253
           <Form.Item label="周边学校" >
277
           <Form.Item label="周边学校" >
255
               type="Edu"
279
               type="Edu"
256
               pois={pois.Edu}
280
               pois={pois.Edu}
257
               tags={arrounds.buildingEdu}
281
               tags={arrounds.buildingEdu}
258
-              onChange={(e) => updateArrounds('buildingEdu', e)}
282
+              onChange={updateArrounds}
259
               onDelete={deleteArround}
283
               onDelete={deleteArround}
260
-              onPoiDelete={(poi) => deletePoi('Edu', poi)}
284
+              onPoiDelete={deletePoi}
261
             />
285
             />
262
           </Form.Item>
286
           </Form.Item>
263
           <Form.Item label="周边医院" >
287
           <Form.Item label="周边医院" >
265
               type="Hospital"
289
               type="Hospital"
266
               pois={pois.Hospital}
290
               pois={pois.Hospital}
267
               tags={arrounds.buildingHospital}
291
               tags={arrounds.buildingHospital}
268
-              onChange={(e) => updateArrounds('buildingHospital', e)}
292
+              onChange={updateArrounds}
269
               onDelete={deleteArround}
293
               onDelete={deleteArround}
270
-              onPoiDelete={(poi) => deletePoi('Hospital', poi)}
294
+              onPoiDelete={deletePoi}
271
             />
295
             />
272
           </Form.Item>
296
           </Form.Item>
273
           <Form.Item label="周边银行" >
297
           <Form.Item label="周边银行" >
275
               type="Bank"
299
               type="Bank"
276
               pois={pois.Bank}
300
               pois={pois.Bank}
277
               tags={arrounds.buildingBank}
301
               tags={arrounds.buildingBank}
278
-              onChange={(e) => updateArrounds('buildingBank', e)}
302
+              onChange={updateArrounds}
279
               onDelete={deleteArround}
303
               onDelete={deleteArround}
280
-              onPoiDelete={(poi) => deletePoi('Bank', poi)}
304
+              onPoiDelete={deletePoi}
281
             />
305
             />
282
           </Form.Item>
306
           </Form.Item>
283
           <Form.Item label="周边餐饮" >
307
           <Form.Item label="周边餐饮" >
285
               type="Restaurant"
309
               type="Restaurant"
286
               pois={pois.Restaurant}
310
               pois={pois.Restaurant}
287
               tags={arrounds.buildingRestaurant}
311
               tags={arrounds.buildingRestaurant}
288
-              onChange={(e) => updateArrounds('buildingRestaurant', e)}
312
+              onChange={updateArrounds}
289
               onDelete={deleteArround}
313
               onDelete={deleteArround}
290
-              onPoiDelete={(poi) => deletePoi('Restaurant', poi)}
314
+              onPoiDelete={deletePoi}
291
             />
315
             />
292
           </Form.Item>
316
           </Form.Item>
293
         </Spin>
317
         </Spin>
373
           </Form.Item>
397
           </Form.Item>
374
         </FormGroupItem>
398
         </FormGroupItem>
375
         <Form.Item label="品牌开发商" help="【品牌开发商】与【开发商】二选一">
399
         <Form.Item label="品牌开发商" help="【品牌开发商】与【开发商】二选一">
376
-          {getFieldDecorator('brandId')(<Select style={fullWidth}></Select>)}
400
+          {getFieldDecorator('brandId')(
401
+            <Select style={fullWidth}>
402
+              {
403
+                brands.map((x) => (<Select.Option key={x.brandId} value={x.brandId}>{x.brandName}</Select.Option>))
404
+              }
405
+            </Select>
406
+          )}
377
         </Form.Item>
407
         </Form.Item>
378
         <Form.Item label="开发商" >
408
         <Form.Item label="开发商" >
379
           {getFieldDecorator('propertyDeveloper', {
409
           {getFieldDecorator('propertyDeveloper', {
404
   )
434
   )
405
 })
435
 })
406
 
436
 
407
-export default Form.create({ onValuesChange: console.log })(BuildingBasic)
437
+export default Form.create()(BuildingBasic)

+ 1
- 0
src/pages/building/Edit/Basic/useArrounds.js Voir le fichier

21
 
21
 
22
   // 用于周边 onChange 事件
22
   // 用于周边 onChange 事件
23
   const updateArrounds = useCallback((key, vals) => {
23
   const updateArrounds = useCallback((key, vals) => {
24
+    debugger
24
     setArrounds({
25
     setArrounds({
25
       ...arrounds,
26
       ...arrounds,
26
       [key]: vals || [],
27
       [key]: vals || [],

+ 20
- 0
src/pages/building/Edit/Basic/useBrands.js Voir le fichier

1
+import { useState, useEffect } from 'react';
2
+import { fetch, apis } from '@/utils/request';
3
+
4
+const fetchBrands = fetch(apis.brand.list)
5
+
6
+export default function useBrands() {
7
+  const [brands, setBrands] = useState([])
8
+
9
+  useEffect(() => {
10
+    const params = { pageSize: 500 }
11
+    fetchBrands({ params }).then((res) => {
12
+      const { records } = res
13
+      setBrands(records || [])
14
+    }).catch((err) => {
15
+      console.error(err)
16
+    })
17
+  }, [])
18
+
19
+  return [brands, setBrands]
20
+}

+ 54
- 0
src/pages/building/Edit/OnSiteService.jsx Voir le fichier

1
+import React from 'react'
2
+import { Input, Popconfirm, Table } from 'antd'
3
+import Styles from './style.less'
4
+
5
+export default (props) => {
6
+  const handleCancel = (row) => {}
7
+
8
+  const columns = [
9
+    {
10
+      title: '头像',
11
+      dataIndex: 'avatar',
12
+      key: 'avatar',
13
+      render: t => <img src={t} alt="" style={{ width: '96px', height: '96px', borderRadius: '4px' }} />,
14
+    },
15
+    {
16
+      title: '昵称',
17
+      dataIndex: 'nickname',
18
+      key: 'nickname',
19
+    },
20
+    {
21
+      title: '手机',
22
+      dataIndex: 'phone',
23
+      key: 'phone',
24
+    },
25
+    {
26
+      title: '性别',
27
+      dataIndex: 'sex',
28
+      key: 'sex',
29
+    },
30
+    {
31
+      title: '操作',
32
+      key: 'action',
33
+      render: (_, row) => (
34
+        <Popconfirm
35
+          title="确认执行取消操作?"
36
+          onConfirm={() => handleCancel(row)}
37
+        >
38
+          <a href="#" style={{color: 'red'}}>取消绑定</a>
39
+        </Popconfirm>
40
+      )
41
+    },
42
+  ]
43
+
44
+  return (
45
+    <div className={Styles['on-site-box']}>
46
+      <div className={Styles['market-code']}>
47
+        <div className={Styles['code-label']}>驻场编码: </div>
48
+        <div className={Styles['code-input']}><Input value={123} style={{ width: '30%' }} /></div>
49
+      </div>
50
+
51
+      <Table columns={columns} bordered pagination={false} />
52
+    </div>
53
+  )
54
+}

+ 0
- 1
src/pages/building/Edit/components/BuildingTypeSelect.jsx Voir le fichier

33
 
33
 
34
   const handleClick = (buildingType) => () => {
34
   const handleClick = (buildingType) => () => {
35
     const current = (value || []).filter((it) => it.buildingTypeId === buildingType.buildingTypeId)[0] || {buildingTypeId: buildingType.buildingTypeId}
35
     const current = (value || []).filter((it) => it.buildingTypeId === buildingType.buildingTypeId)[0] || {buildingTypeId: buildingType.buildingTypeId}
36
-    console.log('-------------->', current)
37
     setCurRow(current)
36
     setCurRow(current)
38
     setBuildingType(buildingType)
37
     setBuildingType(buildingType)
39
     setShowDrawer(true)
38
     setShowDrawer(true)

+ 6
- 0
src/pages/building/Edit/index.jsx Voir le fichier

9
 import Channel from './Channel'
9
 import Channel from './Channel'
10
 import News from './News'
10
 import News from './News'
11
 import SpecialRoom from './SpecialRoom'
11
 import SpecialRoom from './SpecialRoom'
12
+import OnSiteService from './OnSiteService'
12
 import styles from './style.less'
13
 import styles from './style.less'
13
 
14
 
14
 const { TabPane } = Tabs
15
 const { TabPane } = Tabs
54
             <Channel {...props} />
55
             <Channel {...props} />
55
           </div>
56
           </div>
56
         </TabPane>
57
         </TabPane>
58
+        <TabPane tab="驻场设置" key="10">
59
+          <div className={styles['tab-wrapper']} style={{maxWidth: '1200px'}}>
60
+            <OnSiteService {...props} />
61
+          </div>
62
+        </TabPane>
57
         <TabPane tab="海报图片" key="5">
63
         <TabPane tab="海报图片" key="5">
58
           <Poster target={target} {...props} />
64
           <Poster target={target} {...props} />
59
         </TabPane>
65
         </TabPane>

+ 17
- 0
src/pages/building/Edit/style.less Voir le fichier

13
   background: #fff;
13
   background: #fff;
14
   text-align: right;
14
   text-align: right;
15
 }
15
 }
16
+
17
+.on-site-box {
18
+  .market-code {
19
+    display: flex;
20
+    margin-bottom: 2em;
21
+
22
+    .code-label {
23
+      flex: none;
24
+      line-height: 2em;
25
+    }
26
+
27
+    .code-input {
28
+      margin-left: 1em;
29
+      flex: auto;
30
+    }
31
+  }
32
+}