Home Explore Help
Sign In
lanjianrong
/
financial_audit_console
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

feat: 1

lanjianrong 3 years ago
parent
d4ecf266d5
commit
fe6c4a6d1a
14 changed files with 224 additions and 63 deletions
Unified View Show Diff Stats
  1. 0 0
      src/components/Flow/index.d.ts
  2. 0 0
      src/components/Flow/index.ts
  3. 18 20
      src/pages/Project/Verification/components/ButtonEdge.jsx
  4. 24 0
      src/components/Flow/src/components/Node/index.tsx
  5. 16 0
      src/components/Flow/src/components/Toolbar/index.tsx
  6. 18 0
      src/components/Flow/src/components/index.less
  7. 30 0
      src/components/Flow/src/context/index.tsx
  8. 0 0
      src/components/Flow/src/context/reducer.js
  9. 0 0
      src/components/Flow/src/index.less
  10. 74 0
      src/components/Flow/src/index.tsx
  11. 5 3
      src/pages/Institutions/Company/Detail/components/Staff.tsx
  12. 1 3
      src/pages/Institutions/Staff/components/StaffDrawer.tsx
  13. 18 16
      src/pages/Project/Verification/index.tsx
  14. 20 21
      src/typings.d.ts

+ 0 - 0
src/components/Flow/index.d.ts
View File


+ 0 - 0
src/components/Flow/index.ts
View File


+ 18 - 20
src/pages/Project/Verification/components/ButtonEdge.jsx
View File 

@@ -1,16 +1,12 @@
 
+import { PlusOutlined } from '@ant-design/icons'
 
+import { Button } from 'antd'
 
 import React from 'react'
 
 import React from 'react'
 
 import { getBezierPath, getEdgeCenter, getMarkerEnd } from 'react-flow-renderer'
 
 import { getBezierPath, getEdgeCenter, getMarkerEnd } from 'react-flow-renderer'
 
-
 
-// import './index.css'
 
+import styles from './index.less'
 
 
 
 const foreignObjectSize = 40
 
 const foreignObjectSize = 40
 
 
 
-const onEdgeClick = (evt, id) => {
 
-  evt.stopPropagation()
 
-  alert(`remove ${id}`)
 
-}
 
-
 
