feat: 省市区

.idea/workspace.xml

@@ -2,11 +2,13 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="41f85978-32cc-4348-8909-ad50d32d8ad8" name="Default Changelist" comment="">
+      <change afterPath="$PROJECT_DIR$/src/views/Street/committee.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/views/Street/index.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/layout/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/layout/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/router/config.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/router/config.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/services/api.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/services/api.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/services/request.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/services/request.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/views/Role/list.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Role/list.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/views/User/Login.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/User/Login.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/views/Garden/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Garden/index.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -25,6 +27,9 @@
     </file-type-list>
   </component>
   <component name="ProjectId" id="1xWf2oHN0VlRnX80TjDtQKVIwVf" />
+  <component name="ProjectLevelVcsManager">
+    <ConfirmationsSetting value="2" id="Add" />
+  </component>
   <component name="ProjectViewState">
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
@@ -33,6 +38,7 @@
     <property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
     <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
     <property name="WebServerToolWindowFactoryState" value="false" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$/src/views/Street" />
     <property name="node.js.detected.package.eslint" value="true" />
     <property name="node.js.selected.package.eslint" value="(autodetect)" />
     <property name="nodejs_package_manager_path" value="yarn" />
@@ -40,6 +46,12 @@
     <property name="ts.external.directory.path" value="$PROJECT_DIR$/node_modules/typescript/lib" />
     <property name="vue.rearranger.settings.migration" value="true" />
   </component>
+  <component name="RecentsManager">
+    <key name="CopyFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/src/views/Street" />
+      <recent name="$PROJECT_DIR$/src/views" />
+    </key>
+  </component>
   <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
   <component name="TaskManager">
     <task active="true" id="Default" summary="Default task">
@@ -50,7 +62,7 @@
       <updated>1630475566284</updated>
       <workItem from="1630475569580" duration="15145000" />
       <workItem from="1630516260055" duration="133000" />
-      <workItem from="1630546140889" duration="9050000" />
+      <workItem from="1630546140889" duration="21731000" />
     </task>
     <servers />
   </component>

src/layout/index.tsx

