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.lotIdif(this.runCardId) {this.getLotDataByLotId()}
}
1.2.2 數據獲取方法
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 樣式穿透方案
/deep/ .custom-dialog {width: 800px !important;
}
::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+ | 代碼質量檢查 |