【开源】基于Vue.js的电子元器件管理系统的设计和实现

标签：Vue return 模块 qw ResultUtil value js 开源元器件

【开源】基于Vue.js的电子元器件管理系统的设计和实现_vue.js

一、摘要

1.1 项目简介

电子元器件是高校电子实验室进行实验的必备物品，随着电子元器件的种类不断增多，人工管理的方式容易出现错误，对实验室管理员的体验感也不是很好，所以需要开发一套电子元器件管理系统实现对电子元器件的数字化管理需求，其中包括对电子元器件档案的管理和采购入库、学生领用的管理，提高了生产效率，在电子元器件行业数字化转型的背景下，电子元器件系统的建设和应用也具有重要的现实意义和应用价值。本文采用Java等技术构建了电子元器件管理系统的开发环境，完成了电子元器件管理系统的设计研发。最后，针对现有电子元器件系统的不足，提出了优化用户界面、加强数据安全、改进报告系统等改进措施。

项目详细录屏: https://www.bilibili.com/video/BV1UL411i7LC

二、研究内容

电子元器件管理系统包含元器件单位模块、元器件仓库模块、元器供应商模块、元器件品类模块、元器件明细模块、元器件采购模块、元器件采购审核模块、元器件领用模块、学生元器件申请模块、我的申请模块、申请审核模块，还包含系统自带的用户管理、部门管理、角色管理、菜单管理、日志管理、数据字典管理、文件管理、图表展示等基础模块，电子元器件管理系统基于角色的访问控制，可将权限精确到按钮级别，适合设计精确的权限约束需求。

电子元器件管理系统的主要任务是电子元器件综合管理、综合规划、合理采购、保持正确管理、科学管理和及时更新。充分利用电子元器件的使用效率及其最佳效益。提高教育质量，加强实验室电子元器件管理，为此电子元器件管理系统应包括以下功能。

元器件类型模块，实现对元器件类型的增加、删除、编辑和模拟查询，要求实时统计系统中元器件类型的件数。
元器件档案模块，实现对元器件档案的增加、删除、编辑和模拟查询，要求支持元器件图片的上传和预览。
元器件采购模块，实现对元器件的采购，采购需要审核，仓管员采购完成后可一键入库，库存回写元器件档案模块。
用户档案管理，实现对终端用户数据的维护，包括姓名、手机号、头像等数据，员工可自己修改密码。
角色管理，采用基于角色的访问控制，对于管理员、仓管员分配不同的菜单权限。
日志管理，用户对元器件相关模块的操作数据需要自动化记录，管理员可在后台查询，日志需要包括操作人、操作时间和操作的内容。

根据项目要求，元器件模块前端采用Vue.js实现，系统后端要求采用springBoot实现，采用mybatisPlus读写数据库，数据库采用MySQL，采用Redis中间件作为数据缓存，最终实现电子元器件管理系统的设计、开发和测试。

前端：Vue 2.7.10

后端：Spring Boot 3.1.10

数据库：MySQL 8.0.31

【开源】基于Vue.js的电子元器件管理系统的设计和实现_java_02

