A: hi! ~ Hello everyone, I am YK bacteria 🐷, a microsystem front-end ✨, love to think, love to summarize, love to record, love to share 🏹, welcome to follow me 😘 ~ [wechat account: Yk2012Yk2012, wechat public account: ykyk2012]

“This is the 9th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

The address of the project: https://gitee.com/ykang2020/vue_shop

1. Rights management service analysis

The rights management module controls the operations that different users can perform by role. That is, each user is assigned a specific role that has different function permissions.

2. Permission list

2.1 Displaying permission list components through routes

New components/power/Rights. Vue
The introduction of the routing

2.2 Breadcrumb navigation + Card view

<! Breadcrumb navigation area -->
<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/home' }">Home page</el-breadcrumb-item>
  <el-breadcrumb-item>Rights management</el-breadcrumb-item>
  <el-breadcrumb-item>Permissions list</el-breadcrumb-item>
</el-breadcrumb>

<! -- Card view -->
<el-card></el-card>
Copy the code

2.3 Invoking the API to Obtain permission List data

export default {
  data() {
    return {
      // Permission list
      rightsList: []}},created() {
    // Get all permissions
    this.getRightsList()
  },
  methods: {
    async getRightsList() {
      const { data: result } = await this.$http.get('rights/list')
      if(result.meta.status ! = =200) {
        return this.$message.error('Failed to get permission list! ')}this.rightsList = result.data
      console.log(this.rightsList)
    }
  }
}
Copy the code

2.4 UI structure of rendering permission list

<! -- Card view -->
<el-card>
  <el-table :data="rightsList" border stripe>
    <el-table-column type="index"></el-table-column>
    <el-table-column label="Permission Name" prop="authName"></el-table-column>
    <el-table-column label="Path" prop="path"></el-table-column>
    <el-table-column label="Permission level" prop="level">
      <template slot-scope="scope">
        <el-tag v-if="scope.row.level === '0'">Level 1</el-tag>
        <el-tag type="success" v-else-if="scope.row.level === '1'">The secondary</el-tag>
        <el-tag type="warning" v-else>Level 3</el-tag>
      </template>
    </el-table-column>
  </el-table>
</el-card>
Copy the code

3. Role list

3.1 Displaying role List Components through Routes

New components/power/Roles. Vue
The introduction of the routing

3.2 Draw the basic layout structure and get the list data

<! Breadcrumb navigation area -->
<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/home' }">Home page</el-breadcrumb-item>
  <el-breadcrumb-item>Rights management</el-breadcrumb-item>
  <el-breadcrumb-item>The role list</el-breadcrumb-item>
</el-breadcrumb>
<! -- Card view -->
<el-card>
  <! Add role button area -->
  <el-row>
    <el-col>
      <el-button type="primary">Adding roles</el-button>
    </el-col>
  </el-row>
  <! -- Role list area -->
  <el-table border stripe>
  </el-table>
</el-card>
Copy the code

export default {
  data() {
    return {
      // All role list data
      roleList: []}},created() {
    this.getRolesList()
  },
  methods: {
    // Get a list of all roles
    async getRolesList() {
      const { data:result } = await this.$http.get('roles')
      if(result.meta.status ! = =200) {return this.$message.error('Failed to get role list! ');
      }
      this.roleList = result.data
      console.log(this.roleList)
    }
  }
}
Copy the code

3.3 Render character list data

<! -- Role list area -->
<el-table :data="roleList" border stripe>
  <! -- Expand column -->
  <el-table-column type="expand"></el-table-column>
  <! -- index column -->
  <el-table-column type="index"></el-table-column>
  <el-table-column label="Role Name" prop="roleName"></el-table-column>
  <el-table-column label="Role Description" prop="roleDesc"></el-table-column>
  <el-table-column label="Operation" width="300px">
    <template>
      <el-button size="mini" type="primary" icon="el-icon-edit">The editor</el-button>
      <el-button size="mini" type="danger" icon="el-icon-delete">delete</el-button>
      <el-button size="mini" type="warning" icon="el-icon-setting">Assign permissions</el-button>
    </template>
  </el-table-column>
</el-table>
Copy the code

3.4 Adding a Role + Editing a Role + Deleting a Role

