A method for developing a general form without compiling

Abstract

The application discloses a compiled-free general form development method, and relates to the technical field of enterprise personnel management. The method provides a self-defined function editing entrance for form initialization, field on change and approval single initialization on a process form management page; a node with a special ID mark is preset in a front-end general form component, and a function function of field attribute control is encapsulated; after the front end obtains a self-defined function string through an interface, the self-defined function string is converted into an executable function, and the encapsulated function function and the component are injected as an input parameter for execution. The application realizes field linkage, dynamic data loading and rendering of irregular components by intercepting field events and dynamically executing injected codes. The method does not need to separately create a page component, and does not need to be recompiled and packaged when development and change requirements occur, thereby effectively solving the problem that remote debugging cannot be performed in an intranet environment, reducing development cost and maintenance difficulty, and improving the generality and flexibility of form development.

Description

Technical Field

[0001] This invention relates to the field of enterprise human resource management, and in particular to a configurable enterprise workflow application form. Background Technology

[0002] Workflow application forms refer to the online workflow application and approval processes for enterprises in web applications, generated by configuring form fields and document approval pages. As enterprise workflow application needs become increasingly complex and diverse, complex requirements have emerged, such as linked fields, dynamically loaded data, dynamically switching field display, dynamically controlling field editability, dynamically controlling field requirement, and rendering tables and lists—all unconventional form components. Existing enterprise HR management systems suffer from several major problems: they cannot use generic forms to meet these requirements, necessitating customized development; both after development and subsequent requirement changes require recompilation and repackaging, increasing time costs; and each complex form requires a separate page component, leading to increased code size and maintenance difficulty.

[0003] In addition, since some client companies deploy on an intranet and do not provide VPN tools, only remote desktop, the network of the front-end integration development environment cannot be proxyed to the client's network. The workflow application forms of the existing enterprise human resources management system will be difficult to debug and develop. It is necessary to communicate and coordinate to request the copying of the client's environment and data to the local machine. If the client does not agree, on-site development is the only option, which undoubtedly increases the working cost. Summary of the Invention

[0004] To address the shortcomings of existing enterprise human resource management systems in handling complex and diverse application forms, this invention provides a universal form development method that requires no compilation or packaging, offering the following technical solution: A compilation-free, general-purpose form development method has the following steps: S1. In the front-end web page, in the editing window of the process form management page, three fields are provided: form initialization custom function, field onchange custom function, and approval form initialization custom function; S2. Create a generic form page component in the integrated development environment to implement page layout and call the HTTP interface request for initialization and submission; S3. In the page components of the general form, add a div node with a special ID tag to each form field. S4. In the page components of the general form, encapsulate the following functionalities: field key update function, required attribute update function, editability attribute update function, and field visibility update function. S5. In the response data of the initialization interface of the general form page component, add a field to return the values ​​maintained by the three new fields added in the editing window in step S1. S6. In the page component of the general form, declare two variables V1 and V2. After calling the initialization interface, assign the contents of the fields "form initialization custom function" and "field onchange custom function" obtained from the interface response data in step S5 to V1 and V2 respectively. After determining that the value of V1 is not empty, is valid, and can be converted into a function, execute V1 and pass the function encapsulated in step S4 as the input parameter to V1. S7. In the page component of the general form, intercept the onchange event of all fields, and do the following in the event: after determining that the value of variable V2 in step S6 is not empty, is valid and can be converted into a function, execute V2, and pass the function encapsulated in step S4 as input parameter to V2. S8. In the front-end web page, provide a form entry page and a form filling page, and attach the general form component created in step S2 to the form filling page. S9. In the front-end web page, provide a form approval page. In the response data of the initialization interface request of the form approval page, add the "Custom function for initialization of approval form" field from step S1. S10. On the form approval page, add a div node with a special ID tag to each form field. S11. On the form approval page, declare variable P1, and encapsulate the function as described in step S4. After obtaining the response data from the initialization interface, determine if the "Approval Form Initialization Custom Function" field is not empty, is valid, and can be converted into a function before execution, and pass the encapsulated function as an input parameter. Determine the return value after the function execution. If the return value is not empty and contains the onFieldChange function, assign the function to variable P1. S12. On the form approval page, intercept all field onchange events and perform the following processing in the event: after determining that the value of variable P1 in step S11 is not empty, is valid, and can be converted into a function, execute P1.

[0005] Furthermore, in step S1, the process form management page is a page for creating, editing, configuring, and canceling process forms. Users can create process application forms such as leave applications, overtime applications, and business trip applications on this page, and configure the form fields, that is, the fields where the person filling in the form needs to fill in which information.

