add UserSelectView

Author: xlorne

admin-ui/src/api/user.ts

@@ -1,4 +1,4 @@
-import {page, post} from "@/api/index";
+import {page, post,get} from "@/api/index";
 
 export async function list(
     params: any,
@@ -12,6 +12,10 @@ export async function list(
     return page('/api/query/user/list', params, sort, filter, match);
 }
 
+export async function users() {
+    return get('/api/query/user/list', {current:1,pageSize:999999});
+}
+
 
 export async function save(body: any) {
     return post('/api/cmd/user/save', body);

admin-ui/src/components/Flow/components/UserSelectView.tsx

@@ -0,0 +1,66 @@
+import React, {useEffect} from "react";
+import {UserSelectProps} from "@/components/Flow/flow/types";
+import {ModalForm, ProForm, ProFormSelect} from "@ant-design/pro-components";
+import {users} from "@/api/user";
+
+
+const UserSelectView: React.FC<UserSelectProps> = (props) => {
+
+    const [form] = ProForm.useForm();
+
+    const [userList, setUserList] = React.useState<any[]>([]);
+
+    useEffect(() => {
+        users().then((res) => {
+            if (res.success) {
+                const list = res.data.list.filter((item:any)=>{
+                    const specifyUserIds = props.specifyUserIds;
+                    if(specifyUserIds && specifyUserIds.length > 0){
+                        return specifyUserIds.includes(item.id);
+                    }
+                });
+                setUserList(list);
+                // 默认选中当前用户
+                form.setFieldValue("users", props.currentUserIds);
+            }
+        })
+    }, []);
+
+    return (
+        <ModalForm
+            form={form}
+            open={props.visible}
+            title={"用户选择（模拟测试）"}
+            modalProps={{
+                onCancel: () => {
+                    props.setVisible(false);
+                },
+                onClose: () => {
+                    props.setVisible(false);
+                }
+            }}
+            onFinish={async (values) => {
+                const users = values.users;
+                const selectedUsers = userList.filter((item: any) => {
+                    return users.includes(item.id);
+                });
+                props.onFinish(selectedUsers);
+                props.setVisible(false);
+            }}
+        >
+            <ProFormSelect
+                mode={"tags"}
+                name={"users"}
+                label={"用户"}
+                options={userList.map((item: any) => {
+                    return {
+                        label: item.name,
+                        value: item.id
+                    }
+                })}
+            />
+        </ModalForm>
+    )
+}
+
+export default UserSelectView;

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

@@ -292,7 +292,7 @@ export const registerEvents = (id: string,
             handlerTransferFlow(currentUser);
         }
 
-        if(selectUserType === 'flow' && selectUsers && selectUsers.length > 0){
+        if(selectUserType === 'nextNodeUser' && selectUsers && selectUsers.length > 0){
             handleSubmitFlow(true,(res)=>{
                 const flowSubmitResultBuilder = new FlowSubmitResultBuilder(res.data);
                 dispatch(closeUserSelect());
@@ -337,7 +337,7 @@ export const registerEvents = (id: string,
                         const approvalType = res.data.flowNode.approvalType;
                         dispatch(setUserSelectModal({
                             mode: approvalType==='SIGN'?'single':'multiple',
-                            type: 'flow',
+                            type: 'nextNodeUser',
                             visible: true,
                             specifyUserIds: userIds
                         }));

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

@@ -21,7 +21,7 @@ import {Provider, useDispatch, useSelector} from "react-redux";
 import {
     clearPostponed,
     clearResult,
-    clearUserSelect, closeUserSelect,
+    closeUserSelect,
     FlowReduxState,
     flowStore,
     setSelectUsers,
@@ -204,7 +204,7 @@ const $FlowView: React.FC<FlowViewProps> = (props) => {
                 />
             )}
 
-            {UserSelectView && (
+            {UserSelectView && userSelectType &&  (
                 <UserSelectView
                     visible={userSelectVisible}
                     setVisible={() => {

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

@@ -67,6 +67,14 @@ export const UserSelectViewKey = 'UserSelectView';
 
 export type UserSelectMode = 'single' | 'multiple';
 
+export type UserSelectType =
+    // 选择下级流程节点的人员，约定人员id范围
+    'nextNodeUser'
+    // 选择转办人员，约定本单位下的人员
+    | 'transfer'
+    // 选择所有人员，在流程配置上使用
+    | 'users';
+
 export interface FlowUser {
     id: string;
     name: string;
@@ -83,6 +91,8 @@ export interface UserSelectProps {
     mode: UserSelectMode;
     // 指定人员范围
     specifyUserIds: number[];
+    // 当前选择的人员
+    currentUserIds?: number[];
     // 选人类型
-    userSelectType: string;
+    userSelectType: UserSelectType;
 }

admin-ui/src/components/Flow/panel/NodePanel.tsx

@@ -1,9 +1,11 @@
 import React from "react";
-import {Divider} from "antd";
+import {Button, Divider, Space} from "antd";
 import {ProForm, ProFormDigit, ProFormSelect, ProFormSwitch, ProFormText} from "@ant-design/pro-components";
-import {EyeOutlined} from "@ant-design/icons";
+import {EyeOutlined, SettingOutlined} from "@ant-design/icons";
 import GroovyScript from "@/components/Flow/utils/script";
 import ScriptModal from "@/components/Flow/panel/ScriptModal";
+import {getComponent} from "@/framework/ComponentBus";
+import {UserSelectProps, UserSelectViewKey} from "@/components/Flow/flow/types";
 
 interface NodePanelProps {
     id?: string,
@@ -19,6 +21,14 @@ const NodePanel: React.FC<NodePanelProps> = (props) => {
 
     const [visible, setVisible] = React.useState(false);
 
+    const [userSelectVisible, setUserSelectVisible] = React.useState(false);
+
+    const [operatorMatcherType, setOperatorMatcherType] = React.useState(props.data?.operatorMatcherType);
+
+    // 用户选人视图
+    const UserSelectView = getComponent(UserSelectViewKey) as React.ComponentType<UserSelectProps>;
+
+
     return (
         <>
             <ProForm
@@ -123,18 +133,33 @@ const NodePanel: React.FC<NodePanelProps> = (props) => {
                         },
                     ]}
                     onChange={(value) => {
+                        setOperatorMatcherType(value as string);
                         props.form.setFieldsValue({
                             operatorMatcher: GroovyScript.operatorMatcher(value as string)
                         })
                     }}
                     addonAfter={(
-                        <EyeOutlined
-                            onClick={() => {
-                                const value = props.form.getFieldValue("operatorMatcher");
-                                form.setFieldValue("type", "operatorMatcher");
-                                form.setFieldValue("script", value);
-                                setVisible(true);
-                            }}/>
+                        <Space>
+                            {operatorMatcherType==='custom' && (
+                                <Button
+                                    icon={<SettingOutlined/>}
+                                    onClick={() => {
+                                        setUserSelectVisible(true);
+                                    }}
+                                >
+                                    选择人员
+                                </Button>
+                            )}
+
+                            <EyeOutlined
+                                onClick={() => {
+                                    const value = props.form.getFieldValue("operatorMatcher");
+                                    form.setFieldValue("type", "operatorMatcher");
+                                    form.setFieldValue("script", value);
+                                    setVisible(true);
+                                }}/>
+
+                        </Space>
                     )}
                 />
 
@@ -248,6 +273,25 @@ const NodePanel: React.FC<NodePanelProps> = (props) => {
                 form={form}
                 setVisible={setVisible}
                 visible={visible}/>
+
+            {UserSelectView && (
+                <UserSelectView
+                    visible={userSelectVisible}
+                    setVisible={setUserSelectVisible}
+                    userSelectType={"users"}
+                    specifyUserIds={[]}
+                    mode={"multiple"}
+                    onFinish={(values)=>{
+                        const operatorMatcher = props.form.getFieldValue("operatorMatcher");
+                        const script = operatorMatcher.replaceAll("%s", values.map((item:any)=>item.id).join(","));
+                        console.log(script);
+                        props.form.setFieldsValue({
+                            operatorMatcher: script
+                        });
+                    }}
+                />
+            )}
+
         </>
     )
 }

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

@@ -1,7 +1,9 @@
 import {registerComponent} from "@/framework/ComponentBus";
 import PostponedFormView from "@/components/Flow/components/PostponedFormView";
 import ResultFormView from "@/components/Flow/components/ResultFormView";
-import {PostponedFormViewKey, ResultFormViewKey} from "@/components/Flow/flow/types";
+import {PostponedFormViewKey, ResultFormViewKey, UserSelectViewKey} from "@/components/Flow/flow/types";
+import UserSelectView from "@/components/Flow/components/UserSelectView";
 
 registerComponent(PostponedFormViewKey, PostponedFormView);
 registerComponent(ResultFormViewKey, ResultFormView);
+registerComponent(UserSelectViewKey, UserSelectView);

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

@@ -1,5 +1,5 @@
 import {configureStore, createSlice, PayloadAction} from '@reduxjs/toolkit';
-import {FlowResultMessage, FlowUser, UserSelectMode} from "@/components/Flow/flow/types";
+import {FlowResultMessage, FlowUser, UserSelectMode, UserSelectType} from "@/components/Flow/flow/types";
 
 export interface FlowStore {
     // 延期时间窗口
@@ -15,7 +15,7 @@ export interface FlowStore {
     resultCloseFlow: boolean;
 
     // 选人类型
-    userSelectType: string;
+    userSelectType: UserSelectType | null;
     // 选人窗口
     userSelectVisible: boolean;
     // 选人模式
@@ -40,7 +40,7 @@ export type FlowStoreAction = {
     setUserSelectModal: (state: FlowStore, action: PayloadAction<{
         mode: UserSelectMode,
         visible: boolean,
-        type: string,
+        type: UserSelectType,
         specifyUserIds: number[]
     }>) => void;
     setSelectUsers: (state: FlowStore, action: PayloadAction<FlowUser[]>) => void;
@@ -57,7 +57,7 @@ export const flowSlice = createSlice<FlowStore, FlowStoreAction, "flow", {}>({
         resultVisible: false,
         userSelectVisible: false,
         userSelectMode: 'single',
-        userSelectType: '',
+        userSelectType: null,
         resultCloseFlow: false,
         currentUsers: [],
         specifyUserIds: [],
@@ -107,7 +107,7 @@ export const flowSlice = createSlice<FlowStore, FlowStoreAction, "flow", {}>({
             state.userSelectMode = 'single';
             state.currentUsers = [];
             state.specifyUserIds = [];
-            state.userSelectType = '';
+            state.userSelectType = null;
         }
     },
 });