<template>
|
<div class="app-container">
|
<!-- 搜索表单 -->
|
<el-form ref="queryForm" :model="queryParams" :inline="true" size="small">
|
<el-form-item label="生产订单" prop="orderCode">
|
<el-input v-model="queryParams.orderCode" placeholder="请输入生产订单" clearable style="width: 180px" @keyup.enter.native="handleQuery" />
|
</el-form-item>
|
<el-form-item label="批次号" prop="batchCode">
|
<el-input v-model="queryParams.batchCode" placeholder="请输入批次号" clearable style="width: 180px" @keyup.enter.native="handleQuery" />
|
</el-form-item>
|
<el-form-item label="样品编号" prop="sampleCode">
|
<el-input v-model="queryParams.sampleCode" placeholder="请输入样品编号" clearable style="width: 180px" @keyup.enter.native="handleQuery" />
|
</el-form-item>
|
<el-form-item label="样品名称" prop="sampleName">
|
<el-input v-model="queryParams.sampleName" placeholder="请输入样品名称" clearable style="width: 180px" @keyup.enter.native="handleQuery" />
|
</el-form-item>
|
<el-form-item label="检测项目" prop="testItem">
|
<el-input v-model="queryParams.testItem" placeholder="请输入检测项目" clearable style="width: 180px" @keyup.enter.native="handleQuery" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
|
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
<el-button type="success" icon="el-icon-download" @click="handleExport">导出</el-button>
|
<el-button type="warning" icon="el-icon-sort" @click="handleCompare">横向比较</el-button>
|
</el-form-item>
|
</el-form>
|
|
<!-- 数据表格 -->
|
<lims-table
|
:tableData="tableData"
|
:column="tableColumn"
|
:page="page"
|
:tableLoading="tableLoading"
|
@pagination="handlePagination"
|
>
|
<template #operation="{ row }">
|
<el-button type="text" size="mini" @click="handleDetail(row)">查看详情</el-button>
|
</template>
|
</lims-table>
|
|
<!-- 详情弹窗 -->
|
<el-dialog title="检测项目详情" :visible.sync="detailVisible" width="80%" top="5vh">
|
<el-descriptions :column="3" border>
|
<el-descriptions-item label="样品编号">{{ detailData.sampleCode }}</el-descriptions-item>
|
<el-descriptions-item label="样品名称">{{ detailData.sampleName }}</el-descriptions-item>
|
<el-descriptions-item label="委托编号">{{ detailData.entrustCode }}</el-descriptions-item>
|
<el-descriptions-item label="检测项目">{{ detailData.testItem }}</el-descriptions-item>
|
<el-descriptions-item label="检测结果">{{ detailData.testResult }}</el-descriptions-item>
|
<el-descriptions-item label="标准值">{{ detailData.standardValue }}</el-descriptions-item>
|
<el-descriptions-item label="检测人">{{ detailData.tester }}</el-descriptions-item>
|
<el-descriptions-item label="检测时间">{{ detailData.testTime }}</el-descriptions-item>
|
<el-descriptions-item label="检测设备">{{ detailData.deviceName }}</el-descriptions-item>
|
</el-descriptions>
|
<div style="margin-top: 20px;">
|
<h4>检测数据明细</h4>
|
<el-table :data="detailData.dataList" border style="width: 100%">
|
<el-table-column prop="paramName" label="参数名称" />
|
<el-table-column prop="standardValue" label="标准值" />
|
<el-table-column prop="actualValue" label="实测值" />
|
<el-table-column prop="unit" label="单位" />
|
<el-table-column prop="result" label="判定结果">
|
<template slot-scope="scope">
|
<el-tag :type="scope.row.result === '合格' ? 'success' : 'danger'">{{ scope.row.result }}</el-tag>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</el-dialog>
|
|
<!-- 横向比较弹窗 -->
|
<el-dialog title="检测数据横向比较" :visible.sync="compareVisible" width="90%" top="5vh">
|
<el-table :data="compareData" border style="width: 100%" max-height="500">
|
<el-table-column prop="sampleCode" label="样品编号" fixed width="140" />
|
<el-table-column prop="sampleName" label="样品名称" fixed width="150" />
|
<el-table-column v-for="item in compareColumns" :key="item.prop" :prop="item.prop" :label="item.label" min-width="100">
|
<template slot-scope="scope">
|
<span :style="{ color: getCompareColor(scope.row[item.prop], item.standardValue) }">
|
{{ scope.row[item.prop] }}
|
</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import limsTable from '@/components/Table/lims-table.vue'
|
import { pageTestItemData, getTestItemDetail, compareTestItem, exportTestItemData } from '@/api/report/testItemData'
|
|
export default {
|
name: 'TestItemData',
|
components: { limsTable },
|
data() {
|
return {
|
queryParams: {},
|
tableData: [],
|
tableLoading: false,
|
page: { total: 0, size: 10, current: 1 },
|
detailVisible: false,
|
detailData: {},
|
compareVisible: false,
|
compareData: [],
|
compareColumns: [],
|
tableColumn: [
|
{ label: '委托编号', prop: 'entrustCode', minWidth: '140px' },
|
{ label: '生产订单', prop: 'orderCode', minWidth: '140px' },
|
{ label: '批次号', prop: 'batchCode', minWidth: '120px' },
|
{ label: '样品编号', prop: 'sampleCode', minWidth: '140px' },
|
{ label: '样品名称', prop: 'sampleName', minWidth: '150px' },
|
{ label: '检测项目', prop: 'testItem', minWidth: '120px' },
|
{
|
label: '检测结果',
|
prop: 'testResult',
|
minWidth: '100px',
|
dataType: 'tag',
|
formatData: (val) => val === 1 ? '合格' : '不合格',
|
formatType: (val) => val === 1 ? 'success' : 'danger'
|
},
|
{ label: '检测人', prop: 'tester', minWidth: '80px' },
|
{ label: '检测时间', prop: 'testTime', minWidth: '160px' },
|
{ label: '报告编号', prop: 'reportCode', minWidth: '140px' },
|
{
|
label: '操作',
|
dataType: 'slot',
|
slot: 'operation',
|
minWidth: '100px'
|
}
|
]
|
}
|
},
|
mounted() {
|
this.getList()
|
},
|
methods: {
|
getList() {
|
this.tableLoading = true
|
pageTestItemData({ ...this.queryParams, ...this.page })
|
.then(res => {
|
this.tableData = res.data.records || []
|
this.page.total = res.data.total || 0
|
})
|
.finally(() => (this.tableLoading = false))
|
},
|
handleQuery() {
|
this.page.current = 1
|
this.getList()
|
},
|
resetQuery() {
|
this.queryParams = {}
|
this.handleQuery()
|
},
|
handleExport() {
|
exportTestItemData(this.queryParams).then(res => {
|
this.downloadFile(res, '检测项目数据.xlsx')
|
})
|
},
|
handleDetail(row) {
|
getTestItemDetail(row.id).then(res => {
|
this.detailData = res.data || {}
|
this.detailVisible = true
|
})
|
},
|
handleCompare() {
|
compareTestItem(this.queryParams).then(res => {
|
this.compareData = res.data.dataList || []
|
this.compareColumns = (res.data.columns || []).map(col => ({
|
prop: col.field,
|
label: col.name,
|
standardValue: col.standardValue
|
}))
|
this.compareVisible = true
|
})
|
},
|
handlePagination({ page, limit }) {
|
this.page.current = page
|
this.page.size = limit
|
this.getList()
|
},
|
getCompareColor(value, standard) {
|
if (!standard) return ''
|
return value >= standard.min && value <= standard.max ? '' : '#F56C6C'
|
},
|
downloadFile(data, fileName) {
|
const blob = new Blob([data])
|
const url = window.URL.createObjectURL(blob)
|
const link = document.createElement('a')
|
link.href = url
|
link.download = fileName
|
link.click()
|
window.URL.revokeObjectURL(url)
|
}
|
}
|
}
|
</script>
|
