阅读 47

电商后台管理项目-用户列表实现

一、通过路由的形式展示用户列表组件

1.在component下创建users文件夹,下有users.vue组件

<template>
  <div>用户列表组件</div>
</template>
<script>
export default {
  data: () => ({})
}
</script>
<style lang="less" scoped>
</style>

复制代码

2.配置users的路由,因为用户列表组件显示在home组件中,所以users的路由应该设置在home的children属性中

import Users from '../components/users/Users.vue'

  {
    path: '/home',
    component: Home,
    redirect: '/welcome',
    children: [
      {
        path: '/welcome',
        component: Welcome
      },
      {
        path: '/users',
        component: Users
      }
    ]
  }
复制代码
  • 点击用户列表二级菜单,跳转到用户列表组件

image.png

二、在sessionStorage中保存左侧菜单的激活状态(点击后保持高亮)

1.给menu绑定default-active属性

<el-menu
            background-color="#333744"
            text-color="#fff"
            active-text-color="#409EFF"
            unique-opened
            :collapse="isCollapse"
            :collapse-transition="false"
            router
            :default-active="activePath"
          >
复制代码

2.给二级菜单设置点击事件

<el-menu-item
                :index="'/' + subitem.path"
                v-for="subitem in item.children"
                :key="subitem.id"
                @click="getNavState('/' + subitem.path)"
              >
复制代码
    // 点击二级菜单存储路由path,使高亮
    getNavState(activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
    }
复制代码

3.data里设置activePath属性值

    data: () => ({
    menulist: [],
    iconlist: {
      125: 'el-icon-user-solid',
      103: 'el-icon-present',
      101: 'el-icon-s-goods',
      102: 'el-icon-s-order',
      145: 'el-icon-monitor'
    },
    isCollapse: false,
    activePath: ''
  }),
复制代码

4.当页面加载时,就触发activePath属性(刷新后也照样高亮)

  created() {
    this.getMenuList()
    this.activePath = window.sessionStorage.getItem('activePath')
  },
复制代码

Home.vue

<template>
  <div class="home">
    <el-container class="home-conatiner">
      <!-- 头部区域 -->
      <el-header>
        <div>
          <img src="../assets/logo.png" alt="" />
          <span>电商后台管理系统</span>
        </div>
        <el-button type="info" @click="outlogin">退出登录</el-button>
      </el-header>
      <!-- 页面主体区域 -->
      <el-container>
        <!-- 侧边栏(左) -->
        <el-aside :width="isCollapse ? '64px' : '200px'">
          <!-- 菜单区域 -->
          <div class="toggle-button" @click="toggle">|||</div>
          <el-menu
            background-color="#333744"
            text-color="#fff"
            active-text-color="#409EFF"
            unique-opened
            :collapse="isCollapse"
            :collapse-transition="false"
            router
            :default-active="activePath"
          >
            <!-- 一级菜单 -->
            <el-submenu
              :index="item.id + ''"
              v-for="item in menulist"
              :key="item.id"
            >
              <!-- 一级菜单模板区域 -->
              <template slot="title">
                <i :class="iconlist[item.id]"></i>
                <span>{{ item.authName }}</span>
              </template>
              <!-- 二级菜单 -->
              <!-- :index="'/' + subitem.path": 二级菜单的跳转路径 -->
              <el-menu-item
                :index="'/' + subitem.path"
                v-for="subitem in item.children"
                :key="subitem.id"
                @click="getNavState('/' + subitem.path)"
              >
                <!-- 二级菜单模板区域 -->
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>{{ subitem.authName }}</span>
                </template>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 右侧内容主体 -->
        <el-main>
          <!-- 路由占位符 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  data: () => ({
    menulist: [],
    iconlist: {
      125: 'el-icon-user-solid',
      103: 'el-icon-present',
      101: 'el-icon-s-goods',
      102: 'el-icon-s-order',
      145: 'el-icon-monitor'
    },
    isCollapse: false,
    activePath: ''
  }),
  created() {
    this.getMenuList()
    this.activePath = window.sessionStorage.getItem('activePath')
  },
  methods: {
    // 退出登录
    outlogin() {
      // 清除token
      window.sessionStorage.clear()
      // 跳转到登录页面
      this.$router.push('/login')
    },
    // 获取左侧所有菜单
    async getMenuList() {
      // 结构数据data,并取名为res
      const { data: res } = await this.$http.get('menus')
      // console.log(res)
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.menulist = res.data
      // console.log(this.menulist)
    },
    // 点击按钮 切换菜单 折叠展开
    toggle() {
      this.isCollapse = !this.isCollapse
    },
    // 点击二级菜单存储路由path,使高亮
    getNavState(activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
    }
  }
}
</script>
<style lang="less" scoped>
.home {
  height: 100%;
  .home-conatiner {
    height: 100%;
    .el-header {
      background-color: #373d41;
      align-items: center;
      display: flex;
      justify-content: space-between;
      div {
        display: flex;
        justify-content: start;
        align-items: center;
        img {
          width: 60px;
          height: 60px;
          background-color: white;
          border-radius: 50%;
        }
        span {
          font-size: 20px;
          color: white;
          padding-left: 30px;
        }
      }
      .el-button {
      }
    }
    .el-aside {
      background-color: #333744;
      .el-menu {
        border: none;
      }
      .toggle-button {
        line-height: 24px;
        background-color: #4a5064;
        border: none;
        color: white;
        text-align: center;
        letter-spacing: 0.2em;
        cursor: pointer;
      }
    }
    .el-main {
      background-color: #eaedf1;
    }
  }
}
</style>

