<template>
|
<view class="container">
|
<!-- 页面标题 -->
|
<view class="page-header">
|
<text class="page-title">检验详情</text>
|
</view>
|
|
<!-- 基本信息模块 (2-1排列) -->
|
<view class="module-card mb-2">
|
<view class="module-header">
|
<text class="module-title">基本信息</text>
|
</view>
|
<view class="form-grid">
|
<view class="form-group col-6">
|
<label class="form-label">检验单号:</label>
|
<input class="form-input" disabled="true" type="text" v-model="releaseNo" />
|
</view>
|
<view class="form-group col-6">
|
<label class="form-label">项目名称:</label>
|
<input class="form-input" disabled="true" type="text" v-model="formData.projName" />
|
</view>
|
<view class="form-group col-12">
|
<label class="form-label">质量要求:</label>
|
<input class="form-input quality-requirement" disabled="true" type="text" v-model="formData.itemMod" />
|
</view>
|
</view>
|
</view>
|
|
<!-- 检验设置模块 (3个字段) -->
|
<view class="module-card mb-2">
|
<view class="module-header">
|
<text class="module-title">检验设置</text>
|
</view>
|
<view class="form-grid">
|
<view class="form-group col-4">
|
<label class="form-label">检验方法:</label>
|
<input class="form-input" disabled="true" type="text" v-model="formData.inspectionMethod" />
|
</view>
|
<view class="form-group col-4">
|
<label class="form-label">使用仪表:</label>
|
<input class="form-input" disabled="true" type="text" v-model="formData.usingInstruments" />
|
</view>
|
<view class="form-group col-4">
|
<label class="form-label">检验数:</label>
|
<input class="form-input" disabled="true" type="text" v-model="formData.levelNum" />
|
</view>
|
</view>
|
</view>
|
|
<!-- 数值范围模块 (3个字段) -->
|
<view class="module-card mb-2">
|
<view class="module-header">
|
<text class="module-title">数值范围</text>
|
</view>
|
<view class="form-grid">
|
<view class="form-group col-4">
|
<label class="form-label">下限:</label>
|
<input class="form-input" disabled="true" type="text" v-model="formData.minValue" />
|
</view>
|
<view class="form-group col-4">
|
<label class="form-label">标准值:</label>
|
<input class="form-input" disabled="true" type="text" v-model="formData.standardValue" />
|
</view>
|
<view class="form-group col-4">
|
<label class="form-label">上限:</label>
|
<input class="form-input" disabled="true" type="text" v-model="formData.maxValue" />
|
</view>
|
</view>
|
</view>
|
|
<!-- 标准规范模块 (4列布局) -->
|
<view class="module-card mb-2">
|
<view class="module-header">
|
<text class="module-title">标准规范</text>
|
</view>
|
<view class="form-grid">
|
<view class="form-group col-3">
|
<label class="form-label">检验标准编码:</label>
|
<input class="form-input" disabled="true" type="text" v-model="formData.qsCode" />
|
</view>
|
<view class="form-group col-3">
|
<label class="form-label">检验标准名称:</label>
|
<input class="form-input" disabled="true" type="text" v-model="formData.qsName" />
|
</view>
|
<view class="form-group col-3">
|
<label class="form-label">检验水平:</label>
|
<input class="form-input" disabled="true" type="text" v-model="formData.fcheckLevel" />
|
</view>
|
<view class="form-group col-3">
|
<label class="form-label">接收水平:</label>
|
<input class="form-input" disabled="true" type="text" v-model="formData.facLevel" />
|
</view>
|
</view>
|
</view>
|
|
<!-- 判定标准模块 (4列布局) -->
|
<view class="module-card mb-2">
|
<view class="module-header">
|
<text class="module-title">判定标准</text>
|
</view>
|
<view class="form-grid">
|
<view class="form-group col-3">
|
<label class="form-label">AC数:</label>
|
<input class="form-input" disabled="true" type="text" v-model="formData.freQty - 1" />
|
</view>
|
<view class="form-group col-3">
|
<label class="form-label">RE数:</label>
|
<input class="form-input" disabled="true" type="text" v-model="formData.freQty" />
|
</view>
|
<view class="form-group col-3">
|
<label class="form-label">不合格数:</label>
|
<input class="form-input" disabled="true" type="text" v-model="formData.unqualified" />
|
</view>
|
<view class="form-group col-3">
|
<label class="form-label">预览结果:</label>
|
<!-- 动态样式绑定 -->
|
<input
|
class="form-input"
|
disabled="true"
|
type="text"
|
v-model="formData.result"
|
:class="{ 'result-pass': formData.result === '合格', 'result-fail': formData.result === '不合格' }"
|
/>
|
</view>
|
</view>
|
</view>
|
|
<!-- 检验结果模块 (1列3行) -->
|
<view class="module-card">
|
<view class="module-header">
|
<text class="module-title">检验结果</text>
|
</view>
|
<view class="form-grid">
|
<view class="form-group col-12">
|
<label class="form-label">不合格描述:</label>
|
<input class="form-input" disabled="true" type="text" v-model="formData.remarks" />
|
</view>
|
<view class="form-group col-12 warning-tip">
|
<label class="form-label">警示提示</label>
|
<text class="tip-text">没有最大值和最小值时填写0（未通过检验）或1（通过检验）</text>
|
</view>
|
<view class="form-group col-12">
|
<label class="form-label">检测结果:</label>
|
<input class="form-input result-input" type="number" v-model="formData.fcheckResu" />
|
</view>
|
</view>
|
<button type="primary" v-if="tableData.length < formData.levelNum" @click="submit" class="submit-btn">
|
<text class="btn-text">保存</text>
|
</button>
|
</view>
|
|
<!-- 图片预览区域 -->
|
<view class="image-container card" v-if="isShowImg">
|
<img :src="base64Image" style="width:100%; border-radius: 8px;" @click="previewImage" class="preview-image" />
|
</view>
|
|
<!-- 表格区域 -->
|
<view class="table-container card">
|
<view class="table-header">
|
<text class="section-title">检验记录</text>
|
</view>
|
<uni-table ref="table" border emptyText="暂无更多数据" class="custom-table">
|
<uni-tr class="table-header-row">
|
<uni-th align="center" class="th">编号</uni-th>
|
<uni-th align="center" class="th">判定标识</uni-th>
|
<uni-th align="center" class="th">检验结果</uni-th>
|
<uni-th width="150" align="center" class="th">操作</uni-th>
|
</uni-tr>
|
<uni-tr v-for="(item, index) in tableData" :key="index" class="table-row"
|
:class="{ 'row-success': item.fcheckResu == 1, 'row-warning': item.fcheckResu == 0 }"
|
@mouseenter="highlightRow(index)" @mouseleave="unhighlightRow(index)">
|
<uni-td align="center">
|
{{ index + 1 }}
|
</uni-td>
|
<uni-td align="center">
|
<input class="form-input" disabled="true" type="text" v-model="item.fstand" />
|
</uni-td>
|
<uni-td align="center">
|
<input class="form-input" disabled="true" type="text" v-model="item.fcheckResu" />
|
</uni-td>
|
<uni-td>
|
<view class="action-buttons">
|
<button type="warn" v-if="isNumber" @click="toDetail(item)" class="action-btn">
|
<text class="btn-text">修改</text>
|
</button>
|
<button type="warn" v-if="!isNumber" @click="numberEdit(item)" class="action-btn">
|
<text class="btn-text">{{ editResult(item.fcheckResu) }}</text>
|
</button>
|
</view>
|
</uni-td>
|
</uni-tr>
|
</uni-table>
|
</view>
|
|
<!-- 操作按钮 -->
|
<view class="action-buttons-container">
|
<button type="warn" @click="saveRemarks" class="action-btn">
|
<text class="btn-text">添加不合格描述</text>
|
</button>
|
</view>
|
|
<!-- 修改检验结果弹出层 -->
|
<view v-if="showPopup" class="overlay">
|
<view class="popup card">
|
<view class="popup-header">
|
<text class="popup-title">修改检验结果</text>
|
<button @click="showPopup = !showPopup" class="close-btn">
|
<text class="btn-text">×</text>
|
</button>
|
</view>
|
<form :modelValue="editData">
|
<view class="form-group">
|
<label class="form-label">检验结果:</label>
|
<input class="form-input" type="text" v-model="editData.fcheckResu" />
|
</view>
|
<view class="popup-actions">
|
<button type="warn" @click="eidt" class="action-btn">
|
<text class="btn-text">修改</text>
|
</button>
|
<button @click="showPopup = !showPopup" class="action-btn btn-outline">
|
<text class="btn-text">取消</text>
|
</button>
|
</view>
|
</form>
|
</view>
|
</view>
|
|
<!-- 修改不合格描述弹出层 -->
|
<view v-if="remarksPopup" class="overlay">
|
<view class="popup card">
|
<view class="popup-header">
|
<text class="popup-title">修改不合格描述</text>
|
<button @click="remarksPopup = !remarksPopup" class="close-btn">
|
<text class="btn-text">×</text>
|
</button>
|
</view>
|
<form>
|
<view class="form-group">
|
<label class="form-label">不合格描述:</label>
|
<input class="form-input" type="text" v-model="remarks" />
|
</view>
|
<view class="popup-actions">
|
<button type="warn" @click="editRemarks" class="action-btn">
|
<text class="btn-text">修改</text>
|
</button>
|
<button @click="remarksPopup = !remarksPopup" class="action-btn btn-outline">
|
<text class="btn-text">取消</text>
|
</button>
|
</view>
|
</form>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
formData: {},
|
isNumber: false,
|
checkItem: "",
|
id: 0,
|
gid: 0,
|
billNo: "",
|
showPopup: false,
|
editData: {},
|
tableData: [],
|
isShowImg: false,
|
base64Image: "",
|
remarks: "",
|
remarksPopup: false,
|
releaseNo: ""
|
}
|
},
|
methods: {
|
previewImage() {
|
uni.previewImage({
|
urls: [this.base64Image],
|
});
|
},
|
editResult(fcheckResu) {
|
if (fcheckResu == '1') {
|
return "改为不合格";
|
} else {
|
return "改为合格";
|
}
|
},
|
submit() {
|
let count = this.formData.levelNum;
|
let fstand = "√";
|
if (this.formData.maxValue && this.formData.minValue) {
|
if (!this.formData.fcheckResu) {
|
this.$showMessage("请输入检验值");
|
return;
|
}
|
if (this.formData.fcheckResu >= this.formData.minValue && this.formData.fcheckResu <= this.formData.maxValue) {
|
fstand = "√"
|
} else {
|
fstand = "×";
|
}
|
count = 1;
|
} else {
|
if (!this.formData.fcheckResu) {
|
this.formData.fcheckResu = 1
|
}
|
if (this.formData.fcheckResu == 0 || this.formData.fcheckResu == 1) {
|
this.formData.isPass = this.formData.fcheckResu
|
} else {
|
this.$showMessage("无标准值时，检验结果只能为0或1!");
|
return;
|
}
|
count = count - this.tableData.length;
|
}
|
this.formData.updater = this.$loginInfo.account;
|
this.$post({
|
url: "/RKJ/SetQSItemDetail",
|
data: {
|
pid: this.id,
|
gid: this.gid,
|
fstand: fstand,
|
fcheckResu: this.formData.fcheckResu,
|
updateBy: this.formData.updater,
|
count: count
|
}
|
}).then(res => {
|
this.formData.fcheckResu = null;
|
this.$showMessage("保存成功");
|
this.refreshResult();
|
})
|
},
|
refreshResult() {
|
this.$post({
|
url: "/RKJ/getXjDetail02ById",
|
data: {
|
id: this.id,
|
releaseNo: this.releaseNo
|
}
|
}).then(res => {
|
this.formData = res.data.tbBillList.itemXj01;
|
this.tableData = res.data.tbBillList.itemXj02s;
|
if (this.formData.imageData) {
|
this.isShowImg = true;
|
this.base64Image = 'data:image/jpeg;base64,' + this.formData.imageData;
|
}
|
if (this.formData.maxValue && this.formData.minValue && this.formData.standardValue) {
|
this.isNumber = true;
|
}
|
})
|
},
|
toDetail(item) {
|
this.showPopup = !this.showPopup;
|
this.editData = item;
|
},
|
eidt() {
|
if (!this.editData.fcheckResu) {
|
this.$showMessage("请输入检验结果");
|
return;
|
}
|
if (this.editData.fcheckResu == this.formData.fcheckResu) {
|
this.$showMessage("无需修改");
|
return;
|
}
|
let fstand = "√";
|
if (this.formData.maxValue && this.formData.minValue) {
|
if (this.editData.fcheckResu >= this.formData.minValue && this.editData.fcheckResu <= this.formData.maxValue) {
|
this.editData.isPass = 1;
|
} else {
|
this.editData.isPass = 0;
|
fstand = "×";
|
}
|
} else {
|
if (this.editData.fcheckResu == 0 || this.editData.fcheckResu == 1) {
|
fstand = this.editData.fcheckResu == 1 ? "√" : "×";
|
} else {
|
this.$showMessage("无标准值时，检验结果只能为0或1!");
|
return;
|
}
|
}
|
this.editData.updater = this.$loginInfo.account;
|
this.$post({
|
url: "/RKJ/UpdateQSItemDetail",
|
data: {
|
id: this.editData.id,
|
pid: this.id,
|
gid: this.gid,
|
fstand: fstand,
|
fcheckResu: this.editData.fcheckResu,
|
updateBy: this.editData.updater,
|
}
|
}).then(res => {
|
this.showPopup = !this.showPopup;
|
this.$showMessage("修改成功");
|
this.refreshResult();
|
})
|
},
|
numberEdit(item) {
|
let fstand = item.fcheckResu == '1' ? "×" : "√";
|
let fcheckResu = item.fcheckResu == '1' ? 0 : 1;
|
|
this.$post({
|
url: "/RKJ/UpdateQSItemDetail",
|
data: {
|
id: item.id,
|
pid: item.pid,
|
gid: item.gid,
|
fstand: fstand,
|
fcheckResu: fcheckResu,
|
updateBy: this.$loginInfo.account,
|
}
|
}).then(res => {
|
this.$showMessage("修改成功");
|
this.refreshResult();
|
})
|
},
|
saveRemarks() {
|
this.remarksPopup = !this.remarksPopup;
|
this.remarks = this.formData.remarks;
|
},
|
editRemarks() {
|
if (!this.remarks) {
|
this.$showMessage("请输入不合格描述");
|
return;
|
}
|
this.$post({
|
url: "/RKJ/saveRemarksPid",
|
data: {
|
pid: this.formData.id,
|
remarks: this.remarks
|
}
|
}).then(res => {
|
if (res.data.tbBillList > 0) {
|
this.formData.remarks = this.remarks;
|
this.remarksPopup = !this.remarksPopup;
|
this.$showMessage("保存成功");
|
}
|
})
|
},
|
highlightRow(index) {
|
this.tableData[index].isHighlighted = true;
|
},
|
unhighlightRow(index) {
|
this.tableData[index].isHighlighted = false;
|
}
|
},
|
onLoad(options) {
|
let params = options;
|
this.id = params["id"];
|
this.billNo = params["billNo"];
|
this.gid = params["gid"];
|
this.releaseNo = params["releaseNo"];
|
this.refreshResult();
|
}
|
};
|
</script>
|
|
<style>
|
/* 基础样式 */
|
.container {
|
padding: 8px;
|
background-color: #f8fafc;
|
}
|
|
/* 页面标题 */
|
.page-header {
|
margin-bottom: 8px;
|
padding-bottom: 4px;
|
border-bottom: 1px solid #e2e8f0;
|
}
|
|
.page-title {
|
font-size: 18px;
|
font-weight: 700;
|
color: #1e293b;
|
}
|
|
/* 模块卡片样式 */
|
.module-card {
|
background-color: #fff;
|
border-radius: 8px;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
padding: 12px;
|
margin-bottom: 8px;
|
border: none;
|
transition: transform 0.2s, box-shadow 0.2s;
|
}
|
|
.module-card:hover {
|
transform: translateY(-1px);
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
}
|
|
.mb-2 {
|
margin-bottom: 8px;
|
}
|
|
.module-header {
|
margin-bottom: 8px;
|
padding-bottom: 4px;
|
border-bottom: 1px solid #e2e8f0;
|
}
|
|
.module-title {
|
font-size: 16px;
|
font-weight: 600;
|
color: #1e293b;
|
}
|
|
/* 表单网格布局 */
|
.form-grid {
|
display: grid;
|
grid-template-columns: repeat(12, 1fr);
|
gap: 8px;
|
}
|
|
.form-group {
|
display: flex;
|
flex-direction: column;
|
border: 1px solid #e2e8f0;
|
border-radius: 6px;
|
padding: 8px;
|
background-color: #f8fafc;
|
transition: all 0.2s;
|
}
|
|
.form-group:hover {
|
border-color: #94a3b8;
|
transform: translateY(-1px);
|
}
|
|
.col-3 { grid-column: span 3; }
|
.col-4 { grid-column: span 4; }
|
.col-6 { grid-column: span 6; }
|
.col-12 { grid-column: span 12; }
|
|
.form-label {
|
font-size: 14px;
|
color: #475569;
|
margin-bottom: 2px;
|
font-weight: 500;
|
}
|
|
.form-input {
|
padding: 4px 5px; /* 内边距缩小一半 */
|
border: 1px solid #cbd5e1;
|
border-radius: 4px;
|
font-size: 14px;
|
color: #1e293b;
|
background-color: rgba(59, 130, 246, 0.05); /* 若隐若现的蓝色背景 */
|
height: 24px; /* 高度缩小约1/3，视觉上接近一半 */
|
transition: border-color 0.2s;
|
}
|
|
.form-input:disabled {
|
background-color: #f1f5f9;
|
color: #94a3b8;
|
cursor: not-allowed;
|
}
|
|
.quality-requirement {
|
min-width: 0;
|
flex-grow: 1;
|
}
|
|
/* 合格/不合格结果样式 */
|
.result-pass {
|
background-color: rgba(16, 185, 129, 0.1) !important; /* 浅绿色背景 */
|
border-color: #10b981 !important; /* 绿色边框 */
|
color: #059669 !important; /* 深绿色文字 */
|
}
|
|
.result-fail {
|
background-color: rgba(239, 68, 68, 0.1) !important; /* 浅红色背景 */
|
border-color: #ef4444 !important; /* 红色边框 */
|
color: #dc2626 !important; /* 深红色文字 */
|
}
|
|
/* 警示提示样式 */
|
.warning-tip {
|
background-color: #fef3c7;
|
border-color: #fbbf24;
|
}
|
|
.tip-text {
|
font-size: 12px;
|
color: #92400e;
|
line-height: 1.4;
|
}
|
|
/* 结果输入框样式 */
|
.result-input {
|
border-color: #3b82f6;
|
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
|
}
|
|
/* 按钮样式 */
|
.submit-btn {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding: 8px 16px;
|
border-radius: 18px;
|
font-size: 14px;
|
font-weight: 500;
|
background-color: #3b82f6;
|
color: white;
|
width: fit-content;
|
margin-top: 8px;
|
border: none;
|
cursor: pointer;
|
transition: all 0.2s ease;
|
box-shadow: 0 3px 8px rgba(59, 130, 246, 0.15);
|
}
|
|
.submit-btn:hover {
|
background-color: #2563eb;
|
transform: translateY(-1px);
|
box-shadow: 0 4px 10px rgba(59, 130, 246, 0.2);
|
}
|
|
/* 表格样式 */
|
.table-container {
|
margin-bottom: 8px;
|
}
|
|
.custom-table {
|
width: 100%;
|
font-size: 12px;
|
border-collapse: collapse;
|
}
|
|
.table-header-row {
|
background-color: #3b82f6;
|
color: white;
|
}
|
|
.th {
|
padding: 8px 10px;
|
text-align: center;
|
font-weight: 500;
|
}
|
|
.table-row td {
|
padding: 8px 10px;
|
border: 1px solid #e2e8f0;
|
}
|
|
.row-success td {
|
background-color: #ecfdf5;
|
}
|
|
.row-warning td {
|
background-color: #fef3c7;
|
}
|
|
/* 操作按钮 */
|
.action-buttons-container {
|
display: flex;
|
justify-content: center;
|
margin: 12px 0;
|
}
|
|
.action-btn {
|
padding: 8px 20px;
|
border-radius: 18px;
|
font-size: 14px;
|
font-weight: 500;
|
background-color: #f59e0b;
|
color: white;
|
border: none;
|
cursor: pointer;
|
transition: all 0.2s ease;
|
box-shadow: 0 3px 8px rgba(245, 158, 11, 0.15);
|
margin: 0 6px;
|
}
|
|
.action-btn:hover {
|
background-color: #d97706;
|
transform: translateY(-1px);
|
box-shadow: 0 4px 10px rgba(245, 158, 11, 0.2);
|
}
|
|
/* 弹出层样式 */
|
.overlay {
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background-color: rgba(0, 0, 0, 0.5);
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
z-index: 1000;
|
}
|
|
.popup {
|
max-width: 90%;
|
max-height: 90vh;
|
overflow-y: auto;
|
border-radius: 10px;
|
background-color: white;
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
|
animation: popIn 0.2s ease;
|
}
|
|
@keyframes popIn {
|
from { transform: scale(0.95); opacity: 0; }
|
to { transform: scale(1); opacity: 1; }
|
}
|
|
.popup-header {
|
padding: 12px 16px;
|
border-bottom: 1px solid #e2e8f0;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.popup-title {
|
font-size: 16px;
|
font-weight: 600;
|
color: #1e293b;
|
}
|
|
.close-btn {
|
background: none;
|
border: none;
|
font-size: 20px;
|
cursor: pointer;
|
color: #64748b;
|
}
|
|
.close-btn:hover {
|
color: #1e293b;
|
}
|
|
.popup-actions {
|
display: flex;
|
justify-content: flex-end;
|
margin-top: 16px;
|
padding: 0 16px 16px;
|
}
|
|
.btn-outline {
|
background-color: white;
|
color: #64748b;
|
border: 1px solid #e2e8f0;
|
box-shadow: none;
|
}
|
|
.btn-outline:hover {
|
background-color: #f8fafc;
|
}
|
|
/* 图片预览 */
|
.image-container {
|
text-align: center;
|
padding: 12px 0;
|
}
|
|
.preview-image {
|
cursor: pointer;
|
border-radius: 8px;
|
transition: transform 0.2s ease;
|
max-height: 200px;
|
object-fit: contain;
|
}
|
|
.preview-image:hover {
|
transform: scale(1.02);
|
}
|
|
/* 响应式布局 */
|
@media (max-width: 768px) {
|
.form-grid {
|
grid-template-columns: repeat(6, 1fr);
|
gap: 6px;
|
}
|
|
.col-3 { grid-column: span 3; }
|
.col-4 { grid-column: span 2; }
|
.col-6 { grid-column: span 6; }
|
.col-12 { grid-column: span 6; }
|
|
.module-card {
|
padding: 10px;
|
border-radius: 6px;
|
}
|
|
.page-title {
|
font-size: 16px;
|
}
|
|
.module-title {
|
font-size: 14px;
|
}
|
|
.form-label, .form-input, .th, .table-row td, .action-btn, .submit-btn {
|
font-size: 12px;
|
}
|
|
.form-input {
|
height: 22px;
|
padding: 3px 4px;
|
}
|
|
.submit-btn, .action-btn {
|
padding: 6px 16px;
|
border-radius: 16px;
|
}
|
}
|
</style>
|
