UniApp 生產批次管理模塊技術文檔

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 性能優化

  1. 數據分頁加載:對長列表實現滾動加載
  2. 圖片懶加載:使用<image>的lazy-load屬性
  3. 組件按需加載:配置Vant的按需引入

5.2 安全規范

  1. 對用戶輸入進行XSS過濾
  2. 敏感數據加密存儲
  3. 接口請求添加權限驗證

5.3 異常處理

// 統一錯誤處理
this.$http.post(url, data).catch(error => {console.error('[API Error]', error)this.$toast(error.message || '請求失敗')})

附錄:技術棧說明

技術項版本用途
UniApp3.0+跨端開發框架
Vant Weapp1.10+移動端組件庫
Vue.js2.6+前端框架
Axios0.21+HTTP客戶端
Less3.12+CSS預處理器
ESLint7.32+代碼質量檢查

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/pingmian/82902.shtml
繁體地址,請注明出處:http://hk.pswp.cn/pingmian/82902.shtml
英文地址,請注明出處:http://en.pswp.cn/pingmian/82902.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

針對Helsinki-NLP/opus-mt-zh-en模型進行雙向互翻的微調

引言 ?題目聽起來有點怪怪的&#xff0c;但是實際上就是對Helsinki-NLP/opus-mt-en-es模型進行微調。但是這個模型是單向的&#xff0c;只支持中到英的翻譯&#xff0c;反之則不行。這樣的話&#xff0c;如果要做中英雙向互翻就需要兩個模型&#xff0c;那模型體積直接大了兩倍…

Object轉Map集合

對象與 Map 轉換詳解&#xff1a; Object.entries() 和 Object.fromEntries() 1&#xff0c;Object.fromEntries() 的主要用途就是將鍵值對集合&#xff08;如 Map&#xff09;轉換為普通對象。 2&#xff0c;Object.entries() 返回一個二維數組&#xff0c;其中每個子數組包…

優先隊列用法

第 5 行定義了一個隊首是最大值的優先隊列,第 10 行的輸出如下: 27 - wuhan 21 - shanghai 11 - beijing 第 13 行定義了一個隊首是最小值的優先隊列,第 19 行的輸出如下: 11 - beijing 21 - shanghai 27 - wuhan #include <bits/stdc.h> using namespace std; int…

Spring Boot3.4.1 集成redis

Spring Boot3.4.1 集成redis 第一步 引入依賴 <!-- redis 緩存操作 --> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId> </dependency> <!-- pool 對象池 …

Replacing iptables with eBPF in Kubernetes with Cilium

source: https://archive.fosdem.org/2020/schedule/event/replacing_iptables_with_ebpf/attachments/slides/3622/export/events/attachments/replacing_iptables_with_ebpf/slides/3622/Cilium_FOSDEM_2020.pdf 使用Cilium&#xff0c;結合eBPF、Envoy、Istio和Hubble等技術…

英一真題閱讀單詞筆記 05年

2005 年 Text 1 第一段 序號 單詞 音標 詞義 1 fat [ft] a. 豐厚的&#xff0c;巨額的&#xff1b;肥胖的 2 pay [pe?] n. 薪水 3 rise [ra?z] n. 上漲&#xff0c;增加&#xff1b;斜坡 4 pleasure [ple??(r)] n. 快樂&#xff1b;樂事 5 pleasure a…

FastAPI集成APsecheduler的BackgroundScheduler+mongodb(精簡)

項目架構&#xff1a; FastAPI(folder) >app(folder) >core(folder) >models(folder) >routers(folder) >utils(folder) main.py(file) 1 utils文件夾下新建schedulers.py from apscheduler.schedulers.background import BackgroundScheduler from apschedu…

聊一聊接口測試中耗時請求如何合理安排?

目錄 一、異步處理與輪詢機制 輪詢檢查機制 二、 并行化測試執行 三、模擬與樁技術&#xff08;Mock/Stub&#xff09; 四、動態超時與重試策略 五、測試架構設計優化 分層測試策略 并行化執行 網絡優化 六、測試用例分層管理 金字塔策略 七、 緩存與數據復用 響應…

深入詳解DICOMweb:WADO與STOW-RS的技術解析與實現

&#x1f9d1; 博主簡介&#xff1a;CSDN博客專家、CSDN平臺優質創作者&#xff0c;高級開發工程師&#xff0c;數學專業&#xff0c;10年以上C/C, C#, Java等多種編程語言開發經驗&#xff0c;擁有高級工程師證書&#xff1b;擅長C/C、C#等開發語言&#xff0c;熟悉Java常用開…

