Trang chủ Khám phá Trợ giúp
Đăng nhập
lanjianrong
/
financial_audit_console
1
0
Fork 0
Các tập tin Các vấn đề 0 Yêu cầu khéo về 0 Wiki
Browse Source

feat: 11

lanjianrong 3 năm trước cách đây
mục cha
1865111d98
commit
531f049005
4 tập tin đã thay đổi với 129 bổ sung và 6 xóa
View chưa được định nghĩa Hiển thị tình trạng sai khác
  1. 6 1
      config/routes.ts
  2. 1 2
      src/locales/zh-CN/menu.ts
  3. 66 0
      src/pages/Project/Verification/components/ButtonEdge.jsx
  4. 56 3
      src/pages/Project/Verification/index.tsx

+ 6 - 1
config/routes.ts
Xem Tập Tin 

@@ -40,7 +40,12 @@
 
       {
 
       {
 
         path: '/project/management/list',
 
         path: '/project/management/list',
 
         name: 'management-list',
 
         name: 'management-list',
 
-        component: './Project/Management/index'
 
+        component: './Project/Management'
 
+      },
 
+      {
 
+        path: '/project/verification',
 
+        name: 'verification',
 
+        component: './Project/Verification'
 
       }
 
       }
 
     ]
 
     ]
 
   },
 
   },

+ 1 - 2
src/locales/zh-CN/menu.ts
Xem Tập Tin 

@@ -17,12 +17,11 @@ export default {
 
   'menu.account.logout': '退出登录',
 
   'menu.account.logout': '退出登录',
 
   'menu.project': '项目',
 
   'menu.project': '项目',
 
   'menu.project.management-list': '项目管理',
 
   'menu.project.management-list': '项目管理',
 
-  'menu.project.management-add': '新增项目',
 
+  'menu.project.verification': '审批流程',
 
   'menu.institutions': '企事业单位',
 
   'menu.institutions': '企事业单位',
 
   'menu.institutions.company': '单位管理',
 
   'menu.institutions.company': '单位管理',
 
   'menu.institutions.staff': '人员管理',
 
   'menu.institutions.staff': '人员管理',
 
   'menu.institutions.company.list': '单位列表',
 
   'menu.institutions.company.list': '单位列表',
 
-  'menu.institutions.company.add': '新增单位',
 
   'menu.institutions.company.detail': '单位详情',
 
   'menu.institutions.company.detail': '单位详情',
 
   'menu.work-setting': '业务设置',
 
   'menu.work-setting': '业务设置',
 
   'menu.work-setting.schema': '基础数据设置',
 
   'menu.work-setting.schema': '基础数据设置',

+ 66 - 0
src/pages/Project/Verification/components/ButtonEdge.jsx
Xem Tập Tin 

@@ -0,0 +1,66 @@
 
+import React from 'react'
 
+import { getBezierPath, getEdgeCenter, getMarkerEnd } from 'react-flow-renderer'
 
+
 
+// import './index.css'
 
+
 
+const foreignObjectSize = 40
 
+
 
+const onEdgeClick = (evt, id) => {
 
+  evt.stopPropagation()
 
+  alert(`remove ${id}`)
 
+}
 
+
 
+export default function CustomEdge({
 
+  id,
 
+  sourceX,
 
+  sourceY,
 
+  targetX,
 
+  targetY,
 
+  sourcePosition,
 
+  targetPosition,
 
+  style = {},
 
+  data,
 
+  arrowHeadType,
 
+  markerEndId
 
+}) {
 
+  const edgePath = getBezierPath({
 
+    sourceX,
 
+    sourceY,
 
+    sourcePosition,
 
+    targetX,
 
+    targetY,
 
+    targetPosition
 
+  })
 
+  const markerEnd = getMarkerEnd(arrowHeadType, markerEndId)
 
+  const [edgeCenterX, edgeCenterY] = getEdgeCenter({
 
+    sourceX,
 
+    sourceY,
 
+    targetX,
 
+    targetY
 
+  })
 
+
 
+  return (
 
+    <>
 
+      <path
 
+        id={id}
 
+        style={style}
 
+        className="react-flow__edge-path"
 
+        d={edgePath}
 
+        markerEnd={markerEnd}
 
+      />
 
+      <foreignObject
 
+        width={foreignObjectSize}
 
+        height={foreignObjectSize}
 
+        x={edgeCenterX - foreignObjectSize / 2}
 
+        y={edgeCenterY - foreignObjectSize / 2}
 
+        className="edgebutton-foreignobject"
 
+        requiredExtensions="http://www.w3.org/1999/xhtml">
 
+        <body>
 
+          <button className="edgebutton" onClick={event => onEdgeClick(event, id)}>
 
+            ×
 
+          </button>
 
+        </body>
 
+      </foreignObject>
 
+    </>
 
+  )
 
+}

+ 56 - 3
src/pages/Project/Verification/index.tsx
Xem Tập Tin 

@@ -1,5 +1,58 @@
 
-const Verification = () => {
 
-  return <div></div>
 
+import React, { useState } from 'react'
 
+
 
+import ReactFlow, {
 
+  removeElements,
 
+  addEdge,
 
+  MiniMap,
 
+  Controls,
 
+  Background
 
+} from 'react-flow-renderer'
 
+
 
+import ButtonEdge from './components/ButtonEdge'
 
+
 
+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))
 
+
 
+  return (
 
+    <ReactFlow
 
+      elements={elements}
 
+      onElementsRemove={onElementsRemove}
 
+      onConnect={onConnect}
 
+      snapToGrid={true}
 
+      edgeTypes={edgeTypes}
 
+      onLoad={onLoad}
 
+      key="edge-with-button">
 
+      <MiniMap />
 
+      <Controls />
 
+      <Background />
 
+    </ReactFlow>
 
+  )
 
 }
 
 }
 
 
 
-export default Verification
 
+export default EdgeWithButtonFlow