元器件类型模块 元器件类型的研究意义在于，它对电子元器件行业的产品开发和市场竞争具有重要影响。首先，根据元器件的类型，市场需求、价格、利润率等方面存在差异，通过研究消费者的购买行为和偏好，以及市场竞争和趋势，可以确定公司应该开发什么类型的元器件，并制定适当的产品规划和定价策略。对零件类型的研究也可以帮助公司了解市场的多样性和可变性，并很好地适应市场需求和趋势。例如，新兴的消费市场，一个特殊群体的消费需求，都需要用不同类型的零件来满足。因此，通过持续的零件类型研究，企业可以抓住市场机遇，不断创新和优化产品，提高市场份额和品牌知名度。
元器件仓库模块 元器件仓库模块的研究意义在于对企业的元器件管理和物流效率产生重要影响。首先，元器件仓库是企业储存、储存和配送元器件的重要部门。通过研究元器件仓库的设计、布局和管理策略，可以优化元器件仓库的运营流程，提高元器件的存储密度和运输效率，降低运营成本。元器件仓库模块还帮助公司跟踪元器件供应链信息，更好地了解元器件市场趋势和库存状况。例如，通过元器件编码系统、RFID设备等技术手段，实现元器件的小型化管理和跟踪，以确保元器件的来源和质量可追溯，从而为企业的采购计划和库存管理提供参考依据。
元器件档案模块 研究组件元器件档案的意义在于，在企业的元器件管理和决策中发挥着重要作用。首先，元器件包含有关零件的基本信息，例如零件名称、型号、规格、制造商和性能参数。通过建立完善的元器件档案，对元器件进行分类、分类和管理，可以提高元器件管理的效率和准确性。例如，通过分析元器件库存数据，可以确定哪些元器件需要增加采购，哪些零件需要减少库存，以及采购路线是否需要优化，从而降低采购成本，提高元器件库存周转率。
元器件采购模块 元器件是电子产品的基本元器件，包括电阻器、电容器、晶体管、集成电路等。没有这些元器件，就无法制造出完整的电子产品。因此，企业需要采购元器件，以保证生产和销售的正常运行。元器件采购是保证生产的必要条件。当公司缺乏所需的零件时，可能会影响产品的速度和质量，甚至导致生产线停工。因此，及时采购必要的元器件是维持生产运行的必要措施，元器件采购也有助于公司降低生产成本。通过考虑元器件价格、质量和供应路线等因素，公司可以选择更经济、高效和稳定的元器件来源，并降低不必要的成本。元器件采购也是企业市场竞争力的一个重要因素。在竞争激烈的市场环境中，企业需要不断优化元器件采购策略，提高产品质量和性能，降低生产成本，实现可持续发展目标。
元器件领用模块 元器件的领用意义在于它在企业元器件管理和成本管理中具有重要作用。首先，元器件领用系统的实施可以有效监控元器件库存的流向，及时发现库存异常和损失，提高元器件管理的效率和准确性，还可以帮助公司管理元器件成本。通过比较每个部门或工人收到的元器件的数量和质量，可以避免由于过度使用或滥用元器件而造成的浪费和不必要的成本支出，此外，元器件数据的统计和分析可以优化零件采购计划，进一步降低零件成本。元器件领用模块带来了很多的效率和便利。

三、界面展示

3.1 登录&注册&主页

【开源】基于Vue.js的电子元器件管理系统的设计和实现_spring boot_03

【开源】基于Vue.js的电子元器件管理系统的设计和实现_spring boot_04

@RequestMapping(value = "/regist", method = RequestMethod.POST)
@ApiOperation(value = "注册用户")
public Result<Object> regist(@Valid User u){
    u.setEmail(u.getMobile() + "@qq.com");
    QueryWrapper<User> userQw = new QueryWrapper<>();
    userQw.and(wrapper -> wrapper.eq("username", u.getUsername()).or().eq("mobile",u.getMobile()));
    if(iUserService.count(userQw) > 0L) {
        return ResultUtil.error("登录账号/手机号重复");
    }
    String encryptPass = new BCryptPasswordEncoder().encode(u.getPassword());
    u.setPassword(encryptPass).setType(0);
    iUserService.saveOrUpdate(u);
    QueryWrapper<Role> roleQw = new QueryWrapper<>();
    roleQw.eq("default_role",true);
    List<Role> roleList = iRoleService.list(roleQw);
    if(roleList.size() > 0){
        for(Role role : roleList) {
            iUserRoleService.saveOrUpdate(new UserRole().setUserId(u.getId()).setRoleId(role.getId()));
        }
    }
    return ResultUtil.data(u);
}

【开源】基于Vue.js的电子元器件管理系统的设计和实现_spring boot_05

3.2 元器件单位模块

【开源】基于Vue.js的电子元器件管理系统的设计和实现_spring boot_06