复制代码

三、绘制用户列表组件的基础布局结构

image.png

  • users.vue
<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card class="box-card">
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入内容">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary">添加用户</el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
export default {
  data: () => ({})
}
</script>
<style lang="less" scoped>
</style>

复制代码

四、获取用户列表数据

1.在页面加载时就获取数据

  created() {
    this.getUsersList()
  },
复制代码

2.定义获取用户列表数据的函数

  methods: {
    async getUsersList() {
      const { data: res } = await this.$http.get('users', { params: this.queryInfo })
      if (res.meta.status !== 200) {
        return this.$message.error('获取用户列表失败!')
      }
      this.userslist = res.data.users
      this.total = res.data.total
      console.log(res)
    }
  }
复制代码

3.data里存放数据

  data: () => ({
    queryInfo: {
      query: '',
      pagenum: 1,
      pagesize: 2
    },
    userslist: [],
    total: 0
  }),
复制代码

五、渲染用户列表

  • 使用el-table组件,根据api文档中的属性渲染数据(prop="username")
<!-- 用户列表 -->
      <el-table :data="userslist" border="1">
        <el-table-column prop="username" label="用户名"> </el-table-column>
        <el-table-column prop="mobile" label="电话"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="role_name" label="角色"> </el-table-column>
        <el-table-column prop="mg_state" label="状态"> </el-table-column>
        <el-table-column prop="" label="操作"> </el-table-column>
      </el-table>
复制代码

image.png

六、为表格添加索引列

  • 只要在表格属性一列添加type="index"就可以了
<!-- 用户列表 -->
      <el-table :data="userslist" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="username" label="用户名"> </el-table-column>
        <el-table-column prop="mobile" label="电话"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="role_name" label="角色"> </el-table-column>
        <el-table-column prop="mg_state" label="状态"> </el-table-column>
        <el-table-column prop="" label="操作"> </el-table-column>
      </el-table>
复制代码

七、自定义状态列的显示效果(使用作用域插槽)

    <el-table-column label="状态">
          <template slot-scope="scope">
            <!-- 可以获取一整行的数据 -->
            <!-- {{ scope.row }} -->
            <el-switch v-model="scope.row.mg_state"> </el-switch>
          </template>
        </el-table-column>
