feats

src/pages/building/Edit/Basic/form.js

+import { fetch, apis } from '@/utils/request';
+import moment from 'moment';
+
 export function initForm(form, data) {
   if (!data) return;
 
 
   form.setFieldsValue(formData);
 }
+
+export function saveData(formData) {
+  const {
+    arrounds,
+    pois,
+    receivedDate,
+    avatarImage,
+    listImage,
+    videoUrl,
+    tag,
+    videoImage,
+    ...data
+  } = formData
+  // 项目周边
+  const arroundsData = Object.keys(arrounds).reduce((acc, key) => {
+    return {
+      ...acc,
+      [key]: arrounds[key].map(it => it.name).join(',')
+    }
+  }, {})
+  Object.assign(data, arroundsData)
+
+  // 项目地图周边
+  data.mapJson = Object.keys(pois).map((key) => {
+    return {
+      key,
+      data: JSON.stringify(pois[key]),
+    }
+  })
+  //
+  data.receivedDate = moment(receivedDate, 'yyyy-MM-dd HH:mm:ss')
+  // 项目主图
+  data.img = avatarImage.map((item, index) => ({ imgType: 'banner', url: item, orderNo: index + 1 }))
+  // 列表图
+  data.listImg = listImage ? [{ imgType: 'list', url: listImage, orderNo: 1 }] : []
+  //
+  data.videoUrl = videoUrl ? videoUrl[0] : undefined
+  //
+  data.videoImage = videoImage ? [{ imgType: 'videoImage', url: data.videoImage, orderNo: 1 }] : []
+  // 项目标签
+  data.tag = tag.map((item, _) => ({ tagName: item }))
+
+  const request = fetch(data.buildingId ? apis.building.updateBuilding : apis.building.addBuilding)
+  return request({ data })
+}

src/pages/building/Edit/Basic/index.jsx

 import useArrounds from './useArrounds'
 import usePois from './usePois'
 import useQuery from './useQuery'
-import { initForm } from './form'
+import useBrands from './useBrands'
+import { initForm, saveData } from './form'
 
 const fullWidth= { width: '100%' }
 const Item = Form.Item
   const { id } = query;
 
   const [ loading, setLoading ] = useState({ form: false, arround: false })
+  const [brands] = useBrands()
   const [
     arrounds,
     initArrounds,
   ] = usePois()
 
   const updateLoading = (key) => (state) => setLoading({ ...loading, [key]: state })
+  const updateFormLoading = updateLoading('form')
 
