feat: 小区管理

src/layout/index.scss

@@ -14,4 +14,12 @@
   text-align: left;
   box-sizing: border-box;
   padding: 0 0 12px 8px;
+}
+.custom-card-title {
+  text-align: left;
+}
+.custom-form-title {
+  font-size: 22px;
+  text-align: left;
+  margin-bottom: 24px;
 }

src/layout/index.tsx

@@ -11,7 +11,7 @@ const { Header, Content, Sider } = Layout
 // 路由渲染
 const reallyRoutes = routes.map(item => item.children ? item.children : item).flat()
 
-const AdminLayout: any = (props) => {
+const AdminLayout: any = (props: any) => {
   const [currentKeys, setCurrentKeys]: any = useState(["/admin/role"])
 
   const switchRoute = route => {
@@ -63,7 +63,7 @@ const AdminLayout: any = (props) => {
         </Header>
         <Content className='layout-content'>
           {
-            reallyRoutes.map(route =>
+            reallyRoutes.map((route: any) =>
                 <Route
                   exact
                   path={route.path}

src/router/config.tsx

@@ -3,6 +3,7 @@ import Login2 from '../views/User/Login'
 
 import React, { lazy, Suspense } from 'react'
 const GardenList = lazy(() => import('../views/Garden/index'))
+const CreateGarden = lazy(() => import('../views/Garden/create'))
 const CompanyInfo = lazy(() => import('../views/Settings/info'))
 const Log = lazy(() => import('../views/Settings/log'))
 
@@ -24,8 +25,13 @@ export const routes: any = [
     title: '小区管理',
     path: '/admin/garden',
     exact: true,
-    component: Wrapper(GardenList),
-    hideInMenu: false
+    component: Wrapper(GardenList)
+  },
+  {
+    title: '创建小区',
+    path: '/admin/garden/create',
+    component: Wrapper(CreateGarden),
+    hideInMenu: true
   },
   {
     title: '系统设置',

src/views/Garden/create.tsx

@@ -0,0 +1,112 @@
+import React, { FC } from 'react'
+import './index.scss'
+import { GetProvinceCityArea } from '../../services/api'
+import { Form, Card, Divider, Select, Input, Button } from 'antd'
+
+const GardenCreate: FC = () => {
+  const [areaData, setAreaData] = React.useState({
+    province_list: [],
+    city_list: [],
+    area_list: []
+  })
+  // cache
+  const [areaDataCache, setAreaDataCache] = React.useState({
+    province_list: [],
+    city_list: [],
+    area_list: []
+  })
+
+  React.useEffect(() => {
+    GetProvinceCityArea({}).then(res => {
+      setAreaDataCache(res.data)
+      setAreaData(pre => ({
+        ...pre,
+        province_list: res.data.province_list
+      }))
+    })
+  }, [])
+
+  return (
+    <Card>
+      <div className='custom-card-title'>小区管理/新增小区</div>
+      <Divider/>
+      <Form
+        labelCol={{ span: 2 }}
+        wrapperCol={{ span: 12 }}
+        initialValues={{ remember: true }}
+        labelAlign={'right'}
+      >
+        <div className='custom-form-title'>基本信息</div>
+        <Form.Item label='城市' required className='selector-line'>
+          <Select
+            placeholder='省份'
+            style={{ width: 200 }}
+            onChange={
+              (value) => {
+                setAreaData(pre => ({
+                  ...pre,
+                  city_list: areaDataCache.city_list.filter((item: any) => item.province_code === value)
+                }))
+              }
+            }>
+            {
+              areaData.province_list.map((province: any) => {
+                return <Select.Option value={province.code} key={province.code}>{province.name}</Select.Option>
+              })
+            }
+          </Select>
+          <Select
+            placeholder='城市'
+            style={{ width: 200 }}
+            onChange={
+              (value) => {
+                setAreaData(pre => ({
+                  ...pre,
+                  area_list: areaDataCache.area_list.filter((item: any) => item.city_code === value)
+                }))
+              }
+            }
+          >
+            {
+              areaData.city_list.map((item: any) => {
+                return <Select.Option value={item.code} key={item.code}>{item.name}</Select.Option>
+              })
+            }
+          </Select>
+          <Select placeholder='区域' style={{ width: 200 }}>
+            {
+              areaData.area_list.map((item: any) => {
+                return <Select.Option value={item.code} key={item.code}>{item.name}</Select.Option>
+              })
+            }
+          </Select>
+        </Form.Item>
+        <Form.Item label='街道' className='selector-line'>
+          <Select placeholder='街道'>
+            <Select.Option value={1}>街道1</Select.Option>
+          </Select>
+          <Select placeholder='社区'>
+            <Select.Option value={1}>街道1</Select.Option>
+          </Select>
+        </Form.Item>
+        <Form.Item label='小区名称' required>
+          <Input placeholder='单行输入' />
+        </Form.Item>
+        <Form.Item label='地址' required>
+          <Input placeholder='单行输入' />
+        </Form.Item>
+        <Form.Item label='物业联系人'>
+          <Input placeholder='单行输入' />
+        </Form.Item>
+        <Form.Item label='物业电话'>
+          <Input placeholder='单行输入' />
+        </Form.Item>
+        <Form.Item>
+          <Button type='primary'>创建</Button>
+        </Form.Item>
+      </Form>
+    </Card>
+  )
+}
+
+export default GardenCreate

src/views/Garden/index.scss

@@ -0,0 +1,6 @@
+.selector-line {
+  .ant-select {
+    margin-right: 14px;
+    width: 220px;
+  }
+}

src/views/Garden/index.tsx

@@ -1,46 +1,64 @@
 import * as React from 'react'
 import type { ActionType } from '@ant-design/pro-table'
 import ProTable from '@ant-design/pro-table'
-import { Button, Modal, Form, Select, Card } from 'antd'
-import { GetGardenList, GetProvinceCityArea } from '../../services/api'
+import { Button, Modal, Form, Select } from 'antd'
+import { PlusOutlined } from '@ant-design/icons'
+import { withRouter } from 'react-router-dom'
 
 const GardenList: React.FC = (props: any) => {
   // @ts-ignore
   const columns: any = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      search: false
+    },
     {
       title: '小区名称',
       dataIndex: 'name'
     },
     {
-      title: '小区地址',
-      dataIndex: 'name'
+      title: '城市',
+      dataIndex: 'name',
+      search: false
     },
     {
-      title: '所属物业公司',
-      dataIndex: 'id',
-      valueEnum: {
-        0: {
-          text: '测试',
-          status: 'Default',
-        }
-      }
+      title: '街道社区',
+      dataIndex: 'name',
+      search: false
+    },
+    {
+      title: '小区详细地址',
+      dataIndex: 'name',
+      search: false,
+    },
+    {
+      title: '联系人',
+      dataIndex: 'name',
+      search: false,
     },
     {
       title: '物业联系人',
-      dataIndex: 'name'
+      dataIndex: 'name',
+      search: false,
     },
     {
-      title: '物业联系人手机号',
+      title: '联系电话',
       dataIndex: 'company_phone',
       search: false,
     },
     {
-      title: '社区',
-      dataIndex: 'id'
+      title: '管理入口',
+      dataIndex: 'company_phone',
+      search: false,
+      render: (_, record) => [
+        <Button type='link'>管理入口</Button>
+      ]
     },
     {
-      title: '街道',
-      dataIndex: 'id'
+      title: '创建时间',
+      dataIndex: 'company_phone',
+      search: false,
     },
     {
       title: '操作',
@@ -49,7 +67,9 @@ const GardenList: React.FC = (props: any) => {
       render: (_, row, index, action) => [
         <Button type='link' onClick={() => {
           setState(pre => ({ ...pre, visible: true }))
-        }}>修改所属物业公司</Button>
+        }}>修改</Button>, <Button type='link' onClick={() => {
+          setState(pre => ({ ...pre, visible: true }))
+        }}>删除</Button>
       ]
     }
   ]
@@ -57,76 +77,10 @@ const GardenList: React.FC = (props: any) => {
     visible: false,
     examineVisible: false
   })
-  const [areaData, setAreaData] = React.useState({
-    province_list: [],
-    city_list: [],
-    area_list: []
-  })
-  // cache
-  const [areaDataCache, setAreaDataCache] = React.useState({
-    province_list: [],
-    city_list: [],
-    area_list: []
-  })
-
-  React.useEffect(() => {
-    GetProvinceCityArea({}).then(res => {
-      setAreaDataCache(res.data)
-      setAreaData(pre => ({
-        ...pre,
-        province_list: res.data.province_list
-      }))
-      console.log(areaDataCache.city_list)
-    })
-  }, [])
 
   const actionRef = React.useRef<ActionType>();
   return (
     <React.Fragment>
-      <Card>
-        <Select
-          placeholder='省份'
-          style={{ width: 200 }}
-          onChange={
-            (value) => {
-              setAreaData(pre => ({
-                ...pre,
-                city_list: areaDataCache.city_list.filter((item: any) => item.province_code === value)
-              }))
-            }
-          }>
-          {
-            areaData.province_list.map((province: any) => {
-              return <Select.Option value={province.code} key={province.code}>{province.name}</Select.Option>
-            })
-          }
-        </Select>
-        <Select
-          placeholder='城市'
-          style={{ width: 200 }}
-          onChange={
-            (value) => {
-              setAreaData(pre => ({
-                ...pre,
-                area_list: areaDataCache.area_list.filter((item: any) => item.city_code === value)
-              }))
-            }
-          }
-        >
-          {
-            areaData.city_list.map((item: any) => {
-              return <Select.Option value={item.code} key={item.code}>{item.name}</Select.Option>
-            })
-          }
-        </Select>
-        <Select placeholder='区域' style={{ width: 200 }}>
-          {
-            areaData.area_list.map((item: any) => {
-              return <Select.Option value={item.code} key={item.code}>{item.name}</Select.Option>
-            })
-          }
-        </Select>
-      </Card>
       <ProTable
         headerTitle="小区列表"
         actionRef={actionRef}
@@ -139,7 +93,17 @@ const GardenList: React.FC = (props: any) => {
             success: true,
           });
         }}
-        toolBarRender={() => []}
+        toolBarRender={() => [
+          <Button
+            type="primary"
+            key="primary"
+            onClick={() => {
+              props.history.push('/admin/garden/create')
+            }}
+          >
+            <PlusOutlined /> 新建
+          </Button>
+        ]}
         columns={columns}
       />
       <Modal
@@ -162,4 +126,4 @@ const GardenList: React.FC = (props: any) => {
   )
 }
 
-export default GardenList
+export default withRouter(GardenList)