项目类型

config/config.js

@@ -122,6 +122,11 @@ export default {
                   name: '项目列表',
                   component: './building/list/index',
                 },
+                {
+                  path: '/building/type',
+                  name: '项目类型',
+                  component: './building/type/index',
+                },
               ],
             },
             // {

src/models/building.js

@@ -0,0 +1,22 @@
+import { getList } from '@/services/building';
+
+const buildingModel = {
+  namespaced: 'building',
+  state: {
+
+  },
+  effect: {
+    *fetch(_, { call, put }) {
+      const response = yield call(getList);
+      yield put({
+        type: 'get',
+        payload: response,
+      });
+    },
+  },
+  reducers: {
+
+  },
+}
+
+export default buildingModel

src/pages/building/list/index.jsx

@@ -1,16 +1,62 @@
 import React from 'react';
 import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination } from 'antd';
+import { connect } from 'dva';
 import Styles from './style.less';
 
+
 const { Option } = Select;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const { Meta } = Card;
 
+// 假数据
+const tempData = [
+  {
+    code: 'S101',
+    name: '城开花园',
+    price: '111',
+    address: '顾戴路1801弄',
+    status: '1', // 已发布
+    createDate: '2019-08-28 17',
+  },
+  {
+    code: 'S102',
+    name: '星河天街',
+    price: '111',
+    address: '长征路1801弄',
+    status: '1', // 已发布
+    createDate: '2019-08-29 17',
+  },
+  {
+    code: 'S103',
+    name: '喜洋洋别墅',
+    price: '111',
+    address: '阳杨路1801弄',
+    status: '1', // 已发布
+    createDate: '2019-08-29 17',
+  },
+  {
+    code: 'S104',
+    name: '武大郎洋房',
+    price: '111',
+    address: '太郎路1801弄',
+    status: '1', // 已发布
+    createDate: '2019-08-29 17',
+  },
+]
+
+
+// 网路数据请求
+connect(({ getList, loading }) => ({
+  getList,
+  submitting: loading.effects['building/getList'],
+}))
 
 // 提交事件
 function handleSubmit(e, props) {
   e.preventDefault();
   props.form.validateFields((err, values) => {
     if (!err) {
+      // eslint-disable-next-line no-console
       console.log('提交数据: ', values)
     }
   });
@@ -18,23 +64,86 @@ function handleSubmit(e, props) {
 
 // Change 事件
 function handleSelectChange(props) {
+  // eslint-disable-next-line no-console
   console.log(props)
 }
 
 // 分页
 function onChange(pageNumber) {
+  // eslint-disable-next-line no-console
   console.log('Page: ', pageNumber);
 }
 
+/**
+ *卡片
+ *
+ * @returns
+ */
+function CartBody(props) {
+  const { data } = props
+
+  return (
+          <Card
+            hoverable
+            style={{ minWidth: '400px', borderRadius: '12px', margin: '10px', boxShadow: '0px 0px 16px 2px rgba(0,0,0,0.12)' }}
+            cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" style={{ borderRadius: '12px 12px 0 0', width: '100%', height: '14vw' }}></img>}
+            bodyStyle={{ padding: '10px 20px' }}
+          >
+            <p className={Styles.cardText}>
+              <span className={Styles.title}>楼盘编号</span>
+              <span >：{ data.code }</span>
+              <span className={Styles.ediText}>
+                编辑
+                <Icon type="form" style={{ color: '#C0C4CC', marginLeft: '10px' }} />
+              </span>
+            </p>
+            <p className={Styles.cardText}>
+              <span className={Styles.title}>楼盘名称</span>
+              <span >：{ data.name }</span>
+            </p>
+            <p className={Styles.cardItem}>
+              <span className={Styles.title}>均价</span>
+              <span >
+                ：约<span style={{ color: '#FF0707', fontSize: '20px' }}> { data.price } </span>元/m
+        </span>
+            </p>
+            <p className={Styles.cardItem}>
+              <span className={Styles.title}>项目地址</span>
+              <span >：{ data.address }</span>
+            </p>
+            <p className={Styles.cardItem}>
+              <span className={Styles.title}>发布状态</span>
+              <span >：{ data.status === '1' ? '已发布' : '未发布' }</span>
+            </p>
+            <p className={Styles.cardItem}>
+              <span className={Styles.title}>录入时间</span>
+              <span >：2019-08-28 17</span>
+            </p>
+            <p style={{ margin: '15px 0', position: 'relative', fontSize: '18px' }}>
+              <span style={{ color: '#1990FF' }}>
+                取消发布
+                <Icon type="close-circle" style={{ color: '#C0C4CC', marginLeft: '8px' }} />
+              </span>
+              <span style={{
+                color: '#FF4A4A', position: 'absolute', right: '0',
+              }} >
+                删除
+                <Icon type="rest" style={{ color: '#C0C4CC', marginLeft: '8px' }} />
+              </span>
+            </p>
+          </Card>
+  )
+}
+
 /**
  *
  *
  * @param {*} props
  * @returns
  */
-function header(props) {
+function body(props) {
   const { getFieldDecorator } = props.form
-
+  connect()
   return (
     <>
       <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
@@ -104,58 +213,13 @@ function header(props) {
 
       {/* 卡片内容，显示楼盘项目  */}
       <Row style={{ padding: ' 0 10px' }}>
-        <Col span={8}>
-          <Card
-            hoverable
-            style={{ minWidth: '400px', borderRadius: '12px',margin:'10px', boxShadow: '0px 0px 16px 2px rgba(0,0,0,0.12)', }}
-            cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" style={{ borderRadius: '12px 12px 0 0', width: '100%', height: '14vw' }}></img>}
-            bodyStyle={{ padding: '10px 20px' }}
-          >
-            <p className={Styles.cardText}>
-              <span className={Styles.title}>楼盘编号</span>
-              <span >：S101</span>
-              <span className={Styles.ediText}>
-                编辑
-                <Icon type="form" style={{ color: '#C0C4CC', marginLeft: '10px' }} />
-              </span>
-            </p>
-            <p className={Styles.cardText}>
-              <span className={Styles.title}>楼盘名称</span>
-              <span >：城开花园</span>
-            </p>
-            <p className={Styles.cardItem}>
-              <span className={Styles.title}>均价</span>
-              <span >
-                ：约<span style={{ color: '#FF0707', fontSize: '20px' }}> 111 </span>元/m
-        </span>
-            </p>
-            <p className={Styles.cardItem}>
-              <span className={Styles.title}>项目地址</span>
-              <span >：顾戴路1801弄</span>
-            </p>
-            <p className={Styles.cardItem}>
-              <span className={Styles.title}>发布状态</span>
-              <span >：已发布</span>
-            </p>
-            <p className={Styles.cardItem}>
-              <span className={Styles.title}>录入时间</span>
-              <span >：2019-08-28 17</span>
-            </p>
-            <p style={{ margin: '15px 0', position: 'relative', fontSize: '18px' }}>
-              <span style={{ color: '#1990FF' }}>
-                取消发布
-                <Icon type="close-circle" style={{ color: '#C0C4CC', marginLeft: '8px' }} />
-              </span>
-              <span style={{
-                color: '#FF4A4A', position: 'absolute',
-                right: '0'
-              }} >
-                删除
-                <Icon type="rest" style={{ color: '#C0C4CC', marginLeft: '8px' }} />
-              </span>
-            </p>
-          </Card>
-        </Col>
+        {
+          tempData.map((item, index) => (
+              <Col span={8}>
+                <CartBody data={item} />
+              </Col>
+            ))
+        }
       </Row>
       {/* 分页 */}
       <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
@@ -164,6 +228,6 @@ function header(props) {
     </>
   );
 }
-const WrappedHeader = Form.create({ name: 'header' })(header);
+const WrappedBody = Form.create({ name: 'body' })(body);
 
-export default WrappedHeader
+export default WrappedBody

src/pages/building/type/index.jsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { Button, Table, Pagination } from 'antd'
+import Styles from './style.less'
+
+const dataSource = [
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+];
+
+const columns = [
+  {
+    title: '姓名',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: '年龄',
+    dataIndex: 'age',
+    key: 'age',
+  },
+  {
+    title: '住址',
+    dataIndex: 'address',
+    key: 'address',
+  },
+];
+
+// 分页
+function onChange(pageNumber, set) {
+  // eslint-disable-next-line no-console
+  console.log('Page: ', pageNumber);
+  const data = [
+    {
+      key: '1',
+      name: '一号',
+      age: 32,
+      address: '西湖区湖底公园1号',
+    },
+    {
+      key: '2',
+      name: '二号',
+      age: 42,
+      address: '西湖区湖底公园1号',
+    },
+  ];
+
+  set(data)
+}
+
+function body() {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [data, setData] = useState(dataSource || [])
+
+  return (
+    <>
+      <Button type="primary" className={Styles.addButton}>新增类型</Button>
+      <Table dataSource={data} columns={columns} pagination={false}/>
+      {/* 分页 */}
+      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
+        <Pagination showQuickJumper defaultCurrent={1} total={500} onChange={e => onChange(e, setData)} />
+      </div>
+    </>
+  )
+}
+
+export default body

src/pages/building/type/style.css

@@ -0,0 +1,47 @@
+.SubmitButton {
+  background: #3a91d5;
+  border-radius: 7px;
+  border: 0px;
+}
+.SelectFrom {
+  width: 180px;
+  background: #ffffff;
+  border-radius: 7px;
+  border: 1px solid #dbdbdb;
+}
+.addButton {
+  background: #50be00;
+  border-radius: 4px;
+  border: 0px;
+  margin: 10px 0px;
+}
+.cardText {
+  font-size: 18px;
+  color: #333;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.cardItem {
+  font-size: 18px;
+  font-weight: 400;
+  color: #666;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+}
+.ediText {
+  font-size: 18px;
+  color: #ff925c;
+  line-height: 24px;
+  position: absolute;
+  right: 0;
+}
+.title {
+  display: inline-block;
+  width: 84px;
+  justify-content: space-between;
+  text-align: justify;
+  text-align-last: justify;
+}

src/pages/building/type/style.less

@@ -0,0 +1,48 @@
+.SubmitButton {
+  background: #3a91d5;
+  border-radius: 7px;
+  border: 0px;
+}
+.SelectFrom {
+  width: 180px;
+  background: #ffffff;
+  border-radius: 7px;
+  border: 1px solid #dbdbdb;
+}
+.addButton {
+  background: #50be00;
+  border-radius: 4px;
+  border: 0px;
+  margin: 10px 0px;
+}
+.cardText {
+  font-size: 18px;
+  color: #333;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+  position: relative;
+
+}
+.cardItem{
+  font-size: 18px;
+  font-weight: 400;
+  color: #666;
+  line-height: 24px;
+  display: flex;
+  align-items: center;  
+}
+.ediText {
+  font-size: 18px;
+  color: #ff925c;
+  line-height: 24px;
+  position: absolute;
+  right: 0;
+}
+.title{
+  display: inline-block;
+  width: 84px;
+  justify-content: space-between;
+  text-align: justify;
+  text-align-last:justify
+}

src/pages/building/type/style.wxss

@@ -0,0 +1,47 @@
+.SubmitButton {
+  background: #3a91d5;
+  border-radius: 7px;
+  border: 0px;
+}
+.SelectFrom {
+  width: 180px;
+  background: #ffffff;
+  border-radius: 7px;
+  border: 1px solid #dbdbdb;
+}
+.addButton {
+  background: #50be00;
+  border-radius: 4px;
+  border: 0px;
+  margin: 10px 0px;
+}
+.cardText {
+  font-size: 18px;
+  color: #333;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.cardItem {
+  font-size: 18px;
+  font-weight: 400;
+  color: #666;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+}
+.ediText {
+  font-size: 18px;
+  color: #ff925c;
+  line-height: 24px;
+  position: absolute;
+  right: 0;
+}
+.title {
+  display: inline-block;
+  width: 84px;
+  justify-content: space-between;
+  text-align: justify;
+  text-align-last: justify;
+}

src/services/building.js

@@ -0,0 +1,12 @@
+import request from '@/utils/request';
+
+/**
+ * 项目
+ */
+
+/**
+ * 获取列表
+ */
+export async function getList() {
+  return request('/api/admin/buildinglist')
+}