iHRM人力资源 - 角色管理

一、搭建页面结构

如下图所示，角色管理模块的内容

主要就是table表格+分页组件

可以将代码放在这里

1.1 页面结构

<template>
  <div class="container">
    <div class="app-container">
      <!--角色管理的内容-->
      <div class="role-operate">
        <el-button size="mini" type="primary">添加角色</el-button>
      </div>
      <!--放置表格组件-->
      <el-table>
        <!--放置4列,align="center"表示居中对齐,"角色"列与"启用"列固定宽度-->
        <el-table-column align="center" width="200" label="角色"></el-table-column>
        <el-table-column align="center" width="200" label="启用"></el-table-column>
        <el-table-column align="center" label="描述"></el-table-column>
        <el-table-column align="center" label="操作"></el-table-column>
      </el-table>

      <!--放置分页组件-->
      <!--使用flex的方式对齐，然后再使用justify="end"表示尾部对齐-->
      <!--align="middle"表示垂直居中-->
      <el-row type="flex" justify="end" style="height: 60px" align="middle">
        <!--放置分页组件，并且在右下方-->
        <!--layout表示分页插件中显示的内容，并且用逗号分隔,"prev,pager,next"分别表示左箭头、数字面板、右箭头-->
        <el-pagination layout="prev,pager,next">

        </el-pagination>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Role'
}
</script>

<style scoped>

.role-operate {
  padding: 10px
}
</style>

效果图如下所示

1.2 获取角色数据

这一步我们要显示数据，如下图所示

可以按照如下所示的步骤

请求参数

/**
 * 获取角色列表
 */
export function getRoleList(params) {
  return request({
    url: '/sys/role',
    // 这个接口需要param形式的参数，其中param的值就是页码和每页的大小
    params: params // 查询参数
  })
}

1. 页面初始化时调用函数并赋值给数据

import { getRoleList } from '@/api/role'

export default {
  name: 'Role',
  data() {
    return {
      // 存储分页的数据
      list: []
    }
  },
  created() {
    this.getRoleList()
  },
  methods: {
    async getRoleList() {
      // 将返回结构中的rows内容提取出来
      const { rows } = await getRoleList()
      this.list = rows
    }
  }
}

2. 绑定表格

<!--放置表格组件-->
<!--:data="list" 绑定数据-->
<el-table :data="list">
  <!--放置4列,align="center"表示居中对齐,"角色"列与"启用"列固定宽度-->
  <el-table-column prop="name" align="center" width="200" label="角色"></el-table-column>
  <el-table-column prop="state" align="center" width="200" label="启用"></el-table-column>
  <el-table-column prop="description" align="center" label="描述"></el-table-column>
  <el-table-column align="center" label="操作"></el-table-column>
</el-table>

3. 效果图

发现两个问题，

问题1：“启用”列是数字，不是文字

问题2：“操作”列没有操作

所以我们需要自定义一下表格的列

1.3 自定义表格列

接下来我们要展示出如下图所示的结构

element-ui的表格里面可以传入我们的插槽的内容

我们根据数字1或者0展示文字的问题，我们可以使用作用域插槽

下图中，row表示行数据，column表示列数据，我们要行数据row就可以了

如下所示

<!--放置表格组件-->
<!--:data="list" 绑定数据-->
<el-table :data="list">
  <!--放置4列,align="center"表示居中对齐,"角色"列与"启用"列固定宽度-->
  <el-table-column prop="name" align="center" width="200" label="角色"></el-table-column>
  <el-table-column prop="state" align="center" width="200" label="启用">
    <!--插槽内传入我们自定义的列结构-->
    <!--是对象里面有row，所以我们{ row }解构一下数据-->
    <template v-slot="{ row }">
      <!-- 我们可以使用插值语法{{row}}看一下内容内容：{ "id": 1, "name": "系统管理员", "description": "管理整合平台，可以操作企业所有功能", "state": 1 }-->
      <span>{{ row.state === 1 ? '已启用' : row.state === 0 ? '未启用' : '无' }}</span>
    </template>
  </el-table-column>
  <el-table-column prop="description" align="center" label="描述"></el-table-column>
  <el-table-column align="center" label="操作">
    <!--在操作中放置三个按钮-->
    <template>
      <!--type = "text"是将按钮形态转换成链接形态-->
      <el-button size="mini" type="text">分配权限</el-button>
      <el-button size="mini" type="text">编辑</el-button>
      <el-button size="mini" type="text">删除</el-button>
    </template>
  </el-table-column>
</el-table>

效果图如下所示

1.4 分页功能

虽然我们之前写了分页组件，但是我们并没有写真正的页面，现在来完善一下

我们要做的分页形式，如下图所示

流程如下图所示

1. 绑定分页信息

