Page configuration

1： At this time, when I click each component, it will jump and display the content , Now it's time to configure the page ,

I want to create the one above , Need to do appmain Create a link-vue Write the following content in the component , And then appmain Show components to introduce , Just fine v-show true Show ,false No display

2： Role page

Foundation construction effect ：

Go by yourself element-ui Find the contents of the form

3： Import the data into ------ backstage

Create a role table , Then create an interface in the route , Return response data

  Finished writing , Go to the front desk

stay api Next create a role.js Write a way

  Invoke in component

4: The implementation process of the new role button

First, in the role Component element-ui The contents of the dialog box inside are then modified and deleted , With this create role button , stay data Define the objects you add roles to , And what you defined menus jurisdiction ,（ What permissions does the current role have , According to these permissions, we need to deal with what is displayed in the list on the left ）, Then you should also control whether the form pops up by default , stay data define roleFormVisible: false, In this way, the form will not pop up automatically when entering the page , Then the third step is handleAdd（ Method of creating role button binding ） It says in it this.roleFormVisible = true, Click the button to trigger the method , Let the pop-up window show , After pop-up , Wait until the pop-up content is loaded and executed , Reset , In case there will be these contents when you open it next time .

Next, write the submission definition of confirm and Cancel buttons, which is called addData（ Inside pass from The name of the form （ref The one defined ））

addData Method receives a formal parameter , Then get the information of the form , Send if there is value ajax request , If not, an error is returned , Then, since the form information is accepted, it involves form verification , So write the rules for form verification

stay element-ui Find the form with verification function in the component and see what to say ,（Form Component provides the function of form validation , Just go through v-bind：rules  Property to pass in the validation rules of the contract , And will Form-Item Of  prop  Property is set to the field name to be verified .） stay data The name of the defined validation rule binding, and then write copy elelment-ui The method inside , That's all right.

Click OK at this time and it won't change , Because I haven't written , Leave it for a while before you write

4.2： backstage

Next, write the interface for adding roles in the background , Test it after writing , Can succeed ,

4.3 The front desk

  At the front desk api Method, which writes a call interface matching the background to send the request Method , Then call this method in the component .

The function of the innovative button will be fully realized .

5： The next step is to write , Set role permissions