-export default function CustomEdge({
 
+export function ButtonEdge({
 
   id,
 
   id,
 
   sourceX,
 
   sourceX,
 
   sourceY,
 
   sourceY,
 
@@ -39,15 +35,14 @@ export default function CustomEdge({
 
     targetY
 
     targetY
 
   })
 
   })
 
 
 
+  const onEdgeClick = (evt, id) => {
 
+    evt.stopPropagation()
 
+    alert(`remove ${id}`)
 
+  }
 
+
 
   return (
 
   return (
 
     <>
 
     <>
 
-      <path
 
-        id={id}
 
-        style={style}
 
-        className="react-flow__edge-path"
 
-        d={edgePath}
 
-        markerEnd={markerEnd}
 
-      />
 
+      <path id={id} style={style} className={styles.flowPath} d={edgePath} markerEnd={markerEnd} />
 
       <foreignObject
 
       <foreignObject
 
         width={foreignObjectSize}
 
         width={foreignObjectSize}
 
         height={foreignObjectSize}
 
         height={foreignObjectSize}
 
@@ -55,11 +50,14 @@ export default function CustomEdge({
 
         y={edgeCenterY - foreignObjectSize / 2}
 
         y={edgeCenterY - foreignObjectSize / 2}
 
         className="edgebutton-foreignobject"
 
         className="edgebutton-foreignobject"
 
         requiredExtensions="http://www.w3.org/1999/xhtml">
 
         requiredExtensions="http://www.w3.org/1999/xhtml">
 
-        <body>
 
-          <button className="edgebutton" onClick={event => onEdgeClick(event, id)}>
 
-            ×
 
-          </button>
 
-        </body>
 
+        <div className={styles.addIcon}>
 
+          <Button
 
+            icon={<PlusOutlined />}
 
+            shape="circle"
 
+            size="small"
 
+            onClick={event => onEdgeClick(event, id)}
 
+          />
 
+        </div>
 
       </foreignObject>
 
       </foreignObject>
 
     </>
 
     </>
 
   )
 
   )

+ 24 - 0
src/components/Flow/src/components/Node/index.tsx
View File 

@@ -0,0 +1,24 @@
 
+import { Handle } from 'react-flow-renderer'
 
+
 
+export const InputNode = () => {
 
+  return (
 
+    <>
 
+      <div className="rounded-md shadow-card border min-h-18 w-52">
 
+        <div className="bg-hex-15388B text-light-500 leading-6 h-6 px-4 rounded-t-md text-12px">
 
+          发起人
 
+        </div>
 
+        <div className="text-14px p-4">具有新建权限的员工</div>
 
+      </div>
 
+      <Handle type="source" id="e-1" position="bottom" />
 
+    </>
 
+  )
 
+}
 
+
 
+export const OutputNode = () => {
 
+  return (
 
+    <>
 
+      <Handle type="target" id="e-1" position="top" />
 
+      <div className="px-4 pt-2 pb-4 w-52 text-center">流程结束</div>
 
+    </>
 
+  )
 
+}

+ 16 - 0
src/components/Flow/src/components/Toolbar/index.tsx
View File 

@@ -0,0 +1,16 @@
 
+import { Button } from 'antd'
 
+
 
+export default function ToolBar() {
 
+  // 保存
 
+  const handleSave = () => {}
 
+
 
+  // 重置节点
 
+  const handleRest = () => {}
 
+
 
+  return (
 
+    <div className="py-2 px-4 text-right children:mx-2">
 
+      <Button onClick={handleRest}>重置</Button>
 
+      <Button onClick={handleSave}>保存</Button>
 
+    </div>
 
+  )
 
+}

+ 18 - 0
src/components/Flow/src/components/index.less
View File 

@@ -0,0 +1,18 @@
 
+.flowPath {
 
+  stroke: #b1b1b7;
 
+  stroke-width: 1;
 
+}
 
+.addIcon {
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  padding: 6px;
 
+  :global(.ant-btn) {
 
+    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
 
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 
+    &:hover {
 
+      box-shadow: 0 13px 27px 0 rgb(0 0 0 / 10%);
 
+      transform: scale(1.3);
 
+    }
 
+  }
 
+}

+ 30 - 0
src/components/Flow/src/context/index.tsx
View File 

@@ -0,0 +1,30 @@
 
+import React, { createContext, useReducer } from 'react'
 
+import reducer from './reducer'
 
+import * as Actions from './actions'
 
+
 
+import type { Elements } from 'react-flow-renderer'
 
+
 
+const FlowContext = createContext()
 
+
 
+type InitialState = {
 
+  elements: Elements
 
+  flowData: Map<any, any>
 
+}
 
+const initialState: InitialState = {
 
+  // node节点或者是edge
 
+  elements: [],
 
+  flowData: new Map(),
 
+  modalConfig: {
 
+    visible: false,
 
+    nodeType: '',
 
+    nodeID: ''
 
+  }
 
+}
 
+
 
+const FlowContextProvider = props => {
 
+  const { children } = props
 
+  const [state, dispatch] = useReducer(reducer, initialState)
 
+  return <FlowContext.Provider value={{ state, dispatch }}>{children}</FlowContext.Provider>
 
+}
 
+
 
+export { FlowContext, FlowContextProvider, Actions }

+ 0 - 0
src/components/Flow/src/context/reducer.js
View File


+ 0 - 0
src/components/Flow/src/index.less
View File


+ 74 - 0
src/components/Flow/src/index.tsx
View File 

@@ -0,0 +1,74 @@
 
+import React, { useState, useReducer, useContext } from 'react'
 
+import ReactFlow, {
 
+  removeElements,
 
+  addEdge,
 
+  MiniMap,
 
+  Controls,
 
+  Background
 
+} from 'react-flow-renderer'
 
+import type { FC } from 'react'
 
+import type { Elements, NodeTypesType, EdgeTypesType } from 'react-flow-renderer'
 
+
 
+import './index.less'
 
+import { InputNode, OutputNode } from './components/Node'
 
+import { ButtonEdge } from './components/Edge/Edge'
 
+
 
+type ApprovalFlowProps<T = any> = {
 
+  elements: Elements<T>
 
+}
 
+
 
+const nodeTypes: NodeTypesType = {
 
+  start: InputNode,
 
+  end: OutputNode
 
+}
 
+
 
+const edgeTypes: EdgeTypesType = {
 
+  add: ButtonEdge
 
+}
 
+
 
+const flowContext = React.createContext()
 
+
 
+function reducer(state, action) {
 
+  switch (action.type) {
 
+    case 'reset':
 
+      return initialState
 
+    case 'increment':
 
+      return { count: state.count + 1 }
 
+    case 'decrement':
 
+      return { count: state.count - 1 }
 
+    default:
 
+      return state
 
+  }
 
+}
 
+
 
+const initialElements = [
 
+  {
 
+    id: 'ewb-1',
 
+    type: 'start',
 
+    position: { x: 250, y: 0 }
 
+  },
 
+  { id: 'ewb-2', type: 'end', position: { x: 250, y: 300 } },
 
+
 
+  {
 
+    id: 'edge-1-2',
 
+    source: 'ewb-1',
 
+    target: 'ewb-2',
 
+    type: 'add'
 
+  }
 
+]
 
+
 
+const ApprovalFlow: FC<ApprovalFlowProps> = ({ elements }) => {
 
+  // const [elements, setElements] = useState<Elements>(initialElements);
 
+  const [elements, dispatch] = useReducer<Elements>(reducer, initialElements)
 
+  return (
 
+    <div className="w-full h-full">
 
+      <ReactFlow elements={elements} nodeTypes={nodeTypes} edgeTypes={edgeTypes}>
 
+        <MiniMap />
 
+        <Controls />
 
+        <Background />
 
+      </ReactFlow>
 
+    </div>
 
+  )
 
+}
 
+
 
+export default ApprovalFlow

+ 5 - 3
src/pages/Institutions/Company/Detail/components/Staff.tsx
View File 

@@ -33,7 +33,8 @@ const Staff: React.FC<ListProps> = ({ schema, dataID, dispatch, accountTypeList
 
   }, [])
 
   }, [])
 
   const [state, setState] = useState({
 
   const [state, setState] = useState({
 
     params: {
 
     params: {
 
-      search: null
 
+      search: null,
 
+      accountType: '1'
 
     },
 
     },
 
     visible: false,
 
     visible: false,
 
     currentModalType: ModalType.ADD,
 
     currentModalType: ModalType.ADD,
 
@@ -78,7 +79,8 @@ const Staff: React.FC<ListProps> = ({ schema, dataID, dispatch, accountTypeList
 
                 visible: true,
 
                 visible: true,
 
                 currentModalType: ModalType.UPDATE,
 
                 currentModalType: ModalType.UPDATE,
 
                 defaultFormData: {
 
                 defaultFormData: {
 
-                  // ...record,
 
+                  ...record,
 
+                  institution: null,
 
                   institutionID: record.ID,
 
                   institutionID: record.ID,
 
                   accountType: record.accountType,
 
                   accountType: record.accountType,
 
                   dataID: record.institution.ID
 
                   dataID: record.institution.ID
 
@@ -129,7 +131,7 @@ const Staff: React.FC<ListProps> = ({ schema, dataID, dispatch, accountTypeList
 
         visible={state.visible}
 
         visible={state.visible}
 
         setVisible={(visible: boolean) => setState({ ...state, visible })}
 
         setVisible={(visible: boolean) => setState({ ...state, visible })}
 
         type={state.currentModalType}
 
         type={state.currentModalType}
 
-        defaultFormData={state.defaultFormData}
 
+        defaultFormData={{ ...state.defaultFormData, dataID }}
 
         accountTypeList={accountTypeList}
 
         accountTypeList={accountTypeList}
 
         reload={() => tRef.current?.reload()}
 
         reload={() => tRef.current?.reload()}
 
       />
 
       />

+ 1 - 3
src/pages/Institutions/Staff/components/StaffDrawer.tsx
View File 

@@ -43,8 +43,6 @@ const StaffDrawer: React.FC<StaffModalProps> = ({
 
   organizationList,
 
   organizationList,
 
   reload
 
   reload
 
 }) => {
 
 }) => {
 
-  console.log(organizationList)
 
-
 
   const form = useForm()
 
   const form = useForm()
 
   useEffect(() => {
 
   useEffect(() => {
 
     if (visible) {
 
     if (visible) {
 
@@ -86,7 +84,7 @@ const StaffDrawer: React.FC<StaffModalProps> = ({
 
   })
 
   })
 
 
 
   const onMount = () => {
 
   const onMount = () => {
 
-    // console.log(defaultFormData)
 
+    console.log(defaultFormData)
 
 
 
     form.setValues({ ...defaultFormData })
 
     form.setValues({ ...defaultFormData })
 
     delay(80).then(() => {
 
     delay(80).then(() => {

+ 18 - 16
src/pages/Project/Verification/index.tsx
View File 

@@ -8,7 +8,8 @@ import ReactFlow, {
 
   Background
 
   Background
 
 } from 'react-flow-renderer'
 
 } from 'react-flow-renderer'
 
 
 
-import ButtonEdge from './components/ButtonEdge'
 
+// import ButtonEdge from './components/Flow/components/Edge'
 
+import ApprovalFlow from '../../../components/Flow'
 
 
 
 const onLoad = reactFlowInstance => reactFlowInstance.fitView()
 
 const onLoad = reactFlowInstance => reactFlowInstance.fitView()
 
 
 
@@ -29,9 +30,9 @@ const initialElements = [
 
   }
 
   }
 
 ]
 
 ]
 
 
 
-const edgeTypes = {
 
-  buttonedge: ButtonEdge
 
-}
 
+// const edgeTypes = {
 
+//   buttonedge: ButtonEdge
 
+// }
 
 
 
 const EdgeWithButtonFlow = () => {
 
 const EdgeWithButtonFlow = () => {
 
   const [elements, setElements] = useState(initialElements)
 
   const [elements, setElements] = useState(initialElements)
 
@@ -40,18 +41,19 @@ const EdgeWithButtonFlow = () => {
 
   const onConnect = params => setElements(els => addEdge({ ...params, type: 'buttonedge' }, els))
 
   const onConnect = params => setElements(els => addEdge({ ...params, type: 'buttonedge' }, els))
 
 
 
   return (
 
   return (
 
-    <ReactFlow
 
-      elements={elements}
 
-      onElementsRemove={onElementsRemove}
 
-      onConnect={onConnect}
 
-      snapToGrid={true}
 
-      edgeTypes={edgeTypes}
 
-      onLoad={onLoad}
 
-      key="edge-with-button">
 
-      <MiniMap />
 
-      <Controls />
 
-      <Background />
 
-    </ReactFlow>
 
+    // <ReactFlow
 
+    //   elements={elements}
 
+    //   onElementsRemove={onElementsRemove}
 
+    //   onConnect={onConnect}
 
+    //   snapToGrid={true}
 
+    //   edgeTypes={edgeTypes}
 
+    //   onLoad={onLoad}
 
+    //   key="edge-with-button">
 
+    //   <MiniMap />
 
+    //   <Controls />
 
+    //   <Background />
 
+    // </ReactFlow>
 
+    <ApprovalFlow />
 
   )
 
   )
 
 }
 
 }

+ 20 - 21
src/typings.d.ts
View File 

@@ -1,24 +1,23 @@
 
-declare module 'slash2';
 
-declare module '*.css';
 
-declare module '*.less';
 
-declare module '*.scss';
 
-declare module '*.sass';
 
-declare module '*.svg';
 
-declare module '*.png';
 
-declare module '*.jpg';
 
-declare module '*.jpeg';
 
-declare module '*.gif';
 
-declare module '*.bmp';
 
-declare module '*.tiff';
 
-declare module 'omit.js';
 
-declare module 'numeral';
 
-declare module '@antv/data-set';
 
-declare module 'mockjs';
 
-declare module 'react-fittext';
 
-declare module 'bizcharts-plugin-slider';
 
-
 
+declare module 'slash2'
 
+declare module '*.css'
 
+declare module '*.less'
 
+declare module '*.scss'
 
+declare module '*.sass'
 
+declare module '*.svg'
 
+declare module '*.png'
 
+declare module '*.jpg'
 
+declare module '*.jpeg'
 
+declare module '*.gif'
 
+declare module '*.bmp'
 
+declare module '*.tiff'
 
+declare module 'omit.js'
 
+declare module 'numeral'
 
+declare module '@antv/data-set'
 
+declare module 'mockjs'
 
+declare module 'react-fittext'
 
+declare module 'bizcharts-plugin-slider'
 
 // preview.pro.ant.design only do not use in your production ;
 
 // preview.pro.ant.design only do not use in your production ;
 
 // preview.pro.ant.design Dedicated environment variable, please do not use it in your project.
 
 // preview.pro.ant.design Dedicated environment variable, please do not use it in your project.
 
-declare let ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: 'site' | undefined;
 
+declare let ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: 'site' | undefined
 
 
 
-declare const REACT_APP_ENV: 'test' | 'dev' | 'pre' | false;
 
+declare const REACT_APP_ENV: 'test' | 'dev' | 'pre' | false