二级页面 - 角色管理 - 《前端知识库》

数据获取
增加角色
删除功能
编辑功能

<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 新增角色按钮 -->
        <el-row style="height:60px">
          <el-button
            icon="el-icon-plus"
            size="small"
            type="primary"
          >新增角色</el-button>
        </el-row>
        <!-- 表格 -->
        <el-table>
          <el-table-column label="序号" width="120" />
          <el-table-column label="角色名称" width="240" />
          <el-table-column label="描述" />
          <el-table-column label="操作" width="240" fixed="right">
            <template>
              <el-button size="small">分配权限</el-button>
              <el-button size="small">编辑</el-button>
              <el-button size="small" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <!-- 分页组件 -->
          <el-pagination layout="prev,pager,next" />
        </el-row>
      </el-card>
    </div>
  </div>
</template>

数据获取

/**
 * @description: 获取角色列表
 * @param {*} params:{page 页码, pagesize 每页的条数}
 * @return {*}
 */
export function getRoleListApi(params) {
  return request({
    method: 'get',
    url: '/sys/role',
    params
  })
}

el-table-column 中 prop属性绑定表格当前列渲染的数据接口需要数据先定义一个假数据获取到真实数据在将数据更改

export default {
  data() {
    return {
      total: 0,
      list: [],
      parmas: {
        page: 1, // 页码
        pagesize: 5 // 每页显示条数
      },
    }
  },
  mounted() {
    this.getRoleList() // 获取角色列表
  },
  methods: {
    // 获取角色列表
    async getRoleList() {
      const { data } = await getRoleListApi(this.parmas)
      // console.log(data)
      this.list = data.rows
      this.total = data.total
    }
  }
}

添加分页器

page-size 绑定每页显示的条数 total 绑定数据总数 @current-change=”currentChange” 可以获取到当前页面的页数根据当前页面页数调用接口查看不同的数据

<!-- 分页组件 -->
<el-row type="flex" justify="center" align="middle" style="height: 60px">
  <!-- 分页组件 -->
  <el-pagination :page-size="parmas.pagesize" :total="total" layout="prev,pager,next" @current-change="currentChange" />
        </el-row>

// 切换分页展示不同页数的数据
currentChange(page) {
  // console.log(page)
  // 获取到当前点击的页数
  this.parmas.page = page
  // 重新获取列表
  this.getRoleList(this.parmas)
    },

增加角色

封装一个弹层模块

利用父传子子传父来控制弹层的打开关闭子传父的本质：子组件发送一个通知给父组件调用父组件的一个方法可以不用传参父传子的注意点：数据类型必须匹配以type为主

<template>
  <!-- 新增弹框 -->
  <el-dialog :visible="showDialog" title="编辑弹层" @close="closeRoleDialog">
    <!-- 表单内容 -->
    <el-form ref="roleForm" :model="roleForm" :rules="rules" label-width="100px">
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="roleForm.name" />
      </el-form-item>
      <el-form-item label="角色描述" prop="description">
        <el-input v-model="roleForm.description" />
      </el-form-item>
    </el-form>
    <!-- 底部 -->
    <el-row slot="footer" type="flex" justify="center">
      <el-button size="small" @click="cancel">取消</el-button>
      <el-button size="small" type="primary" @click="confirm">确定</el-button>
    </el-row>
  </el-dialog>
