Browse Source

feat: EditForm增加select 相关的hook

lanjianrong 5 years ago
parent
commit
59ab5b5f13

+ 10 - 3
src/components/EditableForm/src/editableFormItem.jsx

@@ -101,7 +101,6 @@ const EditableFormItem = ({
             ref={iRef}
             ref={iRef}
             defaultValue={val}
             defaultValue={val}
             className="zh-width-100P"
             className="zh-width-100P"
-            // onBlur={save}
             onChange={(value, local) => save({ currentTarget: { value, local } })}
             onChange={(value, local) => save({ currentTarget: { value, local } })}
           />
           />
         )
         )
@@ -113,8 +112,16 @@ const EditableFormItem = ({
             ref={iRef}
             ref={iRef}
             onBlur={save}
             onBlur={save}
             options={options}
             options={options}
-            mode={Array.isArray(val) ? 'multiple' : ''}
-            onChange={value => save({ currentTarget: { value } })}
+            defaultOpen={true}
+            mode={Array.isArray(val) ? 'multiple' : null}
+            onChange={(value, option) => {
+              const local = Array.isArray(option)
+                ? option.reduce((prev, curr) => {
+                    return prev + curr.label
+                  }, '')
+                : options.label
+              save({ currentTarget: { value, local } })
+            }}
             className="zh-width-100P"
             className="zh-width-100P"
           />
           />
         )
         )

+ 6 - 4
src/components/EditableForm/src/useOptions.js

@@ -16,11 +16,13 @@ export default function useOptions(type) {
 
 
   useEffect(() => {
   useEffect(() => {
     if (type === typeEnum.NATUREIDS) {
     if (type === typeEnum.NATUREIDS) {
-      dispatch({
-        type: 'customer/fetch'
-      })
+      if (!store.getState().customer.natures.length) {
+        dispatch({
+          type: 'customer/fetch'
+        })
+      }
     }
     }
-  }, [])
+  }, [type])
   if (type === typeEnum.GENDER) {
   if (type === typeEnum.GENDER) {
     return genderOptions
     return genderOptions
   }
   }

+ 3 - 2
src/pages/Customer/Company/components/CompanyDetail/CompanyForm.jsx

@@ -11,14 +11,15 @@ const CompanyForm = props => {
       span: 24
       span: 24
     },
     },
     {
     {
-      dataIndex: 'local',
+      dataIndex: 'district',
       label: '公司地区',
       label: '公司地区',
       editCellType: 'cascader',
       editCellType: 'cascader',
       span: 24
       span: 24
     },
     },
     {
     {
-      dataIndex: 'nature',
+      dataIndex: 'natureIds',
       label: '公司性质',
       label: '公司性质',
+      editCellType: 'select',
       span: 24
       span: 24
     },
     },
     {
     {

+ 13 - 17
src/pages/Customer/Company/components/CompanyDetail/index.jsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react'
 import React, { useState, useEffect } from 'react'
-import { Drawer, Row, Col } from 'antd'
-import useAutoTable from '@/hooks/useAutoTable'
+import { Row, Col, Spin } from 'antd'
 import consts from '@/consts'
 import consts from '@/consts'
 import { apiCompanyDetail } from '@/services/company'
 import { apiCompanyDetail } from '@/services/company'
 import CompanyForm from '@/pages/Customer/Company/components/CompanyDetail/CompanyForm'
 import CompanyForm from '@/pages/Customer/Company/components/CompanyDetail/CompanyForm'
@@ -9,16 +8,14 @@ import CompanyTabList from '@/pages/Customer/Company/components/CompanyDetail/Co
 import { connect } from 'dva'
 import { connect } from 'dva'
 
 
 const Index = props => {
 const Index = props => {
-  const { dispatch, shouldUpdate, visible, onClose, collapsed, id = '' } = props
-  const needSubtractHeight = 55 // 需要被裁掉的高度
-  // const needSubtractWidth = (collapsed ? 208 : 48) + 48 + 48 + 48 // 需要被裁掉的高度
-  const [x, y] = useAutoTable(collapsed, needSubtractHeight)
-  const [clientWidth, setClientWidth] = useState(document.body.clientWidth * 0.75)
+  const { dispatch, shouldUpdate, visible, id = '' } = props
   const [state, setState] = useState({
   const [state, setState] = useState({
+    loading: false,
     customer: {},
     customer: {},
     log: []
     log: []
   })
   })
   const initData = async () => {
   const initData = async () => {
+    setState({ ...state, loading: true })
     const {
     const {
       data: { customer = {}, log = [] },
       data: { customer = {}, log = [] },
       code = -1
       code = -1
@@ -30,22 +27,21 @@ const Index = props => {
           payload: 'company'
           payload: 'company'
         })
         })
       }
       }
-      setState({ ...state, customer, log })
+      setState({ ...state, customer, log, loading: false })
     }
     }
   }
   }
   useEffect(() => {
   useEffect(() => {
-    if (visible || shouldUpdate) {
+    if (shouldUpdate) {
       initData()
       initData()
     }
     }
-    window.addEventListener('resize', () => {
-      setClientWidth(document.body.clientWidth * 0.7)
-    })
-    return () => {
-      window.removeEventListener('resize', () => {})
+  }, [shouldUpdate])
+  useEffect(() => {
+    if (visible) {
+      initData()
     }
     }
-  }, [visible, shouldUpdate])
+  }, [visible])
   return (
   return (
-    <div>
+    <Spin spinning={state.loading}>
       <div className="sheet-box">
       <div className="sheet-box">
         <Row>
         <Row>
           <Col span={12} className="sheet-box-left">
           <Col span={12} className="sheet-box-left">
@@ -59,7 +55,7 @@ const Index = props => {
           </Col>
           </Col>
         </Row>
         </Row>
       </div>
       </div>
-    </div>
+    </Spin>
   )
   )
 }
 }
 
 

+ 8 - 7
src/pages/Customer/Contact/components/ContactDetail/index.jsx

@@ -34,16 +34,17 @@ const PopContent = props => {
     }
     }
   }
   }
   useEffect(() => {
   useEffect(() => {
-    if (visible || shouldUpdate) {
+    if (shouldUpdate) {
       initData()
       initData()
     }
     }
-    window.addEventListener('resize', () => {
-      setClientWidth(document.body.clientWidth * 0.7)
-    })
-    return () => {
-      window.removeEventListener('resize', () => {})
+  }, [shouldUpdate])
+
+  useEffect(() => {
+    if (visible) {
+      initData()
     }
     }
-  }, [visible, shouldUpdate])
+  }, [visible])
+
   return (
   return (
     <Spin spinning={state.loading}>
     <Spin spinning={state.loading}>
       <div className="sheet-box">
       <div className="sheet-box">