refactor: 事项列表刷新的调整

src/enums/emit.ts

@@ -1,4 +1,5 @@
 export enum EmitterType {
   BUSINESS_STEP_REFRESH = 'refresh:businessStep',
-  BUSINESS_STEP_CHANGE = 'change:businessStep'
+  BUSINESS_STEP_CHANGE = 'change:businessStep',
+  BUSINESS_MATTER_REFRESH = 'change:businessMatter'
 }

src/pages/Business/Matter/components/AddAssemblyModal.tsx

@@ -5,8 +5,10 @@ import { CodepenSquareFilled, ProfileFilled, SlackSquareFilled } from '@ant-desi
 import { Button, Card, Checkbox, Col, message, Row } from 'antd'
 import React, { useState } from 'react'
 import { Assembly } from './AssemblyDetail'
-import ImageModal from './ImageModal'
+import Picture from './Picture'
 import './index.less'
+import { EmitterType } from '@/enums/emit'
+import useEventEmitter from '@/utils/emit'
 
 type AddAssemblyProps = {
   defaultData: API.MatterTreeItem
@@ -15,8 +17,9 @@ type AddAssemblyProps = {
   refreshData: () => void
 }
 
-const AddAssemblyModal: React.FC<AddAssemblyProps> = ({ defaultData, close, refresh, refreshData }) => {
+const AddAssemblyModal: React.FC<AddAssemblyProps> = ({ defaultData, close, refresh }) => {
   const [modal, ModalDOM] = useModal()
+  const event$ = useEventEmitter({ global: true })
   const [assemblyList, setAssemblyList] = useState(defaultData?.assembly || [])
 
   const handleAssemblyOnchange = (checked: boolean, checkName: string) => {
@@ -30,23 +33,25 @@ const AddAssemblyModal: React.FC<AddAssemblyProps> = ({ defaultData, close, refr
   }
 
   const onOk = async () => {
+    const ID = defaultData?.ID
     const { code = -1 } = await updateAssembly({ ID: defaultData?.ID, assembly: assemblyList })
     if (code === consts.RET_CODE.SUCCESS) {
       message.success('添加成功')
       close()
-      refreshData()
+      // refreshData()
+      event$.emit(EmitterType.BUSINESS_MATTER_REFRESH, { ID })
       refresh()
     }
   }
 
-  const openModal = imageUrl => {
+  const openModal = (type: Assembly) => {
     modal.open({
       title: '预览',
       okText: '确认',
       cancelText: '取消',
       width: 1000,
       wrapClassName: 'modalTableBox',
-      children: <ImageModal imageUrl={imageUrl} close={() => modal.close()} />,
+      children: <Picture type={type} close={() => modal.close()} />,
       footer: null
     })
   }

src/pages/Business/Matter/components/AssemblyDetail.tsx

@@ -1,5 +1,5 @@
 import ProTable from '@ant-design/pro-table'
-import React, { useRef, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { Button, Tag } from 'antd'
 import { ColumnsType } from 'antd/lib/table'
 import styles from './index.less'
@@ -7,6 +7,8 @@ import useModal from '@/components/Modal'
 import AddAssemblyModal from './AddAssemblyModal'
 import { queryMatterDetail } from '@/services/api/business'
 import consts from '@/utils/consts'
+import useEventEmitter from '@/utils/emit'
+import { EmitterType } from '@/enums/emit'
 
 export enum Assembly {
   FORM = 'form', // 表单
@@ -28,16 +30,57 @@ interface IState {
   matterDetail: API.MatterTreeItem
 }
 
-const AssemblyDetail: React.FC<AssemblyDetailProps> = ({ refresh, record }) => {
+const AssemblyDetail: React.FC<AssemblyDetailProps> = ({ refresh, assemblyID }) => {
   const [state, setState] = useState<IState>({
     matterDetail: {}
   })
+
   const [modal, ModalDOM] = useModal()
-  const tRef = useRef()
-  // 刷新
-  const refreshData = () => {
-    tRef.current.reload()
+
+  const initData = async params => {
+    const { data = {}, code = -1 } = await queryMatterDetail(params)
+    if (code === consts.RET_CODE.SUCCESS) {
+      setState({ ...state, matterDetail: data })
+    }
+  }
+
+  // // 刷新
+  // const refreshData = () => {
+  //   initData({ ID: assemblyID })
+  // }
+
+  const event$ = useEventEmitter({ global: true })
+  event$.useSubscription(EmitterType.BUSINESS_MATTER_REFRESH, ({ params }) => {
+    const { ID } = params[0]
+
+    initData({ ID })
+  })
+
+  useEffect(() => {
+    if (assemblyID) {
+      initData({ ID: assemblyID })
+    }
+  }, [assemblyID])
+
+  const openModal = () => {
+    modal.open({
+      title: '添加组件',
+      okText: '确认',
+      cancelText: '取消',
+      width: 1000,
+      wrapClassName: 'modalTableBox',
+      children: (
+        <AddAssemblyModal
+          defaultData={state.matterDetail}
+          // refreshData={refreshData}
+          refresh={refresh}
+          close={() => modal.close()}
+        />
+      ),
+      footer: null
+    })
   }
+
   const columns: ColumnsType<API.AssemblyItem> = [
     {
       title: '组件名称',
@@ -69,49 +112,23 @@ const AssemblyDetail: React.FC<AssemblyDetailProps> = ({ refresh, record }) => {
     }
   ]
 
+  // drawerTableBox
   return (
-    <div className={styles.drawerTableBox}>
-      <ProTable
-        search={false}
-        rowKey="type"
-        actionRef={tRef}
-        params={{ ID: record?.ID }}
-        columns={columns}
-        request={async params => {
-          const { data = {}, code = -1 } = await queryMatterDetail(params)
-          setState({ ...state, matterDetail: data })
-          return {
-            data:
-              data?.assembly?.map(item => ({
-                type: item
-              })) || [],
-            success: code === consts.RET_CODE.SUCCESS
-          }
-        }}
-        className="absolute"
-        pagination={false}
-        toolBarRender={false}
-      />
-      <Button
-        className="buttonBox"
-        onClick={() => {
-          modal.open({
-            title: '添加组件',
-            okText: '确认',
-            cancelText: '取消',
-            width: 1000,
-            wrapClassName: 'modalTableBox',
-            children: (
-              <AddAssemblyModal
-                defaultData={state.matterDetail}
-                refreshData={refreshData}
-                refresh={refresh}
-                close={() => modal.close()}
-              />
-            ),
-            footer: null
-          })
-        }}>
+    <div className={[styles.assemblyContent, 'mt-24px'].join(' ')}>
+      {state.matterDetail ? (
+        <ProTable
+          search={false}
+          rowKey="type"
+          columns={columns}
+          dataSource={state.matterDetail.assembly?.map(item => ({ type: item }))}
+          className="absolute"
+          bordered
+          size="small"
+          pagination={false}
+          toolBarRender={false}
+        />
+      ) : null}
+      <Button className="buttonBox" onClick={() => openModal()}>
         添加组件
       </Button>
       {ModalDOM}

src/pages/Business/Matter/components/ImageModal.tsx

@@ -1,30 +0,0 @@
-import { Image } from 'antd'
-// import { Assembly } from './AssemblyDetail'
-
-export enum Assembly {
-  FORM = 'form', // 表单
-  COSTPROFILE = 'costProfile', // 造价文件
-  DATAPROFILE = 'dataProfile' // 资料清单
-}
-
-export const ImageUrlMap = {
-  [Assembly.FORM]: {
-    url: 'https://wc-assets.oss-cn-guangzhou.aliyuncs.com/images/component-preview/matter_form.png'
-  },
-  [Assembly.COSTPROFILE]: {
-    url: 'https://wc-assets.oss-cn-guangzhou.aliyuncs.com/images/component-preview/matter_costProfile.png'
-  },
-  [Assembly.DATAPROFILE]: {
-    url: 'https://wc-assets.oss-cn-guangzhou.aliyuncs.com/images/component-preview/matter_dataProfile.png'
-  }
-}
-
-const ImageModal = ({ imageUrl }) => {
-  return (
-    <div>
-      <Image width={1000} src={ImageUrlMap[imageUrl].url} />
-    </div>
-  )
-}
-
-export default ImageModal

src/pages/Business/Matter/components/Picture.tsx

@@ -0,0 +1,24 @@
+import { Image } from 'antd'
+import { Assembly } from './AssemblyDetail'
+
+type PictureProps = {
+  type: Assembly
+}
+
+const Picture: React.FC<PictureProps> = ({ type }) => {
+  const ImageUrlMap = {
+    [Assembly.FORM]:
+      'https://wc-assets.oss-cn-guangzhou.aliyuncs.com/images/component-preview/matter_form.png',
+    [Assembly.COSTPROFILE]:
+      'https://wc-assets.oss-cn-guangzhou.aliyuncs.com/images/component-preview/matter_costProfile.png',
+    [Assembly.DATAPROFILE]:
+      'https://wc-assets.oss-cn-guangzhou.aliyuncs.com/images/component-preview/matter_dataProfile.png'
+  }
+  return (
+    <div>
+      <Image width={1000} src={ImageUrlMap[type]} />
+    </div>
+  )
+}
+
+export default Picture

src/pages/Business/Matter/components/index.less

@@ -1,4 +1,4 @@
-.drawerTableBox {
+.assemblyContent {
   :global(.ant-pro-table) {
     width: calc(100% - 48px);
   }

src/pages/Business/Matter/index.tsx

@@ -42,7 +42,7 @@ const Matter: React.FC = () => {
     drawer.open({
       title: '组件配置',
       closeIcon: null,
-      children: <AssemblyDetail record={record} refresh={refresh} />
+      children: <AssemblyDetail assemblyID={record?.ID} refresh={refresh} />
     })
   }