feat: 111

src/components/AnimateContent/index.less

@@ -0,0 +1,2 @@
+.pageContainer {
+}

src/components/AnimateContent/index.tsx

@@ -0,0 +1,35 @@
+import { Button, Drawer } from 'antd'
+import { useState } from 'react'
+import type { PropsWithChildren, FC } from 'react'
+import styles from './index.less'
+type AnimateContentProps = {
+  visible: boolean
+  onVisibleChange: (visible: boolean) => void
+}
+
+const AnimateContent: FC<PropsWithChildren<AnimateContentProps>> = ({
+  visible,
+  onVisibleChange,
+  disableBreadcrumb = false,
+  children
+}) => {
+  return (
+    <div className={styles.pageContainer}>
+      <Drawer
+        getContainer={false}
+        visible={visible}
+        push={false}
+        onClose={() => onVisibleChange(false)}
+        mask={false}
+        width="calc(100vw - 256px)"
+        style={{ right: '24px', top: `${!disableBreadcrumb ? 72 + 50 : 72}px` }}
+        contentWrapperStyle={{
+          height: `calc(100vh - 96px ${!disableBreadcrumb ? '- 50px' : ''})`
+        }}>
+        {children}
+      </Drawer>
+    </div>
+  )
+}
+
+export default AnimateContent

src/components/Flow/src/components/Drawer/index.tsx

