background
The previous article introduced the integration of the interface platform, architecture optimization, and the use of low-code configuration modules, entities, and models ( https://blog.csdn.net/seawaving/article/details/130642577 ), today continue to write the previous article, focusing on the introduction Bottom view of the overall design.
The view, which is actually the front-end web page, is super complicated.
Let’s first review the overall framework and steps, as shown in the figure below.
Platform operation
Through the "Configuration" button on the entity list row, you can open the entity configuration function. Click the "View" link in the left navigation, and the view list is displayed on the right. This page includes the functions of adding, modifying, deleting, querying, and viewing views. , as shown in the figure below
, click Add to create a view
view properties
As shown in the figure above, there are not many view attributes, but they are all critical. Let’s talk about them in detail below. It's just that the concept is difficult to understand, and it's not clear why it should be done. Combined with specific examples and scenarios to introduce the design and implementation ideas.
view type
According to different purposes, the views are classified, and the modeling produces the following types of views
- list view
- new view
- modify view
- view view
- tree view
- tree table view
- reference view
- Tree Reference View
- Tree table reference view
- Master-slave view (to be implemented)
- Custom View (to be implemented)
For ordinary entities that correspond to a single model, such as applications under the interface platform module, they correspond to list views, add views, modify views, and view views, which include common query, add, modify, and view pages (the delete function is not a page, but only a function button, located on the list page).
For self-associated entities, such as organizations, if the list view is just a table tile, it is difficult to show the hierarchical relationship, and the intuition is poor. At this time, a tree table view is needed, with a tree on the left and a list on the right. In fact, the tree table view is a composite view composed of a tree view and a list view.
The reference view is a selection page used for other entity association attributes. If the user needs to specify an organization, it can be divided into three types: general reference, tree reference and tree table reference.
General reference : If you configure the data permissions of the application on the interface platform, you need to select the application, and a data list is enough, corresponding to the reference view.
Tree reference : When users maintain, they need to select an organization structure and need a tree, which corresponds to the tree reference view.
Tree table reference : When selecting a user, the left tree and right table are required, the left is the organization tree, and the right is the user list, corresponding to the tree reference view. The tree reference entity is actually a compound view, which is a combination of tree view and list view.
In addition, there are two views. The platform has been planned but has not yet been realized. I will mention it here by the way.
One is the master-slave view. For the entities of the master-slave relationship, such as sales orders, the master-slave view is used, which is actually similar to the tree table view and is also a composite view.
The second is a custom view, which is used for some personalized pages and cannot be configured in a standardized manner. It is implemented through native development, and the specified path is incorporated into the entire system.
solid model
The entity model corresponding to the view. The data of the view comes from the entity model. An entity may have multiple models, so it is necessary to specify the model corresponding to the current view. The following figure is actually an example of a common reference view.
name, code
Name, that is, the name of the view, is the same as the name of the view type by default, and can be adjusted as needed.
Encoding, that is, view encoding, is generated by view type encoding conversion by default. The view type is implemented through the data dictionary of the platform, and its naming is a constant naming style (all uppercase letters, underscores to separate words), and the encoding corresponds to the file name of the front-end vue page, using small hump, so it needs to be converted and generated. The conversion is in Front-end implementation.
This part of the platform does not have fine-grained control in the code generation part. For example, in the list view, the code will be automatically introduced as add, modify, and view views. Renaming the code requires manual adjustment after the code is generated. Therefore, it is not recommended to modify the code at will, but follow the default convention.
before initialization, after initialization
Hook method before and after view loading, just write js method body, the platform will process it in the front-end processing system in the code generation link, preprocessing, mainly used to receive parameters, set default values, etc., applicable to all views.
For example, from the user list view, after selecting the finance department node in the organization tree on the left, click the Add button to open the new view. At this time, you want to automatically fill in the currently selected organization ID
It is placed here after initialization because the new operation will first call the init operation of a backend entity service, create a new object, and set the default value to return. If it is placed before initialization, the organization ID will be overwritten.
data verification
Data verification hook method, just write js method body, applicable to new view and edit view, used for composite data verification. For the verification of a single attribute, if it cannot be empty, it can be set directly through the rule of the form. But for multi-attribute linkage, you need to perform data validation in this method.
For example, when configuring a button, if the button requires confirmation, you must enter confirmation information, which involves two attributes, confirmFlag and confirmMessage.
// 需要确认情况下必须输入确认信息
if (this.entityData.confirmFlag === this.$constant.YES && !this.entityData.confirmMessage) {
this.$message.warning('请输入确认信息')
return false
}
// 需要控制权限则必须输入权限编码
if (
this.entityData.permissionFlag === this.$constant.YES &&
!this.entityData.permissionCode
) {
this.$message.warning('请输入权限编码')
return false
}
return true
before saving, after saving
For hook methods before and after data saving, just write the js method body, which is suitable for adding views and editing views. The platform will process the code generation process and put it in the front-end processing system. Preprocessing is mainly used to process the data before saving and trigger the logic after saving.
method trigger
The view has five attributes. Before initialization, after initialization, data verification, before saving, and after saving, they are all extension points reserved by the front end of the platform for the realization of personalized logic and functions. How are they triggered and executed?
The front end uses minx technology for mixing.
// 初始化,参数可为空
init(param) {
if (this.beforeInit) {
this.beforeInit(param)
}
this.api.init().then((res) => {
this.entityData = res.data
if (this.afterInit) {
this.afterInit(param)
}
this.visible = true
})
},
// 保存
save() {
if (this.beforeSave) {
this.beforeSave()
}
this.$refs.form.validate((valid) => {
if (valid) {
if (this.validateData) {
// 数据验证通过后才执行保存操作
if (this.validateData()) {
this.saveData()
}
} else {
// 无需数据验证，直接执行
this.saveData()
}
}
})
},
Let’s stop here today, and we’ll explain different types of view configurations in the next article.
Development platform information
Platform name: One Two Three Development Platform
Introduction: Enterprise-level general development platform
Design information: csdn column
Open source address: Gitee
open source protocol: MIT
welcomes favorites, likes, and comments. Your support is the driving force for me to move forward.