@@ -27,7 +27,7 @@ const AdminLayout: any = (props) => {
       <Sider style={{ backgroundColor: 'white' }}>
         <Menu mode="inline" selectedKeys={currentKeys}>
         {
-          routes.map((route) => {
+          routes.filter(item => !item.hideInMenu).map((route) => {
             return (
               route.children
                 ?

src/router/config.tsx

@@ -6,6 +6,7 @@ import AddCompany from '../views/Examine/add-company'
 
 import React, { lazy, Suspense } from 'react'
 const GardenList = lazy(() => import('../views/Garden/index'))
+const StreetList = lazy(() => import('../views/Street/index'))
 
 const Wrapper = (Component) => (props) => {
   return (
@@ -48,7 +49,14 @@ export const routes: any = [
     path: '/admin/garden',
     exact: true,
     component: Wrapper(GardenList),
+    hideInMenu: false
   },
+  // {
+  //   title: '社区街道',
+  //   path: '/admin/street',
+  //   exact: true,
+  //   component: Wrapper(StreetList)
+  // },
   {
     title: '权限管理',
     path: '/admin/role',

src/services/api.ts

@@ -1,12 +1,22 @@
 import request from './request'
 
+// 转换为树型结构
+const TransformChildren = (item) => {
+  if (item.childs) {
+    item.children = item.childs
+    item.key = `key-${item.code}`
+    item.childs.forEach(child => {
+      TransformChildren(child)
+    })
+  }
+}
+
 const ListDataTransform = (AsyncMethod) => {
   return new Promise(resolve => {
     AsyncMethod.then(({ data, code }) => resolve({
       total: data.total || data.list.length,
-      data: data.list.map((item, index) => {
-        if (item.childs) item.children = item.childs
-        item.key = `${item.name}-${index}`
+      data: data.list.map(item => {
+        TransformChildren(item)
         return item
       }),
       success: !code
@@ -20,6 +30,12 @@ export const PostLogin = params => request({
   method: 'post',
   data: params
 })
+// 省市区列表
+export const GetProvinceCityArea = params => request({
+  url: '/area/province_city_area',
+  method: 'get',
+  params
+})
 
 // 权限列表
 export const GetRoleList: any = params => ListDataTransform(request({
@@ -36,5 +52,21 @@ export const RoleApi: any = params => request({
   params: params.mt === 'delete' ? params : {}
 })
 
+// 获取小区列表
+export const GetGardenList: any = params => ListDataTransform(request({
+  url: '/garden',
+  method: 'get',
+  params
+}))
+// 街道列表
+export const GetStreetList: any = params => ListDataTransform(request({
+  url: '/area/street_committee',
+  method: 'get',
+  params: {
+    ...params,
+    page: params.current
+  }
+}))
+
 
 

src/views/Garden/index.tsx

@@ -1,7 +1,8 @@
 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 } from 'antd'
+import { Button, Modal, Form, Select, Card } from 'antd'
+import { GetGardenList, GetProvinceCityArea } from '../../services/api'
 
 const GardenList: React.FC = (props: any) => {
   // @ts-ignore
@@ -56,10 +57,76 @@ 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}

src/views/Street/committee.tsx

@@ -0,0 +1,111 @@
+import React from 'react'
+import type { ActionType } from '@ant-design/pro-table'
+import ProTable from '@ant-design/pro-table'
+import { Button, Modal, Form, Select } from 'antd'
+import { GetStreetList } from '../../services/api'
+
+const StreetList: React.FC = (props: any) => {
+  // @ts-ignore
+  const columns: any = [
+    {
+      title: '名称',
+      dataIndex: 'name'
+    },
+    {
+      title: '小区地址',
+      dataIndex: 'name'
+    },
+    {
+      title: '所属物业公司',
+      dataIndex: 'id',
+      valueEnum: {
+        0: {
+          text: '测试',
+          status: 'Default',
+        }
+      }
+    },
+    {
+      title: '物业联系人',
+      dataIndex: 'name'
+    },
+    {
+      title: '物业联系人手机号',
+      dataIndex: 'company_phone',
+      search: false,
+    },
+    {
+      title: '社区',
+      dataIndex: 'id'
+    },
+    {
+      title: '街道',
+      dataIndex: 'id'
+    },
+    {
+      title: '操作',
+      dataIndex: 'option',
+      search: false,
+      render: (_, row, index, action) => [
+        <Button type='link' onClick={() => {
+          setState(pre => ({ ...pre, visible: true }))
+        }}>修改所属物业公司</Button>
+      ]
+    }
+  ]
+  const [state, setState] = React.useState({
+    visible: false,
+    examineVisible: false
+  })
+
+  const actionRef = React.useRef<ActionType>();
+  return (
+    <React.Fragment>
+      <ProTable
+        headerTitle="小区列表"
+        actionRef={actionRef}
+        rowKey="key"
+        search={{ labelWidth: 120 }}
+        request={GetStreetList}
+        toolbar={{
+          menu: {
+            type: 'tab',
+            activeKey: '',
+            items: [
+              {
+                key: 'tab1',
+                label: '社区',
+              },
+              {
+                key: 'tab2',
+                label: '街道',
+              }
+            ],
+            onChange: (key) => {
+
+            },
+          },
+        }}
+        columns={columns}
+      />
+      <Modal
+        visible={state.visible}
+        title='修改小区所属物业公司'
+        onOk={() => setState(pre => ({ ...pre, visible: false }))}
+        onCancel={() => setState(pre => ({ ...pre, visible: false }))}
+      >
+        <Form>
+          <Form.Item label='所属物业公司'>
+            <Select placeholder='请选择'>
+              <Select.Option value='1'>
+                测试
+              </Select.Option>
+            </Select>
+          </Form.Item>
+        </Form>
+      </Modal>
+    </React.Fragment>
+  )
+}
+
+export default StreetList

src/views/Street/index.tsx

@@ -0,0 +1,111 @@
+import React from 'react'
+import type { ActionType } from '@ant-design/pro-table'
+import ProTable from '@ant-design/pro-table'
+import { Button, Modal, Form, Select } from 'antd'
+import { GetStreetList } from '../../services/api'
+
+const StreetList: React.FC = (props: any) => {
+  // @ts-ignore
+  const columns: any = [
+    {
+      title: '名称',
+      dataIndex: 'name'
+    },
+    {
+      title: '小区地址',
+      dataIndex: 'name'
+    },
+    {
+      title: '所属物业公司',
+      dataIndex: 'id',
+      valueEnum: {
+        0: {
+          text: '测试',
+          status: 'Default',
+        }
+      }
+    },
+    {
+      title: '物业联系人',
+      dataIndex: 'name'
+    },
+    {
+      title: '物业联系人手机号',
+      dataIndex: 'company_phone',
+      search: false,
+    },
+    {
+      title: '社区',
+      dataIndex: 'id'
+    },
+    {
+      title: '街道',
+      dataIndex: 'id'
+    },
+    {
+      title: '操作',
+      dataIndex: 'option',
+      search: false,
+      render: (_, row, index, action) => [
+        <Button type='link' onClick={() => {
+          setState(pre => ({ ...pre, visible: true }))
+        }}>修改所属物业公司</Button>
+      ]
+    }
+  ]
+  const [state, setState] = React.useState({
+    visible: false,
+    examineVisible: false
+  })
+
+  const actionRef = React.useRef<ActionType>();
+  return (
+    <React.Fragment>
+      <ProTable
+        headerTitle="小区列表"
+        actionRef={actionRef}
+        rowKey="key"
+        search={{ labelWidth: 120 }}
+        request={GetStreetList}
+        toolbar={{
+          menu: {
+            type: 'tab',
+            activeKey: '',
+            items: [
+              {
+                key: 'tab1',
+                label: '社区',
+              },
+              {
+                key: 'tab2',
+                label: '街道',
+              }
+            ],
+            onChange: (key) => {
+
+            },
+          },
+        }}
+        columns={columns}
+      />
+      <Modal
+        visible={state.visible}
+        title='修改小区所属物业公司'
+        onOk={() => setState(pre => ({ ...pre, visible: false }))}
+        onCancel={() => setState(pre => ({ ...pre, visible: false }))}
+      >
+        <Form>
+          <Form.Item label='所属物业公司'>
+            <Select placeholder='请选择'>
+              <Select.Option value='1'>
+                测试
+              </Select.Option>
+            </Select>
+          </Form.Item>
+        </Form>
+      </Modal>
+    </React.Fragment>
+  )
+}
+
+export default StreetList