[0006] Furthermore, in step S1, the three fields—the form initialization custom function, the field onchange custom function, and the approval form initialization custom function—are all user-programmable input boxes. By filling in the custom function, form data, encapsulated functional functions, components, etc., are obtained through the function's input parameters. All three fields are stored in the backend database.

[0007] The form data is generated by the form configuration on the process form management page, including a List of form field definitions and a JSON file storing the form values. In step S5, when the general form page component calls the initialization interface, the interface returns the data to the front end. The front end page component then dynamically generates the page based on the data returned by the interface.

[0008] Furthermore, in steps S2 and S9, the fields of the general form page component and the approval page are rendered as lists, dynamically generated by the content configured in the process form management page of step S1.

[0009] Furthermore, in steps S3 and S10, when the div nodes with special IDs are rendered using list rendering in steps S2 and S9, div nodes with special IDs are inserted above and below the columns. These IDs must include the column name as a prefix to distinguish div nodes from different columns and prevent rendering errors caused by duplicate IDs. The additional div nodes with special IDs are used to render non-standard form components when executing the "form initialization custom function" in step S6 and the "approval form initialization custom function" in step S11. These are page contents that cannot be configured through the workflow form management page, such as tables, lists, or a group of subforms that the user needs to render within the form.

[0010] Furthermore, in step S4, the field key update function is used to update the key bound during list rendering to avoid the problem of not re-rendering the field when the field attribute changes.

[0011] Furthermore, in step S4, the required attribute update function is used to switch whether a field is a required attribute.

[0012] Furthermore, in step S4, the editable attribute update function is used to control whether the field is in a fillable state or a disabled state.

[0013] Furthermore, in step S4, the field visibility update function is used to control whether the page renders a certain field.

[0014] Furthermore, in steps S6, S7, and S11, after determining that the "form initialization custom function", "field onchange custom function", and "approval form initialization custom function" are not empty and can be converted into executable functions, in addition to passing the functional function described in step S4 as input parameters, other encapsulated functions and components within the project can also be passed as input parameters on the page.

[0015] Furthermore, in step S8, the form filling page is a specific instance of a general form. For example, if a user creates and configures a leave application and a business trip application on the process form management page in step S1, the form entry page will display entry icons for the two application forms. Opening them will display different application forms, and both forms are rendered by the general form page component.

[0016] Furthermore, in steps S7 and S12, by intercepting the onchange event and executing a custom function and a function passed in as input parameters, the editability, requiredness, and display of field attributes are controlled. In addition, the custom function implements the function of calling an HTTP request to dynamically load data and link fields.

[0017] The beneficial effects of this invention are that, through the above technical solution, it achieves the universality of form components. By providing custom functions for editing input boxes on the web page and executing them during form initialization and field onchange, customized complex requirements and application forms with different business needs do not require separate page component development. Custom functions can be edited and saved at any time, and functional changes can take effect in real time without the need for compilation and packaging. Attached Figure Description

[0018] To more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are merely exemplary, and those skilled in the art can derive other embodiments based on the provided drawings without creative effort.

[0019] Figure 1 A schematic diagram illustrating a method for constructing a general form according to an embodiment of the present invention;

[0020] Figure 2 A schematic diagram illustrating a method for constructing an approval page for a general form provided in an embodiment of the present invention; Detailed Implementation

[0021] To further illustrate the technical means and effects adopted by the present invention to achieve its intended purpose, the following detailed description, in conjunction with specific embodiments, provides a more comprehensive overview of the implementation, structure, features, and effects of a compilation-free general form development method proposed according to the present invention. Obviously, the described embodiments are merely some, not all, of the embodiments of the present invention. All other embodiments obtained by those skilled in the art based on the embodiments of the present invention without creative effort are within the scope of protection of the present invention.

Example 1

[0022] like Figure 1 As shown, this embodiment demonstrates the construction of a general form, implementing dynamic display of fields, field requirement status, and field availability through custom functions. The steps are as follows:

[0023] Step 100: Build a general form page component based on the Vue framework.

[0024] Step 200: Enter the custom function in the editing window of the process form management page.

[0025] Step 300: Run the page to execute the custom function.

[0026] In step 100, four sets of functional functions need to be encapsulated. These four sets of functions will be passed as part of the parameters to the custom function entered in the editing window of the process form management page, thereby implementing operations on form attributes. The following is the function to update the field key: const fieldKeys = ref([]); function _getFieldKey(field: string) { const index = fieldKeys.value.findIndex((i) => i.field === field); return fieldKeys.value[index].key; } function _updateFieldKey(field: string) { const index = fieldKeys.value.findIndex((i) => i.field === field); fieldKeys.value[index].key += 1; } The fieldKeys stores the key for each field. The _getFieldKey and _updateFieldKey methods take the field number as input and return the key for the field and the key for the updated field, respectively.

