<template>
|
<view class="content">
|
<!-- 头部标题 -->
|
|
|
<!-- 表单区域 -->
|
<view class="form-container">
|
<!-- 查询工单 -->
|
<view class="form-item">
|
<text class="label">查询工单</text>
|
<input class="input" type="text" v-model="formData.queryWorkOrder" placeholder="请输入查询工单" @input="onQueryWorkOrderChange" />
|
</view>
|
|
<!-- 生产工单 -->
|
<view class="form-item">
|
<text class="label">生产工单</text>
|
<picker class="picker" :range="productionWorkOrderOptions" range-key="text" :value="productionWorkOrderIndex" @change="onProductionWorkOrderChange">
|
<view class="picker-content">
|
{{ productionWorkOrderOptions[productionWorkOrderIndex] ? productionWorkOrderOptions[productionWorkOrderIndex].text : '请选择/扫描生产工单' }}
|
</view>
|
</picker>
|
<view class="scan-icon" @click="scanProductionWorkOrder">
|
<uni-icons type="scan" size="24" color="#28a745"></uni-icons>
|
</view>
|
</view>
|
|
<!-- 产品编码 -->
|
<view class="form-item">
|
<text class="label">产品编码</text>
|
<view class="value">{{ formData.productCode }}</view>
|
</view>
|
|
<!-- 产品名称 -->
|
<view class="form-item">
|
<text class="label">产品名称</text>
|
<view class="value">{{ formData.productName }}</view>
|
</view>
|
|
<!-- 工序 -->
|
<view class="form-item">
|
<text class="label">工序</text>
|
<picker class="picker" :range="processOptions" range-key="text" :value="processIndex" @change="onProcessChange">
|
<view class="picker-content">
|
{{ processOptions[processIndex] ? processOptions[processIndex].text : '请选择/扫描工序' }}
|
</view>
|
</picker>
|
<view class="scan-icon" @click="scanProcess">
|
<uni-icons type="scan" size="24" color="#28a745"></uni-icons>
|
</view>
|
</view>
|
|
<!-- 不良类型 -->
|
<view class="form-item">
|
<text class="label">不良类型</text>
|
<picker class="picker" :range="defectTypeOptions" range-key="text" :value="defectTypeIndex" @change="onDefectTypeChange">
|
<view class="picker-content">
|
{{ defectTypeOptions[defectTypeIndex] ? defectTypeOptions[defectTypeIndex].text : '请选择/扫描不良类型' }}
|
</view>
|
</picker>
|
<view class="scan-icon" @click="scanDefectType">
|
<uni-icons type="scan" size="24" color="#28a745"></uni-icons>
|
</view>
|
</view>
|
|
<!-- 不良项目 -->
|
<view class="form-item">
|
<text class="label">不良项目</text>
|
<picker class="picker" :range="defectItemOptions" range-key="text" :value="defectItemIndex" @change="onDefectItemChange">
|
<view class="picker-content">
|
{{ defectItemOptions[defectItemIndex] ? defectItemOptions[defectItemIndex].text : '请选择/扫描不良项目' }}
|
</view>
|
</picker>
|
<view class="scan-icon" @click="scanDefectItem">
|
<uni-icons type="scan" size="24" color="#28a745"></uni-icons>
|
</view>
|
</view>
|
|
<!-- 不良条码 -->
|
<view class="form-item">
|
<text class="label">不良条码</text>
|
<input class="input" type="text" v-model="formData.defectBarcode" placeholder="请输入不良条码" />
|
</view>
|
|
<!-- 条码数量 -->
|
<view class="form-item">
|
<text class="label">条码数量</text>
|
<input class="input" type="number" v-model="formData.barcodeQuantity" placeholder="请输入条码数量" />
|
</view>
|
|
<!-- 提示信息 -->
|
<view class="form-item">
|
<text class="label">提示信息</text>
|
<view class="value hint">{{ formData.hintInfo }}</view>
|
</view>
|
</view>
|
|
<!-- 提交按钮 -->
|
<view class="footer">
|
<button class="submit-btn" @click="submitForm">登记提交</button>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import uniIcons from "@/components/uni-icons/uni-icons.vue"
|
|
export default {
|
components: {uniIcons},
|
data() {
|
return {
|
formData: {
|
queryWorkOrder: '',
|
productionWorkOrder: '',
|
productCode: '',
|
productName: '',
|
process: '',
|
defectType: '',
|
defectItem: '',
|
defectBarcode: '',
|
barcodeQuantity: '',
|
hintInfo: ''
|
},
|
productionWorkOrderOptions: [],
|
productionWorkOrderIndex: -1,
|
processOptions: [],
|
processIndex: -1,
|
defectTypeOptions: [],
|
defectTypeIndex: -1,
|
defectItemOptions: [],
|
defectItemIndex: -1
|
};
|
},
|
onLoad() {
|
this.initData();
|
},
|
methods: {
|
goBack() {
|
uni.navigateBack();
|
},
|
initData() {
|
// 预留API调用位置
|
this.loadProductionWorkOrders();
|
this.loadProcesses();
|
this.loadDefectTypes();
|
this.loadDefectItems();
|
},
|
loadProductionWorkOrders() {
|
// 模拟API获取生产工单列表
|
// this.$post({url: '/api/getWorkOrders'}).then(...)
|
this.productionWorkOrderOptions = [
|
{text: 'MO-20231201001', value: 'WO001'},
|
{text: 'MO-20231201002', value: 'WO002'}
|
];
|
},
|
loadProcesses() {
|
// 模拟API获取工序列表
|
this.processOptions = [
|
{text: 'SMT贴片', value: 'P001'},
|
{text: 'DIP插件', value: 'P002'},
|
{text: '组装', value: 'P003'}
|
];
|
},
|
loadDefectTypes() {
|
// 模拟API获取不良类型列表
|
this.defectTypeOptions = [
|
{text: '物料不良', value: 'DT001'},
|
{text: '制程不良', value: 'DT002'}
|
];
|
},
|
loadDefectItems() {
|
// 模拟API获取不良项目列表
|
this.defectItemOptions = [
|
{text: '虚焊', value: 'DI001'},
|
{text: '短路', value: 'DI002'},
|
{text: '缺件', value: 'DI003'}
|
];
|
},
|
onQueryWorkOrderChange(e) {
|
// 实时查询工单对应下拉框发生变化
|
const query = this.formData.queryWorkOrder;
|
console.log('Querying work orders with:', query);
|
|
// 这里应该调用接口根据输入内容筛选生产工单
|
// this.$post({url: '/api/searchWorkOrders', data: {keyword: query}}).then(...)
|
|
// 模拟筛选
|
if(query) {
|
this.productionWorkOrderOptions = this.productionWorkOrderOptions.filter(item => item.text.includes(query));
|
} else {
|
this.loadProductionWorkOrders(); // 恢复默认列表
|
}
|
},
|
onProductionWorkOrderChange(e) {
|
this.productionWorkOrderIndex = e.target.value;
|
const selected = this.productionWorkOrderOptions[this.productionWorkOrderIndex];
|
if (selected) {
|
this.formData.productionWorkOrder = selected.value;
|
// 模拟根据工单带出产品信息
|
this.formData.productCode = 'PROD-' + selected.value;
|
this.formData.productName = '产品 ' + selected.text;
|
}
|
},
|
onProcessChange(e) {
|
this.processIndex = e.target.value;
|
if (this.processOptions[this.processIndex]) {
|
this.formData.process = this.processOptions[this.processIndex].value;
|
}
|
},
|
onDefectTypeChange(e) {
|
this.defectTypeIndex = e.target.value;
|
if (this.defectTypeOptions[this.defectTypeIndex]) {
|
this.formData.defectType = this.defectTypeOptions[this.defectTypeIndex].value;
|
}
|
},
|
onDefectItemChange(e) {
|
this.defectItemIndex = e.target.value;
|
if (this.defectItemOptions[this.defectItemIndex]) {
|
this.formData.defectItem = this.defectItemOptions[this.defectItemIndex].value;
|
}
|
},
|
scanProductionWorkOrder() {
|
uni.scanCode({
|
success: (res) => {
|
console.log('Scanned:', res.result);
|
// 处理扫描结果，自动选中对应工单
|
uni.showToast({title: '扫描成功: ' + res.result, icon: 'none'});
|
}
|
});
|
},
|
scanProcess() {
|
uni.scanCode({
|
success: (res) => {
|
console.log('Scanned Process:', res.result);
|
uni.showToast({title: '扫描成功: ' + res.result, icon: 'none'});
|
}
|
});
|
},
|
scanDefectType() {
|
uni.scanCode({
|
success: (res) => {
|
console.log('Scanned DefectType:', res.result);
|
uni.showToast({title: '扫描成功: ' + res.result, icon: 'none'});
|
}
|
});
|
},
|
scanDefectItem() {
|
uni.scanCode({
|
success: (res) => {
|
console.log('Scanned DefectItem:', res.result);
|
uni.showToast({title: '扫描成功: ' + res.result, icon: 'none'});
|
}
|
});
|
},
|
submitForm() {
|
console.log('Submitting:', this.formData);
|
if (!this.formData.productionWorkOrder) {
|
uni.showToast({title: '请选择生产工单', icon: 'none'});
|
return;
|
}
|
// 提交逻辑
|
// this.$post({url: '/api/submitDefect', data: this.formData}).then(...)
|
|
uni.showToast({
|
title: '登记提交成功',
|
icon: 'success'
|
});
|
}
|
}
|
};
|
</script>
|
|
<style>
|
.content {
|
background-color: #f5f5f5;
|
min-height: 100vh;
|
display: flex;
|
flex-direction: column;
|
}
|
.page-header {
|
background-color: #90CAF9; /* Light Blue */
|
padding: 44px 15px 10px 15px; /* Status bar padding */
|
}
|
.header-content {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.page-title {
|
font-size: 18px;
|
font-weight: bold;
|
color: #333;
|
}
|
.header-right {
|
color: #fff;
|
font-size: 14px;
|
}
|
.form-container {
|
background-color: #fff;
|
margin-top: 0;
|
flex: 1;
|
}
|
.form-item {
|
display: flex;
|
align-items: center;
|
padding: 12px 15px;
|
border-bottom: 1px solid #eee;
|
}
|
.label {
|
width: 90px;
|
font-size: 15px;
|
color: #333;
|
}
|
.input {
|
flex: 1;
|
font-size: 15px;
|
}
|
.value {
|
flex: 1;
|
font-size: 15px;
|
color: #666;
|
}
|
.picker {
|
flex: 1;
|
}
|
.picker-content {
|
font-size: 15px;
|
color: #333;
|
}
|
.scan-icon {
|
width: 30px;
|
height: 30px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin-left: 10px;
|
background-color: #4CD964; /* Green background for icon */
|
border-radius: 4px;
|
}
|
.scan-icon uni-icons {
|
/* Make icon white if background is green, but uni-icons color prop handles it */
|
}
|
/* Override uni-icons color to white since background is green */
|
.scan-icon ::v-deep span {
|
color: #fff !important;
|
}
|
|
.footer {
|
padding: 20px;
|
}
|
.submit-btn {
|
background-color: #7B68EE; /* Purple */
|
color: #fff;
|
border-radius: 5px;
|
font-size: 16px;
|
height: 44px;
|
line-height: 44px;
|
}
|
.hint {
|
color: #999;
|
}
|
</style>
|
