目录
- 前言
- 一、页面修改
- 表单展示修改
- 二、新增对话框修改
- 三、修改对话框修改
- 修改时展示创建时间
- 四、解决页面展示错误
- 五 、 解决【java.lang.NullPointerException: null】 Bug
前言
提示：本篇完成人员管理模块的开发，具体需求、修改代码的路径和最终效果不展示了，可参考文章
4.人员管理模块(开始预备工作)——帝可得管理系统
一、页面修改
表单展示修改
<el-table v-loading="loading" :data="empList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" type="index" width="50" align="center" prop="id" />
<el-table-column label="人员名称" align="center" prop="userName" />
<el-table-column label="归属区域" align="center" prop="regionName" />
<el-table-column label="角色名称" align="center" prop="roleName" />
<el-table-column label="联系电话" align="center" prop="mobile" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" @click="handleUpdate(scope.row)" v-hasPermi="['manage:emp:edit']">修改</el-button>
<el-button link type="primary" @click="handleDelete(scope.row)" v-hasPermi="['manage:emp:remove']">删除</el-button>
</template>
</el-table-column>
</el-table>
二、新增对话框修改
将角色与负责区域改为下拉框
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
<el-form ref="empRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="人员名称" prop="userName">
<el-input v-model="form.userName" placeholder="请输入人员名称" />
</el-form-item>
<el-form-item label="角色" prop="roleId">
<!-- <el-input v-model="form.roleId" placeholder="请输入角色id" /> -->
<el-select v-model="form.roleId" placeholder="请选择角色">
<el-option
v-for="item in roleList"
:key="item.roleId"
:label="item.roleName"
:value="item.roleId"
/>
</el-select>
</el-form-item>
<el-form-item label="联系电话" prop="mobile">
<el-input v-model="form.mobile" placeholder="请输入联系电话" />
</el-form-item>
<el-form-item label="创建时间" prop="mobile" v-if="form.id!=null">
{{form.createTime}}
</el-form-item>
<el-form-item label="负责区域" prop="regionId">
<!-- <el-input v-model="form.regionId" placeholder="请输入所属区域Id" /> -->
<el-select v-model="form.regionId" placeholder="请选择负责区域">
<el-option
v-for="item in regionList"
:key="item.id"
:label="item.regionName"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="员工头像" prop="image">
<image-upload v-model="form.image"/>
</el-form-item>
<el-form-item label="是否启用" prop="status">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in emp_status"
:key="dict.value"
:label="parseInt(dict.value)"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
import{listRole} from "@/api/manage/role";
import{loadAllParams} from "@/api/page";
import{listRegion} from "@/api/manage/region";
/* 查询区域列表 */
const regionList=ref([]);
function getRegionList() {
listRegion(loadAllParams).then(response => {
regionList.value = response.rows;
});
/* 查询角色列表 */
const roleList=ref([]);
function getRoleList() {
listRole(loadAllParams).then(response => {
roleList.value = response.rows;
});
}
}
三、修改对话框修改
修改时展示创建时间
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
<el-form ref="empRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="人员名称" prop="userName">
<el-input v-model="form.userName" placeholder="请输入人员名称" />
</el-form-item>
<el-form-item label="角色" prop="roleId">
<!-- <el-input v-model="form.roleId" placeholder="请输入角色id" /> -->
<el-select v-model="form.roleId" placeholder="请选择角色">
<el-option
v-for="item in roleList"
:key="item.roleId"
:label="item.roleName"
:value="item.roleId"
/>
</el-select>
</el-form-item>
<el-form-item label="联系电话" prop="mobile">
<el-input v-model="form.mobile" placeholder="请输入联系电话" />
</el-form-item>
<el-form-item label="创建时间" prop="mobile" v-if="form.id!=null">
{{form.createTime}}
</el-form-item>
<el-form-item label="负责区域" prop="regionId">
<!-- <el-input v-model="form.regionId" placeholder="请输入所属区域Id" /> -->
<el-select v-model="form.regionId" placeholder="请选择负责区域">
<el-option
v-for="item in regionList"
:key="item.id"
:label="item.regionName"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="员工头像" prop="image">
<image-upload v-model="form.image"/>
</el-form-item>
<el-form-item label="是否启用" prop="status">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in emp_status"
:key="dict.value"
:label="parseInt(dict.value)"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
四、解决页面展示错误
添加时归属区域、角色名称为空：
具体代码修改参考文档：参考
五 、 解决【java.lang.NullPointerException: null】 Bug
- 当我修改人员管理信息时：前端显示如下信息；当F12后，响应显示500的错误；
且后端服务器报错：
java.lang.NullPointerException: null
at com.dkd.manage.service.impl.EmpServiceImpl.updateEmp(EmpServiceImpl.java:82)
at com.dkd.manage.controller.EmpController.edit(EmpController.java:85)
at com.dkd.manage.controller.EmpController$$FastClassBySpringCGLIB$$90f7e0dd.invoke(<generated>)
at org.springframework.cglib.proxy.MethodProxy.invoke(MethodProxy.java:218)
at org.springframework.aop.framework.CglibAopProxy$CglibMethodInvocation.invokeJoinpoint(CglibAopProxy.java:792)...
...
错误显示了空指针异常：
java.lang.NullPointerException: null
at com.dkd.manage.service.impl.EmpServiceImpl.updateEmp(EmpServiceImpl.java:82)
- 不清楚为什么？难道是前端修改后的数据没有传过来，于是打了断点，运行后：发现数据已经传到了后端，也就是前端没问题。
- 那么既然错误显示EmpServiceImpl.updateEmp有问题，就看代码，代码没什么问题。
- 那是什么问题呢？它说roleMapper.selectRoleByRoleId(emp.getRoleId()); 处异常，且指明了是roleMapper是空指针？那就是说没有没有这个对象；
- 好，往上翻，难道是没有注入，最终看了一下代码：
@Autowired
private EmpMapper empMapper;
private RegionMapper regionMapper;
private RoleMapper roleMapper;
好家伙，RegionMapper、RoleMapper并没有注入；
修改代码：
@Autowired
private EmpMapper empMapper;
@Autowired
private RegionMapper regionMapper;
@Autowired
private RoleMapper roleMapper;
重启后再次修改，修改成功。
