Research And Implementation Of A Visual General Dynamic Form Model Generation Engine For Chemical Industry

In the digital era,the digital transformation of various industries in the chemical in dustry is accelerating,and the digital transformation platform plays an important role in it,form as the data carrier of the platform is one of the research focuses.Due to the large number and different structures of forms in the chemical field,the traditional hard coding form development method is no longer applicable,and the dynamic form deve lopment technology needs to be used to deal with the complex form requirements in the chemical field.In dynamic form development technology,the dynamic form model is an important component,which defines and describes the data structure,form elements,and their attributes of a form.However,due to the different form rendering mechanisms of different front-end frameworks,current form models often rely on specific front-end frameworks and do not have compatibility,which reduces development efficiency.This article researches and implements a visual general dynamic form model gener ation engine for the chemical industry field.The dynamic form model is designed in a drag-and-drop and configurable manner,and converted into a JSON configuration file with a unified structure to adapt to the dynamic form rendering of multiple front-end frameworks.The engine is divided into two parts:a visual dynamic form model editing platform and a back-end platform service layer.The main work of each part is as follows:(1)The visual dynamic form model editing platform can completes the design of dynamic form models through component dragging and attribute configuration.The platform is based on the Vue.js technical system and adopts a grid format page layout,which is divided into three major areas,namely,the component panel,the attribute configuration panel,and the form model design panel.In the component panel,users can select various components,including input boxes,drop-down menus,date selectors,radio boxes,and so on;The attribute configuration panel allows users to configure the attributes of the selected component,including the component’s label name,default value,whether it is required,and verification rules;In the form model design panel,users can drag,sort,adjust,and delete form components based on their needs,thereby achieving dynamic form model design.(2)The back-end platform service layer adopts the Spring Boot technology system,which aims to provide platform-based Web services to support various functions of the visual dynamic form model editing platform,mainly including form configuration,dynamic form model management,and front-end framework adapter conversion.Form configuration includes component management and component attribute management.The front-end framework adapter can convert the designed dynamic form model into a unified JSON configuration file,ensuring that it is suitable for dynamic form rendering with multiple front-end frameworks.The generation process of the unified JSON configuration file is as follows:First,drag and drop components and configure attributes on the visual dynamic form model editing platform to complete the construction of the dynamic form model.Then,the component information and attribute configuration information of the dynamic form model are mapped into a relational database through the form configuration of the back-end platform service layer.Finally,the above information stored in the relational database is extracted through the front-end adapter of the back-end platform service layer,and its enhancement is converted into a unified JSON configuration file required for structured dynamic form rendering,and persisted to a non-relational database.After practical application testing,the engine has a good operating effect,which can improve the efficiency of dynamic form model design and generation in the chemical industry field,and the generated unified JSON configuration file can adapt to dynamic form page rendering of various mainstream front-end frameworks.