custom control opinionEditorVisible

Author: xlorne

admin-ui/src/components/Flow/flow/FlowDetail.tsx

@@ -1,10 +1,15 @@
 import React from "react";
-import { Divider, Result } from "antd";
-import { ProForm, ProFormTextArea } from "@ant-design/pro-components";
+import {Divider, Result} from "antd";
+import {ProForm, ProFormTextArea} from "@ant-design/pro-components";
 import {CustomButtonType, FlowFormView, FlowFormViewProps} from "@/components/Flow/flow/types";
-import { FlowData } from "@/components/Flow/flow/data";
+import {FlowData} from "@/components/Flow/flow/data";
 import {useDispatch, useSelector} from "react-redux";
-import {clearTriggerClick, FlowReduxState} from "@/components/Flow/store/FlowSlice";
+import {
+    clearTriggerClick,
+    FlowReduxState,
+    hideOpinionEditor,
+    showOpinionEditor
+} from "@/components/Flow/store/FlowSlice";
 
 interface FlowDetailProps {
     view: React.ComponentType<FlowFormViewProps> | FlowFormView;
@@ -28,14 +33,18 @@ const FlowDetail: React.FC<FlowDetailProps> = (props) => {
     // 触发点击事件
     const triggerClickVisible = useSelector((state: FlowReduxState) => state.flow.triggerClickVisible);
 
+    // 审批意见输入框
+    const opinionEditorVisible = useSelector((state: FlowReduxState) => state.flow.opinionEditorVisible);
+
     // flow store redux
     const dispatch = useDispatch();
 
     return (
         <>
             <div className="flowApprovalViewBox">
                 {FlowFormView && (
-                    <div className="flowViewDetail" style={{ height: !FlowFormView || flowData.isStartFlow() ? '85vh' : '68vh' }}>
+                    <div className="flowViewDetail"
+                         style={{height: !FlowFormView || flowData.isStartFlow() ? '85vh' : '68vh'}}>
                         <FlowFormView
                             handlerClick={props.handlerClick}
                             data={flowData.getFlowData()}
@@ -45,6 +54,13 @@ const FlowDetail: React.FC<FlowDetailProps> = (props) => {
                             editable={!flowData.isDone() && flowData.getFlowNodeEditable()}
                             compare={!flowData.isStartFlow()}
                             triggerClickVisible={triggerClickVisible}
+                            opinionEditorVisible={(visible) => {
+                                if (visible) {
+                                    dispatch(showOpinionEditor());
+                                } else {
+                                    dispatch(hideOpinionEditor());
+                                }
+                            }}
                             clearTriggerClick={() => {
                                 dispatch(clearTriggerClick());
                             }}
@@ -61,7 +77,7 @@ const FlowDetail: React.FC<FlowDetailProps> = (props) => {
                 )}
 
                 {/*仅当非发起流程时再展示审批意见框*/}
-                {FlowFormView && flowData.showOpinion() && (
+                {FlowFormView && flowData.showOpinion() && opinionEditorVisible && (
                     <div className="opinionForm">
                         <div>
                             <Divider>

admin-ui/src/components/Flow/flow/types.ts

@@ -32,6 +32,9 @@ export interface FlowFormViewProps {
 
     // 关闭自定义前端点击事件触发
     clearTriggerClick?: () => void;
+
+    // 审批意见输入框
+    opinionEditorVisible?: (visible: boolean) => void;
 }
 
 // 表单视图

admin-ui/src/components/Flow/store/FlowSlice.ts

@@ -27,6 +27,9 @@ export interface FlowStore {
 
     // 自定义前端点击事件触发
     triggerClickVisible: boolean;
+
+    // 审批意见输入框
+    opinionEditorVisible: boolean;
 }
 
 export type FlowStoreAction = {
@@ -52,6 +55,9 @@ export type FlowStoreAction = {
 
     triggerClick: (state: FlowStore) => void;
     clearTriggerClick: (state: FlowStore) => void;
+
+    showOpinionEditor: (state: FlowStore) => void;
+    hideOpinionEditor: (state: FlowStore) => void;
 }
 
 export const flowSlice = createSlice<FlowStore, FlowStoreAction, "flow", {}>({
@@ -67,7 +73,8 @@ export const flowSlice = createSlice<FlowStore, FlowStoreAction, "flow", {}>({
         resultCloseFlow: false,
         currentUsers: [],
         specifyUserIds: [],
-        triggerClickVisible: false
+        triggerClickVisible: false,
+        opinionEditorVisible: true
     },
     reducers: {
         showPostponed: (state) => {
@@ -123,6 +130,14 @@ export const flowSlice = createSlice<FlowStore, FlowStoreAction, "flow", {}>({
 
         clearTriggerClick: (state) => {
             state.triggerClickVisible = false;
+        },
+
+        showOpinionEditor: (state) => {
+            state.opinionEditorVisible = true;
+        },
+
+        hideOpinionEditor: (state) => {
+            state.opinionEditorVisible = false;
         }
     },
 });
@@ -139,7 +154,9 @@ export const {
     closeUserSelect,
     setSelectUsers,
     triggerClick,
-    clearTriggerClick
+    clearTriggerClick,
+    hideOpinionEditor,
+    showOpinionEditor
 } = flowSlice.actions;
 export const flowStore = configureStore({
     reducer: {

admin-ui/src/pages/flow/leave/LeaveForm.tsx

@@ -2,17 +2,23 @@ import React, {useEffect} from "react";
 import {ProForm, ProFormDigit, ProFormText, ProFormTextArea} from "@ant-design/pro-components";
 import {FlowFormViewProps} from "@/components/Flow/flow/types";
 import {Button} from "antd";
+import {useSelector} from "react-redux";
+import {FlowReduxState} from "@/components/Flow/store/FlowSlice";
 
 
 const LeaveForm: React.FC<FlowFormViewProps> = (props) => {
 
+    // 审批意见输入框展示状态
+    const opinionEditorVisible = useSelector((state: FlowReduxState) => state.flow.opinionEditorVisible);
+
     useEffect(() => {
         props.form.setFieldsValue(props.data);
+        // 关闭意见输入框
+        props.opinionEditorVisible && props.opinionEditorVisible(false);
     }, []);
 
     const triggerClickVisible = props.triggerClickVisible;
 
-
     return (
         <ProForm
             form={props.form}
@@ -54,6 +60,15 @@ const LeaveForm: React.FC<FlowFormViewProps> = (props) => {
                 ]}
             />
 
+            <Button
+                onClick={()=>{
+                    props.opinionEditorVisible && props.opinionEditorVisible(!opinionEditorVisible);
+                }}
+            >
+                意见输入框
+            </Button>
+
+
             {triggerClickVisible && (
                 <Button
                     onClick={()=>{