Merge branch 'master' of http://git.ycjcjy.com/marketing/pc-admin into master

config/routes.js

@@ -115,7 +115,12 @@ export default [
                 component: './customer/customerlist/publicCustomerDetail',
               },
 
-              
+              {
+                path: '/building/add',
+                name: '项目维护',
+                component: './building/Edit',
+                hideInMenu: true,
+              },
             ],
           },
           {

src/components/XForm/FileUpload.jsx

@@ -7,7 +7,7 @@ import { uploaderProps } from '../../utils/upload';
  * size  参数限制可以上传多少个文件
  * @param { value, size } props
  */
-function fileUpload(props) {
+function fileUpload(props, ref) {
 
   const { value } = props
   // console.log('fileUploadProps： ', props)
@@ -81,4 +81,4 @@ function fileUpload(props) {
   )
 }
 
-export default fileUpload
+export default React.forwardRef(fileUpload)

src/pages/building/Edit/Basic.jsx

@@ -0,0 +1,96 @@
+import React from 'react'
+import { Form, Input, notification, Select } from 'antd'
+import FileUpload from '@/components/XForm/FileUpload';
+import BuildingType from './components/BuildingTypeSelect'
+import { formItemLayout } from './utils'
+
+const Item = Form.Item
+
+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' }}>
+        {getFieldDecorator('buildingId')(<Input disabled />)}
+      </Item>
+      <Item label="楼盘编号" >
+        {getFieldDecorator('code', {
+          rules: [{ required: true, message: '请输入楼盘编号' }],
+        })(<Input />)}
+      </Item>
+      <Item label="楼盘名称" >
+        {getFieldDecorator('buildingName', {
+          rules: [{ required: true, message: '请输入楼盘名' }],
+        })(<Input />)}
+      </Item>
+      <Form.Item label="项目类型">
+        {getFieldDecorator('buildingProjectType', {
+          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({ onValuesChange: console.log })(BuildingBasic)

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

@@ -0,0 +1,96 @@
+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 { 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 (
+    <Drawer
+      width={600}
+      title={title} 
+      visible={visible}
+      onClose={onClose}
+      bodyStyle={{ paddingBottom: 80 }}
+      >
+      <Form>
+        <Item label="价格类型" {...formItemLayout}>
+          {getFieldDecorator('priceType')(
+            <Radio.Group onChange={({target}) => setPriceType(target.value)}>
+              <Radio value="average">均价</Radio>
+              <Radio value="total">总价</Radio>
+              <Radio value="lease">租赁价</Radio>
+            </Radio.Group>
+          )}
+        </Item>
+        <Item label="价格区间" help='最高价与最低价一致时，只展示一个' {...formItemLayout}>
+          <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="销售状态">
+              <Select.Option value="待售">待售</Select.Option>
+              <Select.Option value="在售">在售</Select.Option>
+              <Select.Option value="售罄">售罄</Select.Option>
+              <Select.Option value="在租">在租</Select.Option>
+            </Select>,
+          )}
+        </Item>
+        <Item label="装修标准" {...formItemLayout}>
+          {getFieldDecorator('decoration')(<Input />)}
+        </Item>
+        <Item label="产权年限" {...formItemLayout}>
+          {getFieldDecorator('rightsYear', {
+            initialValue: 70,
+          })(<Input />)}
+        </Item>
+      </Form>
+      <div className={styles['drawer-form-action']}>
+        <Button type="primary" onClick={handleSubmit}>确定</Button>
+      </div>
+    </Drawer>
+  )
+}
+
+export default Form.create()(BuildingTypeDetail)

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

@@ -0,0 +1,104 @@
+import React, { useState, useEffect } from 'react'
+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)
+    }
+
+    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 (
+    <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/index.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { Tabs, Card } from 'antd'
+import Basic from './Basic'
+import styles from './style.less'
+
+const { TabPane } = Tabs
+
+export default (props) => {
+  return (
+    <Card>
+      <Tabs defaultActiveKey="1">
+        <TabPane tab="基础信息" key="1">
+          <div className={styles['tab-wrapper']} style={{maxWidth: 1000}}>
+            <Basic />
+          </div>
+        </TabPane>
+        <TabPane tab="户型设置" key="2">
+          Content of Tab Pane 2
+        </TabPane>
+        <TabPane tab="项目相册" key="3">
+          Content of Tab Pane 3
+        </TabPane>
+        <TabPane tab="全景照片" key="4">
+          Content of Tab Pane 3
+        </TabPane>
+        <TabPane tab="海报图片" key="5">
+          Content of Tab Pane 3
+        </TabPane>
+        <TabPane tab="分享设置" key="6">
+          Content of Tab Pane 3
+        </TabPane>
+        <TabPane tab="渠道设置" key="7">
+          Content of Tab Pane 3
+        </TabPane>
+      </Tabs>
+    </Card>
+  )
+}

src/pages/building/Edit/style.less

@@ -0,0 +1,15 @@
+
+.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

@@ -0,0 +1,11 @@
+
+export const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 3 },
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 19 },
+  },
+}

src/pages/building/List/index.jsx

@@ -1,6 +1,7 @@
 import React, { useMemo, useRef, useCallback, useState } from 'react'
 // import { PageHeaderWrapper } from '@ant-design/pro-layout'
 import { Button, notification, Spin } from 'antd'
+import { router } from 'umi'
 import QueryTable from '@/components/QueryTable'
 import request from '@/utils/request'
 import apis from '@/services/apis'
@@ -45,7 +46,8 @@ export default (props) => {
   }, [page])
 
   const actionRender = () => {
-    return <Button type="primary" icon="plus">新增</Button>
+    const gotoAdd = () => router.push('/building/add')
+    return <Button type="primary" icon="plus" onClick={gotoAdd}>新增</Button>
   }
 
   return (

src/pages/building/List/tableColumns.js

@@ -34,7 +34,7 @@ export default ({page, onPublish, onDelete}) => [
         <Button
           type="link"
           onClick={() => router.push({
-            pathname: '/building/list/add',
+            pathname: '/building/add',
             query: {
               id: row.buildingId,
             },

src/utils/upload.js

@@ -1,7 +1,7 @@
 import { fetch, apis } from './request';
-// import mixStr from './mixStr';
+import mixStr from './mixStr';
 
-// const getToken = () => mixStr(window.localStorage.getItem('test-foobar'))
+const getToken = () => mixStr(window.localStorage.getItem('test-foobar'))
 
 const uploadImage = fetch(apis.image.upload)
 
@@ -13,13 +13,13 @@ const uploaderProps = {
   //   Authorization: `Bearer ${getToken()}`
   // },
   customRequest({
-    // action,
+    action,
     file,
-    // headers,
+    headers,
     onError,
-    // onProgress,
+    onProgress,
     onSuccess,
-    // withCredentials,
+    withCredentials,
   }) {
     const data = new FormData()
     data.append('file', file)