Shuttle frame assembly interaction method and electronic device

Abstract

The application discloses a shuttle frame component interaction method and an electronic device, relates to the technical field of front-end development user interface components, and comprises the following steps: performing a target operation on at least one of a search box subcomponent, a first list subcomponent and a second list subcomponent; if the target operation is a selection operation or a deletion operation, synchronously updating the first list subcomponent displayed in a first view and the second list subcomponent displayed in a second view; if the target operation is a search operation or a page turning operation, obtaining new element configuration information from a preconfigured data interface, rendering the new element configuration information, updating the first list subcomponent displayed in the first view according to the rendered new element configuration information, and keeping the second list subcomponent displayed in the second view unchanged during the search operation and the page turning operation. The method solves the problems of page freezing and interaction delay caused by full rendering in the prior art, and realizes smooth component operation and continuous interaction improvement under massive data.

Description

Technical Field

[0001] This application relates to the field of front-end development user interface component technology, and in particular to a shuttle box component interaction method and electronic device. Background Technology

[0002] The shuttle component is an interactive component used to move options between two lists. It is usually presented as a two-column layout, and users can move options from one column to the other by using buttons or dragging. It is widely used in scenarios such as permission allocation, data filtering, and batch operations.

[0003] However, because mainstream UI libraries default to rendering all data by default, and similar functions need to be repeatedly built when developing independently, these technologies are prone to problems such as page freezing and operation delays when handling massive amounts of data or adapting to multiple business needs. Summary of the Invention

[0004] This application provides an interaction method and electronic device for a shuttle component, which at least solves the problems of page freezing and interaction delay that are common in related technologies.

[0005] This application provides an interaction method for a shuttle component. The shuttle component includes a component view layer and a data control layer. The component view layer includes a layout view frame, a search box sub-component, a first list sub-component, and a second list sub-component. The layout view frame is divided into a first view and a second view. The first view displays the search box component and the first list sub-component, and the first list sub-component includes pagination element configuration information. The second view displays the second list sub-component. The data control layer is configured to perform the following steps: identify the interaction operation of the component view layer; respond to the interaction operation by performing at least the following actions on the search box component, the first list component, and the second list component. A target operation is performed, wherein the target operation includes at least one of a search operation, a selection operation, a pagination operation, and a deletion operation; if the target operation is a selection operation or a deletion operation, the first list sub-component displayed in the first view and the second list sub-component displayed in the second view are updated synchronously; if the target operation is a search operation or a pagination operation, new element configuration information is obtained from a pre-configured data interface, the new element configuration information is rendered, and the first list sub-component displayed in the first view is updated according to the rendered new element configuration information; during the search operation and the pagination operation, the second list sub-component displayed in the second view remains unchanged.

[0006] This application provides a shuttle component interaction device. The shuttle component includes a component view layer and a data control layer. The component view layer includes a layout view frame, a search box sub-component, a first list sub-component, and a second list sub-component. The layout view frame is divided into a first view and a second view. The first view displays the search box component and the first list sub-component, and the first list sub-component includes pagination element configuration information. The second view displays the second list sub-component. The data control layer includes a shuttle component interaction device. The shuttle component interaction device includes: a recognition module for recognizing interaction operations of the component view layer; and a response module for responding to interaction operations, including the search box component, the first list sub-component, and the second list sub-component. At least one component performs a target operation, wherein the target operation includes at least one of a search operation, a selection operation, a pagination operation, and a deletion operation; a first update module is used to synchronously update the first list sub-component displayed in the first view and the second list sub-component displayed in the second view if the target operation is a selection operation or a deletion operation; a second update module is used to obtain new element configuration information from a pre-configured data interface if the target operation is a search operation or a pagination operation, render the new element configuration information, update the first list sub-component displayed in the first view according to the rendered new element configuration information, and keep the second list sub-component displayed in the second view unchanged during the search operation and the pagination operation.

[0007] This application also provides an electronic device, including: a memory for storing a computer program; and a processor for implementing the steps of the above-described shuttle component interaction method when executing the computer program.

[0008] This application also provides a computer-readable storage medium storing a computer program configured to execute the steps in the above-described shuttle component interaction method embodiments at runtime.

[0009] This application also provides a computer program product, including a computer program or instructions, characterized in that, when the computer program or instructions are executed, they implement the above-described shuttle component interaction method.

[0010] This application employs a differentiated data update strategy when handling interactive operations: during search and pagination, new data is retrieved from the data interface and the first list is updated without rendering all data in full, while pagination configuration controls the amount of data rendered at one time; during selection and deletion, the states of both lists are updated synchronously without redundant calculations, reducing the amount of node generation and the computational pressure during real-time interaction. This solves the technical problems of page freezing and interaction delays that are common in shuttle box components in related technologies, achieving the technical effects of supporting smooth processing of massive amounts of data, shortening operation response time, and ensuring interaction continuity. Attached Figure Description

[0011] To more clearly illustrate the embodiments of this application, the accompanying drawings used in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0012] Figure 1 This is a structural diagram of the shuttle frame assembly provided in an embodiment of this application;

[0013] Figure 2 A flowchart illustrating an interaction method for a shuttle frame component provided in an embodiment of this application;

[0014] Figure 3 A flowchart illustrating the rendering of component data provided in the embodiments of this application;

[0015] Figure 4 This is a block diagram of the shuttle frame component interaction device provided in the embodiments of this application;

[0016] Figure 5 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. Detailed Implementation

[0017] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those of ordinary skill in the art without creative effort are within the protection scope of this application.

[0018] It should be noted that, in the description of this application, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. The terms "first," "second," etc., in this application are used to distinguish similar objects and are not used to describe a specific order or sequence.

[0019] Currently, for business UI interfaces, developers of different business systems need to independently develop their own corresponding UI pages, resulting in the duplication of development of UI pages with similar functions. This method of copying pages with similar functions results in a lot of redundant code. During later maintenance, the same problem needs to be modified on all similar pages, and UI optimization iterations require optimization of all pages, resulting in low development efficiency.

[0020] In related technologies, the shuttle frame component has the following technical defects:

[0021] (1) Full rendering bottleneck: By default, all data is rendered at once, which causes the browser's DOM (Document Object Model) nodes to explode, memory usage to surge, page response timeouts to cause page freezes, and other business operations cannot continue.

[0022] (2) Inefficient Select All Logic: The source code uses two nested loops to determine the selected state. This implementation has a quadratic time complexity. For example, the UI library's updateAllChecked function uses Array.every and indexOf to traverse the data, which significantly increases the time consumption when dealing with tens of thousands of data points. Poor Data Movement Performance: The UI library's addToRight functions match data using nested loops, resulting in significant delays in data movement operations.

[0023] To address the aforementioned problems, this application proposes an interaction method for a shuttle frame component and an electronic device. To enable those skilled in the art to better understand the solution presented in this application, the following detailed description, in conjunction with the accompanying drawings and specific embodiments, provides further elaboration.

[0024] The specific application environment architecture or specific hardware architecture on which the execution of the shuttle component's interaction methods depends is described here.

[0025] The shuttle component interaction method provided in this application embodiment includes a component view layer and a data control layer.

[0026] It's worth noting that Vue is a JavaScript framework for building user interfaces. Built on standard HTML, CSS, and JavaScript, it provides a declarative, component-based programming model to help you develop user interfaces efficiently. The UI (User Interface Library) is a collection of pre-designed interface components and style specifications for quickly building beautiful, consistent, and fully functional user interfaces. It typically includes reusable visual elements such as buttons, forms, navigation bars, and pop-ups, and provides interaction logic support to help developers complete front-end development efficiently. The Transfer component in the UI library is an interactive component used to move options between two lists, usually in a two-column layout. Users can move options from one column to another using buttons or dragging. It is widely used in scenarios such as permission allocation, data filtering, and batch operations.

[0027] The component view layer serves as the interaction entry point and result display surface. It is responsible for rendering visual UI units (such as search boxes, lists, buttons, etc.), receiving user operations (clicks, checkmarks, etc.), and displaying the results processed by the data control layer (list changes after selecting / deleting data). The data control layer is responsible for the interaction logic, which is used to identify user operations from the view layer, perform data processing (filtering, transferring, deleting, etc.), maintain state (recording selected / unselected, pagination information), and then send the processed data back to the view layer to update the display.

[0028] Figure 1 This is a structural diagram of the shuttle frame assembly provided in an embodiment of this application.

[0029] like Figure 1 As shown, the shuttle component includes visual UI units such as the layout view box, the search box sub-component, and the first / second list sub-components, which are responsible for displaying data and receiving user interaction operations (such as the user clicking the search box or checking list items, which are all completed in the view layer).

[0030] The component view layer 10 includes a layout view frame 101, a search box sub-component 104, a first list sub-component 105, and a second list sub-component 106. The layout view frame 101 is divided into a first view 102 and a second view 103. The first view 102 displays the search box component 104 and the first list sub-component 105. The first list sub-component 105 includes pagination element configuration information. The second view displays the second list sub-component 106.

[0031] In this embodiment, the search box sub-component 104 includes a search box and a search button. The search box contains the search text corresponding to the search operation, and the search button performs the search operation based on the search text.

[0032] Specifically, the search box is the input area above the first view, and the search button is the magnifying glass icon to the right of the search box, used to enter text to trigger a search.

[0033] In this embodiment, the first list sub-component 105 includes first header information, a first list queue, page information, a page button, and a selection button for element configuration information. The first header information includes at least one account header and a role header for the element configuration information. The first list queue includes account information and role information for the element configuration information. The page information includes the number of element configuration information items to be displayed and the page number on the page button. The page button performs a page turning operation on the first list queue, and the selection button performs a selection operation and a deletion operation on the first list queue.

[0034] Specifically, the first list sub-component is located directly below the search box sub-component and includes the first table header information, namely the [Account] and [Role] column headings, located at the top of the left-hand table; the first list queue, namely the row data of the elements "Account Name" and "Role" within the table; page information, such as the text at the bottom "Total 57 items, 1, 2, <, >" used to display information related to the number of pages; page buttons, such as "1, 2, <, >", used to switch page numbers; and selection buttons, namely the checkboxes on the far left of each row, used to perform selection and deletion operations.

[0035] In this embodiment, the selection button has a first state and a second state, wherein the first state is displayed when the selection button is not selected, and the second state is displayed when the selection button is selected.

[0036] Specifically, the first state (not selected): the checkbox is blank; the second state (selected): the checkbox is √.

[0037] In this embodiment, the second list sub-component 106 includes a selection identifier, second header information, a second list queue, and a delete button for element configuration information. The selection identifier is used to identify the selected state of element configuration information in the second view 103. The second header information includes the account header of the element configuration information. The second list queue includes the account information of the element configuration information selected from the first list sub-component 105. The delete button performs a deletion operation on the second list queue.

[0038] Specifically, the second list sub-component is located within the second view, presented as an independent display area in the layout on the right. It includes a selection indicator, hidden within the selected data; the second header information, i.e., the [Account] column header on the right, at the top of the right-hand table; the second list queue, i.e., the row data of the right-hand table, representing the selected account information that has been selected from the first list sub-component; and a delete button, i.e., the trash can icon to the right of the account information, which can be clicked to remove the selected element configuration information. In summary, the second list sub-component is used to centrally display the element configuration information selected and moved from the first list sub-component, working in conjunction with the first list sub-component on the left to achieve data selection and management functions.

[0039] Figure 2 This is a flowchart illustrating an interaction method for a shuttle frame component provided in an embodiment of this application.

[0040] like Figure 2 As shown, the data control layer is configured to perform the following steps:

[0041] In step S201, the interactive operations of the component view layer are identified.

[0042] It should be noted that the interactive operations generated by the component view layer include user actions such as clicking checkboxes, search buttons, and delete buttons. This application does not specifically limit the type and implementation of the interactive operations.

[0043] It is understood that the embodiments of this application can accurately capture operation types and associated data. By recognizing user operations transmitted from the view layer (such as clicking a button or checking an option), the system can perceive user actions and provide triggering conditions for subsequent data processing (selection, deletion, search, etc.) and state changes.