And user management operation similar [Vue] actual combat project: e-commerce background management system (Element-UI) (two) user management module

3.5 Render level 1 permissions through the level 1 for loop

<! -- Expand column -->
<el-table-column type="expand">
  <template slot-scope="scope">
    <el-row v-for="(item1, index1) in scope.row.children" :key="item1.id">
      <! Render level permissions -->
      <el-col :span="5">
        <el-tag>{{ item1.authName }}</el-tag>
      </el-col>
      <! Render level 2 and Level 3 permissions -->
      <el-col :span="19"></el-col>
    </el-row>
    <! -- <pre> {{scope.row}} </pre> -->
  </template>
</el-table-column>
Copy the code

3.6 Beautify the UI structure of level 1 permissions

Add border line add icon

<el-table-column type="expand">
  <template slot-scope="scope">
    <el-row 
    :class="['bdbottom', index1 === 0 ? 'bdtop' : '']" 
    v-for="(item1, index1) in scope.row.children" 
    :key="item1.id">
      <! Render level permissions -->
      <el-col :span="5">
        <el-tag>{{ item1.authName }}</el-tag>
        <i class="el-icon-caret-right"></i>
      </el-col>
      <! Render level 2 and Level 3 permissions -->
      <el-col :span="19"></el-col>
    </el-row>
    <! -- <pre> {{scope.row}} </pre> -->
  </template>
</el-table-column>
Copy the code

.el-tag {
  margin: 7px;
}
.bdtop {
  border-top: 1px solid #eee;
}
.bdbottom {
  border-bottom: 1px solid #eee;
}
Copy the code

3.7 Render level 2 and level 3 permissions through layer 2 and Layer 3 for loops

<! Render level 2 and Level 3 permissions -->
<el-col :span="19">
  <el-row
    :class="[index2 === 0 ? '' : 'bdtop']"
    v-for="(item2, index2) in item1.children"
    :key="item2.id"
  >
    <! Render level 2 privileges -->
    <el-col :span="6">
      <el-tag type="success">{{ item2.authName }}</el-tag>
      <i class="el-icon-caret-right"></i>
    </el-col>
    <! -- Render level 3 privileges -->
    <el-col :span="18">
      <el-tag type="warning" v-for="item3 in item2.children" :key="item3.id">{{ item3.authName }}</el-tag>
    </el-col>
  </el-row>
</el-col>
Copy the code

3.8 Beautify the UI structure

Level of permissions

<el-row
  :class="['bdbottom', index1 === 0 ? 'bdtop' : '', 'vcenter']"
  v-for="(item1, index1) in scope.row.children"
  :key="item1.id"
>
Copy the code

The secondary permissions

<el-row
  :class="[index2 === 0 ? '' : 'bdtop', 'vcenter']"
  v-for="(item2, index2) in item1.children"
  :key="item2.id"
>
Copy the code

.vcenter {
  display: flex;
  align-items: center;
}
Copy the code

3.9 Click Delete Permission

Add attributes to permission tags

<el-tag close @close="removeRightById(scope.row, item1.id)">
{{ item1.authName }}</el-tag>
Copy the code

<el-tag type="success" closable @close="removeRightById(scope.row, item2.id)">
{{ item2.authName }}</el-tag>
Copy the code

<el-tag type="warning" closable @close="removeRightById(scope.row, item3.id)">
{{ item3.authName }}</el-tag>
Copy the code

// Delete permissions based on Id
async removeRightById(role, rightId) {
  // A dialog box is displayed asking you whether to delete data
  const confirmResult = await this.$confirm(
    'This operation will permanently delete the permission. Do you want to continue? '.'tip',
    {
      confirmButtonText: 'sure'.cancelButtonText: 'cancel'.type: 'warning'
    }
  ).catch(error= > error)
  if(confirmResult ! = ='confirm') {
    return this.$message.info('Cancelled delete')}// console.log(' Delete confirmed ')
  const { data: result } = await this.$http.delete(
    'roles/' + role.id + '/rights/' + rightId
  )
  if(result.meta.status ! = =200) {
    return this.$message.error('Delete permission failed')}this.$message.success('Permission deleted successfully')
  // this.getrolesList () // reloads the page and is not recommended
  role.children = result.data
}
Copy the code

