feat: 地区级联同时支持查询、form编辑

src/components/EditableForm/editableForm.jsx

@@ -29,10 +29,11 @@ const EditableForm = ({ dataSource, columns, type, tartgetUrl }) => {
           <EditableFormItem
             key={column.dataIndex}
             label={column.label}
+            dataSource={dataSource}
             dataIndex={column.dataIndex}
-            record={dataSource[column.dataIndex]}
+            // record={dataSource[column.dataIndex]}
             span={column.span}
-            dataId={dataSource.id}
+            // dataId={dataSource.id}
             editable={column.editable}
             editCellType={column.editCellType}
             requestUrl={tartgetUrl}

src/components/EditableForm/editableFormItem.jsx

@@ -3,9 +3,21 @@ import { editFormApi } from '@/services/common'
 import { Input, Row, Col, Select } from 'antd'
 import React, { useState, useEffect, useRef } from 'react'
 import LazyCascader from '../LazyCascader'
+import { connect } from 'dva'
 import './index.less'
 
-const EditableFormItem = ({ label, dataIndex, record, dataId, span, editCellType, requestUrl }) => {
+const EditableFormItem = ({
+  label,
+  dataSource,
+  dataIndex,
+  span,
+  editCellType,
+  requestUrl,
+  dispatch
+}) => {
+  const record = dataSource[dataIndex]
+  const dataId = dataSource.id
+
   const [editing, setEditing] = useState(false)
   const iRef = useRef(null)
   const [val, setVal] = useState('')
@@ -15,9 +27,16 @@ const EditableFormItem = ({ label, dataIndex, record, dataId, span, editCellType
   }, [])
   useEffect(() => {
     // 处于编辑状态自动聚焦
-    if (editing) {
+    if (editing && editCellType !== 'cascader') {
       iRef.current.focus()
     }
+    // 对级联数据初始化, key一定要是district!!
+    if (editCellType === 'cascader' && record) {
+      dispatch({
+        type: 'district/fetchWithValues',
+        payload: record
+      })
+    }
     // 当val为空时，需要设置默认值
     if (!val) {
       setVal(record)
@@ -75,14 +94,18 @@ const EditableFormItem = ({ label, dataIndex, record, dataId, span, editCellType
       case 'cascader':
         cell = (
           <LazyCascader
+            // ref={iRef}
             defaultValue={val}
-            onChange={value => save({ currentTarget: { value } })}></LazyCascader>
+            className="zh-width-100P"
+            onChange={value => save({ currentTarget: { value } })}
+          />
         )
         break
       case 'select':
         cell = (
           <Select
             defaultValue={val}
+            ref={iRef}
             // onBlur={save}
             onChange={value => save({ currentTarget: { value } })}
             className="zh-width-100P">
@@ -103,9 +126,13 @@ const EditableFormItem = ({ label, dataIndex, record, dataId, span, editCellType
         break
     }
   } else {
+    let content = val
+    if (editCellType === 'cascader') {
+      content = dataSource.local
+    }
     cell = (
       <div className="editable-cell-value-wrap" onClick={toggleEdit}>
-        {val}
+        {content}
       </div>
     )
   }
@@ -122,4 +149,4 @@ const EditableFormItem = ({ label, dataIndex, record, dataId, span, editCellType
   )
 }
 
-export default EditableFormItem
+export default connect()(EditableFormItem)

src/components/LazyCascader/LazyCascader.jsx

@@ -4,6 +4,7 @@ import { connect } from 'dva'
 
 const LazyCascader = props => {
   const { options, dispatch, onChange, ...resetProps } = props
+  console.log(props.defaultValue)
   useEffect(() => {
     if (!options.length) {
       dispatch({
@@ -41,7 +42,7 @@ const LazyCascader = props => {
       loadData={loadData}
       // allowClear={false}
       fieldNames={{ label: 'name', value: 'id' }}
-      changeOnSelect
+      // changeOnSelect
     />
   )
 }

src/models/district.js

@@ -19,6 +19,22 @@ export default {
           }
         })
       }
+    },
+    *fetchWithValues({ payload = [] }, { call, put }) {
+      for (let i = 0; i < payload.length - 1; i++) {
+        const parentId = payload[i]
+        const response = yield call(queryDistrict, { parentId })
+        if (response && response.code === consts.RET_CODE.SUCCESS) {
+          yield put({
+            type: 'changeState',
+            payload: {
+              data: response.data,
+              parentId,
+              level: i + 1
+            }
+          })
+        }
+      }
     }
   },
   // reducers:用于处理同步操作，由action触发，可修改state
@@ -28,28 +44,31 @@ export default {
       const pid = action.payload && action.payload.parentId
       const level = action.payload && action.payload.level
       if (pid) {
-        const newData = state.data && state.data.map(item => {
-          const newItem = item
-          if (level === item.level) {
-            // 第一层
-            if (item.id === pid) {
-              newItem.loading = false
-              newItem.children = action.payload.data
-            }
-          } else {
-            // 第二层
-            newItem.children = item.children && item.children.map(secondItem => {
-
-              const newSecondItem = secondItem
-              if (secondItem.id === pid) {
-                newSecondItem.loading = false
-                newSecondItem.children = action.payload.data
+        const newData =
+          state.data &&
+          state.data.map(item => {
+            const newItem = item
+            if (level === item.level) {
+              // 第一层
+              if (item.id === pid) {
+                newItem.loading = false
+                newItem.children = action.payload.data
               }
-              return newSecondItem
-            })
-          }
-          return newItem
-        })
+            } else {
+              // 第二层
+              newItem.children =
+                item.children &&
+                item.children.map(secondItem => {
+                  const newSecondItem = secondItem
+                  if (secondItem.id === pid) {
+                    newSecondItem.loading = false
+                    newSecondItem.children = action.payload.data
+                  }
+                  return newSecondItem
+                })
+            }
+            return newItem
+          })
         return {
           ...state,
           data: newData

src/pages/Customer/Contact/index.jsx

@@ -4,7 +4,7 @@ import ProTable from '@ant-design/pro-table'
 // import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import { Button, message, Tag } from 'antd'
 import { connect } from 'dva'
-import React, { useEffect, useState, useRef } from 'react'
+import React, { useEffect, useState } from 'react'
 import SvgIcon from '@/components/SvgIcon'
 import useAutoTable from '@/hooks/useAutoTable'
 import consts from '@/consts'
@@ -17,7 +17,6 @@ const Contact = props => {
   const needSubtractHeight = 48 + 48 + 48 + 64 + 24 + 32 // 需要被裁掉的高度
   const needSubtractWidth = (collapsed ? 208 : 48) + 48 + 48 + 48 // 需要被裁掉的高度
 
-  const tRef = useRef()
   const [x, y] = useAutoTable(collapsed, needSubtractHeight, needSubtractWidth)
 
   const [state, setState] = useState({