Vue element front end application development organization and role management

Time:2021-10-26
catalogue

1. Organization management module interface

The organization management module interface is as follows, including organization member management and role management. In the ABP basic field, an organization can contain 0 to more members or 0 to more roles. Therefore, the interface design is as follows.

In the legend of UML object, it should be the effect diagram as shown below. The organization includes the contents of organization members and roles.

On the interface, organization members also need to add member functions. Similarly, roles also need to be added, as shown in the following UML diagram.

Since adding members is also an interface function, in general, if we put them in one page, it may increase the amount of code, increase the difficulty of code maintenance and reduce readability. Therefore, we can consider designing these operations of adding members and roles in an independent component module, and then reference the components in the main page.

The interface of adding members to an organization is to pop up a dialog box, query and select the system user list, and confirm to complete the operation of adding members.

Adding role operations is also a similar process. Encapsulating their logic and interface processing into an independent interface component is very convenient in Vue + element, and it is also a common way to hide complexity. The effect of the add role interface is as follows. Select a system role in the pop-up dialog box and confirm to add it to the corresponding organization.

2. Role management interface

Role management first displays the contents of system roles in a list, as shown in the following interface.

In addition to the basic information, each role also includes its own permissions (function control points), users, and menus. Permissions are used to control interface elements, such as the display of operation buttons, while the owned menus are used to obtain the menu of the corresponding role after the user logs in to the system with the specified account, and then build the corresponding access portal.

The UML class diagram of role interface module is shown below.

On the corresponding interface elements, we should display this information in different tabs, as shown below. You can see that different tabs display different contents.

The role contains the following permissions:

The menu is also a tree list, similar to permissions, as shown in the following interface.

The above figures show the contents of the viewing interface. To add or edit roles, you need to check the tree list to select the corresponding permissions and menu permissions for the roles.

We take menu permissions as an example. When editing role information, the corresponding tree list should be checked. After confirmation, the checked user selection should be submitted to the background for saving and processing

3. Interface modular processing

The above module involves the processing of multiple page contents. If all contents are placed in one page, the page contents and JS logic code will be bloated and difficult to maintain, increasing the difficulty of editing interface code.

In fact, the interface design can also be built in the way of one business interface and one component according to the class diagram of UML, and the interface components can be reused in multiple places. Sometimes different attributes can be designed to distinguish.

Let’s go back to the UML diagram of adding members and roles in the organization.

Among them, adding members and roles involves the list data display of the interface and the corresponding adding display operations. It is convenient to have an independent interface. Moreover, adding members also needs to be used in the role maintenance module, so two scenarios can be compatible to design the component module.

After the interface components of adding members and roles are completed, we can introduce them in the organization interface.

Then add it to the corresponding component set.

Then add the corresponding component rendering code in the interface, as shown below.

With these preparations, we can call the code to display the corresponding dialog interface component when we need to trigger the interface display.

Adduser() {// the add member dialog box appears
      var ouid = this.searchForm.OrganizationUnitId
      if (!ouid || typeof (ouid) === 'undefined') {
        This. Msgerror ('Please select organization first! ')
        return
      }
      this.$refs.selectuser.show()
    },

    Addrole() {// the add member dialog box appears
      var ouid = this.searchForm.OrganizationUnitId
      if (!ouid || typeof (ouid) === 'undefined') {
        This. Msgerror ('Please select organization first! ')
        return
      }
      this.$refs.selectrole.show()
    },

The role module is similar. We design more reusable interface modules as much as possible, reduce the page code of the main module, and improve the reuse rate of components.

As described earlier, the UML class diagram of the role interface module is shown below.

We can also divide the content of the module according to this, design different interface components for different businesses, and finally integrate and use them together.

In this way, when we view the role details, the interface code can be greatly reduced. We only need to introduce the corresponding interface components, as shown in the following code.

