fix: EditForm下DatePicker手动控制浮层显示

config/config.js

@@ -9,7 +9,7 @@ import defaultSettings from './defaultSettings'
 import proxy from './proxy'
 import routes from './routes'
 import windicss from 'windicss-webpack-plugin/dist/index'
-const { REACT_APP_ENV } = process.env
+const { NODE_ENV, REACT_APP_ENV } = process.env
 export default defineConfig({
   hash: true,
   antd: {},

config/routes.js

@@ -60,13 +60,13 @@ export default [
         icon: 'icon-usd-circle',
         component: './Customer/Business',
         access: 'authRouteFilter'
-      },
-      {
-        path: '/customer/test',
-        name: 'test',
-        icon: 'icon-usd-circle',
-        component: './Customer/Test'
       }
+      // {
+      //   path: '/customer/test',
+      //   name: 'test',
+      //   icon: 'icon-usd-circle',
+      //   component: './Customer/Test'
+      // }
     ]
   },
   {

src/components/EditableForm/src/components/ChangeDatePicker.jsx

@@ -3,22 +3,33 @@ import { DatePicker } from 'antd'
 import dayjs, { isDayjs } from 'dayjs'
 
 const ChangeDatePicker = props => {
-  const { defaultValue, refinstance, onSave } = props
+  const { defaultValue, refinstance, onSave, defaultOpen = false, ...restProps } = props
   const [val, setVal] = useState(defaultValue)
+  const [open, setOpen] = useState(defaultOpen)
   const handleOnChange = d => {
+    if (!d) return
     const date = d.format('YYYY-MM-DD')
     setVal(date)
+    onSave({ currentTarget: { value: date } })
+  }
+
+  const handleOnOpenChange = e => {
+    setOpen(e)
+    if (!e && val === defaultValue) {
+      onSave({ currentTarget: { value: null } })
+    }
   }
   return (
     <DatePicker
-      defaultOpen={true}
+      open={open}
+      value={isDayjs(val) ? val : dayjs(val)}
       style={{ width: '100%' }}
       placeholder="请选择日期"
       ref={refinstance}
-      allowClear
-      defaultValue={isDayjs(defaultValue) ? defaultValue : dayjs(defaultValue)}
       onBlur={() => onSave({ currentTarget: { value: val } })}
       onChange={handleOnChange}
+      onOpenChange={handleOnOpenChange}
+      {...restProps}
     />
   )
 }

src/components/EditableForm/src/editableFormItem.jsx

@@ -9,6 +9,7 @@ import ChangeSelect from './components/ChangeSelect'
 import ChangeTreeSelect from './components/ChangeTreeSelect'
 import ChangeDatePicker from './components/ChangeDatePicker'
 import './index.less'
+import { isNull } from '@/utils/is'
 
 const extraValArr = ['cascader', 'select', 'treeSelect'] // 需要设置ExtraVal的类型
 const EditableFormItem = ({
@@ -131,7 +132,7 @@ const EditableFormItem = ({
   }
   const save = async e => {
     const { value, local = '' } = e.currentTarget
-    if (value === record || !value) {
+    if (value === record || isNull(value)) {
       toggleEdit()
       return
     }
@@ -180,7 +181,14 @@ const EditableFormItem = ({
         )
         break
       case 'datePicker':
-        cell = <ChangeDatePicker onSave={save} defaultValue={state.val} />
+        cell = (
+          <ChangeDatePicker
+            defaultOpen={true}
+            onSave={save}
+            defaultValue={state.val}
+            allowClear={false}
+          />
+        )
         break
       default:
         cell = (

src/components/LazyCascader/LazyCascader.jsx

@@ -34,13 +34,13 @@ const CLazyCascader = props => {
   }, [])
 
   const triggerChange = (value, local = '') => {
-    setValue(value)
     if (onChange) {
       onChange(value, local)
     }
   }
 
   const handleOnChange = (value, selectedOptions) => {
+    setValue(value)
     const len = value?.length
     if (len === 3) {
       const { name, id } = selectedOptions[2]
@@ -135,6 +135,12 @@ const CLazyCascader = props => {
     </>
   )
 
+  const handleOnPopupVisibleChange = e => {
+    setVisible(e)
+    if (!e && cValue === defaultValue) {
+      triggerChange(null)
+    }
+  }
   return (
     <div className={[styles.cascader, 'Cascader-Body'].join(' ')}>
       <Cascader
@@ -149,7 +155,7 @@ const CLazyCascader = props => {
         loadData={loadData}
         fieldNames={{ label: 'name', value: 'id' }}
         changeOnSelect={changeOnSelect}
-        onPopupVisibleChange={e => setVisible(e)}
+        onPopupVisibleChange={handleOnPopupVisibleChange}
         {...resetProps}
       />
     </div>

src/pages/Customer/Test/index.jsx

@@ -1,51 +1,10 @@
-import { Button, Cascader } from 'antd'
-import React, { useState } from 'react'
+// import React from 'react'
 
-export default function Index() {
-  const [state, setState] = useState(['jiangsu', 'nanjing', 'zhonghuamen'])
-  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'
-            }
-          ]
-        }
-      ]
-    }
-  ]
-  return (
-    <div>
-      <Cascader options={options} value={state} onChange={e => setState(e)} />
-      <Button
-        onClick={() => {
-          setState(['zhejiang', 'hangzhou', 'xihu'])
-        }}>
-        1111
-      </Button>
-    </div>
-  )
-}
+// export default function Index() {
+
+//   return (
+//     <div>
+
+//     </div>
+//   )
+// }

src/pages/Hr/Employee/components/EmployeeDetail/Form.jsx

@@ -24,7 +24,7 @@ const EmployeeForm = props => {
     {
       dataIndex: 'departmentId',
       label: '办事处/部门',
-      span: 12,
+      span: 24,
       editCellType: 'treeSelect'
     },
     {