@RequestMapping(value = "/getByPage", method = RequestMethod.GET)
@ApiOperation(value = "查询元器件计量单位")
public Result<IPage<AdminAssetUnit>> getByPage(@ModelAttribute AdminAssetUnit unit, @ModelAttribute PageVo page) {
    QueryWrapper<AdminAssetUnit> qw = new QueryWrapper<>();
    if(!ZwzNullUtils.isNull(unit.getName())) {
        qw.like("name",unit.getName());
    }
    if(!ZwzNullUtils.isNull(unit.getBm())) {
        qw.like("bm",unit.getBm());
    }
    return new ResultUtil<IPage<AdminAssetUnit>>().setData(iAdminAssetUnitService.page(PageUtil.initMpPage(page),qw));
}

【开源】基于Vue.js的电子元器件管理系统的设计和实现_电子元器件_07

@RequestMapping(value = "/insert", method = RequestMethod.POST)
@ApiOperation(value = "新增元器件计量单位")
public Result<AdminAssetUnit> insert(AdminAssetUnit adminAssetUnit){
    int number = (int)iAdminAssetUnitService.count() + 1;
    adminAssetUnit.setBm("DW" + number);
    if(iAdminAssetUnitService.saveOrUpdate(adminAssetUnit)){
        return new ResultUtil<AdminAssetUnit>().setData(adminAssetUnit);
    }
    return ResultUtil.error();
}

@RequestMapping(value = "/update", method = RequestMethod.POST)
@ApiOperation(value = "编辑元器件计量单位")
public Result<AdminAssetUnit> update(AdminAssetUnit adminAssetUnit){
    if(iAdminAssetUnitService.saveOrUpdate(adminAssetUnit)){
        return new ResultUtil<AdminAssetUnit>().setData(adminAssetUnit);
    }
    return ResultUtil.error();
}

@RequestMapping(value = "/delByIds", method = RequestMethod.POST)
@ApiOperation(value = "删除元器件计量单位")
public Result<Object> delAllByIds(@RequestParam String[] ids){
    for(String id : ids){
        iAdminAssetUnitService.removeById(id);
    }
    return ResultUtil.success();
}

3.3 元器件仓库模块

【开源】基于Vue.js的电子元器件管理系统的设计和实现_java_08

@RequestMapping(value = "/getByPage", method = RequestMethod.GET)
@ApiOperation(value = "查询元器件仓库档案")
public Result<IPage<AdminAssetWare>> getByPage(@ModelAttribute AdminAssetWare ware, @ModelAttribute PageVo page){
    QueryWrapper<AdminAssetWare> qw = new QueryWrapper<>();
    if(!ZwzNullUtils.isNull(ware.getName())) {
        qw.like("name",ware.getName());
    }
    if(!ZwzNullUtils.isNull(ware.getAddress())) {
        qw.like("address",ware.getAddress());
    }
    if(!ZwzNullUtils.isNull(ware.getAdminName())) {
        qw.and(wrapper -> wrapper.eq("admin_name", ware.getAdminName()).or().eq("department",ware.getAdminName()));
    }
    IPage<AdminAssetWare> data =  iAdminAssetWareService.page(PageUtil.initMpPage(page),qw);
    return new ResultUtil<IPage<AdminAssetWare>>().setData(data);
}

【开源】基于Vue.js的电子元器件管理系统的设计和实现_spring boot_09

@RequestMapping(value = "/insert", method = RequestMethod.POST)
@ApiOperation(value = "新增元器件仓库档案")
public Result<AdminAssetWare> insert(AdminAssetWare adminAssetWare){
    if(!Objects.equals(1,adminAssetWare.getAttributionType())) {
        adminAssetWare.setAttributionType(0);
        QueryWrapper<User> qw = new QueryWrapper<>();
        qw.eq("nickname",adminAssetWare.getAdminName());
        qw.eq("status","0");
        List<User> rosterUserList = iUserService.list(qw);
        if(rosterUserList.size() < 1) {
            return ResultUtil.error("仓管员不存在或离职");
        }
        adminAssetWare.setJobNumber(rosterUserList.get(0).getUsername());
    }
    // 判断名称重复
    QueryWrapper<AdminAssetWare> qw = new QueryWrapper<>();
    qw.eq("name",adminAssetWare.getName());
    if(iAdminAssetWareService.count(qw) > 0L) {
        return ResultUtil.error(adminAssetWare.getName() + "仓库已存在，不能重复添加");
    }
    iAdminAssetWareService.saveOrUpdate(adminAssetWare);
    return ResultUtil.success();
}

