学习地址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 }} <template #dropdown> <el-dropdown-item @click="updatePasswordHandle()">修改密码 <el-dropdown-item @click="logout">退出

熟悉 update-password.vue 页面 用户点击修改密码选项之后，系统会弹窗，让用户输入新的密码。这个弹窗是个自定义组件（update-password.vue），然后引入到main.vue页面里面。 <template #footer> <el-button size="medium" @click="visible = false">取消 <el-button type="primary" size="medium" @click="dataFormSubmit">确定 角色管理页面的弹窗页面是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事件，需要回调函数记录下当前选中的记录。 <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" cell-style="padding: 4px 0" style="width: 100%;" size="medium"

<el-table-column
    type="selection"
    :selectable="selectable"
    header-align="center"
    align="center"
    width="50"
/>
……

很多同学看不懂row.users > 0里面的users是怎么来的，我帮你回忆一下查询角色分页记录的SQL语句。 SELECT r.id, r.role_name AS roleName, COUNT( u.id ) AS users, JSON_LENGTH ( r.permissions ) AS permissions, r.`desc`, r.systemic FROM tb_role r LEFT JOIN tb_user u ON JSON_CONTAINS ( u.role, CONVERT ( r.id, CHAR ) ) WHERE 1=1 AND r.role_name LIKE '%${roleName}%' GROUP BY r.id ORDER BY r.id LIMIT #{start}, #{length} 我们要动手编写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属性，不具备先关权限、是系统内置角色，或者有关联用户的，删除按钮是禁止点击的。 删除 报销流程中最后一项任务是归档。报销人拿着纸质报销单找财务执行归档，财务把报销单照片上传之后就可以执行归档了。工作流项目中执行归档的时候，先让该用户领取归档任务，然后再执行归档。

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