Visual editing method and visual editing system

Abstract

The invention provides a visual editing method and system, and the method comprises the steps: obtaining position information corresponding to an interaction operation in response to the interaction operation for a to-be-edited control region in a to-be-edited template; judging whether the position information is located in a preset response range of any plug-in control associated with the to-be-edited control area or not; if yes, determining the plug-in control as a target plug-in control, and loading current data corresponding to the target plug-in control in the to-be-edited control area to the target plug-in control; obtaining editing content input in the target plug-in control by the user; the editing content is generated after the user modifies the current data; and in response to an editing completion operation, visually displaying the editing content in the to-be-edited control region based on an association relationship between the to-be-edited control region and the plug-in control. In the mode, the user can directly perform visual editing on the template interface, so that the editing efficiency and the interaction process are improved.

Description

Technical Field

[0001] This application relates to the field of Internet information technology, and in particular to a visual editing method and a visual editing system. Background Technology

[0002] In clinical information systems, various structured forms related to surgery, such as anesthesia forms, preoperative assessment forms, and surgical record forms, are widely used to record various medical information of patients during surgery. Doctors need to enter data such as vital signs, medication use, and diagnostic conclusions in real time during surgery or before and after surgery, which places high demands on the system's editing efficiency and user experience.

[0003] Existing editing systems mostly adopt a pop-up interactive structure, requiring users to click on template elements to enter an independent interface for editing, resulting in fragmented editing paths and complex operations; controls and template controls are only roughly bound by coordinates, which cannot adapt to dynamic needs such as template scaling and view adjustment; in addition, most systems lack control linkage mechanisms and dynamic adaptation capabilities between data and control types, affecting editing consistency and template scalability. Summary of the Invention

[0004] In view of this, the purpose of this application is to provide a visual editing method and a visual editing system that allows users to perform visual editing directly on the template interface, thereby improving editing efficiency and the flow of interaction.

[0005] In a first aspect, the present invention provides a visual editing method, comprising: in response to an interactive operation on an area of ​​a control to be edited in a template to be edited, obtaining position information corresponding to the interactive operation; determining whether the position information is within a preset response range of any external control associated with the area of ​​the control to be edited; if so, determining the external control as a target external control, and loading the current data corresponding to the target external control in the area of ​​the control to be edited into the target external control; obtaining the edited content entered by the user in the target external control; the edited content being generated after the user modifies the current data; and in response to an editing completion operation, visually displaying the edited content in the area of ​​the control to be edited based on the association between the area of ​​the control to be edited and the external control.

[0006] In an optional implementation, the location information includes the location coordinates corresponding to the interactive operation; the step of determining whether the location information is within the preset response range of any external control associated with the control area to be edited includes: determining the preset response range corresponding to each external control associated with the control area to be edited based on the association relationship between the control area to be edited and the external control; traversing each preset response range and determining whether the location coordinates are within any preset response range.

[0007] In an optional implementation, the step of loading the current data corresponding to the target plugin control in the control area to be edited includes: setting the target plugin control to an editable state and setting other plugin controls to a non-editable state; wherein, the other plugin controls are plugin controls associated with the control area to be edited, excluding the target plugin control; determining the identification information of the template control corresponding to the target plugin control based on the association relationship between the control area to be edited and the plugin controls; extracting the corresponding data value from a preset database based on the identification information; formatting the data value according to the control type of the target plugin control; and loading the formatted data value into the target plugin control.

[0008] In an optional implementation, before the step of visually displaying the edited content in the editable control area based on the association between the control area to be edited and the external control, the method further includes: determining the data saving method corresponding to the edited content based on the control value type of the target external control and the preset data saving rules; determining the target identification information of the template control corresponding to the target external control based on the association between the control area to be edited and the external control; and associating and saving the edited content and the target identification information to a preset database according to the data saving rules.

[0009] In optional implementations, the preset data saving rules include at least one of the following: if the control value type is a string, the edited content is saved to a preset database; if the control value type is a date, the edited content is formatted for date and the formatted edited content is saved to a preset database; if the control value type is a number, the edited content is validated for numerical validity and the edited content that passes the validity validation is saved to a preset database; if the control value type is an enumeration, the enumeration code corresponding to the edited content is extracted and the enumeration code is saved to a preset database.

[0010] In an optional implementation, the step of visually displaying the edited content in the editable control area based on the association between the control area to be edited and the external control includes: setting the target external control to an uneditable state; extracting the corresponding edited content from a preset database according to the target identification information and converting the format of the edited content; and calling a preset refresh interface to load the converted edited content into the template control to update the display content of the control area to be edited.

[0011] In an optional implementation, the step of obtaining the edited content entered by the user in the target plug-in control further includes: if there is a preset linkage relationship between the target plug-in control and another plug-in control, then when the edited content of the target plug-in control is updated, the state of the other plug-in control is updated according to the linkage relationship.