[0044] Specifically, the component view layer detects selection actions: when a user clicks the selection button in the left-hand list, the component view layer detects a change in the button's state, such as from "unselected" to "selected," thus triggering a selection-type interactive action. Similarly, the component view layer detects search actions: when a user clicks the search button or enters content in the search box and presses Enter / triggers a real-time search, the component view layer detects a click event on the search button or when the search input meets the query trigger conditions (such as completing input or pressing Enter), thus triggering a search-type interactive action. Finally, the component view layer detects deletion actions: when a user clicks the delete button in the right-hand list's operation column, the component view layer detects a click event on the delete button, thus triggering a deletion-type interactive action.

[0045] In this embodiment of the application, before identifying the interactive operation of the component view layer, the method further includes: obtaining the user's first configuration operation for the search box sub-component; responding to the first configuration operation, configuring the search condition parameters of the search box component, wherein the search condition parameters are configured to call a data interface during query to query the element configuration information that meets the search conditions from the first list sub-component.

[0046] It is understood that this application embodiment achieves the preset search rules through pre-configuration during the component initialization stage: when the upper-level component calls the display method (such as the show method) and passes in configuration data, it can specify the search dimension through SearchKey (the field name of the search condition) to configure the search condition parameters. This mechanism enables subsequent interaction processes to receive specific query content based on preset rules, laying a logical foundation for accurate querying of the first list data. Configuring SearchKey avoids query confusion and ensures that the search logic is consistent with user needs; by pre-configuring the rules during the initialization stage, users only need to input specific content to trigger the query in subsequent interactions, reducing invalid operations and simplifying the interaction process; at the same time, the existence of the SearchKey field determines the display state of the search box in the left list, making the component functionality more aligned with actual usage scenarios.

[0047] It's important to note that the "upper-level component" refers to the parent component or outermost component of the shuttle component. The upper-level component initializes and configures the lower-level shuttle component by passing parameters. The shuttle component's view layer and data control layer then execute specific interactions and logic based on these configurations, forming a clear division of labor between external control and internal implementation. Element configuration information refers to the specific content of each data item in the first list, including "account information" and "role information," which are the basic data units for list display and interaction. The first configuration operation initializes the search box sub-component. The search condition parameter is used to query data in the left-side list that matches the search criteria. During the query, the API is re-requested, and the left-side list data and current pagination information are updated based on the API's returned data. The default value is empty. The upper-level component calls the display method, passing in the configuration. The upper-level component uses this method to pass in the configuration data used to initialize the component. The configuration data includes SearchKey, the field name of the search criteria, which is empty by default. The presence or absence of this field will be used to determine whether to display the search box component in the left-side list.

[0048] Specifically, the "default empty" state of SearchKey is the initial state when the component is initialized. At this time, the search function is not enabled and the search box is not displayed, which is suitable for scenarios with small amounts of data and no need for filtering. When the business requires the search function, the upper-level component can actively pass a specific value to SearchKey (such as SearchKey: "account") through the display method. At this time, SearchKey changes from "empty" to a specific field name, the component will display a search box, and configure the search condition parameters according to the field. The configuration method is flexible and provides rule support for subsequent accurate filtering of data in the left list.

[0049] In this embodiment of the application, before identifying the interactive operation of the component view layer, the method further includes: obtaining the user's second configuration operation for the first list sub-component; responding to the second configuration operation, configuring at least one of the following: first header information, first list queue, page information, page button, and selection button. The first list queue is used to store the account information and role information of the element configuration information. The configuration parameters of the page information include the number of element configuration information displayed in the first list queue, the page number on the page button, and the number of element configuration information displayed on the current page. The selection button saves the account information and account header of the selected element configuration information to the second list sub-component.

[0050] It is understood that the embodiments of this application implement the "pre-definition of basic rules" for the first list sub-component through the second configuration operation: During the component startup phase, the display structure (header), data storage (queue), pagination logic (page information), and interaction entry point (selection button) of the list are uniformly configured, providing a standardized basic framework for subsequent user operations. Pre-defined rules avoid confusion in list display and interaction (such as mismatch between headers and data fields, pagination logic conflicts, etc.); configuration is centralized in the initialization phase, reducing dynamic calculations during real-time interaction and improving component response efficiency; and the data storage format is unified, laying a foundation for data consistency for synchronous interaction between the left and right lists (such as selection and deletion).

[0051] It should be noted that the second configuration operation is the initialization setting of the first list sub-component. The first list sub-component is used to store the current list data information on the left side of the component. It is an empty queue by default. The pagination information of the first list sub-component is used to display the pagination status of the current left list. The parameters include: page: the current page number displayed, default 1; total: the total number of data in the left list, default 0; pageSize: the number of data displayed per page, default 50. The configuration items also include IDKey (the unique identifier attribute name of the left list data), which is used to accurately match the corresponding data in the left and right lists in scenarios such as deleting data in the right list and turning pages in the left list (e.g., identifying selected data by IDKey after turning pages and retaining the checked state), ensuring the accuracy of data linkage. The upper-level component passes the configuration by calling the display method. The configuration items include Option and leftColumn. The Option configuration item defines the interface request information of the left list data (such as interface address and request parameters), which determines the account and role information that the first list queue can obtain. The leftColumn configuration item is used to define the rendering and display rules of the first list data.

[0052] Specifically, the `leftColumn` configuration sets the column structure of the left-side list, primarily used to store the table header and some configuration information for rendering the column. This queue's data is mainly retrieved from the initialization information, and its attribute configuration information conforms to currently popular list attribute configurations; it is empty by default. When the upper-level component passes the `leftColumn` configuration item containing relevant header fields and rendering rules, the first list sub-component will automatically render the column structure of the left-side list according to this configuration, ensuring that the header accurately matches the account and role data fields returned by the API. Meanwhile, the API request information and pagination parameters specified in the `Option` configuration item will be retrieved from the backend in a standardized manner during component initialization and pagination switching by calling data retrieval methods (such as the `getData` method), avoiding data corruption caused by inconsistent API call rules.

