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

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

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

1.1 页面结构

<template>
  <view class="trackOut" :style="{paddingTop:padding}">
    <!-- 页头组件 -->
    <pageHeader :title="$t('首件检作业')"></pageHeader>

    <!-- 基本信息展示区 -->
    <view class="middle">
      <div class="flex-container">
        <van-cell class="jc_between" :title="$t('产线')">
          <input type="text" disabled v-model="lineId" />
        </van-cell>
        <van-cell class="jc_between" :title="$t('工号')">
          <input type="text" disabled v-model="user" />
        </van-cell>
      </div>
    </view>

    <!-- 动态检测项表格 -->
    <div v-for="(item, index) in chkWorkOperationVO" :key="index">
      <div class="process-row" @click="toggleTable(index)">
        <span class="process-text">
          {{ getOperationName(item.opId) }}/{{ item.opId }}
        </span>
        <div class="expand-icon1">
          <span class="info-text">{{ getRatio(item.chkInspectionRecordVOS) }}</span>
          <span :class="statusCircleClass(item)"></span>
          <span class="expand-icon">{{ expandedIndex === index ? '▼' : '►' }}</span>
        </div>
      </div>

      <!-- 检测项明细表格 -->
      <table v-show="expandedIndex === index" class="data-table">
        <thead>
          <tr>
            <th v-for="col in columns" :key="col" class="table-header-green">{{ col }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(record, idx) in item.chkInspectionRecordVOS" :key="idx">
            <td>{{ record.inspectionItemName }}</td>
            <td>{{ record.unit }}</td>
            <td>{{ record.standardValue }}</td>
            <td>{{ record.maxValue }}</td>
            <td>{{ record.minValue }}</td>
            <td>
              <template v-if="record.type === 'JUDGE'">
                <picker mode="selector" :range="options" @change="onPickerChange($event, record)">
                  {{ record.checkValue || '请选择' }}
                </picker>
              </template>
              <input v-else v-model="record.checkValue" />
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 操作按钮 -->
    <view class="footer">
      <button @click="saveDetail">保存</button>
      <button @click="submit">提交</button>
    </view>
  </view>
</template>

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 选择器组件

<picker 
  mode="selector" 
  :range="options" 
  @change="onPickerChange($event, record)"
>
  {{ record.checkValue || '请选择' }}
</picker>

<script>
onPickerChange(event, record) {
  const value = this.options[event.detail.value];
  this.$set(record, 'checkValue', value);
}
</script>

2. 核心功能说明

2.1 功能特性

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 接口列表

4.2 请求示例

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

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

5. 异常处理机制

5.1 异常代码表

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. 配置化：将检测项类型转为配置数据

附录：依赖说明