[0027] The following is the function to update the required attribute: const customRequired = ref([]); function _setCustomRequire(require: boolean, fields: string[]) { if (require) { const existing: any = new Set(customRequired.value); fields.forEach((i: string) => { if (!existing.has(i)) { customRequired.value.push(i); existing.add(i); } }); } else { customRequired.value = customRequired.value.filter((i) => !fields.includes(i)); } } function getRequired(field: string, defaultVal: boolean) { if (customRequired.value.filter((i) => i === field)?.length > 0) { return true; } else { return defaultVal; } } The `customRequired` method stores the custom configuration for whether each field is required. When the backend reads user-configured form data from the process form management page, each field has a default required attribute. However, to meet specific requirements—for example, if field 1's value is "A", field 2 must be required; if field 1's value is not "A", field 2 is not required—the existing default required attributes configured in the form configuration page are insufficient. The `_setCustomRequire` method, which takes a list of boolean values ​​and field numbers, allows batch setting of required attributes for the passed fields. The `getRequired` method returns the required attribute value for the current field, with the `defaultVal` parameter representing the default required attribute.

[0028] The following is the function to update whether an attribute is editable: const customDisabled= ref([]); function _setCustomDisable(disable: boolean, fields: string[]) { if (disable) { const existing: any = new Set(customDisabled.value); fields.forEach((i: string) => { if (!existing.has(i)) { customDisabled.value.push(i); existing.add(i); } }); } else { customDisabled.value = customDisabled.value.filter((i) => !fields.includes(i)); } } function getDisable(field: string, defaultVal: boolean) { if (customDisabled.value.filter((i) => i === field)?.length > 0) { return true; } else { return defaultVal; } } The `customDisabled` property stores the custom configuration for whether each field is editable. For complex requirements, such as when field 1 is selected as A, field 2 is not editable, while field 3 is editable; conversely, when field 1 is selected as B, field 2 is editable, while field 3 is not. In such cases, the default editability settings retrieved from the workflow form management page will not meet these requirements. The `_setCustomDisable` method, which takes a boolean value and a list of field numbers as input, allows for batch setting of editability for the submitted fields.

[0029] The following is a function to update the visibility of fields: const hiddenFields = ref([]); function _setFieldVisible(isShow: boolean, fields: string[]) { if (!isShow) { const existing: any = new Set(hiddenFields.value); fields.forEach((i: string) => { if (!existing.has(i)) { hiddenFields.value.push(i); existing.add(i); } }); } else { hiddenFields.value = hiddenFields.value.filter((i) => !fields.includes(i)); } } function getShowField(field: string) { return hiddenFields.value.filter((i) => i === field)?.length <= 0; } The `hiddenFields` property stores all fields that need to be hidden. To achieve the following: if field 1 is selected as A, fields 2 and 3 are displayed, and field 4 is hidden; if field 1 is selected as B, fields 2 and 3 are hidden, and field 4 is displayed, the `_setFieldVisible` method can be executed, passing a boolean value and a list of field numbers to batch set whether the passed fields are hidden. The function `getShowField` takes the field number and returns whether the field is displayed, used in conjunction with Vue's `v-if` conditional rendering to implement the showing and hiding of fields.

[0030] The general form page needs to execute an initialization function during Vue's `onMounted` lifecycle hook. This function calls an HTTP API to retrieve form data configured in the process form management page from the backend. This data includes a `formFields` list of form fields, a `formData` JSON string storing form values, and custom functions for form initialization and field `onchange`. Variables `initFuncStr` and `onchangeFuncStr` are declared to store the custom functions for form initialization and field `onchange`, respectively. Within the initialization function, an `args` object is declared, injecting the aforementioned functions, along with other utility functions and components imported by the page, into this object. const args = { isArray: isArray, / / Other utility functions isEmpty: isEmptyValue, / / Other utility functions updateFieldKey: _updateFieldKey, / / Function to update the field key setCustomRequire: _setCustomRequire, / / Required property update function setCustomDisable: _setCustomDisable, / / Editable property update function setFieldVisible: _setFieldVisible, / / Field visibility update function httpPostRequest: httpPostRequest, / / HTTP request method createApp: createApp, / / Vue createApp function h: h, / / Vue h function Table: Table / / Table UI component Input: Input / / Input box UI component }; The custom string function entered on the process form management page is converted into an executable function by using `new Function('return ' + initFuncStr)`. The `formFields`, `formData`, and `args` parameters are passed in as input parameters, and then executed directly. const createFn = new Function('return ' + initFuncStr); const dynamicFn = createFn(); dynamicFn(formFields.value, formData.value, args); In the `onchange` event of the form field, if `onchangeFuncStr` is not empty, the custom function string is converted into a function using `new Function('return ' + onchangeFuncStr)`, passing in five parameters: `val`, `field`, `formFields`, `formData`, and `args`, and then executed. Here, `val` is the value of `event.target.value` when the `onchange` event of the form field component is triggered, and `field` is the field number that changed, indicating which field experienced the change. The last three parameters are the same as the input parameters of the `initFuncStr` function mentioned above.

