<template>
|
<view class="container">
|
<cu-custom :bgColor="NavBarColor" :isBack="true" backRouterName="index">
|
<block slot="backText">返回</block>
|
<block slot="content">质量检验</block>
|
<block slot="right">
|
<view @click="handleAdd">
|
<image class="search" src="/static/icon/add.png" style="width: 25px; height: 25px;" alt="添加" />
|
</view>
|
</block>
|
</cu-custom>
|
|
<uni-search-bar placeholder="检验单号/物料信息" @confirm="search" :focus="false" v-model="searchValue"
|
@blur="blur" @focus="focus" @input="input" @cancel="cancel" @clear="clear">
|
</uni-search-bar>
|
|
<!-- 骨架屏 -->
|
<view v-if="loading" class="skeleton-container">
|
<!-- 列表骨架 -->
|
<view class="skeleton-list">
|
<!-- 重复渲染多个列表项骨架 -->
|
<view class="skeleton-bill-item" v-for="n in 5" :key="n">
|
<view class="skeleton-bill-row">
|
<view class="skeleton-bill-label"></view>
|
<view class="skeleton-bill-value"></view>
|
</view>
|
<view class="skeleton-bill-row">
|
<view class="skeleton-bill-label"></view>
|
<view class="skeleton-bill-value"></view>
|
</view>
|
<view class="skeleton-bill-row">
|
<view class="skeleton-bill-label"></view>
|
<view class="skeleton-bill-value short"></view>
|
</view>
|
<view class="skeleton-bill-row">
|
<view class="skeleton-bill-label"></view>
|
<view class="skeleton-bill-value"></view>
|
</view>
|
<view class="skeleton-bill-row">
|
<view class="skeleton-bill-label"></view>
|
<view class="skeleton-bill-value flex">
|
<view class="skeleton-half"></view>
|
<view class="skeleton-half ml-auto"></view>
|
</view>
|
</view>
|
<view class="skeleton-bill-row">
|
<view class="skeleton-bill-label"></view>
|
<view class="skeleton-status-tag"></view>
|
</view>
|
<view class="skeleton-bill-row">
|
<view class="skeleton-bill-label"></view>
|
<view class="skeleton-bill-value"></view>
|
</view>
|
<view class="skeleton-bill-row operation">
|
<view class="skeleton-bill-label"></view>
|
<view class="skeleton-buttons">
|
<view class="skeleton-btn"></view>
|
<view class="skeleton-btn ml-2"></view>
|
<view class="skeleton-btn ml-2"></view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 实际内容 -->
|
<mescroll-uni v-else ref="mescrollRef" @init="mescrollInit" :top="top" @down="downCallback" @up="upCallback">
|
<view class="production-container">
|
<view class="bill-table" v-for="(item, index) in mockBillList" :key="index">
|
<!-- 表头（共用样式） -->
|
<view class="table-content">
|
<!-- 单据号行 -->
|
<view class="table-row">
|
<text class="table-header">检验单号：</text>
|
<text class="table-value">{{item.billNo || item.num}}</text>
|
</view>
|
<!-- 物料编码行 -->
|
<view class="table-row">
|
<text class="table-header">物料信息：</text>
|
<text class="table-value">{{item.materialCode}}</text>
|
</view>
|
<!-- 物料描述行 -->
|
<view class="table-row">
|
<text class="table-header">检验类型：</text>
|
<text class="table-value">{{item.materialDesc}}</text>
|
</view>
|
<!-- 产线行 -->
|
<view class="table-row">
|
<text class="table-header">检验方案：</text>
|
<text class="table-value">{{item.productionLine}}</text>
|
</view>
|
<!-- 班组行 -->
|
<view class="table-row">
|
<text class="table-header">检验数量：</text>
|
<text class="table-value">{{item.team}}</text>
|
</view>
|
<!-- 生产日期行（多内容） -->
|
<view class="table-row">
|
<text class="table-header">合格数量：</text>
|
<view class="table-value">
|
<text>{{item.produceDate}}</text>
|
<text class="right-content">不合格数量：{{item.planQty}}</text>
|
</view>
|
</view>
|
<!-- 检验记录行 -->
|
<view class="table-row">
|
<text class="table-header">检验状态：</text>
|
<view class="table-value">
|
<text class="status-tag"
|
:class="[{ passed: item.inspectResult === '执行中' },{ failed: item.inspectResult === '已完成' }]">
|
{{item.inspectResult}}
|
</text>
|
</view>
|
</view>
|
<!-- 上料信息行（多内容） -->
|
<view class="table-row">
|
<text class="table-header">检验时间：</text>
|
<text class="table-value">{{item.team}}</text>
|
</view>
|
<view class="table-row">
|
<text class="table-header">处理结果：</text>
|
<text class="table-value">{{item.team}}</text>
|
</view>
|
|
<!-- 操作行 -->
|
<view class="table-row operation-row">
|
<text class="table-header">操作：</text>
|
<view class="table-value">
|
<view class="button-group">
|
<button class="action-btn" v-for="btn in getActionButtons(item.inspectResult)"
|
:key="btn.type" @click="handleButtonClick(item, btn)" :class="btn.type">
|
{{btn.text}}
|
</button>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</mescroll-uni>
|
<pdaScan />
|
</view>
|
</template>
|
|
<script>
|
import pdaScan from "@/components/mes/pdaScan.vue"
|
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
|
export default {
|
mixins: [MescrollMixin],
|
components: {
|
pdaScan
|
},
|
data() {
|
return {
|
loading: true, // 控制骨架屏显示
|
actionConfig: {
|
// 未执行状态下的操作按钮
|
'unexecuted': [{
|
text: '详情',
|
type: 'check',
|
path: '/pages/eam/quality/qualityInspectionDetail/qualityInspectionDetail'
|
},
|
{
|
text: '删除',
|
type: 'delete',
|
action: 'delete'
|
},
|
{
|
text: '检验',
|
type: 'device',
|
path: '/pages/eam/quality/checkItem/checkItem'
|
}
|
|
],
|
// 执行中状态下的操作按钮
|
'executing': [{
|
text: '检验',
|
type: 'device',
|
path: '/pages/eam/quality/checkItem/checkItem'
|
}
|
|
],
|
// 已完成状态下的操作按钮
|
'completed': [{
|
text: '检验明细',
|
type: 'detail',
|
path: '/pages/eam/quality/checkItemDetail/checkItemDetail'
|
},
|
|
]
|
},
|
mockBillList: [{
|
billNo: 'SCGD202507001',
|
materialCode: '220005874',
|
materialDesc: '外法兰\\G3-487/01',
|
spec: 'Φ120×30mm',
|
productionLine: '热处理组',
|
team: '张杰班组',
|
produceDate: '2025-07-10',
|
planQty: 500,
|
actualQty: 480,
|
inspectResult: '未检验',
|
feedQty: 200,
|
feeder: '王玉',
|
feedTime: '2025-07-10 08:30',
|
status: '生产中'
|
},
|
{
|
billNo: 'SCGD202507002',
|
materialCode: '120008194',
|
materialDesc: '三代轮教轴轴承单元\\G3-487',
|
spec: '型号305',
|
productionLine: '装配一线',
|
team: '张杰班组',
|
produceDate: '2025-07-10',
|
planQty: 200,
|
actualQty: 200,
|
inspectResult: '执行中',
|
feedQty: 200,
|
feeder: '张杰',
|
feedTime: '2025-07-10 09:15',
|
status: '已完成'
|
},
|
{
|
billNo: 'SCGD202507003',
|
materialCode: '330012456',
|
materialDesc: '转向节臂\\G3-500',
|
spec: 'L=210mm',
|
productionLine: '机加工二线',
|
team: '李华班组',
|
produceDate: '2025-07-11',
|
planQty: 300,
|
actualQty: 150,
|
inspectResult: '已完成',
|
feedQty: 150,
|
feeder: '赵明',
|
feedTime: '2025-07-11 10:00',
|
status: '生产中'
|
},
|
{
|
billNo: 'SCGD202507004',
|
materialCode: '440009876',
|
materialDesc: '半轴套管\\G3-620',
|
spec: 'Φ89×1200mm',
|
productionLine: '锻造线',
|
team: '王强班组',
|
produceDate: '2025-07-11',
|
planQty: 100,
|
actualQty: 0,
|
inspectResult: '已完成',
|
feedQty: 0,
|
feeder: '',
|
feedTime: '',
|
status: '待生产'
|
},
|
{
|
billNo: 'SCGD202507005',
|
materialCode: '550010345',
|
materialDesc: '制动盘\\G3-450',
|
spec: 'Φ350mm',
|
productionLine: '机加工一线',
|
team: '刘晓班组',
|
produceDate: '2025-07-09',
|
planQty: 400,
|
actualQty: 400,
|
inspectResult: '已完成',
|
feedQty: 400,
|
feeder: '孙伟',
|
feedTime: '2025-07-09 14:20',
|
status: '已完成'
|
}
|
],
|
searchValue: '',
|
scrollLeft: 0,
|
NavBarColor: this.NavBarColor,
|
upOption: {
|
page: {
|
num: 0,
|
size: 10,
|
},
|
noMoreSize: 4,
|
empty: {
|
tip: '~ 暂无数据 ~',
|
},
|
loading: '',
|
text: '全部',
|
isShowNoMore: false,
|
textNoMore: '我是有底线的 >_<'
|
},
|
styles: {
|
color: '#2979FF',
|
borderColor: '#2979FF'
|
},
|
|
url: {
|
delete: "/pm/arrivalAdvice/delete",
|
sub: "/pm/arrivalAdvice/issue",
|
list: "/pm/arrivalAdvice/list",
|
|
},
|
placeholderStyle: "color:#2979FF;font-size:14px",
|
current: 0,
|
colorIndex: 0,
|
activeColor: '#5277A6',
|
msdDelList: [],
|
msgList: [],
|
announcementList: [],
|
}
|
},
|
|
computed: {
|
top() {
|
return this.CustomBar * 2 + 100
|
},
|
style() {
|
var StatusBar = this.StatusBar;
|
var CustomBar = this.CustomBar;
|
var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
|
return style
|
},
|
},
|
|
created() {
|
// 模拟数据加载延迟，显示骨架屏
|
setTimeout(() => {
|
this.loading = false;
|
}, 1500);
|
},
|
|
methods: {
|
getActionButtons(status) {
|
switch (status) {
|
case '未检验':
|
case 0:
|
return this.actionConfig.unexecuted;
|
case '执行中':
|
case 1:
|
return this.actionConfig.executing;
|
case '已完成':
|
case 2:
|
return this.actionConfig.completed;
|
default:
|
return this.actionConfig.unexecuted;
|
}
|
},
|
handleAdd() {
|
uni.redirectTo({
|
url: '/pages/eam/quality/qualityInspection/addInspection/addInspection'
|
})
|
},
|
search(res) {
|
uni.showToast({
|
title: '搜索：' + res.value,
|
icon: 'none'
|
})
|
},
|
input(res) {
|
console.log('----input:', res)
|
},
|
clear(res) {
|
console.log('clear事件，清除值为：' + res.value)
|
},
|
blur(res) {
|
console.log('blur事件，输入值为：' + res.value)
|
},
|
focus(e) {
|
console.log('focus事件，输入值为：' + e.value)
|
},
|
cancel(res) {
|
console.log('cancel事件，输入值为：' + res.value)
|
},
|
|
|
mescrollInit(mescroll) {
|
console.log('mescrollInit')
|
this.mescroll = mescroll;
|
},
|
handleButtonClick(item, button) {
|
console.log('点击按钮:', button.text, '工单:', item.billNo);
|
|
switch (button.type) {
|
case 'check':
|
uni.navigateTo({
|
url: button.path
|
});
|
break;
|
case 'device':
|
uni.navigateTo({
|
url: button.path
|
});
|
break;
|
case 'delete':
|
this.handleDelete(item);
|
break;
|
case 'detail':
|
uni.navigateTo({
|
url: button.path + '?billNo=' + item.billNo
|
});
|
break;
|
default:
|
uni.showToast({
|
title: '功能开发中',
|
icon: 'none'
|
});
|
}
|
},
|
handleDelete(item) {
|
uni.showModal({
|
title: '确认删除',
|
content: `确定要删除检验单号 ${item.billNo} 吗？`,
|
success: (res) => {
|
if (res.confirm) {
|
this.performDelete(item.id);
|
}
|
}
|
});
|
},
|
upCallback(page) {
|
//联网加载数据
|
console.log("tabindex", this.TabCur)
|
let keyword = this.TabCur
|
if (keyword == 0) {
|
this.$http.get(this.url.list, {
|
params: {
|
pageNo: page.num,
|
pageSize: page.size,
|
order: "desc",
|
column: "createTime",
|
type: 2,
|
status: 0
|
|
}
|
}).then(res => {
|
this.announcement1 = res.data.result.records
|
this.mescroll.endSuccess(this.announcement1.length);
|
if (res.data.success) {
|
console.log("res", res.data)
|
this.msg1Count = res.data.result.total
|
this.msg1Title = "通知(" + res.data.result.total + ")";
|
for (let annItem of this.announcement1) {
|
this.msgList.push(annItem)
|
}
|
}
|
if (page.num == 1) {
|
this.msgList = [];
|
this.msgList = this.msgList.concat(this.announcement1);
|
}
|
|
}).catch(() => {
|
this.mescroll.endErr();
|
uni.showToast({
|
title: '网络异常，请稍后再试',
|
icon: 'none'
|
});
|
})
|
} else if (keyword == 1) {
|
this.$http.get(this.url.list, {
|
params: {
|
pageSize: page.size,
|
order: "desc",
|
column: "createTime",
|
type: 2,
|
status: 1
|
}
|
}).then(res => {
|
this.announcement2 = res.data.result.records
|
this.mescroll.endSuccess(this.announcement2.length, this.msgCount);
|
if (res.data.success) {
|
console.log("res sys", res.data)
|
this.msg2Count = res.data.result.total
|
this.msg2Title = "通知(" + res.data.result.total + ")";
|
for (let item of this.announcement2) {
|
this.msgList.push(item)
|
}
|
}
|
if (page.num == 1) {
|
this.msgList = [];
|
this.msgList = this.msgList.concat(this.announcement2);
|
}
|
}).catch(() => {
|
this.mescroll.endErr();
|
uni.showToast({
|
title: '网络异常，请稍后再试',
|
icon: 'none'
|
});
|
})
|
} else if (keyword == 2) {
|
this.$http.get(this.url.list, {
|
params: {
|
pageSize: page.size,
|
order: "desc",
|
column: "createTime",
|
type: 2,
|
status: 2
|
}
|
}).then(res => {
|
this.announcement2 = res.data.result.records
|
this.mescroll.endSuccess(this.announcement2.length, this.msgCount);
|
if (res.data.success) {
|
console.log("res sys", res.data)
|
this.msg2Count = res.data.result.total
|
this.msg2Title = "通知(" + res.data.result.total + ")";
|
for (let item of this.announcement2) {
|
this.msgList.push(item)
|
}
|
}
|
if (page.num == 1) {
|
this.msgList = [];
|
this.msgList = this.msgList.concat(this.announcement2);
|
}
|
}).catch(() => {
|
this.mescroll.endErr();
|
uni.showToast({
|
title: '网络异常，请稍后再试',
|
icon: 'none'
|
});
|
})
|
}
|
},
|
performDelete(id) {
|
// 实现删除逻辑
|
uni.showToast({
|
title: '删除成功',
|
icon: 'success'
|
});
|
// 这里可以添加实际的删除API调用
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.container {
|
background-color: #f5f5f5;
|
min-height: 100vh;
|
}
|
|
.tab-container {
|
background-color: #ffffff;
|
}
|
|
.production-container {
|
padding: 20rpx;
|
}
|
|
.bill-table {
|
background-color: #ffffff;
|
border-radius: 16rpx;
|
margin-bottom: 20rpx;
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
overflow: hidden;
|
}
|
|
.table-content {
|
padding: 20rpx;
|
}
|
|
.table-row {
|
display: flex;
|
margin-bottom: 15rpx;
|
}
|
|
.table-row:last-child {
|
margin-bottom: 0;
|
}
|
|
.table-header {
|
flex: 0 0 180rpx;
|
font-size: 28rpx;
|
color: #666;
|
}
|
|
.table-value {
|
flex: 1;
|
font-size: 28rpx;
|
color: #333;
|
display: flex;
|
align-items: center;
|
}
|
|
.right-content {
|
margin-left: auto;
|
color: #999;
|
font-size: 26rpx;
|
}
|
|
.status-tag {
|
padding: 6rpx 12rpx;
|
border-radius: 8rpx;
|
font-size: 24rpx;
|
background-color: #ff6347;
|
color: #ffffff;
|
}
|
|
.status-tag.passed {
|
background-color: #39b54a;
|
}
|
|
.status-tag.failed {
|
background-color: #55aaff;
|
}
|
|
.button-group {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 15rpx;
|
}
|
|
.action-btn {
|
padding: 12rpx 20rpx;
|
font-size: 24rpx;
|
border-radius: 8rpx;
|
border: none;
|
background-color: #007AFF;
|
color: #ffffff;
|
min-width: 120rpx;
|
text-align: center;
|
}
|
|
.action-btn.check {
|
background-color: #007AFF;
|
}
|
|
.action-btn.process {
|
background-color: #39b54a;
|
}
|
|
.action-btn.device {
|
background-color: #9932cc;
|
}
|
|
.action-btn.sample {
|
background-color: #ff6347;
|
}
|
|
.action-btn.feed {
|
background-color: #ffa500;
|
}
|
|
.action-btn.report {
|
background-color: #1e90ff;
|
}
|
|
.action-btn.inspection {
|
background-color: #228b22;
|
}
|
|
.action-btn.detail {
|
background-color: #6a5acd;
|
}
|
|
.action-btn.record {
|
background-color: #808080;
|
}
|
|
.operation-row {
|
margin-top: 10rpx;
|
padding-top: 15rpx;
|
border-top: 1rpx solid #eee;
|
}
|
|
.empty-tip {
|
text-align: center;
|
padding: 100rpx 0;
|
color: #999;
|
font-size: 28rpx;
|
}
|
|
.nav {
|
white-space: nowrap;
|
width: 100%;
|
}
|
|
.cu-item {
|
display: inline-block;
|
min-width: 150rpx;
|
padding: 0 30rpx;
|
height: 80rpx;
|
line-height: 80rpx;
|
text-align: center;
|
}
|
|
.cu-item.cur {
|
border-bottom: 4rpx solid #0081ff;
|
}
|
|
/* 骨架屏样式 */
|
.skeleton-container {
|
padding: 20rpx;
|
}
|
|
.skeleton-list {
|
width: 100%;
|
}
|
|
.skeleton-bill-item {
|
background-color: #ffffff;
|
border-radius: 16rpx;
|
padding: 20rpx;
|
margin-bottom: 20rpx;
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
}
|
|
.skeleton-bill-row {
|
display: flex;
|
margin-bottom: 15rpx;
|
}
|
|
.skeleton-bill-label {
|
width: 180rpx;
|
height: 28rpx;
|
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
|
background-size: 400% 100%;
|
border-radius: 4rpx;
|
animation: skeleton-loading 1.4s ease infinite;
|
}
|
|
.skeleton-bill-value {
|
flex: 1;
|
height: 28rpx;
|
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
|
background-size: 400% 100%;
|
border-radius: 4rpx;
|
animation: skeleton-loading 1.4s ease infinite;
|
margin-left: 20rpx;
|
}
|
|
.skeleton-bill-value.short {
|
width: 60%;
|
}
|
|
.skeleton-half {
|
width: 45%;
|
height: 28rpx;
|
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
|
background-size: 400% 100%;
|
border-radius: 4rpx;
|
animation: skeleton-loading 1.4s ease infinite;
|
}
|
|
.skeleton-status-tag {
|
width: 120rpx;
|
height: 36rpx;
|
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
|
background-size: 400% 100%;
|
border-radius: 8rpx;
|
animation: skeleton-loading 1.4s ease infinite;
|
margin-left: 20rpx;
|
}
|
|
.skeleton-buttons {
|
display: flex;
|
flex: 1;
|
margin-left: 20rpx;
|
}
|
|
.skeleton-btn {
|
width: 120rpx;
|
height: 40rpx;
|
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
|
background-size: 400% 100%;
|
border-radius: 8rpx;
|
animation: skeleton-loading 1.4s ease infinite;
|
}
|
|
.operation {
|
margin-top: 10rpx;
|
padding-top: 15rpx;
|
border-top: 1rpx solid #eee;
|
}
|
|
@keyframes skeleton-loading {
|
0% {
|
background-position: 100% 50%;
|
}
|
100% {
|
background-position: 0 50%;
|
}
|
}
|
</style>
|