@@ -94,7 +94,7 @@ const FlowDrawer = () => {
       id: drawerConfig.nodeId,
       node: {
         approvalType: state.approvalType,
-        staffOptions: state.staffOptions
+        approvalAccounts: state.staffOptions.map(item => ({ ID: item.value, name: item.label }))
       }
     }
     dispatch({

src/components/Flow/src/components/Graph/index.tsx

@@ -36,8 +36,8 @@ export default function FlowGroph() {
 
   const controlsOptions = {
     showZoom: true,
-    showFitView: true,
-    showInteractive: true
+    showFitView: false,
+    showInteractive: false
   }
   return (
     <ReactFlow {...defaultOptions} elements={elements} nodeTypes={nodeTypes} edgeTypes={edgeTypes}>

src/components/Flow/src/components/Node/index.tsx

@@ -84,7 +84,7 @@ export const CommonNode = props => {
         <div
           className="text-14px px-4px py-5px leading-22px text-black text-opacity-85 bg-white rounded-4px h-32px flex justify-between cursor-pointer"
           onClick={openDrawer}>
-          <div>{auditor ? auditor.staffOptions?.[0]?.label : '请选择审批人'}</div>
+          <div>{auditor ? auditor.approvalAccounts?.[0]?.name : '请选择审批人'}</div>
           <div>
             <RightOutlined />
           </div>

src/components/Flow/src/components/Toolbar/index.tsx

@@ -1,22 +1,41 @@
 import { CloudUploadOutlined } from '@ant-design/icons'
 import { useContext } from 'react'
-import { Button } from 'antd'
+import { Button, message, Modal } from 'antd'
 import { FlowContext } from '../../context'
 import { addApprovalFlow } from '@/services/api/project'
+import consts from '@/utils/consts'
+import { isNode } from 'react-flow-renderer'
+import type { Elements } from 'react-flow-renderer'
 
 export default function ToolBar() {
   const { flowState } = useContext(FlowContext)
-  const handleSave = async () => {
+
+  const validate = (elements: Elements) => {
+    return elements.filter(item => isNode(item)).length > 2
+  }
+
+  const handleSave = () => {
     // const formData = {
     //   nodeData: { ...flowState.flowData }
     // }
-
-    const { code = -1, msg } = await addApprovalFlow({
-      ID: 'a905f20b-ce73-48c7-9173-8520ca9ebe66',
-      flowProcess: flowState.elements,
-      flowProcessData: Object.fromEntries(flowState.flowData.entries())
+    if (!validate(flowState.elements)) {
+      return message.warning('请添加审批人')
+    }
+    Modal.confirm({
+      title: '确认发布该审批流程',
+      okText: '确认',
+      cancelText: '取消',
+      onOk: async () => {
+        const { code = -1 } = await addApprovalFlow({
+          ID: 'a905f20b-ce73-48c7-9173-8520ca9ebe66',
+          flowProcess: flowState.elements,
+          flowProcessData: Object.fromEntries(flowState.flowData.entries())
+        })
+        if (code === consts.RET_CODE.SUCCESS) {
+          message.success('发布成功')
+        }
+      }
     })
-    console.log(msg)
   }
 
   return (

src/components/Flow/src/context/reducer.ts

@@ -12,6 +12,10 @@ export enum Actions {
   OPEN_MODAL = 'open_modal',
   CLOSE_MODAL = 'close_modal'
 }
+
+export enum ProcessType {
+  NODE = '1'
+}
 const setElements = (state, elements: Elements) => ({
   ...state,
   elements: Array.isArray(elements) ? elements : []

src/pages/Project/Verification/Detail.tsx

@@ -0,0 +1,14 @@
+import ApprovalFlow from '@/components/Flow'
+import type { FC } from 'react'
+type ApprovalDetailProps = {
+  id: string
+}
+const ApprovalDetail: FC<ApprovalDetailProps> = ({ id }) => {
+  return (
+    <div className="w-full h-full">
+      <ApprovalFlow></ApprovalFlow>
+    </div>
+  )
+}
+
+export default ApprovalDetail

src/pages/Project/Verification/index.tsx

@@ -1,60 +1,84 @@
-import ApprovalFlow from '@/components/Flow'
-import React, { useState } from 'react'
-
-import ReactFlow, {
-  removeElements,
-  addEdge,
-  MiniMap,
-  Controls,
-  Background
-} from 'react-flow-renderer'
-
-// import ButtonEdge from './components/Flow/components/Edge'
-
-const onLoad = reactFlowInstance => reactFlowInstance.fitView()
-
-const initialElements = [
-  {
-    id: 'ewb-1',
-    type: 'input',
-    data: { label: 'Input 1' },
-    position: { x: 250, y: 0 }
-  },
-  { id: 'ewb-2', data: { label: 'Node 2' }, position: { x: 250, y: 300 } },
-
-  {
-    id: 'edge-1-2',
-    source: 'ewb-1',
-    target: 'ewb-2',
-    type: 'buttonedge'
-  }
-]
-
-// const edgeTypes = {
-//   buttonedge: ButtonEdge
-// }
-
-const EdgeWithButtonFlow = () => {
-  const [elements, setElements] = useState(initialElements)
-  const onElementsRemove = elementsToRemove =>
-    setElements(els => removeElements(elementsToRemove, els))
-  const onConnect = params => setElements(els => addEdge({ ...params, type: 'buttonedge' }, els))
-
+import AnimateContent from '@/components/AnimateContent'
+import { getApprovalList } from '@/services/api/project'
+import consts from '@/utils/consts'
+import { PageContainer } from '@ant-design/pro-layout'
+import ProTable from '@ant-design/pro-table'
+import { Button } from 'antd'
+import { useState } from 'react'
+import ApprovalDetail from './Detail'
+const FlowList = () => {
+  const [state, setState] = useState({
+    params: {},
+    visible: false,
+    current: {
+      id: null
+    }
+  })
+  const columns = [
+    {
+      dataIndex: 'name',
+      title: '名称'
+    },
+    // {
+    //   dataIndex: ''
+    // }
+    {
+      dataIndex: 'opreate',
+      title: '操作',
+      render: (_, record) => (
+        <div className="divide-x divide-bg-gray-400 ">
+          <span
+            className="pr-2 text-primary cursor-pointer hover:text-hex-967bbd"
+            onClick={() => {
+              setState({ ...state, visible: true, current: { ...state.current, id: record.ID } })
+            }}>
+            编辑
+          </span>
+          <span className="px-2 text-primary cursor-pointer hover:text-hex-967bbd">设置审批人</span>
+          <span className="text-hex-F5222D pl-2 cursor-pointer hover:text-hex-967bbd">删除</span>
+        </div>
+      )
+    }
+  ]
   return (
-    // <ReactFlow
-    //   elements={elements}
-    //   onElementsRemove={onElementsRemove}
-    //   onConnect={onConnect}
-    //   snapToGrid={true}
-    //   edgeTypes={edgeTypes}
-    //   onLoad={onLoad}
-    //   key="edge-with-button">
-    //   <MiniMap />
-    //   <Controls />
-    //   <Background />
-    // </ReactFlow>
-    <ApprovalFlow />
+    <PageContainer title={false}>
+      <ProTable
+        columns={columns}
+        rowKey="ID"
+        params={state.params}
+        request={async (params, filters, sorter) => {
+          const {
+            code = -1,
+            data: { items, total }
+          } = await getApprovalList({ ...params, ...filters, ...sorter })
+          return {
+            success: code === consts.RET_CODE.SUCCESS,
+            data: items,
+            total
+          }
+        }}
+        search={false}
+        toolbar={{
+          search: {
+            onSearch: value => setState({ ...state, params: { ...state.params, search: value } })
+          },
+          actions: [
+            <Button
+              type="primary"
+              onClick={() => setState({ ...state, visible: true })}
+              key="add_flow_btn">
+              新建流程
+            </Button>
+          ]
+        }}
+      />
+      <AnimateContent
+        visible={state.visible}
+        onVisibleChange={visible => setState({ ...state, visible })}>
+        <ApprovalDetail {...state.current}></ApprovalDetail>
+      </AnimateContent>
+    </PageContainer>
   )
 }
 
-export default EdgeWithButtonFlow
+export default FlowList

src/services/api/institution.ts

@@ -117,18 +117,3 @@ export async function delOrganizationalStructure(params: API.OrganizationalStruc
     data: params
   })
 }
-
-/** 获得审批流程列表 */
-export async function getApprovalList() {
-  return request('/approval/list', {
-    method: 'GET'
-  })
-}
-
-/** 设置审批信息 */
-export async function setApproval(params: API.ApprovalSetParams) {
-  return request('/project/set/approval', {
-    method: 'POST',
-    data: params
-  })
-}

src/services/api/project.ts

@@ -47,3 +47,19 @@ export async function addApprovalFlow(params) {
     data: params
   })
 }
+
+/** 获得审批列表 */
+export async function getApprovalList(params: API.ApprovalListParams) {
+  return request('/approval/list', {
+    method: 'GET',
+    params
+  })
+}
+
+/** 设置审批信息 */
+export async function setApproval(params: API.ApprovalSetParams) {
+  return request('/project/set/approval', {
+    method: 'POST',
+    data: params
+  })
+}

src/services/api/typings.d.ts

@@ -185,13 +185,17 @@ declare namespace API {
     columnType: number
   }
 
-  type ApprovalListParams = {
+  type ApprovalItem = {
     ID: string
     name: string
-    created: string
-    createdID: string
-    createdTime: number
-    id: string
+    flowProcess: any
+    flowProcessData: any
+  }
+
+  type ApprovalList = ApprovalItem[]
+
+  type ApprovalListParams = BasicPageParams & {
+    search?: string
   }
 
   type ApprovalSetParams = {