[0031] The following is an example of a template for a general form component: <form :model="formData"> <template v-for="item in formFields" :key="item.field"> <FormItem v-if="getShowField(item.field)" :label="item?.label" :name="item.field" :required="getRequired(item.field, item?.required === true)" > <div :id="'formItem-start-' + item.field"> <template v-if="item.elementType === 'CustomField'"> <div :id="'formItem-center-' + item.field"> < / template> <template v-else> <component :is="getComp(item?.elementType)" v-model:value="formData[item.field]" :disabled="getDisable(item.field, item?.editable === false)" :key="getFieldKey(item.field)" @change="handleFieldChange( $event , item.field)" / > < / template> <div :id="'formItem-end-' + item.field"> < / form> Form and FormItem are the UI components for the form and form items, respectively. The Form component binds to the form value formData, and renders each FormItem by iterating through the List (formFields) defined for the form fields. The FormItem uses v-if to bind the return value of the getShowField method to control whether the field is displayed, and the required attribute binds to the return value of the getRequired method to control whether the field is required. <component / >This is responsible for dynamically rendering form field components, such as dropdown lists and input fields. Its `disabled` property is bound to the return value of the `getDisable` method, controlling whether the field is editable. Its `key` property is bound to the return value of the `getFieldKey` method, updating the field's key to trigger a re-render. `@change` binds to the function `handleFieldChange(`. $event The `handleFieldChange` function takes the original event object and the field number (`field`) that triggered the `change` event as input parameters. When the event is triggered, the `handleFieldChange` function executes the custom function `onchangeFuncStr` mentioned above.

[0032] in <div :id="'formItem-start-' + item.field">A div with an ID containing "center" and "end" is a div node with a special ID. In a custom function, the div node can be retrieved based on its ID. Then, the createApp and h functions injected into the args object can be used to render custom HTML content or UI components onto that node.