4. Assign rights

4.1 A dialog box is displayed asking for data

<el-button @click="showSetRightDialog">Assign permissions</el-button>
Copy the code

<! Assign permissions dialog box -->
    <el-dialog
  title="Assign permissions"
  :visible.sync="setRightDialogVisible"
  width="50%"
>
  <! Content body area -->
  <! -- Bottom area -->
  <span slot="footer" class="dialog-footer">
    <el-button @click="setRightDialogVisible = false">Take away</el-button>
    <el-button type="primary" @click="setRightDialogVisible = false">determine</el-button>
  </span>
</el-dialog>
Copy the code

Define data

// Control the display and hide of the Assign Permission dialog box
setRightDialogVisible: false.// All permission data
rightslist: []
Copy the code

// Display the dialog box for assigning permissions
async showSetRightDialog() {
  // Get all permission data
  const { data: result } = await this.$http.get('rights/tree')
  if(result.meta.status ! = =200) return this.$message.error('Failed to obtain permission data')
  // The obtained permission data is saved to rightslist
  this.rightslist = result.data
  console.log(this.rightslist)
  this.setRightDialogVisible = true
}
Copy the code

4.2 Configuring and Using the El-tree Tree Control

  <! Content body area tree control -->
  <el-tree :data="rightslist" :props="treeProps"></el-tree>
Copy the code

data() {
  return {
    // The tree control's property binding object
    treeProps: {
      children: 'children'.label: 'authName'}}}Copy the code

4.3 Optimize the display effect of tree controls

Add check boxesshow-checkbox
Specifies that the check box is selected for IDnode-key="id"
All nodes are expanded by defaultdefault-expand-all

<el-tree :data="rightslist" :props="treeProps" show-checkbox node-key="id" default-expand-all></el-tree>
Copy the code

4.4 Existing Rights Selected by default

<el-button @click="showSetRightDialog(scope.row)">Assign permissions</el-button>
Copy the code

  <el-tree :data="rightslist" :props="treeProps" show-checkbox node-key="id" default-expand-all :default-checked-keys="defKeys"></el-tree>
Copy the code

  // An array of node IDS selected by default
  defKeys: []
Copy the code

// Display the dialog box for assigning permissions
async showSetRightDialog(role) {
  // Get all permission data
  const { data: result } = await this.$http.get('rights/tree')
  if(result.meta.status ! = =200) return this.$message.error('Failed to obtain permission data')
  // The obtained permission data is saved to rightslist
  this.rightslist = result.data
  console.log(this.rightslist)
  // Recursively obtain the id of the level-3 node
  this.getLeafKeys(role, this.defKeys)
  this.setRightDialogVisible = true
},
// Get the ids of all level 3 privileges for the role recursively and save them in the defKeys array
getLeafKeys(node, arr) {
  // If the current node does not contain the children attribute, it is a level 3 permission node
  if(! node.children) {return arr.push(node.id)
  }
  node.children.forEach(item= > this.getLeafKeys(item, arr))
}
Copy the code

4.5 Resetting the defKeys array when closing the dialog box

 <! Assign permissions dialog box -->
<el-dialog title="Assign permissions" @close="setRightDialogClosed">
Copy the code

// Listen for the close event of the Assign Permissions dialog box
setRightDialogClosed() {
  this.defKeys = []
}
Copy the code

4.6 Invoking the API To Assign Permissions

Get the character ID when you open the dialog box

<el-button @click="showSetRightDialog(scope.row)">Assign permissions</el-button>
Copy the code

// Id of the role whose rights are to be assigned
roleId: ' '
Copy the code

async showSetRightDialog(role) {
  this.roleId = role.id
}
Copy the code

Call the API to assign permissions

<! Content body area tree control -->
<el-tree ref="treeRef"></el-tree>
Copy the code

<el-button type="primary" @click="allotRights">determine</el-button>
Copy the code