Splunk Validated Architecture (SVA):構建企業級可觀測性與安全的基石

Splunk Validated Architecture (SVA) 是 Splunk 官方提供的一套經過嚴格測試、性能驗證和最佳實踐指導的參考架構藍圖。它并非單一固定方案&#xff0c;而是根據企業數據規模、性能需求、高可用性目標和合規要求&#xff0c;提供一系列可落地的部署模型。SVA 的核心價值在于為…

Armv7l或樹莓派32位RPI 4B編譯faiss

pip3 install faiss-cpu當然找不到預編譯的包 手動下載 git clone https://github.com/facebookresearch/faiss.git cd faiss #能需要切換到特定版本標簽&#xff0c;例如 v1.7.1&#xff0c;這個版本Cmake 3.18可以過&#xff0c;因為apt install安裝的cmake只更新到這里&am…

C++之string的模擬實現

string 手寫C字符串類類的基本結構與成員變量一、構造函數與析構函數二、賦值運算符重載三、迭代器支持四、內存管理與擴容機制五、字符串操作函數六、運算符重載總結 手寫C字符串類 從零實現一個簡易版std::string 類的基本結構與成員變量 namespace zzh { class string { …

修改Docker鏡像源

配置文件位置&#xff1a; sudo vim /etc/docker/daemon.json Docker 或 containerd 的鏡像加速器配置&#xff0c;旨在提高從 Docker Hub 拉取鏡像的速度。 { "features": { "buildkit": true, "containerd-snapshotter": true }, …

服務器帶寬線路的區別(GIA、CN2、BGP、CMI等)

服務器帶寬線路的區別&#xff08;GIA、CN2、BGP、CMI等&#xff09; 一、BGP線路 1. 定義與技術特點 BGP&#xff08;Border Gateway Protocol&#xff0c;邊界網關協議&#xff09;是一種用于不同自治系統&#xff08;AS&#xff09;之間交換路由信息的協議&#xff0c;屬…

從0到1搭建AI繪畫模型:Stable Diffusion微調全流程避坑指南

從0到1搭建AI繪畫模型&#xff1a;Stable Diffusion微調全流程避坑指南 系統化學習人工智能網站&#xff08;收藏&#xff09;&#xff1a;https://www.captainbed.cn/flu 文章目錄 從0到1搭建AI繪畫模型&#xff1a;Stable Diffusion微調全流程避坑指南摘要引言一、數據集構…

VSCode + GD32F407 構建燒錄

前言 最近調試一塊 GD32F407VET6&#xff08;168Mhz&#xff0c;8Mhz晶振&#xff09; 板子時&#xff0c;踩了一些“啟動失敗”的坑。本以為是時鐘配置有誤&#xff0c;最后發現是鏈接腳本&#xff08;.ld 文件&#xff09;沒有配置好&#xff0c;導致程序根本沒能正常執行 ma…

AI繪畫提示詞:從零開始掌握Prompt Engineering的藝術

文章目錄 什么是AI繪畫提示詞&#xff1f;提示詞的基本結構主體描述場景/背景風格指定技術參數負面提示人物肖像模板風景模板 高級技巧權重調整混合風格顏色控制情緒氛圍 常見問題與解決方法手部變形問題構圖不理想風格不夠突出 提示詞示例庫科幻場景奇幻人物靜物畫 結語 在當今…

在 Linux 上安裝 Minikube:輕松搭建本地 Kubernetes 單節點集群

&#x1f525;「炎碼工坊」技術彈藥已裝填&#xff01; 點擊關注 → 解鎖工業級干貨【工具實測|項目避坑|源碼燃燒指南】 一、Minikube 是什么&#xff1f; Minikube 是 Kubernetes 官方推出的輕量級工具&#xff0c;專為開發者設計&#xff0c;用于在本地快速搭建單節點 Kube…

day41 python圖像識別任務

目錄 一、數據預處理&#xff1a;為模型打下堅實基礎 二、模型構建&#xff1a;多層感知機的實現 三、訓練過程&#xff1a;迭代優化與性能評估 四、測試結果&#xff1a;模型性能的最終檢驗 五、總結與展望 在深度學習的旅程中&#xff0c;多層感知機&#xff08;MLP&…

JS數組 concat() 與擴展運算符的深度解析與最佳實踐

文章目錄 前言一、語法對比1. Array.prototype.concat()2. 擴展運算符&#xff08;解構賦值&#xff09; 二、性能差異&#xff08;大規模數組&#xff09;關鍵差異原因 三、適用場景建議總結 前言 最近工作中遇到了一個大規模數組合并相關的問題&#xff0c;在數據合并時有些…