[0053] In this embodiment of the application, before identifying the interactive operation of the component view layer, the method further includes: obtaining the user's third configuration operation for the second list sub-component; responding to the third configuration operation, configuring at least one of the following: a selection identifier, second header information, a second list queue, and a delete button for element configuration information, wherein the second list queue is used to store account information of the element configuration information selected from the first list sub-component, and the configuration parameters of the delete button include the button size and the deletion operation to be performed after the button is triggered, and the state of the selected button in the first list queue is updated synchronously.

[0054] It is understood that the embodiments of this application achieve precise initialization and preset interaction logic for the second list sub-components through the third configuration operation. This ensures clear rules for the display and interaction of the right-side list, guarantees consistency in the data linkage between the left and right lists, and pre-configures the function and style of the delete button, laying the foundation for subsequent deletion and other interactive operations.

[0055] It should be noted that the third configuration operation is the behavior for initializing the rows of the second list sub-component. The second list sub-component is used to store the current list data information on the right side of the component, and is an empty queue by default. The upper-level component passes in the configuration by calling the display method. The configuration items include rightColumn (the right list column configuration, which specifies the rendering and display of the right list) and defaultList (setting the default display data on the right side), etc.

[0056] Specifically, the `defaultList` configuration item passed in from the upper-level component is directly assigned to the right-side list queue as the default selected number for the right-side list. During component initialization, the right-side list directly displays this data, and the corresponding data in the left-side list automatically synchronizes its selection status (based on IDKey matching). The `rightColumn` configuration defines the right-side list operation column configuration, mainly used to store header and rendering configuration information for this column. This queue data mainly includes the queue of headers retrieved from the left-side list in the initialization information and the configuration of the custom operation column. Its attribute configuration information conforms to currently popular list attribute configurations, and by default only includes the operation column configuration. Its core function is the delete operation; each data item in the right-side list has a delete function, which can delete the currently selected data. The execution scenario for this function is: after executing the delete operation, the corresponding selected data in the left-side list will be deselected and become unselected. The configuration items for the operation column are as follows: Key:'opt', / / Identifier of the operation column; width:60, / / Width of the operation column in the list; align:'center', / / Each operation item in the operation column is centered; cellRenderer:({rowData})=>h( / / Clicking the delete button in the operation column will trigger the custom Delete method; ElButton,{onClick:()=>{Delete(rowData)},icon:deleteCirIcon})}

[0057] In this embodiment of the application, before identifying the interactive operation of the component view layer, the method further includes: obtaining the user's fourth configuration operation for the data interface; responding to the fourth configuration operation and configuring the data interface, wherein the configuration parameters of the data interface include at least one of the interface request address, the interface request method, and the interface request input parameters.

[0058] It is understood that the embodiments of this application realize the pre-standardization definition of data interface request rules through the fourth configuration operation, unify the data interaction specifications between components and the backend, and avoid data acquisition failure or disorder due to inconsistent interface addresses, request methods or parameter formats; at the same time, the interface configuration is concentrated in the initialization stage, providing a stable request basis for data updates in subsequent component initialization, pagination changes and other scenarios, thereby improving the reliability and efficiency of component data interaction.

[0059] It should be noted that the fourth configuration operation is the initialization configuration behavior for the data interface request information of the left list. The upper-level component completes this operation by passing in the Option configuration item. The interface configuration information in the Option will be directly assigned to the left list interface request information defined in the component, becoming the core rule for all subsequent data requests.

[0060] Specifically, the component defines the interface request information for the left-side list. This information is used to initialize the component and retrieve data from the backend interface. When the pagination changes, the component also retrieves new data through the interface request information. This configuration information conforms to common axios interface request configurations. The main parameters include: url: the interface request address for the left-side list data; Method: the interface request method, which defaults to 'get'; Params: the interface request parameters, which default to pagination information, i.e., Params:{page:1,pageSize:50}.

[0061] In this embodiment of the application, before identifying the interactive operation of the component view layer, the method further includes: obtaining the user's fifth configuration operation for the display method of the component view layer, wherein the display method of the component view layer is exposed to the upper-level component, and the upper-level component calls the display method to display the component view layer; responding to the fifth configuration operation, configuring the display method of the component view layer, wherein the configuration parameters of the display method include the field name of the search condition parameter, the attribute of the account information of the element configuration information, the configuration information when the data interface is called, the configuration information of the columns in the first list sub-component, the configuration information of the columns in the second list sub-component, and the default configuration information of the first list sub-component and the second list sub-component, wherein the default configuration information is that the first list sub-component and the second list sub-component are empty queues.

[0062] It is understood that the embodiments of this application achieve a unified pre-definition of the display rules for the component view layer through the fifth configuration operation. This operation centrally manages the display elements of the view layer (such as search box display, list structure, initial data, etc.) through configuration, which not only ensures the standardization of component view display and avoids user experience problems caused by chaotic display rules, but also reduces the dynamic logic during real-time rendering through preset configuration, improves the stability of components in massive data scenarios (solving the page freezing problem), and enhances the usability and maintainability of components, meeting diverse configuration needs.

[0063] It should be noted that the fifth configuration operation is the initialization configuration behavior of the component's view layer display logic. It is implemented through the display methods exposed by the component. The upper-level component calls the display method and passes in the configuration parameters to complete the definition of the view layer display rules, providing a foundation for subsequent view rendering and interaction.

[0064] Specifically, the fifth configuration operation achieves the construction of the component view layer from "blank" to "interface that meets business requirements" through three steps: "configuration predefinition → method triggering → view rendering". The specific steps are as follows:

[0065] (1) Predefined configuration: The upper-level component sorts out the display rules required by the component view layer according to the requirements and passes the configuration parameters through the display method. The configuration parameters of the display method include the field name of the search condition parameter, the attribute of the account information of the element configuration information, the configuration information when the data interface is called, the configuration information of the columns in the first list sub-component, the configuration information of the columns in the second list sub-component, and the default configuration information of the first list sub-component and the second list sub-component. The default configuration information is that the first list sub-component and the second list sub-component are empty queues.

