Skip to content

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

件码扫描结果

parent d731782e
Hide whitespace changes
Inline Side-by-side
Showing with 348 additions and 33 deletions
src/views/ManualOperation/ScanResults/index.vue
View file @ 6bfb96a0
......@@ -59,18 +59,21 @@
<div class="barcode-container">
<p class="barcode-title">
<span>条码分布（5×5）</span>
<span><van-icon name="passed" />{{ index }}/2</span>
<span><van-icon name="passed" />{{ currentPage }}/2</span>
</p>
<div class="contbox">
<!-- 核心修改1：动态绑定class，根据选中的num值判断样式 -->
<div
class="contboxitem"
v-for="(item, index) in data.childList"
:key="item.BrandId || index"
:class="{ 'selected-item': fieldValue && item.num === fieldValue }"
>
<p class="item-index">{{ index + 1 }}</p>
<p class="item-code">{{ formatQrCode(item.qrCode) }}</p>
<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 }"
>
<p class="item-index">{{ (currentPage - 1) * pageSize + index + 1 }}</p>
<p class="item-code">{{ formatQrCode(item.qrCode) }}</p>
</div>
</div>
</div>
</div>
......@@ -128,7 +131,8 @@ export default {
},
data() {
return {
index: 1,
currentPage: 1,
pageSize: 25,
fieldValue: "",
pickerValue: "",
showPicker: false,
......@@ -235,7 +239,7 @@ export default {
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-6",
num: "JT221-5",
BrandId: 11
},
{
......@@ -244,7 +248,7 @@ export default {
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-6",
num: "JT221-5",
BrandId: 12
},
{
......@@ -253,7 +257,7 @@ export default {
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-6",
num: "JT221-5",
BrandId: 13
},
{
......@@ -262,7 +266,7 @@ export default {
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-6",
num: "JT221-5",
BrandId: 14
},
{
......@@ -271,7 +275,7 @@ export default {
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-6",
num: "JT221-5",
BrandId: 15
},
{
......@@ -280,34 +284,335 @@ export default {
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-6",
num: "JT221-5",
BrandId: 16
},
{
qrCode: "abcdefghijklmn", // 测试长字符的情况
qrCode: "xxxx17",
generateTime: "2024-08-29 15:00:16",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
num: "JT221-6",
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: "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: {
// 提取childList中的num字段并去重，生成picker的columns数据
uniqueNumColumns() {
// 提取所有num值
const numList = this.data.childList.map(item => item.num);
// 去重
const uniqueNums = Array.from(new Set(numList));
// 转换为picker需要的格式 { text: 'xxx' }
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: {
switchPage(page) {
this.currentPage = page;
},
textsch(e) {
console.log(11111, e);
this.showPicker = false;
......@@ -316,11 +621,8 @@ export default {
Reset() {
this.fieldValue = "";
},
// 格式化qrCode的方法
formatQrCode(qrCode) {
// 判空处理，避免空值报错
if (!qrCode) return "";
// 当字符数大于5时，显示...+后四位，否则原样显示
if (qrCode.length > 5) {
return `...${qrCode.slice(-4)}`;
}
......@@ -331,7 +633,6 @@ export default {
</script>
<style scoped>
/* 基础样式 */
:deep(.van-nav-bar__right) {
font-size: 0.45rem;
color: #ffffff;
......@@ -390,7 +691,6 @@ export default {
color: #07C160;
}
/* 提取的行内样式 */
.code-info-card {
width: 95%;
height: 3.3rem;
......@@ -452,8 +752,25 @@ export default {
.contbox {
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 {
width: 18.3%;
height: 17%;
......@@ -466,13 +783,12 @@ export default {
border-color: #CEF8DD;
}
/* 核心修改2：新增选中项的样式 */
.contboxitem.selected-item {
background-color: #FEFCE8 !important;
border-color: #FCF8D4 !important;
}
.contboxitem:nth-child(5n) {
.list-wrapper .contboxitem:nth-child(5n) {
margin-right: 0;
}
......@@ -485,7 +801,6 @@ export default {
.item-code {
font-size: .4rem;
margin-left: .2rem;
/* margin-top: .1rem; */
margin-bottom: 0;
}
</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