[0012] In an optional implementation, the association between the editable control area and the external control is pre-set in the following manner: The editing attributes of the editable control area corresponding to each preset template in the preset template library are obtained; the editable control area includes at least one template control; the editing attributes include the control type, control coordinates, and control size corresponding to each template control; wherein, the control coordinates are the page coordinates of the template control relative to the editable control area; an initial external control matching the control type is obtained from the preset external control library; the display position and initial size of the initial external control are determined based on the control coordinates and control size; wherein, the display position is calculated based on the control coordinates and a preset coordinate offset; the initial size is calculated based on the control size and a preset size offset; the initial external control is identified as the external control corresponding to the template control; an association between the external control and the editable control area is established, the association including scaling response parameters; the scaling response parameters are used to enable the external control to synchronously adjust its display position and initial size based on the scaling response parameters when the preset template is scaled.

[0013] In an optional implementation, prior to the step of responding to an interactive operation on the area of ​​the control to be edited in the template to be edited, the method further includes: obtaining the template number and the current scaling ratio sent by the user; loading the preset template corresponding to the template number from the preset template library according to the template number; determining the preset template as the template to be edited and loading the template to be edited; determining the display position and display size of all external controls in the template to be edited according to the current scaling ratio and scaling response parameters, and setting the external controls to an uneditable state.

[0014] Secondly, the present invention provides a visual editing system, comprising: an interaction response module, used to respond to an interactive operation on an area of ​​a control to be edited in a template to be edited, and to obtain position information corresponding to the interactive operation; an external control loading module, used to determine whether the position information is within a preset response range of any external control associated with the area of ​​the control to be edited; the external control loading module is further used to, if the position information is determined to be within the preset response range of any external control associated with the area of ​​the control to be edited, identify the external control as a target external control, and load the current data corresponding to the target external control in the area of ​​the control to be edited into the target external control; an editing content data module, used to obtain the editing content entered by the user in the target external control; the editing content is generated after the user modifies the current data; and an editing completion module, used to respond to an editing completion operation, and, based on the association between the area of ​​the control to be edited and the external control, to visually display the editing content in the area of ​​the control to be edited.

[0015] This application provides a visual editing method and system. By responding to user clicks on control areas in a template on a webpage, the system identifies and activates corresponding external controls, allowing users to perform visual editing directly within the template interface without needing to navigate to pop-up windows, thus improving the intuitiveness and efficiency of editing operations. By establishing a relationship between external controls and template controls, and combining control types and data value types for formatting, accurate extraction, automatic saving, and synchronous updates of edited data can be achieved, ensuring the standardization and consistency of data processing. By configuring control linkage rules and data saving rules, the system can support the validation and linked display of various data types such as enumerations, values, and dates, thereby enhancing the logical linkage and editing intelligence of the system. By introducing scaling response parameters and combining them with offset calculation methods for control coordinates and dimensions, the position and size of external controls can be dynamically adjusted when the template is scaled, ensuring consistent adaptation of controls across multiple resolutions, and thus improving the versatility and interactive stability of the entire system in various structured form scenarios.

[0016] Other features and advantages of this application will be set forth in the following description and will be apparent in part from the description or may be learned by practicing the application.

[0017] To make the above-mentioned objectives, features and advantages of this application more apparent and understandable, preferred embodiments are described below in detail with reference to the accompanying drawings. Attached Figure Description

[0018] To more clearly illustrate the technical solutions in the specific embodiments of this application or the prior art, the drawings used in the description of the specific embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of this application. For those skilled in the art, other drawings can be obtained from these drawings without creative effort.

[0019] Figure 1 A flowchart of a visual editing method provided in the embodiments of this application; Figure 2 This is a schematic diagram of an anesthesia record sheet provided in an embodiment of this application; Figure 3 This is a schematic diagram of the editing attributes of the anesthesia record sheet provided in the embodiments of this application; Figure 4 This is a schematic diagram of a single-line text editing control provided in an embodiment of this application; Figure 5 This is a schematic diagram of a multi-line text editing control provided in an embodiment of this application; Figure 6 This is a schematic diagram of a single-select drop-down box provided in an embodiment of this application; Figure 7 This is a schematic diagram of a multi-select dropdown list provided in an embodiment of this application; Figure 8 A schematic diagram of a date selector provided in an embodiment of this application; Figure 9 This is a schematic diagram of numerical input provided for an embodiment of this application; Figure 10 This is a schematic diagram illustrating the enumeration selection provided in an embodiment of this application; Figure 11 This is a schematic diagram of a custom control provided in an embodiment of this application; Figure 12 This is a schematic diagram of a visual editing system provided in an embodiment of this application.

[0020] Icons: 1-Interactive response module; 2-External control loading module; 3-Edit content data module; 4-Edit completion module. Detailed Implementation

[0021] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions 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, not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0022] To facilitate understanding of this embodiment, the embodiments of this application will be described in detail below.

[0023] Example 1: Figure 1 A flowchart illustrating the visual editing method provided in this application embodiment.

[0024] Reference Figure 1 Visual editing methods include: Step S101: In response to an interactive operation on the area of ​​the control to be edited in the template to be edited, obtain the position information corresponding to the interactive operation.

