feat: 事项设置组件配置的相关弹窗

src/components/Drawer/index.tsx

@@ -14,6 +14,7 @@ import type { DrawerProps } from 'antd'
 
 import styles from './index.less'
 import classNames from 'classnames'
+import { isNullOrUnDef } from '@/utils/is'
 type DrawerHocProps = {
   mode?: 'default' | 'innerEdge'
 } & DrawerProps
@@ -112,10 +113,10 @@ const DrawerHoc = memo(
       [contentWrapperStyle, mode, wrapHeight]
     )
 
-    const mergedCloseIcon = useMemo(
-      () => (mode === 'innerEdge' ? <Button onClick={onClose}>返回</Button> : closeIcon),
-      [mode, closeIcon]
-    )
+    const mergedCloseIcon = useMemo(() => {
+      if (!isNullOrUnDef(closeIcon)) return closeIcon
+      return mode === 'innerEdge' ? <Button onClick={onClose}>返回</Button> : closeIcon, [mode, closeIcon]
+    })
 
     const mergedMask = useMemo(() => (mode === 'innerEdge' ? false : mask), [mode, mask])
     return (

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

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const AddAssemblyModal = () => {
+  return (
+    <div>
+      <span>组件列表</span>
+    </div>
+  )
+}
+
+export default AddAssemblyModal

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

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const AssemblyDetail = () => {
+  return (
+    <div className="mt-6">
+      <div className="max-w-800px">组件详情</div>
+    </div>
+  )
+}
+
+export default AssemblyDetail

src/pages/Business/Matter/hooks/useRowScript.tsx

@@ -17,7 +17,7 @@ const MatterTitleEnum = {
 }
 
 interface IState {
-  treeList?: API.MatterParams[]
+  treeList?: API.MatterTreeItem[]
   expandTreeIds: []
 }
 
@@ -29,10 +29,10 @@ export function useRowScript(modal: ModalAction) {
     loading
   } = useRequest(queryMatterTree, {
     manual: true,
-    onSuccess: (result?: API.MatterParams[]) => {
-      function expandTreeList(data: API.MatterParams[]): string[] {
+    onSuccess: (result?: API.MatterTreeItem[]) => {
+      function expandTreeList(data: API.MatterTreeItem[]): string[] {
         let idArr: string[] = []
-        data.forEach((item: API.MatterParams) => {
+        data.forEach((item: API.MatterTreeItem) => {
           if (item.children?.length) {
             idArr.push(item.ID)
             const childIDs = expandTreeList(item.children)
@@ -78,7 +78,7 @@ export function useRowScript(modal: ModalAction) {
           />
         </ProForm>
       ),
-      onOk: async (values: API.MatterItem) => {
+      onOk: async (values: API.AddMatterParams) => {
         let requestFn: Nullable<() => Promise<viod>> = null
         requestFn = addMatter
         try {
@@ -122,7 +122,7 @@ export function useRowScript(modal: ModalAction) {
           />
         </ProForm>
       ),
-      onOk: async (values: API.MatterItem) => {
+      onOk: async (values: API.UpdateMatterParams) => {
         let requestFn: Nullable<() => Promise<viod>> = null
         requestFn = updateMatter
         try {

src/pages/Business/Matter/index.tsx

@@ -3,9 +3,12 @@ import { PageContainer } from '@ant-design/pro-layout'
 import ProTable from '@ant-design/pro-table'
 import { Button } from 'antd'
 import { ColumnsType } from 'antd/lib/table'
-import { useState } from 'react'
+import { useRef, useState } from 'react'
+import useDrawer from '@/components/Drawer'
 import LeftMenu from '../RuleCode/components/LeftMenu'
+import AssemblyDetail from './components/AssemblyDetail'
 import { MatterType, useRowScript } from './hooks/useRowScript'
+import AddAssemblyModal from './components/AddAssemblyModal'
 
 interface IState {
   subjectParams: {
@@ -16,6 +19,8 @@ interface IState {
 }
 
 const Matter: React.FC = () => {
+  const tRef = useRef<ActionType>(null)
+  const [drawer, DrawerDom] = useDrawer()
   const [state, setState] = useState<IState>({
     subjectParams: {
       subjectID: '',
@@ -27,7 +32,27 @@ const Matter: React.FC = () => {
   const [modal, ModalDOM] = useModal()
   const { query, loading, add, edit, deleteMatter, treeList = [], expandTreeIds = [] } = useRowScript(modal)
 
-  const columns: ColumnsType<API.MatterParams> = [
+  const openDrawer = () => {
+    drawer.open({
+      title: '组件配置',
+      closeIcon: (
+        <Button
+          onClick={() => {
+            modal.open({
+              title: '添加组件',
+              okText: '确认',
+              cancelText: '取消',
+              children: <AddAssemblyModal />
+            })
+          }}>
+          添加组件
+        </Button>
+      ),
+      children: <AssemblyDetail reload={() => tRef.current?.reload()} />
+    })
+  }
+
+  const columns: ColumnsType<API.MatterTreeItem> = [
     {
       title: '分类',
       dataIndex: 'name',
@@ -61,6 +86,11 @@ const Matter: React.FC = () => {
             onClick={() => edit(record, state.subjectParams)}>
             编辑
           </span>
+          {record.matterType === MatterType.MATTER ? (
+            <span className="px-2 text-primary cursor-pointer hover:text-hex-967bbd" onClick={openDrawer}>
+              组件配置
+            </span>
+          ) : null}
           <span
             className={'pl-2 text-red-500 cursor-pointer hover:text-red-600'}
             onClick={() => deleteMatter(record.ID, record.children)}>
@@ -76,6 +106,7 @@ const Matter: React.FC = () => {
     setState({ ...state, subjectParams: { ...state.subjectParams, subjectID, businessType } })
     query({ subjectID, businessType })
   }
+
   return (
     <PageContainer title={false}>
       <div className="h-full w-full flex flex-row">
@@ -84,6 +115,7 @@ const Matter: React.FC = () => {
           <ProTable
             search={false}
             rowKey="ID"
+            actionRef={tRef}
             headerTitle={
               <div className="flex flex-nowrap justify-start items-center">
                 <div className="children:mx-1 px-1 py-2 ">
@@ -129,6 +161,7 @@ const Matter: React.FC = () => {
         </div>
       </div>
       {ModalDOM}
+      {DrawerDom}
     </PageContainer>
   )
 }