From e950c38ba82e5e6bc8b0c50c35e5dbb6a180165a Mon Sep 17 00:00:00 2001 From: 13404089107 <puwei@sinata.cn> Date: 星期二, 20 五月 2025 16:43:06 +0800 Subject: [PATCH] Merge branch 'main' of http://120.76.84.145:10101/gitblit/r/H5/leshan-laboratory --- culture/src/views/strain-library/validation/chief-cell/index.vue | 435 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 435 insertions(+), 0 deletions(-) diff --git a/culture/src/views/strain-library/validation/chief-cell/index.vue b/culture/src/views/strain-library/validation/chief-cell/index.vue new file mode 100644 index 0000000..6cd4491 --- /dev/null +++ b/culture/src/views/strain-library/validation/chief-cell/index.vue @@ -0,0 +1,435 @@ +<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 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="strainNo" label="菌种来源" /> + <el-table-column prop="strainNo" label="鉴别菌株编号" /> + <el-table-column prop="strainName" label="鉴别菌株名称" /> + <el-table-column prop="source" label="验证实验编号" /> + <el-table-column prop="method" label="创建人" /> + <el-table-column prop="certificate" 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="handleDetail(row)">详情</el-button> + <el-button type="text" @click="handleEdit(row)">编辑</el-button> + <el-button type="text" @click="handleRecord(row)">删除</el-button> + <el-button type="text" @click="handleRecord(row)">确认</el-button> + + </template> + </el-table-column> + </template> + </TableCustom> + </div> +</template> + +<script> + +export default { + name: 'ChiefCell', + components: { + }, + data() { + return { + 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: { + 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-library/strain-library-manage/add') + // Implement new strain logic + }, + handleBatchAdd() { + // Implement batch add logic + }, + handleDetail(row) { + this.currentDetail = row; + this.detailVisible = true; + }, + 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> -- Gitblit v1.7.1