<template>
|
<div class="app-container">
|
<!-- 搜索表单 -->
|
<el-form ref="queryForm" :model="queryParams" :inline="true" size="small">
|
<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="custom">
|
<el-input v-model="queryParams.custom" placeholder="请输入客户名称" clearable style="width: 180px" @keyup.enter.native="handleQuery" />
|
</el-form-item>
|
<el-form-item label="领用人" prop="receiveUser">
|
<el-input v-model="queryParams.receiveUser" placeholder="请输入领用人" clearable style="width: 150px" @keyup.enter.native="handleQuery" />
|
</el-form-item>
|
<el-form-item label="时间范围" prop="timeRange">
|
<el-date-picker
|
v-model="timeRange"
|
type="daterange"
|
range-separator="-"
|
start-placeholder="开始时间"
|
end-placeholder="结束时间"
|
value-format="yyyy-MM-dd"
|
style="width: 240px"
|
/>
|
</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-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="handleFlow(row)">流转记录</el-button>
|
</template>
|
</lims-table>
|
|
<!-- 流转记录弹窗 -->
|
<el-dialog title="样品流转记录" :visible.sync="flowVisible" width="70%">
|
<el-timeline>
|
<el-timeline-item
|
v-for="(item, index) in flowData"
|
:key="index"
|
:timestamp="item.operateTime"
|
placement="top"
|
:color="getTimelineColor(item.status)"
|
>
|
<el-card>
|
<h4>{{ item.operateType }}</h4>
|
<p>操作人：{{ item.operator }}</p>
|
<p>状态：{{ item.statusName }}</p>
|
<p v-if="item.remark">备注：{{ item.remark }}</p>
|
</el-card>
|
</el-timeline-item>
|
</el-timeline>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import limsTable from '@/components/Table/lims-table.vue'
|
import { pageSampleRecord, getSampleFlow, exportSampleRecord } from '@/api/report/sampleRecord'
|
|
export default {
|
name: 'SampleRecord',
|
components: { limsTable },
|
data() {
|
return {
|
queryParams: {},
|
timeRange: [],
|
tableData: [],
|
tableLoading: false,
|
page: { total: 0, size: 10, current: 1 },
|
flowVisible: false,
|
flowData: [],
|
tableColumn: [
|
{ label: '样品编号', prop: 'sampleCode', minWidth: '140px' },
|
{ label: '样品名称', prop: 'sampleName', minWidth: '150px' },
|
{ label: '委托编号', prop: 'entrustCode', minWidth: '140px' },
|
{ label: '领用人', prop: 'receiveUser', minWidth: '80px' },
|
{ label: '领用时间', prop: 'receiveTime', minWidth: '160px' },
|
{ label: '领用数量', prop: 'receiveNum', minWidth: '100px' },
|
{ label: '领用用途', prop: 'purpose', minWidth: '120px' },
|
{ label: '客户名称', prop: 'custom', minWidth: '150px' },
|
{ label: '存放位置', prop: 'location', minWidth: '120px' },
|
{ label: '当前状态', prop: 'status', minWidth: '100px', dataType: 'tag', formatData: (val) => this.formatStatus(val), formatType: (val) => this.formatStatusType(val) },
|
{
|
label: '操作',
|
dataType: 'slot',
|
slot: 'operation',
|
minWidth: '100px'
|
}
|
]
|
}
|
},
|
mounted() {
|
this.getList()
|
},
|
methods: {
|
getList() {
|
this.tableLoading = true
|
const params = { ...this.queryParams }
|
if (this.timeRange && this.timeRange.length === 2) {
|
params.startTime = this.timeRange[0]
|
params.endTime = this.timeRange[1]
|
}
|
pageSampleRecord({ ...params, ...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.timeRange = []
|
this.handleQuery()
|
},
|
handleExport() {
|
const params = { ...this.queryParams }
|
if (this.timeRange && this.timeRange.length === 2) {
|
params.startTime = this.timeRange[0]
|
params.endTime = this.timeRange[1]
|
}
|
exportSampleRecord(params).then(res => {
|
this.downloadFile(res, '样品领样记录.xlsx')
|
})
|
},
|
handleFlow(row) {
|
getSampleFlow(row.id).then(res => {
|
this.flowData = res.data || []
|
this.flowVisible = true
|
})
|
},
|
handlePagination({ page, limit }) {
|
this.page.current = page
|
this.page.size = limit
|
this.getList()
|
},
|
formatStatus(val) {
|
const map = { 0: '在库', 1: '已领用', 2: '已归还', 3: '已处理' }
|
return map[val] || ''
|
},
|
formatStatusType(val) {
|
const map = { 0: 'success', 1: 'warning', 2: 'info', 3: 'danger' }
|
return map[val] || ''
|
},
|
getTimelineColor(status) {
|
const map = { 0: '#67C23A', 1: '#E6A23C', 2: '#909399', 3: '#F56C6C' }
|
return map[status] || '#409EFF'
|
},
|
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>
|
