UniApp 生产批次管理模块技术文档

1. 运行卡入站页面 (RunCardIn)

1.1 页面结构

vue 复制代码

<template>
  <!-- 页面容器 -->
  <view class="runCardIn" :style="{ paddingTop: padding }">
    <!-- 页头组件 -->
    <pageHeader :title="$t('MENU:MES:WAP:TRACKIN')"></pageHeader>
    
    <!-- 搜索输入框 -->
    <view class="search">
      <input 
        v-model="runCardId" 
        type="search" 
        :placeholder="$t('PMSG012005')"
        @confirm="getLotDataByLotId"/>
    </view>

    <!-- 主体内容 -->
    <view class="main" v-if="isShowItem">
      <!-- 信息展示区 -->
      <van-cell 
        class='jc_between' 
        :title="$t('PLBL003REPAIRORDER')" 
        :value="lotDataInfo.woId" 
      />
      
      <!-- 动态操作区 -->
      <van-cell 
        v-if="lotDataInfo.stepName == 'R'"
        :title="$t('维修工序')" 
        :value="serviceProcName"
      />
      
      <!-- 条件显示区块 -->
      <view class="hide-box" v-if="selectedOpCat === 'D'">
        <van-cell 
          title="去投电极" 
          is-link 
          @click="toFeedingElePage"
        />
      </view>
    </view>
  </view>
</template>

1.2 核心功能实现

1.2.1 页面初始化

javascript 复制代码

onLoad(option) {
  // 获取状态栏高度
  const statusBarHeight = uni.getStorageSync("statusBarHeight");
  this.padding = `${statusBarHeight + 28}px`;
  
  // 接收参数初始化
  this.operatorEmpNo = option.operatorEmpNo
  this.runCardId = option.lotId
  
  // 自动查询数据
  if(this.runCardId) {
    this.getLotDataByLotId()
  }
}

1.2.2 数据获取方法

javascript 复制代码

// 根据批次ID获取数据
getLotDataByLotId() {
  uni.showLoading({ title: "loading..." });
  
  this.$http.get(`${API}/query?lotId=${this.runCardId}`)
    .then((res) => {
      this.lotDataInfo = res.data
      this.handleProcessData(res.data)
    })
    .catch(err => this.handleError(err))
}

// 处理工艺数据
handleProcessData(data) {
  if (data.stepName === 'R') {
    this.getRepairProcedure("R")
  } else {
    this.getstation(data.processName)
  }
}

1.3 关键技术点

1.3.1 多语言实现

vue 复制代码

<!-- 使用$t方法进行国际化 -->
<van-cell :title="$t('LBL101BATCHNO')" />

1.3.2 条件渲染

vue 复制代码

<!-- 根据工序类型显示不同内容 -->
<view v-if="selectedIsEqp==='Y'">
  <van-cell :title="$t('设备编号')" :value="deviceCode" required />
</view>

1.3.3 表单验证

javascript 复制代码

beforeRunCardOutSubmitCheck() {
  // 设备校验
  if(this.selectedIsEqp==='Y' && !this.deviceCode) {
    this.$toast("设备编码不能为空")
    return
  }
  
  // 工序校验
  if (!this.selectedOpId) {
    this.$toast("请先选择工序")
    return
  }
  
  // 提交前确认
  this.$refs.removeDialog.open()
}

2. 投料界面 (MaterialFeeding)

2.1 页面结构

vue 复制代码

<template>
  <view class="receMaterial">
    <!-- 弹窗组件 -->
    <van-dialog 
      :show="showGetMateDialog"
      @close="showGetMateDialog = false"
    >
      <view class="content">
        <van-cell :title="$t('料号')" :label="mateInfo.mtrlPartNo" />
        <van-cell :title="$t('数量:')">
          <input 
            v-model="qty" 
            type="digit" 
            placeholder="请输入投料数量"
          />
        </van-cell>
      </view>
    </van-dialog>
  </view>
</template>

2.2 核心功能实现

2.2.1 条码扫描处理

javascript 复制代码

checkBarcode() {
  if (!this.mateBarcode) return
  
  this.$http.get(`${API}/scan?barcode=${this.mateBarcode}`)
    .then(res => {
      this.mateInfo = res.data
      this.showDialog()
    })
}

2.2.2 数据提交

javascript 复制代码

post() {
  // 数量验证
  if (this.qty <= 0 || this.qty > this.mateInfo.mtrlQty) {
    this.$toast("数量无效")
    return
  }

  // 构造请求参数
  const params = {
    woId: this.woId,
    qty: this.qty,
    mtrlBarcode: this.mateInfo.mtrlBarcode
  }

  this.$http.post(`${API}/post`, params)
    .then(() => this.handleSuccess())
}

2.3 关键技术点

2.3.1 折叠面板

vue 复制代码

<u-collapse @change="handleCollapseChange">
  <u-collapse-item 
    v-for="item in lotMaterial" 
    :title="item.materialNo"
  >
    <text>{{ `(${item.scanNum}/${item.totalNum})` }}</text>
  </u-collapse-item>
</u-collapse>

2.3.2 状态管理

javascript 复制代码

// 更新物料状态
updateMaterialStatus() {
  this.lotMaterial.forEach(item => {
    item.status = item.scanNum >= item.totalNum ? '完成' : '进行中'
  })
}

3. 通用技术方案

3.1 样式穿透方案

css 复制代码

/* Less语法 */
/deep/ .custom-dialog {
  width: 800px !important;
}

/* CSS原生语法 */
::v-deep .van-cell__title {
  font-weight: bold;
}

3.2 页面适配方案

javascript 复制代码

// 获取状态栏高度
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
this.padding = `${statusBarHeight + 28}px`

// 响应式布局
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

3.3 数据缓存策略

javascript 复制代码

// 缓存工艺数据
cacheProcessData(data) {
  uni.setStorageSync('processData', JSON.stringify(data))
}

// 读取缓存
getCachedData() {
  return JSON.parse(uni.getStorageSync('processData') || '{}')
}

4. 组件库使用规范

4.1 Vant组件使用

组件	用途	关键属性
`<van-cell>`	信息展示单元	title, value, is-link
`<van-dialog>`	模态弹窗	:show, @confirm, @cancel
`<van-collapse>`	可折叠内容区	v-model, accordion
`<van-button>`	按钮组件	type, size, @click

4.2 UniApp API使用

javascript 复制代码

// 页面跳转
uni.navigateTo({
  url: `/pages/detail?id=${id}`
})

// 显示加载状态
uni.showLoading({
  title: '加载中...',
  mask: true
})

// 获取系统信息
const systemInfo = uni.getSystemInfoSync()

5. 最佳实践建议

5.1 性能优化

数据分页加载：对长列表实现滚动加载
图片懒加载 ：使用<image>的lazy-load属性
组件按需加载：配置Vant的按需引入

5.2 安全规范

对用户输入进行XSS过滤
敏感数据加密存储
接口请求添加权限验证

5.3 异常处理

javascript 复制代码

// 统一错误处理
this.$http.post(url, data)
  .catch(error => {
    console.error('[API Error]', error)
    this.$toast(error.message || '请求失败')
  })

附录：技术栈说明

技术项	版本	用途
UniApp	3.0+	跨端开发框架
Vant Weapp	1.10+	移动端组件库
Vue.js	2.6+	前端框架
Axios	0.21+	HTTP客户端
Less	3.12+	CSS预处理器
ESLint	7.32+	代码质量检查