< El dialog title = "view information": visible = "isview": mode append to body = "false" @ close = "closedialog" >
      <el-col>
        <el-tabs value="basicPage" type="border-card">
          < El tab panel name = "basicpage" label = "basic information" >
            <el-form ref="viewForm" :model="viewForm" label-width="120px">
              < El form item label = "role name" >
                <el-input v-model="viewForm.name" disabled />
              </el-form-item>
              < El form item label = "role display name" >
                <el-input v-model="viewForm.displayName" disabled />
              </el-form-item>
              < El form item label = "role description" >
                <el-input v-model="viewForm.description" type="textarea" disabled />
              </el-form-item>
            </el-form>
          </el-tab-pane>

          < El tab panel name = "permitpage" label = "permission" >
            <rolefunction ref="rolefunction" :role-id="selectRoleId" />
          </el-tab-pane>

          < El tab panel name = "userpage" label = "user" >
            <roleuser ref="roleuser" :role-id="selectRoleId" :can-add="false" :can-delete="false" />
          </el-tab-pane>

          < El tab panel name = "menupage" label = "menu" >
            <rolemenu ref="rolemenu" :role-id="selectRoleId" />
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <div slot="footer">
        < El button type = "success" @ Click = "closedialog" > Close < / El button >
      </div>
    </el-dialog>

The key part above is to introduce the corresponding interface components, so that we can still reuse this part of the interface components in the editing interface. The interface content display control of the interface components is processed internally. We don’t need to manage it in the main interface, which is very convenient.

The detailed interface effect of role viewing is shown below.

The code of the role editing interface is as follows.

< El dialog title = "edit information": visible = "isedit": mode append to body = "false" @ close = "closedialog" >
      <el-col>
        <el-tabs value="basicPage2" type="border-card">
          < El tab panel name = "basicpage2" label = "basic information" >
            <el-form ref="editForm" :rules="rules" :model="editForm" label-width="120px">
              < El form item label = "role name" >
                <el-input v-model="editForm.name" />
              </el-form-item>
              < El form item label = "role display name" >
                <el-input v-model="editForm.displayName" />
              </el-form-item>
              < El form item label = "role description" >
                <el-input v-model="editForm.description" type="textarea" />
              </el-form-item>
            </el-form>
          </el-tab-pane>
          < El tab panel name = "permitpage2" label = "permission" >
            <rolefunction ref="rolefunction2" :showcheck="true" :role-id="selectRoleId" />
          </el-tab-pane>

          < El tab panel name = "userpage2" label = "user" >
            <roleuser ref="roleuser2" :role-id="selectRoleId" :can-add="true" :can-delete="true" />
          </el-tab-pane>

          < El tab panel name = "menupage2" label = "menu" >
            <rolemenu ref="rolemenu2" :showcheck="true" :role-id="selectRoleId" />
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <div slot="footer">
        < El button type = "primary" @ Click = "saveedit()" > OK < / El button >
        < El button type = "success" @ Click = "closedialog" > Close < / El button >
      </div>
    </el-dialog>
  </div>

The effect of character editing interface is as follows.

In the interface component module, if we need to accept the parent component or interface call, the incoming parameters can be defined by props.

If the component needs to return the corresponding content, such as checking the tree list option, we can design a function in the component definition to return the content of the component.

In this way, we can get the data of child components in the parent window or parent component.

Through the above introduction, we should understand that displaying business logic according to the interface to distinguish different component modules can greatly reduce the maintenance complexity of the main interface, and the interface components are also cohesive, so it is very convenient to use.

By designing different interface components, we can organize more powerful interface display without affecting the convenience of maintenance. This is the advantage of modular processing.

The above is the details of Vue element front-end application development organization and role management. For more information about Vue element organization and role management, please pay attention to other relevant articles of developeppaer!

Recommended Today

[JS] BOM basis

BOM Browser Object Model – browser object modelWeb browserThe presentation model composed of all exposed objects. When the browser analyzes the document, it will create aObject collection, define the document and specify how it is displayed. Objects created by browsers are calledDocument object, which is part of a larger collection of objects used by the […]