3.4 元器件供应商模块

【开源】基于Vue.js的电子元器件管理系统的设计和实现_vue.js_10

@RequestMapping(value = "/getByPage", method = RequestMethod.GET)
@ApiOperation(value = "查询元器件供应商")
public Result<IPage<AdminAssetSupplier>> getByPage(@ModelAttribute AdminAssetSupplier supplier, @ModelAttribute PageVo page){
    QueryWrapper<AdminAssetSupplier> qw = new QueryWrapper<>();
    if(!ZwzNullUtils.isNull(supplier.getName())) {
        qw.like("name",supplier.getName());
    }
    if(!ZwzNullUtils.isNull(supplier.getType())) {
        qw.like("type",supplier.getType());
    }
    if(!ZwzNullUtils.isNull(supplier.getAddress())) {
        qw.like("address",supplier.getAddress());
    }
    return new ResultUtil<IPage<AdminAssetSupplier>>().setData(iAdminAssetSupplierService.page(PageUtil.initMpPage(page),qw));
}

【开源】基于Vue.js的电子元器件管理系统的设计和实现_电子元器件_11

@RequestMapping(value = "/insert", method = RequestMethod.POST)
@ApiOperation(value = "新增元器件供应商")
public Result<AdminAssetSupplier> insert(AdminAssetSupplier adminAssetSupplier){
    iAdminAssetSupplierService.saveOrUpdate(adminAssetSupplier);
    return ResultUtil.success();
}

@RequestMapping(value = "/update", method = RequestMethod.POST)
@ApiOperation(value = "编辑元器件供应商")
public Result<AdminAssetSupplier> update(AdminAssetSupplier adminAssetSupplier){
    iAdminAssetSupplierService.saveOrUpdate(adminAssetSupplier);
    return ResultUtil.success();
}

@RequestMapping(value = "/delByIds", method = RequestMethod.POST)
@ApiOperation(value = "删除元器件供应商")
public Result<Object> delByIds(@RequestParam String[] ids){
    for(String id : ids){
        iAdminAssetSupplierService.removeById(id);
    }
    return ResultUtil.success();
}

3.5 元器件品类模块

【开源】基于Vue.js的电子元器件管理系统的设计和实现_spring boot_12

@RequestMapping(value = "/getByPage", method = RequestMethod.GET)
@ApiOperation(value = "查询元器件品类")
public Result<IPage<AdminAsset>> getByPage(@ModelAttribute AdminAsset asset, @ModelAttribute PageVo page) {
    QueryWrapper<AdminAsset> qw = new QueryWrapper<>();
    if(!ZwzNullUtils.isNull(asset.getType())) {
        qw.eq("type",asset.getType());
    }
    if(!ZwzNullUtils.isNull(asset.getType2())) {
        qw.eq("type2",asset.getType2());
    }
    if(!ZwzNullUtils.isNull(asset.getCode())) {
        qw.like("code",asset.getCode());
    }
    if(!ZwzNullUtils.isNull(asset.getName())) {
        qw.like("name",asset.getName());
    }
    if(!ZwzNullUtils.isNull(asset.getGg())) {
        qw.like("gg",asset.getGg());
    }
    IPage<AdminAsset> data = iAdminAssetService.page(PageUtil.initMpPage(page),qw);
    for (AdminAsset vo : data.getRecords()) {
        QueryWrapper<AdminAssets> itemQw = new QueryWrapper<>();
        itemQw.eq("asset_id",vo.getId());
        itemQw.eq("status",0);
        vo.setCount(iAdminAssetsService.count(itemQw));
    }
    return new ResultUtil<IPage<AdminAsset>>().setData(data);
}

【开源】基于Vue.js的电子元器件管理系统的设计和实现_spring boot_13