复制代码
  • slot-scope="scope",其中{{ scope.row }}可以获取一整行的数据

八、通过作用域插槽渲染操作列

    <el-table-column prop="" label="操作" width="180px">
          <!-- 编辑按钮 -->
          <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
          <!-- 删除按钮 -->
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
          ></el-button>
          <!-- 设置按钮 -->
          <el-tooltip
            class="item"
            effect="dark"
            content="分配角色"
            placement="top"
            :enterable="false"
          >
            <el-button
              type="warning"
              icon="el-icon-setting"
              size="mini"
            ></el-button>
          </el-tooltip>
        </el-table-column>
复制代码
  • enterable 鼠标是否可进入到 tooltip 中

九、实现分页效果

1.引入分页组件,并分析该组件中的属性的作用,绑定数据

<!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 3, 4]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
复制代码

2.定义其中的两个函数

    // 显示多少条数据
    handleSizeChange(newsize) {
      console.log(newsize)
    },
    // 显示当前页面
    handleCurrentChange(newpage) {
      console.log(newpage)
    }
复制代码

3.实现函数

    // 监听 pagesize 改变的事件
    handleSizeChange(newsize) {
      this.queryInfo.pagesize = newsize
      this.getUsersList()
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(newpage) {
      this.queryInfo.pagenum = newpage
      this.getUsersList()
    }
复制代码

十、修改用户状态

1.给el-switch组件添加change事件

    <el-switch
              v-model="scope.row.mg_state"
              @change="changeState(scope.row)"
            >
            </el-switch>
复制代码

2.实现change事件

        // 修改状态
    async changeState(state) {
      const { data: res } = await this.$http.put(`users/${state.id}/state/${state.mg_state}`)
      if (res.meta.status !== 200) {
        state.my_state = !state.my_state
        return this.$message.error('设置用户状态失败')
      }
      this.$message.success('修改用户状态成功!')
    }
复制代码
  • 通过组件中scope.row传递数据,根据api文档修改状态this.http.put(users/http.put(`users/{state.id}/state/state.mgstate),此时返回的是一个Promise对象,要用async/await,则能够返回真实数据,并用data:res来解构数据,当res.meta.status!==200时,则修改失败,此时,虽然在数据库中修改失败,但是页面上以显示修改后的状态,所以要先把转态改回原始状态(state.mystate=!state.mystate),并通过returnthis.{state.mg_state}`),此时返回的是一个Promise对象,要用async/await,则能够返回真实数据,并用 {data:res} 来解构数据,当res.meta.status !== 200时,则修改失败,此时,虽然在数据库中修改失败,但是页面上以显示修改后的状态,所以要先把转态改回原始状态(state.my_state = !state.my_state),并通过return this.message.error('设置用户状态失败'),提示修改状态失败。若res.meta.status !== 200,则this.$message.success('修改用户状态成功!')。

十一、实现搜索功能

1.给输入框绑定数据

    queryInfo: {
      // 查询参数
      query: '',
      // 当前的页数
      pagenum: 1,
      // 当前每页显示多少条数据
      pagesize: 2
    },


<el-input placeholder="请输入内容" v-model="queryInfo.query">
复制代码

2.给搜索按钮添加点击事件,点击后根据搜索字段获取用户列表

            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getUsersList"
            ></el-button>
复制代码

3.优化功能,使能够清空输入框,并且在清空输入框的时候重新获取用户列表

  • 1.给input输入框添加clearable可清空属性
<el-input placeholder="请输入内容" v-model="queryInfo.query" clearable>
复制代码

image.png

  • 2.给输入框绑定clear事件(clear,在点击由 clearable 属性生成的清空按钮时触发)
 <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUsersList">
复制代码

十二、渲染添加用户的对话框

1.引入el-dialog对话框组件

    <!-- 弹出添加用户弹框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
复制代码

2.给添加用户按钮添加点击事件

    <el-button type="primary" @click="dialogVisible = true"
            >添加用户</el-button
          >
复制代码
  • dialogVisible 控制页面显示隐藏

十三、渲染添加用户的表单

1.引入el-form组件,并修改其中的属性,把需要用到的属性放到data中

     <!-- 内容主体区(表单) -->
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="70px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <el-input v-model="addForm.phone"></el-input>
        </el-form-item>
      </el-form>
复制代码
  • data
    data: () => ({
    queryInfo: {
      // 查询参数
      query: '',
      // 当前的页数
      pagenum: 1,
      // 当前每页显示多少条数据
      pagesize: 2
    },
    // 用户列表
    userslist: [],
    total: 0,
    // 弹出对话框
    dialogVisible: false,
    // 表单属性
    addForm: {
      username: '',
      password: '',
      email: '',
      phone: ''
    },
    // 表单验证规则
    addFormRules: {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入活动名称', trigger: 'blur' },
        { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
      ],
      email: [
        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
      ],
      phone: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 11, max: 11, message: '长度为11字符', trigger: 'blur' }
      ]
    }
  }),
