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;

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

相关推荐
大明哥_2 小时前
14 万粉丝、106万点赞，用 Coze + 即梦 Seedream4.0 一键复刻小红书知识养生图文。保姆级教程！！
aigc
恋猫de小郭3 小时前
对于普通程序员来说 AI 是什么？AI 究竟用的是什么？
前端·flutter·ai编程
安思派Anspire5 小时前
创建完整的评估生命周期以构建高（二）
aigc·openai·agent
陈大鱼头5 小时前
Seedream 4.0：重新定义 AI 生图的低门槛与高质感
aigc
SixHateSeven5 小时前
探索提示词工程：一个导演的自我修养
aigc·ai编程
库森学长6 小时前
一文带你 "看见" MCP 的过程，彻底理解 MCP 的概念
llm·ai编程·mcp
用户4099322502127 小时前
FastAPI秒杀库存总变负数？Redis分布式锁能帮你守住底线吗
后端·ai编程·trae
MrSYJ7 小时前
Chat Memory你知道怎么用吗
llm·openai·ai编程
阿杆8 小时前
同事嫌参数校验太丑，我直接掏出了更优雅的 SpEL Validator
java·spring boot·后端
飞哥数智坊19 小时前
多次尝试用 CodeBuddy 做小程序，最终我放弃了
人工智能·ai编程
热门推荐
01GitHub 镜像站点02UV 工具安装与国内镜像源配置指南03Claude Code 平替：OpenAI发布 Codex CLI ，GPT-5 国内直接使用04UV安装并设置国内源0546个Nano-banana 精选提示词，持续更新中06保姆级教程：手把手教你用Dify实现完美多轮对话（附Chatflow和提示词）07A股预测还能更准？开源大模型Kronos带你跑通预测+回测全流程08Spec-Kit 使用指南09解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题10conda中设置镜像地址（附所有可换的地址）