CN116009837A - Method for realizing front page by using multi-layer conditional combination - Google Patents
Method for realizing front page by using multi-layer conditional combination Download PDFInfo
- Publication number
- CN116009837A CN116009837A CN202211718557.XA CN202211718557A CN116009837A CN 116009837 A CN116009837 A CN 116009837A CN 202211718557 A CN202211718557 A CN 202211718557A CN 116009837 A CN116009837 A CN 116009837A
- Authority
- CN
- China
- Prior art keywords
- rule
- label
- tag
- basic
- level
- 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
Images
Abstract
The invention discloses a method for realizing a front-end page by using a multi-layer condition combination, which belongs to the technical field of computer front-end and comprises a basic rule tag and a multi-layer rule tag, wherein the multi-layer rule tag at least comprises a basic rule tag and/or a multi-layer rule tag; constructing a working page of left-right mode layout by using a VUE frame and an application assembly library thereof, wherein the left part of the working page is a basic rule tag selection area, and the right part of the working page is a multi-layer rule tag editing area; inserting the basic rule label into the multi-rule label editing area on the right side from the left side, and executing the operation: replacing, inserting and combining to form a multi-rule tag of a plurality of basic rule tag combinations; the method can realize multi-layer rule combination according to the basic rule to form a page of multi-layer condition combination, and can realize that independent development is not needed when the layer condition combination is changed, so that time and economic cost are saved, and the page can be flexibly changed according to project conditions.
Description
Technical Field
The invention relates to the technical field of front-end software of computers, in particular to a method for realizing a front-end page by using multi-layer conditional combination.
Background
In recent years, the idea of popular modular development in the front-end industry has begun, and the front-end page is fragmented into reusable modules according to functions. The repeated use of the components is common in front-end development, and various combinations can be carried out according to the functions of the components, so that the front-end of the multi-level conditional combination is formed. However, the existing front-end page is generally only supported in a three-level relationship, and needs to be independently developed to support more than three levels, so that the time and economic cost are increased due to the independent development, and once the levels are changed, the independent development is needed, so that the page with the multi-level condition combination is not flexible to realize.
Disclosure of Invention
The invention aims to provide a method for realizing a front-end page by using a multi-layer condition combination, which can realize the multi-layer rule combination according to basic rules to form a page of a multi-layer condition combination, and can realize that independent development is not needed when the layer condition combination is changed, thereby saving time and economic cost and flexibly changing the page according to project conditions.
In order to solve the technical problems, the invention adopts the following technical scheme: a method for realizing a front page by using a multi-layer condition combination comprises a basic rule tag and a multi-layer rule tag, wherein the multi-layer rule tag at least comprises a basic rule tag;
the specific implementation steps are as follows:
s1, building a working page of a left-right mode layout by utilizing a VUE framework and a view-design application component library, wherein the left part of the working page is a basic rule tag selection area, and the right part of the working page is a multi-layer rule tag editing area;
s2, inserting the basic rule label into the multi-rule label editing area on the right side from the left side, and executing corresponding operations according to the position of inserting the basic rule label into the multi-rule label editor: replacing, inserting and combining to form a multi-rule tag of a plurality of basic rule tag combinations;
s3, performing data processing according to various basic rule labels and events in the multi-rule labels to obtain a hierarchy of the multi-rule labels and the height and width of the basic rule labels in each hierarchy;
s4, according to the display rules of the front-end page, adjusting the levels of the multi-rule labels and the height and the width of the multi-rule labels in each level, so that the multi-rule labels are normally displayed on the front-end page.
The foregoing method for implementing a front-end page with a multi-layer conditional combination, wherein the multi-rule tag comprises at least one base rule tag, and/or,
the multi-rule tag comprises at least one multi-rule tag.
The method for realizing the front-end page by using the multi-layer conditional combination, wherein the data stored in the multi-rule tag comprises the following steps: the multi-rule tag array, the relation among the multi-rule tag arrays, the basic rule tag array, the relation among the basic rule tag arrays, the result value and the width;
the multi-rule tag array stores multi-rule tags, the relation among the multi-rule tag arrays is dynamic assignment to the relation among the multi-rule tag arrays, the basic rule tag array stores basic rule tags, the relation among the basic rule tag arrays is dynamic assignment to the relation among the basic rule tag arrays, the result value is used for storing the relation among the multi-rule tag arrays and the multi-rule tag arrays, the result value which is calculated most is needed to be displayed on a final front page, the width is the width of a front page display level, the width of each level is obtained by the width of the multi-rule tag array and the left and right side distance, and the width of each level is calculated by sub-level recursion.
The method for realizing the front-end page by using the multi-layer condition combination comprises the steps of storing rule configuration objects, configuring relations among internal rules, rule configuration description information, result values, problem marks and widths in a basic rule tag;
the rule configuration object is a time and table range capable of dynamically configuring multi-layer bottom rules and data screening, the relation among the configuration internal rules is dynamic assignment to the multi-layer bottom rule relation, the rule configuration description information is a result value for storing final operation of the configuration internal rules and is finally displayed on a page, the problem identification is used for data verification when data is stored, the page judges that the multi-rule label of the problem is marked red and highlighted according to the attribute to prompt a user to modify, and the page is popped out and prompted, the width is the width of the innermost layer of the page display, the rule configuration description information is artificially set, and the width of each layer is convenient for the subsequent recursive calculation.
The method for realizing the front page by using the multi-layer condition combination, wherein the corresponding operation is performed according to the position of inserting the basic rule tag into the multi-rule tag editor, and the operation comprises the following steps: substitution, insertion and combination, in particular:
the method comprises the steps that a view-design application component is utilized to achieve the operations of completing replacement, insertion and combination of the basic rule label selection area to the multi-rule label editing area, and the basic rule labels in the multi-rule label editing area and the multi-rule labels in the multi-rule label editing area are dragged to complete the operations of completing replacement, insertion and combination of the basic rule labels and the multi-rule labels to other multi-rule labels;
selecting a basic rule label from a basic rule label selection area, dragging the basic rule label to a multi-rule label editing area, wherein the replacing operation is to remove a target basic rule label from the multi-rule label through an index position of the target basic rule label in the multi-rule label editing area, generate a new basic rule label in the multi-rule label according to the dragged basic rule label content, and insert the newly generated basic rule label into the index position of the target basic rule label in the multi-rule label;
the inserting operation is to generate a new basic rule label according to the dragged basic rule label content, and insert the newly generated basic rule label into the index position of the multi-rule label where the target basic rule label is positioned;
the combination operation is to generate a new basic rule label according to the content of the dragged basic rule label, combine the new basic rule label and the target basic rule label into a new multi-rule label, remove the target basic rule label from the multi-rule label through the index position of the target basic rule label in the multi-rule label, and insert the newly generated multi-rule label into the index position of the target basic rule label in the multi-rule label;
when the basic rule label is dragged in the multi-rule label editing area, acquiring the basic rule label and the index value of the basic rule label, when the basic rule label is dragged to the target multi-rule label, removing the index value of the basic rule label from the multi-rule label, and generating the index value in the target multi-rule label according to the content of the basic rule label; if only one basic rule label exists in the multi-rule label where the basic rule label is dragged, the multi-rule label level is moved up by one layer and the index value is updated.
The method for realizing the front-end page by using the multi-layer conditional combination, wherein the data processing in the step S3 specifically comprises the following steps:
each time a new basic rule label is dragged to the multi-rule label editing area, the levels in the multi-rule label editing area are required to be recalculated, and the heights and the widths of the multi-rule labels in all the levels are calculated;
the calculating of the multi-rule tag editing area level needs to calculate the total level number of the multi-rule tag array in the outermost level respectively;
the height and width of the basic rule labels of the innermost level are fixed, the upper margin, the lower margin and the left and right margins of each level and the sub-level are fixed,
the height calculation formula of each level of the multi-rule tag is as follows:
HN＝(TLN-LN)×(HT+HB)+H；
wherein H is the height of the basic rule tag of the innermost layer, HN is the height of the multi-rule tag of each layer, TLN is the total layer number of the multi-rule tag array in the multi-rule tag of the outermost layer, LN is the layer number of HN, HT is the distance between the sub-layer tag of each layer and the upper frame of each layer, HB is the distance between the basic rule tag of the innermost layer and the lower frame of the nearest outer layer;
the width calculation formula of the multi-rule label is as follows:
WN＝∑W+WR×(Y+1)；
wherein W is the width of the sub-label in the basic rule of each innermost level, sigma W is the sum of the widths of all sub-labels in each level, WN is the width of the multi-rule label of each innermost level, WR is the distance between the left and right basic rule labels of the sub-level label of each level and the nearest outer level by one layer of frame, Y is the number of the basic rule labels of the innermost sub-level;
the width calculation mode of the multi-rule label editing area is hierarchical calculation, and particularly a width calculation formula of the multi-rule label is called recursively.
The method for realizing the front-end page by using the multi-layer condition combination, wherein custom components are respectively a selfsroup component and a selfsitem component in the multi-layer rule tag editing area, the selfsitem component is used for storing a single basic rule tag, and the selfsroup component is used for storing at least one of the following combinations: a SelfItem component, a SelfGroup component, and a SelfItem component and a SelfGroup component;
the parameters of the SelfItem component comprise basic rule labels, TLNs, LNs and index value arrays in corresponding multi-rule labels;
the width of the SelfItem component is determined by the width of the basic rule tag, the description information is rule configuration description information of the basic rule tag, the result value corresponds to the result value of the basic rule tag, and the height is fixed;
the method defined in the SelfItem component is as follows: deletion, duplication, editing, computation, replacement, insertion, and combination;
the parameters of the SelfGroup component comprise a multi-rule label, TLN, LN, an index value array and a dragging object, wherein the index value array and the dragging object correspond to each other in the parent multi-rule label;
the width of the SelfItem component is determined by the width of the multi-rule tag, the result value corresponds to the result value of the multi-rule tag, and the component height is determined by the height of the multi-rule tag;
the method defined in the SelfItem component is as follows: deletion, calculation, combination, relationship switching, and other event delivery methods: copying, editing, replacing and inserting.
The method for realizing the front-end page by using the multi-layer conditional combination, wherein the method defined in the SelfItem component specifically comprises the following steps:
the deleting method is transmitted upwards through a method provided in the VUE, is received in the SelfGroup component, and is continuously transmitted upwards until the outermost layer removes the basic rule tag from the multi-rule tag according to the parameter index number, and if only one basic rule tag is removed from the multi-rule tag, the multi-rule tag level is moved upwards by one layer and the index value is updated, and the method for clearing the result value is called, and then the height and the width are recalculated;
the copying method is transmitted upwards through a method provided in the VUE, is received in the SelfGroup component, and then is continuously transmitted upwards until the outermost layer copies a brand new basic rule label according to parameters, the basic rule label is added into a father multi-rule label, and the height and width are recalculated after a clearing result value method is called;
the editing method is transmitted upwards through a method provided in the VUE, and after the editing method is received in the SelfGroup component, the editing method is continuously transmitted upwards until the outermost layer carries out corresponding editing operation according to parameters and index numbers, and a emptying result value method is called;
the calculation method is transmitted upwards through a method provided in the VUE, and after the calculation method is received in the SelfGroup component, the calculation method continues to be transmitted upwards until the outermost layer finds a basic rule label according to parameters, a background interface is called to return a result value, and the result value is updated according to a parameter index value array;
the replacement method is transmitted upwards through a method provided in the VUE, and after the replacement method is received in the SelfGroup component, the replacement method is continuously transmitted upwards until the outermost layer is processed according to the replacement logic, and the height and the width are recalculated after a clearing result value method is called;
the insertion method is transmitted upwards through a method provided in the VUE, and after the insertion method is received in the SelfGroup component, the insertion method is continuously transmitted upwards until the outermost layer is processed according to the insertion logic, and the height and the width are recalculated after a clearing result value method is called;
the combination method is transmitted upwards through a method provided in the VUE, and after the combination method is received in the SelfGroup component, the combination method is continuously transmitted upwards until the outermost layer is processed according to the combination logic, and the height and the width are recalculated after the clearing result value method is called.
The method for realizing the front-end page by using the multi-layer conditional combination, wherein the method defined in the SelfItem component specifically comprises the following steps:
the deleting method is transmitted upwards through a method provided in the VUE until the outermost layer removes the multi-rule tag from the multi-rule tag of the father level according to the parameter index number, and after the multi-rule tag is removed, if only one multi-rule tag is positioned in the multi-rule tag, the multi-rule tag level is moved upwards by one layer, the index value is updated, and the method for clearing the result value is called, and then the height and the width are recalculated;
the calculation method is transmitted upwards through a method provided in the VUE until the outermost layer finds out the multi-rule tag according to the parameters, a background interface is called to return a result value, and the result value is updated according to the parameter index value array;
the combination method is transmitted upwards through a method provided in the VUE until the outermost layer finds out a multi-rule tag according to parameters, an object is added in an object array in the multi-rule tag, and the height and width are recalculated after a result value clearing method is called;
the relation switching method is transmitted upwards through a method provided in the VUE until the outermost layer finds out the multi-rule tag according to the parameters, switches the relation among the multi-rule tag arrays in the multi-rule tag object, and invokes a clear result value method;
the editing, copying, replacing and inserting method is responsible for the upward transmission of the method and does not do other operations.
Compared with the prior art, the method has the beneficial effects that the method can directly drag the basic rule label to the multi-layer rule label editing area when in operation by using the VUE and the application component library view-design, and the self-defined components SelfGroup and SelfItem are utilized to realize the multi-layer condition combined page, so that the multi-layer condition combined page can be flexibly changed.
Drawings
FIG. 1 is a schematic drawing of a drag rule flow of the present invention;
FIG. 2 is a schematic diagram of a work page layout of the present invention;
FIG. 3 is a schematic diagram of a rule tag selection area on the left side of a work page in accordance with the present invention;
FIG. 4 is a schematic diagram of a multi-rule tab editing area on the right side of a work page of the present invention;
FIG. 5A is a schematic diagram of a multi-rule label editing area prior to a basic rule label selection area drag-and-drop insertion method in accordance with the present invention;
FIG. 5B is a schematic diagram of a multi-rule label editing area after the completion of the basic rule label selection area drag-and-insert method according to the present invention;
FIG. 6A is a schematic diagram of a multi-rule tag edit field before an insertion method is performed by dragging a multi-rule tag within the multi-rule tag edit field in accordance with the present invention;
FIG. 6B is a schematic diagram of the multi-rule tag editing area after the completion of the insertion method for dragging the multi-rule tag in the multi-rule tag editing area according to the present invention;
FIG. 7A is a schematic diagram of a multi-rule tag edit field before an insertion method is performed by dragging a base rule tag within the multi-rule tag edit field in accordance with the present invention;
FIG. 7B is a schematic diagram of the multi-rule tag editing area after the completion of the insertion method of the drag base rule tag in the multi-rule tag editing area according to the present invention;
FIG. 8A is a schematic diagram of a multi-rule tag edit section before a deletion method is performed within the multi-rule tag edit section in accordance with the present invention;
FIG. 8B is a schematic diagram of a multi-rule tag edit field after performing a delete method in the multi-rule tag edit field in accordance with the present invention;
FIG. 9A is a schematic diagram of a multi-rule tag edit section before a replication method is performed within the multi-rule tag edit section in accordance with the present invention;
FIG. 9B is a schematic diagram of a multi-rule tag edit section after performing a copy method in the multi-rule tag edit section in accordance with the present invention;
FIG. 10 is a diagram showing the corresponding parameters in calculating the height and width of each level of the multi-rule tag according to the present invention;
FIG. 11 is a schematic diagram of the inclusion of an outermost level multi-rule tag in the present invention;
FIG. 12 is a schematic diagram of the custom component SelfItem component and SelfGroup component of the present invention;
the invention is further described below with reference to the drawings and the detailed description.
Detailed Description
Example 1 of the present invention: a method for realizing a front page by using a multi-layer condition combination comprises a basic rule tag and a multi-layer rule tag, wherein the multi-layer rule tag at least comprises a basic rule tag;
the specific implementation steps are as follows:
s1, building a working page of a left-right mode layout by utilizing a VUE framework and a view-design application component library, wherein the left part of the working page is a basic rule tag selection area, and the right part of the working page is a multi-layer rule tag editing area;
s2, inserting the basic rule label into the multi-rule label editing area on the right side from the left side, and executing corresponding operations according to the position of inserting the basic rule label into the multi-rule label editor: replacing, inserting and combining to form a multi-rule tag of a plurality of basic rule tag combinations;
s3, performing data processing according to various basic rule labels and events in the multi-rule labels to obtain a hierarchy of the multi-rule labels and the height and width of the basic rule labels in each hierarchy;
s4, according to the display rules of the front-end page, adjusting the levels of the multi-rule labels and the height and the width of the multi-rule labels in each level, so that the multi-rule labels are normally displayed on the front-end page.
It can be understood that the embodiment can directly drag the basic rule label to the multi-layer rule label editing area during operation, and realize the page of multi-layer condition combination, so that the page of the multi-layer condition combination can be changed very flexibly.
Example 2 of the present invention: a method for realizing a front page by using a multi-layer condition combination comprises a basic rule tag and a multi-layer rule tag, wherein the multi-layer rule tag at least comprises a basic rule tag;
the specific implementation steps are as follows:
s1, referring to FIG. 2, a working page of a left-right mode layout is built by utilizing a VUE framework and a view-design application component library, wherein the left part of the working page is a basic rule tag selection area, and the right part of the working page is a multi-layer rule tag editing area;
specifically, the multi-rule label comprises at least one basic rule label, and/or,
the multi-rule label comprises at least one multi-rule label;
referring to fig. 3, the left side rule tag selection area is divided into an upper part and a lower part, which are respectively a tree structure base rule tag selection area and a base rule tag list selection area which can be screened, and both can be dragged.
S2, inserting the basic rule label into the multi-rule label editing area on the right side from the left side, and executing corresponding operations according to the position of inserting the basic rule label into the multi-rule label editor: replacing, inserting and combining to form a multi-rule tag of a plurality of basic rule tag combinations;
specifically, the data stored in the multi-rule tag includes: the multi-rule tag array, the relation among the multi-rule tag arrays, the basic rule tag array, the relation among the basic rule tag arrays, the result value and the width;
the multi-rule tag array stores multi-rule tags, the relation among the multi-rule tag arrays is dynamic assignment to the relation among the multi-rule tag arrays, the basic rule tag array stores basic rule tags, the relation among the basic rule tag arrays is dynamic assignment to the relation among the basic rule tag arrays, the result value is used for storing the relation among the multi-rule tag arrays and the multi-rule tag arrays, the result value which is calculated most is needed to be displayed on a final front page, the width is the width of a front page display level, the width of each level is obtained by the width of the multi-rule tag array and the left and right side distance, and the width of each level is calculated by sub-level recursion.
Storing rule configuration objects, relationships among configuration internal rules, rule configuration description information, result values, problem identifiers and widths in the basic rule labels;
the rule configuration object is a time and table range capable of dynamically configuring multi-layer bottom rules and data screening, the relation among the configuration internal rules is dynamic assignment to the multi-layer bottom rule relation, the rule configuration description information is a result value for storing final operation of the configuration internal rules and is finally displayed on a page, the problem identification is used for data verification when data is stored, the page judges that the multi-rule label of the problem is marked red and highlighted according to the attribute to prompt a user to modify, and the page is popped out and prompted, the width is the width of the innermost layer of the page display, the rule configuration description information is artificially set, and the width of each layer is convenient for the subsequent recursive calculation.
It should be noted that, referring to fig. 5A and fig. 5B, according to the insertion of the basic rule tag into the position of the multi-rule tag editor, the corresponding operations are performed as follows: substitution, insertion and combination, in particular:
the method comprises the steps that a view-design application component is utilized to achieve the operations of completing replacement, insertion and combination of the basic rule label selection area to the multi-rule label editing area, and the basic rule labels in the multi-rule label editing area and the multi-rule labels in the multi-rule label editing area are dragged to complete the operations of completing replacement, insertion and combination of the basic rule labels and the multi-rule labels to other multi-rule labels;
selecting a basic rule label from a basic rule label selection area, dragging the basic rule label to a multi-rule label editing area, wherein the replacing operation is to remove a target basic rule label from the multi-rule label through an index position of the target basic rule label in the multi-rule label editing area, generate a new basic rule label in the multi-rule label according to the dragged basic rule label content, and insert the newly generated basic rule label into the index position of the target basic rule label in the multi-rule label;
the inserting operation is to generate a new basic rule label according to the dragged basic rule label content, and insert the newly generated basic rule label into the index position of the multi-rule label where the target basic rule label is positioned;
the combination operation is to generate a new basic rule label according to the content of the dragged basic rule label, combine the new basic rule label and the target basic rule label into a new multi-rule label, remove the target basic rule label from the multi-rule label through the index position of the target basic rule label in the multi-rule label, and insert the newly generated multi-rule label into the index position of the target basic rule label in the multi-rule label;
when the basic rule label is dragged in the multi-rule label editing area, acquiring the basic rule label and the index value of the basic rule label, when the basic rule label is dragged to the target multi-rule label, removing the index value of the basic rule label from the multi-rule label, and generating the index value in the target multi-rule label according to the content of the basic rule label; if only one basic rule label exists in the multi-rule label where the basic rule label is dragged, the multi-rule label level is moved up by one layer and the index value is updated.
S3, performing data processing according to various basic rule labels and events in the multi-rule labels to obtain a hierarchy of the multi-rule labels and the height and width of the basic rule labels in each hierarchy;
specifically, each time a new basic rule tag is dragged to the multi-rule tag editing area, the levels in the multi-rule tag editing area need to be recalculated, and the heights and the widths of the multi-rule tags in all the levels are calculated;
the calculating of the multi-rule tag editing area level needs to calculate the total level number of the multi-rule tag array in the outermost level respectively;
the height and width of the basic rule labels of the innermost level are fixed, the upper margin, the lower margin and the left and right margins of each level and the sub-level are fixed,
the height calculation formula of each level of the multi-rule tag is as follows:
HN＝(TLN-LN)×(HT+HB)+H；
wherein H is the height of the basic rule tag of the innermost level, HN is the height of the multi-rule tag of each layer, TLN is the total layer level of the multi-rule tag array in the multi-rule tag of the outermost layer, LN is the layer level where HN is located, HT is the upper frame distance between the basic rule tag of the sub-level in each layer and every nearest outer layer, HB is the lower frame distance between the basic rule tag of the innermost layer in each sub-level in each layer and every nearest outer layer;
the width calculation formula of the multi-rule label is as follows:
WN＝∑W+WR×(Y+1)；
wherein W is the width of the sub-label in the basic rule of each innermost level, sigma W is the sum of the widths of all sub-labels in each level, WN is the width of the multi-rule label of each innermost level, WR is the distance between the left and right basic rule labels of the sub-level label of each level and the nearest outer level by one layer of frame, Y is the number of the basic rule labels of the innermost sub-level;
the width calculation mode of the multi-rule label editing area is hierarchical calculation, and particularly a width calculation formula of the multi-rule label is called recursively.
It should be noted that, the multi-layer rule tag editing area is applied with a custom component, a selfsroup component and a selfsitem component, where the selfsitem component is used to store a single basic rule tag, and the selfsroup component is used to store at least one of the following combinations: a SelfItem component, a SelfGroup component, and a SelfItem component and a SelfGroup component;
the parameters of the SelfItem component comprise basic rule labels, TLNs, LNs and index value arrays in corresponding multi-rule labels;
the width of the SelfItem component is determined by the width of the basic rule tag, the description information is rule configuration description information of the basic rule tag, the result value corresponds to the result value of the basic rule tag, and the height is fixed;
referring to fig. 6A, 6B, 7A, 7B, 8A, 8B, 9A and 9B, the methods defined in the selfitem component include: deletion, duplication, editing, computation, replacement, insertion, and combination;
the parameters of the SelfGroup component comprise a multi-rule label, TLN, LN, an index value array and a dragging object, wherein the index value array and the dragging object correspond to each other in the parent multi-rule label;
the width of the SelfItem component is determined by the width of the multi-rule tag, the result value corresponds to the result value of the multi-rule tag, and the component height is determined by the height of the multi-rule tag;
the method defined in the SelfItem component is as follows: deletion, calculation, combination, relationship switching, and other event delivery methods: copying, editing, replacing and inserting.
Specifically, the method defined in the SelfItem component specifically includes:
the deleting method is transmitted upwards through a method provided in the VUE, is received in the SelfGroup component, and is continuously transmitted upwards until the outermost layer removes the basic rule tag from the multi-rule tag according to the parameter index number, and if only one basic rule tag is removed from the multi-rule tag, the multi-rule tag level is moved upwards by one layer and the index value is updated, and the method for clearing the result value is called, and then the height and the width are recalculated;
the copying method is transmitted upwards through a method provided in the VUE, is received in the SelfGroup component, and then is continuously transmitted upwards until the outermost layer copies a brand new basic rule label according to parameters, the basic rule label is added into a father multi-rule label, and the height and width are recalculated after a clearing result value method is called;
the editing method is transmitted upwards through a method provided in the VUE, and after the editing method is received in the SelfGroup component, the editing method is continuously transmitted upwards until the outermost layer carries out corresponding editing operation according to parameters and index numbers, and a emptying result value method is called;
the calculation method is transmitted upwards through a method provided in the VUE, and after the calculation method is received in the SelfGroup component, the calculation method continues to be transmitted upwards until the outermost layer finds a basic rule label according to parameters, a background interface is called to return a result value, and the result value is updated according to a parameter index value array;
the replacement method is transmitted upwards through a method provided in the VUE, and after the replacement method is received in the SelfGroup component, the replacement method is continuously transmitted upwards until the outermost layer is processed according to the replacement logic, and the height and the width are recalculated after a clearing result value method is called;
the insertion method is transmitted upwards through a method provided in the VUE, and after the insertion method is received in the SelfGroup component, the insertion method is continuously transmitted upwards until the outermost layer is processed according to the insertion logic, and the height and the width are recalculated after a clearing result value method is called;
the combination method is transmitted upwards through a method provided in the VUE, and after the combination method is received in the SelfGroup component, the combination method is continuously transmitted upwards until the outermost layer is processed according to the combination logic, and the height and the width are recalculated after the clearing result value method is called.
The method for emptying the result value is as follows: and clearing the result value according to the index array. And traversing the index array, circularly acquiring the object, and clearing the result value in the object.
The method defined in the SelfItem component specifically comprises the following steps:
the deleting method is transmitted upwards through a method provided in the VUE until the outermost layer removes the multi-rule tag from the multi-rule tag of the father level according to the parameter index number, and after the multi-rule tag is removed, if only one multi-rule tag is positioned in the multi-rule tag, the multi-rule tag level is moved upwards by one layer, the index value is updated, and the method for clearing the result value is called, and then the height and the width are recalculated;
the calculation method is transmitted upwards through a method provided in the VUE until the outermost layer finds out the multi-rule tag according to the parameters, a background interface is called to return a result value, and the result value is updated according to the parameter index value array;
the combination method is transmitted upwards through a method provided in the VUE until the outermost layer finds out a multi-rule tag according to parameters, an object is added in an object array in the multi-rule tag, and the height and width are recalculated after a result value clearing method is called;
the relation switching method is transmitted upwards through a method provided in the VUE until the outermost layer finds out the multi-rule tag according to the parameters, switches the relation among the multi-rule tag arrays in the multi-rule tag object, and invokes a clear result value method;
the editing, copying, replacing and inserting method is responsible for the upward transmission of the method and does not do other operations.
S4, according to the display rules of the front-end page, adjusting the levels of the multi-rule labels and the height and the width of the multi-rule labels in each level, so that the multi-rule labels are normally displayed on the front-end page.
The SelfItem component and the SelfGroup component define methods which are all transferred according to event upward (parent SelfGroup) and transfer parameters: a multi-rule tag or a basic rule tag, and an index value array corresponding to the multi-rule tag;
references to the selfsroup component, references to the selfsroup component and the selfsitem component within the selfsroup component. Index value array ([ one layer multi-rule tag index value, two layers multi-rule tag index value..n layers multi-rule tag index value ]), LN is at the level (initial 0, 1 added to each layer);
the SelfGroup circulating reference is realized by judging whether the object has a sub object or not to decide whether to display the SelfItem component or the SelfGroup component.
It can be understood that, in this embodiment, the VUE and the application component library view-design are used to implement direct dragging during operation, and the basic rule label is dragged to the multi-layer rule label editing area, so that the custom components selfsroup and selfstem are used to implement the multi-layer condition combined page, and thus the multi-layer condition combined page can be changed very flexibly.
The working principle of one embodiment of the invention is as follows: constructing a working page of left-right mode layout by using a VUE framework and a view-design application component library, wherein the left part of the working page is a basic rule tag selection area, and the right part of the working page is a multi-layer rule tag editing area; inserting the basic rule label into the multi-rule label editing area on the right side from the left side, and executing corresponding operations according to the position of inserting the basic rule label into the multi-rule label editor: replacing, inserting and combining to form a multi-rule tag of a plurality of basic rule tag combinations; performing data processing according to various basic rule labels and events in the multi-rule labels to obtain a hierarchy of the multi-rule labels and the height and width of the basic rule labels in each hierarchy; according to the display rules of the front page, the levels of the multi-rule labels and the height and the width of the multi-rule labels in each level are adjusted, so that the multi-rule labels are normally displayed on the front page.
Claims (9)
1. The method for realizing the front-end page by using the multi-layer condition combination is characterized by comprising a basic rule tag and a multi-layer rule tag, wherein the multi-layer rule tag at least comprises a basic rule tag;
the specific implementation steps are as follows:
s1, building a working page of a left-right mode layout by utilizing a VUE framework and a view-design application component library, wherein the left part of the working page is a basic rule tag selection area, and the right part of the working page is a multi-layer rule tag editing area;
s2, inserting the basic rule label into the multi-rule label editing area on the right side from the left side, and executing corresponding operations according to the position of inserting the basic rule label into the multi-rule label editor: replacing, inserting and combining to form a multi-rule tag of a plurality of basic rule tag combinations;
s3, performing data processing according to various basic rule labels and events in the multi-rule labels to obtain a hierarchy of the multi-rule labels and the height and width of the basic rule labels in each hierarchy;
s4, according to the display rules of the front-end page, adjusting the levels of the multi-rule labels and the height and the width of the multi-rule labels in each level, so that the multi-rule labels are normally displayed on the front-end page.
2. The method for implementing a front-end page with a multi-layer conditional combination of claim 1, wherein the multi-rule tag comprises at least one base rule tag, and/or,
the multi-rule tag comprises at least one multi-rule tag.
3. The method for implementing a front-end page with a multi-layer conditional combination of claim 2, wherein the data stored in the multi-rule tag comprises: the multi-rule tag array, the relation among the multi-rule tag arrays, the basic rule tag array, the relation among the basic rule tag arrays, the result value and the width;
the multi-rule tag array stores multi-rule tags, the relation among the multi-rule tag arrays is dynamic assignment to the relation among the multi-rule tag arrays, the basic rule tag array stores basic rule tags, the relation among the basic rule tag arrays is dynamic assignment to the relation among the basic rule tag arrays, the result value is used for storing the relation among the multi-rule tag arrays and the multi-rule tag arrays, the result value which is calculated most is needed to be displayed on a final front page, the width is the width of a front page display level, the width of each level is obtained by the width of the multi-rule tag array and the left and right side distance, and the width of each level is calculated by sub-level recursion.
4. The method for implementing a front-end page with a multi-layer conditional combination according to claim 2, wherein the basic rule tag stores rule configuration objects, relationships between configuration internal rules, rule configuration description information, result values, problem identifiers, and widths;
the rule configuration object is a time and table range capable of dynamically configuring multi-layer bottom rules and data screening, the relation among the configuration internal rules is dynamic assignment to the multi-layer bottom rule relation, the rule configuration description information is a result value for storing final operation of the configuration internal rules and is finally displayed on a page, the problem identification is used for data verification when data is stored, the page judges that the multi-rule label of the problem is marked red and highlighted according to the attribute to prompt a user to modify, and the page is popped out and prompted, the width is the width of the innermost layer of the page display, the rule configuration description information is artificially set, and the width of each layer is convenient for the subsequent recursive calculation.
5. The method for implementing a front-end page with a multi-layer conditional combination of claim 4, wherein the inserting of the base rule tag into the multi-rule tag editor is performed according to the position of the base rule tag, by: substitution, insertion and combination, in particular:
the method comprises the steps that a view-design application component is utilized to achieve the operations of completing replacement, insertion and combination of the basic rule label selection area to the multi-rule label editing area, and the basic rule labels in the multi-rule label editing area and the multi-rule labels in the multi-rule label editing area are dragged to complete the operations of completing replacement, insertion and combination of the basic rule labels and the multi-rule labels to other multi-rule labels;
selecting a basic rule label from a basic rule label selection area, dragging the basic rule label to a multi-rule label editing area, wherein the replacing operation is to remove a target basic rule label from the multi-rule label through an index position of the target basic rule label in the multi-rule label editing area, generate a new basic rule label in the multi-rule label according to the dragged basic rule label content, and insert the newly generated basic rule label into the index position of the target basic rule label in the multi-rule label;
the inserting operation is to generate a new basic rule label according to the dragged basic rule label content, and insert the newly generated basic rule label into the index position of the multi-rule label where the target basic rule label is positioned;
the combination operation is to generate a new basic rule label according to the content of the dragged basic rule label, combine the new basic rule label and the target basic rule label into a new multi-rule label, remove the target basic rule label from the multi-rule label through the index position of the target basic rule label in the multi-rule label, and insert the newly generated multi-rule label into the index position of the target basic rule label in the multi-rule label;
when the basic rule label is dragged in the multi-rule label editing area, acquiring the basic rule label and the index value of the basic rule label, when the basic rule label is dragged to the target multi-rule label, removing the index value of the basic rule label from the multi-rule label, and generating the index value in the target multi-rule label according to the content of the basic rule label; if only one basic rule label exists in the multi-rule label where the basic rule label is dragged, the multi-rule label level is moved up by one layer and the index value is updated.
6. The method for implementing a front-end page with a multi-layer conditional combination according to claim 1, wherein the data processing in step S3 is specifically:
each time a new basic rule label is dragged to the multi-rule label editing area, the levels in the multi-rule label editing area are required to be recalculated, and the heights and the widths of the multi-rule labels in all the levels are calculated;
the calculating of the multi-rule tag editing area level needs to calculate the total level number of the multi-rule tag array in the outermost level respectively;
the height and width of the basic rule labels of the innermost level are fixed, the upper margin, the lower margin and the left and right margins of each level and the sub-level are fixed,
the height calculation formula of each level of the multi-rule tag is as follows:
HN＝(TLN-LN)×(HT+HB)+H；
wherein H is the height of the basic rule tag of the innermost level, HN is the height of the multi-rule tag of each level, TLN is the total level number of the multi-rule tag array in the multi-rule tag of the outermost level, LN is the level number of HN, HT is the distance between the tag of each sub-level in each level and the upper frame of each level, HB is the distance between the tag of each sub-level in each level and the lower frame of each level;
the width calculation formula of the multi-rule label is as follows:
WN＝∑W+WR×(Y+1)；
wherein W is the width of the sub-label in each level, sigma W is the sum of the widths of all the sub-labels in each level, WN is the width of each layer of multi-rule label, WR is the left and right frame distance of the sub-level label in each level, and Y is the number of the basic rule labels of the sub-level;
the width calculation mode of the multi-rule label editing area is hierarchical calculation, and particularly a width calculation formula of the multi-rule label is called recursively.
7. The method for implementing a front-end page with a multi-layer conditional combination of claim 6, wherein custom components, selfsroup components and selfsitem components, respectively, are applied in the multi-layer rule tag editing area, the selfsitem components are used for storing single basic rule tags, and the selfsroup components are used for storing at least one of the following combinations: a SelfItem component, a SelfGroup component, and a SelfItem component and a SelfGroup component;
the parameters of the SelfItem component comprise basic rule labels, TLNs, LNs and index value arrays in corresponding multi-rule labels;
the width of the SelfItem component is determined by the width of the basic rule tag, the description information is rule configuration description information of the basic rule tag, the result value corresponds to the result value of the basic rule tag, and the height is fixed;
the method defined in the SelfItem component is as follows: deletion, duplication, editing, computation, replacement, insertion, and combination;
the parameters of the SelfGroup component comprise a multi-rule label, TLN, LN, an index value array and a dragging object, wherein the index value array and the dragging object correspond to each other in the parent multi-rule label;
the width of the SelfItem component is determined by the width of the multi-rule tag, the result value corresponds to the result value of the multi-rule tag, and the component height is determined by the height of the multi-rule tag;
the method defined in the SelfItem component is as follows: deletion, calculation, combination, relationship switching, and other event delivery methods: copying, editing, replacing and inserting.
8. The method for implementing a front-end page with a multi-layer conditional combination of claim 7, wherein the method defined in the SelfItem component is specifically:
the deleting method is transmitted upwards through a method provided in the VUE, is received in the SelfGroup component, and is continuously transmitted upwards until the outermost layer removes the basic rule tag from the multi-rule tag according to the parameter index number, and if only one basic rule tag is removed from the multi-rule tag, the multi-rule tag level is moved upwards by one layer and the index value is updated, and the method for clearing the result value is called, and then the height and the width are recalculated;
the copying method is transmitted upwards through a method provided in the VUE, is received in the SelfGroup component, and then is continuously transmitted upwards until the outermost layer copies a brand new basic rule label according to parameters, the basic rule label is added into a father multi-rule label, and the height and width are recalculated after a clearing result value method is called;
the editing method is transmitted upwards through a method provided in the VUE, and after the editing method is received in the SelfGroup component, the editing method is continuously transmitted upwards until the outermost layer carries out corresponding editing operation according to parameters and index numbers, and a emptying result value method is called;
the calculation method is transmitted upwards through a method provided in the VUE, and after the calculation method is received in the SelfGroup component, the calculation method continues to be transmitted upwards until the outermost layer finds a basic rule label according to parameters, a background interface is called to return a result value, and the result value is updated according to a parameter index value array;
the replacement method is transmitted upwards through a method provided in the VUE, and after the replacement method is received in the SelfGroup component, the replacement method is continuously transmitted upwards until the outermost layer is processed according to the replacement logic, and the height and the width are recalculated after a clearing result value method is called;
the insertion method is transmitted upwards through a method provided in the VUE, and after the insertion method is received in the SelfGroup component, the insertion method is continuously transmitted upwards until the outermost layer is processed according to the insertion logic, and the height and the width are recalculated after a clearing result value method is called;
the combination method is transmitted upwards through a method provided in the VUE, and after the combination method is received in the SelfGroup component, the combination method is continuously transmitted upwards until the outermost layer is processed according to the combination logic, and the height and the width are recalculated after the clearing result value method is called.
9. The method for implementing a front-end page with a multi-layer conditional combination of claim 7, wherein the method defined in the SelfItem component is specifically:
the deleting method is transmitted upwards through a method provided in the VUE until the outermost layer removes the multi-rule tag from the multi-rule tag of the father level according to the parameter index number, and after the multi-rule tag is removed, if only one multi-rule tag is positioned in the multi-rule tag, the multi-rule tag level is moved upwards by one layer, the index value is updated, and the method for clearing the result value is called, and then the height and the width are recalculated;
the calculation method is transmitted upwards through a method provided in the VUE until the outermost layer finds out the multi-rule tag according to the parameters, a background interface is called to return a result value, and the result value is updated according to the parameter index value array;
the combination method is transmitted upwards through a method provided in the VUE until the outermost layer finds out a multi-rule tag according to parameters, an object is added in an object array in the multi-rule tag, and the height and width are recalculated after a result value clearing method is called;
the relation switching method is transmitted upwards through a method provided in the VUE until the outermost layer finds out the multi-rule tag according to the parameters, switches the relation among the multi-rule tag arrays in the multi-rule tag object, and invokes a clear result value method;
the editing, copying, replacing and inserting method is responsible for the upward transmission of the method and does not do other operations.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211718557.XA CN116009837A (en) | 2022-12-29 | 2022-12-29 | Method for realizing front page by using multi-layer conditional combination |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211718557.XA CN116009837A (en) | 2022-12-29 | 2022-12-29 | Method for realizing front page by using multi-layer conditional combination |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN116009837A true CN116009837A (en) | 2023-04-25 |
Family
ID=86033232
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211718557.XA Pending CN116009837A (en) | 2022-12-29 | 2022-12-29 | Method for realizing front page by using multi-layer conditional combination |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116009837A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116450119A (en) * | 2023-05-29 | 2023-07-18 | 珠海乐图软件有限公司 | Page layout method, page layout system, electronic device and storage medium |
-
2022
- 2022-12-29 CN CN202211718557.XA patent/CN116009837A/en active Pending
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116450119A (en) * | 2023-05-29 | 2023-07-18 | 珠海乐图软件有限公司 | Page layout method, page layout system, electronic device and storage medium |
| CN116450119B (en) * | 2023-05-29 | 2023-09-01 | 珠海乐图软件有限公司 | Page layout method, page layout system, electronic device and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US6640234B1 (en) | Extension of formulas and formatting in an electronic spreadsheet | |
| US5613131A (en) | Auto-formatting of tables in a spreadsheet program | |
| US8677297B2 (en) | Low-overhead multi-patterning design rule check | |
| US7627599B2 (en) | Method, apparatus, and program product for visualizing tree structured information | |
| US8640079B2 (en) | Method and system for searching and replacing graphical objects of a design | |
| US8453103B2 (en) | Real time DRC assistance for manual layout editing | |
| CN101221557B (en) | Documents compilation supporting device and storage medium | |
| US5281558A (en) | Cloning method and system for hierarchical compaction | |
| US5339410A (en) | Method of bidirectional recalculation | |
| US8640078B2 (en) | Method and system for searching for graphical objects of a design | |
| JPH0452856A (en) | Method and device for allocating processing of document | |
| Sahraoui et al. | Applying concept formation methods to object identification in procedural code | |
| CN116009837A (en) | Method for realizing front page by using multi-layer conditional combination | |
| JPH11272460A (en) | System for visually displaying correction information on information processing system depending on characteristic | |
| CN112307718B (en) | PDF full-automatic indexing system and method based on text features and grammar rules | |
| US7716578B2 (en) | Display method, computer program product and computer system | |
| US6480993B1 (en) | Accurate layout modeling for centerline-based detail routing | |
| US6892369B2 (en) | Method and apparatus for costing routes of nets | |
| US20160019199A1 (en) | Rules Editor | |
| US7216308B2 (en) | Method and apparatus for solving an optimization problem in an integrated circuit layout | |
| US7093221B2 (en) | Method and apparatus for identifying a group of routes for a set of nets | |
| US9710571B2 (en) | Graphical top-down planning system | |
| CN111399962A (en) | Multi-level menu display method, equipment and storage medium | |
| CN110618808A (en) | Technical method for generating system Hxcel variable one-table-to-many table by intelligent management system | |
| PT92065A (en) | SPACE MANAGEMENT SYSTEM INCORPORATING SOFTWARE OPERATING ENVIRONMENT |
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 |