复制代码

十四、自定义邮箱和手机号的验证规则(此处我自己未使用)

1.在data中定义一个箭头函数用来自定义验证规则

image.png

2.在addFormRules中通过validator使用自定义的规则

image.png

十五、实现添加表单的重置操作

1.监听对话框的close事件:@close="addDialogClose"

    <!-- 弹出添加用户弹框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      @close="addDialogClose"
    >
复制代码

2.触发对话框的close事件后,通过调用resetFields方法,清空表单

    // 监听对话框dialog的关闭事件
    addDialogClose() {
      this.$refs.addFormRef.resetFields()
    }
复制代码

十六、实现添加表单用户前的表单预验证

1.给确定按钮添加点击事件

<!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
复制代码

2.实现点击事件

    // 点击添加用户
    addUser() {
      this.$refs.addFormRef.validate(valid => {
        // console.log(valid)
        if (!valid) return this.$message.error('验证不通过')
        this.$message.success('验证通过')
      })
    }
复制代码

十七、调用api接口实现添加用户操作

    // 点击添加用户
    addUser() {
      this.$refs.addFormRef.validate(async valid => {
        // console.log(valid)
        if (!valid) return this.$message.error('验证不通过')
        // this.$message.success('验证通过')
        // 可以发起添加用户的网络请求
        const { data: res } = await this.$http.post('users', this.addForm)
        if (res.meta.status !== 201) {
          return this.$message.error('添加用户失败')
        }
        this.$message.success('添加用户成功')
        this.dialogVisible = false
        this.getUsersList()
      })
    }
复制代码

十八、展示修改用户的对话框

1.引入dialog组件

    <!-- 弹出修改用户对话框 -->
    <el-dialog title="修改用户" :visible.sync="editdialogVisible" width="30%">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editdialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
复制代码

2.将editdialogVisible放入data中,且为false(默认关闭对话框),用于控制对话框的显示隐藏,并为修改按钮添加点击事件,点击后设置editdialogVisible属性值为true(弹出对话框)

<!-- 编辑按钮 -->
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="editUser"
          ></el-button>
复制代码
    // 点击修改用户
    editUser() {
      this.editdialogVisible = true
    }
复制代码

十九、根据id查询对应的用户信息

1.为用户列表中操作一栏添加template,并传递数据(id)

image.png

    <el-table-column prop="" label="操作" width="180px">
          <template slot-scope="scope">
            <!-- 编辑按钮 -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="editUser(scope.row.id)"
            ></el-button>
            <!-- 删除按钮 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
            ></el-button>
            <!-- 设置按钮 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="分配角色"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="warning"
                icon="el-icon-setting"
                size="mini"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
复制代码

2.调用接口查询用户信息,并将查询到的信息保存到editForm中(editForm定义在data中,是一个数组)

