<template>
|
<div class="production-cell-record">
|
<!-- 页面头部 -->
|
<div class="page-header">
|
<div class="header-left">
|
<el-button icon="el-icon-arrow-left" @click="$router.go(-1)">返回</el-button>
|
<h2>生产细胞库菌种详情</h2>
|
</div>
|
<div class="header-actions">
|
<el-button type="primary" plain icon="el-icon-edit" @click="handleEdit">编辑</el-button>
|
<el-button type="primary" plain icon="el-icon-printer" @click="handlePrint">打印</el-button>
|
</div>
|
</div>
|
|
<!-- 菌种信息卡片 -->
|
<el-card class="strain-card" v-loading="loading">
|
<div slot="header" class="card-header">
|
<span class="card-title">菌种信息</span>
|
<div class="status-tag">
|
<el-tag :type="getStatusType(strainData.status)">{{ strainData.status }}</el-tag>
|
</div>
|
</div>
|
|
<div class="strain-info">
|
<div class="info-item">
|
<span class="label">菌种编号：</span>
|
<span class="value">{{ strainData.strainNo }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">菌种名称：</span>
|
<span class="value">{{ strainData.strainName }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">菌种来源：</span>
|
<span class="value">{{ strainData.source }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">生产批次：</span>
|
<span class="value">{{ strainData.batchNo }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">保存方法：</span>
|
<span class="value">{{ strainData.preservationMethod }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">保存位置：</span>
|
<span class="value">{{ strainData.storageLocation }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">当前库存：</span>
|
<span class="value">{{ strainData.inventory }} 份</span>
|
</div>
|
<div class="info-item">
|
<span class="label">状态：</span>
|
<span class="value">{{ strainData.status }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">更新时间：</span>
|
<span class="value">{{ strainData.updateTime }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">制备日期：</span>
|
<span class="value">{{ strainData.preparationDate }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">有效期至：</span>
|
<span class="value">{{ strainData.expiryDate }}</span>
|
</div>
|
<div class="info-item full-width">
|
<span class="label">特征描述：</span>
|
<div class="value description">{{ strainData.description }}</div>
|
</div>
|
|
<div class="info-item full-width" v-if="strainData.certificateUrl">
|
<span class="label">质量证书：</span>
|
<div class="value">
|
<el-button type="text" @click="handleViewCertificate">查看证书</el-button>
|
<el-button type="text" @click="handleDownloadCertificate">下载证书</el-button>
|
</div>
|
</div>
|
</div>
|
</el-card>
|
|
<!-- 使用记录 -->
|
<el-card class="record-card" v-loading="loadingRecords">
|
<div slot="header" class="card-header">
|
<span class="card-title">使用记录</span>
|
<el-button type="text" @click="handleAddUsage">新增使用记录</el-button>
|
</div>
|
|
<el-table
|
:data="usageRecords"
|
style="width: 100%"
|
:empty-text="usageRecords.length ? '' : '暂无使用记录'"
|
>
|
<el-table-column prop="date" label="使用日期" width="120"></el-table-column>
|
<el-table-column prop="amount" label="使用数量" width="100"></el-table-column>
|
<el-table-column prop="operator" label="操作人" width="120"></el-table-column>
|
<el-table-column prop="project" label="项目名称"></el-table-column>
|
<el-table-column prop="batchNo" label="生产批次" width="150"></el-table-column>
|
<el-table-column prop="purpose" label="使用目的"></el-table-column>
|
<el-table-column label="操作" width="120">
|
<template slot-scope="scope">
|
<el-button type="text" size="small" @click="handleViewUsageDetail(scope.row)">查看</el-button>
|
<el-button type="text" size="small" @click="handleEditUsage(scope.row)">编辑</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<div class="pagination-container" v-if="usageRecords.length">
|
<el-pagination
|
background
|
layout="prev, pager, next"
|
:total="usageTotalCount"
|
:current-page.sync="usageCurrentPage"
|
:page-size="usagePageSize"
|
@current-change="handleUsagePageChange">
|
</el-pagination>
|
</div>
|
</el-card>
|
|
<!-- 测试记录 -->
|
<el-card class="record-card" v-loading="loadingTests">
|
<div slot="header" class="card-header">
|
<span class="card-title">测试记录</span>
|
<el-button type="text" @click="handleAddTest">新增测试记录</el-button>
|
</div>
|
|
<el-table
|
:data="testRecords"
|
style="width: 100%"
|
:empty-text="testRecords.length ? '' : '暂无测试记录'"
|
>
|
<el-table-column prop="date" label="测试日期" width="120"></el-table-column>
|
<el-table-column prop="type" label="测试类型" width="150"></el-table-column>
|
<el-table-column prop="operator" label="操作人" width="120"></el-table-column>
|
<el-table-column prop="result" label="测试结果">
|
<template slot-scope="scope">
|
<el-tag :type="scope.row.result === '合格' ? 'success' : scope.row.result === '不合格' ? 'danger' : 'info'">
|
{{ scope.row.result }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column prop="remark" label="备注"></el-table-column>
|
<el-table-column label="操作" width="120">
|
<template slot-scope="scope">
|
<el-button type="text" size="small" @click="handleViewTestDetail(scope.row)">查看</el-button>
|
<el-button type="text" size="small" @click="handleEditTest(scope.row)">编辑</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<div class="pagination-container" v-if="testRecords.length">
|
<el-pagination
|
background
|
layout="prev, pager, next"
|
:total="testTotalCount"
|
:current-page.sync="testCurrentPage"
|
:page-size="testPageSize"
|
@current-change="handleTestPageChange">
|
</el-pagination>
|
</div>
|
</el-card>
|
|
<!-- 证书预览对话框 -->
|
<el-dialog
|
title="证书预览"
|
:visible.sync="certificateDialogVisible"
|
width="70%">
|
<div v-if="strainData.certificateUrl" class="certificate-preview">
|
<iframe v-if="strainData.certificateUrl.endsWith('.pdf')" :src="strainData.certificateUrl" width="100%" height="500"></iframe>
|
<img v-else :src="strainData.certificateUrl" style="max-width: 100%; max-height: 500px;" />
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'ProductionCellLibraryRecord',
|
data() {
|
return {
|
loading: false,
|
loadingRecords: false,
|
loadingTests: false,
|
strainId: '',
|
strainData: {
|
id: '',
|
strainNo: '',
|
strainName: '',
|
source: '',
|
batchNo: '',
|
preservationMethod: '',
|
storageLocation: '',
|
inventory: 0,
|
status: '',
|
description: '',
|
preparationDate: '',
|
expiryDate: '',
|
updateTime: '',
|
certificateUrl: ''
|
},
|
certificateDialogVisible: false,
|
|
// 使用记录分页数据
|
usageRecords: [],
|
usageCurrentPage: 1,
|
usagePageSize: 10,
|
usageTotalCount: 0,
|
|
// 测试记录分页数据
|
testRecords: [],
|
testCurrentPage: 1,
|
testPageSize: 10,
|
testTotalCount: 0
|
}
|
},
|
created() {
|
this.strainId = this.$route.params.id;
|
this.fetchStrainData();
|
this.fetchUsageRecords();
|
this.fetchTestRecords();
|
},
|
methods: {
|
// 获取菌种详情
|
fetchStrainData() {
|
this.loading = true;
|
|
// 模拟API请求
|
setTimeout(() => {
|
// 模拟数据，实际项目中应替换为真实API调用
|
this.strainData = {
|
id: this.strainId,
|
strainNo: 'PCLS-2023-001',
|
strainName: '枯草芽孢杆菌生产株',
|
source: '主细胞库',
|
batchNo: 'P20230515-001',
|
preservationMethod: '冻干保存',
|
storageLocation: 'A区-A-102-冷藏柜',
|
inventory: 12,
|
status: '正常',
|
description: '本菌种为工业生产级别枯草芽孢杆菌生产株，由主细胞库转入，经过严格筛选和稳定性测试。该菌株具有高产蛋白酶能力，发酵条件适应性强，适合大规模工业化生产。产品稳定性好，批次间差异小，可用于洗涤用酶制剂、食品加工酶制剂等多种产品的生产。',
|
preparationDate: '2023-05-10',
|
expiryDate: '2024-05-10',
|
updateTime: '2023-05-15 14:30:22',
|
certificateUrl: '/api/strain-library/certificates/sample.pdf'
|
};
|
|
this.loading = false;
|
}, 500);
|
},
|
|
// 获取使用记录
|
fetchUsageRecords() {
|
this.loadingRecords = true;
|
|
// 模拟API请求
|
setTimeout(() => {
|
// 模拟数据，实际项目中应替换为真实API调用
|
this.usageRecords = [
|
{
|
id: '1',
|
date: '2023-06-05',
|
amount: 2,
|
operator: '张工',
|
project: '酶制剂研发项目',
|
batchNo: 'E20230605-001',
|
purpose: '小试生产'
|
},
|
{
|
id: '2',
|
date: '2023-07-12',
|
amount: 3,
|
operator: '李工',
|
project: '蛋白酶产品项目',
|
batchNo: 'E20230712-002',
|
purpose: '中试生产'
|
},
|
{
|
id: '3',
|
date: '2023-08-18',
|
amount: 5,
|
operator: '王工',
|
project: '工业酶制剂生产',
|
batchNo: 'E20230818-003',
|
purpose: '规模化生产'
|
}
|
];
|
|
this.usageTotalCount = 3;
|
this.loadingRecords = false;
|
}, 600);
|
},
|
|
// 获取测试记录
|
fetchTestRecords() {
|
this.loadingTests = true;
|
|
// 模拟API请求
|
setTimeout(() => {
|
// 模拟数据，实际项目中应替换为真实API调用
|
this.testRecords = [
|
{
|
id: '1',
|
date: '2023-05-15',
|
type: '活力测定',
|
operator: '刘工',
|
result: '合格',
|
remark: '酶活性达标，符合生产要求'
|
},
|
{
|
id: '2',
|
date: '2023-05-15',
|
type: '纯度检测',
|
operator: '张工',
|
result: '合格',
|
remark: '纯度>98%，无杂菌污染'
|
},
|
{
|
id: '3',
|
date: '2023-05-16',
|
type: '稳定性测试',
|
operator: '李工',
|
result: '合格',
|
remark: '常温保存7天活力下降小于5%'
|
}
|
];
|
|
this.testTotalCount = 3;
|
this.loadingTests = false;
|
}, 700);
|
},
|
|
// 状态标签类型
|
getStatusType(status) {
|
switch(status) {
|
case '正常':
|
return 'success';
|
case '缺货':
|
return 'warning';
|
case '异常':
|
return 'danger';
|
case '已停用':
|
return 'info';
|
default:
|
return 'info';
|
}
|
},
|
|
// 编辑菌种
|
handleEdit() {
|
this.$router.push(`/strain-library/production-cell-library/edit/${this.strainId}`);
|
},
|
|
// 打印菌种信息
|
handlePrint() {
|
window.print();
|
},
|
|
// 查看证书
|
handleViewCertificate() {
|
this.certificateDialogVisible = true;
|
},
|
|
// 下载证书
|
handleDownloadCertificate() {
|
// 实际项目中应处理文件下载逻辑
|
window.open(this.strainData.certificateUrl, '_blank');
|
},
|
|
// 新增使用记录
|
handleAddUsage() {
|
this.$message.info('功能开发中：新增使用记录');
|
// 实际项目中应跳转到新增使用记录页面或打开对话框
|
},
|
|
// 查看使用记录详情
|
handleViewUsageDetail(row) {
|
this.$message.info(`查看使用记录: ${row.id}`);
|
// 实际项目中应跳转到使用记录详情页面或打开对话框
|
},
|
|
// 编辑使用记录
|
handleEditUsage(row) {
|
this.$message.info(`编辑使用记录: ${row.id}`);
|
// 实际项目中应跳转到编辑使用记录页面或打开对话框
|
},
|
|
// 使用记录分页切换
|
handleUsagePageChange(page) {
|
this.usageCurrentPage = page;
|
this.fetchUsageRecords();
|
},
|
|
// 新增测试记录
|
handleAddTest() {
|
this.$message.info('功能开发中：新增测试记录');
|
// 实际项目中应跳转到新增测试记录页面或打开对话框
|
},
|
|
// 查看测试记录详情
|
handleViewTestDetail(row) {
|
this.$message.info(`查看测试记录: ${row.id}`);
|
// 实际项目中应跳转到测试记录详情页面或打开对话框
|
},
|
|
// 编辑测试记录
|
handleEditTest(row) {
|
this.$message.info(`编辑测试记录: ${row.id}`);
|
// 实际项目中应跳转到编辑测试记录页面或打开对话框
|
},
|
|
// 测试记录分页切换
|
handleTestPageChange(page) {
|
this.testCurrentPage = page;
|
this.fetchTestRecords();
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.production-cell-record {
|
padding: 20px;
|
|
.page-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 24px;
|
|
.header-left {
|
display: flex;
|
align-items: center;
|
|
h2 {
|
margin: 0 0 0 12px;
|
font-size: 22px;
|
font-weight: 500;
|
}
|
}
|
|
.header-actions {
|
display: flex;
|
gap: 12px;
|
}
|
}
|
|
.strain-card {
|
margin-bottom: 24px;
|
|
.card-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.card-title {
|
font-size: 16px;
|
font-weight: 500;
|
}
|
}
|
|
.strain-info {
|
display: flex;
|
flex-wrap: wrap;
|
|
.info-item {
|
width: 33.33%;
|
margin-bottom: 16px;
|
|
&.full-width {
|
width: 100%;
|
}
|
|
.label {
|
font-weight: 500;
|
color: #606266;
|
}
|
|
.value {
|
color: #303133;
|
|
&.description {
|
white-space: pre-line;
|
line-height: 1.6;
|
padding: 8px 0;
|
}
|
}
|
}
|
}
|
}
|
|
.record-card {
|
margin-bottom: 24px;
|
|
.card-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.card-title {
|
font-size: 16px;
|
font-weight: 500;
|
}
|
}
|
|
.pagination-container {
|
display: flex;
|
justify-content: flex-end;
|
margin-top: 20px;
|
}
|
}
|
|
.certificate-preview {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
min-height: 500px;
|
background-color: #f5f7fa;
|
}
|
|
@media print {
|
.page-header, .header-actions, .record-card {
|
display: none;
|
}
|
|
.strain-card {
|
border: none;
|
box-shadow: none;
|
|
.card-header {
|
background-color: #fff !important;
|
border-bottom: 1px solid #ddd;
|
}
|
}
|
}
|
}
|
</style>
|