[0033] In step 200, the user enters the custom function for form initialization and the custom function for the field `onchange` in the editing window of the process form management page according to actual needs. Below is an example of the custom function for form initialization: async (fields, formData, args = {}) => { args.setFieldVisible(false, ['BeginDate', EndDate]); / / Hides two fields args.setCustomRequire(true, ['BeginPlaceID']); / / Sets the field to be required args.setCustomDisable(true, ['Reverse1]); / / Disable editing of the field The above code implements operations on page fields when the page loads. const createApp = args.createApp; const node = createApp({render: () => h('div', { style: {}}, [])}); node.mount(`#formItem-start-PlanIds`); The code above renders a custom div node onto the field with the field number PlanIds. } In the h('div', {}, []) function, the first parameter 'div' can be replaced with any HTML tag supported by HTML, as well as a custom UI component passed through the args object; the second parameter can be any HTML tag attribute or custom component props, as well as the component's onclick and onchange events, etc.; the third parameter can be the nested child elements inside the element.

[0034] Below is an example of a custom function for the `onchange` field: async (val, field, fields, formData, args = {}) => { const httpPostRequest = args.httpPostRequest; const isEmpty = args.isEmpty; if (field === 'ChangeTypeID') { if (formData.ChangeTypeID === 28) { setFieldVisible(true, ['Info1']); } else { setFieldVisible(false, ['Info1']); } } if (!isEmpty(formData.StaffID) && !isEmpty(formData.ApplyDate)) { const params = { StaffID: formData.StaffID, ApplyDate:formData.ApplyDate}; const result = await httpPostRequest(params); for (let i in result.DT_BatchErrorInfo) { formData[i] = result.DT_BatchErrorInfo[i]; } } } The first if statement block enables the Info1 field to be visible when the ChangeTypeID value is 28, and disables it when it is not equal to 28. The second if statement block invokes an HTTP request to the backend API when both StaffID and ApplyDate are not empty, it iterates through the returned data, and assigns it to the form's formData. This allows additional information to be loaded and displayed in the form after the user enters two key form fields.

[0035]

Example 2

[0036] In the onchange event of the approval page field, if the value of the onChangeCallBack variable is not empty, pass in the required input parameters and execute.

[0037] Below is a use case for initializing the custom function of the approval form: (fields, formData, args = {}) => { const setFieldVisible = args.setFieldVisible; / / Below is the callback function for field changes async function onFieldChange(e, _field, cols, formData) { if (_field === 'Reverse1') { if (formData.Reverse1 === 'A01') { setFieldVisible(false, ['Reverse2']); } else { setFieldVisible(true, ['Reverse2']); } } } / / Below is how to attach custom HTML elements or UI components to the approval form page. const createApp = args.createApp; const node = createApp({render: () => h('div', { style: {}}, [])}); node.mount(`#formItem-start-PlanIds`); / / Finally, return the previously declared callback function for changing the field as the return value. return { onFieldChange, }; } The above are merely embodiments of the present invention and are not intended to limit the present invention. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the present invention are included within the scope of the claims of the present invention pending approval.

Claims

1. A compilation-free, universal form development method, characterized in that, Includes the following steps: S1. Provide a custom function editing entry on the process form management page. The entry includes at least a form initialization custom function, a field onchange custom function, and an approval form initialization custom function. S2. Create a general form page component and pre-define a node with a special ID tag in each form field of the component; S3. Encapsulate functional functions for controlling form attributes in a general form page component. The functional functions include at least: a field key update function, a required field attribute update function, an editable attribute update function, and a field visibility update function. S4. The general form page component calls the initialization interface to obtain the custom function content saved in step S1; S5. Convert the obtained content of the form initialization custom function and the field onchange custom function into executable functions; S6. Execute the custom function for initializing the transformed form, and pass the function encapsulated in step S3 as the input parameter; S7. Intercept the onchange event of the form field, execute the custom onchange function of the transformed field, and pass the function encapsulated in step S3 as the input parameter; S8. On the form approval page, the custom function for initializing the obtained approval form is converted into an executable function and executed. If the return value after execution contains the onFieldChange function, the onFieldChange function is executed when the field's onchange event is intercepted.

2. The method for developing universal forms without compilation according to claim 1, characterized in that, In step S1, the custom function editing entry is a text input box where the user writes JavaScript function code, which is then saved to the backend database. In step S4, the general form page component dynamically renders the page based on the form field definitions returned by the interface, and returns the function code string stored in the database to the frontend through the interface.

3. The universal form development method without compilation according to claim 1, characterized in that, In steps S2 and S8, the fields of the general form page component and the form approval page are generated using a list rendering method; the nodes marked with special IDs are div nodes inserted above and below each field when rendering each field, and the id of the div node includes the field name as a prefix. The nodes marked with special IDs are used to render unconventional form components that cannot be generated through configuration by mounting them when executing custom functions.

4. The universal form development method without compilation according to claim 1, characterized in that, The specific functions encapsulated in step S3 are as follows: The field key update function is used to update the key value bound during list rendering to trigger the field to re-render; The required attribute update function is used to dynamically switch the required attributes of the field. The editability attribute update function is used to control whether a field is in a fillable or disabled state; the field visibility update function is used to control whether the page renders a specific field.

5. The universal form development method without compilation according to claim 1, characterized in that, In steps S6, S7, and S8, when converting the custom function content into an executable function, in addition to the functional function described in step S3, the utility function, UI component, HTTP request method, and Vue framework function encapsulated within the project are also passed as input parameters. The custom function dynamically loads data by calling the passed HTTP request method and mounts the custom UI component to the special ID marker node described in step S2 by calling the passed Vue framework function.

6. The universal form development method without compilation according to claim 1, characterized in that, Step S8 specifically includes: declaring a variable on the form approval page, executing the custom function for initializing the converted approval form, and passing the encapsulated function as an input parameter; judging the return value after the function is executed, and if the return value is not empty and contains the onFieldChange function, then assigning the function to the variable; when intercepting all field onchange events, judging that the variable is not empty and is valid, and then executing the function corresponding to the variable.

7. The universal form development method without compilation according to claim 1, characterized in that, The method is used to solve the complex logic requirements of workflow application forms in web applications. By dynamically executing the configured JavaScript code on the front end, it enables changes to form logic, field linkage, and dynamic rendering components without recompiling and repackaging.

Images