[0025] Here, the interactive operation can be a single click or double click event generated by the user using a mouse, or an input or output operation through a device such as a keyboard or touch screen; this application does not limit this. This operation is captured by a global event listener bound to the display container of the template to be edited. Once the operation occurs, the mouse coordinates (x, y) relative to the top-left corner of the display container are immediately obtained; this is the position information corresponding to the interactive operation.

[0026] The template to be edited defines multiple areas for editable controls, each containing one or more template controls. Administrators can pre-configure the editing properties of each template control.

[0027] After configuration, an initial plug-in control will be matched for each template control in the control area to be edited, and its geometric properties will be determined.

[0028] In one embodiment, the association between the area to be edited and the external control is preset through the following steps S201-S205.

[0029] Step S201: Obtain the editing attributes of the control area to be edited corresponding to each preset template in the preset template library; the control area to be edited includes at least one template control; the editing attributes include the control type, control coordinates and control size corresponding to each template control; wherein, the control coordinates are the page coordinates of the template control relative to the control area to be edited.

[0030] Here, a template to be edited is loaded from a pre-set template library. (See reference...) Figure 2 Taking the anesthesia record form as an example, the template is divided into multiple areas for editing controls. Each area contains one or more template controls, which are the logical units that the user will ultimately edit.

[0031] Define a set of edit properties for each static template control, refer to... Figure 3 Editable attributes include: 1. Control Type: Defines which UI (User Interface) component will be used to handle editing operations when the user interacts with this template control. For example, it can be set to Text (single-line text box), DateControl (date picker), or DropDownMultControl (multi-select dropdown list), etc.

[0032] 2. Control coordinates refer to the page coordinates (e.g., (x, y) values) of the template control in a 100% original view without any scaling.

[0033] 3. Control size refers to the page size (e.g., width and height values) of the template control in its original view without any scaling.

[0034] Step S202: Obtain an initial plug-in control that matches the control type from the preset plug-in control library.

[0035] Here, the pre-built plugin library stores a collection of visual editing controls corresponding to various template control types, serving as a reusable UI component library. It includes a variety of pre-developed, standardized interactive controls, such as text input boxes, dropdown menus, and date pickers.

[0036] Based on the obtained control type (e.g., "DateControl"), the system searches the preset add-on control library and instantiates a UI component (i.e., a date picker component) that exactly matches its type. This component is called the initial add-on control.

[0037] Step S203: Determine the initial display position and initial size of the external control based on the control coordinates and control size; wherein, the display position is calculated based on the control coordinates and preset coordinate offset; the initial size is calculated based on the control size and preset size offset.

[0038] Here, the display position of the add-in control is not simply aligned with the coordinates of the template control, but can be fine-tuned. The base coordinates of the template control are read, and a preset coordinate offset is applied for calculation. For example, if the top-left corner coordinates of the template control are (100, 100), an offset of 10 pixels to the left and 5 pixels upwards can set the final display position of the add-in control to (90, 95).

[0039] Control dimensions include control width and control height.

[0040] The initial width of the add-in control was set to perfectly match the width of the template control. This ensured that the edit box could perfectly cover the original data display area.

[0041] The initial height of an external control is set to a preset default value or a user-defined value, depending on its control type. For example, the default height of a single-line text box can be 30 pixels, while the height of a multi-line text box may be customizable by the user as needed.

[0042] Step S204: Determine the initial external control as the external control corresponding to the template control.

[0043] Step S205: Establish the association between the external control and the area of ​​the control to be edited. The association includes scaling response parameters. The scaling response parameters are used to make the external control synchronously adjust its display position and initial size based on the scaling response parameters when the preset template is scaled.

[0044] Here, after identifying the add-on control, the association between the add-on control and the area to be edited is established. This association is a data structure that binds a static template control to a dynamic add-on control.

[0045] The relationship includes the scaling response parameter. The scaling response parameter defines how the display position and size of the plug-in control should be automatically and synchronously adjusted when the template to be edited is scaled by the user at any ratio (e.g., 80% or 200%).

[0046] Specifically, when the template is scaled, the current scaling factor is applied to the baseline display position and baseline initial size of the external control based on a preset responsive algorithm, thereby calculating the geometric properties in the current scaled view in real time.

[0047] Finally, this complete relationship, which includes control type, geometric properties, data mapping, and scaling response mechanism, will be stored as part of the template configuration.

[0048] In one embodiment, steps S301-S304 are included before step S101.

[0049] Step S301: Obtain the template number and current scaling ratio sent by the user.

[0050] Here, when a user needs to view or edit a new or existing document, they need to determine which template to display and at what view size.

[0051] The template number is a unique identifier used to locate the target template from multiple preset templates. The template number can be a string or a database primary key ID. Users can send this template number by selecting from a list, searching, or opening their history.

[0052] The current zoom level is the percentage by which the view is expected to be enlarged or reduced. For example, 1.0 represents 100% of the original size, 1.5 represents 150% zoom, and 0.8 represents 80% zoom. This zoom level can be set manually by the user through zoom tools on the interface (such as zoom sliders or percentage selection menus), or it can be a default value automatically calculated based on the user's screen resolution or window size.

