feat:

src/components/Drawer/index.jsx

@@ -0,0 +1,5 @@
+import BasicDrawer from './src/BasicDrawer'
+import { useModal } from './src/index'
+
+export { useModal }
+export default BasicDrawer

src/components/Drawer/src/BasicDrawer.jsx

@@ -0,0 +1,35 @@
+import { Drawer } from 'antd'
+import { connect } from 'dva'
+import React, { useState, Fragment, useEffect } from 'react'
+
+const Index = props => {
+  const {
+    visible,
+    config: { children, ...resetProps }
+  } = props
+  // 浏览器实际宽度
+  const [clientWidth, setClientWidth] = useState(document.body.clientWidth * 0.75)
+
+  useEffect(() => {
+    window.addEventListener('resize', () => {
+      setClientWidth(document.body.clientWidth * 0.7)
+    })
+    return () => {
+      window.removeEventListener('resize', () => {})
+    }
+  }, [])
+
+  return (
+    <Fragment>
+      <Drawer visible={visible} {...resetProps} width={clientWidth}>
+        {children}
+      </Drawer>
+    </Fragment>
+  )
+}
+
+export default connect(({ single }) => ({
+  visible: single.drawer.visible,
+  drawer: single.drawer,
+  config: single.drawer.config
+}))(Index)

src/components/Drawer/src/index.js

@@ -0,0 +1,30 @@
+import { useDispatch } from 'dva'
+
+export function useModal() {
+  const dispath = useDispatch()
+  function setDrawerProps(options) {
+    dispath({
+      type: 'single/setProps',
+      payload: { type: 'drawer', config: options }
+    })
+  }
+  function setModalProps(options) {
+    dispath({
+      type: 'single/setProps',
+      payload: { type: 'modal', config: options }
+    })
+  }
+  function toggleDrawer() {
+    dispath({
+      type: 'single/toggleDrawer',
+      payload: 'drawer'
+    })
+  }
+  function toggleModal() {
+    dispath({
+      type: 'single/toggleModal',
+      payload: 'modal'
+    })
+  }
+  return { toggleDrawer, toggleModal, setDrawerProps, setModalProps }
+}

src/components/PopContent/Contacts/ContanctTabList.jsx

@@ -1,12 +1,14 @@
 import { message, Tabs, Button, Table } from 'antd'
-import React, { useEffect, useState  } from 'react'
+import React, { useEffect, useState } from 'react'
 import consts from '@/consts'
 import SvgIcon from '@/components/SvgIcon'
 import { apiAddService } from '@/services/contact'
 import AddRecord from '@/components/PopContent/Contacts/AddRecord'
+import { useDispatch } from 'dva'
 // import { connect } from 'umi'
 