[0066] (2) Method Trigger: When the upper-level component calls the display method, the response logic of the fifth configuration operation is triggered inside the component. The passed configuration information is associated and mapped to the corresponding component.

[0067] (3) View rendering: Based on the configuration parameters, the component view layer completes the rendering.

[0068] This design allows the components (search box, list structure) and displayed information (account data, default selection) in the component view layer to be completely driven by the upper-level configuration. This ensures component reusability (different business scenarios can be modified by changing the configuration) and avoids logical conflicts in real-time rendering through pre-definition, making complex list data interactions more controllable.

[0069] In step S202, in response to the interactive operation, a target operation is performed on at least one of the search box subcomponent, the first list subcomponent, and the second list subcomponent, wherein the target operation includes at least one of the following: a search operation, a selection operation, a page turning operation, and a deletion operation.

[0070] It is understood that the embodiments of this application can respond to recognized interactive operations and perform target operations such as searching, selecting, paginating, and deleting on the search box and the first / second list sub-components. This achieves a direct association between user operations and component behaviors, translating interactive commands into specific functional actions. By providing feedback, the perception of the correspondence between operations and results is strengthened, improving interaction efficiency.

[0071] Specifically, the data control layer defines deletion methods (such as the `select` method), which are triggered when the left-hand list is checked, i.e., when the selection button of the first list sub-component is targeted, this method is triggered. The data control layer also defines deletion methods that are called when the delete button in the operation column of the right-hand list is clicked, i.e., when the delete button of the second list sub-component is targeted, this method is triggered. The data control layer defines page switching methods (such as the `pageChange` method), which are triggered when different page numbers are clicked at the bottom of the left-hand list, i.e., when the page button of the first list sub-component is targeted, this method is triggered. Finally, the data control layer defines data retrieval methods that trigger a new API request when the user searches, i.e., when the search box sub-component is targeted, this method is triggered.

[0072] In step S203, if the target operation is a selection operation and a deletion operation, the first list sub-component displayed in the first view and the second list sub-component displayed in the second view are updated synchronously.

[0073] Specifically, when the selection button in the first list sub-component changes from the first state to the second state, the selected element configuration information is added to the second list sub-component; when the selection button changes from the second state to the first state, the selected element configuration information is deleted from the second list sub-component; when the delete button in the second list sub-component is triggered to perform a delete operation, the first list sub-component is updated synchronously.

[0074] Understandably, the selection button serves both selection and deletion functions: state switching directly synchronizes with the data in the second list; while the delete button in the second list is responsible for deletion, triggering the removal of the corresponding data and synchronization of the states on both sides. Although the two operation entry points are different, both ensure consistency between the selected state in the first list and the selected data in the second list by synchronously updating the states on both sides. This achieves a two-way closed loop of "select → add" and "delete → deselect," automatically synchronizing the state on the other side regardless of whether the user operates on the left or right side, further enhancing the consistency and fault tolerance of component interaction (for example, if a user accidentally deletes data on the right, the left side will automatically deselect, requiring no manual operation).

[0075] Specifically, when the system detects a checkmark operation, i.e., the user clicks the select button in the left list and triggers a selection method (such as the select method), this method checks whether the data exists in the queue of the right list based on the checked data. If it does not exist, the checked data is added to the queue of the right list. If it already exists (i.e., the user clicks the checkmark again on the already selected data, which is actually deselecting it), the left list removes the selected status of the data, and the right list removes the data. When the system detects a delete operation, i.e., the user clicks the delete button in the right list and triggers a delete method, this method removes the data from the queue of the right list based on the passed data, and updates the checkmark status of the corresponding data in the left list.

[0076] In step S204, if the target operation is a search operation and a page-turning operation, new element configuration information is obtained from the pre-configured data interface, the new element configuration information is rendered, and the first list sub-component displayed in the first view is updated according to the rendered new element configuration information. During the search operation and page-turning operation, the second list sub-component displayed in the second view remains unchanged.

[0077] Understandably, the search and pagination operations retrieve new data from a pre-configured data interface and update the display of the first list sub-component on the left, while keeping the selected data and state of the second list sub-component on the right unchanged. This ensures that searching / pagination does not affect the interactive state of the selected data. There's no need to reselect selected data for searching / pagination, making it suitable for scenarios with large amounts of data requiring multiple filtering steps, and reducing unnecessary operations.

[0078] It should be noted that the data control layer defines a method to retrieve selected data (such as the getSelect method) to provide the selected data on the right to the upper-level components. This method is exposed to the upper-level components, which can call this method at any time to retrieve the queue of selected data in the current right-hand list. "Pre-configured data interface" refers to a fixed interface that is set during the component initialization phase (such as the configuration information Option required when passing the interface request for data from the left-hand list through the display method) to retrieve data from the left-hand list. Its parameters and rules are defined in advance, and its parameters, rules, implementation methods, etc. are not specifically limited.

[0079] Specifically, when the system detects a user's target action on a pagination button (e.g., clicking the "2" page button), it triggers a page switching method. This method first updates the pagination information in the left-hand list, synchronizing the current page number with the target page number clicked by the user. Then, based on the updated pagination parameters, it calls the data retrieval method to re-initiate the interface request. Upon receiving the pagination parameters from the page switching method, the data retrieval method sends a data request to the backend according to the pre-configured data interface to retrieve the data from the left-hand list and assigns the data to the left-hand list queue, ultimately achieving coordinated updates between the left-hand list data and pagination information after a page turn. When the system detects a user's target action on the search sub-component, it triggers an update of the search condition parameters (binding the user's input with the search condition's field name SearchKey to form complete query parameters). Then, it calls the data retrieval method, using the pre-configured data interface as the request parameter to initiate an interface request. After the interface returns left-hand list data matching the search conditions, the data retrieval method assigns the new data to the left-hand list queue. Whether it's a search or pagination operation, the data update logic only applies to the left list queue and does not involve any modification to the right list queue. Therefore, the right list queue can always remain unchanged, preventing the loss of selected data due to filtering or pagination.

