Skip to content

X
xiangyang-PDA
Commit 6bfb96a0 authored by 胡笑坤's avatar 胡笑坤
Browse files
Options

件码扫描结果

parent d731782e
Show whitespace changes
Inline Side-by-side
Showing with 348 additions and 33 deletions
src/views/ManualOperation/ScanResults/index.vue
View file @ 6bfb96a0
...@@ -59,21 +59,24 @@ ...@@ -59,21 +59,24 @@
<div class="barcode-container"> <div class="barcode-container">
<p class="barcode-title"> <p class="barcode-title">
<span>条码分布（5×5）</span> <span>条码分布（5×5）</span>
<span><van-icon name="passed" />{{ index }}/2</span> <span><van-icon name="passed" />{{ currentPage }}/2</span>
</p> </p>
<div class="contbox"> <div class="contbox">
<!-- 核心修改1：动态绑定class，根据选中的num值判断样式 --> <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 <div
class="contboxitem" class="contboxitem"
v-for="(item, index) in data.childList" v-for="(item, index) in currentPageList"
:key="item.BrandId || index" :key="item.BrandId || index"
:class="{ 'selected-item': fieldValue && item.num === fieldValue }" :class="{ 'selected-item': fieldValue && item.num === fieldValue }"
> >
<p class="item-index">{{ index + 1 }}</p> <p class="item-index">{{ (currentPage - 1) * pageSize + index + 1 }}</p>
<p class="item-code">{{ formatQrCode(item.qrCode) }}</p> <p class="item-code">{{ formatQrCode(item.qrCode) }}</p>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="btn-container"> <div class="btn-container">
<van-button plain class="query-btn" type="default"> <van-button plain class="query-btn" type="default">
<van-icon name="revoke" /> <van-icon name="revoke" />
...@@ -128,7 +131,8 @@ export default { ...@@ -128,7 +131,8 @@ export default {
}, },
data() { data() {
return { return {
index: 1, currentPage: 1,
pageSize: 25,
fieldValue: "", fieldValue: "",
pickerValue: "", pickerValue: "",
showPicker: false, showPicker: false,
...@@ -235,7 +239,7 @@ export default { ...@@ -235,7 +239,7 @@ export default {
boxBarProductLineDeviceCode: "BXBSB001", boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线", boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29", codingDateStr: "2024-08-29",
num: "JT221-6", num: "JT221-5",
BrandId: 11 BrandId: 11
}, },
{ {
...@@ -244,7 +248,7 @@ export default { ...@@ -244,7 +248,7 @@ export default {
boxBarProductLineDeviceCode: "BXBSB001", boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线", boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29", codingDateStr: "2024-08-29",
num: "JT221-6", num: "JT221-5",
BrandId: 12 BrandId: 12
}, },
{ {
...@@ -253,7 +257,7 @@ export default { ...@@ -253,7 +257,7 @@ export default {
boxBarProductLineDeviceCode: "BXBSB001", boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线", boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29", codingDateStr: "2024-08-29",
num: "JT221-6", num: "JT221-5",
BrandId: 13 BrandId: 13
}, },
{ {
...@@ -262,7 +266,7 @@ export default { ...@@ -262,7 +266,7 @@ export default {
boxBarProductLineDeviceCode: "BXBSB001", boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线", boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29", codingDateStr: "2024-08-29",
num: "JT221-6", num: "JT221-5",
BrandId: 14 BrandId: 14
}, },
{ {
...@@ -271,7 +275,7 @@ export default { ...@@ -271,7 +275,7 @@ export default {
boxBarProductLineDeviceCode: "BXBSB001", boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线", boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29", codingDateStr: "2024-08-29",
num: "JT221-6", num: "JT221-5",
BrandId: 15 BrandId: 15
}, },
{ {
...@@ -280,34 +284,335 @@ export default { ...@@ -280,34 +284,335 @@ export default {
boxBarProductLineDeviceCode: "BXBSB001", boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线", boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29", codingDateStr: "2024-08-29",
num: "JT221-6", num: "JT221-5",
BrandId: 16 BrandId: 16
}, },
{ {
qrCode: "abcdefghijklmn", // 测试长字符的情况 qrCode: "xxxx17",
generateTime: "2024-08-29 15:00:16", generateTime: "2024-08-29 15:00:16",
boxBarProductLineDeviceCode: "BXBSB001", boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线", boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29", codingDateStr: "2024-08-29",
num: "JT221-6", num: "JT221-5",
BrandId: 17 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: "xxxx29",
generateTime: "2024-08-29 15:00:28",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-6",
BrandId: 29
},
{
qrCode: "xxxx30",
generateTime: "2024-08-29 15:00:29",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-6",
BrandId: 30
},
{
qrCode: "xxxx31",
generateTime: "2024-08-29 15:00:30",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-6",
BrandId: 31
},
{
qrCode: "xxxx32",
generateTime: "2024-08-29 15:00:31",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-6",
BrandId: 32
},
{
qrCode: "xxxx33",
generateTime: "2024-08-29 15:00:32",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-6",
BrandId: 33
},
{
qrCode: "xxxx34",
generateTime: "2024-08-29 15:00:33",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-6",
BrandId: 34
},
{
qrCode: "xxxx35",
generateTime: "2024-08-29 15:00:34",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-6",
BrandId: 35
},
{
qrCode: "xxxx36",
generateTime: "2024-08-29 15:00:35",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-6",
BrandId: 36
},
{
qrCode: "xxxx37",
generateTime: "2024-08-29 15:00:36",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-6",
BrandId: 37
},
{
qrCode: "xxxx38",
generateTime: "2024-08-29 15:00:37",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-6",
BrandId: 38
},
{
qrCode: "xxxx39",
generateTime: "2024-08-29 15:00:38",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-6",
BrandId: 39
},
{
qrCode: "xxxx40",
generateTime: "2024-08-29 15:00:39",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-6",
BrandId: 40
},
{
qrCode: "xxxx41",
generateTime: "2024-08-29 15:00:40",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-6",
BrandId: 41
},
{
qrCode: "xxxx42",
generateTime: "2024-08-29 15:00:41",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-6",
BrandId: 42
},
{
qrCode: "xxxx43",
generateTime: "2024-08-29 15:00:42",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-6",
BrandId: 43
},
{
qrCode: "xxxx44",
generateTime: "2024-08-29 15:00:43",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-6",
BrandId: 44
},
{
qrCode: "xxxx45",
generateTime: "2024-08-29 15:00:44",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-6",
BrandId: 45
},
{
qrCode: "xxxx46",
generateTime: "2024-08-29 15:00:45",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-6",
BrandId: 46
},
{
qrCode: "xxxx47",
generateTime: "2024-08-29 15:00:46",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-6",
BrandId: 47
},
{
qrCode: "xxxx48",
generateTime: "2024-08-29 15:00:47",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-6",
BrandId: 48
},
{
qrCode: "xxxx49",
generateTime: "2024-08-29 15:00:48",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-6",
BrandId: 49
},
{
qrCode: "xxxx50",
generateTime: "2024-08-29 15:00:49",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-6",
BrandId: 50
} }
], ]
}, },
}; };
}, },
computed: { computed: {
// 提取childList中的num字段并去重，生成picker的columns数据
uniqueNumColumns() { uniqueNumColumns() {
// 提取所有num值
const numList = this.data.childList.map(item => item.num); const numList = this.data.childList.map(item => item.num);
// 去重
const uniqueNums = Array.from(new Set(numList)); const uniqueNums = Array.from(new Set(numList));
// 转换为picker需要的格式 { text: 'xxx' }
return uniqueNums.map(num => ({ text: num })); return uniqueNums.map(num => ({ text: num }));
},
currentPageList() {
const start = (this.currentPage - 1) * this.pageSize;
const end = start + this.pageSize;
return this.data.childList.slice(start, end);
} }
}, },
methods: { methods: {
switchPage(page) {
this.currentPage = page;
},
textsch(e) { textsch(e) {
console.log(11111, e); console.log(11111, e);
this.showPicker = false; this.showPicker = false;
...@@ -316,11 +621,8 @@ export default { ...@@ -316,11 +621,8 @@ export default {
Reset() { Reset() {
this.fieldValue = ""; this.fieldValue = "";
}, },
// 格式化qrCode的方法
formatQrCode(qrCode) { formatQrCode(qrCode) {
// 判空处理，避免空值报错
if (!qrCode) return ""; if (!qrCode) return "";
// 当字符数大于5时，显示...+后四位，否则原样显示
if (qrCode.length > 5) { if (qrCode.length > 5) {
return `...${qrCode.slice(-4)}`; return `...${qrCode.slice(-4)}`;
} }
...@@ -331,7 +633,6 @@ export default { ...@@ -331,7 +633,6 @@ export default {
</script> </script>
<style scoped> <style scoped>
/* 基础样式 */
:deep(.van-nav-bar__right) { :deep(.van-nav-bar__right) {
font-size: 0.45rem; font-size: 0.45rem;
color: #ffffff; color: #ffffff;
...@@ -390,7 +691,6 @@ export default { ...@@ -390,7 +691,6 @@ export default {
color: #07C160; color: #07C160;
} }
/* 提取的行内样式 */
.code-info-card { .code-info-card {
width: 95%; width: 95%;
height: 3.3rem; height: 3.3rem;
...@@ -452,8 +752,25 @@ export default { ...@@ -452,8 +752,25 @@ export default {
.contbox { .contbox {
height: 7rem; height: 7rem;
position: relative;
}
.list-wrapper {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.btnleft{
position: absolute;
top: 50%;
z-index: 10;
}
.btnright{
position: absolute;
right: 0;
top: 50%;
transform: rotate(180deg);
z-index: 10;
} }
.contboxitem { .contboxitem {
width: 18.3%; width: 18.3%;
height: 17%; height: 17%;
...@@ -466,13 +783,12 @@ export default { ...@@ -466,13 +783,12 @@ export default {
border-color: #CEF8DD; border-color: #CEF8DD;
} }
/* 核心修改2：新增选中项的样式 */
.contboxitem.selected-item { .contboxitem.selected-item {
background-color: #FEFCE8 !important; background-color: #FEFCE8 !important;
border-color: #FCF8D4 !important; border-color: #FCF8D4 !important;
} }
.contboxitem:nth-child(5n) { .list-wrapper .contboxitem:nth-child(5n) {
margin-right: 0; margin-right: 0;
} }
...@@ -485,7 +801,6 @@ export default { ...@@ -485,7 +801,6 @@ export default {
.item-code { .item-code {
font-size: .4rem; font-size: .4rem;
margin-left: .2rem; margin-left: .2rem;
/* margin-top: .1rem; */
margin-bottom: 0; margin-bottom: 0;
} }
</style> </style>
\ No newline at end of file
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