Vue Element前端应用开发之用户管理模块的处理

1、权限管理模块的设计

我们知道,权限管理一般都会涉及到用户、组织机构、角色,以及权限功能等方面的内容,ABP框架的基础内容也是涉及到这几方面的内容,其中它们之间的关系基本上是多对多的关系,它们的关系如下所示。

权限模块里面包含的一些主对象表和中间表,中间表主要用来存储两个对象之间的多对多关系,如角色包含多个用户,用户属于多个机构,机构包含多个角色等等。

结合ABP后端提供的接口,Vue前端我们要实现基础的用户、组织机构、角色、功能权限等内容的管理,以及维护它们之间的关系。Vue前端对于权限管理模块的菜单列表如下所示。

上图权限管理模块中,包括用户管理、机构管理、角色管理、菜单管理、功能管理、审计日志、登录日志等内容模块的管理。

其中用户管理模块,主要用来展示用户信息列表,以及查看对应用户权限、维护密码等处理。

用户列表界面如下所示,包括对应条件的查询和列表展示、以及查看、添加、编辑、删除、重置密码等功能入口。

用户信息查看界面如下所示

主要展示用户基础信息,和所属的关系信息,其中权限部分列出对应用户包含的功能点,用于界面按钮等方面的控制处理。

用户添加界面,则主要用来处理录入用户基础信息部分即可,如下界面所示。

用户信息录入,对用户基础表单数据进行校验,符合格式要求才能录入。

用户编辑界面,基本上和上面的类似了,不在赘述。

另外,删除用户或者重置密码,一般需对确认后再行操作,弹出一个对话框用户确认再继续。

2、用户管理界面功能

以上我们介绍了权限管理模块涉及的内容和关系,并着重介绍了用户管理界面中的内容展示,下面介绍在Element中如何实现对上面界面的处理的。

首先我们需要根据ABP后端的接口进行前端JS端的类的封装处理,其中前面说过,常规的Get/GetAll/Create/Update/Delete/Count等接口,我们放在BaseApi基类里面定义,其他子类继承它即可。

权限模块我们涉及到的用户管理、机构管理、角色管理、菜单管理、功能管理、审计日志、登录日志等业务类,那么这些类继承BaseApi,就会具有相关的接口了,如下所示继承关系。

我们这里以UserAPI的JS类定义介绍,如下所示。

我们以其中一个接口为例进行介绍实现代码,可以看到主要就是简单封装的调用即可。

GetGrantedFunctionsByUser(id) { // 获取用户权限列表
    return request({
      url: this.baseurl + 'GetGrantedFunctionsByUser',
      method: 'get',
      params: { id }
    })
  }

有了这些业务类的准备,那么我们和后端ABP的API接口对接,就很容易了,如下图所示。

剩下的就是对Vue + Element前端的界面处理事情了。

我们先来看看查询的处理,常规的查询涉及日期区间的查询处理,这里我们用一个一个查询日期的处理操作,如下图所示。

表单的界面代码如下所示

<el-form ref="searchForm" :model="searchForm" label-width="80" :inline="true">
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="searchForm.creationTime"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        />
      </el-form-item>
      <el-form-item label="用户名" prop="UserName">
        <el-input v-model="searchForm.UserName" />
      </el-form-item>
      <el-form-item label="手机" prop="PhoneNumber">
        <el-input v-model="searchForm.PhoneNumber" />
      </el-form-item>
    </el-form>

其中定义了一个pickerOptions 属性,用于快速选择日期的,在data里面增加一个这样的属性即可。

pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },

在页面里面,我们定义了一些分页查询的处理条件和对象,如下所示。

查询表单则定义一个单独的表单对象,如下代码所示

 searchForm: { // 查询表单
    UserName: '',
    PhoneNumber: '',
    creationTime: ''
  },

页面加载准备好,我们就调用获取列表的数据即可。

created() { // 页面加载后,加载列表数据
	this.getlist()
},

获取列表的处理操作如下代码所示,主要就是准备构建好对应的查询参数,然后调用UserApi类的接口查询列表即可。