-const ContanctTabList = props => {
+const ContanctTabList = ({ clientid }) => {
+  const dispatch = useDispatch()
   const [state, setState] = useState({
     visible: false
   })
@@ -17,14 +19,19 @@ const ContanctTabList = props => {
 
   const handleAddService = async values => {
     setAddService({ ...addService, loading: true })
-    const { code = -1 } = await apiAddService(values)
+    const { code = -1 } = await apiAddService({ ...values, clientid })
     if (code === consts.RET_CODE.SUCCESS) {
       message.success('新增成功')
       setState({ ...state, data: values })
     }
     // 请求完了
     setAddService({ ...addService, loading: false, visible: false })
-    await initData()
+    // 刷新数据
+    dispatch({
+      type: 'refresh/commitAction',
+      payload: 'contact'
+    })
+    // await initData()
   }
   useEffect(() => {
     // const curinglisData = () => {
@@ -81,8 +88,7 @@ const ContanctTabList = props => {
           type="primary"
           ghost
           size="small"
-          onClick={() => setAddService({ ...setAddService, visible: true })}
-        >
+          onClick={() => setAddService({ ...setAddService, visible: true })}>
           <SvgIcon type="icon-plus" /> 添加服务记录
         </Button>
       </div>

src/components/PopContent/Contacts/index.jsx

@@ -8,14 +8,9 @@ import { apiContactDetail } from '@/services/contact'
 import consts from '@/consts'
 import { connect } from 'dva'
 
-const Popcontent = props => {
-  const { dispatch, shouldUpdate, visible, onClose, id = '' } = props
-  // const needSubtractHeight = 55 // 需要被裁掉的高度
-  // const needSubtractWidth = (collapsed ? 208 : 48) + 48 + 48 + 48 // 需要被裁掉的高度
-  // const [x, y] = useAutoTable(collapsed, needSubtractHeight)
+const PopContent = props => {
+  const { dispatch, shouldUpdate, visible, id = '' } = props
 
-  // 浏览器实际宽度
-  const [clientWidth, setClientWidth] = useState(document.body.clientWidth * 0.75)
   const [state, setState] = useState({
     client: {},
     log: [],
@@ -41,48 +36,25 @@ const Popcontent = props => {
     if (visible || shouldUpdate) {
       initData()
     }
-    window.addEventListener('resize', () => {
-      setClientWidth(document.body.clientWidth * 0.7)
-    })
-    return () => {
-      window.removeEventListener('resize', () => {})
-    }
   }, [visible, shouldUpdate])
   return (
-    <div>
-      <div className="sheet-box">
-        <Drawer
-          title="联系人"
-          placement="right"
-          bodyStyle={{
-            height: '100vh',
-            overflowY: 'hidden'
-          }}
-          width={clientWidth}
-          closable
-          onClose={onClose}
-          visible={visible}
-          // mask={false}
-        >
-          <Row>
-            <Col span={12} className="sheet-box-left">
-              <div className="sheet-left-panel zh-pd-right-15">
-                <ContanctForm client={state.client} />
-              </div>
-            </Col>
-            <Col span={12}>
-              <ContanctTabList />
-              <ContanctLowerList log={state.log} servicelist={state.serviceLog} />
-            </Col>
-          </Row>
-        </Drawer>
-      </div>
+    <div className="sheet-box">
+      <Row>
+        <Col span={12} className="sheet-box-left">
+          <div className="sheet-left-panel zh-pd-right-15">
+            <ContanctForm client={state.client} />
+          </div>
+        </Col>
+        <Col span={12}>
+          <ContanctTabList />
+          <ContanctLowerList log={state.log} servicelist={state.serviceLog} />
+        </Col>
+      </Row>
     </div>
   )
 }
 
-// export default Popcontent
-
-export default connect(({ refresh }) => ({
+export default connect(({ refresh, single }) => ({
+  visible: single.drawer.visible,
   shouldUpdate: refresh.contact
-}))(Popcontent)
+}))(PopContent)

src/layouts/BasicLayout.jsx

@@ -17,6 +17,7 @@ import { CSSTransition, TransitionGroup } from 'react-transition-group'
 import './amimate.scss'
 import '@icon-park/react/styles/index.less'
 import { IconPark } from '@/components/SvgIcon'
+import BasicDrawer from '@/components/Drawer'
 
 const noMatch = (
   <Result
@@ -154,6 +155,7 @@ const BasicLayout = props => {
       <ConfigProvider locale={zhCN}>{children}</ConfigProvider>
       {/* <Authorized authority={authorized.authority} noMatch={noMatch}> */}
       {/* </Authorized> */}
+      <BasicDrawer />
     </ProLayout>
   )
 }

src/models/single.js

@@ -0,0 +1,61 @@
+// 单例控制器
+
+export default {
+  namespace: 'single',
+  state: {
+    drawer: {
+      visible: false,
+      config: {}
+    },
+    modal: {
+      visible: false,
+      config: {}
+    }
+  },
+  effects: {
+    *toggleDrawer({ payload }, { put }) {
+      yield put({
+        type: 'changeDrawer',
+        payload
+      })
+    },
+    *toggleModal({ payload }, { put }) {
+      yield put({
+        type: 'changeModal',
+        payload
+      })
+    },
+    *setProps({ payload }, { put }) {
+      yield put({
+        type: 'changeState',
+        payload
+      })
+    }
+  },
+  reducers: {
+    // 改变state对应type的config
+    changeState(state, action) {
+      console.log('action', action)
+      const a = {
+        [action.payload.type]: { ...state[action.payload.type], config: action.payload.config }
+      }
+      console.log('a', a)
+      return {
+        ...state,
+        [action.payload.type]: { ...state[action.payload.type], config: action.payload.config }
+      }
+    },
+    changeDrawer(state) {
+      return {
+        ...state,
+        drawer: { ...state.drawer, visible: !state.drawer.visible }
+      }
+    },
+    changeModal(state) {
+      return {
+        ...state,
+        modal: { ...state.modal, visible: !state.modal.visible }
+      }
+    }
+  }
+}

src/pages/Customer/Contact/index.jsx

@@ -12,8 +12,10 @@ import { queryContact, apiAddClient } from '@/services/contact'
 import styles from './index.less'
 import LazyCascader from '@/components/LazyCascader'
 import { useDebounceFn } from 'ahooks'
+import { useModal } from '@/components/Drawer'
 
 const Contact = props => {
+  const { toggleDrawer, setDrawerProps } = useModal()
   const { collapsed } = props
   const needSubtractHeight = 48 + 48 + 48 + 64 + 24 + 32 // 需要被裁掉的高度
   const needSubtractWidth = (collapsed ? 208 : 48) + 48 + 48 + 48 // 需要被裁掉的高度
@@ -63,21 +65,16 @@ const Contact = props => {
 
   // 展示drawer
   const showDrawer = id => {
-    // console.log(id);
-    setState({ ...state, id, visible: true })
-  }
-
-  // 隐藏drawer
-  const hideDrawer = () => {
-    setState({ ...state, visible: false, id: '' })
-  }
-
-  const onCreate = values => {
-    console.log(values)
-  }
-
-  const onChange = values => {
-    console.log(values)
+    setDrawerProps({
+      closable: true,
+      onClose: () => toggleDrawer(),
+      bodyStyle: {
+        height: '100vh',
+        overflowY: 'hidden'
+      },
+      children: <Contacts id={id} />
+    })
+    toggleDrawer()
   }
 
   const columns = [
@@ -338,7 +335,6 @@ const Contact = props => {
     }
   })
   useEffect(() => {
-    // props.getlist();
     initData()
   }, [])
 
@@ -357,8 +353,7 @@ const Contact = props => {
     initData({ province, city, area })
   }
   return (
-    // <PageHeaderWrapper></PageHeaderWrapper>
-    <div>
+    <>
       <div className={styles.tableContent}>
         <ProTable
           rowKey={record => record.id}
@@ -406,16 +401,11 @@ const Contact = props => {
         visible={addClient.visible}
         onCancel={() => setAddClient({ ...addClient, visible: false })}
       />
-      <Contacts onClose={hideDrawer} visible={state.visible} onCreate={onCreate} id={state.id} />
-    </div>
+    </>
   )
 }
 
-export default connect(({ district, global, loading }) => ({
-  // contactName: contact,
-  // data: contact.data,
-  // total: contact.total,
+export default connect(({ district, loading }) => ({
   districtName: district,
-  // collapsed: global.collapsed,
   getlist: loading.effects['contact/fetch']
 }))(Contact)