UniApp 首件检作业模块技术文档

---

UniApp 首件检作业模块技术文档

1. 首件检作业界面 (FirstCheckOperation)

1.1 页面结构

1.2 核心功能实现

1.2.1 数据初始化

onLoad(query) {
  const chkId = query.chkId;
  this.getAllOper();
  this.queryDetial(chkId);
  
  // 状态栏高度适配
  let statusBarHeight = uni.getStorageSync('statusBarHeight');
  this.padding = `${(statusBarHeight + 28) * 2}rpx`;
}

1.2.2 检测项数据获取

queryDetial(chkId) {
  this.$http.get(`${API}/queryChkDetailByChkId?id=${chkId}`)
    .then(res => {
      this.lineId = res.data.lineId;
      this.user = res.data.user;
      this.woId = res.data.woId;
      this.productId = res.data.productId;
      this.productName = res.data.productName;
      this.chkWorkOperationVO = res.data.chkWorkOperationVO;
    })
}

1.3 关键技术点

1.3.1 动态表格渲染

// 获取检测项完成比例
getRatio(records) {
  const total = records.length;
  const done = records.filter(r => r.checkValue).length;
  return `${done}/${total}`;
}

// 状态指示器
statusCircleClass(item) {
  return {
    'red-circle': !this.isAllChecked(item.chkInspectionRecordVOS),
    'green-circle': this.isAllChecked(item.chkInspectionRecordVOS)
  }
}

1.3.2 选择器组件

  {{ record.checkValue || '请选择' }}

---

2. 核心功能说明

2.1 功能特性

功能模块	功能描述
基本信息展示	显示产线、工号、工单等固定信息
折叠式检测项	支持展开/折叠查看各工序检测明细
状态可视化	通过红绿圆点实时显示检测项完成状态
多样化输入	支持选择器（OK/NG）和数值输入两种输入方式
数据持久化	支持临时保存检测结果
完整性校验	提交时自动校验必填项

2.2 组件交互流程

用户 页面 后端 检测项 保存按钮 提交按钮 进入首件检页面 获取检测任务数据 返回检测项配置 渲染检测表格 填写/选择检测值 点击保存 提交临时保存请求 点击提交 提交最终检测结果 返回操作结果 显示操作反馈 用户 页面 后端 检测项 保存按钮 提交按钮

---

3. 技术实现细节

3.1 数据结构

3.1.1 检测项数据结构

chkWorkOperationVO: [
  {
    opId: "OP1001",
    opName: "车削加工",
    chkInspectionRecordVOS: [
      {
        inspectionItemName: "孔径尺寸",
        unit: "mm",
        standardValue: "50.00",
        maxValue: "50.10",
        minValue: "49.90",
        type: "NUMERIC", // JUDGE/NUMERIC
        checkValue: ""
      }
    ]
  }
]

3.2 样式方案

3.2.1 表格样式控制

/* 表头样式 */
.table-header-green {
  background: #DDD9C3;
  color: #7D786D;
  padding: 12rpx;
  font-size: 28rpx;
}

/* 数据行样式 */
.content-cell-black {
  color: #333;
  border-bottom: 1rpx solid #EEE;
  padding: 16rpx;
}

/* 状态指示器 */
.green-circle {
  background: #4CAF50;
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
}

.red-circle {
  background: #F44336;
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
}

---

4. 接口规范

4.1 接口列表

接口类型	接口地址	功能说明
GET	/queryChkDetailByChkId	获取检测任务明细
POST	/savaChkOperate	临时保存检测结果
POST	/submitChkOperate	提交检测结果

4.2 请求示例

// 保存请求参数
{
  "chkInspectionRecordVOS": [
    {
      "id": 1001,
      "checkValue": "OK",
      "inspectionItemId": "ITEM001"
    }
  ]
}

// 提交请求参数
{
  "id": "CHK202308001",
  "chkInspectionRecordVOS": [
    {
      "id": 1001,
      "checkValue": "50.05",
      "inspectionItemId": "ITEM002"
    }
  ]
}

---

5. 异常处理机制

5.1 异常代码表

错误代码	错误描述	处理建议
40001	检测项数据不完整	检查必填项是否填写
40002	数值超出允许范围	验证输入值是否在上下限之间
50001	检测任务已关闭	刷新页面获取最新状态
50002	无操作权限	联系管理员调整权限

5.2 异常处理示例

submit() {
  this.$http.post(API, params)
    .catch(error => {
      if(error.code === 40001) {
        this.$toast("请完成所有必填检测项");
      } else {
        this.$toast("提交失败，请稍后重试");
      }
    })
}

---

6. 最佳实践

6.1 性能优化建议

1. 虚拟滚动：对超过50项的检测列表启用虚拟滚动
2. 数据缓存：本地缓存已保存的检测结果
3. 请求合并：对快速操作进行防抖处理

6.2 可维护性建议

1. 组件拆分：将检测项表格拆分为独立组件
2. 状态管理：使用Vuex管理检测数据状态
3. 配置化：将检测项类型转为配置数据

---

附录：依赖说明

依赖项	版本	用途
Vant Weapp	1.10.2	提供基础UI组件
UniApp	3.0+	跨端开发框架
Axios	0.21.1	HTTP请求库
Dayjs	1.10.7	日期处理库

---