<!--放置分页组件-->
<!--使用flex的方式对齐，然后再使用justify="end"表示尾部对齐-->
<!--align="middle"表示垂直居中-->
<el-row type="flex" justify="end" style="height: 60px" align="middle">
  <!--放置分页组件，并且在右下方-->
  <!--layout表示分页插件中显示的内容，并且用逗号分隔,"prev,pager,next"分别表示左箭头、数字面板、右箭头-->
  <!--page-size、current-page、total三个是分页数据-->
  <el-pagination
    :page-size="pageParams.pagesize"
    :current-page="pageParams.page"
    :total="pageParams.total"
    layout="prev,pager,next"
  >
  </el-pagination>
</el-row>

分页数据

data() {
  return {
    // 存储分页的数据
    list: [],
    // 将分页信息放到对象中，方便管理
    pageParams: {
      // 当前页默认是1
      page: 1,
      // 每页多少数据
      pagesize: 5,
      // 总数
      total: 0
    }
  }
}

2. 初始化时请求第一页

created() {
  this.getRoleList()
},
methods: {
  async getRoleList() {
    // 将返回结构中的rows内容提取出来，也提取出total总数字段
    const { rows, total } = await getRoleList(this.pageParams)
    this.list = rows
    this.pageParams.total = total
  }
}

3. 切换分页时请求对应数据

分页组件增加 @current-change事件，并调用changePage方法

<!--放置分页组件，并且在右下方-->
<!--layout表示分页插件中显示的内容，并且用逗号分隔,"prev,pager,next"分别表示左箭头、数字面板、右箭头-->
<!--page-size、current-page、total三个是分页数据-->
<!--事件@current-change触发时，会给我们传一个是哪一页的参数-->
<el-pagination
  :page-size="pageParams.pagesize"
  :current-page="pageParams.page"
  :total="pageParams.total"
  @current-change="changePage"
  layout="prev,pager,next"
>
</el-pagination>

// 会给我们传一个是哪一页的参数，在这里就是newPage
changePage(newPage) {
  this.pageParams.page = newPage
  this.getRoleList()
}

二、添加角色

效果及流程如下图所示

2.1 角色弹出层

按钮

<div class="role-operate">
  <!--添加点击事件-->
  <el-button @click="showDialog=true" size="mini" type="primary">添加角色</el-button>
</div>

数据

data() {
  return {
    // 控制添加弹层
    showDialog: false
      ........
  }
},

弹出层

<!--弹层-->
<!--sync的目的：当我们点击×号的时候，能把showDialog值改为false-->
<el-dialog width="500px" title="新增角色" :visible.sync="showDialog">
  <el-form label-width="120px">
    <el-form-item label="角色名称">
      <el-input style="width: 300px" size="mini"></el-input>
    </el-form-item>

    <el-form-item label="启用">
      <!--开关-->
      <el-switch size="mini"></el-switch>
    </el-form-item>

    <el-form-item label="角色描述">
      <!--文本域,行数为3行-->
      <el-input type="textarea" :rows="3" style="width: 300px" size="mini"></el-input>
    </el-form-item>

    <el-form-item>
      <!--为了让按钮居中，我们可以采用row和col组件来实现-->
      <el-row type="flex" justify="center">
        <el-col :span="12">
          <el-button type="primary" size="mini">确定</el-button>
          <el-button size="mini">取消</el-button>
        </el-col>
      </el-row>
    </el-form-item>
  </el-form>
</el-dialog>

效果图

2.2 表单校验

实现如下图所示的内容

绑定属性及校验规则

// 角色表单
roleForm: {
  // 名称
  name: '',
  // 描述
  description: '',
  // 是否启用，默认未启用状态
  state: 0
},
rules: {
  name: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }],
  description: [{ required: true, message: '角色描述不能为空', trigger: 'blur' }]
}

    <!--弹层-->
    <!--sync的目的：当我们点击×号的时候，能把showDialog值改为false-->
    <el-dialog width="500px" title="新增角色" :visible.sync="showDialog">
      <el-form ref="roleForm" :model="roleForm" label-width="120px" :rules="rules">
        <el-form-item prop="name" label="角色名称">
          <el-input v-model="roleForm.name" style="width: 300px" size="mini"></el-input>
        </el-form-item>
        <el-form-item prop="state" label="启用">
          <!--开关,此处不需要校验-->
          <!--开和关的默认值是true和false，但是我们需要的是1或者0，所以我们自定义一下 active-value="1" inactive-value="0"，表示开为1，关为0-->
          <el-switch v-model="roleForm.state" :active-value="1" :inactive-value
上一篇：双臂复合机器人平台叠方块例程使用与自启设置

下一篇：Mac多媒体播放器 Movist Pro v2.11.4中文激活版下载