【华夏OA项目实战】3-19 前端TS实现添加新用户

本课程开发软件与项目初始代码可以通过云盘下载，答疑服务可以关注视频片头的二维码获取。
https://www.123912.com/s/A75eVv-27mod，提取码：yton

教学视频

之前我们写过添加新用户的后端代码，这节课我们编写前端代码去对接之前的后端代码，这样就能实现新用户的添加了。这里强调一下，只有新添加用户的时候，添加人可以为用户分配密码，这之后只能用户有权修改自己的密码，任何人都无权别人的密码。

视频中有代码讲解，大家认真观看视频，不要快进。有些操作只在视频中演示，只对着手册操作并不能完成案例，切记！

一、熟悉前端页面

在user.vue页面中想要手动弹出对话框，需要点击新增按钮。而且该按钮要求只有具备ROOT或者USER:INSERT权限的用户才能有效点击该按钮，否则该按钮就是禁用的状态。

<el-form-item>
    <el-button type="primary" icon="Search" @click="searchByCondition()">查询</el-button>
    <el-button type="primary" icon="Plus" :disabled="!proxy.isAuth(['ROOT','USER:INSERT'])"
               @click="showDialog()">
        新增
    </el-button>
    <el-button type="danger" icon="Delete" :disabled="!proxy.isAuth(['ROOT','USER:DELETE'])"
               @click="deleteTableRows()">
        批量删除
    </el-button>
</el-form-item>

前端验证权限的isAuth()函数封装在main.ts文件中。该函数会从浏览器的localStorage中获取当前用户具备的权限，然后跟需要鉴权的权限做比较，看看该用户是否具备要求的权限。

/********封装用于判断用户是否具有某些权限的公共函数********************/
app.config.globalProperties.isAuth = function (permission: string[]) {
    const permissions = JSON.parse(<string>localStorage.getItem('permissions'));
    if (permissions) {
        let flag = false;
        for (let one of permission) {
            if (permissions.includes(one)) {
                flag = true;
                break;
            }
        }
        return flag;
    }
    else {
        return false;
    }
};

在前端页面弹窗面板中，定义了保存按钮。我们编写好新用户信息之后，点击该按钮用来提交Ajax请求。

<template #footer>
    <span class="dialog-footer">
        <el-button @click="dialog.visible = false">取消</el-button>
        <el-button type="primary" @click="saveSubmit()">保存</el-button>
    </span>
</template>

二、编写TS代码

点击新增按钮的时候会触发回调函数，所以我们要创建showDialog()函数。因为新增和修改用户的时候都会调用该函数，所以在该函数中要判断要执行新增还是修改。

function showDialog(id) {
    dialog.formData.id = (id) ? id : null;
    dialog.visible = true;
    proxy.$nextTick(() => {
        proxy.$refs.dialogForm.resetFields();
        if (id) {
            //TODO 查询用户信息
        }
    })
}

点击弹窗控件中保存按钮的时候会触发回调函数。因为新增用户和修改用户信息的时候都需要点击保存按钮，所以在saveSubmit()函数中需要判断执行什么操作，然后发起对应的Ajax请求。

function saveSubmit() {
    proxy.$refs.dialogForm.validate((valid) => {
        if (valid) {
            let temp = {
                "正常": 1,
                "冻结": 2,
                "离职": 3
            }
            const data = {
                id: dialog.formData.id,
                username: dialog.formData.username,
                password: dialog.formData.password,
                name: dialog.formData.name,
                gender: dialog.formData.gender,
                tel: dialog.formData.tel,
                email: dialog.formData.email,
                roles: dialog.formData.roleId,
                deptId: dialog.formData.deptId,
                jobId: dialog.formData.jobId,
                status: temp[dialog.formData.status]
            }

            let url;
            if (dialog.formData.id) {
                url = "/mis/user/update"
            }
            else {
                url = "/mis/user/insert"
            }
            proxy.$http(url, "POST", data, true, resp => {
                let result = resp.result;
                if (result.status == "SUCCESS") {
                    proxy.$message({
                        type: 'success',
                        message: '保存成功',
                        duration: 1200,
                        onClose: () => {
                            dialog.visible = false;
                            loadTableData();
                        }
                    });
                }
            })
        }
    })
}