getlist() { // 列表数据获取
      var CreationTimeStart = ''
      if (this.searchForm.creationTime && this.searchForm.creationTime.length > 0) {
        CreationTimeStart = this.parseTime(this.searchForm.creationTime[0], '{y}-{m}-{d}')
      }
      var CreationTimeEnd = ''
      if (this.searchForm.creationTime && this.searchForm.creationTime.length > 1) {
        CreationTimeEnd = this.parseTime(this.searchForm.creationTime[1], '{y}-{m}-{d}')
      }

      var param = { // 构造常规的分页查询条件
        SkipCount: (this.pageinfo.pageindex - 1) * this.pageinfo.pagesize,
        MaxResultCount: this.pageinfo.pagesize,
        // 过滤条件
        UserName: this.searchForm.UserName,
        PhoneNumber: this.searchForm.PhoneNumber,
        CreationTimeStart: CreationTimeStart,
        CreationTimeEnd: CreationTimeEnd
      };

      // 获取列表,绑定到模型上,并修改分页数量
      this.listLoading = true
      user.GetAll(param).then(data => {
        this.list = data.result.items
        this.pageinfo.total = data.result.totalCount
        this.listLoading = false
      })
    },
    search() { // 查询列表处理
      this.pageinfo.pageindex = 1;// 重置为第一页=
      this.getlist()
    },

通过列表的查询操作,我们就可以把数据获取到,界面就会得到及时的更新显示了

// 获取列表,绑定到模型上,并修改分页数量
      this.listLoading = true
      user.GetAll(param).then(data => {
        this.list = data.result.items
        this.pageinfo.total = data.result.totalCount
        this.listLoading = false
      })

而列表主要就是在界面使用el-table组件进行展示的了,如下图所示代码。

el-table绑定了对应的数据,并设置好显示的格式以及选择操作事件、行双击事件等操作。

而el-table里面的显示的列,需要根据我们返回数据的属性名称进行显示,如下代码所示。

而如果我们需要对属性进行特殊的展示,我们就需要使用v-if条件或者过滤器进行处理了。如下是根据不同内容,构建标签显示内容。

<el-table-column align="center" label="账号激活" width="80">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isActive === true" type="success" effect="dark">已激活</el-tag>
          <el-tag v-else type="danger" effect="dark">未激活</el-tag>
        </template>
      </el-table-column>

而对于时间,我们则可以使用格式化函数或者过滤器规范显示的格式内容。

<el-table-column align="center" label="创建时间" width="120" prop="creationTime" :formatter="dateFormat" />

其中:formatter="dateFormat" 指定了对应的格式化处理函数。

dateFormat(row, column, cellValue) {
      // this.parseTime是在main.js中的全局挂载函数
      return cellValue ? this.parseTime(cellValue, '{y}-{m}-{d}') : '' // 完整格式:{y}-{m}-{d} {h}-{i}-{s}
    },
    timeFormat(row, column, cellValue) {
      // this.parseTime是在main.js中的全局挂载函数
      return cellValue ? this.parseTime(cellValue, '{y}-{m}-{d} {h}:{i}:{s}') : '' // 完整格式:{y}-{m}-{d} {h}-{i}-{s}
    }

另外,操作列的代码,主要就是构建一些方法操作的入口,并传递对应的变量,如ID值即可。

<el-table-column align="center" label="操作" width="190">
        <template scope="scope">
          <el-row>
            <el-tooltip effect="light" content="查看" placement="top-start">
              <el-button icon="el-icon-search" type="success" circle size="mini" @click="showView(scope.row.id)" />
            </el-tooltip>
            <el-tooltip effect="light" content="编辑" placement="top-start">
              <el-button icon="el-icon-edit" type="primary" circle size="mini" @click="showEdit(scope.row.id)" />
            </el-tooltip>
            <el-tooltip effect="light" content="删除" placement="top-start">
              <el-button icon="el-icon-delete" type="danger" circle size="mini" @click="showDelete(scope.row.id)" />
            </el-tooltip>
            <el-tooltip effect="light" content="重置密码" placement="top-start">
              <el-button icon="el-icon-setting" type="warning" circle size="mini" @click="showSetPass(scope.row.id)" />
            </el-tooltip>
          </el-row>
        </template>
      </el-table-column>

列表的底部分页处理,也是利用对应的属性进行显示即可,并处理分页变化的事件。

