User page management

1：Bug describe ： When I click on one, when I click on the next character , The pop-up window shows the last selected character .

Ideas ： Cause this bug Because the value passed by the parent component （role） No judgment was made as to whether he had made any changes , So you need to give this checkedKeys and updatedKeys Must be re assigned , And I need to reset my tree frame .

solve ： that How to judge this role Have you made any changes , use vue Our listeners listen to this role, As long as the role If there is a change, give it mounted（） Reset the value inside , Then check again to find our tree frame （ Just for this tree frame ref Name it   ref:tree）, And then in watcher Inside through  this.$refs['tree'].setCheckedKeys(this.checkedKeys) Put this array   By looking at elementui I know controls setCheckedKeys The property of can receive two parameters , The second parameter is boolean, The default is false. So when I open it for the first time, it's not checked .

2： Rub time into real time ： Go to elementui Find out if there is a formatting method in it formatter attribute

Write a function （resetDate） stay Role Add , Define this function at the bottom .

Because in elementui See which parameters can be accepted , Then I wrote a file with formatting time before , Just call the method inside 【 It needs to be referenced in the component 】, You can format the time .

But I have a bug：

Question why ： This is because when I create the role table Library , hold auth_time No type defined , The default is string Type of , So when I call this formatting method , Cannot change . Just define it in the database .

So far ： Role permissions are over - To user management

Old ways ： The front desk builds a page , Then write the background interface , The front desk also writes one , Then one more api Call this method and send the request back to the component , Then assign a value to the object that displays the data

3： It's the same step ,elementui Find the frame inside , Paste modify , Then remember to format the time . So the basic page is set up

The realization of paging function ： stay element-ui Find the complete function inside and then modify  :page-sizes="[5, 10, 15, 20]"

It shows several items on one page ,total： Total number of pieces , also pageSize Need to be in data Let's define .

4： The next step is to put user The data in has become real data ----- Backstage

Write the method of getting users in the background , There is also a method to obtain paging users, but in paging, you should also return the role list .（ Because users include roles , Otherwise, get the role list after getting the user list ）

Delete user The data in it , Then write api Method , then Definition fetchUserL Method to call getUserList Routing method , If it works user You can get resp Data from the background . At the same time users and roleOptions Store users and roles

5： Button pop-up implementation

Then the next step is to click Add users A pop-up window shows ： stay element-ui Find the dialog box component and modify , stay data It defines the attributes of adding or editing objects , And pop up , also users User information , There are also variables that store roles , Then set it to true, And then use it refs Get the name of the form to , Use the form resetFieds Property to reset the form .

6： Then write the form to verify

utilize element-ui Custom expression verification of .

The user name needs to be in lowercase English letters , Capital letters , Numbers 0-9 Or it is composed of underscores and its length should be greater than four digits

The mobile phone number should also be customized - Use regular

The verification rules are written in data Inside return above .

Then use regular expressions /^[a-zA-Z0-9_]+$/  Start with what and end with what , stay data Define custom form content in , And then in return Write the contents of standard verification . The pop-up form verification is over .