[0080] The shuttle component interaction method proposed in this application decouples view rendering and data processing logic by designing a layered component view layer and data control layer. This alleviates problems such as page freezing and operation delays caused by the pressure of rendering massive amounts of data. At the same time, it accurately identifies interactive operations such as selection and search and responds differently: when selecting / deleting, the lists on both sides are updated simultaneously to ensure data consistency; when searching / page turning, only the left list is updated, while the selected state on the right is retained. This simplifies the interaction process, avoids repetitive operations, reduces unnecessary data rendering and requests, further reduces operation delay, effectively improves data filtering efficiency and user experience, and provides a reliable solution for multi-scenario data selection interaction.

[0081] Figure 3 This is a flowchart illustrating the component data rendering provided in the embodiments of this application. For example... Figure 3 As shown, the specific steps are as follows:

[0082] In step one, the upper-level component passes in initialization data according to the display method exposed by the custom component. Corresponding to the "pre-interaction configuration", such as the five configuration operations before method step S201, the upper-level component passes configuration (SearchKey, IDKey, Option, etc.) through the display method to prepare data for component rendering.

[0083] In step two, the initialization data passed from the upper layer is obtained through a custom display method, and default values ​​are set. Its function is to receive the configuration from step one, initialize the component's internal data (left queue, right queue, pagination information, etc.), process configuration items and complete default values ​​(e.g., setting an empty queue when defaultList is empty) according to the corresponding display method logic.

[0084] In step three, the left-hand selection list is requested according to the interface configuration in the configuration information. The data retrieval method is called, and a request is sent using the interface configuration in the Option to pull the data from the left-hand list, preparing for rendering.

[0085] In step four, initialize the left and right list headers, search criteria, and other information. Configure the headers using the `leftColumn` and `rightColumn` passed in by the display method; control the display of the search box using `SearchKey`, corresponding to the view layer rule definition in "Fifth Configuration Operation".

[0086] In step five, the left and right lists, pagination components, search box components, and other information are rendered based on the initialization information. Based on the data / configuration prepared in steps three and four, the component view layer (search box, left and right lists, pagination buttons, etc.) is rendered to provide an interface for user interaction (corresponding to the operation recognition in method step S201).

[0087] In step six, once the component rendering is complete, users can update the data in the right-hand list through component interaction operations (selection / pagination / deletion, etc.). User-triggered interactions (clicking checkmarks, pagination, deletion buttons, etc.) are identified, responded to, and data is synchronized accordingly. Checking triggers the selection method; pagination triggers the page switching method; deletion triggers the deletion method, etc., updating the right-hand queue / left-hand state.

[0088] In step seven, the upper-layer component retrieves the selected data queue from the right-hand list at any time using the "Retrieve Selected" method exposed by the custom component. After the interaction is complete, the upper layer retrieves the final selected data using the "Retrieve Selected" method, thus achieving a closed loop of "operation-result-business application".

[0089] The entire flowchart covers the complete chain of "pre-configuration → view rendering → interaction recognition and response → result output".

[0090] In summary, the shuttle frame component interaction method of this application embodiment has the following beneficial effects:

[0091] 1) Solved the problem of page freezing caused by rendering large amounts of data.

[0092] 2) It maintains the ease of use and maintainability of the components.

[0093] 3) It meets the diverse configuration requirements of the shuttle box component in front-end development.

[0094] 4) Defined the layout style of the shuttle box component, including left and right lists, pagination module, and search box module, to achieve left and right side layout, reducing the maintenance cost of the same component in the later stage.

[0095] 5) A method for data interaction in the shuttle box was defined, which achieved synchronization of selected data on both sides by controlling the data in the left and right lists.

[0096] 6) The component is initialized with a custom display method and the selected data is retrieved using the selected method, which improves the component's usage logic.

[0097] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods according to the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method.

[0098] Figure 4 This is a schematic diagram of the structure of the shuttle frame component interaction device provided in the embodiments of this application. This device is applied to the data control layer of the above-described shuttle frame component interaction method, such as... Figure 4 As shown, the shuttle frame component interaction device 40 includes: an identification module 401, a response module 402, a first update module 403, and a second update module 404.

[0099] The system includes: an identification module 401 for identifying interactive operations in the component view layer; a response module 402 for responding to interactive operations and performing a target operation on at least one of the search box sub-component, the first list sub-component, and the second list sub-component, wherein the target operation includes at least one of a search operation, a selection operation, a pagination operation, and a deletion operation; a first update module 403 for synchronously updating the first list sub-component displayed in the first view and the second list sub-component displayed in the second view if the target operation is a selection operation or a deletion operation; and a second update module 404 for obtaining new element configuration information from a pre-configured data interface, rendering the new element configuration information, updating the first list sub-component displayed in the first view according to the rendered new element configuration information, and keeping the second list sub-component displayed in the second view unchanged during the search operation and the pagination operation.

[0100] Optionally, the search box sub-component includes a search box and a search button, wherein the search box contains the search text corresponding to the search operation, and the search button performs the search operation based on the search text.

[0101] Optionally, before recognizing the interactive operation of the component view layer, a first configuration operation module is further included, which is used to obtain the user's first configuration operation for the search box sub-component; in response to the first configuration operation, configure the search condition parameters of the search box component, wherein the search condition parameters are configured to call the data interface during the query to query the element configuration information that meets the search conditions from the first list sub-component.

[0102] Optionally, the first list sub-component includes first list header information, a first list queue, page information, a page button, and a selection button for element configuration information. The first list header information includes at least one account header and a role header for the element configuration information. The first list queue includes account information and role information for the element configuration information. The page information includes the number of elements to be displayed and the page number on the page button. The page button performs a page turning operation on the first list queue, and the selection button performs a selection operation and a deletion operation on the first list queue.

[0103] Optionally, the selection button has a first state and a second state, wherein the first state is displayed when the selection button is not selected, and the second state is displayed when the selection button is selected.

[0104] Optionally, the first update module 403 is further configured to: add the selected element configuration information to the second list sub-component when the selection button changes from the first state to the second state, and delete the selected element configuration information from the second list sub-component when the selection button changes from the second state to the first state.

