Explorar o código

feat: 流程抽屉增加按钮confirmLoading效果

lanjianrong %!s(int64=3) %!d(string=hai) anos
pai
achega
997a2f14dd

+ 4 - 0
src/pages/Project/Verification/Detail/Flow/components/Drawer/index.tsx

@@ -17,6 +17,7 @@ const FlowDrawer = () => {
   const { flowState, dispatch } = useContext(FlowContext)
   const { modalConfig: { nodeID = null, visible = false } = {}, dataID } = flowState
   const [state, setState] = useState({
+    loading: false,
     institutionList: [],
     approvalWay: ApprovalWay.ACCOUNT,
     accounts: [],
@@ -62,6 +63,7 @@ const FlowDrawer = () => {
   }
 
   const handleOnOk = async () => {
+    setState({ ...state, loading: true })
     const { approvalWay, accounts } = state
     if (!accounts.every(item => item.institutionID && item.ID)) {
       setState({
@@ -101,6 +103,7 @@ const FlowDrawer = () => {
       }, 80)
       handleCancel()
     }
+    setState({ ...state, loading: false })
   }
 
   // 添加用户-参与者卡片
@@ -185,6 +188,7 @@ const FlowDrawer = () => {
           <Button
             className="ml-8px"
             type="primary"
+            loading={state.loading}
             disabled={!state.accounts.length}
             onClick={handleOnOk}>
             确定

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

@@ -137,7 +137,7 @@ export function CommonEdge(props: EdgeProps) {
           <div className={styles.addIcon}>
             <Popover
               content={
-                <ul className="m-0 p-0 ">
+                <ul className="m-0 p-0">
                   <li>
                     <Button type="dashed" onClick={addAuditor} icon={<SolutionOutlined />}>
                       审批人

+ 9 - 7
src/pages/Project/Verification/Detail/Flow/index.less

@@ -11,11 +11,18 @@
   .node_content {
     cursor: default;
     .remove_node {
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
       position: absolute;
       top: -13px;
       right: -16px;
-      display: none;
+      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);
       cursor: pointer;
+      opacity: 0;
     }
     .operate_node {
       cursor: pointer;
@@ -24,12 +31,7 @@
       border-color: blue;
     }
     &:hover .remove_node {
-      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);
+      opacity: 1;
     }
   }
   & .react-flow__controls {