城市地区筛选

src/models/district.js

@@ -0,0 +1,32 @@
+import consts from '@/consts'
+import { queryDistrict } from '@/services/district'
+
+export default {
+  namespace: 'district',
+  state: {
+    data: []
+  },
+  effects: {
+    *fetch({ payload }, { call, put }) {
+      const response = yield call(queryDistrict, payload)
+      if (response && response.code === consts.RET_CODE.SUCCESS) {
+        yield put({
+          type: 'show',
+          payload: response.data
+        })
+
+      }
+      console.log(response)
+    }
+  },
+  // reducers:用于处理同步操作，由action触发，可修改state
+  reducers: {
+    // action:是由reducers及effects的触发器，一般是第一个对象，如：{type:'add',payload:todo}
+    show(state, action) {
+      return {
+        ...state,
+        data: action.payload
+      }
+    }
+  }
+}

src/pages/Customer/Contact/index.jsx

@@ -1,7 +1,7 @@
 import Contacts from '@/components/PopContent/Contacts'
 import ProTable from '@ant-design/pro-table'
 // import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import { Button, Tag } from 'antd'
+import { Button, Tag,Cascader } from 'antd'
 import { connect } from 'dva'
 import React, { useEffect, useState } from 'react'
 import SvgIcon from '@/components/SvgIcon'
@@ -43,6 +43,10 @@ const Contact = props => {
     console.log(values)
   }
 
+  const onChange = values => {
+    console.log(values)
+  }
+
   const columns = [
     {
       title: '联系人',
@@ -104,7 +108,8 @@ const Contact = props => {
       title: '地区',
       dataIndex: 'local',
       key: 'local',
-      width: 100
+      width: 100,
+      render: local => <a>{local}</a>
     },
     {
       title: '个人标签',
@@ -288,11 +293,24 @@ const Contact = props => {
   useEffect(() => {
     // props.getlist();
     initData()
+    const options = () => {
+      const { dispatch } = props
+      dispatch({
+        type: 'district/fetch'
+      })
+    }
+    options()
   }, [])
 
+
   return (
     // <PageHeaderWrapper></PageHeaderWrapper>
     <div>
+      <div className="zh-pd-24">
+        <Cascader
+          onChange={onChange}
+        />
+      </div>
       <ProTable
         rowKey={record => record.id}
         size="middle"
@@ -323,7 +341,8 @@ const Contact = props => {
   )
 }
 
-export default connect(({ contact, global, loading }) => ({
+export default connect(({ global, loading }) => ({
+// export default connect(({ contact, global, loading })
   // contactName: contact,
   // data: contact.data,
   // total: contact.total,

src/services/district.js

@@ -0,0 +1,8 @@
+import request from '@/basic/utils/request'
+
+export async function queryDistrict(payload) {
+    const data = await request('/api/district', {
+        params: { ...payload }
+    })
+    return data
+}