<div class="block" style="height:70px;">
      <el-pagination
        :current-page="pageinfo.pageindex"
        :page-size="pageinfo.pagesize"
        :total="pageinfo.total"
        :page-sizes="[10,20,30,40]"
        layout="total, sizes, prev, pager, next"
        @size-change="sizeChange"
        @current-change="currentChange"
      />
    </div>

最后完成列表界面代码,显示列表界面如下所示。

而对于查看、编辑、新增等对话框,一般我们需要创建对应的表单属性,用来承载对应的信息的,如我们为了查看信息的需要,创建一个viewForm的对象,如下所示。

viewForm: { // 查看表单
        id: '',
        userName: '',
        surname: '',
        name: '',
        emailAddress: '',
        phoneNumber: '',
        ouNames: ''
      },

在查看信息对话框里面,我们展示对应的用户信息,包括基础信息和相关的关系,如下界面代码所示。

界面组件通过v-modal进行绑定对应的ViewForm属性对象即可。

最后,我们在触发showView函数里面,获取对应的用户信息,然后展示在界面上即可,showView函数代码如下所示。

showView(id) { // 显示查看对话框处理
      var param = { id: id }
      user.Get(param).then(data => {
        // console.log(data.result)
        Object.assign(this.viewForm, data.result);

        this.getOuName(id).then(result => {
          this.viewForm.ouNames = result
        })
      })
      this.getFunctionsByUser(id)

      this.isView = true
    },

查看界面效果如下所示。

在新增或者编辑处理界面中,我们修改了数据,都会提交到ABP后端进行录入或者更新,因此就涉及到数据的回写处理,然后提示客户端状态即可。

下面是保存编辑界面的内容操作。

saveEdit() { // 保存数据处理
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          // 保存数据
          const form = this.editForm
          user.Update(form).then(data => {
            // console.log(data)
            if (data.success) {
              // 提示信息
              this.msgSuccess('更新成功!')
              // 刷新数据
              this.getlist()
            } else {
              this.msgError('更新失败:' + data.error)
            }

            this.$refs['editForm'].resetFields()
            // 重置窗口状态
            this.closeDialog()
          })
        }
      })
    },

其中msgSuccess、msgError是全局挂载的提示信息函数,在入口main.js里面统一处理,封装的函数方便在各个界面中统一处理。

以上就是关于用户管理界面的内容介绍,其中涉及到前端API类的封装处理,界面组件的使用,以及一些常规操作,希望能够带给大家一些vue+element开发界面的参考。

以上就是Vue Element前端应用开发之用户管理模块的处理的详细内容,更多关于Vue Element之用户管理模块的处理的资料请关注我们其它相关文章!

(0)