//data中:
    // 查询到的用户信息
    editForm: []


        // 点击修改用户
    async editUser(id) {
      // console.log(id)
      const { data: res } = await this.$http.get('users/' + id)
      this.editForm = res.data
      console.log(this.editForm)
      this.editdialogVisible = true
    }
复制代码

二十、渲染修改用户的表单

1.引入form组件,并修改其中的属性

    <el-form
        :model="editForm"
        :rules="editFormRules"
        ref="editFormRef"
        label-width="100px"
      >
        <el-form-item label="用户名">
          <el-input v-model="editForm.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="editForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
      </el-form>
复制代码

2. 在data中定义editForm,用来存放用户数据,定义editFormRules用来验证手机号码和邮箱(需要验证的el-form-item要有prop属性)

        // 修改
    // 查询到的用户信息
    editForm: {},
    editFormRules: {
      mobile: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 11, max: 11, message: '长度为11字符', trigger: 'blur' }
      ],
      email: [
        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
      ]
    }
复制代码

二十一、实现修改用户表单的重置(同上)

二十二、完成提交修改之前的表单验证(同上)

二十三、提交表单完成用户信息的修改

  • 修改后的数据都保存在editForm中
       // 点击修改用户
    editUserInfo() {
      this.$refs.editFormRef.validate(async valid => {
      // 预验证
        if (!valid) return this.$message.error('用户信息验证失败')
        // 发起修改用户信息的请求
        const { data: res } = await this.$http.put('users/' + this.editForm.id, { email: this.editForm.email, mobile: this.editForm.mobile })
        if (res.meta.status !== 200) return this.$message.error('修改用户信息失败')
        // 关闭对话框
        this.editdialogVisible = false
        // 重新获取用户信息列表
        this.getUsersList()
        // 提示修改用户信息成功
        return this.$message.success('修改用户信息成功!')
      })
    }
复制代码

二十四、弹框询问是否确认删除用户

1. 添加删除事件

            <!-- 删除按钮 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="deleteUser(scope.row.id)"
            ></el-button>
复制代码

2.实现删除事件

1. 引入$confirm组件,定义一个变量confirmResult用来存储触发删除函数后弹出的提示框中的取消和确认的值,如果点击取消,则confirmResult=cancel,如果点击确定,则confirmResult=confirm

image.png

2. 根据confirmResult的值进行不同的操作,如果confirmResult!==confirm,则显示已取消删除,如果confirmResult==confirm,则调用接口进行删除操作

       // 根据id删除用户信息
    async deleteUser(id) {
      const confirmResult = await this.$confirm('是否确认删除用户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)

      console.log(confirmResult)
      // 如果用户确认删除,则返回字符串confirm
      // 如果用户取消了删除,则返回字符串cancel
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除!')
      }

      const { data: res } = await this.$http.delete('users/' + id)
      if (res.meta.status !== 200) return this.$message.error('删除用户失败!')
      this.$message.success('删除用户成功!')
      this.getUsersList()
    }
复制代码

二十五、创建user分支,并提交代码到远程仓库

    1. 开启一个新的终端
    1. git branch查看当前所处分支
    1. 创建user分支:git checkout -b user
    1. git branch查看当前所处分支
    1. git status查看状态
    1. git add . 添加到暂停区
    1. git commit -m '完成用户列表功能':提交到仓库中
    1. git status查看状态
    1. 把本地的user分支推送到云端的user分支:git push -u origin user
    1. 切换到主分支:git checkout master
    1. 在主分支进行代码合并(合并user分支到master分支):git merge user
    1. 提交到远程仓库:git push

image.png

二十六、渲染分配角色的对话框,并请求角色列表的数据

    1. 点击分配角色按钮弹出对话框
<!-- 设置按钮 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="分配角色"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="warning"
                icon="el-icon-setting"
                size="mini"
                @click="setRoles(scope.row)"
              ></el-button>
            </el-tooltip>
复制代码