@RequestMapping(value = "/fastInsert", method = RequestMethod.POST)
@ApiOperation(value = "快速新增元器件品类")
public Result<AdminAsset> fastInsert(@RequestParam String name,@RequestParam String type,@RequestParam String type2,@RequestParam String modal){
    QueryWrapper<AdminAsset> qw = new QueryWrapper<>();
    qw.eq("name",name);
    qw.eq("xh",modal);
    if(iAdminAssetService.count(qw) > 0) {
        return ResultUtil.error("元器件品类已存在，无需重复添加");
    }
    AdminAsset as = new AdminAsset();
    as.setName(name);
    as.setType(type);
    as.setType2(type2);
    as.setGg("");
    as.setXh(modal);
    as.setJldw("个");
    as.setXsj(BigDecimal.ZERO);
    as.setImageUrl("");
    as.setRemark("");
    iAdminAssetService.saveOrUpdate(as);
    return new ResultUtil<AdminAsset>().setData(as);
}

3.6 元器件明细模块

【开源】基于Vue.js的电子元器件管理系统的设计和实现_vue.js_14

【开源】基于Vue.js的电子元器件管理系统的设计和实现_java_15

【开源】基于Vue.js的电子元器件管理系统的设计和实现_java_16

3.7 元器件类型模块

【开源】基于Vue.js的电子元器件管理系统的设计和实现_管理系统_17

【开源】基于Vue.js的电子元器件管理系统的设计和实现_管理系统_18

3.8 元器件采购模块

【开源】基于Vue.js的电子元器件管理系统的设计和实现_管理系统_19

@RequestMapping(value = "/getByPage", method = RequestMethod.GET)
@ApiOperation(value = "查询元器件采购")
public Result<IPage<AdminAssetsBuy>> getByPage(@ModelAttribute AdminAssetsBuy buy, @ModelAttribute PageVo page) {
    QueryWrapper<AdminAssetsBuy> qw = new QueryWrapper<>();
    qw.eq("user_id",securityUtil.getCurrUser().getId());
    if(!ZwzNullUtils.isNull(buy.getName())) {
        qw.like("name",buy.getName());
    }
    if(!ZwzNullUtils.isNull(buy.getReason())) {
        qw.like("reason",buy.getReason());
    }
    IPage<AdminAssetsBuy> data = iAdminAssetsBuyService.page(PageUtil.initMpPage(page),qw);
    return new ResultUtil<IPage<AdminAssetsBuy>>().setData(data);
}

【开源】基于Vue.js的电子元器件管理系统的设计和实现_vue.js_20

【开源】基于Vue.js的电子元器件管理系统的设计和实现_java_21

@RequestMapping(value = "/submitData", method = RequestMethod.POST)
@ApiOperation(value = "提交元器件采购")
public Result<Object> submitData(@RequestParam String[] ids,@RequestParam String reason,@RequestParam String supplierId){
    AdminAssetSupplier supplier = iAdminAssetSupplierService.getById(supplierId);
    if(supplier == null) {
        return ResultUtil.error("供应商不存在");
    }
    List<AdminAssetsBuy> voList = new ArrayList<>();
    for(String id : ids){
        AdminAssetsBuy buy = iAdminAssetsBuyService.getById(id);
        if(buy == null) {
            return ResultUtil.error("id = " + id + "不存在");
        }
        if(Objects.equals(0,buy.getSubmitFlag())) {
            voList.add(buy);
        }
    }
    for (AdminAssetsBuy vo : voList) {
        vo.setSubmitFlag(1);
        vo.setOpen(supplier.getOpen());
        vo.setPushName(supplier.getUserName());
        vo.setCode(supplier.getCode());
        vo.setRise(supplier.getRise());
        vo.setSupplierId(supplier.getId());
        vo.setSupplierName(supplier.getName());
        iAdminAssetsBuyService.saveOrUpdate(vo);
    }
    return ResultUtil.success();
}

【开源】基于Vue.js的电子元器件管理系统的设计和实现_java_22

【开源】基于Vue.js的电子元器件管理系统的设计和实现_管理系统_23