// Click assign permissions to roles
async allotRights() {
  const keys = [
    ...this.$refs.treeRef.getCheckedKeys(),
    ...this.$refs.treeRef.getHalfCheckedKeys()
  ]
  // console.log(keys)
  const idStr = keys.join(', ')
  const {
    data: result
  } = await this.$http.post(`roles/The ${this.roleId}/rights`, { rids: idStr })
  if(result.meta.status ! = =200) return this.$message.error('Permission assignment failed! ')
  this.$message.success('Permission assigned successfully')
  this.getRolesList()
  this.setRightDialogVisible = false
}
Copy the code

Roles.vue Complete code

<template>
  <div>
    <! Breadcrumb navigation area -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">Home page</el-breadcrumb-item>
      <el-breadcrumb-item>Rights management</el-breadcrumb-item>
      <el-breadcrumb-item>The role list</el-breadcrumb-item>
    </el-breadcrumb>
    <! -- Card view -->
    <el-card>
      <! Add role button area -->
      <el-row>
        <el-col>
          <el-button type="primary" @click="addDialogVisible = true"
            >Add character </el-button ></el-col>
      </el-row>
      <! -- Role list area -->
      <el-table :data="roleList" border stripe>
        <! -- Expand column -->
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-row
              :class="['bdbottom', index1 === 0 ? 'bdtop' : '', 'vcenter']"
              v-for="(item1, index1) in scope.row.children"
              :key="item1.id"
            >
              <! Render level permissions -->
              <el-col :span="5">
                <el-tag
                  closable
                  @close="removeRightById(scope.row, item1.id)"
                  >{{ item1.authName }}</el-tag
                >
                <i class="el-icon-caret-right"></i>
              </el-col>
              <! Render level 2 and Level 3 permissions -->
              <el-col :span="19">
                <el-row
                  :class="[index2 === 0 ? '' : 'bdtop', 'vcenter']"
                  v-for="(item2, index2) in item1.children"
                  :key="item2.id"
                >
                  <! Render level 2 privileges -->
                  <el-col :span="6">
                    <el-tag
                      type="success"
                      closable
                      @close="removeRightById(scope.row, item2.id)"
                      >{{ item2.authName }}</el-tag
                    >
                    <i class="el-icon-caret-right"></i>
                  </el-col>
                  <! -- Render level 3 privileges -->
                  <el-col :span="18">
                    <el-tag
                      type="warning"
                      v-for="item3 in item2.children"
                      :key="item3.id"
                      closable
                      @close="removeRightById(scope.row, item3.id)"
                      >{{ item3.authName }}</el-tag
                    >
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <! -- <pre> {{scope.row}} </pre> -->
          </template>
        </el-table-column>
        <! -- index column -->
        <el-table-column type="index"></el-table-column>
        <el-table-column label="Role Name" prop="roleName"></el-table-column>
        <el-table-column label="Role Description" prop="roleDesc"></el-table-column>
        <el-table-column label="Operation" width="300px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="showEditDialog(scope.row.id)"
              >Edit < / el - button ><el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="removeRoleById(scope.row.id)"
              >Delete < / el - button ><el-button
              size="mini"
              type="warning"
              icon="el-icon-setting"
              @click="showSetRightDialog(scope.row)"
              ></el-button ></template>
        </el-table-column>
      </el-table>
    </el-card>
    <! Add character dialog box -->
    <el-dialog
      title="Add a role"
      :visible.sync="addDialogVisible"
      width="50%"
      @close="addDialogClosed"
    >
      <! Content body area -->
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="80px"
      >
        <el-form-item label="Role Name" prop="roleName">
          <el-input v-model="addForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="Role Description" prop="roleDesc">
          <el-input v-model="addForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <! -- Bottom area -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">Take away</el-button>
        <el-button type="primary" @click="addRole">determine</el-button>
      </span>
    </el-dialog>
    <! -- Modify user's dialog box -->
    <el-dialog title="Modify role" :visible.sync="editDialogVisible" width="50%">
      <! Content body area -->
      <el-form
        :model="editForm"
        :rules="addFormRules"
        ref="editFormRef"
        label-width="80px"
      >
        <el-form-item label="Role Name" prop="roleName">
          <el-input v-model="editForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="Role Description" prop="roleDesc">
          <el-input v-model="editForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <! -- Bottom area -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">Take away</el-button>
        <el-button type="primary" @click="editUserInfo">determine</el-button>
      </span>
    </el-dialog>
    <! Assign permissions dialog box -->
    <el-dialog
      title="Assign permissions"
      :visible.sync="setRightDialogVisible"
      width="50%"
      @close="setRightDialogClosed"
    >
      <! Content body area tree control -->
      <el-tree
        :data="rightslist"
        :props="treeProps"
        show-checkbox
        node-key="id"
        default-expand-all
        :default-checked-keys="defKeys"
        ref="treeRef"
      ></el-tree>
      <! -- Bottom area -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="setRightDialogVisible = false">Take away</el-button>
        <el-button type="primary" @click="allotRights">determine</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // All role list data
      roleList: [].addDialogVisible: false.addForm: {
        roleName: ' '.roleDesc: ' '
      },
      addFormRules: {
        roleName: [{required: true.message: 'Please enter role name'.trigger: 'blur'}},// Control the display and hide of the modify user dialog box
      editDialogVisible: false.// Information object of the role queried
      editForm: {},
      // Control the display and hide of the Assign Permission dialog box
      setRightDialogVisible: false.// All permission data
      rightslist: [].// The tree control's property binding object
      treeProps: {
        children: 'children'.label: 'authName'
      },
      // An array of node IDS selected by default
      defKeys: [].// Id of the role whose rights are to be assigned
      roleId: ' '}},created() {
    this.getRolesList()
  },
  methods: {
    // Get a list of all roles
    async getRolesList() {
      const { data: result } = await this.$http.get('roles')
      if(result.meta.status ! = =200) {
        return this.$message.error('Failed to get role list! ')}this.roleList = result.data
      console.log(this.roleList)
    },

    // Listen for the close event of the Add user dialog box
    addDialogClosed() {
      this.$refs.addFormRef.resetFields()
    },
    // Add role operations
    addRole() {
      this.$refs.addFormRef.validate(async valid => {
        if(! valid)return
        const { data: result } = await this.$http.post('roles'.this.addForm)
        if(result.meta.status ! = =201) {
          return this.$message.error('Failed to add role! ')}this.$message.success('Role added successfully! ')
        this.addDialogVisible = false
        this.getRolesList()
      })
    },
    // Displays the edit user dialog box
    async showEditDialog(id) {
      this.editDialogVisible = true
      const { data: result } = await this.$http.get('roles/' + id)
      if(result.meta.status ! = =200) {
        return this.$message('Failed to query user information! ')}this.editForm = result.data
    },
    editUserInfo() {
      this.$refs.editFormRef.validate(async valid => {
        // console.log(valid)
        if(! valid)return
        // Initiates a data request to modify user information
        const { data: result } = await this.$http.put(
          'roles/' + this.editForm.roleId,
          { roleName: this.editForm.roleName, roleDesc: this.editForm.roleDesc }
        )
        if(result.meta.status ! = =200) {
          return this.$message.error('Update role failed')}// Close the dialog box
        this.editDialogVisible = false
        // Get the user list again
        this.getRolesList()
        // A message is displayed indicating that the modification is successful
        this.$message.success('Updating role information succeeded')})},// Delete the user information based on the ID
    async removeRoleById(id) {
      // A dialog box is displayed asking you whether to delete data
      const confirmResult = await this.$confirm(
        'This operation will permanently delete this role. Do you want to continue? '.'tip',
        {
          confirmButtonText: 'sure'.cancelButtonText: 'cancel'.type: 'warning'
        }
      ).catch(error= > error)
      // console.log(confirmResult) // Confirm: 'confirm' cancel :cancel catch: 'canel'
      if(confirmResult ! = ='confirm') {
        return this.$message.info('Cancelled delete')}const { data: result } = await this.$http.delete('roles/' + id)
      if(result.meta.status ! = =200) {
        return this.$message.error('Failed to delete role')}this.$message.success('Role deleted successfully')
      this.getRolesList()
    },
    // Delete permissions based on Id
    async removeRightById(role, rightId) {
      // A dialog box is displayed asking you whether to delete data
      const confirmResult = await this.$confirm(
        'This operation will permanently delete the permission. Do you want to continue? '.'tip',
        {
          confirmButtonText: 'sure'.cancelButtonText: 'cancel'.type: 'warning'
        }
      ).catch(error= > error)
      if(confirmResult ! = ='confirm') {
        return this.$message.info('Cancelled delete')}// console.log(' Delete confirmed ')
      const { data: result } = await this.$http.delete(
        'roles/' + role.id + '/rights/' + rightId
      )
      if(result.meta.status ! = =200) {
        return this.$message.error('Delete permission failed')}this.$message.success('Permission deleted successfully')
      // this.getrolesList () // reloads the page and is not recommended
      role.children = result.data
    },
    // Display the dialog box for assigning permissions
    async showSetRightDialog(role) {
      this.roleId = role.id
      // Get all permission data
      const { data: result } = await this.$http.get('rights/tree')
      if(result.meta.status ! = =200) return this.$message.error('Failed to obtain permission data')
      // The obtained permission data is saved to rightslist
      this.rightslist = result.data
      console.log(this.rightslist)
      // Recursively obtain the id of the level-3 node
      this.getLeafKeys(role, this.defKeys)
      this.setRightDialogVisible = true
    },
    // Get the ids of all level 3 privileges for the role recursively and save them in the defKeys array
    getLeafKeys(node, arr) {
      // If the current node does not contain the children attribute, it is a level 3 permission node
      if(! node.children) {return arr.push(node.id)
      }
      node.children.forEach(item= > this.getLeafKeys(item, arr))
    },
    // Listen for the close event of the Assign Permissions dialog box
    setRightDialogClosed() {
      this.defKeys = []
    },
    // Click assign permissions to roles
    async allotRights() {
      const keys = [
        ...this.$refs.treeRef.getCheckedKeys(),
        ...this.$refs.treeRef.getHalfCheckedKeys()
      ]
      // console.log(keys)
      const idStr = keys.join(', ')
      const {
        data: result
      } = await this.$http.post(`roles/The ${this.roleId}/rights`, { rids: idStr })
      if(result.meta.status ! = =200) return this.$message.error('Permission assignment failed! ')
      this.$message.success('Permission assigned successfully')
      this.getRolesList()
      this.setRightDialogVisible = false}}}</script>

