Jelajahi Sumber

fix: 地区级联由于手动接管了浮层的显隐导致的一些bug

lanjianrong 5 tahun lalu
induk
melakukan
0d6355792f

+ 11 - 8
src/components/LazyCascader/LazyCascader.jsx

@@ -11,6 +11,7 @@ const CLazyCascader = props => {
     refinstance,
     options,
     dispatch,
+    value,
     onChange,
     changeOnSelect = false,
     popupVisible = false,
@@ -24,7 +25,7 @@ const CLazyCascader = props => {
   const [historyRecord, setHistoryRecord] = useState(
     showFooter ? getAuthCache(CASCADER_HISTORY_KEY) || [] : []
   )
-  const [cValue, setValue] = useState(defaultValue)
+  const [cValue, setValue] = useState(value || defaultValue)
   useEffect(() => {
     if (!options.length) {
       dispatch({
@@ -33,15 +34,15 @@ const CLazyCascader = props => {
     }
   }, [])
 
-  const triggerChange = (value, local = '') => {
+  const triggerChange = (nvalue, local = '') => {
     if (onChange) {
-      onChange(value, local)
+      onChange(nvalue, local)
     }
   }
 
-  const handleOnChange = (value, selectedOptions) => {
-    setValue(value)
-    const len = value?.length
+  const handleOnChange = (nvalue, selectedOptions) => {
+    setValue(nvalue)
+    const len = nvalue?.length
     if (len === 3) {
       const { name, id } = selectedOptions[2]
       const htr = serializeRecord(
@@ -56,7 +57,7 @@ const CLazyCascader = props => {
     const local = selectedOptions.reduce((prev, curr) => {
       return `${prev}${prev ? ' / ' : ''}${curr.name}`
     }, '')
-    triggerChange(value, local)
+    triggerChange(nvalue, local)
   }
 
   const loadData = selectedOptions => {
@@ -137,7 +138,9 @@ const CLazyCascader = props => {
 
   const handleOnPopupVisibleChange = e => {
     setVisible(e)
-    if (!e && cValue === defaultValue) {
+    // 检测value是为了防止在Form里面的自定义级联组件失效
+    // TODOS 自定义FormItem组件需要接受value以及onChange事件
+    if (value && !e && cValue === defaultValue) {
       triggerChange(null)
     }
   }

+ 4 - 2
src/pages/Customer/Client/components/AddClient/index.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef } from 'react'
 import { Form, Row, Col, Button } from 'antd'
-import LazyCascader, { validCascaderRule } from '@/components/LazyCascader'
+import LazyCascader from '@/components/LazyCascader'
 import { ModalForm, ProFormSelect, ProFormText } from '@ant-design/pro-form'
 import { Plus } from '@icon-park/react'
 import ModalDrag from '@/components/DragmModal'
@@ -60,7 +60,7 @@ const AddClient = props => {
       <Form.Item
         label="联系人地区"
         name="district"
-        rules={[{ required: true, message: '请选择地区' }, { validator: validCascaderRule }]}>
+        rules={[{ required: true, message: '请选择地区' }]}>
         <LazyCascader showFooter={true} />
       </Form.Item>
       <Row>
@@ -74,6 +74,7 @@ const AddClient = props => {
               { label: '女', value: '女' }
             ]}
           />
+          <ProFormText label="部门" name="department" />
           <ProFormText
             label="手机"
             name="telephone"
@@ -85,6 +86,7 @@ const AddClient = props => {
         </Col>
         <Col span={12}>
           <ProFormText label="昵称" name="niceName" />
+          <ProFormText label="职位" name="position" />
           <ProFormText label="QQ" name="qq" />
           <ProFormText label="邮箱" name="email" />
           <ProFormText label="联系人乘车" name="ride" />

+ 1 - 3
src/pages/Customer/Company/components/AddCompany/index.jsx

@@ -1,6 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react'
 import { Form, Row, Col, Button } from 'antd'
-import { validCascaderRule } from '@/components/LazyCascader'
 import LazyCascader from '@/components/LazyCascader'
 import { ModalForm, ProFormText, ProFormCheckbox } from '@ant-design/pro-form'
 import { Plus } from '@icon-park/react'
@@ -75,8 +74,7 @@ const AddCompanyModal = ({ dataId, dataType, onConfirm, dispatch, natures }) =>
       <Form.Item
         name="district"
         label="客户地区"
-        required={true}
-        rules={[{ validator: validCascaderRule }]}>
+        rules={[{ required: true, message: '请选择地区' }]}>
         <LazyCascader showFooter={true} />
       </Form.Item>
       <ProFormText