@RequestMapping(value = "/auditData", method = RequestMethod.POST)
@ApiOperation(value = "审核元器件采购")
public Result<Object> auditData(@RequestParam String[] ids,@RequestParam int status){
    for(String id : ids){
        AdminAssetsBuy buy = iAdminAssetsBuyService.getById(id);
        if(buy == null || !Objects.equals(0,buy.getAuditFlag())) {
            continue;
        }
        User user = iUserService.getById(buy.getUserId());
        if(user == null) {
            continue;
        }
        buy.setAuditFlag(status);
        // 通过
        if(Objects.equals(1,status)) {
            buy.setQuantity2(buy.getQuantity());
        }
        iAdminAssetsBuyService.saveOrUpdate(buy);
    }
    return ResultUtil.success();
}

【开源】基于Vue.js的电子元器件管理系统的设计和实现_java_24

@RequestMapping(value = "/inWare", method = RequestMethod.POST)
@ApiOperation(value = "入库元器件采购")
public Result<Object> inWare(@RequestParam String id,@RequestParam int quantity,@RequestParam String date,@RequestParam String warehouse){
    AdminAssetsBuy buy = iAdminAssetsBuyService.getById(id);
    if(buy == null) {
        return ResultUtil.error("采购单不存在");
    }
    AdminAssetWare ware = iAdminAssetWareService.getById(warehouse);
    if(ware == null) {
        return ResultUtil.error("仓库不存在");
    }
    if(ZwzNullUtils.isNull(date)) {
        date = DateUtil.today();
    }
    QueryWrapper<AdminAssets> qw = new QueryWrapper<>();
    qw.eq("asset_id",buy.getAssetId());
    Long assetsCount = iAdminAssetsService.count(qw);
    for(int i = 1 ; i <= quantity; i ++) {
        AdminAssets adminAssets = new AdminAssets();
        adminAssets.setName(buy.getName());
        adminAssets.setModel(buy.getModel());
        adminAssets.setAssetId(buy.getAssetId());
        adminAssets.setCode("ZC" + buy.getAssetCode() + String.format("%04d", assetsCount + i));
        adminAssets.setUnit(buy.getUnit());
        adminAssets.setBuyUser(buy.getUserName());
        adminAssets.setBuyNumber(buy.getId());
        adminAssets.setBuyDate(date);
        adminAssets.setWarehouse(ware.getId());
        adminAssets.setWarehouseName(ware.getName());
        adminAssets.setGiveType(0);
        adminAssets.setGiveId("");
        adminAssets.setGiveName("");
        adminAssets.setOutFlag(0);
        adminAssets.setOutWork("");
        adminAssets.setOutTime("");
        adminAssets.setStatus(0);
        adminAssets.setDestroyName("");
        adminAssets.setDestroyTime("");
        adminAssets.setApplyFlag(0);
        adminAssets.setApplyUser("");
        adminAssets.setApplyTime("");
        iAdminAssetsService.saveOrUpdate(adminAssets);
    }
    if(BigDecimal.valueOf(quantity).compareTo(buy.getQuantity())< 0) {
        buy.setQuantity2(buy.getQuantity2().subtract(BigDecimal.valueOf(quantity)));
        buy.setWareFlag(1);
    } else {
        buy.setQuantity2(BigDecimal.ZERO);
        buy.setWareFlag(2);
    }
    iAdminAssetsBuyService.saveOrUpdate(buy);
    return ResultUtil.success();
}

3.9 元器件领用模块

【开源】基于Vue.js的电子元器件管理系统的设计和实现_vue.js_25

@RequestMapping(value = "/apply", method = RequestMethod.POST)
@ApiOperation(value = "申请元器件")
public Result<Object> apply(@RequestParam String id){
    User user = securityUtil.getCurrUser();
    AdminAssets asset = iAdminAssetsService.getById(id);
    if(asset == null) {
        return ResultUtil.error("元器件不存在");
    }
    if(!Objects.equals(0,asset.getOutFlag())) {
        return ResultUtil.error("手慢啦!元器件已被" + asset.getGiveName() + "领用,请刷新");
    }
    asset.setApplyFlag(1);
    asset.setApplyUser(user.getNickname());
    asset.setApplyTime(DateUtil.now());
    iAdminAssetsService.saveOrUpdate(asset);
    return ResultUtil.success();
}

【开源】基于Vue.js的电子元器件管理系统的设计和实现_电子元器件_26