CN112506494A - Method, device, equipment and medium for realizing extensible dynamic component based on VUE (virtual user Equipment) - Google Patents
Method, device, equipment and medium for realizing extensible dynamic component based on VUE (virtual user Equipment) Download PDFInfo
- Publication number
- CN112506494A CN112506494A CN202011203184.3A CN202011203184A CN112506494A CN 112506494 A CN112506494 A CN 112506494A CN 202011203184 A CN202011203184 A CN 202011203184A CN 112506494 A CN112506494 A CN 112506494A
- Authority
- CN
- China
- Prior art keywords
- dynamic
- dynamic component
- value
- component
- control
- 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.)
- Granted
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
- G06F8/44—Encoding
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/25—Integrating or interfacing systems involving database management systems
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02P—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN THE PRODUCTION OR PROCESSING OF GOODS
- Y02P90/00—Enabling technologies with a potential contribution to greenhouse gas [GHG] emissions mitigation
- Y02P90/30—Computing systems specially adapted for manufacturing
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Stored Programmes (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention provides a method, a device, equipment and a medium for realizing an extensible dynamic component based on VUE, wherein the method comprises the following steps: s1, providing a configuration page for maintaining the dynamic components, allowing a user to configure the corresponding dynamic components, and storing the configuration contents of the dynamic components into a storage; when the dynamic component is a drop-down box, a radio box or a check box, a configuration page of the data dictionary is also provided before for a user to configure the data dictionary, wherein the configuration page comprises option values and linkage processing rules of the option values; s2, when the dynamic component is initialized, calling an interface to acquire the configuration content of the dynamic component from a library, or acquiring the linkage processing rule of the option value, assembling the corresponding control id arrays into corresponding control object arrays and returning corresponding json data; and S3, displaying the dynamic component according to the json data returned by the interface. The dynamic component realized by the invention has the characteristics of flexible expansion and rich functions, thereby meeting the requirements of users needing some customized control.
Description
Technical Field
The invention relates to the technical field of computers, in particular to a method, a device, equipment and a medium for realizing an extensible dynamic component based on VUE.
Background
At present, with the development of the era, the front-end technology and the framework are continuously updated, the complexity of page functions and interaction is increased, and pages of some forms need fixed form items and sometimes also need some options which can be customized by users with management authority so as to meet the user requirements under some specific conditions, so that an extensible dynamic component based on configuration is required.
The existing form control types are basically single types or need to add configuration items for simple type switching, the expansibility is not flexible enough, and the functions are not rich enough, so that the user requirements for some customized control cannot be met.
Disclosure of Invention
The technical problem to be solved by the present invention is to provide a method, an apparatus, a device and a medium for implementing an extensible dynamic component based on VUE, which are flexible in extension and rich in functions, so as to meet the user requirements for some customized controls.
In a first aspect, the present invention provides a method for implementing an extensible dynamic component based on VUE, including the following steps:
s1, providing a configuration page for maintaining the dynamic components, allowing a user to configure the corresponding dynamic components, and storing the configuration contents of the dynamic components into a storage; the dynamic component comprises an input box, a drop-down box, a radio box, a check box, a counter and a file upload box;
when the dynamic component is a drop-down box, a radio box or a check box, a configuration page of the data dictionary is provided before a configuration page for maintaining the dynamic component is provided for a user to configure the data dictionary, wherein the configuration page comprises option values and linkage processing rules of the option values;
s2, when the dynamic component is initialized, calling an interface to acquire the configuration content of the dynamic component from a library, or acquiring the linkage processing rule of the option value, assembling the corresponding control id arrays into corresponding control object arrays and returning corresponding json data;
and S3, displaying the dynamic component according to the json data returned by the interface.
In a second aspect, the present invention provides an apparatus for implementing an extensible dynamic component based on VUE, including:
the data dictionary configuration module is used for providing a configuration page of the data dictionary, providing the data dictionary of a drop-down box, a radio box or a check box for a user to configure, and configuring option values and linkage processing rules of the option values;
the dynamic component configuration module is used for providing a configuration page for maintaining the dynamic components, allowing a user to configure the corresponding dynamic components and storing the configuration contents of the dynamic components into a warehouse; the dynamic component comprises an input box, a drop-down box, a radio box, a check box, a counter and a file upload box;
the dynamic component assembly module is used for calling an interface to acquire configuration contents of the dynamic component from a library when the dynamic component is initialized, or acquiring a linkage processing rule of the option value, assembling a corresponding control id array into a corresponding control object array and returning corresponding json data;
and the dynamic component display module is used for displaying the dynamic component according to the json data returned by the interface.
In a third aspect, the present invention provides an electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, wherein the processor implements the method of the first aspect when executing the program.
In a fourth aspect, the invention provides a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, performs the method of the first aspect.
One or more technical solutions provided in the embodiments of the present invention have at least the following technical effects or advantages: the embodiment of the application is based on a front-end framework of VUE and ant-design, the existing control functions are packaged and integrated, the expanded dynamic component for switching various control types is realized, less complex component interaction is included, such as read-write permission control, component visibility linkage switching and control value dependence, the requirements of most form pages are met, the pages are not limited to the written codes, adjustment and modification of project page codes are greatly reduced, corresponding form items are dynamically generated through configuration, the read-write permission of the form items can be controlled, the visibility control between the form items and the value formula calculation can be controlled. The flexibility and maintainability of the page are greatly improved while the functions are satisfied.
The foregoing description is only an overview of the technical solutions of the present invention, and the embodiments of the present invention are described below in order to make the technical means of the present invention more clearly understood and to make the above and other objects, features, and advantages of the present invention more clearly understandable.
Drawings
The invention will be further described with reference to the following examples with reference to the accompanying drawings.
FIG. 1 is a flow chart of a method according to one embodiment of the present invention;
FIG. 2 is a flow chart illustrating configuring contents of a dictionary table in a method according to an embodiment of the present invention;
FIG. 3 is a flow chart showing dynamic components in a method according to an embodiment of the invention;
FIG. 4 is a schematic structural diagram of an apparatus according to a second embodiment of the present invention;
fig. 5 is a schematic structural diagram of an electronic device according to a third embodiment of the invention;
fig. 6 is a schematic structural diagram of a medium according to a fourth embodiment of the present invention.
Detailed Description
The embodiment of the application provides the method, the device, the equipment and the medium for realizing the extensible dynamic component based on the VUE, so that the extension is flexible, the functions are rich, and the user requirements of some customized controls can be met.
The technical scheme in the embodiment of the application has the following general idea: the method is characterized in that a front-end framework based on VUE and ant-design encapsulates and integrates the functions of the existing controls, an extended dynamic component for switching various control types is realized, less complex component interaction is included, such as read-write permission control, component explicit-implicit linkage switching and control value dependence, the requirements of most form pages are met, the pages are not limited to the written codes, adjustment and modification of project page codes are greatly reduced, corresponding form items are dynamically generated through configuration, the read-write permission of the form items can be controlled, explicit-implicit control among the form items and value formula calculation can be realized. The flexibility and maintainability of the page are greatly improved while the functions are satisfied.
Before describing the embodiments, some concepts related to the embodiments of the present application are described:
the control comprises a control body and a pull-down box, wherein the control body is used for encapsulating data and a method, and the control body is encapsulated by Ant-Design-vue (the Ant-Design-vue is a Vue UI component library only recommended by the official of Ant gold clothing and Ant Design);
a control object, a js (JavaScript) object of the corresponding control in the configured dynamic component array;
the control value, the value of the controls such as an ant-design-vue encapsulated input box, a radio box, a drop-down box and the like;
the dynamic component is embedded with a group of controls and can display different controls according to configuration;
the form item, namely the control corresponding to the form name, when a formula exists, the formula is calculated according to the name of the control in the form, and the name in the form is the form item, so that the form item is actually the control;
control object array, configuration content of dynamic component (a group of control objects);
a control id array, the id of a control object in a group of control object arrays;
monitoring arrays, and finding out the corresponding control object arrays from the control object arrays according to the configured formulas.
Example one
As shown in fig. 1, the present embodiment provides a method for implementing an extensible dynamic component based on VUE, including the following steps:
s1, configuring the content of the dynamic component: providing a configuration page for maintaining the dynamic components, allowing a user to configure the corresponding dynamic components, and storing the configuration contents of the dynamic components into a warehouse; the dynamic component comprises an input box, a drop-down box, a radio box, a check box, a counter and a file upload box;
when the dynamic component is a drop-down box, a radio box or a check box, before providing a configuration page for maintaining the dynamic component, the method further comprises the step of configuring the contents of the dictionary table, namely: providing a configuration page of the data dictionary for a user to configure the data dictionary, wherein the configuration page comprises option values and linkage processing rules of the option values; that is, the step of configuring the contents of the dictionary table is to provide some prior preparation for the configuration of the dynamic components of the control such as the drop-down box, the radio box or the check box, and the user can perform the operation of adding the new dictionary type and configuring all the option values of the dictionary type in the configuration page for maintaining the dictionary table, as shown in fig. 2.
S2, assembling a dynamic component array: when a dynamic component is initialized, calling an interface to acquire configuration contents of the dynamic component from a library, or acquiring a linkage processing rule of the option value, assembling a corresponding control id array into a corresponding control object array, and returning corresponding json data;
s3, displaying dynamic components: and displaying the dynamic component according to the json data returned by the interface.
Among them, as a more preferred or more specific implementation manner of this embodiment:
the linkage processing rule of the option value is that when the option value is a certain value, which form items need to be hidden and which form items need to be displayed;
the configuration content of the dynamic component comprises: the method comprises the following steps of (1) component type, form name of the component, placeholder, tag name, width ratio of the component, width ratio of the tag, check rule (whether optional content needs to be filled and some common check rules such as mobile phone number, number and the like, and regular check rule can be matched in a self-defined mode), prompt words of check failure, form sequencing value and read-write permission; wherein:
if the dynamic component is a drop-down box, a radio box or a check box, configuring the configuration content of the dynamic component further comprises configuring a corresponding data dictionary to obtain an option value corresponding to the control;
if the dynamic component is an input box or a counter, the configuration content of the dynamic component further comprises a value obtaining formula, and the content of the value obtaining formula is the splicing of the corresponding form name and the operator.
The contents of the value-obtaining formula are: form B + form C, where "form B" and "form C" are both form names and "+" is the operator.
The step S3 is specifically:
commonly used form items are built in the dynamic components, the form items of ant-design-vue are adopted by the front-end UI, the form items are packaged in a common component, different dynamic components are respectively displayed according to the types of the transmitted components, and different component logics are called;
embedding the general assembly into a grid assembly, and setting the single-row proportion of the grid assembly through the grid proportion attribute of the control object;
when the json data of the dynamic components are returned by the interface, the json data are set into a control object array of the dynamic components, and the dynamic components display all the dynamic components according to the control object array in a circulating traversing manner; if the dynamic component is a drop-down box, a radio box or a check box, all option values of the corresponding data dictionary are called according to the corresponding data dictionary id in the initialization process of the general component.
The step S3 further includes:
controlling the explicit and implicit linkage of the components: monitoring events of data changes are built in the drop-down box, the radio box and the check box, when the built-in data changes, a control object array of the current dynamic component is read, and a corresponding control object is matched and the corresponding explicit-implicit property is modified according to an explicit-implicit control id array stored in the control object;
the formula of the assembly calculates the linkage: setting an object for storing the current control value in the control object, and correspondingly modifying the value of the object when the current control value changes; judging whether the current control object is configured with a value obtaining formula when the dynamic component is loaded, traversing json data of the control object array if the value obtaining formula is configured, extracting a control value (also called control value) corresponding to a placeholder of a form name (name) contained in the value obtaining formula to generate a monitoring array, monitoring the change of the control value in the monitoring array by using a watch of vue, replacing the placeholder of the corresponding form name in the value obtaining formula with the changed control value when the control value changes, calculating a result, and setting the result as the value of the front control object. Examples are as follows:
setting the control object array as [ A, B, C, D ];
the control object is:
control A
name is shown as 'form A',
the formula: 'form B + form C'
The value { 'a' },
monitoring an array: []
}
Control B
name is shown as form B,
the value { 'b' },
monitoring an array: []
}
Control C
name is a name of 'form C',
the value { 'c' },
monitoring an array: []
}
The meanings are as follows:
1. the method comprises the following steps that a control A is configured with a value obtaining formula of 'form B + form C', json data is traversed according to the value obtaining formula, the control B and the control C are found out from a control object array [ A, B, C and D ], and values of the control B and the control C are set into a monitoring array of the control A, namely the monitoring array of the control A [ { name: form B, value { 'B' } }, { name: form C, value { 'C' } } ];
2. setting an object value { 'a' } "in the control object to store the value { 'a' } of the current control A, setting an object value { 'B' }" to store the value { 'B' } of the current control B, setting an object value { 'C' } "to store the value { 'C' } of the current control C, and changing the value { 'B' } - > { '123' } of the object B when the value of the control B (i.e., the control value) changes to 123, so that the value in the listening array of the control A: the value obtaining formula is replaced by 123+ c', and the calculation result of the value obtaining formula is set as the value of the control A.
As shown in fig. 3, the complete flow of step S3 is:
when the user clicks on the render component based on the dynamic component data, the system determines if it is a drop-down box, radio box or check box?
If yes, acquiring a component option value according to the configuration, and modifying the display and hidden properties of the associated display component and hidden component according to the component configuration object when the control value changes;
and if not, judging whether a value obtaining formula is configured or not, if so, generating a monitoring array, monitoring the change of the control value in the monitoring array, replacing the placeholder of the corresponding form name in the value obtaining formula with the changed control value when the control value is changed, calculating a result, and setting the result as the value of the front control object.
Based on the same inventive concept, the application also provides a device corresponding to the method in the first embodiment, which is detailed in the second embodiment.
Example two
As shown in fig. 4, in this embodiment, an apparatus for implementing a VUE-based extensible dynamic component is provided, including:
the data dictionary configuration module is used for providing a configuration page of the data dictionary, providing the data dictionary of a drop-down box, a radio box or a check box for a user to configure, and configuring option values and linkage processing rules of the option values;
the dynamic component configuration module is used for providing a configuration page for maintaining the dynamic components, allowing a user to configure the corresponding dynamic components and storing the configuration contents of the dynamic components into a warehouse; the dynamic component comprises an input box, a drop-down box, a radio box, a check box, a counter and a file upload box;
the dynamic component assembly module is used for calling an interface to acquire configuration contents of the dynamic component from a library when the dynamic component is initialized, or acquiring a linkage processing rule of the option value, assembling a corresponding control id array into a corresponding control object array and returning corresponding json data;
and the dynamic component display module is used for displaying the dynamic component according to the json data returned by the interface.
As a more preferred or specific implementation manner of this embodiment, the method further includes:
the linkage processing rule of the option value is that when the option value is a certain value, which form items need to be hidden and which form items need to be displayed;
the configuration content of the dynamic component comprises: the method comprises the following steps of (1) component type, component form name, placeholder, tag name, component width ratio, tag width ratio, verification rule, prompt words of verification failure, form sorting value and read-write permission; wherein:
if the dynamic component is a drop-down box, a radio box or a check box, configuring the configuration content of the dynamic component further comprises configuring a corresponding data dictionary to obtain an option value corresponding to the control;
if the dynamic component is an input box or a counter, the configuration content of the dynamic component further comprises a value obtaining formula, and the content of the value obtaining formula is the splicing of the corresponding form name and the operator.
The specific display process of the dynamic component display module is as follows:
commonly used form items are built in the dynamic components, the form items of ant-design-vue are adopted by the front-end UI, the form items are packaged in a common component, different dynamic components are respectively displayed according to the types of the transmitted components, and different component logics are called;
embedding the general assembly into a grid assembly, and setting the single-row proportion of the grid assembly through the grid proportion attribute of the control object;
when the json data of the dynamic components are returned by the interface, the json data are set into a control object array of the dynamic components, and the dynamic components display all the dynamic components according to the control object array in a circulating traversing manner; if the dynamic component is a drop-down box, a radio box or a check box, all option values of the corresponding data dictionary are called according to the corresponding data dictionary id in the initialization process of the general component.
The specific display process of the dynamic component display module further comprises:
controlling the explicit and implicit linkage of the components: monitoring events of data changes are built in the drop-down box, the radio box and the check box, when the built-in data changes, a control object array of the current dynamic component is read, and a corresponding control object is matched and the corresponding explicit-implicit property is modified according to an explicit-implicit control id array stored in the control object;
the formula of the assembly calculates the linkage: setting an object for storing the current control value in the control object, and correspondingly modifying the value of the object when the current control value changes; and when the control value changes, replacing the control value with the corresponding form name placeholder in the value obtaining formula to calculate a result.
Since the apparatus described in the second embodiment of the present invention is an apparatus used for implementing the method of the first embodiment of the present invention, based on the method described in the first embodiment of the present invention, a person skilled in the art can understand the specific structure and the deformation of the apparatus, and thus the details are not described herein. All the devices adopted in the method of the first embodiment of the present invention belong to the protection scope of the present invention.
Based on the same inventive concept, the application provides an electronic device embodiment corresponding to the first embodiment, which is detailed in the third embodiment.
EXAMPLE III
The embodiment provides an electronic device, as shown in fig. 5, which includes a memory, a processor, and a computer program stored in the memory and executable on the processor, and when the processor executes the computer program, any one of the first embodiment modes may be implemented.
Since the electronic device described in this embodiment is a device used for implementing the method in the first embodiment of the present application, based on the method described in the first embodiment of the present application, a specific implementation of the electronic device in this embodiment and various variations thereof can be understood by those skilled in the art, and therefore, how to implement the method in the first embodiment of the present application by the electronic device is not described in detail herein. The equipment used by those skilled in the art to implement the methods in the embodiments of the present application is within the scope of the present application.
Based on the same inventive concept, the application provides a storage medium corresponding to the fourth embodiment, which is described in detail in the fourth embodiment.
Example four
The present embodiment provides a computer-readable storage medium, as shown in fig. 6, on which a computer program is stored, and when the computer program is executed by a processor, any one of the embodiments can be implemented.
The technical scheme provided in the embodiment of the application at least has the following technical effects or advantages: the method, the device, the equipment and the medium provided by the embodiment of the application are based on a front-end framework of VUE and ant-design, the existing control functions are packaged and integrated, the dynamic components for expanding switching of various control types are realized, and less complex component interaction is included, such as read-write permission control, component visibility linkage switching, control value dependence and the like, the requirements of most form pages are met, the written codes are not limited by the pages, so that the adjustment and modification of project page codes are greatly reduced, corresponding form items are dynamically generated through configuration, the read-write permission of the form items can be controlled, and the visibility control and value formula calculation among the form items can be controlled. The flexibility and maintainability of the page are greatly improved while the functions are satisfied.
As will be appreciated by one skilled in the art, embodiments of the present invention may be provided as a method, apparatus or 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 is 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 means 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 instruction means 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.
Although specific embodiments of the invention have been described above, it will be understood by those skilled in the art that the specific embodiments described are illustrative only and are not limiting upon the scope of the invention, and that equivalent modifications and variations can be made by those skilled in the art without departing from the spirit of the invention, which is to be limited only by the appended claims.
Claims (10)
1. A method for realizing extensible dynamic components based on VUE is characterized in that: the method comprises the following steps:
s1, providing a configuration page for maintaining the dynamic components, allowing a user to configure the corresponding dynamic components, and storing the configuration contents of the dynamic components into a storage;
when the dynamic component is a drop-down box, a radio box or a check box, a configuration page of the data dictionary is provided before a configuration page for maintaining the dynamic component is provided for a user to configure the data dictionary, wherein the configuration page comprises option values and linkage processing rules of the option values;
s2, when the dynamic component is initialized, calling an interface to acquire the configuration content of the dynamic component from a library, or acquiring the linkage processing rule of the option value, assembling the corresponding control id arrays into corresponding control object arrays and returning corresponding json data;
and S3, displaying the dynamic component according to the json data returned by the interface.
2. The method of claim 1, wherein the method for implementing the VUE-based extensible dynamic component comprises:
the linkage processing rule of the option value is that when the option value is a certain value, which form items need to be hidden and which form items need to be displayed;
the configuration content of the dynamic component comprises: the method comprises the following steps of (1) component type, component form name, placeholder, tag name, component width ratio, tag width ratio, verification rule, prompt words of verification failure, form sorting value and read-write permission; wherein:
if the dynamic component is a drop-down box, a radio box or a check box, configuring the configuration content of the dynamic component further comprises configuring a corresponding data dictionary to obtain an option value corresponding to the control;
if the dynamic component is an input box or a counter, the configuration content of the dynamic component further comprises a value obtaining formula, and the content of the value obtaining formula is the splicing of the corresponding form name and the operator.
3. The method of claim 1, wherein the method for implementing the VUE-based extensible dynamic component comprises: the step S3 is specifically:
commonly used form items are built in the dynamic components, a front-end UI adopts the form items of ant-design-vue, the form items of ant-design-vue are packaged in a universal component, different dynamic components are respectively displayed according to the types of the transmitted components, and different component logics are called;
embedding the general assembly into a grid assembly, and setting the single-row proportion of the grid assembly through the grid proportion attribute of the control object;
when the json data of the dynamic components are returned by the interface, the json data are set into a control object array of the dynamic components, and the dynamic components display all the dynamic components according to the control object array in a circulating traversing manner; if the dynamic component is a drop-down box, a radio box or a check box, all option values of the corresponding data dictionary are called according to the corresponding data dictionary id in the initialization process of the general component.
4. The method of claim 3, wherein the method for implementing the VUE-based extensible dynamic component comprises: the step S3 further includes:
controlling the explicit and implicit linkage of the components: monitoring events of data changes are built in the drop-down box, the radio box and the check box, when the built-in data changes, a control object array of the current dynamic component is read, and a corresponding control object is matched and the corresponding explicit-implicit property is modified according to an explicit-implicit control id array stored in the control object;
the formula of the assembly calculates the linkage: setting an object for storing the current control value in the control object, and correspondingly modifying the value of the object when the current control value changes; judging whether the current control object is configured with a value obtaining formula or not when the dynamic component is loaded, traversing json data of the control object array if the value obtaining formula is configured, extracting a control value corresponding to a placeholder of a form name contained in the value obtaining formula to generate a monitoring array, monitoring the change of the control value in the monitoring array by using a watch of vue, replacing the placeholder of the corresponding form name in the value obtaining formula with the changed control value when the control value changes, calculating a result, and setting the result as the value of the front control object.
5. An apparatus for implementing extensible dynamic component based on VUE, characterized in that: the method comprises the following steps:
the data dictionary configuration module is used for providing a configuration page of the data dictionary, providing the data dictionary of a drop-down box, a radio box or a check box for a user to configure, and configuring option values and linkage processing rules of the option values;
the dynamic component configuration module is used for providing a configuration page for maintaining the dynamic components, allowing a user to configure the corresponding dynamic components and storing the configuration contents of the dynamic components into a warehouse;
the dynamic component assembly module is used for calling an interface to acquire configuration contents of the dynamic component from a library when the dynamic component is initialized, or acquiring a linkage processing rule of the option value, assembling a corresponding control id array into a corresponding control object array and returning corresponding json data;
and the dynamic component display module is used for displaying the dynamic component according to the json data returned by the interface.
6. The apparatus for implementing a VUE-based extensible dynamic component of claim 5, wherein:
the linkage processing rule of the option value is that when the option value is a certain value, which form items need to be hidden and which form items need to be displayed;
the configuration content of the dynamic component comprises: the method comprises the following steps of (1) component type, component form name, placeholder, tag name, component width ratio, tag width ratio, verification rule, prompt words of verification failure, form sorting value and read-write permission; wherein:
if the dynamic component is a drop-down box, a radio box or a check box, configuring the configuration content of the dynamic component further comprises configuring a corresponding data dictionary to obtain an option value corresponding to the control;
if the dynamic component is an input box or a counter, the configuration content of the dynamic component further comprises a value obtaining formula, and the content of the value obtaining formula is the splicing of the corresponding form name and the operator.
7. The apparatus for implementing a VUE-based extensible dynamic component of claim 5, wherein: the specific display process of the dynamic component display module is as follows:
commonly used form items are built in the dynamic components, the form items of ant-design-vue are adopted by the front-end UI, the form items are packaged in a common component, different dynamic components are respectively displayed according to the types of the transmitted components, and different component logics are called;
embedding the general assembly into a grid assembly, and setting the single-row proportion of the grid assembly through the grid proportion attribute of the control object;
when the json data of the dynamic components are returned by the interface, the json data are set into a control object array of the dynamic components, and the dynamic components display all the dynamic components according to the control object array in a circulating traversing manner; if the dynamic component is a drop-down box, a radio box or a check box, all option values of the corresponding data dictionary are called according to the corresponding data dictionary id in the initialization process of the general component.
8. The apparatus for implementing a VUE-based extensible dynamic component of claim 5, wherein: the specific display process of the dynamic component display module further comprises:
controlling the explicit and implicit linkage of the components: monitoring events of data changes are built in the drop-down box, the radio box and the check box, when the built-in data changes, a control object array of the current dynamic component is read, and a corresponding control object is matched and the corresponding explicit-implicit property is modified according to an explicit-implicit control id array stored in the control object;
the formula of the assembly calculates the linkage: setting an object for storing the current control value in the control object, and correspondingly modifying the value of the object when the current control value changes; judging whether the current control object is configured with a value obtaining formula or not when the dynamic component is loaded, traversing json data of the control object array if the value obtaining formula is configured, extracting a control value corresponding to a placeholder of a form name contained in the value obtaining formula to generate a monitoring array, monitoring the change of the control value in the monitoring array by using a watch of vue, replacing the placeholder of the corresponding form name in the value obtaining formula with the changed control value when the control value changes, calculating a result, and setting the result as the value of the front control object.
9. An electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, characterized in that the processor implements the method according to any of claims 1 to 4 when executing the program.
10. A computer-readable storage medium, on which a computer program is stored which, when being executed by a processor, carries out the method according to any one of claims 1 to 4.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011203184.3A CN112506494B (en) | 2020-11-02 | 2020-11-02 | Method, device, equipment and medium for realizing extensible dynamic component based on VUE (virtual user Equipment) |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011203184.3A CN112506494B (en) | 2020-11-02 | 2020-11-02 | Method, device, equipment and medium for realizing extensible dynamic component based on VUE (virtual user Equipment) |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112506494A true CN112506494A (en) | 2021-03-16 |
| CN112506494B CN112506494B (en) | 2022-09-13 |
Family
ID=74954942
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011203184.3A Active CN112506494B (en) | 2020-11-02 | 2020-11-02 | Method, device, equipment and medium for realizing extensible dynamic component based on VUE (virtual user Equipment) |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112506494B (en) |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113342417A (en) * | 2021-06-15 | 2021-09-03 | 京东数科海益信息科技有限公司 | Plug-in configuration method, device and equipment |
| CN113535039A (en) * | 2021-07-02 | 2021-10-22 | 北京三快在线科技有限公司 | Method and device for updating page, electronic equipment and computer readable storage medium |
| CN114168133A (en) * | 2021-11-12 | 2022-03-11 | 苏州万店掌网络科技有限公司 | Form packaging method and system |
| CN114327605A (en) * | 2022-03-08 | 2022-04-12 | 深圳市城市交通规划设计研究中心股份有限公司 | Vue-based remote form generation method, computer and storage medium |
| CN116431138A (en) * | 2022-11-24 | 2023-07-14 | 昆仑数智科技有限责任公司 | Component template building method and device and form building method and device |
| WO2024087909A1 (en) * | 2022-10-27 | 2024-05-02 | 中通服软件科技有限公司 | Attribute linkage rule-based page data processing method, and medium |
| CN118276875A (en) * | 2024-05-31 | 2024-07-02 | 欢乐互娱(上海)科技股份有限公司 | Dynamic form linkage configuration method and system |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20090244012A1 (en) * | 2008-04-01 | 2009-10-01 | Yves Behar | Portable computer with multiple display configurations |
| CN109325203A (en) * | 2018-09-10 | 2019-02-12 | 北京亚鸿世纪科技发展有限公司 | The device of Web system visualization multiplexing is realized in a kind of automation |
| CN111240659A (en) * | 2019-12-23 | 2020-06-05 | 福建亿能达信息技术股份有限公司 | Page design method based on Vue |
| CN111782211A (en) * | 2020-06-28 | 2020-10-16 | 中国工商银行股份有限公司 | Parameter page dynamic generation method and device based on Vue component |
-
2020
- 2020-11-02 CN CN202011203184.3A patent/CN112506494B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20090244012A1 (en) * | 2008-04-01 | 2009-10-01 | Yves Behar | Portable computer with multiple display configurations |
| CN109325203A (en) * | 2018-09-10 | 2019-02-12 | 北京亚鸿世纪科技发展有限公司 | The device of Web system visualization multiplexing is realized in a kind of automation |
| CN111240659A (en) * | 2019-12-23 | 2020-06-05 | 福建亿能达信息技术股份有限公司 | Page design method based on Vue |
| CN111782211A (en) * | 2020-06-28 | 2020-10-16 | 中国工商银行股份有限公司 | Parameter page dynamic generation method and device based on Vue component |
Non-Patent Citations (2)
| Title |
|---|
| CODER_C_1024: "Ant Design Vue 中cascader级联组件动态加载数据", 《HTTPS://BLOG.CSDN.NET/NBAQQ2010/ARTICLE/DETAILS/108790110》 * |
| 一人创客: "基于vue Ant-Design 的表单设计器，快速开发", 《HTTPS://BLOG.CSDN.NET/U014534321/ARTICLE/DETAILS/113879027》 * |
Cited By (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113342417A (en) * | 2021-06-15 | 2021-09-03 | 京东数科海益信息科技有限公司 | Plug-in configuration method, device and equipment |
| CN113535039A (en) * | 2021-07-02 | 2021-10-22 | 北京三快在线科技有限公司 | Method and device for updating page, electronic equipment and computer readable storage medium |
| CN113535039B (en) * | 2021-07-02 | 2022-06-03 | 北京三快在线科技有限公司 | Method and device for updating page, electronic equipment and computer readable storage medium |
| CN114168133A (en) * | 2021-11-12 | 2022-03-11 | 苏州万店掌网络科技有限公司 | Form packaging method and system |
| CN114327605A (en) * | 2022-03-08 | 2022-04-12 | 深圳市城市交通规划设计研究中心股份有限公司 | Vue-based remote form generation method, computer and storage medium |
| CN114327605B (en) * | 2022-03-08 | 2022-08-23 | 深圳市城市交通规划设计研究中心股份有限公司 | Vue-based remote form generation method, computer and storage medium |
| WO2024087909A1 (en) * | 2022-10-27 | 2024-05-02 | 中通服软件科技有限公司 | Attribute linkage rule-based page data processing method, and medium |
| CN116431138A (en) * | 2022-11-24 | 2023-07-14 | 昆仑数智科技有限责任公司 | Component template building method and device and form building method and device |
| CN116431138B (en) * | 2022-11-24 | 2024-04-05 | 昆仑数智科技有限责任公司 | Component template building method and device and form building method and device |
| CN118276875A (en) * | 2024-05-31 | 2024-07-02 | 欢乐互娱(上海)科技股份有限公司 | Dynamic form linkage configuration method and system |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112506494B (en) | 2022-09-13 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112506494B (en) | Method, device, equipment and medium for realizing extensible dynamic component based on VUE (virtual user Equipment) | |
| KR101783049B1 (en) | Generating user help information for customised user interfaces | |
| CN112395483A (en) | Page rendering method and device based on tree structure | |
| CN112182349B (en) | Query method, device and system for compliance files | |
| CN113535165A (en) | Interface generation method and device, electronic equipment and computer readable storage medium | |
| CN110362371B (en) | View level control method, device and system, computer equipment and medium | |
| CN111984177A (en) | Graph configuration method, device, equipment and medium based on vue | |
| CN107506483A (en) | Page loading method, device, electronic equipment and storage medium | |
| US9934292B2 (en) | Dynamic presentation of a results set by a form-based software application | |
| CN109902003B (en) | Test script generation method and device | |
| CN114047914A (en) | Interface configuration method and device, electronic equipment and computer readable storage medium | |
| CN105183887A (en) | Data processing method based on browser and browser device | |
| US20070073635A1 (en) | Table rows filter | |
| CN110866379B (en) | Data Visualization Chart Library System | |
| CN112506503A (en) | Programming method, device, terminal equipment and storage medium | |
| CN112579664A (en) | Processing method and device for chart linkage | |
| US9996559B2 (en) | Maintenance actions and user-specific settings of the attribute value derivation instruction set user interface | |
| CN110990006A (en) | Form management system and form generation device | |
| CN111142990A (en) | WeChat applet page display method and device and storage medium | |
| CN112579066A (en) | Chart display method and device, storage medium and equipment | |
| CN116257315A (en) | Input box display method and device | |
| CN115237467A (en) | Page view configuration method and device, computer equipment and storage medium | |
| CN114489645A (en) | Form generation construction method, system and storage medium based on Vue and Element-UI | |
| CN112748917B (en) | Graph display method and device | |
| CN112464132A (en) | Page generation and configuration method and device |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |