[升级16章 电子书]springboot vue3 项目实战，打造企业级在线办公系统 -欧洲杯足彩官网

学习地址1：https://pan.baidu.com/s/1gx9yot3asp0frdlwnbzxiq 提取码：ftyi
学习地址2：https://share.weiyun.com/jvsddcbu 密码：cruqf9

springboot vue3 项目实战，打造企业级在线办公系统，2023年升级版16章，附电子书！未来，在线协同办公将成为企业常态化的工作方式，今天就给大家讲讲关于在线办公的一个项目，项目采用了当下最流行的前后端分离架构及技术（ java、ssm、vue3.0、工作流 ）。

我将以业务为基础，贯穿前后端技术栈，获得企业级项目开发经验，结合vue3、ssm、elementui等主流技术栈，打造流程完整、功能齐全、模块多样，真实可用的在线办公系统，喜欢大家会喜欢这样的一个项目。

下面我们就开始代码实践，感兴趣的朋友可以跟着一起来操作。

一、给菜单选项添加点击事件
在main.vue页面找到导航区的弹出菜单，然后给菜单里面的两个选项添加点击事件。

   
       
        {{ name }}
   
   


熟悉 update-password.vue 页面
用户点击修改密码选项之后，系统会弹窗，让用户输入新的密码。这个弹窗是个自定义组件（update-password.vue），然后引入到main.vue页面里面。

   
       
           
       
       
           
       
       
           
       
   
   

角色管理页面的弹窗页面是role-add-or-update.vue，添加新角色和修改角色信息都是用这个弹窗页面。下面我们来看看弹窗页面的模型层都定义了什么东西？
data: function() {
    return {
        visible: false,
        //标记角色是否为系统内置，弹窗是否会用到该变量
        systemic: true,
        dataform: {
            id: null,
            rolename: null,
            //用户选中的权限
            permissions: [],
            desc: null,
            changed: false
        },
        //所有权限
        permisionlist: [],
        //该角色拥有的权限
        oldpermissions: [],
        datarule: {
            rolename: [
                { required: true, pattern: '^[a-za-z0-9\u4e00-\u9fa5]{2,10}$', message: '角色名称格式错误' }
            ],
            permissions: [
                { required: true, trigger: 'blur', message: '角色没有关联权限' },
                { required: false, trigger: 'change', message: '角色没有关联权限' }
            ]
        }
    };
},
在角色管理页面的表格中，我设置了复选框列，用户可以勾选多条记录。当用户勾选或者取消勾选记录的时候，都会触发@selection-change事件，需要回调函数记录下当前选中的记录。
    :data="datalist"
    border
    v-loading="datalistloading"
    @selection-change="selectionchangehandle"
    cell-style="padding: 4px 0"
    style="width: 100%;"
    size="medium"
>
            type="selection"
        :selectable="selectable"
        header-align="center"
        align="center"
        width="50"
    />
    ……

很多同学看不懂row.users > 0里面的users是怎么来的，我帮你回忆一下查询角色分页记录的sql语句。

我们要动手编写deletehandle()函数，来应对按钮的点击。而且传入函数的参数是数组，无论删除一个角色还是多个角色都可以调用这个函数。
deletehandle: function(id) {
    let that = this;
    let ids = id
        ? [id]
        : that.datalistselections.map(item => {
              return item.id;
          });
    if (ids.length == 0) {
        that.$message({
            message: '没有选中记录',
            type: 'warning',
            duration: 1200
        });
    } else {
        that.$confirm(`确定要删除选中的记录？`, '提示', {
            confirmbuttontext: '确定',
            cancelbuttontext: '取消',
            type: 'warning'
        }).then(() => {
            that.$http('role/deleterolebyids', 'post', { ids: ids }, true, function(resp) {
                if (resp.rows > 0) {
                    that.$message({
                        message: '操作成功',
                        type: 'success',
                        duration: 1200
                    });
                    that.loaddatalist();
                } else {
                    that.$message({
                        message: '未能删除记录',
                        type: 'warning',
                        duration: 1200
                    });
                }
            });
        });
    }
},
想要删除当前行的用户记录，用户可以点击行内右侧的删除按钮，调用的还是deletehandle()函数。删除按钮我设置了:disabled属性，不具备先关权限、是系统内置角色，或者有关联用户的，删除按钮是禁止点击的。
    type="text"
    size="medium"
    :disabled="!isauth(['root', 'role:delete']) || scope.row.systemic || scope.row.users > 0"
    @click="deletehandle(scope.row.id)"
>
    删除

报销流程中最后一项任务是归档。报销人拿着纸质报销单找财务执行归档，财务把报销单照片上传之后就可以执行归档了。工作流项目中执行归档的时候，先让该用户领取归档任务，然后再执行归档。

本文到此结束，感谢大家的观看！