[0105] Optionally, the second configuration operation module is used to obtain the user's second configuration operation for the first list sub-component before recognizing the interactive operation of the component view layer; in response to the second configuration operation, configure at least one of the first header information, the first list queue, page information, page button, and selection button, wherein the first list queue is used to store the account information and role information of the element configuration information, the configuration parameters of the page information include the number of element configuration information displayed in the first list queue, the page number on the page button, and the number of element configuration information displayed on the current page, and the selection button saves the account information and account header of the selected element configuration information to the second list sub-component.

[0106] Optionally, the second list sub-component includes a selection identifier, second list header information, a second list queue, and a delete button for element configuration information. The selection identifier is used to indicate the selected state of element configuration information in the second view. The second list header information includes the account header of the element configuration information. The second list queue includes the account information of the element configuration information selected from the first list sub-component. The delete button performs a deletion operation on the second list queue.

[0107] Optionally, the third configuration operation module is used to obtain the user's third configuration operation for the second list sub-component before recognizing the interactive operation of the component view layer; in response to the third configuration operation, configure at least one of the following: selection identifier, second header information, second list queue, and delete button for element configuration information. The second list queue is used to store the account information of the element configuration information selected from the first list sub-component. The configuration parameters of the delete button include the button size and the deletion operation to be performed after the button is triggered, and the state of the selected button in the first list queue is updated synchronously.

[0108] Optionally, the fourth configuration operation module obtains the user's fourth configuration operation for the data interface before recognizing the interactive operation of the component view layer; in response to the fourth configuration operation, it configures the data interface, wherein the configuration parameters of the data interface include at least one of the interface request address, the interface request method, and the interface request input parameters.

[0109] Optionally, the fifth configuration operation module is used to obtain the user's fifth configuration operation for the display method of the component view layer before recognizing the interaction operation of the component view layer. The display method of the component view layer is exposed to the upper-level component, and the upper-level component calls the display method to display the component view layer. In response to the fifth configuration operation, the display method of the component view layer is configured. The configuration parameters of the display method include the field name of the search condition parameter, the attribute of the account information of the element configuration information, the configuration information when the data interface is called, the configuration information of the columns in the first list sub-component, the configuration information of the columns in the second list sub-component, and the default configuration information of the first list sub-component and the second list sub-component. The default configuration information is that the first list sub-component and the second list sub-component are empty queues.

[0110] For a description of the features applied to the above-mentioned shuttle frame component interaction device in the corresponding embodiment, please refer to the relevant description of the corresponding embodiment of the shuttle frame component interaction method, which will not be repeated here.

[0111] The shuttle frame component interaction device of this application decouples view rendering and data processing logic by designing a layered component view layer and a data control layer. This alleviates problems such as page freezing and operation delays caused by the pressure of rendering massive amounts of data. At the same time, it accurately identifies interactive operations such as selection and search and responds differently: when selecting / deleting, the lists on both sides are updated simultaneously to ensure data consistency; when searching / page turning, only the left list is updated, while the selected state on the right is retained. This simplifies the interaction process, avoids repetitive operations, reduces unnecessary data rendering and requests, further reduces operation delay, effectively improves data filtering efficiency and user experience, and provides a reliable solution for data selection interaction in multiple scenarios.

[0112] Figure 5 A schematic diagram of the structure of an electronic device provided in an embodiment of this application. The electronic device may include:

[0113] The memory 501, the processor 502, and the computer program stored on the memory 501 and capable of running on the processor 502.

[0114] When the processor 502 executes the program, it implements the shuttleless component interaction method provided in the above embodiments.

[0115] Furthermore, electronic devices also include:

[0116] Communication interface 503 is used for communication between memory 501 and processor 502.

[0117] The memory 501 is used to store computer programs that can run on the processor 502.

[0118] The memory 501 may include high-speed RAM (Random Access Memory) memory, and may also include non-volatile memory, such as at least one disk storage device.

[0119] If the memory 501, processor 502, and communication interface 503 are implemented independently, then the communication interface 503, memory 501, and processor 502 can be interconnected via a bus to complete communication between them. The bus can be an ISA (Industry Standard Architecture) bus, a PCI (Peripheral Component Interconnect) bus, or an EISA (Extended Industry Standard Architecture) bus, etc. The bus can be divided into address bus, data bus, control bus, etc. For ease of representation, Figure 5 The bus is represented by a single thick line, but this does not mean that there is only one bus or one type of bus.

[0120] Optionally, in a specific implementation, if the memory 501, processor 502, and communication interface 503 are integrated on a single chip, then the memory 501, processor 502, and communication interface 503 can communicate with each other through an internal interface.

[0121] Processor 502 may be a CPU (Central Processing Unit), an ASIC (Application Specific Integrated Circuit), or one or more integrated circuits configured to implement embodiments of this application.

[0122] Embodiments of this application also provide a computer-readable storage medium storing a computer program, wherein the computer program is configured to execute the steps in the above-described embodiments of the shuttle component interaction method at runtime.

[0123] This application also provides a computer program product, including a computer program or instructions, characterized in that, when the computer program or instructions are executed, they implement the above-described shuttle component interaction method.

[0124] In one exemplary embodiment, the aforementioned computer-readable storage medium may include, but is not limited to, various media capable of storing computer programs, such as a USB flash drive, read-only memory (ROM), random access memory (RAM), portable hard disk, magnetic disk, or optical disk.

[0125] Those skilled in the art will further recognize that the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of both. To clearly illustrate the interchangeability of hardware and software, the components and steps of the various examples have been generally described in terms of functionality in the foregoing description. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0126] The foregoing has provided a detailed description of the shuttle frame component interaction method and electronic device provided in this application. Specific examples have been used to illustrate the principles and implementation methods of this application. The descriptions of the above embodiments are only intended to help understand the method and core ideas of this application. It should be noted that those skilled in the art can make various improvements and modifications to this application without departing from its principles, and these improvements and modifications also fall within the protection scope of the claims of this application.

Claims

