<template>
|
<view class="container">
|
<!-- 页面标题 -->
|
<view class="page-header">
|
<view class="header-title">实验室检测详情</view>
|
</view>
|
|
<!-- 加载状态 -->
|
<view v-if="loading" class="loading-container">
|
<uni-load-more status="loading" />
|
</view>
|
|
<!-- 数据展示 -->
|
<view v-else-if="data" class="content">
|
<view class="card">
|
<view class="card-header">
|
<view class="header-info">
|
<view class="info-item">
|
<label class="info-label">工单号:</label>
|
<text class="info-value">{{ data.billNo }}</text>
|
</view>
|
</view>
|
</view>
|
|
<view class="card-body">
|
<view class="info-group">
|
<view class="info-row">
|
<view class="info-item">
|
<label class="info-label">创建时间:</label>
|
<text class="info-value">{{ data.createTime }}</text>
|
</view>
|
<view class="info-item">
|
<label class="info-label">创建人:</label>
|
<text class="info-value">{{ data.createUser }}</text>
|
</view>
|
</view>
|
|
<view class="info-row">
|
<view class="info-item">
|
<label class="info-label">生产线编码:</label>
|
<text class="info-value">{{ data.lineNo }}</text>
|
</view>
|
<view class="info-item">
|
<label class="info-label">物料编码:</label>
|
<text class="info-value">{{ data.itemNo }}</text>
|
</view>
|
</view>
|
|
<view class="info-row full-width">
|
<view class="info-item">
|
<label class="info-label">物料名称:</label>
|
<text class="info-value">{{ data.itemName }}</text>
|
</view>
|
</view>
|
|
<view class="info-row full-width">
|
<view class="info-item">
|
<label class="info-label">物料规格:</label>
|
<text class="info-value">{{ data.itemModel }}</text>
|
</view>
|
</view>
|
|
<view class="info-row">
|
<view class="info-item">
|
<label class="info-label">生产车间编码:</label>
|
<text class="info-value">{{ data.departmentCode }}</text>
|
</view>
|
<view class="info-item">
|
<label class="info-label">生产车间ID:</label>
|
<text class="info-value">{{ data.departmentId }}</text>
|
</view>
|
</view>
|
|
<view class="info-row full-width">
|
<view class="info-item">
|
<label class="info-label">销售订单号:</label>
|
<text class="info-value">{{ data.saleOrderNoc }}</text>
|
</view>
|
</view>
|
|
<view class="info-row">
|
<view class="info-item">
|
<label class="info-label">检验时间:</label>
|
<text class="info-value">{{ data.inspectionTime }}</text>
|
</view>
|
<view class="info-item">
|
<label class="info-label">检验人:</label>
|
<text class="info-value">{{ data.inspectionUser }}</text>
|
</view>
|
</view>
|
|
<view class="info-row">
|
<view class="info-item status-item">
|
<label class="info-label">检验结果:</label>
|
<view class="result-container">
|
<!-- 显示当前检验结果 -->
|
<text v-if="data.inspectionResult" class="status-badge" :class="data.inspectionResult === '合格' ? 'success' : 'danger'">
|
{{ data.inspectionResult }}
|
</text>
|
<text v-else class="status-badge pending">
|
待检验
|
</text>
|
|
<!-- 录入/重新录入按钮 -->
|
<button v-if="!showResultInput" class="input-btn" @click="showResultInput = true">
|
{{ data.inspectionResult ? '重新录入' : '录入结果' }}
|
</button>
|
|
<!-- 检验结果选择按钮 -->
|
<view v-if="showResultInput" class="result-input-container">
|
<button class="result-btn qualified" @click="updateInspectionResult('合格')" :disabled="updating">
|
合格
|
</button>
|
<button class="result-btn unqualified" @click="updateInspectionResult('不合格')" :disabled="updating">
|
不合格
|
</button>
|
<button class="result-btn cancel" @click="showResultInput = false" :disabled="updating">
|
取消
|
</button>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 空状态 -->
|
<view v-else class="empty-state">
|
<view class="empty-icon">📋</view>
|
<view class="empty-text">暂无数据</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
data: null,
|
loading: false,
|
itemId: null,
|
showResultInput: false,
|
updating: false
|
}
|
},
|
|
onLoad(options) {
|
this.itemId = options.id;
|
if (this.itemId) {
|
this.loadData();
|
}
|
},
|
|
methods: {
|
loadData() {
|
this.loading = true;
|
|
const requestData = {
|
pageIndex: 1,
|
limit: 1,
|
id: this.itemId
|
};
|
|
this.$post({
|
url: "/MesLaboratory/GetPage",
|
data: requestData
|
}).then(res => {
|
if (res.data && res.data.tbBillList && res.data.tbBillList.length > 0) {
|
this.data = res.data.tbBillList[0];
|
} else {
|
this.data = null;
|
this.$showMessage('未找到相关数据');
|
}
|
}).catch(err => {
|
console.error('获取实验室详情失败:', err);
|
this.$showMessage('获取数据失败，请重试');
|
}).finally(() => {
|
this.loading = false;
|
});
|
},
|
|
updateInspectionResult(result) {
|
this.updating = true;
|
|
const requestData = {
|
id: this.itemId,
|
inspectionResult: result,
|
inspectionBy: this.$loginInfo.account
|
};
|
|
this.$post({
|
url: "/MesLaboratory/UpdateInspectionResult",
|
data: requestData
|
}).then(res => {
|
if (res.status === 0 && res.data.result) {
|
this.$showMessage(`检验结果已录入：${result}`);
|
this.showResultInput = false;
|
// 录入成功后刷新页面数据
|
this.loadData();
|
} else {
|
this.$showMessage('录入失败，请重试');
|
}
|
}).catch(err => {
|
console.error('录入检验结果失败:', err);
|
this.$showMessage('录入失败，请重试');
|
}).finally(() => {
|
this.updating = false;
|
});
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.container {
|
padding: 20px;
|
background-color: #f8f9fa;
|
min-height: 100vh;
|
}
|
|
.page-header {
|
margin-bottom: 20px;
|
text-align: center;
|
}
|
|
.header-title {
|
font-size: 20px;
|
font-weight: 600;
|
color: #303133;
|
}
|
|
.loading-container {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 200px;
|
}
|
|
.content {
|
width: 100%;
|
}
|
|
.card {
|
background-color: #fff;
|
border-radius: 12px;
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
|
overflow: hidden;
|
}
|
|
.card-header {
|
background: linear-gradient(145deg, #f0f9ff, #e0f2fe);
|
border-left: 4px solid #409EFF;
|
padding: 20px;
|
}
|
|
.header-info {
|
display: flex;
|
align-items: center;
|
}
|
|
.card-body {
|
padding: 20px;
|
}
|
|
.info-group {
|
display: flex;
|
flex-direction: column;
|
gap: 16px;
|
}
|
|
.info-row {
|
display: flex;
|
gap: 20px;
|
|
&.full-width {
|
flex-direction: column;
|
}
|
}
|
|
.info-item {
|
display: flex;
|
align-items: center;
|
flex: 1;
|
min-width: 0;
|
|
&.status-item {
|
align-items: center;
|
gap: 10px;
|
}
|
}
|
|
.info-label {
|
font-size: 14px;
|
color: #606266;
|
font-weight: 500;
|
min-width: 100px;
|
flex-shrink: 0;
|
}
|
|
.info-value {
|
font-size: 14px;
|
color: #303133;
|
flex: 1;
|
word-break: break-all;
|
}
|
|
.status-badge {
|
display: inline-block;
|
padding: 6px 12px;
|
font-size: 14px;
|
border-radius: 20px;
|
font-weight: 500;
|
|
&.success {
|
background-color: #e6f7ed;
|
color: #36b37e;
|
border: 1px solid #d1fae5;
|
}
|
|
&.danger {
|
background-color: #ffefef;
|
color: #ff4d4f;
|
border: 1px solid #fee2e2;
|
}
|
|
&.pending {
|
background-color: #f5f5f5;
|
color: #999;
|
border: 1px solid #e5e5e5;
|
}
|
}
|
|
.result-container {
|
display: flex;
|
align-items: center;
|
gap: 12px;
|
flex-wrap: wrap;
|
}
|
|
.input-btn {
|
padding: 6px 12px;
|
font-size: 14px;
|
border-radius: 6px;
|
border: 1px solid #409EFF;
|
background-color: #fff;
|
color: #409EFF;
|
cursor: pointer;
|
transition: all 0.2s;
|
|
&:hover {
|
background-color: #409EFF;
|
color: #fff;
|
}
|
|
&:active {
|
transform: scale(0.95);
|
}
|
}
|
|
.result-input-container {
|
display: flex;
|
gap: 8px;
|
align-items: center;
|
}
|
|
.result-btn {
|
padding: 6px 12px;
|
font-size: 14px;
|
border-radius: 6px;
|
border: 1px solid;
|
cursor: pointer;
|
transition: all 0.2s;
|
|
&:disabled {
|
opacity: 0.6;
|
cursor: not-allowed;
|
}
|
|
&.qualified {
|
background-color: #e6f7ed;
|
color: #36b37e;
|
border-color: #36b37e;
|
|
&:hover:not(:disabled) {
|
background-color: #36b37e;
|
color: #fff;
|
}
|
}
|
|
&.unqualified {
|
background-color: #ffefef;
|
color: #ff4d4f;
|
border-color: #ff4d4f;
|
|
&:hover:not(:disabled) {
|
background-color: #ff4d4f;
|
color: #fff;
|
}
|
}
|
|
&.cancel {
|
background-color: #f5f5f5;
|
color: #666;
|
border-color: #ccc;
|
|
&:hover:not(:disabled) {
|
background-color: #ccc;
|
color: #fff;
|
}
|
}
|
|
&:active:not(:disabled) {
|
transform: scale(0.95);
|
}
|
}
|
|
.empty-state {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
padding: 60px 0;
|
color: #909399;
|
}
|
|
.empty-icon {
|
font-size: 64px;
|
margin-bottom: 24px;
|
color: #c0c4cc;
|
}
|
|
.empty-text {
|
font-size: 16px;
|
font-weight: 500;
|
}
|
</style>
|