</template>
<script>
import { addRoleApi } from '@/api/setting'
export default {
  props: {
    showDialog: {
      type: Boolean
    }
  },
  data() {
    return {
      roleForm: {
        name: '',
        description: ''
      },
      rules: {
        name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
        description: [{ required: true, message: '角色描述不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 关闭弹层 (子传父)
    closeRoleDialog() {
      this.$emit('close_dialog')
    },
    // 点击确定触发
    confirm () {
      // 表单校验
      this.$refs.roleForm.validate(async isOk => {
        if (isOk) {
          try {
            // 提交数据
            await addRoleApi(this.roleForm)
            // 关闭弹层
            // this.closeRoleDialog()
            this.$emit('close_dialog')
            // 提示用户
            this.$message.success('新增角色成功')
            // 更新列表数据
            this.$emit('update_list')
            // 重置表单
            this.resteForm
          } catch (error) {
            this.$message.error(error)
          }
        }
      })
    },
    // 点击取消触发
    cancel() {
      this.resteForm()
    },
    // 重置表单
    resteForm() {
      this.closeRoleDialog()
      this.$refs.roleForm.resetFields()
      this.roleForm = {
        name: '',
        description: ''
      }
    }
  }
}
</script>
<style>
</style>

<!-- 弹层组件 -->
<AddDailong 
            :show-dialog="isShow" 
            @close_dialog="closeRoleDialog"
            @update_list="updateList"
/>
<script>
import AddDailong from './components/addDailog.vue'
import { getRoleListApi } from '@/api/setting'
export default {
  components: {
    AddDailong
  },
  data() {
    return {
      total: 0,
      list: [],
      parmas: {
        page: 1, // 页码
        pagesize: 5 // 每页显示条数
      },
      // 弹层组件的显隐
      isShow: false
    }
  },
  mounted() {
    this.getRoleList() // 获取角色列表
  },
  methods: {
    // 更新列表数据 子传父
    updateList() {
      this.getRoleList()
    },
    // 关闭弹层自定义事件
    closeRoleDialog () {
      this.isShow = false
    },
    // 获取角色列表
    async getRoleList() {
      const { data } = await getRoleListApi(this.parmas)
      // console.log(data)
      this.list = data.rows
      this.total = data.total
    },
  }
}
</script>
</script>

删除功能

根据id删除角色通过#default=”{row}”获取当前数据传入row.id到删除函数内

// 删除角色
/**
 *
 * @param {*} id 当前行的id
 * @returns
 */
export const delRoleApi = (id) => request.delete(`/sys/role/${id}`)

// 删除功能
    delRole(id) {
      try {
        this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消' }).then(() => {
        }).then(async () => {
          // 点击确定执行的代码
          await delRoleApi(id)
          this.$message.success('删除成功')
          // 重新获取列表
          this.getRoleList(this.parmas)
        }).catch(() => {
          // 点击取消执行的代码
        })
      } catch (error) {
        this.$message.error(error)
      }
    }

编辑功能

// 根据id获取角色信息
export const getRoleApi = (id) => request.get(`/sys/role/${id}`)
// 根据id修改角色信息
export const editRoleApi = (data) => request.put(`/sys/role/${data.id}`, data)

数据回填

将方法定义到弹层组件内在父组件内用ref获取组件实例，因为方法是定义在组件内可以通过组件实例直接调用

组件通信的弊端和 ref1. 组件通信的麻烦
组件的抽离必定会造成组件的嵌套组件的嵌套必定会引起组件通信
所谓的组件通信其实就是大家理解的父子通信兄弟通信 vuex
有一个要求组件的抽象要保证尽量少的组件通信通信的次数越多传递的数据越多就越容易出错
2. ref
获取到组件实例实例对象一旦被获取之后它身上的属性和方法就都可以随便用
this.$refs.form.validate
尽量不要更改属性你可以调用方法用方法[methods]去修改属性[data] 不要直接修改
ref这种命令式的操作手段可以在某些场景起到简化的作用但是不建议大规模使用破坏了数据流
可以少范围的使用减少组件通信成本

// 编辑功能
editRole(id) {
  // 打开弹层
  this.isShow = true
  // 数据回填 (获取组件实例 方法是定义在组件实例上的 直接调用组件上的方法  少用因为会破坏单项数据流)
  this.$refs.dialogRef.fetchDetail(id)
    }

async fetchDetail(id) {
      const res = await getRoleApi(id)
      this.roleForm = res.data
    }

数据回填时获取到的数据里面多出来一些属性这里使用id来判断是否数据回填是说明当前点击的是编辑按钮否是提交

 // 点击确定触发
    confirm () {
      // 表单校验
      this.$refs.roleForm.validate(async isOk => {
        if (isOk) {
          try {
            // 提交数据
            if (this.roleForm.id) {
              await editRoleApi(this.roleForm)
            } else {
              await addRoleApi(this.roleForm)
            }
            // 关闭弹层
            // this.closeRoleDialog()
            this.$emit('close_dialog')
            // 提示用户
            this.$message.success(`${this.roleForm.id ? '修改' : '新增'}角色成功`)
            // 更新列表数据
            this.$emit('update_list')
            // 重置表单
            this.resteForm
          } catch (error) {
            this.$message.error(error)
          }
        }
      })
    },