[0053] Step S302: Load the preset template corresponding to the template number from the preset template library according to the template number.

[0054] Here, upon receiving a template number, a query is performed in a pre-defined template library using that number as an index. The pre-defined template is then read from the template library into memory.

[0055] The template library can be a database, a file server, or local storage.

[0056] The preset template is a structured data object, including: 1. The basic view layer consists of static template backgrounds, tables, fixed text, etc., that are visible to the user.

[0057] 2. The metadata layer contains complete definition information for the editable control areas on the template. This information includes the unique identifier of each template control, the control type (such as a text box or date picker), the coordinates and size of the baseline control at 100% scaling, data mapping relationships, and scaling response parameters used to achieve scaling adaptation.

[0058] Step S303: Select the preset template as the template to be edited and load the template to be edited.

[0059] Here, the base view layer of the template to be edited is rendered onto the user interface to present the template.

[0060] Step S304: Based on the current scaling ratio and scaling response parameters, determine the display position and display size of all external controls in the template to be edited, and set the external controls to an uneditable state.

[0061] Here, after the static background of the template to be edited is displayed, the corresponding external controls are prepared for all editable areas on the template.

[0062] Iterate through each external control in the template to be edited, determine the reference coordinates and reference size of each external control, and calculate the geometric size of the external control using the current scaling ratio and scaling response parameters.

[0063] In a preferred embodiment, the display position can be: final display coordinates = reference coordinates × current scaling ratio + preset offset.

[0064] Similarly, the formula for calculating the display size is: Final display size = Base size × Current scaling ratio.

[0065] Based on this, the precise position and size of each external control in the current zoomed view are determined and bound to the control object in memory.

[0066] The non-editable state means that although the geometric properties and data associations of all external controls are ready, they will not be rendered as visible or interactive on the interface upon initial load. In other words, they are invisible and inoperable to the user. Technically, this can be achieved by setting the Visible property of these control objects to false.

[0067] Step S102: Determine whether the position information is within the preset response range of any external control associated with the area to be edited.

[0068] Here, when the template is loaded, the corresponding rectangular response range of each external control is calculated and stored according to its display position and size. Traverse all these pre-stored rectangular response ranges, and use the geometric judgment algorithm of a point within a rectangle to determine whether the obtained position coordinates (x, y) fall within one of these rectangular response ranges.

[0069] In one embodiment, the steps of step S102 include the following steps S401 - S402.

[0070] Step S401, based on the association relationship between the area of the control to be edited and the external control, determine the preset response range corresponding to each external control associated with the area of the control to be edited.

[0071] Preferably, the preset response range of each external control is preferably defined as a rectangular response range.

[0072] The geometric properties of this rectangular response range are calculated based on the preset association relationship when the template is loaded. In other words, based on the reference coordinates and size of the template control, combined with the current zoom ratio and the preset coordinate offset and size offset, a unique Hitbox (hot zone) for each external control that is ready to interact with the user is calculated in the current view. These calculated rectangular response ranges are stored in memory to form a list or set.

[0073] Step S402, traverse each preset response range to determine whether the position coordinates are within any of the preset response ranges.

[0074] Here, sequentially read the list of rectangular response ranges of all external controls. For each rectangular response range in the list, perform a geometric judgment of a point within a rectangle once.

[0075] Specifically, assume that a rectangular response range is defined by its upper left corner coordinates (left, top), width width, and height height, and the position coordinates of user interaction are (x, y). Then, it is determined to be a hit if and only if the following two conditions are satisfied simultaneously: Horizontal direction condition: left ≤ x < left + width; Vertical direction condition: top ≤ y < top + height.

[0076] Once the first rectangular response range that meets the above conditions is found, it can be determined that the user's current interaction operation hits the external control corresponding to this rectangular range. At this time, the traversal can be terminated immediately, and this external control is determined as the target external control. If, after traversing all rectangular response ranges, no condition - meeting range is found, it means that the user's current interaction operation occurs in the non - interaction area of the template.

[0077] Step S103: If yes, then the external control is determined as the target external control, and the current data corresponding to the target external control in the control area to be edited is loaded into the target external control.

[0078] Here, if the obtained position coordinates fall within one of the rectangular response ranges, the plugin control is identified as the target plugin control. The current data can be empty.

[0079] In one embodiment, step S103 further includes the following steps S501-S505.

[0080] Step S501: Set the target plugin control to an editable state and set other plugin controls to an uneditable state; wherein, other plugin controls are plugin controls other than the target plugin control that are associated with the area to be edited.

[0081] Here, the editable state is rendered as a visible or interactive form on the interface. Technically, this can be achieved by setting the Visible property of the target external control to true.

[0082] At the same time, in order to avoid user confusion or misoperation, it is necessary to ensure that only one plug-in control is active at any given time. All other plug-in controls other than the target plug-in control should be set to an uneditable state, that is, keep them in their initial state of being invisible and non-interactive.

