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

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

1.1 页面结构

<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 页面初始化

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

1.2.2 数据获取方法

// 根据批次ID获取数据
getLotDataByLotId() {uni.showLoading({ title: "loading..." });this.$http.get(`${API}/query?lotId=${this.runCardId}`).then((res) => {this.lotDataInfo = res.datathis.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 多语言实现

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

1.3.2 条件渲染

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

1.3.3 表单验证

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

2. 投料界面 (MaterialFeeding)

2.1 页面结构

<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 条码扫描处理

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

2.2.2 数据提交

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 折叠面板

<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 状态管理

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

3. 通用技术方案

3.1 样式穿透方案

/* Less语法 */
/deep/ .custom-dialog {width: 800px !important;
}/* CSS原生语法 */
::v-deep .van-cell__title {font-weight: bold;
}

3.2 页面适配方案

// 获取状态栏高度
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
this.padding = `${statusBarHeight + 28}px`// 响应式布局
@media (max-width: 768px) {.container {flex-direction: column;}
}

3.3 数据缓存策略

// 缓存工艺数据
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使用

// 页面跳转
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 异常处理

// 统一错误处理
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+	代码质量检查