1. A method of shuttle frame assembly interaction, characterized in that, The shuttle frame component includes a component view layer and a data control layer, the component view layer includes a layout view frame, a search box subcomponent, a first list subcomponent and a second list subcomponent, the layout view frame is divided into a first view and a second view, the search box subcomponent and the first list subcomponent are displayed in the first view, the first list subcomponent includes paginated element configuration information, the second list subcomponent is displayed in the second view, the component view layer renders the search box subcomponent, the first list subcomponent and the second list subcomponent, receives user operations, and displays the results processed by the data control layer; The data control layer identifies user operations from the view layer, performs data processing and state maintenance, and returns the processed data to the view layer to update and display, and the data control layer is configured to perform the following steps: Identifying the interactive operation of the component view layer, before identifying the interactive operation of the component view layer, further comprising: obtaining a fifth configuration operation of a user on a display method of the component view layer, wherein the display method of the component view layer is exposed to an upper layer component, and the upper layer component calls the display method to display the component view layer; in response to the fifth configuration operation, configuring the display method of the component view layer, wherein the configuration parameters of the display method include the field name of the search condition parameter, the attribute of the account information of the element configuration information, the configuration information when the data interface is called, the configuration information of the column in the first list subcomponent, the configuration information of the column in the second list subcomponent, and the default configuration information of the first list subcomponent and the second list subcomponent, and the default configuration information is an empty queue of the first list subcomponent and the second list subcomponent; In response to the interactive operation, performing a target operation on at least one of the search box subcomponent, the first list subcomponent and the second list subcomponent, wherein the target operation includes at least one of a search operation, a selection operation, a page turning operation and a deletion operation; If the target operation is the selection operation and the deletion operation, the first list subcomponent displayed in the first view and the second list subcomponent displayed in the second view are updated synchronously, wherein the first list subcomponent includes a selection button of the element configuration information, the second list subcomponent includes a deletion button of the element configuration information, the selection button performs the selection operation and the deletion operation of the first list queue, the deletion button performs the deletion operation of the second list queue, the selection button has a first state and a second state, the first state is displayed when the selection button is not selected, the second state is displayed when the selection button is selected, when the selection button changes from the first state to the second state, the element configuration information that has been selected is added in the second list subcomponent, when the selection button changes from the second state to the first state, the element configuration information that has been selected is deleted in the second list subcomponent, and the deletion button in the second list subcomponent is triggered to perform the deletion operation, and the first list subcomponent is updated synchronously. If the target operation is a search operation and the page turning operation, new element configuration information is obtained from a pre-configured data interface, the new element configuration information is rendered, the first list subcomponent displayed in the first view is updated according to the rendered new element configuration information, the second list subcomponent displayed in the second view is kept unchanged during the search operation and the page turning operation, the search operation and the page turning operation both act on the first list subcomponent and do not affect the content display of the second list subcomponent, wherein when the target operation of the user on the page button is identified, a page switching method is triggered, the page switching method updates the paging information of the left list, synchronizes the current page number to the target page number clicked by the user, based on the updated paging parameter, a data obtaining method is called to reinitiate an interface request, the data obtaining method initiates a data request to the background according to the paging parameter passed by the page switching method in a pre-configured data interface to obtain the data of the first list subcomponent, and assigns the data to the first list subcomponent, so as to realize the cooperative update of the data of the first list subcomponent and the paging information after the page turning operation.

2. The shuttle frame assembly interaction method of claim 1, wherein, The search box subcomponent includes a search box and a search button, wherein the search text corresponding to the search operation is input in the search box, and the search button executes the search operation based on the search text.

3. The shuttle frame assembly interaction method of claim 1 or 2, wherein, Before identifying the interactive operation of the component view layer, the method further includes: obtaining a first configuration operation of the user on the search box subcomponent; in response to the first configuration operation, configuring a search condition parameter of the search box subcomponent, wherein the search condition parameter is configured to query the element configuration information in the first list subcomponent that meets the search condition when the data interface is called.

4. The shuttle frame assembly interaction method of claim 1, wherein, The first list subcomponent includes first header information, a first list queue, page information and a page button, wherein the first header information includes at least one of an account header and a role header of the element configuration information, the first list queue includes account information and role information of the element configuration information, the page information includes a display quantity of the element configuration information and a page number on the page button, and the page button executes the page turning operation of the first list queue.

5. The shuttle frame assembly interaction method of claim 4, wherein, Before identifying the interactive operation of the component view layer, the method further includes: obtaining a second configuration operation of the user on the first list subcomponent; in response to the second configuration operation, configuring at least one of the first header information, the first list queue, the page information, the page button and the selection button, wherein the first list queue is used to store the account information and the role information of the element configuration information, the configuration parameter of the page information includes the display quantity of the element configuration information in the first list queue, the page number on the page button and the display quantity of the element configuration information in the current page, and the selection button saves the selected account information and account header of the element configuration information to the second list subcomponent.

6. The shuttle tray assembly interaction method of claim 1, wherein, The second list sub-component includes a selection identifier, second table header information, and a second list queue, wherein the selection identifier is used to identify the selected state of the element configuration information in the second view, the second table header information includes the account table header of the element configuration information, and the second list queue includes the account information of the element configuration information selected from the first list sub-component.

7. The shuttle frame assembly interaction method of claim 6, wherein, Before identifying the interactive operation of the component view layer, further comprising: obtaining a third configuration operation of the user on the second list sub-component; in response to the third configuration operation, configuring at least one of the selection identifier, the second table header information, the second list queue, and a delete button of the element configuration information, wherein the second list queue is used to store the account information of the element configuration information selected from the first list sub-component, the configuration parameters of the delete button include the button size and the execution of the delete operation after the button is triggered, and the state of the selected button in the first list queue is synchronously updated.

8. The shuttle tray assembly interaction method of claim 1, wherein, Before identifying the interactive operation of the component view layer, further comprising: obtaining a fourth configuration operation of the user on the data interface; in response to the fourth configuration operation, configuring the data interface, wherein the configuration parameters of the data interface include at least one of the interface request address, the interface request method, and the interface request input parameter.

9. An electronic device, comprising: comprising: a memory for storing a computer program; a processor for executing the computer program to implement the steps of the shuttle frame component interaction method of any one of claims 1 to 8.

Images