<template>
|
<div class="list">
|
<!-- Table -->
|
<TableCustom :queryForm="queryForm" :height="null" :tableData="tableData" :total="total"
|
@handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange">
|
<template #search>
|
<el-form :model="form" label-width="auto" inline>
|
<el-form-item label="鉴别菌株编号：">
|
<el-input v-model="form.identifyingStrainCode" placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="鉴别菌株名称：">
|
<el-input v-model="form.identifyingStrainName" placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="验证实验编号：" v-if="roleType != 4">
|
<el-input v-model="form.validationExperimentCode" 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" v-if="roleType == 4 || roleType == 3" :class="{ active: currentType === 'draft' }"
|
@click="handleTypeChange('draft')">
|
草稿箱
|
</div>
|
</div>
|
<div class="flex a-center" v-if="roleType == 4">
|
<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="strainSource" label="菌种来源" />
|
<el-table-column prop="identifyingStrainCode" label="鉴别菌株编号" />
|
<el-table-column prop="identifyingStrainName" label="鉴别菌株名称" >
|
<template #default="{ row }">
|
<el-tooltip :content="row.identifyingStrainName" placement="top" effect="dark">
|
<div class="ellipsis-text">{{ row.identifyingStrainName }}</div>
|
</el-tooltip>
|
</template>
|
</el-table-column>
|
<el-table-column prop="validationExperimentCode" label="验证实验编号" />
|
<el-table-column prop="createBy" label="创建人" />
|
<el-table-column prop="createTime" label="创建时间" />
|
<el-table-column prop="status" label="状态" v-if="currentType == 'list'">
|
<template #default="{ row }">
|
<el-tag v-if="row.status == 1" type="info">待确认</el-tag>
|
<el-tag v-if="row.status == 2" type="success">已提交</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="200">
|
<template #default="{ row }">
|
<el-button type="text" v-if="row.status == 1 && roleType == 3&¤tType != 'draft'"
|
@click="$router.push('/strain/validation/confirm-detail?id=' + row.id)">确认</el-button>
|
<el-button type="text" v-if="roleType == 4" @click="handleDetail(row)">详情</el-button>
|
<el-button type="text" v-if="roleType != 4" @click="handleDetail2(row)">详情</el-button>
|
<el-button type="text" v-if="(roleType == 1) || (roleType == 4 && currentType == 'draft')"
|
@click="handleEdit(row)">编辑</el-button>
|
<el-button type="text" v-if="(roleType == 1) || (roleType == 4 && currentType == 'draft')"
|
@click="handleDelete(row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</template>
|
</TableCustom>
|
<PrimitiveCellDetailDialog :visible.sync="detailVisible" :detail="currentDetail" />
|
<DetailConditionDialog @viewDetail="viewDetail" :visible.sync="detailDialogVisible" :value="detailDialogValue" />
|
<EditConditionDialog :visible.sync="editDialogVisible" :value="editDialogValue" />
|
<ShowDelConfirm :show="showDelConfirm" @close="showDelConfirm = false" @confirm="handleDelConfirm" />
|
</div>
|
</template>
|
|
<script>
|
import PrimitiveCellDetailDialog from "./primitive-cell-detail-dialog.vue";
|
import DetailConditionDialog from "./DetailConditionDialog.vue";
|
import EditConditionDialog from "./EditConditionDialog.vue";
|
|
import { getList, delTwo } from "./service";
|
import moment from "moment";
|
export default {
|
name: "PrimitiveCell",
|
components: {
|
PrimitiveCellDetailDialog,
|
DetailConditionDialog,
|
EditConditionDialog,
|
},
|
data() {
|
return {
|
detailDialogVisible: false,
|
detailDialogValue: {},
|
dialogVisible: false,
|
currentType: "list",
|
detailVisible: false,
|
editDialogVisible: false,
|
showDelConfirm: false,
|
editDialogValue: {},
|
currentDetail: {},
|
roleType: Number(JSON.parse(sessionStorage.getItem("userInfo")).roleType),
|
form: {
|
identifyingStrainCode: "",
|
identifyingStrainName: "",
|
validationExperimentCode: "",
|
startTime: "",
|
endTime: "",
|
isDraft: 0,
|
strainType: 1,
|
},
|
queryForm: {
|
pageSize: 10,
|
pageNum: 1,
|
},
|
total: 0,
|
tableData: [],
|
};
|
},
|
methods: {
|
handleDetail(row) {
|
row.experimentTime = moment(row.experimentTime).format('YYYY-MM-DD')
|
this.currentDetail = row;
|
this.detailVisible = true;
|
},
|
handleDetail2(row) {
|
this.detailDialogValue = row;
|
this.detailDialogVisible = true;
|
},
|
handleViewMore() {
|
this.dialogVisible = true;
|
},
|
viewDetail(row) {
|
row.isDetail = true;
|
this.editDialogValue = row;
|
this.editDialogVisible = true;
|
},
|
resetForm() {
|
this.form = {
|
identifyingStrainCode: "",
|
identifyingStrainName: "",
|
startTime: "",
|
endTime: "",
|
validationExperimentCode: "",
|
isDraft: this.currentType === 'draft' ? 1 : 0,
|
strainType: 1,
|
};
|
this.searchData();
|
},
|
async searchData() {
|
const params = {
|
...this.form,
|
pageNum: this.queryForm.pageNum,
|
pageSize: this.queryForm.pageSize,
|
};
|
try {
|
const res = await getList(params);
|
this.tableData = res.data?.records || [];
|
this.total = res.data?.total || 0;
|
} catch (e) {
|
this.tableData = [];
|
this.total = 0;
|
}
|
},
|
handleNewStrain() {
|
this.$router.push("/strain/validation/add-primitive-cell");
|
// Implement new strain logic
|
},
|
handleBatchAdd() {
|
// Implement batch add logic
|
},
|
handleEdit(row) {
|
this.$router.push({
|
path: "/strain/validation/edit-primitive-cell",
|
query: {
|
id: row.id,
|
},
|
});
|
// Implement edit logic
|
},
|
handleDelete(row) {
|
this.currentDetail = row;
|
this.showDelConfirm = true;
|
},
|
handleDelConfirm() {
|
delTwo({ id: this.currentDetail.id }).then(res => {
|
this.$message.success('删除成功')
|
this.showDelConfirm = false
|
if (this.tableData.length == 1 && this.queryForm.pageNum > 1) {
|
this.queryForm.pageNum -= 1;
|
}
|
this.searchData()
|
})
|
},
|
handleCurrentChange(page) {
|
this.queryForm.pageNum = page;
|
this.searchData();
|
},
|
handleSizeChange(size) {
|
this.queryForm.pageSize = size;
|
this.searchData();
|
},
|
handleTypeChange(type) {
|
this.currentType = type;
|
this.form.isDraft = type === "draft" ? 1 : 0;
|
this.form.strainType = 1; // 1: 原始细胞库
|
this.searchData();
|
},
|
},
|
mounted() {
|
this.searchData();
|
},
|
};
|
</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;
|
}
|
}
|
}
|
}
|
}
|
.ellipsis-text {
|
display: -webkit-box;
|
-webkit-line-clamp: 3;
|
-webkit-box-orient: vertical;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
word-break: break-all;
|
}
|
</style>
|
