普通员工离职的时候，只需要把自己创建的工作流程执行完成即可，比如说报销、请假归档等等。如果是领导离职就比较麻烦了。他离职了，需要他审批的工作流程就没人处理了，这绝对不行，所以需要离职领导审批的工作流程需要找别人接替。因此我们最终要调用工作流程序，让审批任务替换上新的审批人。
如果员工已经离职了，离职按钮就是禁用的。在职员工的离职按钮是可以点击的，点击之后就会出现弹窗，让管理者选择接替工作流程的人员。
这里并没有详细判断离职人员是普通员工、财务、部门经理、总监等等。只要员工离职，就需要选择接替处理工作流程的人员。如果离职人员没有需要处理的工作流程，那么交接工作的人员就不会绑定相应的工作流程，这一点尽可放心。在弹窗中的下拉列表需要显示除了离职人员之外的员工列表，而且是按照部门分组的，所以我们需要编写SQL语句查询出对应的数据。
一、编写emos-api代码
1. 编写持久层代码
在TbUserDao.xml文件中，声明SQL语句。
<select id="searchUserGroupByDept" parameterType="HashMap" resultType="HashMap">
SELECT d.id AS deptId,
d.dept_name AS deptName,
u.id AS userId,
u.name
FROM tb_dept d JOIN tb_user u ON u.dept_id=d.id
WHERE u.status=1
<if test="keyword!=null">
AND u.name LIKE '%${keyword}%'
</if>
<if test="userId">
AND u.id != #{userId}
</if>
ORDER BY d.id, u.id;
</select>
在com.example.emos.api.db.dao包TbUserDao.java接口中，声明DAO方法。
@Mapper
public interface TbUserDao {
……
public ArrayList<HashMap> searchUserGroupByDept(HashMap param);
}
2. 编写业务层代码
在com.example.emos.api.service包UserService.java接口中，声明抽象方法。
public interface UserService {
……
public JSONArray searchUserGroupByDept(HashMap param);
}
在com.example.emos.api.service.impl包UserServiceImpl.java类中，实现抽象方法。
@Service
public class UserServiceImpl implements UserService {
……
@Override
public JSONArray searchUserGroupByDept(HashMap param) {
ArrayList<HashMap> list = userDao.searchUserGroupByDept(param);
Integer deptId = null;
String deptName = "";
JSONObject dept = null;
JSONArray users = null;
JSONArray result = new JSONArray();
for (HashMap map : list) {
Integer someDeptId = MapUtil.getInt(map, "deptId");
String someDeptName = MapUtil.getStr(map, "deptName");
int userId = MapUtil.getInt(map, "userId");
String name = MapUtil.getStr(map, "name");
if (!deptName.equals(someDeptName)) {
deptId = someDeptId;
deptName = someDeptName;
dept = new JSONObject();
users = new JSONArray();
dept.set("users", users);
result.add(dept);
}
dept.set("deptId", deptId);
dept.set("deptName", deptName);
users.add(new HashMap() {{
put("userId", userId);
put("name", name);
}});
}
return result;
}
}
3. 编写Web层代码
在com.example.emos.api.controller.form包中创建SearchUserGroupByDeptForm.java类。
@Data
@Schema(description = "按照部分分组查询员工表单")
public class SearchUserGroupByDeptForm {
@Pattern(regexp = "^[\\u4e00-\\u9fa5]{1,10}$", message = "keyword内容不正确")
@Schema(description = "搜索关键字")
private String keyword;
@Min(value = 1, message = "userId不能小于1")
private Integer userId;
}
在com.example.emos.api.controller包UserController.jave类中，声明Web方法。
@RestController
@RequestMapping("/user")
@Tag(name = "UserController", description = "用户Web接口")
public class UserController {
……
@PostMapping("/searchUserGroupByDept")
@Operation(summary = "按照部分分组查询员工")
@SaCheckLogin
public R searchUserGroupByDept(@Valid @RequestBody SearchUserGroupByDeptForm form) {
HashMap param = JSONUtil.parse(form).toBean(HashMap.class);
JSONArray array = userService.searchUserGroupByDept(param);
return R.ok().put("list", array);
}
}
二、编写emos-vue项目
1. 离职按钮回调函数
在user.vue页面里面，有关员工离职的按钮标签如下。已经离职的员工和超级管理员是不能离职的，离职按钮是禁用状态的。
<el-button
type="text"
size="medium"
v-if="isAuth(['ROOT', 'USER:UPDATE'])"
:disabled="scope.row.status == '离职' || scope.row.root"
@click="dimissHandle(scope.row.id)"
>
离职
</el-button>
离职按钮点击之后触发的回调函数是dimissHandle()，这个回调函数的代码如下：
dimissHandle: function(userId) {
this.dimissVisible = true;
this.$nextTick(() => {
this.$refs.dimiss.init(userId);
});
},
2. 弹出对话框
在dimiss.vue页面的视图层标签如下：
<template>
<el-dialog
title="员工离职"
v-if="isAuth(['ROOT', 'USER:UPDATE'])"
:close-on-click-modal="false"
v-model="visible"
width="400px"
>
<el-form :model="dataForm" ref="dataForm" :rules="dataRule" label-width="80px">
<el-form-item label="交接人员" prop="assigneeId">
<el-select v-model="dataForm.assigneeId" size="medium" style="width: 100%;" clearable="clearable">
<el-option-group v-for="group in userList" :key="group.label" :label="group.label">
<el-option
v-for="item in group.options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-option-group>
</el-select>
</el-form-item>
<el-form-item class="desc"><span>交接人将接管该离职人员未审批的工作</span></el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button size="medium" @click="visible = false">取消</el-button>
<el-button type="primary" size="medium" @click="dataFormSubmit">确定</el-button>
</span>
</template>
</el-dialog>
</template>
该页面模型层的变量声明如下：
data: function() {
return {
visible: false,
dataForm: {
userId: null,
assigneeId: null
},
userList: [],
dataRule: {
assigneeId: [{ required: true, message: '交接人员不能为空' }]
}
};
},
显示对话框的时候，user.vue页面会调用dimiss.vue页面的init()函数，所以我们在这个函数中需要查询用户的部门分组记录。
init: function(id) {
let that = this;
that.dataForm.userId = id;
that.visible = true;
that.$nextTick(() => {
that.$refs['dataForm'].resetFields();
that.$http('user/searchUserGroupByDept', 'POST', { userId: id }, true, function(resp) {
let list = resp.list;
let userList = [];
for (let one of list) {
let options = [];
for (let user of one.users) {
options.push({ label: user.name, value: user.userId });
}
userList.push({
label: '[ ' + one.deptName + ' ]',
options: options
});
}
that.userList = userList;
});
});
},
运行Java项目和前端项目，在user.vue页面点击离职按钮，看一下是否能弹出对话框窗口，下拉列表中是否存在员工分组记录。