[0083] Step S502: Determine the identification information of the template control corresponding to the target external control based on the association between the control area to be edited and the external control.

[0084] Here, based on the association between the area to be edited and the external control, the unique identifier of the template control bound to the current target external control is found. This identifier can be a field name in a database table (such as PATIENT_NAME).

[0085] Step S503: Based on the identification information, extract the corresponding data value from the preset database.

[0086] Here, the default database can be a relational database, a non-relational database, or a structured form data template object stored in the server's memory. The identifier information is used as the query condition or key to extract the original data values ​​from this data source.

[0087] Step S504: Format the data value according to the control type of the target plug-in control.

[0088] Here, the database might store a Boolean value (0 or 1), a long integer timestamp, or an enumerated numeric code. Therefore, the data value needs to be formatted before being loaded into the control.

[0089] Determine the type of the target plugin control and execute different formatting logic based on the type. Specifically: Date type handling: If the control type is a DateControl, the long integer timestamp or standard time string retrieved from the database will be formatted into an easy-to-read date format, such as YYYY-MM-DD.

[0090] Enumeration type handling: If the control type is a single-select dropdown (DropDownSingleControl), and the database stores enumeration codes (e.g., 1 represents "Male", 2 represents "Female"), then based on a preset dictionary, code 1 is converted to the corresponding display text "Male" to correctly display the current option in the dropdown.

[0091] Boolean type handling: If the control type is a checkbox, convert 0 or 1 in the database to a boolean value of false or true.

[0092] Step S505: Load the formatted data values ​​into the target plugin control.

[0093] Here, the formatted data value, suitable for display on the UI, is set as the current value of the target plugin control. For example, for a text input box, its value property is set; for a checkbox, its checked property is set.

[0094] Step S104: Obtain the edit content entered by the user in the target plug-in control; the edit content is generated after the user modifies the current data.

[0095] Here, users can directly operate on the visible target plugin controls, such as entering text in a text box or selecting a new option in a drop-down list.

[0096] Retrieve the final value of the control after the user's action; this is the edited content. This edited content is generated after modifying the currently loaded data.

[0097] In one embodiment, step S104 further includes: If the target plugin control has a preset linkage relationship with another plugin control, then when the edit content of the target plugin control is updated, the state of the other plugin control will be updated according to the linkage relationship.

[0098] Here, if the target plugin control has a preset linkage relationship with other plugin controls (e.g., parent-child checkbox relationship), when the user's edit content is updated, the state of the other plugin control will be automatically updated according to the linkage relationship (e.g., when the child control is checked, the parent control is automatically checked) to improve operation efficiency and ensure logical correctness.

[0099] Step S105: In response to the editing completion operation, based on the association between the control area to be edited and the external control, the edited content is visually displayed in the control area to be edited.

[0100] Here, the editing completion operation can occur when the mouse focus leaves the target plugin control, or when the user clicks anywhere else in the template. Once the editing completion operation is triggered, the target plugin control is restored to an uneditable state (even if it becomes invisible again).

[0101] Next, based on the control value type of the target plug-in control and the preset data saving rules, the data saving method corresponding to the edited content is determined.

[0102] Obtain the target identifier information associated with the control, and according to the determined data saving method, save the processed edited content and the target identifier information together to the preset database.

[0103] After the data is successfully saved to the database, a preset refresh interface is called. This interface will retrieve the newly updated value from the database and load it into the corresponding static template control on the template to update the display content of the control area to be edited.

[0104] In one embodiment, before step S105, which visualizes the edited content in the control area to be edited based on the association between the control area to be edited and the external control, the method further includes the following steps S601-S603.

[0105] Step S601: Based on the control value type of the target plug-in control and the preset data saving rules, determine the data saving method corresponding to the edited content.

[0106] In a preferred embodiment, the preset data storage rules include at least one of the following: If the value of the control is of type String, the edited content will be saved to the preset database.

[0107] Specifically, for standard text input, such as reference Figure 4 The "Name" field, edited using a single-line text editing control (Text), typically saves the user-inputted string directly to the database. (See reference...) Figure 5The "Preoperative Special Circumstances" field, edited using a multi-line text editing control (Long Text), typically saves the user-inputted string content directly to the database.

[0108] You can also use Figure 6 The single-select dropdown control and Figure 7 The DropDownMultiControl allows you to input a string.

[0109] If the control value type is Date, the edited content is formatted for date and the formatted edited content is saved to the preset database.

[0110] Specifically, refer to Figure 8 When a user selects a date (e.g., 2025-04-10) using the DateControl, the edited content will be uniformly formatted into a standard format required by the backend database (e.g., an ISO 8601 format string or a long integer timestamp) before being saved, to ensure data consistency and standardization.

[0111] If the control value type is numeric, perform numeric validity validation on the edited content, and save the edited content that passes the validity validation to the preset database.

[0112] Specifically, refer to Figure 9 For numeric input fields like "depth," a validity check is performed before saving the user's input. This includes checking whether the input is purely numeric and whether it falls within a reasonable medical value range. Only data that passes the validation is allowed to be saved.

