<!-- 使用记录 -->
|
<template>
|
<div>
|
<div class="search">
|
<el-form :model="search" ref="search" size="small" :inline="true">
|
<el-form-item label="样品编号">
|
<el-input v-model="search.sampleCode" clearable placeholder="请输入" size="small"
|
@keyup.enter="getTableList()"></el-input>
|
</el-form-item>
|
<el-form-item label="设备编号">
|
<el-input v-model="search.managementNumber" clearable placeholder="请输入" size="small"
|
@keyup.enter="getTableList()"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button size="small" type="primary" @click="getTableList()">查询</el-button>
|
<el-button size="small" @click="resetSearch">重置</el-button>
|
</el-form-item>
|
</el-form>
|
<div>
|
<el-button :loading="outLoading" size="small" type="primary" @click="openHandleOut">导 出</el-button>
|
</div>
|
</div>
|
<div>
|
<el-table ref="Recordtable" :data="formParamList" height="calc(100vh - 25em)"
|
v-loading="tableLoading" border>
|
<el-table-column label="序号" type="index" width="60" align="center">
|
<template #default="scope">
|
<span>{{ (search.current - 1) * search.size + scope.$index + 1 }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="设备名称" min-width="140" prop="deviceName" show-overflow-tooltip />
|
<el-table-column label="设备型号" min-width="120" prop="specificationModel" show-overflow-tooltip />
|
<el-table-column label="设备编号" min-width="130" prop="managementNumber" />
|
<el-table-column label="使用日期" width="110" align="center">
|
<template #default="scope">
|
{{ formatDateCell(scope.row.useStartDate) }}
|
</template>
|
</el-table-column>
|
<el-table-column label="样品编号" min-width="150" prop="sampleCode">
|
<template #default="scope">
|
<span>{{ scope.row.sampleCode }}</span>
|
<el-tooltip v-if="scope.row.orderCode" :content="'关联原始记录：' + scope.row.orderCode" placement="top">
|
<lims-icon class="link-icon" name="el-icon-link"></lims-icon>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<el-table-column label="时间（24小时制）" align="center">
|
<el-table-column label="开始" width="90" align="center">
|
<template #default="scope">{{ formatTimeCell(scope.row.useStartDate) }}</template>
|
</el-table-column>
|
<el-table-column label="结束" width="90" align="center">
|
<template #default="scope">{{ formatTimeCell(scope.row.useEndDate) }}</template>
|
</el-table-column>
|
</el-table-column>
|
<el-table-column label="设备状况" align="center">
|
<el-table-column label="使用前" width="80" align="center">
|
<template #default="scope">{{ formatStatus(scope.row.useBefore) }}</template>
|
</el-table-column>
|
<el-table-column label="使用后" width="80" align="center">
|
<template #default="scope">{{ formatStatus(scope.row.useAfter) }}</template>
|
</el-table-column>
|
</el-table-column>
|
<el-table-column label="环境条件" align="center">
|
<el-table-column label="℃" width="80" align="center" prop="temperature" />
|
<el-table-column label="%RH" width="80" align="center" prop="humidity" />
|
</el-table-column>
|
<el-table-column label="使用人" width="100" prop="usePerson" />
|
<el-table-column label="备注" min-width="140" prop="remark" show-overflow-tooltip />
|
<el-table-column fixed="right" label="操作" width="150" align="center">
|
<template #default="scope">
|
<el-button size="small" link type="primary" @click="showDetailsDialog('edit', scope.row)">编辑</el-button>
|
<el-button size="small" link type="primary" @click="showDetailsDialog('view', scope.row)">查看</el-button>
|
<el-button size="small" link type="primary" @click="handleDeleteClick(scope.$index, scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-pagination :current-page="search.current" :page-size="search.size" :page-sizes="[10, 20, 30, 50, 100]"
|
:total="search.total" layout="->,total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
|
@current-change="handleCurrentChange" background>
|
</el-pagination>
|
</div>
|
<el-dialog v-model="dialogVisible" title="仪器设备运行记录" top="5vh" width="70%">
|
<el-form ref="form" :model="form" label-width="105px">
|
<el-row :gutter="16">
|
<el-col :span="8">
|
<el-form-item label="设备名称:">
|
<el-input v-model="form.deviceName" disabled size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="设备型号:">
|
<el-input v-model="form.specificationModel" disabled size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="设备编号:">
|
<el-input v-model="form.managementNumber" disabled size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item :rules="[{ required: true, message: '请选择使用日期', trigger: 'change' }]" label="使用日期:"
|
prop="useDate">
|
<el-date-picker v-model="form.useDate" :disabled="operationType === 'view'" format="YYYY-MM-DD"
|
placeholder="选择使用日期" size="small" style="width: 100%" type="date" value-format="YYYY-MM-DD"
|
:disabled-date="disabledDate">
|
</el-date-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item :rules="[{ required: true, message: '请输入样品编号', trigger: 'blur' }]" label="样品编号:"
|
prop="sampleCode">
|
<el-input v-model="form.sampleCode" :disabled="operationType === 'view'" size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item :rules="[{ required: true, message: '请选择开始时间', trigger: 'change' }]" label="开始时间:"
|
prop="useStartTime">
|
<el-time-picker v-model="form.useStartTime" :disabled="operationType === 'view'" format="HH:mm"
|
placeholder="选择开始时间" size="small" style="width: 100%" value-format="HH:mm:ss">
|
</el-time-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item :rules="[{ required: true, message: '请选择结束时间', trigger: 'change' }]" label="结束时间:"
|
prop="useEndTime">
|
<el-time-picker v-model="form.useEndTime" :disabled="operationType === 'view'" format="HH:mm"
|
placeholder="选择结束时间" size="small" style="width: 100%" value-format="HH:mm:ss">
|
</el-time-picker>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item :rules="[{ required: true, message: '请选择使用前状态', trigger: 'change' }]" label="使用前:"
|
prop="useBefore">
|
<el-radio-group v-model="form.useBefore" :disabled="operationType === 'view'">
|
<el-radio :value="1">良好</el-radio>
|
<el-radio :value="0">异常</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item :rules="[{ required: true, message: '请选择使用后状态', trigger: 'change' }]" label="使用后:"
|
prop="useAfter">
|
<el-radio-group v-model="form.useAfter" :disabled="operationType === 'view'">
|
<el-radio :value="1">良好</el-radio>
|
<el-radio :value="0">异常</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="环境温度:">
|
<el-input v-model="form.temperature" :disabled="operationType === 'view'" placeholder="请输入温度" size="small">
|
<template #append>℃</template>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="环境湿度:">
|
<el-input v-model="form.humidity" :disabled="operationType === 'view'" placeholder="请输入湿度" size="small">
|
<template #append>%RH</template>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item :rules="[{ required: true, message: '请选择使用人', trigger: 'change' }]" label="使用人:"
|
prop="usePersonId">
|
<el-select @change="usePersonName" v-model="form.usePersonId" :disabled="operationType === 'view'"
|
placeholder="请选择" size="small" style="width: 100%">
|
<el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12" v-if="form.orderCode">
|
<el-form-item label="关联原始记录:">
|
<el-input v-model="form.orderCode" disabled size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="备注:">
|
<el-input v-model="form.remark" :disabled="operationType === 'view'" type="textarea"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<template #footer><span class="dialog-footer">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button v-if="operationType !== 'view'" type="primary" @click="saveRecord">确 定</el-button>
|
</span></template>
|
</el-dialog>
|
<el-dialog v-model="ratifyDialog" title="导出" width="30%" @close="ratifyDialog = false, exportDate = ''">
|
<span>时间：
|
<el-date-picker v-model="exportDate" format="YYYY-MM" placeholder="选择月份" size="small" style="width:100%"
|
type="month" value-format="YYYY-MM">
|
</el-date-picker>
|
</span>
|
<template #footer><span class="dialog-footer">
|
<el-button @click="ratifyDialog = false, exportDate = ''">取 消</el-button>
|
<el-button :loading="outLoading" type="primary" @click="handleDown">导 出</el-button>
|
</span></template>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import {
|
deviceRecordPage,
|
exportUseRecord,
|
updateDeviceRecord,
|
deleteDeviceRecord,
|
} from '@/api/cnas/resourceDemand/device.js'
|
import { selectUserCondition } from "@/api/business/inspectionTask";
|
import { formatDateOnly as toDateOnly } from './dateFormat';
|
import { saveBlobOrShowError } from '@/utils/saveBlob'
|
import dayjs from 'dayjs'
|
|
const today = () => {
|
const now = new Date()
|
return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
|
}
|
|
const defaultForm = () => ({
|
id: null,
|
deviceId: '',
|
deviceName: '',
|
specificationModel: '',
|
managementNumber: '',
|
insOrderId: null,
|
orderCode: '',
|
sampleCode: '',
|
useDate: today(),
|
useStartTime: '',
|
useEndTime: '',
|
temperature: '',
|
humidity: '',
|
useBefore: 1,
|
useAfter: 1,
|
abnormal: '',
|
usePersonId: '',
|
usePerson: '',
|
remark: '',
|
})
|
export default {
|
data() {
|
return {
|
search: {
|
size: 20,
|
current: 1,
|
total: 0,
|
sampleCode: '',
|
managementNumber: ''
|
},
|
outLoading: false,
|
ratifyDialog: false,
|
exportDate: '',
|
userList: [],
|
form: defaultForm(),
|
dialogVisible: false,
|
operationType: '',
|
formParamList: [],
|
tableLoading: false
|
}
|
},
|
mounted() {
|
this.getTableList();
|
},
|
methods: {
|
formatDateCell(value) {
|
return toDateOnly(value)
|
},
|
formatTimeCell(value) {
|
if (!value) return ''
|
const date = dayjs(String(value).replace('T', ' '))
|
return date.isValid() ? date.format('HH:mm') : ''
|
},
|
formatStatus(value) {
|
if (value === 1) return '良好'
|
if (value === 0) return '异常'
|
return ''
|
},
|
// element-plus 的 el-date-picker 没有 picker-options，改成 :disabled-date
|
disabledDate(time) {
|
return time.getTime() > Date.now();
|
},
|
handleSizeChange(val) {
|
this.search.size = val
|
this.getTableList();
|
},
|
handleCurrentChange(val) {
|
this.search.current = val
|
this.getTableList();
|
},
|
resetSearch() {
|
this.search = {
|
size: 20,
|
current: 1,
|
total: 0,
|
sampleCode: '',
|
managementNumber: ''
|
}
|
this.getTableList();
|
},
|
async getTableList() {
|
this.tableLoading = true
|
await deviceRecordPage({
|
...this.search
|
}).then(res => {
|
this.tableLoading = false
|
if (res.code == 200) {
|
this.formParamList = res.data.records
|
this.search.total = res.data.total
|
}
|
}).catch(err => {
|
this.tableLoading = false
|
})
|
},
|
// 打开导出弹框选择编制人、批准人
|
openHandleOut() {
|
this.ratifyDialog = true
|
},
|
//导出
|
handleDown() {
|
this.outLoading = true
|
exportUseRecord({
|
sampleCode: this.search.sampleCode,
|
managementNumber: this.search.managementNumber,
|
exportDate: this.exportDate
|
}).then(res => {
|
this.outLoading = false
|
saveBlobOrShowError(res, '仪器设备运行记录.docx', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document')
|
}).catch(() => {
|
this.outLoading = false
|
})
|
},
|
resetForm() {
|
this.form = defaultForm()
|
},
|
usePersonName(value) {
|
const index = this.userList.findIndex(item => item.id === value)
|
if (index > -1) {
|
this.form.usePerson = this.userList[index].name
|
}
|
},
|
//保存修改
|
saveRecord() {
|
this.$refs.form.validate((valid) => {
|
if (!valid) {
|
return
|
}
|
if (this.form.useStartTime >= this.form.useEndTime) {
|
this.$message.error('结束时间必须晚于开始时间')
|
return
|
}
|
const payload = {
|
id: this.form.id || undefined,
|
deviceId: this.form.deviceId,
|
insOrderId: this.form.insOrderId || undefined,
|
sampleCode: this.form.sampleCode,
|
temperature: this.form.temperature,
|
humidity: this.form.humidity,
|
useBefore: this.form.useBefore,
|
useAfter: this.form.useAfter,
|
abnormal: this.form.abnormal,
|
usePersonId: this.form.usePersonId,
|
usePerson: this.form.usePerson,
|
remark: this.form.remark,
|
useStartDate: `${this.form.useDate} ${this.form.useStartTime}`,
|
useEndDate: `${this.form.useDate} ${this.form.useEndTime}`,
|
}
|
updateDeviceRecord(payload).then(res => {
|
if (res.code == 200) {
|
this.$message.success('修改成功')
|
this.getTableList()
|
this.dialogVisible = false
|
}
|
})
|
});
|
},
|
//查看详情
|
showDetailsDialog(type, row) {
|
this.operationType = type;
|
this.dialogVisible = true;
|
this.getUserList()
|
// 复制一份再编辑，避免直接改动表格里的数据
|
const start = row.useStartDate ? String(row.useStartDate).replace('T', ' ') : ''
|
const end = row.useEndDate ? String(row.useEndDate).replace('T', ' ') : ''
|
this.form = {
|
...defaultForm(),
|
...row,
|
deviceId: row.deviceId,
|
deviceName: row.deviceName || '',
|
specificationModel: row.specificationModel || '',
|
managementNumber: row.managementNumber || '',
|
orderCode: row.orderCode || '',
|
useDate: start ? start.slice(0, 10) : '',
|
useStartTime: start.length >= 19 ? start.slice(11, 19) : '',
|
useEndTime: end.length >= 19 ? end.slice(11, 19) : '',
|
temperature: row.temperature || '',
|
humidity: row.humidity || '',
|
usePersonId: row.usePersonId || '',
|
usePerson: row.usePerson || '',
|
}
|
},
|
handleDeleteClick(index, row) {
|
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
deleteDeviceRecord({ id: row.id }).then(res => {
|
this.formParamList.splice(index, 1);
|
this.$message({
|
type: 'success',
|
message: '删除成功!'
|
});
|
})
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
getUserList() {
|
selectUserCondition().then(res => {
|
this.userList = res.data
|
})
|
},
|
},
|
watch: {
|
dialogVisible(newVal) {
|
if (newVal === false) {
|
this.resetForm()
|
this.$nextTick(() => {
|
this.$refs.form && this.$refs.form.clearValidate()
|
})
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.search {
|
height: 46px;
|
display: flex;
|
justify-content: space-between;
|
margin-top: 4px;
|
}
|
|
.link-icon {
|
margin-left: 4px;
|
color: #409eff;
|
font-size: 14px;
|
vertical-align: middle;
|
}
|
</style>
|
