fix: 编辑模式Cascader更改

src/components/EditableForm/src/editableFormItem.jsx

@@ -24,11 +24,14 @@ const EditableFormItem = ({
   const options = useOptions(dataIndex)
   const [editing, setEditing] = useState(false)
   const iRef = useRef(null)
-  const [val, setVal] = useState('')
-  const [extraVal, setExtraVal] = useState('')
+  const [state, setState] = useState({
+    val: '',
+    extraVal: '',
+    popupVisible: false
+  })
+
   useEffect(() => {
-    setVal('')
-    setExtraVal('')
+    setState({ ...state, val: '', extraVal: '' })
   }, [])
   useEffect(() => {
     // 处于编辑状态自动聚焦, 级联有问题暂无解决办法
@@ -36,6 +39,8 @@ const EditableFormItem = ({
       if (iRef.current.selectRef) {
         // select选择器相关
         iRef.current.selectRef.current.focus()
+      } else if (iRef.current.cascadeRef) {
+        iRef.current.cascadeRef.current.focus()
       } else {
         iRef.current.focus()
       }
@@ -47,16 +52,18 @@ const EditableFormItem = ({
         type: 'district/fetchWithValues',
         payload: record
       })
+      setState({ ...state, popupVisible: true })
     }
     // 当val为空时，需要设置默认值
-    if (!val) {
-      setVal(record)
+    if (!state.val) {
+      // setVal(record)
+      setState({ ...state, val: '' })
     }
-  }, [record, editing])
+  }, [record, editing, iRef])
 
   // 单独设置一个依赖，防止dataId变化
   useEffect(() => {
-    setVal(record)
+    setState({ ...state, val: record })
   }, [dataId])
 
   const toggleEdit = () => {
@@ -83,14 +90,16 @@ const EditableFormItem = ({
     }
   }
   const save = async e => {
+    // console.log('失去焦点了', e)
+    if (!e.currentTarget.value?.length) return
+    // console.log(e)
     const { value, local = '' } = e.currentTarget
     if (value === record || !value) {
       toggleEdit()
       return
     }
     await handleConfirm(value)
-    local && setExtraVal(local)
-    setVal(value)
+    setState({ ...state, val: value, extraVal: local, popupVisible: false })
     toggleEdit()
   }
 
@@ -105,15 +114,25 @@ const EditableFormItem = ({
         cell = (
           <LazyCascader
             ref={iRef}
-            defaultValue={val}
+            defaultValue={state.val}
             className="zh-width-100P"
+            autoFocus={true}
             onChange={(value, local) => save({ currentTarget: { value, local } })}
-            onBlur={save}
+            popupVisible={state.popupVisible}
+            // onBlur={save}
           />
         )
         break
       case 'select':
-        cell = <ChangeSelect ref={iRef} defaultValue={val} options={options} onSave={save} />
+        cell = (
+          <ChangeSelect
+            ref={iRef}
+            defaultValue={state.val}
+            options={options}
+            onSave={save}
+            onBlur={save}
+          />
+        )
         break
       case 'textarea':
         cell = (
@@ -121,7 +140,7 @@ const EditableFormItem = ({
             ref={iRef}
             onPressEnter={save}
             onBlur={save}
-            defaultValue={val}
+            defaultValue={state.val}
             // onChange={handleOnChange}
           />
         )
@@ -132,19 +151,19 @@ const EditableFormItem = ({
             ref={iRef}
             onPressEnter={save}
             onBlur={save}
-            defaultValue={val}
+            defaultValue={state.val}
             // onChange={handleOnChange}
           />
         )
         break
     }
   } else {
-    let content = val
+    let content = state.val
     if (editCellType === 'cascader') {
-      content = extraVal || dataSource.local
+      content = state.extraVal || dataSource.local
     }
     if (editCellType === 'select') {
-      content = extraVal || dataSource.nature
+      content = state.extraVal || dataSource.nature
     }
     cell = (
       <div className="editable-cell-value-wrap" onClick={toggleEdit}>

src/components/LazyCascader/LazyCascader.jsx

@@ -41,7 +41,6 @@ const CLazyCascader = props => {
 
   return (
     <Cascader
-      {...resetProps}
       placeholder="省/市/区"
       options={options}
       ref={refinstance}
@@ -49,6 +48,7 @@ const CLazyCascader = props => {
       loadData={loadData}
       fieldNames={{ label: 'name', value: 'id' }}
       changeOnSelect={changeOnSelect}
+      {...resetProps}
     />
   )
 }

src/pages/Customer/Test/index.jsx

@@ -1,156 +1,9 @@
-import React, { useEffect, useRef, useMemo, useState, useCallback } from 'react'
-import { Button, Card, Cascader, Dropdown, Input, Menu, Select, Pagination } from 'antd'
-import EditableForm from '@/components/EditableForm'
-import { useModal } from '@/components/Modal'
-import { connect } from 'dva'
-import SearchModal from '@/pages/customer/Contact/components/CustomerModal'
-import ChangeCompanyInput from '../Contact/components/ChangeCompany'
-import PersonLabel from '../Company/components/PersonLabel'
-import { TagTypeEnum } from '../Company/components/PersonLabel'
-import { TagDataTypeEnum } from '../Company/components/PersonLabel'
-
-const { Option } = Select
-const Test = ({ natures, dispatch }) => {
-  const { toggleModal, setModalProps } = useModal()
-
-  const [state, setState] = useState(null)
-  const iRef = useRef(null)
-  const options = [
-    {
-      value: 'zhejiang',
-      label: 'Zhejiang',
-      children: [
-        {
-          value: 'hangzhou',
-          label: 'Hangzhou',
-          children: [
-            {
-              value: 'xihu',
-              label: 'West Lake'
-            }
-          ]
-        }
-      ]
-    },
-    {
-      value: 'jiangsu',
-      label: 'Jiangsu',
-      children: [
-        {
-          value: 'nanjing',
-          label: 'Nanjing',
-          children: [
-            {
-              value: 'zhonghuamen',
-              label: 'Zhong Hua Men'
-            }
-          ]
-        }
-      ]
-    }
-  ]
-  const record = {
-    address: '珠海',
-    clientName: '啊实打实大',
-    age: 16
-  }
-
-  const columns = [
-    {
-      dataIndex: 'address',
-      label: '珠海',
-      span: 12
-    },
-    {
-      dataIndex: 'clientName',
-      label: '名字',
-      span: 12
-    },
-    {
-      dataIndex: 'age',
-      label: '年龄',
-      span: 24
-    }
-  ]
-  const onClick = () => {
-    setModalProps({
-      modalRender: node => <SearchModal node={node} />,
-      onCancel: () => toggleModal()
-    })
-    toggleModal()
-  }
+import React from 'react'
 
-  useEffect(() => {
-    const initNatures = () => {
-      dispatch({
-        type: 'customer/fetch'
-      })
-    }
-    !natures.length && initNatures()
-  }, [])
-
-  // const a = useMemo(() => {
-  //   const e = null
-  //   const b = 2
-  //   const c = e ?? b
-  //   console.log('c', c)
-  // }, [state])
-  // const customOptions = useCallback(originNode => {
-  //   return originNode
-  // }, [])
-
-  const menu = (
-    <Menu>
-      <Menu.Item key="1">1st menu item</Menu.Item>
-      <Menu.Item key="2">2nd menu item</Menu.Item>
-      <Menu.Item key="3">3rd menu item</Menu.Item>
-    </Menu>
-  )
-
-  // const measuredRef = useCallback(node => {
-  //   if (node) {
-  //     console.log(node.getBoundingClientRect)
-  //   }
-  // })
-  return (
-    <Card bordered={false}>
-      {/* <EditableForm dataSource={record} columns={columns} /> */}
-      {/* <Button onClick={onClick}>click</Button> */}
-      {/* <Cascader ref={iRef} options={options} /> */}
-      {/* <ChangeCompanyInput /> */}
-      <div className="zh-width-100P">
-        <Dropdown overlay={menu} trigger={['click']}>
-          <Input />
-        </Dropdown>
-      </div>
-      <Button
-        onClick={() => {
-          setState('123')
-        }}>
-        AAA
-      </Button>
+import { connect } from 'dva'
 
-      {/* <Select
-        ref={iRef}
-        onBlur={() => console.log(22)}
-        // onChange={() => console.log(iRef)}
-        options={options}
-        style={{ width: '200px' }}
-      /> */}
-      <PersonLabel tagType={TagTypeEnum.PERSONTAG} tagColumn={TagDataTypeEnum.CONTACT}>
-        <Button>2222</Button>
-      </PersonLabel>
-      <Pagination
-        total={500}
-        onChange={(page, size) => {
-          console.log(page, size)
-        }}
-      />
-      <div>
-        <span className="text-x">11111</span>
-      </div>
-    </Card>
-  )
+const Test = () => {
+  return <div>111</div>
 }
 
 export default connect(({ customer }) => ({