普通员工离职的时候，只需要把自己创建的工作流程执行完成即可，比如说报销、请假归档等等。如果是领导离职就比较麻烦了。他离职了，需要他审批的工作流程就没人处理了，这绝对不行，所以需要离职领导审批的工作流程需要找别人接替。因此我们最终要调用工作流程序，让审批任务替换上新的审批人。

如果员工已经离职了，离职按钮就是禁用的。在职员工的离职按钮是可以点击的，点击之后就会出现弹窗，让管理者选择接替工作流程的人员。

这里并没有详细判断离职人员是普通员工、财务、部门经理、总监等等。只要员工离职，就需要选择接替处理工作流程的人员。如果离职人员没有需要处理的工作流程，那么交接工作的人员就不会绑定相应的工作流程，这一点尽可放心。在弹窗中的下拉列表需要显示除了离职人员之外的员工列表，而且是按照部门分组的，所以我们需要编写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页面点击离职按钮，看一下是否能弹出对话框窗口，下拉列表中是否存在员工分组记录。