[0113] If the control value type is an enumeration (Enum), extract the enumeration code corresponding to the edited content and save the enumeration code to the preset database.

[0114] Specifically, refer to Figure 10 For the "Surgery Type" selection, users see two options on the interface: "Elective" and "Emergency". When a user selects "Emergency", the two Chinese characters for "Emergency" are not saved. Instead, based on a preset mapping relationship, for example, if the value range corresponding to "Emergency" is "1", the corresponding enumeration code "1" is extracted and saved. This method can save storage space and improve the efficiency of subsequent data processing.

[0115] In one embodiment, reference is made to Figure 11External controls also include custom controls. If the target external control is a custom control, its data storage method is replaced by the following steps: In response to the interactive operation, a dialog box associated with a specific business type of the custom control pops up. Within the dialog box, the edited content is retrieved and data is maintained. The pre-defined programmatic business logic module corresponding to the specific business type is then invoked to save the edited content to a preset database.

[0116] Step S602: Based on the association between the control area to be edited and the external control, determine the target identifier information of the template control corresponding to the target external control.

[0117] Here, the unique target identifier information bound to the current target plug-in control is obtained based on the association relationship.

[0118] Specifically, for the "Name" control, its target identifier is configured as the NAME field in the database table; for "Surgery Date," it is the OPERATIOIN_DATE field; and for "Surgery Position," it is the complex composite entity name PostureList. For other controls, this identifier may be a globally unique element code, such as JHOIS02.01.002, used to associate it with another form data template.

[0119] Step S603: According to the data saving rules, the edited content and target identification information are associated and saved to the preset database.

[0120] Here, the processed edited content (e.g., formatted date, validated value, or extracted enumeration code) is associated with the obtained target identification information (e.g., database field name NAME).

[0121] Call a backend data storage interface or execute a database operation statement (such as the SQL UPDATE command) to write the processed edits to the database table and fields specified by the target identifier information. For example, execute UPDATE anes_record SET NAME = 'processed name content' WHERE record_id = 'current record ID'.

[0122] In one embodiment, step S105, which involves visually displaying the edited content in the area to be edited based on the association between the area to be edited and the external control, includes the following steps S701-S703.

[0123] Step S701: Set the target plugin control to an uneditable state.

[0124] Here, after the data saving operation is successfully completed, in order to restore the user interface to the read-only browsing state, the target external control is set to the non-editable state.

[0125] Step S702: Extract the corresponding edited content from the preset database according to the target identification information, and perform format conversion on the edited content.

[0126] Here, use the target identification information to send a query request to the preset database again to extract the edited content that has just been successfully saved. This can effectively avoid problems such as inconsistent interface display and backend storage caused by network latency, caching, or concurrent operations, ensuring the ultimate consistency and reliability of the data.

[0127] Among them, if the backend interface can directly return the saved data after successful saving, this database query operation in this step can be omitted, and the returned data can be directly used for subsequent refreshing.

[0128] Convert the edited content stored in the preset database into a format that can be displayed on the user interface.

[0129] For example, for the "surgery type" selection box, the enumeration code 1 is saved in the database. When refreshing the interface, extract 1 from the database, and then convert it into "emergency" that can be displayed on the user interface according to the preset dictionary table or mapping rules.

[0130] If a certain field in the database stores the boolean value true, when refreshing the interface, true can be converted into a tick icon (√) or the Chinese character "yes".

[0131] Step S703: Call the preset refresh interface to load the converted edited content into the template control to update the display content of the area of the control to be edited.

[0132] Here, call the preset refresh interface to load and render the converted edited content into the corresponding static template control on the template to be edited.

[0133] To improve the user experience, this refresh process preferably uses the partial refresh technology, only updating the display of the modified template control without refreshing the entire page.

[0134] In one embodiment, the visualization editing method provided by the embodiment of the present application further includes an exception handling method.

[0135] In multiple processing links of the visualization editing method, such as data loading, data saving, and interface refreshing, data interaction with the backend server usually needs to be carried out through the network. When the network fluctuates or the connection is interrupted, the interface call may fail.

[0136] Taking the data saving process as an example, after the user completes content editing in the target plugin and triggers the editing completion operation, the backend interface needs to be called to save the edited content to the preset database. If an exception such as network connection timeout or server unresponsiveness occurs during this process, the following measures will be taken: First, encapsulate the API call logic within an exception handling structure, such as a try-catch block. When a network request failure or timeout exception is caught, prevent the default failure behavior to avoid the program becoming unresponsive or crashing.

[0137] Secondly, provide users with error messages, such as displaying a red error icon next to the current editing control, along with the message "Save failed, please check your network connection and try again."

[0138] In addition, to prevent data loss, the edits entered by the user in the plug-in control are not immediately cleared. Instead, the control is kept active, or the edits are temporarily cached locally so that the user can manually resubmit the save request after the network is restored.

[0139] In one embodiment, during the process of sending data from the front end to the back end, or loading data from the back end to the front end, there may be situations where the data format does not match or fails to pass the business logic validation.

