<template>
|
<div class="list">
|
<el-card class="header-box">
|
<div class="box-title">
|
<img src="@/assets/public/notice.png" class="header-icon">
|
<span>【菌种源保藏出/入细胞库登记表】说明</span>
|
<el-button type="text" class="view-more" @click="handleViewMore">查看全部 >></el-button>
|
</div>
|
<div class="header-content" :class="{ 'collapsed': true }">
|
<p>1、菌种全部集中登记在【菌种源保藏出/入细胞库登记表】，请将来源有3 类菌经。</p>
|
<p>1.1 原净土管理日油性的源头菌种：入细胞细胞库（现代-O）。</p>
|
<p>1.2 是到菌的源头菌种：接种入主细胞库（现代-O），经过百种、验证后，菌种被保存日油管理沙土菌种，入细胞细胞库（现代-O）。</p>
|
<p>1.3 是否菌种能自己分离后获得的源头菌种，接种入主细胞库：经过产验证后，保藏为少土管理日油管，入细胞细胞库（现代-O）。</p>
|
</div>
|
|
<!-- 查看全部弹窗 -->
|
<el-dialog
|
title="菌种源保藏出/入生产细胞库登记表说明"
|
:visible.sync="dialogVisible"
|
width="50%"
|
class="view-all-dialog"
|
>
|
<div class="dialog-content">
|
<p>1、菌种全部集中登记在【菌种源保藏出/入细胞库登记表】，请将来源有3 类菌经。</p>
|
<p>1.1 原净土管理日油性的源头菌种：入细胞细胞库（现代-O）。</p>
|
<p>1.2 是到菌的源头菌种：接种入主细胞库（现代-O），经过百种、验证后，菌种被保存日油管理沙土菌种，入细胞细胞库（现代-O）。</p>
|
<p>1.3 是否菌种能自己分离后获得的源头菌种，接种入主细胞库：经过产验证后，保藏为少土管理日油管，入细胞细胞库（现代-O）。</p>
|
</div>
|
</el-dialog>
|
</el-card>
|
|
<!-- Table -->
|
<TableCustom :queryForm="queryForm" :tableData="tableData" :total="total" @currentChange="handleCurrentChange"
|
@sizeChange="handleSizeChange">
|
<template #search>
|
<el-form :model="form" label-width="auto" inline>
|
<el-form-item label="菌种编号：">
|
<el-input v-model="form.strainNo" placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="菌种名称：">
|
<el-input v-model="form.strainName" placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="状态：">
|
<el-select v-model="form.status" placeholder="请选择">
|
<el-option label="全部" value=""></el-option>
|
<el-option
|
v-for="item in statusOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item class="search-btn-box">
|
<el-button type="default" @click="resetForm">重置</el-button>
|
<el-button type="primary" @click="searchData">查询</el-button>
|
</el-form-item>
|
</el-form>
|
</template>
|
|
<template #setting>
|
<div class="tableTitle">
|
<div class="flex a-center">
|
<div class="title" :class="{ active: currentType === 'list' }"
|
@click="handleTypeChange('list')">
|
生产细胞列表</div>
|
<div class="drafts" :class="{ active: currentType === 'draft' }"
|
@click="handleTypeChange('draft')">
|
草稿箱</div>
|
</div>
|
<div class="flex a-center">
|
<el-button @click="handleAdd" class="el-icon-plus" type="primary" style="margin-right: 12px;">新增生产细胞</el-button>
|
<el-button @click="handleAdd" class="el-icon-plus" type="primary" style="margin-right: 12px;">批量新增</el-button>
|
</div>
|
</div>
|
</template>
|
|
<template #table>
|
<el-table-column type="selection" width="55" />
|
<el-table-column prop="strainNo" label="菌种编号" width="150" />
|
<el-table-column prop="strainName" label="菌种名称" width="180" />
|
<el-table-column prop="source" label="菌种来源" width="150" />
|
<el-table-column prop="preservationMethod" label="鉴定方法" width="120" />
|
<el-table-column prop="storageLocation" label="特征描述" width="150" />
|
<el-table-column prop="inventory" label="菌种保存方法" width="100" />
|
<el-table-column prop="inventory" label="保存位置" width="100" />
|
<el-table-column prop="inventory" label="库存余量" width="100" />
|
<el-table-column prop="inventory" label="备注" />
|
<el-table-column prop="status" label="状态" width="100">
|
<template slot-scope="scope">
|
<el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="150" fixed="right">
|
<template slot-scope="scope">
|
<el-button type="text" @click="handleView(scope.row)">详情</el-button>
|
<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
|
<el-button type="text" @click="handleDelete(scope.row)" class="delete-btn">删除</el-button>
|
</template>
|
</el-table-column>
|
</template>
|
</TableCustom>
|
|
<!-- 删除确认对话框 -->
|
<el-dialog
|
title="确认删除"
|
:visible.sync="deleteDialogVisible"
|
width="30%">
|
<div class="delete-dialog-content">
|
<i class="el-icon-warning-outline warning-icon"></i>
|
<span>确定要删除该菌种记录吗？删除后将无法恢复。</span>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="deleteDialogVisible = false">取消</el-button>
|
<el-button type="danger" @click="confirmDelete">确定</el-button>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'ProductionCellLibrary',
|
data() {
|
return {
|
dialogVisible: false,
|
currentType: 'list',
|
form: {
|
strainNo: '',
|
strainName: '',
|
status: ''
|
},
|
queryForm: {
|
pageSize: 10,
|
pageNum: 1
|
},
|
total: 100,
|
loading: false,
|
sourceOptions: [
|
{ value: '主细胞库', label: '主细胞库' },
|
{ value: '工作细胞库', label: '工作细胞库' },
|
{ value: '外部来源', label: '外部来源' }
|
],
|
statusOptions: [
|
{ value: '正常', label: '正常' },
|
{ value: '缺货', label: '缺货' },
|
{ value: '异常', label: '异常' },
|
{ value: '已停用', label: '已停用' }
|
],
|
tableData: [],
|
selectedRows: [],
|
deleteDialogVisible: false,
|
deleteRow: null
|
}
|
},
|
created() {
|
this.fetchData();
|
},
|
methods: {
|
handleViewMore() {
|
this.dialogVisible = true;
|
},
|
resetForm() {
|
this.form = {
|
strainNo: '',
|
strainName: '',
|
status: ''
|
}
|
this.searchData()
|
},
|
searchData() {
|
this.queryForm.pageNum = 1;
|
this.fetchData();
|
},
|
// 获取数据
|
fetchData() {
|
this.loading = true;
|
|
// 构建请求参数
|
const params = {
|
page: this.queryForm.pageNum,
|
pageSize: this.queryForm.pageSize,
|
...this.form
|
};
|
|
// 模拟API请求
|
setTimeout(() => {
|
// 模拟数据，实际项目中应替换为真实API调用
|
const mockData = [];
|
for (let i = 1; i <= 10; i++) {
|
mockData.push({
|
id: `${i}`,
|
strainNo: `PCLS-2023-${String(i).padStart(3, '0')}`,
|
strainName: `枯草芽孢杆菌生产株${i}`,
|
source: i % 3 === 0 ? '外部来源' : (i % 2 === 0 ? '工作细胞库' : '主细胞库'),
|
preservationMethod: i % 2 === 0 ? '冻干保存' : '超低温冷冻保存',
|
storageLocation: `A区-A-${100 + i}-冷藏柜`,
|
inventory: 10 + i,
|
status: i % 4 === 0 ? '异常' : (i % 3 === 0 ? '缺货' : (i % 2 === 0 ? '已停用' : '正常')),
|
preparationDate: `2023-05-${String(i).padStart(2, '0')}`,
|
expiryDate: `2024-05-${String(i).padStart(2, '0')}`
|
});
|
}
|
|
this.tableData = mockData;
|
this.total = 100; // 模拟总数
|
this.loading = false;
|
}, 500);
|
},
|
|
// 状态标签类型
|
getStatusType(status) {
|
switch(status) {
|
case '正常':
|
return 'success';
|
case '缺货':
|
return 'warning';
|
case '异常':
|
return 'danger';
|
case '已停用':
|
return 'info';
|
default:
|
return 'info';
|
}
|
},
|
|
handleCurrentChange(page) {
|
this.queryForm.pageNum = page
|
this.fetchData();
|
},
|
handleSizeChange(size) {
|
this.queryForm.pageSize = size
|
this.queryForm.pageNum = 1
|
this.fetchData();
|
},
|
handleTypeChange(type) {
|
this.currentType = type;
|
this.fetchData();
|
},
|
|
// 表格多选
|
handleSelectionChange(selection) {
|
this.selectedRows = selection;
|
},
|
|
// 新增菌种
|
handleAdd() {
|
this.$router.push('/strain-library/production-cell-library/add');
|
},
|
|
// 查看菌种详情
|
handleView(row) {
|
this.$router.push(`/strain-library/production-cell-library/record/${row.id}`);
|
},
|
|
// 编辑菌种
|
handleEdit(row) {
|
this.$router.push(`/strain-library/production-cell-library/edit/${row.id}`);
|
},
|
|
// 删除菌种
|
handleDelete(row) {
|
this.deleteRow = row;
|
this.deleteDialogVisible = true;
|
},
|
|
// 确认删除
|
confirmDelete() {
|
if (!this.deleteRow) return;
|
|
// 模拟API请求
|
this.$message({
|
type: 'success',
|
message: `删除成功: ${this.deleteRow.strainNo} - ${this.deleteRow.strainName}`
|
});
|
|
// 移除本地数据
|
const index = this.tableData.findIndex(item => item.id === this.deleteRow.id);
|
if (index !== -1) {
|
this.tableData.splice(index, 1);
|
}
|
|
this.deleteDialogVisible = false;
|
this.deleteRow = null;
|
},
|
|
// 导出
|
handleExport() {
|
this.$message.info('生产细胞库菌种导出功能开发中');
|
// 实际项目中应实现导出逻辑
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.list {
|
padding: 20px;
|
}
|
|
.header-box {
|
margin-bottom: 20px;
|
border-radius: 16px;
|
background: rgba(255, 255, 255, 0.8);
|
|
.box-title {
|
display: flex;
|
align-items: center;
|
font-size: 18px;
|
font-weight: bold;
|
margin-bottom: 15px;
|
position: relative;
|
|
.header-icon {
|
width: 20px;
|
height: 20px;
|
margin-right: 10px;
|
}
|
|
.view-more {
|
position: absolute;
|
right: 0;
|
color: #049C9A;
|
}
|
}
|
|
.header-content {
|
color: rgba(0, 0, 0, 0.88);
|
font-size: 14px;
|
line-height: 1.8;
|
margin-left: 30px;
|
transition: max-height 0.3s ease-in-out;
|
overflow: hidden;
|
|
&.collapsed {
|
max-height: 48px;
|
overflow: hidden;
|
}
|
|
p {
|
margin: 5px 0;
|
}
|
}
|
}
|
|
.search-btn-box {
|
margin-left: auto;
|
}
|
|
.flex {
|
display: flex;
|
align-items: center;
|
}
|
|
.tableTitle {
|
display: flex;
|
padding-bottom: 20px;
|
justify-content: space-between;
|
align-items: center;
|
|
.title {
|
background: #fafafc;
|
border-radius: 8px 8px 0px 0px;
|
border: 1px solid #dcdfe6;
|
font-weight: bold;
|
font-size: 18px;
|
color: #606266;
|
width: unset;
|
cursor: pointer;
|
height: 50px;
|
line-height: 50px;
|
width: 166px;
|
text-align: center;
|
|
}
|
|
.drafts {
|
background: #fafafc;
|
border-radius: 8px 8px 0px 0px;
|
border: 1px solid #dcdfe6;
|
font-weight: 400;
|
font-size: 18px;
|
color: #606266;
|
margin-left: 16px;
|
cursor: pointer;
|
height: 50px;
|
line-height: 50px;
|
width: 166px;
|
text-align: center;
|
}
|
|
.active {
|
color: #049c9a;
|
background: #ffffff;
|
border-radius: 8px 8px 0px 0px;
|
border: 1px solid #049c9a;
|
|
}
|
}
|
|
.delete-dialog-content {
|
display: flex;
|
align-items: center;
|
padding: 20px 0;
|
|
.warning-icon {
|
font-size: 24px;
|
color: #E6A23C;
|
margin-right: 10px;
|
}
|
}
|
|
.view-all-dialog {
|
:deep(.el-dialog__header) {
|
padding: 20px;
|
border-bottom: 1px solid #EBEEF5;
|
margin-right: 0;
|
|
.el-dialog__title {
|
font-size: 18px;
|
font-weight: bold;
|
color: #303133;
|
}
|
}
|
|
:deep(.el-dialog__body) {
|
padding: 20px;
|
|
.dialog-content {
|
font-size: 14px;
|
line-height: 1.8;
|
color: #606266;
|
|
p {
|
margin: 12px 0;
|
|
&:first-child {
|
margin-top: 0;
|
}
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
}
|
}
|
}
|
|
.delete-btn {
|
color: #F56C6C;
|
}
|
</style>
|