<style scoped>
.el-tag {
  margin: 7px;
}
.bdtop {
  border-top: 1px solid #eee;
}
.bdbottom {
  border-bottom: 1px solid #eee;
}
.vcenter {
  display: flex;
  align-items: center;
}
</style>

Copy the code

5. Complete the user management – User list – Assign roles function users.vue

5.1 Render the dialog box for assigning roles and request role list data

<! -- Assign roles dialog box -->
<el-dialog
  title="Assign roles"
  :visible.sync="setRoleDialogVisible"
  width="50%"
>
  <! Content body area -->
  <div>
    <p>Current user: {{userinfo.username}}</p>
    <p>Current role: {{userinfo.role_name}}</p>
  </div>
  <! -- Bottom area -->
  <span slot="footer" class="dialog-footer">
    <el-button @click="setRoleDialogVisible = false">Take away</el-button>
    <el-button type="primary" @click="setRoleDialogVisible = false">determine</el-button>
  </span>
</el-dialog>
Copy the code

<! Assign role button add message prompt -->
<el-tooltip>
  <el-button @click="setRole(scope.row)"></el-button>
</el-tooltip>
Copy the code

// Control the role assignment dialog box to show and hide
setRoleDialogVisible: false.// Information about users to be assigned roles
userInfo: {}
// Data list for all roles
rolesList: []
Copy the code