相关推荐

  • vue 实现element-ui中的加载中状态

    需要添加加载状态,调用下面方法即可 //开启loading const load = _this.$loading({ lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }); //关闭loading load.close(); 补充知识:在vue中使用element-ui 里面的按钮点击后显示加载中,防止重复提交 第一步: 第二步: 第三步: 效果 以上这篇vue

  • 详解vue修改elementUI的分页组件视图没更新问题

    今天遇到一个小问题平时没留意,el-pagination这个分页组件有一个属性是current-page当前页. 今天想在methods里面手动修改他绑定的变量从而达到修改页码的效果,结果发现分页组件视图并没有渲染,还是停留在原本的页码处. 然后想了想,想起了.sync这个语法糖,让数据进行双向绑定. 直接上修改的代码看看 <el-pagination :current-page.sync="currentPage" :page-sizes="[10, 30, 50]&

  • Vue 解决在element中使用$notify在提示信息中换行问题

    在项目开发过程中,遇到如下用户体验提升需求:需要实现错误提示时根据后台返回错误列表信息,换行展示. 实现方式如下: 通过F12元素查看,在对应的样式中加入white-space:pre-wrap,该样式的主要作用是识别字符串中的换行符"\n",故需要在待展示的信息字符串中加入相应的换行标识符. 在$notify消息提示中,作用于el-notification: .el-notification {white-space:pre-wrap !important; } 有的童鞋可能试过样式

  • 解决vue2中使用elementUi打包报错的问题

    bug1.找不到element-ui/lib/theme-default/index.css 解决:修改路径为 element-ui/lib/theme-chalk/index.css 原因:elementUi升级时遗留bug bug2: ERROR in static/js/app.77ab8a3664d32f2b9c76.js from UglifyJs Unexpected token: operator (>) [./~/element-ui/src/mixins/emitter.js:

  • vue+Element-ui实现分页效果

    当我们向后台请求大量数据的时候,并要在页面展示出来,请求的数据可能上百条数据或者更多的时候,并不想在一个页面展示,这就需要使用分页功能来去完成了. 1.本次所使用的是vue2.0+element-ui实现一个分页功能,element-ui这个组件特别丰富,分页中给我提供了一个Pagination 分页,使用Pagination 快速完成分页功能 最终效果展示 <div class="deit"> <div class="crumbs"> &l

  • vue+elementUI实现简单日历功能

    vue+elementUI简单的实现日历功能,供大家参考,具体内容如下 <div class="calender2"> <div class="date-headers"> <div class="date-header"> <div><el-button type="primary" @click="handlePrev"><i class

  • vue实现日历表格(element-ui)

    本文实例为大家分享了vue实现日历表格的具体代码,供大家参考,具体内容如下 效果如图: html:后面的日期是循环出来的 <div class="calendar-title"> <span class="calendar-left" @click="lastDateclick"><</span> <span class="calendar-center">近期事件<

  • VUE-ElementUI 自定义Loading图操作

    需求: element ui loading图只能使用自己的loading图, 但很多场景下,需要替换成自己的gif图 虽然文档中有些, element-loading-spinner="el-icon-loading" 可指定自定义图 但经测试,也只是只能再elementui 图标库中的图, 不是我们想的那个自定义图类的意思. 自定义图方法: 1) 添加自定义elementUI loading样式 asserts下 新建CSS文件夹 及CSS文件比如myCss.css 再里面,写入自

  • vue.js+element 默认提示中英文操作

    element默认中文版,但是我们在做英文页面时自己翻译很不爽,所以我们用element自带英文包,只要在html页面中引入就可以了, 具体引入方法有很多种,在此提供了我用过的一种,仅作为参考使用: 补充知识:element-ui组价中表单的验证提示显示后台的提示信息及自定义提示 我在做这个的时候一个是分给我的那个页面 是有两个接口的,所以提示信息就是根据接口的response.success 提示 写一个提示语"XX已存在"如下: html: ​ <el-form :model

  • Vue Element前端应用开发之用户管理模块的处理

    1.权限管理模块的设计 我们知道,权限管理一般都会涉及到用户.组织机构.角色,以及权限功能等方面的内容,ABP框架的基础内容也是涉及到这几方面的内容,其中它们之间的关系基本上是多对多的关系,它们的关系如下所示. 权限模块里面包含的一些主对象表和中间表,中间表主要用来存储两个对象之间的多对多关系,如角色包含多个用户,用户属于多个机构,机构包含多个角色等等. 结合ABP后端提供的接口,Vue前端我们要实现基础的用户.组织机构.角色.功能权限等内容的管理,以及维护它们之间的关系.Vue前端对于权限管理

  • Vue Element前端应用开发之组织机构和角色管理

    1.组织机构管理模块界面 组织机构管理模块界面如下所示,包括组织机构的成员管理和角色管理,在ABP基础领域里面,组织机构可以包含0到多个成员,也可以包含0到多个角色,因此界面设计如下所示. 在对象UML的图例中,应该是如下所示的效果图,组织机构包含组织成员和角色的内容. 在界面上,组织成员还需要添加成员的功能,同理角色也需要添加角色的处理,如下UML图示. 由于添加成员也是一个界面功能,一般情况下,如果我们放在一个页面里面,可能会增加代码量,增加代码维护难度和降低可读性,因此我们可以考虑把这些添

  • Vue Element前端应用开发之功能点管理及权限控制

    目录 概述 1.权限功能点管理 2.VUE+Element 前端权限控制 概述 本篇随笔介绍功能点管理及权限控制,功能点是作为一个业务对象数据进行管理,在角色范畴上进行分配,而在界面元素控制上,VUE+Element 前端引入Vue自定义指令Directives进行控制. 1.权限功能点管理 我们在前面分析过一个权限系统的表和关系的说明,如下所示. 权限功能点的管理就是对TB_Function的表的管理操作,这个表是我们定义用于系统控制的功能点. 权限功能点的管理为了展示它的树状结果,包括树列表

  • Vue Element前端应用开发之整合ABP框架的前端登录

    概述 ABP框架作为后端,是一个非常不错的技术方向,但是前端再使用Asp.NET 进行开发的话,虽然会快捷一点,不过可能显得有点累赘了,因此BS的前端选项采用Vue+Element来做管理(后续可能会视情况加入Vue+AntDesign),CS前端我已经完成了使用Winform+ABP的模式了.本篇随笔主要介绍Vue+Element+ABP的整合方式,先从登录开始介绍. 1.ABP开发框架的回顾 ABP是ASP.NET Boilerplate的简称,ABP是一个开源且文档友好的应用程序框架.AB

  • Vue Element前端应用开发之动态菜单和路由的关联处理

    概述 在我开发的很多系统里面,包括Winform混合框架.Bootstrap开发框架等系列产品中,我都倾向于动态配置菜单,并管理对应角色的菜单权限和页面权限,实现系统对用户权限的控制,菜单一般包括有名称.图标.顺序.URL连接等相关信息,对于VUE+Element 前端应用来说,应该原理上差不多,本篇随笔介绍结合服务端的动态菜单配置和本地路由的关联处理,实现动态菜单的维护和展示的处理. 1.菜单和路由的处理过程 由于Vue前端还需要引入路由这个概念,路由是我们前端可以访问到的对应路径集合,路由定

  • Vue Element前端应用开发之菜单资源管理

    1.菜单资源及管理界面介绍 前面介绍过,权限管理一般都会涉及到用户.组织机构.角色,以及权限功能等方面的内容,ABP框架的基础内容也是涉及到这几方面的内容,其中它们之间的关系基本上是多对多的关系,它们的关系如下所示. 加入菜单资源,以及整理它们之间的关系和表的信息,整理图示如下. 结合ABP后端提供的接口,Vue前端我们要实现基础的用户.组织机构.角色.功能权限等内容的管理,以及维护它们之间的关系.Vue前端对于权限管理模块的菜单列表如下所示. 菜单列表管理界面如下图所示,主要包括树状列表展示菜

  • Vue Element前端应用开发之常规的JS处理函数

    1.常规集合的filter.map.reduce处理方法 filter函数的主要用途是对数组元素进行过滤,并返回一个符合条件的元素的数组 const nums = [10,20,30,111,222,333] let newNums=nums.filter(function(n){ return n<100 }) 输出: [10,20,30] map函数是对数组每个元素的映射操作,并返回一个新数组,原数组不会改变将newNums中每个数字乘2 const nums = [10,20,30,111

  • Vue Element前端应用开发之根据ABP后端接口实现前端展示

    概述 ABP(ASP.NET Boilerplate)框架主要是基于.net core 进行的后端Web API的开发,结合Swagger的管理界面我们可以看到发布的 API 的接口明细信息,这样前端技术人员可以很容易整合前端的API应用.Vue + Element的前端应用,是目前较为流行的前端技术整合,Vue提供了前端框架很好的支持,Element提供了非常不错的界面组件封装和处理,通过ABP后端API接口和前端Vue+Element的整合,可以很好实现前后端的分离处理,同时又极大提高各自开

  • Vue Element前端应用开发之前端API接口的封装

    1.ABP框架API接口的回顾 ABP是ASP.NET Boilerplate的简称,ABP是一个开源且文档友好的应用程序框架.ABP不仅仅是一个框架,它还提供了一个最徍实践的基于领域驱动设计(DDD)的体系结构模型. 启动Host的项目,我们可以看到Swagger的管理界面如下所示. 上图就是ABP后端框架的API接口的查看页面,从上图可以看到,一般业务对象,都有Get.GetAll.Create.Update.Delete等常见接口,由于这些接口是给前端进行调用的. Vue + Elemen

  • Vue Element前端应用开发之获取后端数据

    概述 在前面随笔<循序渐进VUE+Element 前端应用开发之动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据用户角色对应的菜单实现本地路由的过滤和绑定,菜单顺利弄好了,就需要进一步开发页面功能了,本篇随笔介绍一个案例,通过获取后端数据后,进行产品信息页面的处理. 1.后端数据的获取处理 前后端的边界则非常清晰,前端可以在通过网络获取对应的JSON就可以构建前端的应用了. 我们通过Vue.config.js的配置信息,可以

随机推荐