feat: 11

src/components/Flow/src/components/Edge/index.less

@@ -6,7 +6,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 6px;
+  padding: 10px;
   :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);

src/components/Flow/src/components/Edge/index.tsx

@@ -7,7 +7,7 @@ import { Actions, FlowContext } from '../../context'
 import { generateElements, genreateElementEnum, getEdgeParams } from '../../utils'
 import styles from './index.less'
 import 'antd/lib/button/style/css'
-const foreignObjectSize = 40
+const foreignObjectSize = 50
 
 const renderMenu = ({ dispatch, elements, togglePopver, id, flowInstance }) => {
   const setElements = els => {

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

@@ -22,7 +22,7 @@ export default function FlowGroph() {
 
   const defaultOptions = {
     nodesDraggable: false, // 不可拖拽
-    zoomOnScroll: false, // 使用鼠标滚轮或触控板放大和缩小图形
+    // zoomOnScroll: false, // 使用鼠标滚轮或触控板放大和缩小图形
     zoomOnPinch: false, // 使用捏合放大和缩小图形
     // snapToGrid: true,
     onLoad: reactFlowInstance => {
@@ -33,11 +33,17 @@ export default function FlowGroph() {
       reactFlowInstance?.fitView()
     }
   }
+
+  const controlsOptions = {
+    showZoom: true,
+    showFitView: true,
+    showInteractive: true
+  }
   return (
     <ReactFlow {...defaultOptions} elements={elements} nodeTypes={nodeTypes} edgeTypes={edgeTypes}>
       <MiniMap />
       <Background />
-      <Controls showZoom={true} showFitView={false} showInteractive={false} />
+      <Controls {...controlsOptions} />
     </ReactFlow>
   )
 }

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

@@ -5,11 +5,11 @@ import { CloseOutlined, RightOutlined } from '@ant-design/icons'
 export const InputNode = () => {
   return (
     <>
-      <div className="shadow-card min-h-18 w-52 cursor-default">
-        <div className="bg-hex-15388B text-light-500 leading-6 h-6 px-4 text-12px rounded-t-sm">
-          发起人
+      <div className="shadow-card cursor-default p-1 bg-hex-bfbfbf rounded-lg">
+        <div className=" text-light-500 leading-7 h-7 text-12px ml-1">发起人</div>
+        <div className="text-14px px-4px py-5px leading-22px text-black text-opacity-85 bg-white rounded-4px h-32px">
+          具有新建权限的员工
         </div>
-        <div className="text-14px p-4 bg-white rounded-b-sm">具有新建权限的员工</div>
       </div>
       <Handle type="source" position="bottom" />
     </>
@@ -44,7 +44,7 @@ export const CommonNode = props => {
   return (
     <>
       <Handle type="target" position="top" />
-      <div className="min-h-18 w-52 node_content">
+      {/* <div className="min-h-18 w-52 node_content">
         <div className="bg-hex-f78b22 text-light-500 leading-6 h-6 px-4 text-12px rounded-t-sm flex justify-between items-center">
           <span>审批人</span>
           <span className="remove_node" onClick={removeNode}>
@@ -59,6 +59,22 @@ export const CommonNode = props => {
             </span>
           </div>
         </div>
+      </div> */}
+      <div className="shadow-card cursor-default p-1 bg-hex-1890ff rounded-lg node_content">
+        <div className="relative text-light-500 leading-7 h-7 text-12px ml-1 flex justify-between items-center">
+          <div>审批人</div>
+          <div
+            className="remove_node w-24px h-24px bg-hex-ff4d4f align-middle"
+            onClick={removeNode}>
+            <CloseOutlined size={12} />
+          </div>
+        </div>
+        <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">
+          <div>请选择选批人</div>
+          <div>
+            <RightOutlined />
+          </div>
+        </div>
       </div>
       <Handle type="source" position="bottom" />
     </>

src/components/Flow/src/index.less

@@ -1,12 +1,19 @@
 .flow-container {
+  & .react-flow__node {
+    width: 200px;
+    max-height: 86px;
+    border-radius: 8px 8px 8px 8px;
+    opacity: 1;
+  }
   & .react-flow__handle {
     opacity: 0;
   }
   .node_content {
-    border: 1px solid transparent;
-    border-radius: 0.125rem;
     cursor: default;
     .remove_node {
+      position: absolute;
+      top: -13px;
+      right: -16px;
       display: none;
       cursor: pointer;
     }
@@ -17,7 +24,23 @@
       border-color: blue;
     }
     &:hover .remove_node {
-      display: block;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid #ff4d4f;
+      border-radius: 99px 99px 99px 99px;
+      box-shadow: 0 2px 0 1px rgba(0, 0, 0, 0.0430000014603138);
+    }
+  }
+  & .react-flow__controls {
+    bottom: 94%;
+    left: 95%;
+    display: flex;
+    justify-content: end;
+    // margin: 12px;
+    box-shadow: none;
+    & .react-flow__controls-zoomout {
+      margin-left: 8px;
     }
   }
 }

src/utils/util.ts

@@ -1,6 +1,15 @@
+import type { TableColumnType } from 'antd'
+
 export const delay = (ms?: number | undefined) => new Promise(res => setTimeout(res, ms))
 
-export function generateColumns(c, s) {
+/**
+ *
+ * @param c 表格columns
+ * @param s schema
+ * @param f 需要过滤掉的colmun
+ * @returns
+ */
+export function generateColumns(c: TableColumnType, s: any, f?: string | string[]) {
   if (!s) return c
   // 新的列
   const nC = [...c]
@@ -9,7 +18,10 @@ export function generateColumns(c, s) {
     const keys = Object.keys(properties)
     keys.forEach(item => {
       const isExist = c.some(column => column.dataIndex === item)
-      // 该列在columns中未定义
+      // 该列在columns中未定义且不需要过滤
+      if ((Array.isArray(f) && !f.includes(item)) || f !== item) {
+        return
+      }
       if (!isExist) {
         nC.splice(-2, 0, {
           dataIndex: item,