5.人员管理模块(以及解决运行Bug)——帝可得管理系统

大道归简2024-10-08 8:30

目录

前言

提示：本篇完成人员管理模块的开发，具体需求、修改代码的路径和最终效果不展示了，可参考文章
4.人员管理模块(开始预备工作)------帝可得管理系统

一、页面修改

表单展示修改

html 复制代码 
    <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>

二、新增对话框修改

将角色与负责区域改为下拉框

html 复制代码 
  <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>
javascript 复制代码 
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;
  });
}
}

三、修改对话框修改

修改时展示创建时间

html 复制代码 
  <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

  1. 当我修改人员管理信息时：前端显示如下信息；当F12后，响应显示500的错误；

且后端服务器报错：

java 复制代码 
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是空指针？那就是说没有没有这个对象；
  • 好，往上翻，难道是没有注入，最终看了一下代码：
java 复制代码 
    @Autowired
    private EmpMapper empMapper;
    private RegionMapper regionMapper;
    private RoleMapper roleMapper;

好家伙，RegionMapper、RoleMapper并没有注入；

修改代码：

java 复制代码 
    @Autowired
    private EmpMapper empMapper;
    @Autowired
    private RegionMapper regionMapper;
    @Autowired
    private RoleMapper roleMapper;

重启后再次修改，修改成功。

相关推荐
DO_Community41 分钟前
AI Agent 运行环境难搭、空闲还收费？MicroVMs 正式公测
人工智能·agent·ai编程·agi
凤山老林1 小时前
Spring Boot 集成 Redis Stream 做可靠消息队列：持久化、消费组重组与流式处理实战
spring boot·redis·后端
OpsEye1 小时前
企业 AI 管理新需求：不仅要接入模型，还要看懂每一次调用
javascript·ai编程
hoLzwEge2 小时前
AI签到「一劳永逸」
人工智能·程序员·ai编程
Rain的Java大神实战圈2 小时前
被问麻了！Function Calling、MCP、Skill 到底啥关系？一张图讲透三层架构，附 Java 生产落地全流程+30个坑
ai编程
文谦南宁AI普工2 小时前
写了个 PAP/PACT 授权面审计器：把 `poppy.json` 和 PACT 委托链的检查项跑成一条命令
aigc·ai编程
楚楚2512 小时前
2026最新5款AI编程助手基础版免费深度对比
ai编程
.Hypocritical.2 小时前
SpringBoot+Vue 前后端分离项目部署到云服务器
服务器·vue.js·spring boot
fthux2 小时前
编程语言：从机器指令到人类思维的演进史诗
ai编程
Rain的Java大神之路2 小时前
被问麻了！Function Calling、MCP、Skill 到底啥关系？一张图讲透三层架构，附 Java 生产落地全流程+30个坑
java·后端·ai编程
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02历年考研数学一、数学二、数学三真题试卷及答案PDF03GitHub 镜像站点04「全语录+省流版」邵艾伦 × 孙宇晨：聊风口、聊个人IP、聊年轻人如何抓住 AI 时代的机会05如何新建文件夹？ 电脑新建文件夹的4种方法06蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接07Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）08轻量化AI渗透武器库｜ARTEX自主攻防系统、资产梳理、漏洞挖掘、链路分析全流程智能化落地09Telegram APK 下载安装完整指南 — 2026年最新10微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新