Skip to content

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

关联查询结果

parent 6bfb96a0
Hide whitespace changes
Inline Side-by-side
Showing with 377 additions and 204 deletions
src/views/ManualOperation/QueryResults/index.vue
View file @ 5727a65f
......@@ -235,7 +235,6 @@ export default {
</script>
<style scoped>
/* 原有样式 */
:deep(.van-nav-bar__right) {
font-size: 0.45rem;
color: #ffffff;
......@@ -367,7 +366,6 @@ export default {
color: #979797;
}
/* 提取的行内样式 */
.range-separator {
margin: 0 0.15rem;
}
......@@ -387,6 +385,7 @@ export default {
margin-top: 0.3rem;
height: 11rem;
width: 100%;
overflow: auto;
}
.list-item {
......
src/views/ManualOperation/ScanResults/index.vue
View file @ 5727a65f
......@@ -69,7 +69,10 @@
class="contboxitem"
v-for="(item, index) in currentPageList"
:key="item.BrandId || index"
:class="{ 'selected-item': fieldValue && item.num === fieldValue }"
:class="{
'selected-item': fieldValue && item.num === fieldValue,
'scanned-item': isScannedItem(item, index)
}"
>
<p class="item-index">{{ (currentPage - 1) * pageSize + index + 1 }}</p>
<p class="item-code">{{ formatQrCode(item.qrCode) }}</p>
......@@ -78,6 +81,10 @@
</div>
</div>
<div class="btn-container">
<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">
<van-icon name="revoke" />
返回件码列表
......@@ -136,6 +143,7 @@ export default {
fieldValue: "",
pickerValue: "",
showPicker: false,
scanned: false,
data: {
qrCode: "xxxx",
relationTime: "2024-08-29",
......@@ -395,204 +403,7 @@ export default {
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
}
]
},
};
......@@ -607,6 +418,11 @@ export default {
const start = (this.currentPage - 1) * this.pageSize;
const end = start + this.pageSize;
return this.data.childList.slice(start, end);
},
targetItems() {
if (!this.fieldValue) return [];
return this.data.childList.filter(item => item.num === this.fieldValue);
}
},
methods: {
......@@ -620,6 +436,7 @@ export default {
},
Reset() {
this.fieldValue = "";
this.scanned = false; // 重置扫码状态
},
formatQrCode(qrCode) {
if (!qrCode) return "";
......@@ -627,6 +444,29 @@ export default {
return `...${qrCode.slice(-4)}`;
}
return qrCode;
},
gousearch() {
if (!this.fieldValue) {
Notify({ type: 'warning', message: '请先选择机台号' });
return;
}
this.scanned = true; // 标记为已扫码
Notify({ type: 'success', message: '扫码确认成功' });
},
// 判断当前项是否是需要高亮的前8个项
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个项
return targetIndex >= 0 && targetIndex < 8;
}
},
};
......@@ -657,7 +497,7 @@ export default {
border-radius: 0.1rem;
height: 1.3rem;
position: fixed;
bottom: .3rem;
bottom: .1rem;
left: .4rem;
border: 1px solid #d7d4d8;
}
......@@ -693,7 +533,7 @@ export default {
.code-info-card {
width: 95%;
height: 3.3rem;
height: 3.2rem;
margin: auto;
margin-top: 0.3rem;
border-radius: 0.2rem;
......@@ -729,7 +569,7 @@ export default {
.form-container {
width: 95%;
height: 1.5rem;
margin: 0.5rem auto;
margin: 0.3rem auto;
border-radius: 0.2rem;
background: #ffffff;
}
......@@ -788,6 +628,12 @@ export default {
border-color: #FCF8D4 !important;
}
.contboxitem.scanned-item {
background-color: #E0F2FF !important; /* 浅蓝色背景，可根据需求修改 */
border-color: #94D3FF !important; /* 浅蓝色边框，可根据需求修改 */
}
.list-wrapper .contboxitem:nth-child(5n) {
margin-right: 0;
}
......@@ -803,4 +649,7 @@ export default {
margin-left: .2rem;
margin-bottom: 0;
}
.query-btns{
bottom: 1.5rem;
}
</style>
\ No newline at end of file
src/views/ManualOperation/SearchResults/index.vue 0 → 100644
View file @ 5727a65f
<template>
<div id="topDiv">
<van-nav-bar
title="关联查询结果"
left-text=""
left-arrow
@click-left="$router.go(-1)"
class="nav-bar"
>
<template #right> ？ </template>
</van-nav-bar>
</div>
<div class="box-code-card">
<p class="box-code-label">盒码</p>
<p class="box-code-value">ABCD</p>
<div class="box-code-info">
<p class="info-item">
<span class="total-count">扫描时间：</span>
<span class="info-value">2023-10-15 14:35</span>
</p>
<p class="info-item">
<span class="total-count">关联状态：</span>
<span class="info-value success">已关联</span>
</p>
</div>
</div>
<div class="related-code-container">
<p class="related-code-header">
<span>关联码信息</span>
<span class="total-count">共{{ data.length }}条</span>
</p>
<!-- 循环生成关联码卡片 -->
<div
class="related-code-card"
v-for="(item, index) in data"
:key="index"
>
<p class="code-main">{{ item.qrCode }}</p>
<!-- 根据type值显示对应的码类型 -->
<p class="total-count code-type">
关联{{ getCodeTypeText(item.type) }}
</p>
<div class="code-info-row">
<p class="info-item">
<span class="total-count">生产时间：</span>
<span>{{ item.generateTime }}</span>
</p>
<p class="info-item">
<span class="total-count">机台号：</span>
<span>{{ item.boxBarProductLineDeviceCode }}</span>
</p>
</div>
<div class="code-info-row">
<p class="info-item">
<span class="total-count">{{ getQuantityLabel(item.type) }}：</span>
<span>{{ getQuantityValue(item.type) }}</span>
</p>
<p class="info-item">
<span class="total-count">关联状态：</span>
<!-- 根据关联状态值动态设置颜色 -->
<span :style="{ color: getStatusColor(item.status) }">
{{ getStatusText(item.status) }}
</span>
</p>
</div>
</div>
</div>
<div class="btn-container">
<van-button plain @click="gousearch()" style="background: #07C160;color: #ffffff;" class="query-btn" type="success">
<van-icon name="browsing-history-o" />
查看件码详情
</van-button>
<van-button plain @click="gousearch()" class="query-btn query-btns" type="success">
<van-icon name="revoke" />
返回扫码
</van-button>
</div>
</template>
<script>
import { NavBar, Icon, } from "vant";
export default {
name: "RelationQueryResult",
components: {
[NavBar.name]: NavBar,
[Icon.name]: Icon,
},
mounted() {
// this.$nativeQRCode.setStatusBarColor("#006953", "white");
// ScanOverlay.show('请扫描二维码')
},
data() {
return {
data: [
{
qrCode: "TM00123456789",
type: 20, // 条码
status: 10, // 正常
generateTime: "2024-08-29 ",
boxBarProductLineDeviceCode: "BXBSB001",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
BrandId: 1,
},
{
qrCode: "HM987654321098",
type: 30, // 盒码
status: 20, // 异常
generateTime: "2024-08-29 ",
boxBarProductLineDeviceCode: "BXBSB002",
boxBarProductLineName: "盒条产线",
codingDateStr: "2024-08-29",
BrandId: 1,
},
],
};
},
methods: {
// 根据type值返回对应的码类型文本
getCodeTypeText(type) {
switch (type) {
case 10:
return "盒码";
case 20:
return "条码";
case 30:
return "件码";
default:
return "未知类型";
}
},
// 根据码类型返回数量标签（盒烟数量/条码数量）
getQuantityLabel(type) {
switch (type) {
case 10:
return "盒烟数量";
case 20:
return "盒烟数量"; // 条码对应盒烟数量
case 30:
return "条烟数量"; // 件码对应条码数量
default:
return "数量";
}
},
// 根据码类型返回对应的数量值
getQuantityValue(type) {
switch (type) {
case 10:
return "1盒"; // 盒码默认1盒
case 20:
return "10盒"; // 条码对应10盒
case 30:
return "50条"; // 件码对应50条
default:
return "未知";
}
},
// 根据状态值返回状态文本
getStatusText(status) {
switch (status) {
case 10:
return "正常";
case 20:
return "异常";
case 30:
return "未知";
default:
return "未定义";
}
},
// 根据状态值返回对应的颜色
getStatusColor(status) {
switch (status) {
case 10:
return "#07C160"; // 正常-绿色
case 20:
return "red"; // 异常-红色
case 30:
return "yellow"; // 未知-黄色
default:
return "#333"; // 默认黑色
}
}
},
};
</script>
<style scoped>
.nav-bar {
background-color: rgba(0, 105, 83, 1);
}
:deep(.van-nav-bar__right) {
font-size: 0.45rem;
color: #ffffff;
}
.box-code-card {
width: 90%;
height: 17%;
margin: 0 auto;
margin-top: 0.3rem;
border-radius: 0.2rem;
background: #ffffff;
font-size: 0.4rem;
padding: 0.3rem;
box-sizing: border-box;
}
.box-code-label {
color: #ffffff;
background: #07c160;
width: 1.3rem;
text-align: center;
border-radius: 0.3rem;
font-size: 0.35rem;
margin: 0;
}
.box-code-value {
margin: 0.3rem 0;
font-size: 0.45rem;
}
.box-code-info {
font-size: 0.3rem;
display: flex;
}
.related-code-container {
width: 90%;
height: auto;
margin: 0 auto;
margin-top: 0.5rem;
font-size: 0.4rem;
}
.related-code-header {
display: flex;
justify-content: space-between;
margin: 0;
}
.related-code-card {
width: 99%;
height: auto;
border: 5px solid #22c866;
border-radius: 0.3rem;
margin: 0 auto;
margin-top: 0.3rem;
box-sizing: border-box;
padding: 0.3rem 0.2rem;
background: #ffffff;
}
.code-main {
font-weight: bold;
margin: 0;
}
.code-type {
font-size: 0.35rem;
margin: 0;
}
.code-info-row {
display: flex;
font-size: 0.35rem;
margin: 0.2rem 0;
}
.info-item {
width: 50%;
margin: 0 0 0 0.2rem;
padding: 0;
}
.info-item:first-child {
margin-left: 0;
}
.info-value {
font-size: 0.32rem;
}
.info-value.success {
color: #07c160;
}
/* 通用样式 */
.total-count {
color: #979797;
}
.btn-container {
width: 100%;
height: 20%;
margin-top: 0.2rem;
}
.query-btn {
width: 92%;
margin: auto;
display: block;
border-radius: 0.1rem;
height: 1.3rem;
position: fixed;
bottom: .3rem;
left: .4rem;
border: 1px solid #d7d4d8;
text-align: center;
line-height: 1.3rem;
background: #ffffff;
font-size: .45rem;
}
.query-btns{
bottom: 1.8rem;
}
</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