feat: 流程配置增加允许添加下一环节配置

src/pages/Project/Verification/Detail/Flow/components/Drawer/ParticipantCard.tsx

@@ -1,9 +1,11 @@
-import React, { useEffect, useState } from 'react'
+import React, { useContext, useEffect, useMemo, useState } from 'react'
 import { ParticipantMode } from '../../enum'
 import { ConfigureType } from '../../enum'
 import { queryAccountList } from '@/services/api/institution'
 import { Col, Collapse, Row, Select, Switch } from 'antd'
 import { useRequest } from 'umi'
+import { eId, FlowContext } from '../../context'
+import { isEdge, isNode } from 'react-flow-renderer'
 
 type ParticipantCardProps = {
   defaultData: {
@@ -17,14 +19,6 @@ type ParticipantCardProps = {
   updateAction: (values: Recordable<string>) => void
 }
 
-const configureArr = [
-  // ConfigureType.ADDSIGN,
-  ConfigureType.ASSISTAUDIT,
-  ConfigureType.RETURN
-  // ConfigureType.REVOKE,
-  // ConfigureType.SKIP
-]
-
 const configureItemTitle = {
   [ConfigureType.ADDSIGN]: {
     name: '允许加签',
@@ -45,6 +39,10 @@ const configureItemTitle = {
   [ConfigureType.SKIP]: {
     name: '允许跳过',
     short: '跳'
+  },
+  [ConfigureType.NEXTSECTOR]: {
+    name: '允许添加下一环节',
+    short: '环'
   }
 }
 const ParticipantCard: React.FC<ParticipantCardProps> = ({
@@ -52,24 +50,50 @@ const ParticipantCard: React.FC<ParticipantCardProps> = ({
   defaultData,
   institutionList
 }) => {
-  const [staffList, setStaffList] = useState([])
+  const { flowState } = useContext(FlowContext)
+  const { modalConfig: { nodeID = null } = {}, elements } = flowState
+  const curNode = elements.filter(item => isNode(item)).find(item => item.id === nodeID)
+  const lastEdge = elements.filter(item => isEdge(item)).find(item => item.target === eId)
+
+  const [state, setState] = useState({
+    configureArr: [
+      // ConfigureType.ADDSIGN,
+      ConfigureType.ASSISTAUDIT,
+      ConfigureType.RETURN
+      // ConfigureType.REVOKE,
+      // ConfigureType.SKIP
+    ],
+    staffList: []
+  })
   const { run: tryUpdateStaffList } = useRequest(
     dataID => queryAccountList({ current: 1, pageSize: 214000, dataID, enable: ['true'] }),
     {
       manual: true,
       onSuccess(result) {
-        setStaffList(result.items.map(item => ({ label: item.name, value: item.ID })))
+        setState({
+          ...state,
+          staffList: result.items.map(item => ({ label: item.name, value: item.ID }))
+        })
       }
     }
   )
 
   useEffect(() => {
-    if (defaultData.ID && defaultData.institutionID && !staffList?.length) {
+    if (defaultData.ID && defaultData.institutionID && !state.staffList?.length) {
       tryUpdateStaffList(defaultData.institutionID)
     }
   }, [])
 
-  if (defaultData.ID && !staffList?.length) return null
+  useEffect(() => {
+    if ([ParticipantMode.ACCOUNT].includes(defaultData.participantMode)) {
+      // 当前的node元素
+      // 最后一个edge及诶单
+      if (lastEdge && curNode && lastEdge.source === curNode.id) {
+        setState({ ...state, configureArr: [...state.configureArr, ConfigureType.NEXTSECTOR] })
+      }
+    }
+  }, [defaultData.participantMode, curNode, lastEdge])
+  if (defaultData.ID && !state.staffList?.length) return null
   return (
     <>
       <div className="children:mb-4">
@@ -101,7 +125,7 @@ const ParticipantCard: React.FC<ParticipantCardProps> = ({
           <Select
             className="w-full"
             defaultValue={defaultData.ID}
-            options={staffList}
+            options={state.staffList}
             onChange={(_, options) => {
               updateAction({ ...defaultData, ID: options?.value, name: options?.label })
             }}
@@ -132,7 +156,7 @@ const ParticipantCard: React.FC<ParticipantCardProps> = ({
           }
           key="1">
           <Row>
-            {configureArr.map(item => (
+            {state.configureArr.map(item => (
               <Col span={8} key={item}>
                 <div className="py-2 flex flex-row items-center ">
                   <div className="mr-2">{configureItemTitle[item]?.name}</div>

src/pages/Project/Verification/Detail/Flow/components/Drawer/index.tsx

@@ -11,6 +11,7 @@ import ParticipantCard from './ParticipantCard'
 import { useRequest } from 'umi'
 import { saveApprovalParticipant } from '@/services/api/project'
 import consts from '@/utils/consts'
+import classNames from 'classnames'
 
 const FlowDrawer = () => {
   const { flowState, dispatch } = useContext(FlowContext)
@@ -145,11 +146,11 @@ const FlowDrawer = () => {
       }
       return (
         <div
-          className={[
+          className={classNames(
             'shadow-base border rounded-md flex flex-col justify-between px-4 py-2 mt-6',
             styles.participantCard,
-            state.validityIDs.includes(participant.uid) ? 'border-red-500' : ''
-          ].join(' ')}
+            { 'border-red-500': state.validityIDs.includes(participant.uid) }
+          )}
           key={participant.uid}>
           <div className="flex flex-row justify-between">
             <div className="text-base font-medium">参与者</div>

src/pages/Project/Verification/Detail/Flow/components/Edge/index.less

@@ -8,9 +8,11 @@
   justify-content: center;
   padding: 10px;
   :global(.ant-btn) {
+    // color: #e4e4e7;
     // box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
     transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
     &:hover {
+      // color: #40a9ff;
       // box-shadow: 0 13px 27px 0 rgba(0, 0, 0, 0.1);
       transform: scale(1.3);
     }

src/pages/Project/Verification/Detail/Flow/components/Edge/index.tsx

@@ -1,5 +1,5 @@
 import { buildUUID } from '@/utils/uuid'
-import { PlusOutlined, SolutionOutlined } from '@ant-design/icons'
+import { SolutionOutlined } from '@ant-design/icons'
 import { Button, Popover } from 'antd'
 import React, { useMemo, useState, useContext } from 'react'
 import { getBezierPath, getEdgeCenter, getMarkerEnd, useStoreState } from 'react-flow-renderer'
@@ -11,6 +11,7 @@ import 'antd/lib/button/style/css'
 import consts from '@/utils/consts'
 import useLoading from '../../hooks/useLoading'
 import IconFont from '@/components/IconFont'
+import { ConfigureType } from '../../enum'
 const foreignObjectSize = 50
 
 export enum SectorType {
@@ -133,6 +134,7 @@ export function CommonEdge(props) {
   const [visible, setVisible] = useState(false)
   const { flowState, dispatch } = useContext(FlowContext)
   const { elements, flowInstance, dataID, readPretty } = flowState
+  // source连接的node节点
   const nodes = useStoreState(store => store.nodes)
   const markerEnd = getMarkerEnd(arrowHeadType, markerEndId)
 
@@ -173,13 +175,13 @@ export function CommonEdge(props) {
   return (
     <>
       <path id={id} style={style} className={styles.flowPath} d={d} markerEnd={markerEnd} />
-      <foreignObject
-        width={foreignObjectSize}
-        height={foreignObjectSize}
-        x={edgeCenterX - foreignObjectSize / 2}
-        y={edgeCenterY - foreignObjectSize / 2}>
-        <div className={styles.addIcon}>
-          {!readPretty ? (
+      {!readPretty && (
+        <foreignObject
+          width={foreignObjectSize}
+          height={foreignObjectSize}
+          x={edgeCenterX - foreignObjectSize / 2}
+          y={edgeCenterY - foreignObjectSize / 2}>
+          <div className={styles.addIcon}>
             <Popover
               content={RenderMenu({
                 elements,
@@ -203,9 +205,9 @@ export function CommonEdge(props) {
                 onClick={event => onEdgeClick(event, id)}
               />
             </Popover>
-          ) : null}
-        </div>
-      </foreignObject>
+          </div>
+        </foreignObject>
+      )}
     </>
   )
 }

src/pages/Project/Verification/Detail/Flow/components/Graph/index.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from 'react'
+import React, { useContext, useEffect, useMemo } from 'react'
 import ReactFlow, { Background, MiniMap, Controls } from 'react-flow-renderer'
 import { Actions, FlowContext, initialElements } from '../../context'
 
@@ -6,12 +6,6 @@ import type { Elements, NodeTypesType, EdgeTypesType } from 'react-flow-renderer
 import { CommonNode, InputNode, OutputNode } from '../Node'
 import { CommonEdge } from '../Edge'
 
-const nodeTypes: NodeTypesType = {
-  start: InputNode,
-  end: OutputNode,
-  common: CommonNode
-}
-
 const edgeTypes: EdgeTypesType = {
   common: CommonEdge
 }
@@ -35,6 +29,15 @@ const FlowGroph: React.FC<FlowGrophProps> = ({
   readPretty
 }) => {
   const { flowState, dispatch } = useContext(FlowContext)
+  const nodeTypes: NodeTypesType = useMemo(
+    () => ({
+      start: InputNode,
+      end: OutputNode,
+      common: CommonNode
+    }),
+    []
+  )
+
   useEffect(() => {
     if (flowProcess?.length) {
       dispatch({
@@ -97,6 +100,7 @@ const FlowGroph: React.FC<FlowGrophProps> = ({
     showFitView: false,
     showInteractive: false
   }
+
   return (
     <ReactFlow {...defaultOptions} elements={elements} nodeTypes={nodeTypes} edgeTypes={edgeTypes}>
       <MiniMap />

src/pages/Project/Verification/Detail/Flow/context/index.tsx

@@ -29,14 +29,12 @@ export const initialElements = [
     position: { x: 500, y: 0 },
     data: { sort: 0 }
   },
-
   {
     id: '83282d24-22d9-4bd8-a6bf-71d6df94f29e',
     type: 'end',
     position: { x: 500, y: 200 },
     data: { sort: 1 }
   },
-
   {
     id: '29b4469f-9522-4688-8a35-a57ca4875a7a',
     source: '89e43a46-88da-4243-ad0b-3c701819ff63',
@@ -59,4 +57,6 @@ const FlowContextProvider = props => {
   return <FlowContext.Provider value={{ flowState, dispatch }}>{children}</FlowContext.Provider>
 }
 
+export const sId = '89e43a46-88da-4243-ad0b-3c701819ff63'
+export const eId = '83282d24-22d9-4bd8-a6bf-71d6df94f29e'
 export { FlowContext, FlowContextProvider, Actions }

src/pages/Project/Verification/Detail/Flow/enum/index.ts

@@ -35,5 +35,6 @@ export enum ConfigureType {
   RETURN = 'return',
   REVOKE = 'revoke',
   ASSISTAUDIT = 'assistAudit',
-  ADDSIGN = 'addSign'
+  ADDSIGN = 'addSign',
+  NEXTSECTOR = 'nextSector'
 }