-  useQuery(id, updateLoading('form'), (res) => {
+  useQuery(id, updateFormLoading, (res) => {
     initPois(res.mapJson)
     initArrounds(res)
     initForm(form, res)
     })
   }
 
+  function handleSubmit(e) {
+    e.preventDefault();
+    props.form.validateFieldsAndScroll((err, values) => {
+      if (!err) {
+        updateFormLoading(true)
+        saveData({
+          ...values,
+          pois,
+          arrounds,
+        }).then(() => {
+          updateFormLoading(false)
+          notification.success({ message: '保存项目基础信息成功' })
+        }).catch((err) => {
+          console.error(err)
+          updateFormLoading(false)
+          notification.error({ message: err.message || err })
+        })
+      }
+    });
+  }
+
   return (
     <Spin spinning={loading.form}>
-      <Form {...formItemLayout}>
+      <Form {...formItemLayout} onSubmit={handleSubmit}>
         <Item label="项目Id" style={{ display: 'none' }}>
           {getFieldDecorator('buildingId')(<Input disabled />)}
         </Item>
               type="Transport"
               pois={pois.Transport}
               tags={arrounds.buildingTransport}
-              onChange={(e) => updateArrounds('buildingTransport', e)}
+              onChange={updateArrounds}
               onDelete={deleteArround}
-              onPoiDelete={(poi) => deletePoi('Transport', poi)}
+              onPoiDelete={deletePoi}
             />
           </Form.Item>
           <Form.Item label="周边商业" >
               type="Mall"
               pois={pois.Mall}
               tags={arrounds.buildingMall}
-              onChange={(e) => updateArrounds('buildingMall', e)}
+              onChange={updateArrounds}
               onDelete={deleteArround}
-              onPoiDelete={(poi) => deletePoi('Mall', poi)}
+              onPoiDelete={deletePoi}
             />
           </Form.Item>
           <Form.Item label="周边学校" >
               type="Edu"
               pois={pois.Edu}
               tags={arrounds.buildingEdu}
-              onChange={(e) => updateArrounds('buildingEdu', e)}
+              onChange={updateArrounds}
               onDelete={deleteArround}
-              onPoiDelete={(poi) => deletePoi('Edu', poi)}
+              onPoiDelete={deletePoi}
             />
           </Form.Item>
           <Form.Item label="周边医院" >
               type="Hospital"
               pois={pois.Hospital}
               tags={arrounds.buildingHospital}
-              onChange={(e) => updateArrounds('buildingHospital', e)}
+              onChange={updateArrounds}
               onDelete={deleteArround}
-              onPoiDelete={(poi) => deletePoi('Hospital', poi)}
+              onPoiDelete={deletePoi}
             />
           </Form.Item>
           <Form.Item label="周边银行" >
               type="Bank"
               pois={pois.Bank}
               tags={arrounds.buildingBank}
-              onChange={(e) => updateArrounds('buildingBank', e)}
+              onChange={updateArrounds}
               onDelete={deleteArround}
-              onPoiDelete={(poi) => deletePoi('Bank', poi)}
+              onPoiDelete={deletePoi}
             />
           </Form.Item>
           <Form.Item label="周边餐饮" >
               type="Restaurant"
               pois={pois.Restaurant}
               tags={arrounds.buildingRestaurant}
-              onChange={(e) => updateArrounds('buildingRestaurant', e)}
+              onChange={updateArrounds}
               onDelete={deleteArround}
-              onPoiDelete={(poi) => deletePoi('Restaurant', poi)}
+              onPoiDelete={deletePoi}
             />
           </Form.Item>
         </Spin>
           </Form.Item>
         </FormGroupItem>
         <Form.Item label="品牌开发商" help="【品牌开发商】与【开发商】二选一">
-          {getFieldDecorator('brandId')(<Select style={fullWidth}></Select>)}
+          {getFieldDecorator('brandId')(
+            <Select style={fullWidth}>
+              {
+                brands.map((x) => (<Select.Option key={x.brandId} value={x.brandId}>{x.brandName}</Select.Option>))
+              }
+            </Select>
+          )}
         </Form.Item>
         <Form.Item label="开发商" >
           {getFieldDecorator('propertyDeveloper', {
   )
 })
 
-export default Form.create({ onValuesChange: console.log })(BuildingBasic)
+export default Form.create()(BuildingBasic)

src/pages/building/Edit/Basic/useArrounds.js

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

src/pages/building/Edit/Basic/useBrands.js

+import { useState, useEffect } from 'react';
+import { fetch, apis } from '@/utils/request';
+
+const fetchBrands = fetch(apis.brand.list)
+
+export default function useBrands() {
+  const [brands, setBrands] = useState([])
+
+  useEffect(() => {
+    const params = { pageSize: 500 }
+    fetchBrands({ params }).then((res) => {
+      const { records } = res
+      setBrands(records || [])
+    }).catch((err) => {
+      console.error(err)
+    })
+  }, [])
+
+  return [brands, setBrands]
+}

src/pages/building/Edit/OnSiteService.jsx

+import React from 'react'
+import { Input, Popconfirm, Table } from 'antd'
+import Styles from './style.less'
+
+export default (props) => {
+  const handleCancel = (row) => {}
+
+  const columns = [
+    {
+      title: '头像',
+      dataIndex: 'avatar',
+      key: 'avatar',
+      render: t => <img src={t} alt="" style={{ width: '96px', height: '96px', borderRadius: '4px' }} />,
+    },
+    {
+      title: '昵称',
+      dataIndex: 'nickname',
+      key: 'nickname',
+    },
+    {
+      title: '手机',
+      dataIndex: 'phone',
+      key: 'phone',
+    },
+    {
+      title: '性别',
+      dataIndex: 'sex',
+      key: 'sex',
+    },
+    {
+      title: '操作',
+      key: 'action',
+      render: (_, row) => (
+        <Popconfirm
+          title="确认执行取消操作?"
+          onConfirm={() => handleCancel(row)}
+        >
+          <a href="#" style={{color: 'red'}}>取消绑定</a>
+        </Popconfirm>
+      )
+    },
+  ]
+
+  return (
+    <div className={Styles['on-site-box']}>
+      <div className={Styles['market-code']}>
+        <div className={Styles['code-label']}>驻场编码: </div>
+        <div className={Styles['code-input']}><Input value={123} style={{ width: '30%' }} /></div>
+      </div>
+
+      <Table columns={columns} bordered pagination={false} />
+    </div>
+  )
+}

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

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

src/pages/building/Edit/index.jsx

 import Channel from './Channel'
 import News from './News'
 import SpecialRoom from './SpecialRoom'
+import OnSiteService from './OnSiteService'
 import styles from './style.less'
 
 const { TabPane } = Tabs
             <Channel {...props} />
           </div>
         </TabPane>
+        <TabPane tab="驻场设置" key="10">
+          <div className={styles['tab-wrapper']} style={{maxWidth: '1200px'}}>
+            <OnSiteService {...props} />
+          </div>
+        </TabPane>
         <TabPane tab="海报图片" key="5">
           <Poster target={target} {...props} />
         </TabPane>

src/pages/building/Edit/style.less

   background: #fff;
   text-align: right;
 }
+
+.on-site-box {
+  .market-code {
+    display: flex;
+    margin-bottom: 2em;
+
+    .code-label {
+      flex: none;
+      line-height: 2em;
+    }
+
+    .code-input {
+      margin-left: 1em;
+      flex: auto;
+    }
+  }
+}