Browse Source

fix: 步骤配置-事项权限回显逻辑调整

lanjianrong 2 years ago
parent
commit
ccf7d9e9f0

+ 10 - 9
src/pages/Business/Matter/components/AssemblyDetail.tsx

@@ -100,15 +100,16 @@ const AssemblyDetail: React.FC<AssemblyDetailProps> = ({ assemblyID, event$ }) =
       title: '操作',
       dataIndex: 'operate',
       align: 'center',
-      renderText: (_, record) => (
-        <div className="divide-x divide-bg-gray-400 flex flex-row items-center">
-          <span
-            className="px-2 text-primary cursor-pointer hover:text-hex-967bbd"
-            onClick={() => openDesignable(record.type)}>
-            组件配置
-          </span>
-        </div>
-      )
+      renderText: (_, record) =>
+        record.type === Assembly.FORM ? (
+          <div className="divide-x divide-bg-gray-400 flex flex-row items-center">
+            <span
+              className="px-2 text-primary cursor-pointer hover:text-hex-967bbd"
+              onClick={() => openDesignable(record.type)}>
+              组件配置
+            </span>
+          </div>
+        ) : null
     }
   ]
 

+ 32 - 24
src/pages/Business/Step/components/Flow/components/Drawer/Auditor/MatterPermission.tsx

@@ -1,4 +1,5 @@
 import { Assembly, assemblyToMap } from '@/pages/Business/Matter/components/AssemblyDetail'
+import { InfoCircleOutlined } from '@ant-design/icons'
 import { Card, Checkbox } from 'antd'
 import { flatMapDeep } from 'lodash'
 