[0140] Specifically, a user entered an invalid text character (such as "abc") into a control configured as a numeric type. During the data saving step, the backend business logic validation failed and returned an error status code.

[0141] Upon receiving an error response from the backend, the error will be captured, preventing the target plugin control from being deactivated. The control will be highlighted to the user along with a clear error message, such as "Invalid input, this field only accepts numbers".

[0142] In one embodiment, in certain scenarios, a user may not have permission to modify specific data items.

[0143] Specifically, an ordinary user attempts to modify a key medical parameter that only chief physicians have the authority to edit.

[0144] When the user finishes editing and triggers save, the backend interface will perform a permission check and return a "permission insufficient" error. Upon catching this error, the data will not be saved; instead, a message will pop up for the user: "Operation failed, you do not have permission to modify this data," and the edit will be undone, restoring the interface to its state before editing.

[0145] This application provides a visual editing method that, by establishing a dynamic relationship between template controls and external controls, enables users to perform in-situ visual editing within a web template interface, avoiding the fragmented workflow of traditional pop-up operations. Through binding control coordinates and dimensions and introducing scaling response parameters, the position and size of controls can be automatically adjusted when the template is scaled, ensuring layout consistency. Simultaneously, this application supports data extraction, formatting, validation, and saving based on control type and value type. Combined with a control linkage mechanism, it enables accurate input and automatic linkage of multiple data types, thereby improving editing efficiency, ensuring data consistency, and enhancing the system's adaptability and interactive intelligence to various structured forms.

[0146] Example 2: Figure 12 This is a schematic diagram of a visual editing system provided in an embodiment of this application.

[0147] Reference Figure 12 A visualization system, including: Interactive response module 1 is used to respond to interactive operations on the area of ​​the control to be edited in the template and obtain the position information corresponding to the interactive operation.

[0148] External control loading module 2 is used to determine whether the position information is within the preset response range of any external control associated with the area of ​​the control to be edited.

[0149] The add-in control loading module 2 is also used to determine the add-in control as the target add-in control if the position information is determined to be within the preset response range of any add-in control associated with the area to be edited, and to load the current data corresponding to the target add-in control in the area to be edited into the target add-in control.

[0150] The Edit Content Data Module 3 is used to obtain the edit content entered by the user in the target plug-in control; the edit content is generated after the user modifies the current data.

[0151] The editing completion module 4 is used to respond to the editing completion operation and, based on the association between the control area to be edited and the external control, to visually display the edited content in the control area to be edited.

[0152] The visual editing system provided in this application embodiment, by setting up an interactive response module, an external control loading module, an editing content data module, and an editing completion module, can realize a complete processing flow from user interaction location recognition, target control activation, data loading and editing, to result write-back and visual display. The modules have clear division of labor and efficient collaboration, thereby improving the system's ability to parse complex template structures and its interactive response speed. This enables efficient visual editing and stable operation of structured forms, enhancing the system's scalability and practical application value.

[0153] The computer program product provided in this application includes a computer-readable storage medium storing program code. The instructions included in the program code can be used to execute the methods described in the preceding method embodiments. For specific implementation details, please refer to the method embodiments, which will not be repeated here.

[0154] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working process of the system and apparatus described above can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here.

[0155] Furthermore, in the description of the embodiments of this application, unless otherwise expressly specified and limited, the terms "installation," "connection," and "linking" should be interpreted broadly. For example, they can refer to a fixed connection, a detachable connection, or an integral connection; they can refer to a mechanical connection or an electrical connection; they can refer to a direct connection or an indirect connection through an intermediate medium; and they can refer to the internal connection of two components. Those skilled in the art can understand the specific meaning of the above terms in this application based on the specific circumstances.

[0156] In the description of this application, it should be noted that the terms "center," "upper," "lower," "left," "right," "vertical," "horizontal," "inner," and "outer," etc., indicate the orientation or positional relationship based on the orientation or positional relationship shown in the accompanying drawings. They are used only for the convenience of describing this application and simplifying the description, and do not indicate or imply that the device or element referred to must have a specific orientation, or be constructed and operated in a specific orientation. Therefore, they should not be construed as limitations on this application. Furthermore, the terms "first," "second," and "third" are used for descriptive purposes only and should not be construed as indicating or implying relative importance.

[0157] Finally, it should be noted that the above-described embodiments are merely specific implementations of this application, used to illustrate the technical solutions of this application, and not to limit them. The protection scope of this application is not limited thereto. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that any person skilled in the art can still modify or easily conceive of changes to the technical solutions described in the foregoing embodiments within the scope of the technology disclosed in this application, or make equivalent substitutions for some of the technical features. Such modifications, changes, or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of this application, and should all be covered within the protection scope of this application.

Claims

1. A visual editing method, characterized in that, include: In response to an interactive operation on the area of ​​the control to be edited in the template to be edited, the position information corresponding to the interactive operation is obtained; Determine whether the location information is within the preset response range of any external control associated with the area of ​​the control to be edited; If so, the external control is identified as the target external control, and the current data corresponding to the target external control in the control area to be edited is loaded into the target external control; The system retrieves the edited content entered by the user in the target plugin control; the edited content is generated after the user modifies the current data. In response to the completion of the editing operation, the edited content is visualized and displayed in the area to be edited, based on the association between the area to be edited and the external control.

