add FlowFormView

Author: xlorne

frontend/apps/app-pc/package.json

@@ -13,6 +13,7 @@
     "@flow-engine/flow-types": "workspace:*",
     "@flow-engine/flow-pc-design": "workspace:*",
     "@flow-engine/flow-pc-ui": "workspace:*",
+    "@flow-engine/flow-pc-form": "workspace:*",
     "@flow-engine/flow-pc-approval":"workspace:*",
     "antd": "^6.2.1",
     "dayjs": "^1.11.19",

frontend/apps/app-pc/src/config/plugin-view.tsx

@@ -1,4 +1,4 @@
 import {ViewBindPlugin} from "@flow-engine/flow-types";
-import {LeaveView} from "@/views/leave.tsx";
+import {FlowFormView} from "@flow-engine/flow-pc-form";
 
-ViewBindPlugin.getInstance().register('default',LeaveView);
+ViewBindPlugin.getInstance().register('default',FlowFormView);

frontend/apps/app-pc/src/views/leave.tsx

@@ -15,8 +15,8 @@
     "build:app-pc": "pnpm -F  @flow-engine/app-pc build",
     "dev:app-pc": "pnpm -F  @flow-engine/app-pc dev",
     "dev:app-mobile": "pnpm -F  @flow-engine/app-mobile dev",
-    "watch:flow-design": "pnpm -F  @flow-engine/flow-design dev",
-    "watch:flow-form": "pnpm -F  @flow-engine/flow-form dev"
+    "watch:flow-pc-design": "pnpm -F  @flow-engine/flow-pc-design dev",
+    "watch:flow-pc-form": "pnpm -F  @flow-engine/flow-pc-form dev"
   },
   "keywords": [],
   "author": "",

frontend/package.json

@@ -10,6 +10,9 @@ interface FormViewComponentProps{
 export const FormViewComponent: React.FC<FormViewComponentProps> = (props) => {
     const {state, context} = useApprovalContext();
     const ViewComponent = ViewBindPlugin.getInstance().get(state.flow?.view || 'default');
+
+    const formMeta = state.flow?.form;
+
     // 是否可合并审批
     const mergeable = state.flow?.mergeable || false;
     const todos = state.flow?.todos || [];
@@ -41,7 +44,7 @@ export const FormViewComponent: React.FC<FormViewComponentProps> = (props) => {
         });
     }, []);
 
