spring boot+iview 前后端分离架构之角色管理布局和列表的实现（十六）

电玩女神 2021-12-19 19:57 262阅读 0赞

### spring boot 与 iview 前后端分离架构之角色管理布局和列表的实现（十六） ###

*  公众号
 *  角色管理

# 公众号 #

![在这里插入图片描述][20191218155125364.jpg]  
大家可以直接微信扫描上面的二维码关注我的公众号，然后回复【bg16】 里面就会给到源代码的下载地址同时会附上相应的视频教程，并定期在我的公众号上给大家推送相应的技术文章，欢迎大家关注我的公众号。

# 角色管理 #

通过上一章我们已经完成了我们的菜单管理模块的开发了，那么这章我们将开始讲解如何开发我们的角色模块，首先会给大家讲解角色管理的布局和列表，在下一章将会给大家讲解如何实现角色与菜单的权限的关联。  
打开我们的基于第十六章的工程然后在sys目录底下创建一个role目录如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]  
由于我们的角色列表有需要使用到时间的格式化显示，因此我们需要新增一个全局的时间格式化的方法，我们在main.js中加入以下的代码：

// 格式化时间全局通用方法
    Vue.prototype.formatDate = function (date, fmt) {
      let o = {
        'M+': date.getMonth() + 1, // 月份
        'd+': date.getDate(), // 日
        'h+': date.getHours(), // 小时
        'm+': date.getMinutes(), // 分
        's+': date.getSeconds(), // 秒
        'S': date.getMilliseconds() // 毫秒
      }
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      for (var k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
        }
      }
      return fmt
    }

接着在我们的role目录底下创建一个roleList.vue文件，该文件实现我们的角色管理的布局和列表的实现，代码如下：

