任务5：智能仓储WMS—物料分类

xiaoagen
207 阅读6分钟

GZ008全国职业院校技能大赛应用软件系统开发赛项

任务5：智能仓储WMS—物料分类 题目解析

1.进入双碳管理系统主界面，点击左侧智能仓储WMS—物料分类标签，进入物料分类页面。实现物料分类数据列表显示，数据列表显示内容应包括：分类编码、分类名称、说明、【新增】【修改】【删除】按钮。

QQ_1750557584685.png

1.gif

找到对应页面，发现前端没写，后端写了增删改查，数据库表名为wms_material_category,

2.gif

直接利用低代码生成基础的增删改查，在一步一步去更改，只需要拿到前端代码即可，后端已经实现。

3.gif

找到对应的页面位置，直接将index和api复制粘贴进去，发现页面404了，但是按钮组件已经成功加载，说明api接口调用有问题，
import { listMaterialCategory, getCategory, delCategory, addCategory, updateCategory, exportCategory } from "@/api/material/materialCategory";
将index中的接口导入位置改为正确的，发现页面接口还是404，找到网络中的错误，发现url报错了，将他改正。
// 查询物料分类列表
export function listMaterialCategory(query) {
  return request({
    url: '/material/materialCategory/list',
    method: 'get',
    params: query
  })
}
成功展示出来了页面

QQ_1750557523875.png

2.数据项中，点击【新增】按钮后，弹出的「添加物料分类」对话框中填写内容包括：父级分类（默认值为点击数据项的分类名称）、分类编号、分类名称、说明，点击【保存】按钮可新建物料分类数据并提示“新建成功”字样，点击【取消】按钮可关闭对话框。

我们在index页面写一个方法来将父级分类展示出来
/** 获取父级分类选项 */
    getAllCategoryList() {
      listMaterialCategory().then(response => {
        this.allCategoryList = response.data || [];
        this.treeOptions = buildTree(this.allCategoryList, 0);
      });
    },
然后判断上下级关系
isSelfOrDescendant(node) {
      if (!this.form.id) return false;
      if (node.id === this.form.id) return true;
      // 判断是否为自己的下级
      const findDescendants = (id) => {
        const children = this.allCategoryList.filter(item => item.parentId === id);
        for (let child of children) {
          if (child.id === node.id) return true;
          if (findDescendants(child.id)) return true;
        }
        return false;
      };
      return findDescendants(this.form.id);
    },
取消按钮已经在低代码中自带给我们了，所以不需要再去写，我们再次打开页面试试

4.gif

完成。

3.数据项中，点击【修改】按钮后弹出「修改物料分类」对话框，对话框中可修改内容包括：父级分类、分类编码、分类名称、说明、修改完成后点击【确定】按钮可保存修改内容并刷新数据列表，若点击【取消】按钮可关闭对话框。其中父级分类下拉菜单中提供可选项。

低代码中也已经给我们写完了这些功能，我们打开试一下功能。

5.gif

完成。

4.数据项中，点击【删除】按钮后弹出「警告」对话框，对话框内容“是否确认删除物料分类编号为“N”的数据项？”点击【确定】按钮可删除内容并刷新数据列表，若点击【取消】按钮可关闭对话框。

接口又报404了，打开F12网络工具，找到报错信息
    "timestamp": "2025-06-22T10:25:38.587+0800",
    "status": 404,
    "error": "Not Found",
    "message": "No message available",
    "path": "/material/materialCategory1,3,4,5,6,7,8,9,10,11"
}
发现是path有问题，应该是
    "timestamp": "2025-06-22T10:25:38.587+0800",
    "status": 404,
    "error": "Not Found",
    "message": "No message available",
    #少了一个斜杠
    "path": "/material/materialCategory/1,3,4,5,6,7,8,9,10,11"
}
我们再试试

6.gif

完成

5.数据列表上方搜索框中输入分类编码后点击【搜索】按钮，可实现按搜索条件查询的功能并刷新列表数据，若点击【重置】按钮可清空输入的查询条件。

7.gif

6.数据列表上方左侧显示【新增】按钮，点击【新增】按钮后，在弹出的「添加物料分类」对话框中填写内容包括：父级分类（默认值为点击数据项的分类名称）、 分类编号、分类名称、说明，点击【保存】按钮可新建物料分类数据并提示“新建成功”字样，点击【取消】按钮可关闭对话框。其中父级分类下拉菜单中提供可选项。

1.gif

QQ_1750559707226.png

完成。

7.选中某条数据项， 数据列表上方左侧显示【修改】按钮变为“可用”状态，点击【修改】按钮后，弹出「修改物料分类」对话框，对话框中可修改内容包括：父级分类、分类编码、分类名称、说明、修改完成后点击【确定】按钮可保存修改内容并刷新数据列表，若点击【取消】按钮可关闭对话框。 其中父级分类下拉菜单中提供可选项。

2.gif

在上面就已经完成了这部分功能

8.选中某条数据项，数据列表上方左侧显示【删除】按钮变为“可用”状态，点击【删除】按钮后，弹出「警告」对话框，对话框内容“是否确认删除物料分类编号为“N”的数据项？”点击【确定】按钮可删除内容并刷新数据列表，若点击【取消】按钮可关闭对话框。

3.gif

这个功能也在上面就已经完成了

9.数据列表上方右侧【搜索】按钮，点击【搜索】按钮可以隐藏/显示搜索部分。

在index页面添加隐藏和刷新按钮，点击搜索和刷新就隐藏搜索栏
隐藏按钮在框架的双碳管理系统/src/components/RightToolbar/index.vue中已经帮我们写好了，直接将他放在index里，就可以使用，使用方法如下。
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" @click.native="toggleSearch" />

4.gif

至此，这个页面的功能就全部完成了。
avatar
文章
阅读
粉丝