add flow validate.ts

Author: xlorne

admin-ui/src/api/validate.ts

@@ -0,0 +1,103 @@
+import {FormInstance} from "antd/es/form/hooks/useForm";
+import {NamePath} from "rc-field-form/es/interface";
+
+// 流程表单API 提供get post的能力
+export interface FlowFormApi {
+    get: (url: string, params?: any) => Promise<any>;
+    post: (url: string, data: any) => Promise<any>;
+}
+
+// 流程表单验证内容
+export class FlowFormValidateContent {
+    readonly value: any;
+    readonly form: FormInstance;
+    readonly api?: FlowFormApi
+
+    constructor(value: any, form: FormInstance, api?: FlowFormApi) {
+        this.value = value;
+        this.form = form;
+        this.api = api;
+    }
+}
+
+// 自定义验证
+export interface FlowFormCustomValidate {
+    name: NamePath;
+    validate: (content: FlowFormValidateContent) => Promise<string[]>;
+}
+
+// 流程表单API上下文
+export class FlowFormApiContext {
+
+    private static readonly instance: FlowFormApiContext = new FlowFormApiContext();
+
+    private api: FlowFormApi | undefined;
+
+    private constructor() {
+        this.api = undefined;
+    }
+
+    public static getInstance() {
+        return FlowFormApiContext.instance;
+    }
+
+    public setApi(api: FlowFormApi) {
+        this.api = api;
+    }
+
+    public getApi() {
+        return this.api;
+    }
+}
+
+// 自定义验证上下文
+export class FlowFormCustomValidateContext {
+
+    private readonly map: Map<NamePath, FlowFormCustomValidate>;
+
+    constructor() {
+        this.map = new Map();
+    }
+
+    public addValidate(validate: FlowFormCustomValidate) {
+        this.map.set(validate.name, validate);
+    }
+
+    public addCustomFunctionCodeValidate(namePath:NamePath,validateFuncCode:string){
+        const validateFunc = new Function('content', validateFuncCode);
+        this.addValidate({
+            name: namePath,
+            validate: async (content) => {
+                return validateFunc(content);
+            }
+        });
+    }
+
+    public validate(form: FormInstance) {
+        this.map.values().forEach((validate) => {
+            const value = form.getFieldValue(validate.name);
+            const content = new FlowFormValidateContent(value, form, FlowFormApiContext.getInstance().getApi());
+            validate.validate(content).then((res) => {
+                form.setFields(
+                    [
+                        {
+                            name: validate.name,
+                            errors: res,
+                        }
+                    ]
+                )
+            }).catch((error) => {
+                form.setFields(
+                    [
+                        {
+                            name: validate.name,
+                            errors: [error],
+                        }
+                    ]
+                )
+            });
+        });
+    }
+}
+
+

admin-ui/src/pages/welcome/index.tsx

@@ -1,33 +1,59 @@
 import React from 'react';
-import logo from '@/assets/logo.svg';
 import './index.scss';
-import {useSelector} from "react-redux";
-import {RootState} from "@/store/Redux";
-import RoleControl from "@/utils/RoleControl";
 import Page from "@/components/Layout/Page";
+import {Button, Form, Input} from "antd";
+import {FlowFormApiContext, FlowFormCustomValidateContext} from "@/api/validate";
+import * as api from "@/api"
+
+FlowFormApiContext.getInstance().setApi({
+    get: (url: string, params?: any) => {
+        return api.get(url, params);
+    },
+    post: (url: string, data: any) => {
+        return api.post(url, data);
+    }
+});
 
 const Index = () => {
 
-    const counter = useSelector((state: RootState) => state.counter.value);
-    const username = localStorage.getItem('username');
+    const [form] = Form.useForm();
+
+    const context = new FlowFormCustomValidateContext();
+
+    const validateFuncCode = `
+         if (content.value) {
+            return [];
+         } else {
+            return ["姓名不存在"];
+        }
+    `;
+    context.addCustomFunctionCodeValidate(["user", "name"], validateFuncCode);
 
     return (
         <Page enablePageContainer={true}>
-            <div className="App">
-                <header className="App-header">
-                    <img src={logo} className="App-logo" alt="logo"/>
-                    <p>
-                        hi {username} , Redux counter: {counter}, Roles: {RoleControl.roles().map(item => (
-                        <label
-                            key={item}
-                            style={{
-                                margin: '0 5px',
-                                padding: '5px',
-                            }}>{item}</label>
-                    ))}
-                    </p>
-                </header>
-            </div>
+
+            <Form
+                form={form}
+            >
+
+                <Form.Item
+                    name={["user", "name"]}
+                    label={"姓名"}
+                >
+                    <Input/>
+                </Form.Item>
+            </Form>
+
+            <Button onClick={() => {
+                form.validateFields().then(res => {
+                    console.log(res);
+                })
+            }}>test1</Button>
+
+            <Button onClick={() => {
+                context.validate(form);
+            }}>test2</Button>
+
         </Page>
     );
 }