2. The visual editing method according to claim 1, characterized in that, The location information includes the location coordinates corresponding to the interactive operation; The step of determining whether the location information is within a preset response range of any external control associated with the area of ​​the control to be edited includes: Based on the association between the control area to be edited and the external control, the preset response range corresponding to each external control associated with the control area to be edited is determined; Iterate through each of the preset response ranges and determine whether the position coordinates are within any of the preset response ranges.

3. The visual editing method according to claim 1, characterized in that, The step of loading the current data corresponding to the target plugin control in the control area to be edited into the target plugin control includes: Set the target plugin control to an editable state, and set other plugin controls to a non-editable state; wherein, the other plugin controls are plugin controls associated with the area to be edited, excluding the target plugin control; Based on the association between the control area to be edited and the external control, determine the identification information of the template control corresponding to the target external control; Based on the identification information, the corresponding data value is extracted from the preset database; The data value is formatted according to the control type of the target plug-in control; The formatted data values ​​are loaded into the target plug-in control.

4. The visual editing method according to claim 1, characterized in that, Before the step of visually displaying the edited content in the editable control area based on the association between the control area to be edited and the external control, the method further includes: Based on the control value type and preset data saving rules of the target plug-in control, the data saving method corresponding to the edited content is determined; Based on the association between the control area to be edited and the external control, the target identification information of the template control corresponding to the target external control is determined; The edited content and the target identification information are associated and saved to a preset database according to the data saving rules.

5. The visual editing method according to claim 4, characterized in that, The preset data saving rules include at least one of the following: If the control value type is string, the edited content is saved to the preset database; If the value type of the control is date, the edited content is formatted for date, and the formatted edited content is saved to the preset database; If the value type of the control is a number, the edited content is validated for numerical validity, and the edited content that passes the validity validation is saved to the preset database; If the control value type is an enumeration, extract the enumeration code corresponding to the edited content and save the enumeration code to the preset database.

6. The visual editing method according to claim 4, characterized in that, The step of visually displaying the edited content in the editable control area based on the association between the editable control area and the external control includes: Set the target plug-in control to an uneditable state; Based on the target identification information, the corresponding editing content is extracted from the preset database, and the editing content is formatted. The preset refresh interface is called to load the converted edited content into the template control, thereby updating the display content of the control area to be edited.

7. The visual editing method according to claim 1, characterized in that, The step of obtaining the edited content entered by the user in the target plug-in control further includes: If the target plugin control has a preset linkage relationship with another plugin control, then when the edit content of the target plugin control is updated, the state of the other plugin control is updated according to the linkage relationship.

8. The visual editing method according to claim 1, characterized in that, The association between the area to be edited and the external control is preset in the following way: Obtain the editing attributes of the control area to be edited corresponding to each preset template in the preset template library; the control area to be edited includes at least one template control; the editing attributes include the control type, control coordinates, and control size corresponding to each template control; wherein, the control coordinates are the page coordinates of the template control relative to the control area to be edited; Obtain an initial plug-in control that matches the type of the preset plug-in control library; Based on the control coordinates and the control size, the display position and initial size of the initial external control are determined; wherein, the display position is calculated based on the control coordinates and a preset coordinate offset; the initial size is calculated based on the control size and a preset size offset; The initial external control is determined to be the external control corresponding to the template control; Establish an association between the external control and the area of ​​the control to be edited, the association including a scaling response parameter; the scaling response parameter is used to enable the external control to synchronously adjust the display position and the initial size based on the scaling response parameter when the preset template is scaled.

9. The visual editing method according to claim 1, characterized in that, Prior to the step of responding to an interactive operation on the area of ​​the control to be edited in the template, the method further includes: Obtain the template number and current zoom level sent by the user; Based on the template number, load the preset template corresponding to the template number from the preset template library; The preset template is selected as the template to be edited, and the template to be edited is loaded. Based on the current scaling ratio and scaling response parameters, determine the display position and display size of all external controls in the template to be edited, and set the external controls to an uneditable state.

10. A visual editing system, characterized in that, include: An interactive response module is used to respond to interactive operations on the editable control area in the template to be edited, and to obtain the position information corresponding to the interactive operation; The add-in control loading module is used to determine whether the position information is within the preset response range of any add-in control associated with the area of ​​the control to be edited; The add-in control loading module is further configured to, if it is determined that the position information is within a preset response range of any add-in control associated with the area to be edited, identify the add-in control as the target add-in control and load the current data corresponding to the target add-in control in the area to be edited into the target add-in control; The content editing module is used to acquire the edited content entered by the user in the target plug-in control; the edited content is generated after the user modifies the current data; The editing completion module is used to respond to the editing completion operation and, based on the association between the control area to be edited and the external control, to visually display the edited content in the control area to be edited.

Images