feats

config/routes.js

@@ -56,6 +56,12 @@ export default [
                 name: '项目列表',
                 component: './building/List',
               },
+              {
+                path: '/building/add',
+                name: '项目维护',
+                component: './building/Edit',
+                hideInMenu: true,
+              },
             ],
           },
           {

src/components/TableList/index.jsx

@@ -12,7 +12,7 @@ export default React.forwardRef((props, ref) => {
   const [pageTotal, setPageTotal] = useState(0)
   const [pageConfig, setPageConfig] = useState({ current: 1, pageSize: 10 })
 
-  const { api, params = {}, onPageChange, ...tableProps } = props
+  const { api, params, onPageChange, ...tableProps } = props
 
   // 更新分页
   const updatePage = useCallback(
@@ -36,7 +36,7 @@ export default React.forwardRef((props, ref) => {
     () => {
       setLoading(true)
       const queryParams = {
-        ...params,
+        ...params || {},
         pageNum: pageConfig.current,
         pageSize: pageConfig.pageSize,
       }

src/pages/building/Edit/Basic.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { Form, Input } from 'antd'
+import BuildingType from './components/BuildingTypeSelect'
+import { formItemLayout } from './utils'
+
+const Item = Form.Item
+
+const BuildingBasic = (props) => {
+  const { form } = props;
+  const { getFieldDecorator } = form;
+
+  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>
+  )
+}
+
+export default Form.create()(BuildingBasic)

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

@@ -0,0 +1,50 @@
+import React from 'react'
+import { Button, Card, Form, Radio, Input, Select } from 'antd'
+import { formItemLayout } from '../utils'
+
+const Item = Form.Item
+
+const BuildingTypeDetail = (props) => {
+  const { buildingType, form } = props
+  const { getFieldDecorator } = form
+
+  return (
+    <Card size="small" title={buildingType?.buildingTypeName} extra={<Button type="link" icon="close" />}>
+      <Form>
+        <Item label="价格类型" {...formItemLayout}>
+          {getFieldDecorator('priceType')(
+            <Radio.Group>
+              <Radio value="average">均价</Radio>
+              <Radio value="total">总价</Radio>
+              <Radio value="lease">租赁价</Radio>
+            </Radio.Group>
+          )}
+        </Item>
+        <Item label="价格区间" help='最高价与最低价一致时，只展示一个' {...formItemLayout}>
+          <span>{getFieldDecorator('startPrice')(<Input type="number" placeholder="最低价" style={{width: '120px'}} maxLength="9" />)}</span>
+          <span>-</span>
+          <span>{getFieldDecorator('endPrice')(<Input type="number" placeholder="最高价" style={{width: '120px'}} maxLength="9" />)}</span>
+          {/* <span>{this.props.type.priceType === "average" ? "元/㎡" : this.props.type.priceType === "lease" ? "元/㎡/天" : "万元/套"}</span> */}
+        </Item>
+        <Item label="销售状态" {...formItemLayout}>
+          {getFieldDecorator('marketStatus')(
+            <Select placeholder="销售状态">
+              <Option value="待售">待售</Option>
+              <Option value="在售">在售</Option>
+              <Option value="售罄">售罄</Option>
+              <Option value="在租">在租</Option>
+            </Select>,
+          )}
+        </Item>
+        <Item label="装修标准" {...formItemLayout}>
+          {getFieldDecorator('decoration')(<Input />)}
+        </Item>
+        <Item label="产权年限" {...formItemLayout}>
+          {getFieldDecorator('rightsYear')(<Input />)}
+        </Item>
+      </Form>
+    </Card>
+  )
+}
+
+export default Form.create()(BuildingTypeDetail)

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

@@ -0,0 +1,19 @@
+import React, { useState, useEffect } from 'react'
+import { Checkbox, Card, notification } from 'antd'
+import request, { apis } from '@/utils/request'
+import CheckBuildingType from './CheckBuildingType'
+import BuildingTypeDetail from './BuildingTypeDetail'
+
+export default (props) => {
+  const [checkedType, setCheckedType] = useState([])
+
+  useEffect(() => {
+  }, [])
+
+  return (
+    <div>
+      <CheckBuildingType />
+      <BuildingTypeDetail />
+    </div>
+  )
+}

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

@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react'
+import { Checkbox, Card, notification } from 'antd'
+import request, { apis } from '@/utils/request'
+
+const gridStyle = {
+  width: '25%',
+  // textAlign: 'center',
+};
+
+export default (props) => {
+  const [checkedType, setCheckedType] = useState([])
+  const [typeList, setTypeList] = useState([])
+
+  useEffect(() => {
+    // 请求类型列表
+    request({ ...apis.buildingType.getList, params: { pageNum: 1, pageSize: 999 } }).then(res => {
+      setTypeList(res.records)
+    }).catch((err) => {
+      notification.error({ message: err.message })
+    })
+  }, [])
+
+  return (
+    <Checkbox.Group style={{ width: '100%' }}>
+      <Card bordered={false}>
+        {
+          typeList.map((it) => (
+            <Card.Grid style={gridStyle} key={it.buildingTypeId} hoverable={false}>
+              <Checkbox value={it.buildingTypeId}>{it.buildingTypeName}</Checkbox>
+            </Card.Grid>
+          ))
+        }
+      </Card>
+    </Checkbox.Group>
+  )
+}

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: 900}}>
+            <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,4 @@
+
+.tab-wrapper {
+  padding-top: 1em;
+}

src/pages/building/Edit/utils.js

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

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,
             },