-    if (ViewComponent) {
+    if (ViewComponent && formMeta) {
         if (mergeable) {
             return (
                 <div>
@@ -54,6 +57,7 @@ export const FormViewComponent: React.FC<FormViewComponentProps> = (props) => {
                 {viewForms.map((item, index) => (
                     <ViewComponent
                         key={index}
+                        meta={formMeta}
                         form={item.instance as any}
                         onValuesChange={props.onValuesChange}
                     />

frontend/packages/flow-pc/flow-pc-approval/src/components/flow-approval/components/form-view-component.tsx

@@ -0,0 +1,32 @@
+import {FlowFormFieldMeta} from "@flow-engine/flow-types";
+import React from "react";
+
+import {FormItemString} from "@/components/item/string";
+import {FormItemNumber} from "@/components/item/number";
+import {FormItemFloat} from "@/components/item/float";
+import {FormItemBoolean} from "@/components/item/boolean";
+
+
+export class FormItemFactory {
+
+    private readonly cache:Map<string,React.ComponentType<FlowFormFieldMeta>>;
+
+    private static instance:FormItemFactory = new FormItemFactory();
+
+    private constructor() {
+        this.cache = new Map();
+        this.cache.set('number',FormItemNumber);
+        this.cache.set('string',FormItemString);
+        this.cache.set('float',FormItemFloat);
+        this.cache.set('boolean',FormItemBoolean);
+    }
+
+    public static getInstance():FormItemFactory {
+        return FormItemFactory.instance;
+    }
+
+    public createFrom(formType:string){
+        return this.cache.get(formType);
+    }
+
+}

frontend/packages/flow-pc/flow-pc-form/src/components/factory/form-item-factory.tsx

@@ -1,40 +1,43 @@
 import React from "react";
 import {type ViewComponentProps} from "@flow-engine/flow-types";
-import {Form, Input} from "antd";
+import {Form} from "antd";
 import {ObjectUtils} from "@flow-engine/flow-core";
+import {FormItemFactory} from "@/components/factory/form-item-factory";
 
 export const FlowFormView: React.FC<ViewComponentProps> = (props) => {
 
     const [values, setValues] = React.useState<any>({});
 
     const form = props.form;
 
+    const meta = props.meta;
+
+    const fields = meta.fields || [];
+
     return (
         <Form
             form={form as any}
             layout={"vertical"}
-            onBlur={()=>{
+            onBlur={() => {
                 const latestValues = form.getFieldsValue();
-                if(ObjectUtils.isEqual(values,latestValues)){
+                if (ObjectUtils.isEqual(values, latestValues)) {
                     return;
                 }
                 setValues(latestValues);
                 props.onValuesChange?.(latestValues);
             }}
         >
-            <Form.Item
-                name={"days"}
-                label={"请假天数"}
-            >
-                <Input/>
-            </Form.Item>
-
-            <Form.Item
-                name={"desc"}
-                label={"请假理由"}
-            >
-                <Input/>
-            </Form.Item>
+            {fields.map((field, i) => {
+                const FormItem = FormItemFactory.getInstance().createFrom(field.type);
+                if (FormItem) {
+                    return (
+                        <FormItem
+                            key={field.id}
+                            {...field}
+                        />
+                    );
+                }
+            })}
         </Form>
     )
 };

frontend/packages/flow-pc/flow-pc-form/src/components/form/index.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import {Form, Switch} from "antd";
+import {FlowFormFieldMeta} from "@flow-engine/flow-types";
+
+export const FormItemBoolean:React.FC<FlowFormFieldMeta> = (props)=>{
+
+    const rules = props.required?[
+        {
+            required: props.required,
+            message: `${props.name}不能为空`
+        }
+    ]:[];
+
+    const defaultValue = props.defaultValue === "true" || false;
+
+    return (
+        <Form.Item
+            name={props.code}
+            label={props.name}
+            required={props.required}
+            rules={rules}
+        >
+            <Switch defaultValue={defaultValue}/>
+        </Form.Item>
+    )
+}

frontend/packages/flow-pc/flow-pc-form/src/components/item/boolean.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import {Form, Input} from "antd";
+import {FlowFormFieldMeta} from "@flow-engine/flow-types";
+
+export const FormItemFloat:React.FC<FlowFormFieldMeta> = (props)=>{
+
+    const rules = props.required?[
+        {
+            required: props.required,
+            message: `${props.name}不能为空`
+        }
+    ]:[];
+
+    return (
+        <Form.Item
+            name={props.code}
+            label={props.name}
+            required={props.required}
+            rules={rules}
+        >
+            <Input type={"number"} defaultValue={props.defaultValue}/>
+        </Form.Item>
+    )
+}

frontend/packages/flow-pc/flow-pc-form/src/components/item/float.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import {Form, Input} from "antd";
+import {FlowFormFieldMeta} from "@flow-engine/flow-types";
+
+export const FormItemNumber:React.FC<FlowFormFieldMeta> = (props)=>{
+
+    const rules = props.required?[
+        {
+            required: props.required,
+            message: `${props.name}不能为空`
+        }
+    ]:[];
+
+    return (
+        <Form.Item
+            name={props.code}
+            label={props.name}
+            required={props.required}
+            rules={rules}
+        >
+            <Input type={"number"} defaultValue={props.defaultValue}/>
+        </Form.Item>
+    )
+}