// Display a dialog box for assigning roles
setRole(userInfo) {
  this.userInfo = userInfo
  
  // Get the list of all roles before displaying the dialog
  const { data: result } = await this.$http.get('roles')
  if(result.meta.status ! = =200) return this.$message.error('Failed to get role list! ')
  this.$message.success('Obtaining the role list succeeded! ')
  this.rolesList = result.data

  this.setRoleDialogVisible = true
}
Copy the code

5.2 Render character List select drop-down menu

<p>Assign new roles:<el-select v-model="selectedRoleId" placeholder="Please select">
    <el-option v-for="item in rolesList" :key="item.id" :label="item.roleName" :value="item.id">
    </el-option>
  </el-select>
</p>
Copy the code

  // The selected role ID
  selectedRoleId: ' '
Copy the code

5.3 Assigning Roles

<el-button type="primary" @click="saveRoleInf">determine</el-button>
Copy the code

// Click the button to assign roles
async saveRoleInf() {
  if (!this.selectedRoleId) {
    return this.$message.error('Please choose a character! ')}const { data: result } = await this.$http.put(`users/The ${this.userInfo.id}/role`, { rid: this.selectedRoleId })
  if(result.meta.status ! = =200) {
    return this.$message.error('Update character failed! ')}this.$message.success('Update character succeeded! ')
  // Refresh the current role list
  this.getUserList()
  // Hide the current role assignment dialog box
  this.setRoleDialogVisible = false
}
Copy the code