<template>
      <div>
        <Card title="角色管理">
          <div>
            <div style="display:inline-block;float:left;">
              <Button type="success" @click="addRole">+新增角色</Button>
            </div>
            <div style="display:inline-block;float:right;">
              <Input v-model="search" suffix="ios-search" placeholder="请输入查询信息" style="width: auto"
                     :search=true @on-search="handleSearch"/>
            </div>
          </div>
          <div style="clear: both;"></div>
          <div style="margin-top: 10px;">
            <Table ref="roleTable" @on-sort-change="onSortChange" :columns="columns" :data="roleData" :height="tableHeight">
              <template slot-scope="{ row, index }" slot="roleName">
                <Input type="text" v-model="editRoleName" v-if="editIndex === index"/>
                <span v-else>{
       { row.roleName }}</span>
              </template>
    
              <template slot-scope="{ row, index }" slot="roleCode">
                <Input type="text" v-model="editRoleCode" v-if="editIndex === index"/>
                <span v-else>{
       { row.roleCode }}</span>
              </template>
    
              <template slot-scope="{ row, index }" slot="action">
                <div v-if="editIndex === index">
                  <Button size="small" type="success" @click="handleUpdate(index)">保存</Button>
                  <Button size="small" type="error" @click="editIndex = -1">取消</Button>
                </div>
                <div v-else>
                  <Button type="success" @click="handleEdit(row, index)" size="small">编辑</Button>
                  <Button type="primary" @click="handleModify(row)" size="small">修改</Button>
                  <Button type="error" @click="handleDelete(row, index)" size="small">删除</Button>
                </div>
              </template>
            </Table>
          </div>
          <div style="margin-top: 10px;">
            <Page show-elevator show-sizer show-total :total="total" :current="current"
                  :page-size="pageSize" @on-change="changePage" @on-page-size-change="changePageSize"/>
          </div>
        </Card>
      </div>
    </template>
    <script>
      import {queryRoleList, updateRole, deleteRole} from '../../../api/sys/role/role.api'
    
      export default {
        data() {
          return {
            addShow: false,
            editShow :false,
            roleId:'',
            search: '',
            roleData: [],
            columns: [
              {
                title: '角色名称',
                slot: 'roleName',
                key: 'roleName',
                sortable: true
              },
              {
                title: '角色编码',
                slot: 'roleCode',
                key: 'roleCode',
                sortable: true
              },
              {
                title: '创建时间',
                key: 'crtDate',
                sortable: true,
                render: (h,params)=>{
                  return h('div',
                    this.formatDate(new Date(params.row.crtDate),'yyyy/MM/dd hh:mm:ss')
                  )
                }
              },
              {
                title: '操作',
                slot: 'action'
              }
            ],
            total: 0,
            current: 1,
            pageSize: 10,
            key:'crtDate',
            order:'desc',
            editIndex: -1,  // 当前聚焦的输入框的行数
            editRoleId: '',
            editRoleName: '',
            editRoleCode: '',
            tableHeight:200
          }
        },
        methods: {
          addRole() {
            this.addShow = true
          },
          changePage(current) {
            this.current = current;
            this.handleSearch();
          },
          changePageSize(pageSize) {// 改变每页记录的条数
            this.pageSize = pageSize;
            this.handleSearch();
          },
          onSortChange(sort){
            if(sort.order=='normal'){
              this.order = '';
            }else{
              this.key = sort.key;
              this.order = sort.order;
            }
            this.handleSearch();
          },
          handleDelete(row, index) {
            this.$Modal.confirm({
              title: '删除角色',
              content: '<p>是否删除当前选中的角色</p>',
              onOk: () => {
                deleteRole({roleId: row.roleId}).then(res => {
                  if (res.code == 200) {
                    this.$Message.success(res.msg);
                    // 删除数据成功同时刷新grid
                    this.handleSearch();
                  } else {
                    this.$Message.warning(res.msg);
                  }
                });
              },
              onCancel: () => {
                this.$Message.info('取消');
              }
            });
          },
          handleUpdate(index) {
            updateRole({roleId: this.editRoleId, roleName: this.editRoleName, roleCode: this.editRoleCode}).then(res => {
              if (res.code == 200) {
                this.$Message.success(res.msg)
                this.editIndex = -1
                this.handleSearch()
              } else {
                this.$Message.error(res.msg)
              }
            });
          },
          handleModify(row){
            this.roleId = row.roleId
            this.editShow = true
          },
          handleEdit(row, index) {
            this.editRoleName = row.roleName;
            this.editRoleCode = row.roleCode;
            this.editRoleId = row.roleId
            this.editIndex = index
          },
          handleSearch() {
            let current = this.current
            let pageSize = this.pageSize
            let search = this.search
            let orderKey = this.key
            let orderByValue = this.order
            const _this = this;
            queryRoleList({
              current,
              pageSize,
              search,
              orderKey,
              orderByValue
            }).then(res => {
              if (res.code == 200) {
                this.$Message.success(res.msg)
                _this.total = res.obj.total
                _this.roleData = res.obj.rows
              } else {
                this.$Message.error(res.msg)
              }
            });
          }
        },
        mounted() {
          // 初始化完成组件的时候执行以下的逻辑
          this.handleSearch();
          this.tableHeight = window.innerHeight - this.$refs.roleTable.$el.offsetTop - 270
        }
      }
    </script>

然后我们再打开我们的router目录底下的router.js新增我们的角色管理的router的配置，再菜单管理的后面添加以下的代码：

{
              path: 'roleList',
              name: 'roleList',
              meta: {
                icon: 'ios-cog',
                title: '角色管理',
                code:'system-manage-role',
                requireAuth: true //表示当前响应的请求是否需要进行登录拦截验证【true：需要；false：不需要】
              },
              component: resolve => {
                require(['../view/sys/role/roleList.vue'], resolve);
              }
            }

最后我们打开我们的main.vue页面进行改造，改造完成以后的代码如下：

最后我们运行我们的项目，大家会看到如下的列表页面，则说明我们的角色管理就正常集成完成了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]  
到此处我们就完成了本章的代码了。  
上一篇文章地址：[spring boot+iview 前后端分离架构之菜单管理菜单的增删改的实现（十五）][spring boot_iview]  
下一篇文章地址：[spring boot+iview 前后端分离架构之角色管理增删改的实现（十七）][spring boot_iview 1]

[20191218155125364.jpg]: /images/20211219/841004236b6c4e27b6fdc32400bdc21b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]: /images/20211219/e28fdda88d2442d5a771924b71b372f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]: /images/20211219/987742e10e124ee9aec71447ab050836.png
[spring boot_iview]: https://blog.csdn.net/linzhefeng89/article/details/93886404
[spring boot_iview 1]: https://blog.csdn.net/linzhefeng89/article/details/94430245