全国职业院校技能大赛应用软件开发赛项 例题 笔记

***-﹥原博客链接﹤-***
第一次打这种比赛 差不多都跨专业了
小孩不懂事 写着玩的

任务 2：制造执行 MES—BOM 管理

列表功能

1.进入双碳管理系统主界面，点击左侧制造执行 MES 下的 BOM 管
理标签，进入 BOM 管理页面**。实现 BOM 管理数据列表显示，
数据列表 显示内容应包括：编号、名称、产品、型号、规格、单
位、【修改】 和【删除】按钮。

按照题目要求勾选 生成代码 覆盖到前端项目中

覆盖完成之后访问界面 查看是否显示成功

发现之前思路有点问题 这里添加字段之前可以先搜索修改按钮的代码 查看执行了哪个方法 这里是handleUpdata还传了点参数(给修改功能做铺垫)

reset() {
  this.form = {
    id: null,
    name: null,
    bomDescribe: null,
    productId: null,
    materialId: null,
    materialName: null,
    materialModel: null,
    materialSpecifications: null,
    materialUnit: null,
  };
  this.mesBomDetailItemList = [];
  this.resetForm("form");
}

刨根到底之后发现执行了reset方法 所以点击修改按钮之后 执行了reset初始form对象 所以 里面要提前添加赋值题目要求的字段

  <el-table-column label="产品" align="center" prop="materialName" />
  <el-table-column label="型号" align="center" prop="materialModel" />
  <el-table-column label="规格" align="center" prop="materialSpecifications" />
  <el-table-column label="单位" align="center" prop="materialUnit" />

最后按照模板添加代码就完了

成功显示

---

修改功能

提前理清楚要干什么 首先啊。。

1. 上半部分添加字段
2. 其中产品模型是下拉框 要显示产品建模的模型名称
3. 选择下拉框中的模型名称 其他输入框得同步数据(双向绑定?)
4. 下半部分显示数据也需要同步上半部分的点击
5. 下半部分物料多了个文本按钮 要弹上个任务的materialDialog

---

添加上半部分输入框

export function getProductList() {
  return request({
    url: "/mes/product/getList",
    method: "GET",
  });
}

既然要获取产品建模的所以模型名称 提前给js文件写了 这里要不分页的API(API文档)

去elementui中找到下拉框的样例 直接赋值代码

productAllList() {
  getProductList().then((response) => {
    this.productList = response.data;
  });
},

引入js 编写方法 data中创建变量 最后放到created周期里

<el-form-item label="产品模型" prop="productId">
  <el-select v-model="form.productId" placeholder="请选择" @change="changeModel">
    <el-option
      v-for="item in productList"
      :key="item.id"
      :label="item.modeName"
      :value="item.id"
    >
    </el-option>
  </el-select>
</el-form-item>
<el-form-item label="产品" prop="materialName">
  <el-input v-model="form.name" placeholder="请输入名称" />
</el-form-item>

for循环遍历productList数组的值label就是下拉框现实的内容 但是实际值 是id (返回数据看API文档)

---

配置选择器-1

changeModel(id) {
  getProduct(id).then(response => { //getProduct 需要提前引入js(默认生成过)
    this.form.materialName = response.data.materialName;
  });
},

上文 选择器中@change方法用于监听option下拉框值变动 然后执行方法 ；因为产品输入框绑定的form对象里面的materialName 所以点击下拉框的label 产品输入框中的值就会变

雀氏变了

---

添加下半部分输入框

找到界面中间添加按钮执行的函数 这里有个初始化obj对象的操作 提前给下半部分输入框要的字段变量加上

  handleAddMesBomDetailItem() {
    let obj = {};
    obj.bomId = "";
    obj.dosage = "";
    obj.remark = "";
    obj.materialNmae = "";
    obj.materialModel = "";
    obj.materialSpecifications = "";
    obj.materialUnit = "";
    this.mesBomDetailItemList.push(obj);
  },

要加的都添加上

<el-table-column label="物料" prop="bomId" width="150">
  <template slot-scope="scope">
    <el-input v-model="scope.row.materialName" placeholder="请输入BomId" />
  </template>
</el-table-column>

<el-table-column label="物料" prop="bomId" width="150">
  <template slot-scope="scope">
    {{ scope.row.materialName }}
    <el-button type="text" @click="selectModel(scope.row)"
      >选择</el-button
    >
  </template>
</el-table-column>

还是按照格式补全 然后加一个文字按钮

这里要注意一下form的数据源为mesBomDetailItemList

---

配置文字按钮

selectModel(row) {
  if (row) {
    this.materialIndex = row.index;
  }
  this.Opmd = true;
},
loadUpDownData(value) {
  this.mesBomDetailItemList[this.materialIndex - 1].materialId = value.id;
  this.mesBomDetailItemList[this.materialIndex - 1].materialName =
    value.materialName;
  this.mesBomDetailItemList[this.materialIndex - 1].materialModel =
    value.materialModel;
  this.mesBomDetailItemList[this.materialIndex - 1].materialSpecifications =
    value.materialSpecifications;
  this.mesBomDetailItemList[this.materialIndex - 1].materialUnit =
    value.materialUnit;
  this.Opmd = false;
},
close() {
  this.Opmd = false;
},

还是跟之前一样 引入materialDialog.vue 定义一下方法 绑定一下数据

---

配置选择器-2

  changeModel(id) {
    getProduct(id).then((response) => {
      this.form.materialName = response.data.materialName;
      let data = response.data.mesProductMaterialItemList;
      this.mesBomDetailItemList = [];
      data.forEach((item) => {
        let obj = {};
        obj.materialId = item.materialId;
        obj.materialName = item.materialName;
        obj.materialModel = item.materialModel;
        obj.materialSpecifications = item.materialSpecifications;
        obj.materialUnit = item.materialUnit;
        obj.dosage = "";
        obj.remark = "";
        this.mesBomDetailItemList.push(obj);
      });
    });
  },

这之前基础上接着添加

data获取了产品建模详细信息的产品物料子信息 再将需要的值获取添加到mesBomDetailItemList最后因为 对象的值变化 输入框的值也会变

---

修边

加一下disabled 属性 最后插入数据添加也是成功了

---

搜索功能

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

---

新建功能

4.数据列表上方显示【新建】按钮，点击【新建】按钮后，在弹 出 的「添加 BOM 管理」对话框中输入名称（*必填项）、产品（不可 编辑）、产品类型、描述并添加物料后点击【确定】按钮可新建 BOM 管理数据并提示“新建成功”字样，若点击【取消】按钮可关闭 对话框。

---

心得

• 代码搜关键字
• 搞不懂字段看 API文档 用POSTMAN看response
• 记得加this.