<! -- Assign roles dialog box -->
<el-dialog
  @close="setRoleDialogClosed"
>
Copy the code

// Listen for the close event of the Assign Roles dialog box
setRoleDialogClosed() {
  this.selectedRoleId = ' '
  this.userInfo = {}
}
Copy the code

6. Submit code

git branch
Copy the code

git add .
Copy the code

git commit -m "Completed the development of the permissions function."
Copy the code

git push
Copy the code

git checkout master
Copy the code

git merge rights
Copy the code

git push
Copy the code

The address of the project: https://gitee.com/ykang2020/vue_shop

Finally, welcome to pay attention to my column and make good friends with YK bacteria!

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

【Vue】 Actual combat project: e-commerce background management system (3) authority management module

1. Rights management service analysis

2. Permission list

2.1 Displaying permission list components through routes

2.2 Breadcrumb navigation + Card view

2.3 Invoking the API to Obtain permission List data

2.4 UI structure of rendering permission list

3. Role list

3.1 Displaying role List Components through Routes

3.2 Draw the basic layout structure and get the list data

3.3 Render character list data

3.4 Adding a Role + Editing a Role + Deleting a Role

3.5 Render level 1 permissions through the level 1 for loop

3.6 Beautify the UI structure of level 1 permissions

3.7 Render level 2 and level 3 permissions through layer 2 and Layer 3 for loops

3.8 Beautify the UI structure

3.9 Click Delete Permission

4. Assign rights

4.1 A dialog box is displayed asking for data

4.2 Configuring and Using the El-tree Tree Control

4.3 Optimize the display effect of tree controls

4.4 Existing Rights Selected by default

4.5 Resetting the defKeys array when closing the dialog box

4.6 Invoking the API To Assign Permissions

Roles.vue Complete code

5. Complete the user management – User list – Assign roles function users.vue

5.1 Render the dialog box for assigning roles and request role list data

5.2 Render character List select drop-down menu

5.3 Assigning Roles

6. Submit code

【Vue】 Actual combat project: e-commerce background management system (3) authority management module

1. Rights management service analysis

2. Permission list

2.1 Displaying permission list components through routes

2.2 Breadcrumb navigation + Card view

2.3 Invoking the API to Obtain permission List data

2.4 UI structure of rendering permission list

3. Role list

3.1 Displaying role List Components through Routes

3.2 Draw the basic layout structure and get the list data

3.3 Render character list data

3.4 Adding a Role + Editing a Role + Deleting a Role

3.5 Render level 1 permissions through the level 1 for loop

3.6 Beautify the UI structure of level 1 permissions

3.7 Render level 2 and level 3 permissions through layer 2 and Layer 3 for loops

3.8 Beautify the UI structure

3.9 Click Delete Permission

4. Assign rights

4.1 A dialog box is displayed asking for data

4.2 Configuring and Using the El-tree Tree Control

4.3 Optimize the display effect of tree controls

4.4 Existing Rights Selected by default

4.5 Resetting the defKeys array when closing the dialog box

4.6 Invoking the API To Assign Permissions

Roles.vue Complete code

5. Complete the user management – User list – Assign roles function users.vue

5.1 Render the dialog box for assigning roles and request role list data

5.2 Render character List select drop-down menu

5.3 Assigning Roles

6. Submit code

Related Posts

ES6+ new Common content summary (5)

7 days punching -VuePress

JS to determine whether a value is of type Boolean