Skip to content

X
xiangyang-PDA
Commit d86cff24 authored by jwf's avatar jwf
Browse files
Options

接口对接

parent edf0c12b
Hide whitespace changes
Inline Side-by-side
Showing with 137 additions and 326 deletions
src/views/ManualOperation/ScanResults/index.vue
View file @ d86cff24
<template>
<div id="topDiv">
<van-nav-bar
title="件烟扫描结果"
left-text=""
left-arrow
@click-left="$router.go(-1)"
class="nav-bar"
title="件烟扫描结果"
left-text=""
left-arrow
@click-left="$router.go(-1)"
class="nav-bar"
>
<template #right> ？ </template>
</van-nav-bar>
......@@ -17,41 +17,41 @@
<div class="code-info-content">
<p class="info-item">
<span class="total-count">件码值：</span>
<span>{{ this.data.qrCode }}</span>
<span>{{ formatQrCode(data.qrCode) }}</span>
</p>
<p class="info-item">
<span class="total-count">生产时间：</span>
<span>{{ this.data.relationTime }}</span>
<span>{{ data.relationTime }}</span>
</p>
<p class="info-item">
<span class="total-count">机台号：</span>
<span>{{ this.data.barPieceProductLineDeviceCode }}</span>
<span>{{ data.barPieceProductLineDeviceCode }}</span>
</p>
<p class="info-item">
<span class="total-count">总条数：</span>
<span>{{ this.data.num }}</span>
<span>{{ data.num }}</span>
</p>
</div>
</div>
<div class="form-container from">
<van-field
v-model="fieldValue"
is-link
readonly
placeholder="选择机台号"
@click="showPicker = true"
v-model="fieldValue"
is-link
readonly
placeholder="选择机台号"
@click="showPicker = true"
/>
<van-popup
v-model:show="showPicker"
destroy-on-close
round
position="bottom"
v-model:show="showPicker"
destroy-on-close
round
position="bottom"
>
<van-picker
:columns="uniqueNumColumns"
:model-value="pickerValue"
@cancel="showPicker = false"
@confirm="textsch"
:columns="uniqueNumColumns"
:model-value="pickerValue"
@cancel="showPicker = false"
@confirm="textsch"
/>
</van-popup>
<van-button class="Resetbtn" @click="Reset()" type="default">重置</van-button>
......@@ -59,18 +59,18 @@
<div class="barcode-container">
<p class="barcode-title">
<span>条码分布（5×5）</span>
<span><van-icon name="passed" />{{ currentPage }}/2</span>
<span><van-icon name="passed" />{{ currentPage }}/{{ totalPages }}</span>
</p>
<div class="contbox">
<van-icon class="btnleft" name="arrow-left" @click="switchPage(1)" />
<van-icon class="btnright" name="arrow-left" @click="switchPage(2)" />
<div class="list-wrapper">
<div
class="contboxitem"
v-for="(item, index) in currentPageList"
:key="item.BrandId || index"
:class="{
'selected-item': fieldValue && item.num === fieldValue,
class="contboxitem"
v-for="(item, index) in currentPageList"
:key="item.BrandId || index"
:class="{
'selected-item': fieldValue && item.boxBarProductLineDeviceCode === fieldValue,
'scanned-item': isScannedItem(item, index)
}"
>
......@@ -81,8 +81,8 @@
</div>
</div>
<div class="btn-container">
<van-button plain @click="gousearch()" class="query-btn query-btns" type="success">
<van-icon name="scan" />
<van-button plain @click="gousearch()" class="query-btn query-btns" type="success">
<van-icon name="scan" />
扫码确认
</van-button>
<van-button plain class="query-btn" type="default">
......@@ -112,6 +112,9 @@ import {
Popup,
Field,
} from "vant";
import ScanOverlay from "@/components/overlay/scanOverlay/ScanOverlay";
import {getStringByTwo} from "@/utils/transition";
import {queryQrCode, queryQrCodeMap} from "@/api/qrcode/scanCode/scanCode";
export default {
name: "",
components: {
......@@ -133,9 +136,17 @@ export default {
[Field.name]: Field,
},
mounted() {
// this.$nativeQRCode.setStatusBarColor("#006953", "white");
// 实际使用时，打开下方注释，关闭硬编码的测试调用
// this.$nativeQRCode.setCallBackFun((res) => {
// let qrCode = getStringByTwo(res)
// this.queryQrCodeMap(qrCode);
// });
// ScanOverlay.show('请扫描二维码')
// 测试调用：传入固定二维码，实际使用时删除这行
this.queryQrCodeMap("HTTPS://Y2WM.CN/99.1000.1/AC30124061234010169010281240650202601230053300150B12402283981000ZBJBO6LESGRI2DQ");
},
data() {
return {
currentPage: 1,
......@@ -144,328 +155,124 @@ export default {
pickerValue: "",
showPicker: false,
scanned: false,
// 仅保留基础结构，无静态数据
data: {
qrCode: "xxxx",
relationTime: "2024-08-29",
barPieceProductLineDeviceCode: "BXBSB001",
barPieceProductLineName: "盒条产线",
num: "50条（2页）",
childList: [
{
qrCode: "xxxx1",
generateTime: "2024-08-29 15:00:00",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-5",
BrandId: 1
},
{
qrCode: "xxxx2",
generateTime: "2024-08-29 15:00:01",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-5",
BrandId: 2
},
{
qrCode: "xxxx3",
generateTime: "2024-08-29 15:00:02",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-5",
BrandId: 3
},
{
qrCode: "xxxx4",
generateTime: "2024-08-29 15:00:03",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-5",
BrandId: 4
},
{
qrCode: "xxxx5",
generateTime: "2024-08-29 15:00:04",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-5",
BrandId: 5
},
{
qrCode: "xxxx6",
generateTime: "2024-08-29 15:00:05",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-5",
BrandId: 6
},
{
qrCode: "xxxx7",
generateTime: "2024-08-29 15:00:06",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-5",
BrandId: 7
},
{
qrCode: "xxxx8",
generateTime: "2024-08-29 15:00:07",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-5",
BrandId: 8
},
{
qrCode: "xxxx9",
generateTime: "2024-08-29 15:00:08",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-5",
BrandId: 9
},
{
qrCode: "xxxx10",
generateTime: "2024-08-29 15:00:09",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-5",
BrandId: 10
},
{
qrCode: "xxxx11",
generateTime: "2024-08-29 15:00:10",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-5",
BrandId: 11
},
{
qrCode: "xxxx12",
generateTime: "2024-08-29 15:00:11",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-5",
BrandId: 12
},
{
qrCode: "xxxx13",
generateTime: "2024-08-29 15:00:12",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-5",
BrandId: 13
},
{
qrCode: "xxxx14",
generateTime: "2024-08-29 15:00:13",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-5",
BrandId: 14
},
{
qrCode: "xxxx15",
generateTime: "2024-08-29 15:00:14",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-5",
BrandId: 15
},
{
qrCode: "xxxx16",
generateTime: "2024-08-29 15:00:15",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-5",
BrandId: 16
},
{
qrCode: "xxxx17",
generateTime: "2024-08-29 15:00:16",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-5",
BrandId: 17
},
{
qrCode: "xxxx18",
generateTime: "2024-08-29 15:00:17",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-5",
BrandId: 18
},
{
qrCode: "xxxx19",
generateTime: "2024-08-29 15:00:18",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-5",
BrandId: 19
},
{
qrCode: "xxxx20",
generateTime: "2024-08-29 15:00:19",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-5",
BrandId: 20
},
{
qrCode: "xxxx21",
generateTime: "2024-08-29 15:00:20",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-5",
BrandId: 21
},
{
qrCode: "xxxx22",
generateTime: "2024-08-29 15:00:21",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-5",
BrandId: 22
},
{
qrCode: "xxxx23",
generateTime: "2024-08-29 15:00:22",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-5",
BrandId: 23
},
{
qrCode: "xxxx24",
generateTime: "2024-08-29 15:00:23",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-5",
BrandId: 24
},
{
qrCode: "xxxx25",
generateTime: "2024-08-29 15:00:24",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-5",
BrandId: 25
},
{
qrCode: "xxxx26",
generateTime: "2024-08-29 15:00:25",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-6",
BrandId: 26
},
{
qrCode: "xxxx27",
generateTime: "2024-08-29 15:00:26",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-6",
BrandId: 27
},
{
qrCode: "xxxx28",
generateTime: "2024-08-29 15:00:27",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-6",
BrandId: 28
},
]
qrCode: "",
relationTime: "",
barPieceProductLineDeviceCode: "",
barPieceProductLineName: "",
num: "",
childrenList: [] // 匹配后端返回的字段名
},
};
},
computed: {
// 机台号去重，用于选择器（数据源改为 boxBarProductLineDeviceCode）
uniqueNumColumns() {
const numList = this.data.childList.map(item => item.num);
// 先判断 childrenList 是否有数据
if (!this.data.childrenList || this.data.childrenList.length === 0) {
return [{ text: "暂无机台号" }]; // 兜底提示，避免选择器为空
}
// 过滤掉 boxBarProductLineDeviceCode 为空/undefined 的项，再去重
const numList = this.data.childrenList
.map(item => item.boxBarProductLineDeviceCode)
.filter(code => code && code.trim() !== ""); // 过滤空值
const uniqueNums = Array.from(new Set(numList));
return uniqueNums.map(num => ({ text: num }));
// 去重后仍为空，返回兜底提示
if (uniqueNums.length === 0) {
return [{ text: "暂无机台号" }];
}
return uniqueNums.map(code => ({ text: code }));
},
// 总页数
totalPages() {
return Math.ceil((this.data.childrenList || []).length / this.pageSize) || 1;
},
// 分页逻辑：当前页数据
currentPageList() {
const list = this.data.childrenList || [];
const start = (this.currentPage - 1) * this.pageSize;
const end = start + this.pageSize;
return this.data.childList.slice(start, end);
return list.slice(start, end);
},
// 选中机台号对应的所有条码项（匹配 boxBarProductLineDeviceCode 字段）
targetItems() {
if (!this.fieldValue) return [];
return this.data.childList.filter(item => item.num === this.fieldValue);
return (this.data.childrenList || []).filter(item => item.boxBarProductLineDeviceCode === this.fieldValue);
}
},
methods: {
// 核心接口调用：查询件码详情
queryQrCodeMap(qrCode) {
console.log("调用接口查询件码：", qrCode);
const query = { qrCode: qrCode };
queryQrCodeMap(query).then(response => {
if (response.code === 200) {
const resData = response.data;
console.log("接口返回完整数据：", resData);
console.log("接口返回childrenList：", resData.childrenList);
// 直接替换整个data，强制触发响应式
this.data = {
qrCode: resData.qrCode || "",
relationTime: resData.relationTime || "",
barPieceProductLineDeviceCode: resData.barPieceProductLineDeviceCode || "",
barPieceProductLineName: resData.barPieceProductLineName || "",
num: resData.num || "",
childrenList: resData.childrenList || []
};
console.log("赋值后data：", this.data);
console.log("赋值后childrenList：", this.data.childrenList);
this.Reset();
} else {
Notify({ type: 'danger', message: response.msg || '查询件码失败' });
}
}).catch(error => {
console.error("查询接口异常：", error);
Notify({type: 'danger', message: '网络异常或服务错误'});
});
},
// 切换分页
switchPage(page) {
// 限制页码范围，避免超出
if (page < 1) page = 1;
if (page > this.totalPages) page = this.totalPages;
this.currentPage = page;
},
// 选择器确认选中的机台号（修复空值报错）
textsch(e) {
console.log(11111, e);
this.showPicker = false;
this.fieldValue = e.text;
// 空值保护，避免Cannot read properties of undefined
if (e && e.text) {
this.fieldValue = e.text;
} else {
this.fieldValue = "";
}
},
// 重置：清空选中、扫码状态
Reset() {
this.fieldValue = "";
this.scanned = false; // 重置扫码状态
this.scanned = false;
this.currentPage = 1; // 重置回到第一页
},
// 格式化条码：截取后10位，前面拼接...
formatQrCode(qrCode) {
if (!qrCode) return "";
if (qrCode.length > 5) {
return `...${qrCode.slice(-4)}`;
}
return qrCode;
// 截取后10位，前面拼接...
return `...${qrCode.slice(-10)}`;
},
// 扫码确认：校验并标记状态
gousearch() {
if (!this.fieldValue) {
Notify({ type: 'warning', message: '请先选择机台号' });
Notify({type: 'warning', message: '请先选择机台号'});
return;
}
this.scanned = true; // 标记为已扫码
Notify({ type: 'success', message: '扫码确认成功' });
this.scanned = true;
Notify({type: 'success', message: '扫码确认成功'});
},
// 判断当前项是否是需要高亮的前8个项
// 判断是否高亮：扫码后选中机台号的前8个项（匹配 boxBarProductLineDeviceCode 字段）
isScannedItem(item, index) {
if (!this.scanned || item.num !== this.fieldValue) return false;
// 获取当前项在全局列表中的索引
const globalIndex = this.data.childList.findIndex(i => i.BrandId === item.BrandId);
// 获取当前机台号的所有项
const targetItems = this.targetItems;
// 找到当前项在目标列表中的位置
const targetIndex = targetItems.findIndex(i => i.BrandId === item.BrandId);
// 只高亮前8个项
if (!this.scanned || item.boxBarProductLineDeviceCode !== this.fieldValue) return false;
const targetIndex = this.targetItems.findIndex(i => i.BrandId === item.BrandId);
return targetIndex >= 0 && targetIndex < 8;
}
},
......@@ -594,23 +401,27 @@ export default {
height: 7rem;
position: relative;
}
.list-wrapper {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.btnleft{
.btnleft {
position: absolute;
top: 50%;
z-index: 10;
}
.btnright{
.btnright {
position: absolute;
right: 0;
top: 50%;
transform: rotate(180deg);
z-index: 10;
}
.contboxitem {
width: 18.3%;
height: 17%;
......@@ -628,10 +439,9 @@ export default {
border-color: #FCF8D4 !important;
}
.contboxitem.scanned-item {
background-color: #E0F2FF !important; /* 浅蓝色背景，可根据需求修改 */
border-color: #94D3FF !important; /* 浅蓝色边框，可根据需求修改 */
background-color: #E0F2FF !important;
border-color: #94D3FF !important;
}
.list-wrapper .contboxitem:nth-child(5n) {
......@@ -640,7 +450,7 @@ export default {
.item-index {
font-size: .3rem;
margin:0.25rem .35rem 0 1.3rem;
margin: 0.25rem .35rem 0 1.3rem;
color: #979797;
}
......@@ -649,7 +459,8 @@ export default {
margin-left: .2rem;
margin-bottom: 0;
}
.query-btns{
bottom: 1.5rem;
.query-btns {
bottom: 1.5rem;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment