feat: 111

src/components/AnimateContent/index.less

@@ -5,6 +5,7 @@
   }
   :global(.ant-page-header) {
     padding: 0;
+    max-width: 80vw;
   }
   :global(.ant-drawer-body) {
     padding: 0 24px 24px;

src/pages/Project/Created/index.tsx

@@ -50,14 +50,12 @@ const Created = () => {
       dataIndex: 'account',
       title: '账号',
       width: 116,
-      align: 'center',
       onHeaderCell: () => ({ style: { textAlign: 'center' } })
     },
     {
       dataIndex: 'name',
       title: '名称',
       width: 86,
-      align: 'center',
       onHeaderCell: () => ({ style: { textAlign: 'center' } })
     },
     {
@@ -130,6 +128,7 @@ const Created = () => {
         toolbar={{
           actions: [
             <Button
+              key="add_created_btn"
               type="primary"
               onClick={() =>
                 setState({ ...state, modalVisible: true, modalType: CreatedModalType.ADD })

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

@@ -23,22 +23,22 @@ const renderMenu = ({ dataID, source, dispatch, elements, togglePopver, id, flow
       payload: els
     })
   }
-  const edit = () => {
-    togglePopver(false)
-    // dispatch({
-    //   type: Actions.OPEN_MODAL,
-    //   payload: {
-    //     id: node.id,
-    //     type: 'relation'
-    //   }
-    // })
-  }
-  const remove = () => {
-    dispatch({
-      type: Actions.REMOVE_FLOW_NODE,
-      payload: node
-    })
-  }
+  // const edit = () => {
+  // togglePopver(false)
+  // dispatch({
+  //   type: Actions.OPEN_MODAL,
+  //   payload: {
+  //     id: node.id,
+  //     type: 'relation'
+  //   }
+  // })
+  // }
+  // const remove = () => {
+  //   dispatch({
+  //     type: Actions.REMOVE_FLOW_NODE,
+  //     payload: node
+  //   })
+  // }
 
   const addAuditor = async () => {
     const uid = buildUUID()
@@ -128,7 +128,7 @@ export function CommonEdge(props) {
 
   const [visible, setVisible] = useState(false)
   const { flowState, dispatch } = useContext(FlowContext)
-  const { elements, flowInstance, dataID } = flowState
+  const { elements, flowInstance, dataID, readPretty } = flowState
   const nodes = useStoreState(store => store.nodes)
   const markerEnd = getMarkerEnd(arrowHeadType, markerEndId)
 
@@ -160,12 +160,14 @@ export function CommonEdge(props) {
     setVisible(isShow)
   }
 
-  const onEdgeClick = (evt, id) => {
+  const onEdgeClick = () => {
     togglePopver(true)
     // evt.stopPropagation()
     // alert(`remove ${id}`)
   }
 
+  console.log(readPretty)
+
   return (
     <>
       <path id={id} style={style} className={styles.flowPath} d={d} markerEnd={markerEnd} />
@@ -175,29 +177,31 @@ export function CommonEdge(props) {
         x={edgeCenterX - foreignObjectSize / 2}
         y={edgeCenterY - foreignObjectSize / 2}>
         <div className={styles.addIcon}>
-          <Popover
-            content={renderMenu({
-              elements,
-              dispatch,
-              source,
-              togglePopver,
-              id,
-              flowInstance,
-              dataID
-            })}
-            trigger="click"
-            placement="right"
-            visible={visible}
-            destroyTooltipOnHide
-            onVisibleChange={togglePopver}
-            overlayClassName="flow-popover">
-            <Button
-              icon={<PlusOutlined />}
-              shape="circle"
-              size="small"
-              onClick={event => onEdgeClick(event, id)}
-            />
-          </Popover>
+          {!readPretty ? (
+            <Popover
+              content={renderMenu({
+                elements,
+                dispatch,
+                source,
+                togglePopver,
+                id,
+                flowInstance,
+                dataID
+              })}
+              trigger="click"
+              placement="right"
+              visible={visible}
+              destroyTooltipOnHide
+              onVisibleChange={togglePopver}
+              overlayClassName="flow-popover">
+              <Button
+                icon={<PlusOutlined />}
+                shape="circle"
+                size="small"
+                onClick={event => onEdgeClick(event, id)}
+              />
+            </Popover>
+          ) : null}
         </div>
       </foreignObject>
     </>

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

@@ -26,9 +26,15 @@ const edgeTypes: EdgeTypesType = {
 type FlowGrophProps = {
   dataID: string
   flowProcess: Elements
+  readPretty: boolean
   flowProcessData: API.ApprovalProcessItem[]
 }
-const FlowGroph: React.FC<FlowGrophProps> = ({ dataID, flowProcess, flowProcessData }) => {
+const FlowGroph: React.FC<FlowGrophProps> = ({
+  dataID,
+  flowProcess,
+  flowProcessData,
+  readPretty
+}) => {
   const { flowState, dispatch } = useContext(FlowContext)
   useEffect(() => {
     if (flowProcess?.length) {
@@ -74,9 +80,13 @@ const FlowGroph: React.FC<FlowGrophProps> = ({ dataID, flowProcess, flowProcessD
         payload: reactFlowInstance
       })
       dispatch({
-        type: Actions.SET_FOLW_DATAID,
-        payload: dataID
+        type: Actions.SET_FOLW_PROPS,
+        payload: {
+          dataID,
+          readPretty
+        }
       })
+
       setTimeout(() => {
         reactFlowInstance?.fitView()
       }, 0)

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

@@ -4,6 +4,7 @@ import { useContext } from 'react'
 import { CloseOutlined, RightOutlined } from '@ant-design/icons'
 import { removeApprovalNode } from '@/services/api/project'
 import consts from '@/utils/consts'
+import { generateElements, genreateElementEnum } from '../../utils'
 export const InputNode = () => {
   return (
     <>
@@ -36,16 +37,19 @@ export const CommonNode = props => {
   const { id, data } = props
 
   const { flowState, dispatch } = useContext(FlowContext)
-  const { flowInstance, flowData } = flowState
+  const { flowInstance, flowData, readPretty } = flowState
   const removeNode = async () => {
-    const { code = -1 } = await removeApprovalNode({ ID: dataID, segmentID: id })
+    const node = { id, data }
+    const newElements = generateElements(genreateElementEnum.DEL, flowState.elements)(node)
+    const { code = -1 } = await removeApprovalNode({
+      ID: flowState.dataID,
+      segmentID: id,
+      flowProcess: newElements
+    })
     if (code === consts.RET_CODE.SUCCESS) {
       dispatch({
         type: Actions.REMOVE_FLOW_NODE,
-        payload: {
-          id,
-          data
-        }
+        payload: { ...node, newElements }
       })
       setTimeout(() => {
         flowInstance?.fitView()
@@ -53,16 +57,16 @@ export const CommonNode = props => {
     }
   }
   const openDrawer = () => {
-    dispatch({
-      type: Actions.OPEN_MODAL,
-      payload: {
-        id
-      }
-    })
+    !readPretty &&
+      dispatch({
+        type: Actions.OPEN_MODAL,
+        payload: {
+          id
+        }
+      })
   }
 
-  const auditor = flowData.get(id)
-  console.log(auditor)
+  const auditor = flowData?.get(id)
 
   return (
     <>
@@ -89,7 +93,7 @@ export const CommonNode = props => {
           <div
             className="remove_node w-24px h-24px bg-hex-ff4d4f align-middle"
             onClick={removeNode}>
-            <CloseOutlined size={12} />
+            {!readPretty ? <CloseOutlined size={12} /> : null}
           </div>
         </div>
         <div

src/pages/Project/Verification/Detail/Flow/context/reducer.ts

@@ -3,6 +3,7 @@
 
 import { removeApprovalNode } from '@/services/api/project'
 import consts from '@/utils/consts'
+import { isNullOrUnDef } from '@/utils/is'
 import type { Elements } from 'react-flow-renderer'
 import { Actions } from '../enum'
 import { generateElements, genreateElementEnum } from '../utils'
@@ -35,28 +36,19 @@ const setFlowInstance = (state, flowInstance) => {
   return state
 }
 
-const removeFlowNode = async (state, node) => {
-  const { id } = node
-  const { flowData, elements } = state
+const removeFlowNode = (state, node) => {
+  const { id, newElements } = node
   const res = { ...state }
-  if (flowData.get(id)) {
-    const newElements = generateElements(genreateElementEnum.DEL, elements)(node)
-    const { code = -1 } = await removeApprovalNode({
-      ID: state.dataID,
-      segmentID: id,
-      flowProcess: newElements
-    })
-    if (code === consts.RET_CODE.SUCCESS) {
-      res.elements = newElements
-      flowData.delete(id)
-    }
+  if (res.flowData.get(id)) {
+    res.elements = newElements
+    res.flowData.delete(id)
   }
   return res
 }
 
-const setFlowDataId = (state, dataID) => {
-  if (dataID) {
-    return { ...state, dataID }
+const setFlowProps = (state, props) => {
+  if (!isNullOrUnDef(props)) {
+    return { ...state, ...props }
   }
   return state
 }
@@ -91,7 +83,7 @@ const handlerMap = {
   [Actions.CLOSE_MODAL]: closeModal,
   [Actions.SET_ELEMENTS]: setElements,
   [Actions.SET_FLOW_INSTANCE]: setFlowInstance,
-  [Actions.SET_FOLW_DATAID]: setFlowDataId
+  [Actions.SET_FOLW_PROPS]: setFlowProps
 }
 
 const reducer = (state, action) => {

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

@@ -2,7 +2,7 @@ export enum Actions {
   SET_ELEMENTS = 'set_elements',
   SET_FLOW_NODE = 'set_flow_node',
   SET_FLOW_INSTANCE = 'set_flow_instance',
-  SET_FOLW_DATAID = 'set_flow_dataId',
+  SET_FOLW_PROPS = 'set_flow_props',
   REMOVE_FLOW_NODE = 'remove_flow_node',
   OPEN_MODAL = 'open_modal',
   CLOSE_MODAL = 'close_modal'

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

@@ -9,9 +9,10 @@ import './index.less'
 
 type ApprovalFlowProps = {
   dataID: string
+  readPretty: boolean
 }
 
-const ApprovalFlow: React.FC<ApprovalFlowProps> = ({ dataID }) => {
+const ApprovalFlow: React.FC<ApprovalFlowProps> = ({ readPretty, dataID }) => {
   const [state, setState] = useState({
     flowProcess: null,
     flowProcessData: null
@@ -36,6 +37,7 @@ const ApprovalFlow: React.FC<ApprovalFlowProps> = ({ dataID }) => {
           <div className="h-full w-full">
             {flowProcess ? (
               <FlowGroph
+                readPretty={readPretty}
                 dataID={dataID}
                 flowProcess={flowProcess}
                 flowProcessData={flowProcessData}

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

@@ -3,12 +3,23 @@ import type { FC } from 'react'
 type ApprovalDetailProps = {
   ID: string
   name: string
+  readPretty?: boolean
   onVisibleChange: (visible: boolean) => void
 }
-const ApprovalDetail: FC<ApprovalDetailProps> = ({ ID, name, onVisibleChange }) => {
+const ApprovalDetail: FC<ApprovalDetailProps> = ({
+  ID,
+  name,
+  readPretty = false,
+  onVisibleChange
+}) => {
   return (
     <div className="w-full h-full">
-      <ApprovalFlow dataID={ID} name={name} closeAnimateContent={onVisibleChange} />
+      <ApprovalFlow
+        dataID={ID}
+        name={name}
+        closeAnimateContent={onVisibleChange}
+        readPretty={readPretty}
+      />
     </div>
   )
 }

src/pages/Project/Verification/index.tsx

@@ -20,8 +20,9 @@ const FlowList = () => {
     modalType: 'add',
     modalVisible: false,
     current: {
-      id: null,
-      name: null
+      ID: null,
+      name: null,
+      readPretty: false
     }
   })
 
@@ -46,7 +47,7 @@ const FlowList = () => {
   const columns = [
     {
       dataIndex: 'name',
-      title: '名称',
+      title: '项目名称',
       onHeaderCell: () => ({ style: { textAlign: 'center' } })
     },
     {
@@ -85,7 +86,15 @@ const FlowList = () => {
             }}>
             编辑流程名称
           </span>
-          <span className="pl-2 text-primary hover:cursor-pointer hover:text-blue-600">
+          <span
+            className="pl-2 text-primary hover:cursor-pointer hover:text-blue-600"
+            onClick={() =>
+              setState({
+                ...state,
+                visible: true,
+                current: { ...record.approval, readPretty: true }
+              })
+            }>
             查看流程图
           </span>
           {/* <Popconfirm
@@ -149,7 +158,7 @@ const FlowList = () => {
           width: '30%'
         }}
         onVisibleChange={visible => setState({ ...state, modalVisible: visible })}
-        title={`${state.modalType === 'add' ? '新建' : '更新'}审批流程`}
+        title={`${state.modalType === 'add' ? '新建' : '编辑'}审批流程`}
         formRef={formRef}
         onFinish={async values => {
           try {
@@ -158,7 +167,7 @@ const FlowList = () => {
             } else {
               await tryUpdate(values)
             }
-            message.success(`${state.modalType === 'add' ? '新增' : '更新'}成功`)
+            message.success(`${state.modalType === 'add' ? '新增' : '编辑'}成功`)
             tRef.current?.reload()
             return true
           } catch (error) {