<template>
|
<div class="record-page">
|
<div class="page-header">
|
<div class="header-left">
|
<el-page-header @back="goBack" content="主细胞出入库记录"></el-page-header>
|
</div>
|
<div class="header-right">
|
<el-button type="primary" icon="el-icon-plus" @click="handleAddRecord">新增记录</el-button>
|
</div>
|
</div>
|
|
<el-card class="record-card">
|
<div class="strain-info">
|
<div class="info-row">
|
<div class="info-item">
|
<span class="label">菌种编号：</span>
|
<span class="value">{{ strainInfo.strainNo }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">菌种名称：</span>
|
<span class="value">{{ strainInfo.strainName }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">菌种来源：</span>
|
<span class="value">{{ strainInfo.source }}</span>
|
</div>
|
</div>
|
<div class="info-row">
|
<div class="info-item">
|
<span class="label">鉴定方法：</span>
|
<span class="value">{{ strainInfo.method }}</span>
|
</div>
|
<div class="info-item full">
|
<span class="label">特征描述：</span>
|
<span class="value">{{ strainInfo.certificate }}</span>
|
</div>
|
</div>
|
<div class="info-row">
|
<div class="info-item">
|
<span class="label">菌种保存方法：</span>
|
<span class="value">{{ strainInfo.storage }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">保存位置：</span>
|
<span class="value">{{ strainInfo.amount }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">出入库状态：</span>
|
<span class="value status">{{ strainInfo.statusText }}</span>
|
</div>
|
</div>
|
</div>
|
|
<div class="record-timeline-container">
|
<h3 class="section-title">出入库记录</h3>
|
<RecordTimeline :list="recordList" />
|
</div>
|
</el-card>
|
|
<!-- 新增记录弹窗 -->
|
<el-dialog
|
title="新增出入库记录"
|
:visible.sync="dialogVisible"
|
width="500px"
|
>
|
<el-form ref="recordForm" :model="recordForm" :rules="recordRules" label-width="100px">
|
<el-form-item label="操作类型" prop="type">
|
<el-radio-group v-model="recordForm.type">
|
<el-radio label="入库">入库</el-radio>
|
<el-radio label="出库">出库</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
|
<el-form-item label="操作人" prop="operator">
|
<el-input v-model="recordForm.operator" placeholder="请输入操作人"></el-input>
|
</el-form-item>
|
|
<el-form-item label="操作时间" prop="operateTime">
|
<el-date-picker
|
v-model="recordForm.operateTime"
|
type="datetime"
|
placeholder="选择日期时间"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
></el-date-picker>
|
</el-form-item>
|
|
<el-form-item label="保藏人" prop="reviewer">
|
<el-input v-model="recordForm.reviewer" placeholder="请输入保藏人"></el-input>
|
</el-form-item>
|
|
<el-form-item label="操作数量" prop="amount">
|
<el-input-number v-model="recordForm.amount" :min="1" :max="100"></el-input-number>
|
</el-form-item>
|
|
<el-form-item label="备注" prop="remarks">
|
<el-input
|
type="textarea"
|
v-model="recordForm.remarks"
|
:rows="3"
|
placeholder="请输入备注"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="submitRecord">确 定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import RecordTimeline from '../strain-library-manage/components/RecordTimeline.vue'
|
|
export default {
|
name: 'MainCellRecord',
|
components: {
|
RecordTimeline
|
},
|
data() {
|
return {
|
strainId: '',
|
strainInfo: {
|
strainNo: 'M-2024001',
|
strainName: '大肠杆菌BL21',
|
source: '原始细胞库',
|
method: '分子生物学鉴定',
|
certificate: '常用表达宿主菌，含有DE3溶源体，适合蛋白表达',
|
storage: '甘油冷冻',
|
amount: 'M区-01-001',
|
inventory: '100',
|
status: '1',
|
statusText: '已入库'
|
},
|
recordList: [
|
{
|
type: '入库',
|
operator: '张三',
|
operateTime: '2024-05-01 10:30:00',
|
reviewer: '李四',
|
confirmTime: '2024-05-01 14:20:00'
|
},
|
{
|
type: '出库',
|
operator: '王五',
|
operateTime: '2024-05-15 09:45:00',
|
reviewer: '赵六',
|
confirmTime: '2024-05-15 11:30:00'
|
},
|
{
|
type: '入库',
|
operator: '钱七',
|
operateTime: '2024-05-20 14:00:00',
|
reviewer: '孙八',
|
confirmTime: '2024-05-20 16:15:00'
|
}
|
],
|
dialogVisible: false,
|
recordForm: {
|
type: '入库',
|
operator: '',
|
operateTime: '',
|
reviewer: '',
|
amount: 1,
|
remarks: ''
|
},
|
recordRules: {
|
type: [
|
{ required: true, message: '请选择操作类型', trigger: 'change' }
|
],
|
operator: [
|
{ required: true, message: '请输入操作人', trigger: 'blur' }
|
],
|
operateTime: [
|
{ required: true, message: '请选择操作时间', trigger: 'change' }
|
],
|
reviewer: [
|
{ required: true, message: '请输入保藏人', trigger: 'blur' }
|
],
|
amount: [
|
{ required: true, message: '请输入操作数量', trigger: 'blur' }
|
]
|
}
|
}
|
},
|
created() {
|
// 获取路由参数中的菌种ID
|
this.strainId = this.$route.query.id
|
// 实际项目中这里应该根据ID加载菌种信息和记录列表
|
console.log('加载菌种ID:', this.strainId)
|
},
|
methods: {
|
goBack() {
|
this.$router.push('/strain-library/main-cell-library')
|
},
|
handleAddRecord() {
|
this.dialogVisible = true
|
this.resetRecordForm()
|
},
|
submitRecord() {
|
this.$refs.recordForm.validate(valid => {
|
if (valid) {
|
// 表单验证通过，提交数据
|
console.log('提交的记录数据:', this.recordForm)
|
|
// 模拟添加记录到列表
|
const newRecord = {
|
type: this.recordForm.type,
|
operator: this.recordForm.operator,
|
operateTime: this.recordForm.operateTime,
|
reviewer: this.recordForm.reviewer,
|
confirmTime: new Date().toLocaleString()
|
}
|
|
// 添加到记录列表的开头
|
this.recordList.unshift(newRecord)
|
|
// 关闭弹窗
|
this.dialogVisible = false
|
|
// 显示成功消息
|
this.$message.success('记录添加成功')
|
} else {
|
this.$message.error('请正确填写表单')
|
return false
|
}
|
})
|
},
|
resetRecordForm() {
|
this.recordForm = {
|
type: '入库',
|
operator: '',
|
operateTime: '',
|
reviewer: '',
|
amount: 1,
|
remarks: ''
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.record-page {
|
padding: 20px;
|
}
|
|
.page-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 20px;
|
|
.header-left {
|
:deep(.el-page-header__content) {
|
font-size: 18px;
|
font-weight: bold;
|
color: #333;
|
}
|
}
|
}
|
|
.record-card {
|
background: #fff;
|
border-radius: 16px;
|
margin-bottom: 20px;
|
}
|
|
.strain-info {
|
padding: 10px 0;
|
|
.info-row {
|
display: flex;
|
flex-wrap: wrap;
|
margin-bottom: 16px;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
|
.info-item {
|
flex: 1;
|
min-width: 200px;
|
margin-right: 20px;
|
|
&:last-child {
|
margin-right: 0;
|
}
|
|
&.full {
|
flex: 2;
|
}
|
|
.label {
|
color: #606266;
|
margin-right: 8px;
|
}
|
|
.value {
|
color: #333;
|
font-weight: 500;
|
|
&.status {
|
color: #67C23A;
|
}
|
}
|
}
|
}
|
|
.record-timeline-container {
|
margin-top: 30px;
|
|
.section-title {
|
font-size: 16px;
|
color: #333;
|
margin-bottom: 20px;
|
font-weight: 500;
|
}
|
}
|
|
:deep(.el-dialog__body) {
|
padding: 20px 30px;
|
}
|
|
@media screen and (max-width: 768px) {
|
.strain-info {
|
.info-row {
|
flex-direction: column;
|
|
.info-item {
|
margin-right: 0;
|
margin-bottom: 10px;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
}
|
}
|
|
.page-header {
|
flex-direction: column;
|
align-items: flex-start;
|
|
.header-right {
|
margin-top: 16px;
|
}
|
}
|
}
|
</style>
|
