<template>
|
<div class="list">
|
<!-- 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-input v-model="form.strainName" placeholder="请输入"></el-input>
|
</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="handleNewStrain"
|
class="el-icon-plus"
|
type="primary"
|
style="margin-right: 12px"
|
>新增原始细胞库资料</el-button
|
>
|
</div>
|
</div>
|
</template>
|
|
<template #table>
|
<el-table-column prop="source" label="菌种来源" />
|
<el-table-column prop="method" label="鉴别菌株编号" />
|
<el-table-column prop="certificate" label="鉴别菌株名称" />
|
<el-table-column prop="storage" label="验证实验编号" />
|
<el-table-column prop="amount" label="创建人" />
|
<el-table-column prop="inventory" label="创建时间" />
|
<el-table-column prop="status" label="状态">
|
<template #default="{ row }">
|
<el-tag :type="getStatusType(row.status)">{{
|
getStatusText(row.status)
|
}}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="200">
|
<template #default="{ row }">
|
<el-button
|
type="text"
|
@click="$router.push('/strain/validation/confirm-detail')"
|
>确认</el-button
|
>
|
<el-button type="text" @click="handleDetail(row)">详情1</el-button>
|
<el-button type="text" @click="handleDetail2(row)">详情2</el-button>
|
<el-button type="text" @click="handleEdit(row)">编辑</el-button>
|
<el-button type="text" @click="handleRecord(row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</template>
|
</TableCustom>
|
<PrimitiveCellDetailDialog
|
:visible.sync="detailVisible"
|
:detail="currentDetail"
|
/>
|
<DetailConditionDialog
|
:visible.sync="detailDialogVisible"
|
:value="detailDialogValue"
|
/>
|
</div>
|
</template>
|
|
<script>
|
import PrimitiveCellDetailDialog from "./primitive-cell-detail-dialog.vue";
|
import DetailConditionDialog from "./DetailConditionDialog.vue";
|
export default {
|
name: "PrimitiveCell",
|
components: {
|
PrimitiveCellDetailDialog,
|
DetailConditionDialog,
|
},
|
data() {
|
return {
|
detailDialogVisible: false,
|
detailDialogValue: {},
|
dialogVisible: false,
|
currentType: "list",
|
detailVisible: false,
|
currentDetail: {},
|
form: {
|
strainNo: "",
|
strainName: "",
|
status: "",
|
},
|
queryForm: {
|
pageSize: 10,
|
pageNum: 1,
|
},
|
total: 800,
|
tableData: [
|
{
|
strainNo: "YX-2024001",
|
strainName: "大肠杆菌",
|
source: "实验室分离",
|
method: "形态学鉴定、生理生化试验",
|
certificate: "革兰氏阴性杆菌，可发酵葡萄糖产酸产气，IMViC试验++--",
|
storage: "斜面培养",
|
amount: "A区-01-001",
|
inventory: "50",
|
notes: "用于质粒转化",
|
status: "1",
|
},
|
{
|
strainNo: "YX-2024002",
|
strainName: "枯草芽孢杆菌",
|
source: "菌种保藏中心",
|
method: "16S rDNA测序",
|
certificate: "革兰氏阳性芽孢杆菌，可水解淀粉，产生溶菌素",
|
storage: "冷冻保存",
|
amount: "B区-02-005",
|
inventory: "30",
|
notes: "工业发酵菌种",
|
status: "1",
|
},
|
{
|
strainNo: "YX-2024003",
|
strainName: "酿酒酵母",
|
source: "发酵工厂",
|
method: "显微镜观察、生理特性",
|
certificate: "椭圆形单细胞真菌，可发酵葡萄糖产生乙醇",
|
storage: "甘油管保存",
|
amount: "A区-03-002",
|
inventory: "40",
|
notes: "发酵工艺优化",
|
status: "2",
|
},
|
{
|
strainNo: "YX-2024004",
|
strainName: "乳酸菌",
|
source: "乳制品分离",
|
method: "生化鉴定、API条",
|
certificate: "革兰氏阳性球菌，产生乳酸，耐酸性强",
|
storage: "冷冻干燥",
|
amount: "C区-01-003",
|
inventory: "25",
|
notes: "益生菌研究",
|
status: "3",
|
},
|
{
|
strainNo: "YX-2024005",
|
strainName: "青霉菌",
|
source: "环境样本",
|
method: "形态学特征、ITS测序",
|
certificate: "丝状真菌，产生蓝绿色分生孢子，可产青霉素",
|
storage: "斜面培养",
|
amount: "B区-04-001",
|
inventory: "35",
|
notes: "次级代谢产物研究",
|
status: "1",
|
},
|
],
|
};
|
},
|
methods: {
|
handleDetail(row) {
|
this.currentDetail = row;
|
this.detailVisible = true;
|
},
|
handleDetail2(row) {
|
this.detailDialogValue = row;
|
this.detailDialogVisible = true;
|
},
|
handleViewMore() {
|
this.dialogVisible = true;
|
},
|
resetForm() {
|
this.form = {
|
strainNo: "",
|
strainName: "",
|
status: "",
|
};
|
this.searchData();
|
},
|
searchData() {
|
// 模拟搜索逻辑
|
const { strainNo, strainName, status } = this.form;
|
let filteredData = [...this.tableData];
|
|
if (strainNo) {
|
filteredData = filteredData.filter((item) =>
|
item.strainNo.toLowerCase().includes(strainNo.toLowerCase())
|
);
|
}
|
if (strainName) {
|
filteredData = filteredData.filter((item) =>
|
item.strainName.toLowerCase().includes(strainName.toLowerCase())
|
);
|
}
|
if (status) {
|
filteredData = filteredData.filter((item) => item.status === status);
|
}
|
|
this.total = filteredData.length;
|
// 实际项目中这里应该调用API
|
console.log("搜索条件:", this.form);
|
console.log("分页信息:", this.queryForm);
|
},
|
handleNewStrain() {
|
this.$router.push("/strain/validation/add-primitive-cell");
|
// Implement new strain logic
|
},
|
handleBatchAdd() {
|
// Implement batch add logic
|
},
|
handleEdit(row) {
|
// Implement edit logic
|
},
|
handleRecord(row) {
|
this.$router.push({
|
path: "/strain-library/strain-library-manage/record",
|
query: {
|
id: row.strainNo,
|
},
|
});
|
},
|
handleCurrentChange(page) {
|
this.queryForm.pageNum = page;
|
// Implement page change logic
|
},
|
handleSizeChange(size) {
|
this.queryForm.pageSize = size;
|
// Implement size change logic
|
},
|
handleTypeChange(type) {
|
this.currentType = type;
|
// Implement type change logic
|
},
|
getStatusType(status) {
|
const types = {
|
1: "success",
|
2: "info",
|
3: "warning",
|
};
|
return types[status] || "info";
|
},
|
getStatusText(status) {
|
const texts = {
|
1: "已入库",
|
2: "已出库",
|
3: "入库待确认",
|
};
|
return texts[status] || "未知状态";
|
},
|
},
|
};
|
</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-form {
|
margin-bottom: 20px;
|
background: #f5f7fa;
|
padding: 24px;
|
border-radius: 8px;
|
|
.el-form-item {
|
margin-right: 20px;
|
margin-bottom: 0;
|
}
|
|
.el-button {
|
margin-left: 10px;
|
}
|
}
|
|
.action-buttons {
|
margin-bottom: 20px;
|
|
.el-button {
|
margin-right: 10px;
|
}
|
}
|
|
.tab-container {
|
display: flex;
|
margin-bottom: 20px;
|
|
.tab {
|
padding: 10px 30px;
|
border: 1px solid #dcdfe6;
|
border-bottom: none;
|
border-radius: 8px 8px 0 0;
|
cursor: pointer;
|
margin-right: 10px;
|
background: #f5f7fa;
|
|
&.active {
|
background: #fff;
|
border-color: #049c9a;
|
color: #049c9a;
|
font-weight: bold;
|
}
|
}
|
}
|
|
.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;
|
}
|
}
|
|
.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;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
