<template>
|
<view class="sn-scan-page">
|
<view class="title">SN确认</view>
|
|
<view v-if="current === 'true'" class="remark">
|
备注：点击"扫码"按钮扫描SN码，再次点击可覆盖上次记录
|
</view>
|
|
<view class="scan-table">
|
<view class="table-header">
|
<text class="col name">项目名称</text>
|
<text class="col sn">SN码</text>
|
<text v-if="current === 'true'" class="col action">操作</text>
|
</view>
|
|
<view class="table-row" v-for="(item, index) in scanItems" :key="item.id">
|
<text class="col name">{{ item.scanItem }}</text>
|
|
<!-- 可编辑状态：显示输入框 -->
|
<input
|
v-if="current === 'true'"
|
class="col sn-input"
|
type="text"
|
v-model="item.snNo"
|
placeholder="请输入或扫码"
|
/>
|
|
<!-- 只读状态：显示文本 -->
|
<text v-if="current !== 'true'" class="col sn-text">{{ item.snNo }}</text>
|
|
<button
|
v-if="current === 'true'"
|
class="col scan-btn"
|
type="primary"
|
@click="onScan(index)"
|
>扫码</button>
|
</view>
|
</view>
|
|
<view class="action-bar">
|
<button v-if="current === 'true'" type="success" @click="submit">保存</button>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
mid: null, // MES主表ID
|
scanItems: [], // 从 MES_SJ_SCAN_ITEM_CK 获取
|
current: 'true', // 控制是否可编辑
|
};
|
},
|
|
onLoad(options) {
|
// 假设从上一页传入 mid
|
this.mid = options.id || null;
|
this.current = options.current || 'true'; // 默认为可编辑状态
|
this.getScanItems();
|
},
|
|
methods: {
|
// 从 MES_SJ_SCAN_ITEM_CK 获取数据
|
getScanItems() {
|
if (!this.mid) return;
|
|
uni.showLoading({ title: "加载中..." });
|
|
this.$post({
|
url: "/SJ/GetList",
|
data: { mid: this.mid }
|
}).then(res => {
|
if (res.status === 0) {
|
this.scanItems = res.data.map(x => ({
|
id: x.id,
|
scanItem: x.scanItem,
|
snNo: x.snNo || "",
|
}));
|
} else {
|
uni.showToast({
|
title: res.message || "加载失败",
|
icon: "none"
|
});
|
}
|
}).catch(err => {
|
console.error("加载扫码项目出错：", err);
|
uni.showToast({
|
title: "加载异常",
|
icon: "none"
|
});
|
}).finally(() => {
|
uni.hideLoading();
|
});
|
},
|
|
// 扫码功能
|
onScan(index) {
|
const self = this;
|
|
// #ifdef MP-WEIXIN
|
uni.scanCode({
|
success(res) {
|
self.scanItems[index].snNo = res.result;
|
},
|
fail(err) {
|
console.log("扫码失败", err);
|
},
|
});
|
// #endif
|
|
// #ifdef H5
|
uni.showToast({
|
title: "请使用扫码枪输入到SN输入框",
|
icon: "none",
|
});
|
// #endif
|
|
// #ifdef APP-PLUS
|
uni.scanCode({
|
success(res) {
|
self.scanItems[index].snNo = res.result;
|
},
|
});
|
// #endif
|
},
|
|
// 保存 SN 数据到 MES_SJ_SCAN_ITEM_CK
|
submit() {
|
this.$post({
|
url: "/SJ/SaveSn",
|
data: {
|
mid: this.mid,
|
items: this.scanItems.map(x => ({
|
id: x.id,
|
snNo: x.snNo,
|
})),
|
}
|
}).then(res => {
|
if (res.status === 0) {
|
uni.showToast({
|
title: "保存成功",
|
icon: "success"
|
});
|
} else {
|
uni.showToast({
|
title: res.message || "保存失败",
|
icon: "none"
|
});
|
}
|
}).catch(err => {
|
console.error("保存出错：", err);
|
uni.showToast({
|
title: "保存异常",
|
icon: "none"
|
});
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.sn-scan-page {
|
padding: 20rpx;
|
font-size: 28rpx;
|
font-family: "Microsoft YaHei";
|
}
|
|
.title {
|
font-size: 36rpx;
|
font-weight: bold;
|
margin-bottom: 20rpx;
|
text-align: center;
|
}
|
|
.remark {
|
color: #666;
|
font-size: 22rpx;
|
margin-bottom: 30rpx;
|
background-color: #f9f9f9;
|
border-left: 6rpx solid #007aff;
|
padding: 16rpx 20rpx;
|
border-radius: 8rpx;
|
line-height: 1.6;
|
}
|
|
.scan-table {
|
border: 1rpx solid #ccc;
|
border-radius: 10rpx;
|
overflow: hidden;
|
}
|
|
.table-header {
|
display: flex;
|
background-color: #f5f5f5;
|
font-weight: bold;
|
padding: 20rpx 10rpx;
|
}
|
|
.table-row {
|
display: flex;
|
align-items: center;
|
border-top: 1rpx solid #eee;
|
padding: 20rpx 10rpx;
|
}
|
|
.col {
|
flex: 1;
|
text-align: center;
|
}
|
|
.name {
|
flex: 1;
|
}
|
|
.sn {
|
flex: 2;
|
}
|
|
.action {
|
flex: 1;
|
}
|
|
.sn-input {
|
flex: 2;
|
border: 1rpx solid #ccc;
|
border-radius: 6rpx;
|
padding: 10rpx;
|
}
|
|
.scan-btn {
|
flex: 1;
|
font-size: 26rpx;
|
background-color: #007aff;
|
color: #fff;
|
border-radius: 6rpx;
|
line-height: 60rpx;
|
height: 60rpx;
|
}
|
|
.scan-btn:active {
|
background-color: #005bb5;
|
}
|
|
.action-bar {
|
margin-top: 40rpx;
|
text-align: center;
|
}
|
</style>
|
