效果
任务分块,在正式比赛前先写一写往年比赛任务并熟练掌握各个得分点,具体流程就是准备好框架让我们写页面
找到页面(0.7)
任务:进入双碳管理系统主界面，点击左侧制造执行MES下的质量管理标签，然后在下拉菜单中点击产品检验，进入产品检验页面。
表格(0.7)
得分点描述: 实现产品检验数据列表显 示，数据列表显示内容应 包括：编号、流水号、计 划编号、完工单号、作业 名称、生产线名称、检验 批次、产品名称、生产日 期、检验项、生产数量、 抽检数量、检验值、阈值 上限、阈值下限、检验结 果、检验人、检验时间、 【修改】按钮、【删除】按钮。
解决:使用element ui渲染表格没有什么样式,给的框架里很多样式都是某一个块里面全局使用的,由于后端是java写的不会修改只会写node,直接用的死数据,难点就是可能就是对准任务要求的字段将后端传入的数据做一些处理,比如中英文,哪些字段需要渲染,哪些不需要
html
<el-table v-loading="loading" :data="list">
<el-table-column label="编号" align="center" prop="id" />
<el-table-column label="流水号" align="center" prop="serialNumber" />
<el-table-column label="计划编号" align="center" prop="planCode" />
<el-table-column label="完工单号" align="center" prop="workOrderCode" />
<el-table-column label="作业名称" align="center" prop="jobName" />
<el-table-column label="生产线名称" align="center" prop="lineName" />
<el-table-column label="检验批次" align="center" prop="batchCode" />
<el-table-column label="产品名称" align="center" prop="productName" />
<el-table-column label="生产日期" align="center" prop="productionDate" />
<el-table-column label="检验项" align="center" prop="checkItem" />
<el-table-column label="生产数量" align="center" prop="productionQuantity" />
<el-table-column label="抽检数量" align="center" prop="sampleQuantity" />
<el-table-column label="检验值" align="center" prop="checkValue" />
<el-table-column label="阈值上限" align="center" prop="upperThreshold" />
<el-table-column label="阈值下限" align="center" prop="lowerThreshold" />
<el-table-column label="检验结果" align="center" prop="checkResult" />
<el-table-column label="检验人" align="center" prop="inspector" />
<el-table-column label="检验时间" align="center" prop="checkTime" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>修改(1.8)
修改的表单(0.6)
任务:点击【修改】按钮后弹出 「修改产品检验单」对话 框，对话框中可修改内容 包括：完工单号（*必填 项）、检验标准（*必填项）、抽检数量（*必填项）、检验值（*必填项）、检验结果（*必填项）、备注。
解决 使用遮罩层 通过一个属性控制来使其显示关闭 并对获取的表单字段按任务要求做一些处理
完工工单选择(0.6)
任务：点击完工单号【选择】 按钮后，弹出「选择 生产完工单」对话框， 点击「选择生产完工 单」对话框中的数据 列表信息后的【选择】 按钮后将数据自动填写 至产品检验单中。点击 检验标准【选择】按钮 后，弹出「选择检验标准」对话框，点击「选择检验标准」对话框中的数据列表信息后的【选择】按钮后将数据自动填写至产品检验单中。
解决:和修改表单差不多 就是多套了一层
修改功能(0.6)
任务:填写完成后点击【确定】按钮可修改产品检验单并提示"修改成功"字样，若点击【取消】按钮可关闭对话框。
解决:使用el ui自带的提示样式更多 根据不同按钮做出不同效果
删除(0.6)
任务:点击【删除】按钮可删除产品检验单数据并提示"删除成功"字样。
解决: 就是获取该条数据id给后端然后重新渲染,或在前端删除然后通知后端删除该条数据
搜索(0.6)
任务:数据列表上方搜索框中输入流水号、完工单号、计划编号、作业名称、产品名称、检验批次、生产日期（区间选择）、检验项、检验结果下拉选项（结果包括"合格""不合格"）、检验人、检验时间（区间选择）后点击【搜索】按钮，可实现按搜索条件模糊查询的功能并刷新列表数据，若点击【重置】按钮可清空输入的查询条件。
解决: 部分查询条件是日期选择需要额外处理 ,剩下全是文本框 ,就根据条件过滤现有数据
新增(1.8)
新增表单(0.6)
任务 :数据列表上方显示【新增】按钮，点击【新增】按钮后，在弹出的「添加生产采样单」对话框中输入完工单号（*必填项）、检验标准（*必填项）、抽检数量（*必填项）、检验值（*必填项）、检验结果（*必填项）、备注。 解决:同修改使用遮罩层 通过一个属性控制来使其显示关闭 并对获取的表单字段按任务要求做一些处理
完工工单选择(0.6)
任务：点击完工单号【选择】 按钮后，弹出「选择 生产完工单」对话框， 点击「选择生产完工 单」对话框中的数据 列表信息后的【选择】 按钮后将数据自动填写 至产品检验单中。点击 检验标准【选择】按钮 后，弹出「选择检验标准」对话框，点击「选择检验标准」对话框中的数据列表信息后的【选择】按钮后将数据自动填写至产品检验单中
解决:和新增表单差不多 就是多套了一层
新增功能(0.6)
任务:填写完成后点击【确定】按钮可新增产品检验单并提示"新增成功"字样，若点击【取消】按钮可关闭对话框
解决: 就是获取该条新增表单给后端然后后端将剩下没写字段做处理后然后重新渲染前端重新请求,或在前端新增然后通知后端删除该条数据