data中

    // 分配角色对话框的显示隐藏
    setRoledialogVisible: false
复制代码

methods中

    // 分配角色
    setRoles(userInfo) {
      // 显示分配角色对话框
      this.setRoledialogVisible = true
    }
复制代码
    1. 获取列表数据并渲染到对话框中
    // // 显示分配角色的对话框
    async setRoles(userInfo) {
      // 获取用户数据并存放到data中的userInfo
      this.userInfo = userInfo
      // 在展示对话框之前,获取所有角色的列表
      const { data: res } = await this.$http.get('roles')
      if (res.meta.status !== 200) {
        return this.$message.error('获取角色列表失败')
      }
      this.rolesList = res.data
      console.log(this.rolesList)
      // 显示分配角色对话框
      this.setRoledialogVisible = true
    }
复制代码

data中

    // 获取到的用户列表数据,用来渲染到对话框中(需要被分配角色的用户的信息)
    userInfo: {}
    // 所有角色的数据列表
    rolesList: [],
复制代码

将数据渲染到页面上

<!-- 分配角色对话框 -->
    <el-dialog
      title="分配角色"
      :visible.sync="setRoledialogVisible"
      width="30%"
    >
      <div>
        <p>用户名:{{ userInfo.username }}</p>
        <p>角色:{{ userInfo.role_name }}</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
复制代码
  • 渲染对话框中的选择角色部分
      1. 引入el-select组件(v-model:绑定下拉菜单中选中的角色名,即点击角色名后显示到select框中)
    data中:
        // 已选中的角色id
    selectedRoleId: ''
    复制代码
    渲染:
    <div>
        <p>用户名:{{ userInfo.username }}</p>
        <p>角色:{{ userInfo.role_name }}</p>
        <p>
          分配新角色:
          <el-select v-model="selectedRoleId" placeholder="请选择">
            <el-option
              v-for="item in rolesList"
              :key="item.id"
              :label="item.roleName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </p>
      </div>
    复制代码
    1. 完成分配角色的功能
      1. 给确定按钮添加事件 @click="saveRoleInfo"
        <!-- 分配角色对话框 -->
     <el-dialog
       title="分配角色"
       :visible.sync="setRoledialogVisible"
       width="40%"
     >
       <div>
         <p>用户名:{{ userInfo.username }}</p>
         <p>角色:{{ userInfo.role_name }}</p>
         <p>
           分配新角色:
           <el-select v-model="selectedRoleId" placeholder="请选择">
             <el-option
               v-for="item in rolesList"
               :key="item.id"
               :label="item.roleName"
               :value="item.id"
             >
             </el-option>
           </el-select>
         </p>
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button @click="setRoledialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="saveRoleInfo">确 定</el-button>
       </span>
     </el-dialog>
    复制代码
      1. 定义方法saveRoleInfo
    // 点击确定按钮,分配角色
     async saveRoleInfo() {
       if (!this.selectedRoleId) {
         return this.$message.error('请选择要分配的角色!')
       }
       const { data: res } = await this.$http.put(`users/${this.userInfo.id}/role`, {
         rid: this.selectedRoleId
       })
       console.log(res)
       if (res.meta.status !== 200) {
         return this.$message.error('更新角色失败!')
       }
       this.$message.success('更新角色成功!')
       this.getUsersList()
       this.setRoledialogVisible = false
     }
    复制代码
      1. 优化(在一次分配角色完成后,清空select框中的内容)
    给对话框添加关闭事件
    <!-- 分配角色对话框 -->
     <el-dialog
       title="分配角色"
       :visible.sync="setRoledialogVisible"
       width="40%"
       @close="setRoleDialogClosed"
     >
    复制代码
    当对话框关闭时,清空选中的select中的角色名称以及用户信息
        // 监听分配角色对话框的关闭事件
     setRoleDialogClosed() {
       this.selectedRoleId = ''
       this.userInfo = {}
     }
    复制代码
文章分类
前端
文章标签