@@ -15,35 +16,42 @@ type MatterPermissionProps = {
 
 const MatterPermission: React.FC<MatterPermissionProps> = ({ defaultValue, toggleMatter, matterList }) => {
   const matterFlattenList = flatMapDeep(matterList, item => [item, ...(item?.children || [])])
+
   return (
     <div
       style={{ maxHeight: document.querySelector('body')?.clientHeight - 186 }}
       className="overflow-y-auto">
-      {defaultValue.map(matter => (
-        <Card
-          key={matter.matterID}
-          size="small"
-          className="mb-2!"
-          title={matterFlattenList.find(item => item.ID === matter.matterID)?.name}>
-          {matterFlattenList
-            .find(item => item.ID === matter.matterID)
-            ?.assembly?.map((item: Assembly) => (
-              <div key={item} className="flex justify-between items-center my-1">
-                <div className="flex-1">{assemblyToMap[item].name}</div>
-                <div className="w-40">
-                  <Checkbox.Group
-                    defaultValue={matter[assemblyToMap[item].permKey]}
-                    options={[
-                      { label: '查看', value: 'view' },
-                      { label: '编辑', value: 'edit' }
-                    ]}
-                    onChange={checkedValue => toggleMatter(matter.matterID, { [item]: checkedValue })}
-                  />
-                </div>
+      {defaultValue.map(matter => {
+        const currMatter = matterFlattenList.find(item => item.ID === matter.matterID)
+        return (
+          <Card key={matter.matterID} size="small" className="mb-2!" title={currMatter?.name}>
+            {!currMatter?.assembly?.length ? (
+              <div className="p-2">
+                <InfoCircleOutlined style={{ color: '#FEA100' }} />
+                <span className="ml-2">当前事项未绑定组件</span>
               </div>
-            ))}
-        </Card>
-      ))}
+            ) : (
+              currMatter?.assembly?.map((item: Assembly) => (
+                <div key={item} className="flex justify-between items-center my-1">
+                  <div className="flex-1">{assemblyToMap[item].name}</div>
+                  <div className="w-40">
+                    <Checkbox.Group
+                      defaultValue={matter[assemblyToMap[item].permKey]}
+                      options={[
+                        { label: '查看', value: 'view' },
+                        { label: '编辑', value: 'edit' }
+                      ]}
+                      onChange={checkedValue =>
+                        toggleMatter(matter.matterID, { [assemblyToMap[item].permKey]: checkedValue })
+                      }
+                    />
+                  </div>
+                </div>
+              ))
+            )}
+          </Card>
+        )
+      })}
     </div>
   )
 }

+ 1 - 3
src/pages/Business/Step/components/Flow/components/Toolbar/index.tsx

@@ -5,12 +5,10 @@ import { FlowContext } from '../../context'
 import { addApprovalFlow } from '@/services/api/project'
 import consts from '@/utils/consts'
 import { transformToApprovalProcess } from '../../shared/transformer'
-import useEventEmitter from '@/utils/emit'
 import { EmitterType } from '@/enums/emit'
 
 export default function ToolBar() {
   const { flowStore } = useContext(FlowContext)
-  const event$ = useEventEmitter({ global: true })
   const handleSave = () => {
     Modal.confirm({
       title: '确定发布该审批流程',
@@ -25,7 +23,7 @@ export default function ToolBar() {
         })
         if (code === consts.RET_CODE.SUCCESS) {
           message.success('发布成功')
-          event$.emit(EmitterType.BUSINESS_STEP_REFRESH, { gatherID, businessType })
+          flowStore.event$.emit(EmitterType.BUSINESS_STEP_REFRESH, { gatherID, businessType })
         }
       }
     })

+ 6 - 2
src/pages/Business/Step/components/Flow/context/index.tsx

@@ -5,6 +5,7 @@ import type { Elements, OnLoadParams } from 'react-flow-renderer'
 import { transformElements } from '@/components/Flow/src/shared/transformer'
 import { FlowTreeNode } from '@/components/Flow/src/type'
 import { DrawerAction } from '@/components/Drawer'
+import { EventEmitter } from '@/utils/emit/event'
 
 export type FlowContextState = {
   dataID: string
@@ -15,6 +16,7 @@ export type FlowContextState = {
   executorList: API.ExecutorItem[]
   matterList: API.MatterItem[]
   conditionValueToMap: Record<string, string>
+  event$: EventEmitter<unknown>
 }
 type FlowContextProviderProps = {
   children: React.ReactNode
@@ -22,6 +24,7 @@ type FlowContextProviderProps = {
   dataID: string
   executorList: API.ExecutorItem[]
   matterList: API.MatterItem[]
+  event$: EventEmitter<unknown>
 }
 
 export type DispatchAction = Dispatch<{
@@ -32,14 +35,15 @@ export type DispatchAction = Dispatch<{
 const FlowContext = createContext<{ flowStore: FlowContextState; dispatch: DispatchAction }>({})
 
 const FlowContextProvider: React.FC<FlowContextProviderProps> = props => {
-  const { children, initialProcess = [], dataID, executorList = [], matterList = [] } = props
+  const { children, initialProcess = [], dataID, executorList = [], matterList = [], event$ } = props
   const [flowStore, dispatch] = useReducer(reducer, {
     process: initialProcess,
     elements: transformElements(initialProcess),
     dataID,
     executorList,
     matterList,
-    conditionValueToMap: {}
+    conditionValueToMap: {},
+    event$
   })
   return <FlowContext.Provider value={{ flowStore, dispatch }}>{children}</FlowContext.Provider>
 }

+ 2 - 0
src/pages/Business/Step/components/Flow/index.tsx

@@ -4,12 +4,14 @@ import FlowGroph from './components/Graph'
 import { FlowTreeNode } from '@/components/Flow/src/type'
 import './index.less'
 import ToolBar from './components/Toolbar'
+import { EventEmitter } from '@/utils/emit/event'
 
 type ApprovalFlowProps<T> = {
   defaultValue?: FlowTreeNode<T>[]
   dataID: string
   executorList: API.ExecutorItem[]
   matterList: any[]
+  event$: EventEmitter<unknown>
 }
 
 function ApprovalFlow<T>({ defaultValue, dataID, executorList, matterList, event$ }: ApprovalFlowProps<T>) {

+ 2 - 1
src/pages/Business/Step/index.tsx

@@ -56,7 +56,7 @@ const Step: React.FC<StepProps> = ({ executorMap, matterMap, conditionSchema, di
     }
   }
 
-  const event$ = useEventEmitter({ global: true })
+  const event$ = useEventEmitter()
   event$.useSubscription(EmitterType.BUSINESS_STEP_REFRESH, ({ params }) => {
     const { gatherID, businessType } = params[0]
 
@@ -119,6 +119,7 @@ const Step: React.FC<StepProps> = ({ executorMap, matterMap, conditionSchema, di
           executorList={executorMap[state.activeKey]}
           matterList={matterMap[state.activeKey]}
           dataID={state.activeKey}
+          event$={event$}
           defaultValue={transformToFlowNodes(state.process.detail)}
         />
       )