CN115659932A - Extensible form configuration method and system based on object-oriented idea - Google Patents
Extensible form configuration method and system based on object-oriented idea Download PDFInfo
- Publication number
- CN115659932A CN115659932A CN202211374970.9A CN202211374970A CN115659932A CN 115659932 A CN115659932 A CN 115659932A CN 202211374970 A CN202211374970 A CN 202211374970A CN 115659932 A CN115659932 A CN 115659932A
- Authority
- CN
- China
- Prior art keywords
- data
- template
- configuration table
- form template
- configuration
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 103
- 230000008569 process Effects 0.000 claims abstract description 53
- 230000003044 adaptive effect Effects 0.000 claims abstract description 22
- 238000009877 rendering Methods 0.000 claims abstract description 15
- 238000003860 storage Methods 0.000 claims description 25
- 238000004590 computer program Methods 0.000 claims description 20
- 238000004458 analytical method Methods 0.000 claims description 16
- 230000006870 function Effects 0.000 abstract description 37
- 238000011161 development Methods 0.000 abstract description 16
- 238000012423 maintenance Methods 0.000 abstract description 11
- 238000012545 processing Methods 0.000 description 22
- 230000018109 developmental process Effects 0.000 description 14
- 238000010586 diagram Methods 0.000 description 10
- 230000008859 change Effects 0.000 description 8
- 238000004891 communication Methods 0.000 description 6
- 230000014509 gene expression Effects 0.000 description 6
- 238000012360 testing method Methods 0.000 description 5
- 238000012986 modification Methods 0.000 description 4
- 230000004048 modification Effects 0.000 description 4
- 230000009471 action Effects 0.000 description 2
- 239000000872 buffer Substances 0.000 description 2
- 230000007547 defect Effects 0.000 description 2
- 238000013461 design Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 238000012795 verification Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000008901 benefit Effects 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 230000001413 cellular effect Effects 0.000 description 1
- 238000004140 cleaning Methods 0.000 description 1
- 230000000295 complement effect Effects 0.000 description 1
- 239000002131 composite material Substances 0.000 description 1
- 230000001351 cycling effect Effects 0.000 description 1
- 238000013479 data entry Methods 0.000 description 1
- 238000005538 encapsulation Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000010365 information processing Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 239000000203 mixture Substances 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000004806 packaging method and process Methods 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 238000003672 processing method Methods 0.000 description 1
- 238000009517 secondary packaging Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 239000000725 suspension Substances 0.000 description 1
- 230000033772 system development Effects 0.000 description 1
- 238000012546 transfer Methods 0.000 description 1
- 230000009466 transformation Effects 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Images
Landscapes
- Stored Programmes (AREA)
Abstract
The invention relates to an extensible form configuration method and system based on an object-oriented idea, which comprises the following steps: establishing a form template configuration table and a process configuration table; receiving request data, and judging a request based on whether the form data ID is included in the request data; if the request is a newly-built form, inquiring a form template matched in a form template configuration table based on the request data; obtaining an adaptive form template; analyzing the adaptive form template through common Add to obtain an analyzed form; and rendering the parsed form through createForm to generate the form. The extensible form configuration method and the system based on the object-oriented idea can effectively improve the development efficiency, save the development amount, save the development cost, unify the component style and reduce the maintenance cost, and can also enable the components to be flexibly configured, and the same component to be displayed in a diversified manner and have diversified functions.
Description
Technical Field
The invention relates to the technical field of computer software development, in particular to an object-oriented idea-based extensible form configuration method and system.
Background
For a business system with a large number of forms, the prior art needs to rewrite all form fields and business processing logic once for each page, which doubles the workload of front-end and back-end development and testing. If the form business logic changes or the same field of different forms is modified, the front end needs to modify a plurality of pages, and the back end needs to modify a plurality of interfaces in a matching way, which undoubtedly increases the workload and the error rate, and meanwhile, recompilation, deployment, edition release and online are needed. That is, the workload of the front end and the back end required by the prior art is large, different forms need to have corresponding front end pages and front end and back end service processing logics, and the basic operations of the forms are approximately the same, but the fields are different and the flows are different; the same form component, such as an input box, a drop-down selection component, a time component and the like, needs to be used at multiple positions of different forms, so that the maintenance cost is increased; if the business requirement changes, a front-end developer and a back-end developer are required to modify codes and then re-deploy the publishing online.
Disclosure of Invention
In order to solve the defects of the prior art, the invention provides an extensible form configuration method and system based on an object-oriented idea, aiming at solving the problems that the system development and maintenance workload of a large number of forms is large, and the object-oriented idea is used for packaging an easily-extensible form configuration device, so that the development efficiency can be effectively improved, the development amount and the development cost can be saved, the style of components can be unified, the maintenance cost can be reduced, the components can be flexibly configured, and the same component can be displayed in a diversified manner and has diversified functions. Meanwhile, the form content can be added and modified, the form is not required to be sent out and on-line, and only the configuration is required to be modified.
In order to achieve the above purpose, the technical scheme adopted by the invention comprises the following steps:
an extensibility form configuration method based on object-oriented idea is characterized by comprising the following steps:
establishing a form template configuration table and a process configuration table, including;
newly building a form template; inputting the Chinese name and English identification of the form template; adding a plurality of steps for the form template, and recording step Chinese identification and step English identification of each step; judging whether the step has a flow; if the step has a flow, drawing a flow model of the step; storing the process model in the step into a process configuration table; acquiring service information, configuring fields for steps based on the service information, and establishing a form field list; configuring operation buttons for the steps; storing the form template completed by the configuration button into a form template configuration table;
receiving request data, and judging a request based on whether the form data ID is included in the request data, wherein the method comprises the following steps: if the form generation request data does not include the form data ID, the request is the inquiry form details; if the form generation request data comprises a form data ID, the request is a new form;
if the request is a newly-built form, inquiring a matched form template in a form template configuration table based on the request data; obtaining an adaptive form template;
analyzing the adaptive form template through common Add to obtain an analyzed form; and rendering the parsed form through createForm to generate the form.
Further, the parsing the adapted form template through common add to obtain a parsed form includes:
acquiring a Chinese name and an English identification of the adaptive form template; obtaining a plurality of steps of the adaptive form template, and judging whether the steps have a flow; if the step has the flow, selecting a corresponding flow model in a flow configuration table, and adapting the flow model; acquiring a form field list and form configuration information, and assigning values to fields in the form field list through the form configuration information; and analyzing and executing the initEvent based on the fields through the adaptive flow model to obtain the analyzed form.
Further, the method also comprises the following steps: establishing a form data information storage table according to instantiation data established by the form template configuration table; and establishing a flow data information storage table according to the form template and the instantiation data created by the corresponding flow configuration table.
Further, the form template configuration table includes: the form template, the Chinese name of the form template and the English identification of the form template; the process configuration table includes: the method comprises the steps of Chinese identification, english identification and a process model of the steps.
Further, the field includes: common fields and custom component fields; the attributes of the fields include: public attributes and private attributes.
Further, the form template configuration table and the form data information storage table are stored by adopting a MongoDB database.
The invention also relates to an extensible form configuration system based on the object-oriented idea, which is characterized by comprising the following steps:
the form template configuration table and process configuration table establishing module is used for establishing a form template configuration table and a process configuration table, and comprises the following steps;
newly building a form template; inputting a Chinese name and an English identification of the form template; adding a plurality of steps for the form template, and recording step Chinese identification and step English identification of each step; judging whether the step has a flow; if the step has a flow, drawing a flow model of the step; storing the process model in the step into a process configuration table; acquiring service information, configuring fields for steps based on the service information, and establishing a form field list; configuring operation buttons for the steps; storing the form template completed by the configuration button into a form template configuration table;
the request data judging module is used for receiving the request data and judging a request based on whether the request data comprises a form data ID or not; if the form generation request data does not include the form data ID, the request is the inquiry form details; if the form generation request data comprises a form data ID, the request is a newly-built form;
the adaptive form template acquisition module is used for inquiring a matched form template in the form template configuration table based on the request data if the request is a newly-built form; obtaining an adaptive form template;
the analysis module is used for analyzing the adaptive form template through common Add to obtain an analyzed form;
and the rendering module is used for rendering the analyzed form through createForm to generate the form.
The present invention further relates to a computer-readable storage medium, wherein the storage medium stores a computer program, and when the computer program is executed by a processor, the computer program implements the method for configuring an extensible form based on an object-oriented idea.
The invention also relates to an electronic device, characterized in that it comprises a processor and a memory;
the memory is used for storing a form template configuration table and a process configuration table;
the processor is used for executing the extensible form configuration method based on the object-oriented idea by calling the form template configuration table and the flow configuration table.
The invention also relates to a computer program product comprising a computer program and/or instructions, characterized in that the computer program and/or instructions, when executed by a processor, implement the steps of the above described extensibility form configuration method based on object-oriented ideas.
The invention has the beneficial effects that:
by adopting the extensible form configuration method and the system based on the object-oriented idea, the assembly is packaged based on the object-oriented idea, so that the assembly is easy to extend and can be flexibly configured; the components of the same type are controlled through different attributes based on one basic component, so that the style of the components can be unified, the components can be displayed in a diversified manner, the functions are diversified, and the later maintenance is facilitated; each component is reserved with a hook function, the hook function supports js and can be configured, and all reserved field information of a page can be obtained from the function; the development efficiency can be effectively improved, the development amount can be saved, the development cost can be saved, the style of the assembly can be unified, the maintenance cost can be reduced, the assembly can be flexibly configured, the same assembly can be displayed in a diversified mode, and the functions can be diversified. Meanwhile, the form content can be added and modified, the form is not required to be sent out and on-line, and only the configuration is required to be modified.
Drawings
Fig. 1 is a schematic flow diagram of an extensibility form configuration method based on an object-oriented idea according to the present invention.
Fig. 2 is a schematic structural diagram of an extensibility form configuration system based on an object-oriented idea according to the present invention.
Detailed Description
For a clearer understanding of the contents of the present invention, reference will be made to the accompanying drawings and examples.
Assembly of: simple encapsulation of data and methods. Such as: the input boxes, drop-downs, time components, etc. in the form may all be referred to as components, and each component may have its own properties and methods.
The attribute is as follows: an abstract depiction of an object. A specific object always has a great number of properties and relationships, and the properties and relationships of an object are called the attributes of the object. Such as: the longest input character in the input box in the form, whether the drop-down selection is multiple-choice, the format of the time component, etc. may all be referred to as attributes.
Form: the webpage is mainly responsible for data acquisition functions. Typically containing form fields (input boxes, drop-downs, time components, etc.) and form buttons (save, submit, forward, previous step, next step, etc.).
Instantiation: instantiation refers to the process of creating objects from classes in object-oriented programming, referred to as instantiation. The method is a process for embodying an abstract concept class to a class real object.
The extensible form configuration system and the method thereof based on the object-oriented idea are provided for solving the background defects of the prior art, and can effectively improve the development efficiency, save the development amount, save the development cost, unify the component style and reduce the maintenance cost. The object-oriented method can also enable the components to be flexibly configured and easily expanded, and the same component can be displayed in a diversified manner and has diversified functions. Meanwhile, the form content can be added and modified, the form is not required to be sent out and on-line, and only the configuration is required to be modified.
The first aspect of the present invention relates to a method as shown in fig. 1, which is based on the idea of object-oriented extensibility form configuration method, and comprises the following steps:
the invention is completed by matching a set of front-end configuration and analysis system and a set of background processing system. The front-end configuration system provides form template configuration, process model configuration, configuration analysis, form data entry and the like, and the back-end processing system provides data query assembly, data information processing library falling, process circulation and the like.
And configuring a form template through the front end, transmitting the form template to the rear end, and storing the form template in a database at the rear end. And when a form is newly built or the details of the form are checked, a back-end query interface is called, the back end queries a database after receiving the parameters, a form template and the details of the form are searched out, the data are assembled and then returned to the front end, the front end carries out configuration analysis after taking the data, and then the page is rendered. After the user operates on the page, corresponding form operation (submission, storage and the like) is carried out, the form data information, the form information, the step information, the process information and the form operation button types are transmitted to the back end by the front end, the data processing is carried out by the back end, then the data base operation is carried out, and if the form is bound with a process, the corresponding process circulation and the like are carried out by the back end.
As known from the above functions and interactions of the front-end and back-end systems, a system for configuring and analyzing the front-end of the system generally comprises four menu modules:
the form configuration center: the menu module performs operations of adding, deleting, modifying and checking a form template, and the form template is specifically configured. And creating a form template, configuring form fields for the form template according to business logic, and performing form business combing and form operation control.
The flow configuration center: the menu module is used for carrying out the operations of adding, deleting, modifying and checking on the flow model. Drawing a corresponding flow chart according to the business needs and judging the flow trend.
Form data list: the menu module is used for carrying out the operations of increasing, deleting, modifying and checking the form data information, and the form configuration analysis processing is carried out. According to the service information, the menu can be split into different menu function modules according to the form types, and the splitting is not performed firstly when the menu is introduced.
My to-Do: the menu function module is an operation list page for processing flow circulation by setting instantiation data with flow configuration in the list. The data presented here are all approval flows that I need to deal with.
The back-end processing system generally needs to perform operation processing on the following four databases:
form template configuration table: the database table correspondingly stores data configured by the forms, and the stored data are templates of various types of forms and are basic data for page rendering.
And the flow configuration table is used for storing each flow model in the database, and is a flow template for the form to be circulated.
Form data information storage table: the database is instantiated data created from a form template configuration table.
Flow data information storage table: the database is instantiated data created from the form template and associated flow configuration table.
The databases are directly related and mapped with each other through the main key, so that corresponding data information can be searched out from different databases according to a certain identifier.
In order to better realize configuration and facilitate the later expansion of component attributes (public attributes and private attributes) and form fields, a MongoDB database is adopted for storage by considering a form template configuration table and a form data information storage table, because the MongoDB is a product between a relational database and a non-relational database, has the most abundant functions in the non-relational database, and is most like the relational database. The data structure supported by the method is very loose and is similar to the bson format of json, so that more complex data types can be stored. Just by utilizing the characteristics of the MongoDB database, the attribute of the field can be freely expanded by using an object-oriented idea, so that the flexible diversity of the components can be achieved, if the database like MySql is used, the database needs to be modified when the attribute of one component is newly added or a form field is newly added, and meanwhile, front and rear end codes need to be modified, so that the attribute and the form field are not favorably expanded at the later stage. By utilizing the characteristics of the MongoDB database, the pressure of a back end on data assembly and data query can be reduced, a form configured template can be completely used as a json to directly store the database, and the template can be directly taken out during query; corresponding to the form data information, json can be directly stored, and the json can be directly taken out during query.
And directly storing the form configuration information into the corresponding field, and directly taking out the rendering when taking the form configuration information. And the form can display different step information according to conditions or process nodes, the different step information can have different form display contents, each type of form component has public attributes and private attributes, and the attributes ensure the uniformity and diversity of the form component rendering. The public attribute is the attribute which is possessed by each type of field, so that the uniformity of the components is ensured; the private attribute is the attribute specific to a certain component, and the diversity of the component is ensured. Each attribute has its own presentation characteristics by which the same component can be presented in different forms.
Form configuration
Configuring a new form template typically consists of the following steps:
1. and clicking the form configuration menu and clicking the newly added form template. And inputting the Chinese name and the English identification of the new template into the page of the open form template.
2. Adding step information to the new form template: if the step has a flow, a flow model is drawn in a flow module, the Chinese and English flow identifiers are defined, and then the flow identifiers are selected for flow binding in the step as required.
3. Configuring field information for the step according to the service information: this step requires defining various common form field types in advance, such as: input boxes, drop down selection, time components, radio boxes, check boxes, rich text, attachment uploading, and the like; some custom components may also be packaged, such as: approval records, excel processing components or some custom composition components, etc. Each form field type is composed of public attributes and private attributes, the public attributes include control (field type), fieldName (field name), fieldKey (field english name), show (display field, default true), required (must fill, default false), allowingput (allow editing, default true), sn (sorting of fields in the form, this is done by dragging in a field list), placeholder (place holder), isClear (whether allow clearing, default true), grid (the field occupies several of 24 grid when rasterized, default 12), labelgid (the name occupies several of 24 grid when rasterized, default 8), columnair (content area occupies several of 24 grid when rasterized, default 16), tiplnd (mouse moves into the field and displays additional description information of field name, field description information, field description information support), field description information (change function), change function (change function) and event description function (change function). The private attribute needs to be specific to a specific component type, for example, the private attribute of the input box includes length (maximum length of characters), rule (a check rule, a part of known and possibly appearing check rules needs to be defined in advance, and is selected according to needs); the private attributes of the drop-down selection component include selectType (picture before imgSelect option/icon before iconSelect option/bgSelect option with background and border/regular default), single (single-select or not), fuzzy (fuzzy search is supported or not), extraLabel (description information after options chinese, such as: name pinyin behind a Chinese name), selectedabai (a drop-down data interface, where the interface supports parameter concatenation, a value in a form field can be obtained through a this.form. Form field, an arbitrary value returned in a form detail interface can also be obtained through this.result, and so on, as long as a field processed by a form configuration analysis page can be obtained here), searchLabel (a drop-down option label field value, which supports an expression, generally takes a value by using an item. Field identifier), searchValue (a drop-down option value field value, which supports an expression, generally takes a value by using an item. Field identifier), optImg (a picture field value before a drop-down option, which supports an expression, generally takes a value by using an item. Field identifier. The method comprises the steps of obtaining a current value only when imgSelect is performed), optiClon (a font icon field before a pull-down option takes a value and supports an expression, and an item field identifier is usually used for obtaining a value, the current value is obtained only when selectType is in iconSelect), optColor (a background field takes a value and supports an expression when a pull-down option is provided with a background, and an item field identifier is usually used for obtaining a value, the current value is obtained only when selectType is in bgSelect), seledData (if the pull-down option is not taken through an interface, the field needs to be configured, and the field is a pull-down option list which can be configured); the private attributes of the time component include pickerType (time component/date range component), dataformat (data lattice number: YYYY-MM-DD, YYYY-MM-DDHH: MM: ss, etc.), optionalRange (selectable time range), and the like. The private attributes of the above three basic components are only one representative, all the private attributes of the components are not listed one by one, and other components are defined by the same idea as the above three component attributes. The configuration information of each component is an object, and the array formed by the field configuration information is a field list.
Whether public attributes or private attributes, important attributes basically have default values in order to ensure that a page can be rendered. Actions can be broadly classified according to attributes as: field type (control), default value/value (defaultValue), hook function (initEvent, changeEvent, clickEvent), and presentation property (all but the above three types may be referred to as presentation property). The object composed of these attributes is the configuration information of the field, i.e. the configuration of the field. The configuration page of the form fields is roughly like the form field configuration page of fig. 3. If the component has extra service extension, the method can be realized by adding attribute configuration.
4. Configuring operation buttons for the current step: the attributes of the buttons include button name, bgColor, color, show, sn, isRequire, saveTips (whether prompt information exists when a button is clicked), tips (content of prompt information, html is supported), triggerJavaScript (js processing before a button is clicked to call an interface, where operations before submission, such as special checks, etc., are usually performed), button opttype (button execution operation type, which is pre-determined by a back end in advance by the back end, such as deleting, saving, submitting, previous step, next step, approval pass, approval reject, completion, suspension, wake-up, etc., the operation type is extensible, the front end selects an operation type pre-determined by the back end when the button is configured, clicks the button, transfers form data, step information, flow information, etc., to the back end, executes corresponding operation logic based on the button operation type, i.e., one button can be saved, multiple buttons can be added, and then, if data flow needs to be submitted, the next step can be automatically started, such as a flow is submitted. The form operation button configuration idea is field configuration. The roles configured according to the attributes of the form operation buttons can be roughly classified into two categories: hook functions (triggerJavaScript: js processing before clicking a button call interface), and show properties (all of which may be referred to as show properties in addition to hook functions). The configuration information of each button is also an object, and the array formed by the objects is a button list.
5. If the form is a multi-step form, repeating the steps 2,3 and 4
6. And if the data is completely recorded, clicking and storing after the data is confirmed to be correct, and processing the data through a rear-end interface to drop the database to a form template configuration table.
In summary, multiple steps can be configured in the form, multiple fields, multiple form operation buttons and whether a certain process model is bound can be configured in the steps, and the configuration of the form is formed by a series of configuration operations.
With the configuration information of the form, the analysis of the form configuration is also important, and the form configuration and the configuration analysis complement each other and are all indispensable. The front end typically consists of two pages, commonod is responsible for the form data parsing and submission data mechanism, createForm is responsible for the form rendering, and createForm is a component of commonod. The following is the process of form configuration parsing:
1. and opening a new form or opening form detail common Add, transmitting a form template identification and a form data ID, inquiring the detail if the form template identification has the data ID, and receiving a parameter request form template and form data at the rear end of an interface if the form data ID does not exist, simply assembling and returning to the front end.
2. The front-end receives the parameters and assigns the composite data to this. The field list of the form is assigned to this.fieldlist, the form data is assigned to this.form (which is also the reason why some components requiring interface request data can get any data through this.form, if the new page is a new page, this is the empty object at this time), then the process.fieldlist is circularly traversed, and check rules of each item are extracted to this.formrules (the isRequire assembly check rule is obtained according to each field), default values to defaultForm, whether the item is displayed to this.fieldshowslist, and whether the item can be edited to this.displaylist, these fields are all objects, and are all stored through this.xxx. Field identifier, and corresponding configuration values of the fields can be fetched through this english.xxx. Field identifier.
3. And then integrating the default value and the form value returned by the interface through an extension operator of the ES6 to obtain the latest value of form. The characteristic of the extension operator is that the following object can cover the previous object, and the extension operator can be modified if the object exists and added if the object does not exist. Therefore, the most real form value can be obtained, and the circular judgment is omitted.
Writing of the extended operator: this is.form = { \ 8230; this is.defaultform } 8230; this is.form }
The extended operator uses the example: such as defaultForm: { a: "aa", b: "bb" }, form: { b: "bbb", c: "cc" }, which, after the above-described writing method, gave the result { a: "aa", b: "bbb", c: "cc" }.
4. The commonod parsed data is passed all the way to the createForm component. createForm starts cycling fieldList when it senses a change in fieldList. Fieldsetting retains a copy of the original configuration information for later use. And then finding an initEvent of each field for analysis and execution (the initEvent usually modifies a certain field explicit-implicit ShowList according to conditions, modifies whether a certain field can be edited into a disabled List, modifies whether a certain field needs to be filled in for mRules), if the modification is pull-down selection or configuration needs to initialize a calling interface, calling the interface according to configured interface parameters and the like, then loading data and respectively assigning values (the packaged public method of the calling interface only needs to input the interface, the field configuration is input, usually the interface is spliced with parameter expressions, after the interface requests data, judging whether the interface requests the form value or the option and the like according to the field identification, and respectively assigning values), wherein the pull-down selected option is placed in the field of options no matter whether the option is configured or the interface request.
5. The createForm starts to render a page after receiving data, object attributes of each field are obtained through circulating fieldList, components are selected according to component type control, component layout is carried out according to rasterized attributes grid, labelgird and columnair, component display and hiding are controlled according to formRules control verification rules, whether editing is available or not is controlled according to discordatlist, and corresponding functions are respectively displayed according to configuration of each field.
6. Each component is bound with some common events such as change events and click events when rendering. Change events for these components will call the common commonFieldChange method and click events will call the common commonFieldClick method. The configuration contents of the corresponding hook functions are respectively executed in the public methods, so that the flexible processing of the service logic is realized. Through the collected fields (form, formRules, fieldShowList, disabledList, fieldSetting, etc.), the hook functions can control the explicit hiding, the mandatory filling, the editable or the non-editable and the assignment of one field or the appointed value of another field; the value of one pull-down option can control another pull-down option, and the like. Almost any logic processing desired in the hook function can be done. The hook function is the configuration of the code, and the code is matched into the hook function configuration of the field. The advantage of this is that the front-end code only undertakes rendering logic, no service logic needs to be carried, and all service logic is in the hook function. Because the hook function is configurable js, the hook function can be directly modified to realize the latest function, and the code does not need to be modified to be deployed online. Some components, in addition to the above, are focus, blu, custom events, etc., each with its own responsibilities and missions.
7. The generic change, click event, in addition to carrying the hook function, also carries the role of passing the latest form field values to the common Add page to facilitate the assembly of the data required for the form action buttons.
8. After the form field is operated, the form operation button can be clicked, after the operation button is clicked, the front end can firstly see whether form verification is needed or not and whether prompt contents exist or not according to the button configuration, after a series of judgments, form submission data assembly is carried out, the assembled form submission data is transmitted to the rear end, subsequent operation is carried out by the rear end, the front end closes a page according to an operation result, and a list is refreshed.
In summary, the general concepts of form configuration and configuration parsing have been described for cleaning. The form configuration system designed here does: the form can be matched, the flow can be matched, the form field can be matched, and the form operation button can be matched. After the front-end configuration, the configuration analysis and the back-end processing center are matched, the form, the flow, the field, the form operation button and the like are modified, the configuration information can be directly modified without modifying codes, modification and storage can be achieved, and the release is not required to be deployed. Because these configuration pages are all visible, maintenance costs are also reduced.
Therefore, an extensible form configuration system based on object-oriented idea implementation can be implemented. The system is used as a form configuration and configuration analysis system and can be used for various types of systems to acquire form configuration data.
It should be noted that there are various implementation manners of the flow configuration center, and two implementation manners are briefly described here:
1. performing secondary packaging through an active control, manually drawing a flow chart by using a visual page, and configuring different nodes;
2. and the flow configuration is realized through the flow node list and various identification configurations of the nodes.
It should be noted that, in the method, the form configuration table and the form data information storage table are stored by using a MongoDB database, and may also be replaced by using a MySql database. MySql is a standard relational database, stored data are standard in comparison, meanwhile, mysql query efficiency is higher than that of MongoDB, burden of storing and querying assembly data at the back end can be increased after replacement, and the burden can be accepted at a high query rate. If the MySql database is used for storage, the form configurated design needs partial transformation:
the form configuration template data structure needs to be jogged, and the private attributes of the form field components need to be put into a large text field, so that the attributes are convenient to expand. Normally, the public attribute of the field component is not easily added or deleted once being defined, because various fields which can serve as the public attribute need to be extracted and defined in advance, and if the public attribute needs to be added, the public attribute can be treated as a private attribute. If the component needs to extend the private attribute, only the large field of the private attribute needs to be modified.
The configured storage value of the form and the configured and analyzed private attribute access value need to be changed. Because the data structure changes, the access value logic will follow the changes
The form data information database also needs to be redesigned. In order to realize field configurability and expandability, more than a few database tables are needed.
As a first embodiment of the extensibility form configuration method based on the object-oriented idea, a configuration process of form configuration and a use step of the system are introduced as follows:
taking the typical configuration and configuration analysis of the personnel admission form as an example, the business logic is assumed as follows: and submitting basic entrance information of personnel by the personnel department, setting post countersignatures through an entrance guard post and an account after approval of a project manager, filling the created entrance guard number and the created condition of the account respectively, finally summarizing to the personnel department, and finishing the process. The form state is assumed to be new, in the process of entering the field, signed and completed. Assume that the fields of the form have: the system comprises an identity card number (an input box, an interface is called back to bring back a name, a sex and an age after the identity card number is input), a name (the input box is not editable), a sex (drop-down selection and not editable), an age (a digital input box is not editable), a personnel category (drop-down selection, which is divided into development, testing and operation and maintenance), a personnel level (drop-down selection, different levels are displayed according to different categories of personnel, the level of the development/testing category is a portal layer/a middle-firm layer/a band layer, the level of the operation and maintenance category is a primary level/a middle level/a high level), whether working experience (radio order selection) exists or not, working age limit (a digital input box, if working experience exists, display is not performed), an affiliated project (drop-down selection is obtained through an interface), project management (drop-down selection, an option is loaded according to the affiliated project), a portal access control number (an input box, only when a form state is signed, and a current entry state is a form is signed, and only when the form is signed, an account number is input box is signed, and only when the current entry state is signed, and the account number is edited, and only when the equipment is signed. The following implementation steps and analyses were performed:
since the actual business of personnel admission needs to be approved by the process, the first step here is to configure the process model of personnel admission.
1. Configuring a new process model by the steps of:
and clicking the flow configuration center and clicking the newly added flow model.
Inputting a page in the opened process model, wherein the Chinese name of the input process is a personnel entrance process and the English identifier is a ryrclc
And drawing the flow chart in the flow chart drawing area, setting the flow conditions of the flow nodes, judging whether to meet the countersigns, dereferencing by countersign personnel and the like, and clicking and deploying after drawing the flow chart. Only after clicking deployment, the process can be inquired when configuring the form model, if the existing flow chart is modified, the form bound with the process model can be circulated according to the new process model when new data is created when clicking deployment.
2. Configuring a new form template typically consists of the following steps:
1. and clicking the form configuration menu and clicking the newly added form. And inputting Chinese characters of a new template into the page of the opened form template to form a personnel entry form and identifying the English characters as ryrcbd.
2. Adding step information to the new form: assuming that the Chinese character is identified as the first step and the English character is step1 in the steps, and then binding the newly configured ryrclc flow.
3. Configuring field information for the step according to the service information:
adding an identity card number field: selecting an input box component, inputting a field name of 'identity card number', inputting a field identifier 'personId', filling in a selection true, selecting 'identity card number' by a check rule, and configuring a changeEvent as follows:
adding a name field: selecting the input box component, inputting the field name as "name", and the input field identification "userName", and whether the selection false can be edited.
Adding a gender field: selecting a drop-down selection component, entering a field name of "gender", entering a field identification of "gender", whether a false can be edited, adding a configuration item: options (female) -option value (wman), options (male) -option value (man)
Add people category field: selecting a drop-down selection component, inputting a field name of 'personnel category', inputting a field identification of 'personType', and adding a configuration item: options (development class) -option value (DEV), options (TEST class) -option value (TEST), options (operation and maintenance class) -option value (OPS)
Add personnel level field: selecting a pull-down selection component, inputting a field name of 'personnel level', inputting a field identifier of 'personLevel', adding configuration items: option (primary) -option value (level 1), option (intermediate) -option value (level 2), option (advanced) -option value (level 3), option (entry level) -option value (c _ level 1), option (middle level) -option value (c _ level 2), option (band level) -option value (c _ level 3), initEvent and changeEvent are configured as follows:
add work experience field: selecting a radio component, inputting a field name of 'work experience', identifying 'hasWorkTime' in the field, and configuring initEvent and changeEvent as follows:
adding a working year field: selecting a number input box component, inputting a field name of 'working year', inputting a field identifier of 'workTime', and setting a minimum value: 0
Adding the item fields: selecting a drop-down selection component, inputting a field name of 'belonging project', inputting a field identifier 'project', wherein a drop-down selection interface is an interface for acquiring a project list, a drop-down selection label is item, project name and a drop-down selection value is item
Add project manager field: select the drop-down option component, enter a field name of "project manager", identify "project manager" as the input field, are the drop-down option interfaces the interface to get to the project manager? project Id = { at. Form. Project Id | "}, the value of the drop-down selection label is item
Adding an access control number field: selecting an input box component, inputting a field name of 'entrance guard number', inputting a field identifier 'gateNum', and judging whether to display: false, initEvent set to
Adding account equipment post fields: selecting an input box component, inputting a field name of 'account equipment post', inputting a field identifier 'accountManager', and judging whether to display: false, initEvent set to
4. Configuring an operation button for the current step: it is assumed that the form button in this step has save (only save service data, display only when the form state is new), submit (save data + initiate flow, display only when the form state is new), pass (save data + flow pass through circulation, display only when the form state is in-field and in-meeting), fail (flow does not pass through circulation, display only when the form state is in-field and in-meeting), delete (delete data, display only when the form state is new). The configuration of the form operation buttons is the same as the above form field configuration idea, and is not specifically described here to prevent duplicate description.
5. If the form is a multi-step form, the steps 2,3 and 4 are repeated, and the personnel are simple to enter at present without other steps.
6. And if the data is completely recorded, clicking and storing after the data is confirmed to be correct, and processing the data through a rear-end interface to drop the database to a form template configuration table.
3. Configuration parsing
Therefore, a set of complete personnel entry form configuration is completed, and the page and page linkage control of personnel entry can be completely rendered by adopting the configuration analysis logic in the design.
Another aspect of the present invention also relates to an extensibility form configuration system based on object-oriented idea, whose structure is shown in fig. 2, and includes:
the form template configuration table and flow configuration table establishing module is used for establishing a form template configuration table and a flow configuration table, and comprises the following modules;
newly building a form template; inputting the Chinese name and English identification of the form template; adding a plurality of steps for the form template, and recording step Chinese identification and step English identification of each step; judging whether the step has a flow; if the step has a flow, drawing a flow model of the step; storing the process model in the step into a process configuration table; acquiring service information, configuring fields for steps based on the service information, and establishing a form field list; configuring operation buttons for the steps; storing the form template completed by the configuration button into a form template configuration table;
the request data judging module is used for receiving the request data and judging a request based on whether the request data comprises a form data ID or not; if the form generation request data does not include the form data ID, the request is the inquiry form details; if the form generation request data comprises a form data ID, the request is a newly-built form;
the adaptive form template acquisition module is used for inquiring a matched form template in the form template configuration table based on the request data if the request is a newly-built form; obtaining an adaptive form template;
the analysis module is used for analyzing the adaptive form template through common Add to obtain an analyzed form;
and the rendering module is used for rendering the analyzed form through createForm to generate the form.
By using this system, the above-described arithmetic processing method can be executed and a corresponding technical effect can be achieved.
Embodiments of the present invention also provide a computer-readable storage medium capable of implementing all the steps of the method in the above embodiments, the computer-readable storage medium having stored thereon a computer program which, when executed by a processor, implements all the steps of the method in the above embodiments.
The embodiment of the present invention further provides an electronic device for executing the method, as an implementation apparatus of the method, the electronic device at least has a processor and a memory, and particularly, the memory stores data required for executing the method and related computer programs, such as a form template configuration table, a flow configuration table, and the like, and all steps of the implementation method are executed by calling the data and the programs in the memory by the processor, and a corresponding technical effect is obtained.
Preferably, the electronic device may comprise a bus architecture, which may include any number of interconnected buses and bridges that link together various circuits, including one or more processors and memory. The bus may also link together various other circuits such as peripherals, voltage regulators, power management circuits, and the like, which are well known in the art, and therefore, will not be described any further herein. A bus interface provides an interface between the bus and the receiver and transmitter. The receiver and transmitter may be the same element, i.e., a transceiver, providing a means for communicating with various other systems over a transmission medium. The processor is responsible for managing the bus and general processing, while the memory may be used for storing data used by the processor in performing operations.
Additionally, the electronic device may further include a communication module, an input unit, an audio processor, a display, a power source, and the like. The processor (or controller, operational controls) employed may include a microprocessor or other processor device and/or logic device that receives input and controls the operation of various components of the electronic device; the memory may be one or more of a buffer, a flash memory, a hard drive, a removable medium, a volatile memory, a non-volatile memory or other suitable devices, and may store the above-mentioned related data information, and may also store a program for executing the related information, and the processor may execute the program stored in the memory to realize information storage or processing, etc.; the input unit is used for providing input to the processor, and can be a key or a touch input device; the power supply is used for supplying power to the electronic equipment; the display is used for displaying display objects such as images and characters, and may be an LCD display, for example. The communication module is a transmitter/receiver that transmits and receives signals via an antenna. The communication module (transmitter/receiver) is coupled to the processor to provide an input signal and receive an output signal, which may be the same as in the case of a conventional mobile communication terminal. Based on different communication technologies, a plurality of communication modules, such as a cellular network module, a bluetooth module, and/or a wireless local area network module, may be disposed in the same electronic device. The communication module (transmitter/receiver) is also coupled to a speaker and a microphone via an audio processor to provide audio output via the speaker and receive audio input from the microphone to implement the usual telecommunication functions. The audio processor may include any suitable buffers, decoders, amplifiers and so forth. In addition, the audio processor is also coupled to the central processor, so that recording on the local machine can be realized through the microphone, and sound stored on the local machine can be played through the loudspeaker.
As will be appreciated by one skilled in the art, embodiments of the present invention may be provided as a method, system, or computer program product. Accordingly, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
The present invention has been described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create a system for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including an instruction system which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks. While preferred embodiments of the present invention have been described, additional variations and modifications in those embodiments may occur to those skilled in the art once they learn of the basic inventive concepts. Therefore, it is intended that the appended claims be interpreted as including the preferred embodiment and all changes and modifications that fall within the scope of the invention.
The above description is only for the preferred embodiment of the present invention, but the scope of the present invention is not limited thereto, and any changes or substitutions that can be easily conceived by those skilled in the art within the technical scope of the present invention are also within the scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the claims.
Claims (10)
1. An extensibility form configuration method based on object-oriented idea is characterized by comprising the following steps:
establishing a form template configuration table and a process configuration table, comprising: newly building a form template; inputting the Chinese name and English identification of the form template; adding a plurality of steps for the form template, and recording step Chinese identification and step English identification of each step; judging whether the step has a flow; if the step has a flow, drawing a flow model of the step; storing the process model in the step into a process configuration table; acquiring service information, configuring fields for steps based on the service information, and establishing a form field list; configuring operation buttons for the steps; storing the form template completed by the configuration button into a form template configuration table;
receiving request data, and judging a request based on whether the form data ID is included in the request data; if the form generation request data does not include the form data ID, the request is the inquiry form details; if the form generation request data comprises a form data ID, the request is a newly-built form;
if the request is a newly-built form, inquiring a form template matched in a form template configuration table based on the request data; obtaining an adaptive form template;
analyzing the adaptive form template through common Add to obtain an analyzed form; and rendering the parsed form through createForm to generate the form.
2. The method of claim 1, wherein parsing the adapted form template by commonod to obtain a parsed form comprises:
acquiring a Chinese name and an English identification of the adaptive form template; obtaining a plurality of adaptive form templates, and judging whether the steps have a flow; if the step has the process, selecting a corresponding process model in the process configuration table, wherein the process model is an adaptive process model; acquiring a form field list and form configuration information, and assigning values to fields in the form field list through the form configuration information; and analyzing and executing the initEvent based on the fields through the adaptive flow model to obtain the analyzed form.
3. The method of claim 1, further comprising: establishing a form data information storage table according to instantiation data established by the form template configuration table; and establishing a flow data information storage table according to the form template and the instantiation data created by the corresponding flow configuration table.
4. The method of claim 1, wherein the form template configuration table comprises: the form template, the Chinese name of the form template and the English identification of the form template; the process configuration table includes: the method comprises the steps of Chinese identification, english identification and a process model of the steps.
5. The method of claim 1, wherein the field comprises: common fields and custom component fields; the attributes of the fields include: public attributes and private attributes.
6. The method of claim 3 wherein the form template configuration table and form data information storage table are stored using a MongoDB database.
7. An extensibility form configuration system based on object-oriented idea, comprising:
the form template configuration table and process configuration table establishing module is used for establishing a form template configuration table and a process configuration table, and comprises the following steps;
newly building a form template; inputting the Chinese name and English identification of the form template; adding a plurality of steps to the form template, and inputting step Chinese identification and step English identification of each step; judging whether the step has a flow; if the step has a flow, drawing a flow model of the step; storing the process model of the step into a process configuration table; acquiring service information, configuring fields for steps based on the service information, and establishing a form field list; configuring operation buttons for the steps; storing the form template completed by the configuration button into a form template configuration table;
the request data judging module is used for receiving the request data and judging a request based on whether the request data comprises a form data ID or not; if the form generation request data does not include the form data ID, the request is the inquiry form details; if the form generation request data comprises a form data ID, the request is a new form;
the adaptive form template acquisition module is used for inquiring a matched form template in the form template configuration table based on the request data if the request is a newly-built form; obtaining an adaptive form template;
the analysis module is used for analyzing the adaptive form template through common Add to obtain an analyzed form;
and the rendering module is used for rendering the analyzed form through createForm to generate the form.
8. A computer-readable storage medium, wherein a computer program is stored on the storage medium, and when executed by a processor, the computer program implements the object-oriented idea based extensibility form configuring method of any one of claims 1 to 6.
9. An electronic device comprising a processor and a memory;
the memory is used for storing a form template configuration table and a process configuration table;
the processor is configured to execute the extensibility form configuration method based on the object-oriented idea according to any one of claims 1 to 6 by calling the form template configuration table and the process configuration table.
10. A computer program product comprising a computer program and/or instructions, characterized in that the computer program and/or instructions, when executed by a processor, implement the steps of the object-oriented idea based extensibility form configuration method of any one of claims 1 to 6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211374970.9A CN115659932A (en) | 2022-11-04 | 2022-11-04 | Extensible form configuration method and system based on object-oriented idea |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211374970.9A CN115659932A (en) | 2022-11-04 | 2022-11-04 | Extensible form configuration method and system based on object-oriented idea |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115659932A true CN115659932A (en) | 2023-01-31 |
Family
ID=84994561
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211374970.9A Pending CN115659932A (en) | 2022-11-04 | 2022-11-04 | Extensible form configuration method and system based on object-oriented idea |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115659932A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN119537465A (en) * | 2024-11-11 | 2025-02-28 | 天地（常州）自动化股份有限公司 | Object-Oriented Modeling |
-
2022
- 2022-11-04 CN CN202211374970.9A patent/CN115659932A/en active Pending
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN119537465A (en) * | 2024-11-11 | 2025-02-28 | 天地（常州）自动化股份有限公司 | Object-Oriented Modeling |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109445783B (en) | Method and device for constructing dynamic configuration application driven by service | |
| CN111190598B (en) | Gas turbine monitoring software picture configuration method based on control library drag-type development | |
| CN111506444A (en) | Form approval method and device, storage medium and electronic equipment | |
| US11093242B2 (en) | Automatically mapping data while designing process flows | |
| CN114035773A (en) | Configuration-based low-code form development method, system and device | |
| CN113051269B (en) | Form configuration method and device | |
| JP4812337B2 (en) | Method and apparatus for generating a form using a form type | |
| CN115712413B (en) | Low code development method, device, equipment and storage medium | |
| CN112558967A (en) | Page automatic generation method and device, electronic equipment and storage medium | |
| CN115658041A (en) | Low code enhancement service implementing method based on-line service flow arrangement | |
| CN108279882B (en) | Framework generation method, device, equipment and computer readable medium | |
| CN106778351A (en) | Data desensitization method and device | |
| CN114327605B (en) | Vue-based remote form generation method, computer and storage medium | |
| CN113760287B (en) | A form creation method and device based on JSON structure | |
| CN112711414B (en) | Form interface adaptation display method and device and storage medium | |
| US10929279B2 (en) | Systems and method for automated testing framework for service portal catalog | |
| CN115686621A (en) | Method and device for generating rule script of rule engine | |
| CN115659932A (en) | Extensible form configuration method and system based on object-oriented idea | |
| CN113722577A (en) | Feedback information processing method, device, equipment and storage medium | |
| CN117035664A (en) | Template-based trust approval standardized processing method, device, equipment and medium | |
| US20050165827A1 (en) | Systems and methods for customizing objects | |
| US11113322B2 (en) | Dynamically generating strategic planning datasets based on collecting, aggregating, and filtering distributed data collections | |
| CN114706580A (en) | Front-end webpage development method and device, storage medium and electronic equipment | |
| US8489608B2 (en) | Method for defining data categories | |
| CN107220045B (en) | Station building method, device, equipment and storage medium based on artificial intelligence |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |