From 4a364d65d24020dcacab6c1ee86f854d8de8cd36 Mon Sep 17 00:00:00 2001
From: pyt <626651354@qq.com>
Date: 星期一, 19 五月 2025 09:05:19 +0800
Subject: [PATCH] feat
---
culture/src/views/strain-library/strain-library-manage/components/StrainDetail.vue | 210 +++++++++++++++++++++++++++++-----------------------
1 files changed, 117 insertions(+), 93 deletions(-)
diff --git a/culture/src/views/strain-library/strain-library-manage/components/StrainDetail.vue b/culture/src/views/strain-library/strain-library-manage/components/StrainDetail.vue
index 6b64853..eaa73e3 100644
--- a/culture/src/views/strain-library/strain-library-manage/components/StrainDetail.vue
+++ b/culture/src/views/strain-library/strain-library-manage/components/StrainDetail.vue
@@ -1,94 +1,99 @@
<template>
- <el-dialog
- title="原始细胞库详情"
- :visible.sync="visible"
- width="70%"
- :close-on-click-modal="false"
- custom-class="strain-detail-dialog"
- append-to-body
- @close="$emit('update:visible', false)"
- >
- <div class="strain-info">
- <!-- 第一行信息 -->
- <div class="info-row">
- <div class="info-item left-column">
- <span class="label">菌种编号：</span>
- <span class="value">{{ detail.strainNo }}</span>
+ <div>
+ <el-dialog title="原始细胞库详情" :visible.sync="visible" width="70%" :close-on-click-modal="false"
+ custom-class="strain-detail-dialog" @close="$emit('update:visible', false)" @opened="fetchDetail">
+ <div class="strain-info">
+ <!-- 第一行信息 -->
+ <div class="info-row">
+ <div class="info-item left-column">
+ <span class="label">菌种编号：</span>
+ <span class="value">{{ detail.strainCode }}</span>
+ </div>
+ <div class="info-item flex-column">
+ <span class="label">鉴定方法：</span>
+ <span class="value">{{ detail.appraisalMethod }}</span>
+ </div>
+ <div class="info-item flex-column">
+ <span class="label">保藏位置：</span>
+ <span class="value">{{ detail.saveLocation }}</span>
+ </div>
</div>
- <div class="info-item flex-column">
- <span class="label">鉴定方法：</span>
- <span class="value">{{ detail.method }}</span>
- </div>
- <div class="info-item flex-column">
- <span class="label">保存位置：</span>
- <span class="value">{{ detail.amount }}</span>
- </div>
- </div>
-
- <!-- 第二行信息 -->
- <div class="info-row">
- <div class="info-item left-column">
- <span class="label">菌种名称：</span>
- <span class="value">{{ detail.strainName }}</span>
- </div>
- <div class="info-item flex-column full-width">
- <span class="label">特性描述：</span>
- <span class="value">{{ detail.certificate }}</span>
- </div>
- </div>
-
- <!-- 第三行信息 -->
- <div class="info-row">
- <div class="info-item left-column">
- <span class="label">菌种来源：</span>
- <span class="value">{{ detail.source }}</span>
- </div>
- <div class="info-item flex-column">
- <span class="label">菌种保存方法：</span>
- <span class="value">{{ detail.storage }}</span>
- </div>
- <div class="info-item flex-column">
- <span class="label">出入库状态：</span>
- <span class="value">{{ detail.operator }}</span>
- </div>
- </div>
- </div>
- <div class="record-table">
- <div class="table-title">原始细胞库出/入库记录</div>
- <el-table :data="detail.records" style="width: 100%">
- <el-table-column prop="type" label="出库/入库" />
- <el-table-column prop="operateTime" label="操作时间" />
- <el-table-column prop="operator" label="操作人姓名" />
- <el-table-column prop="reviewer" label="签核确认人姓名" />
- <el-table-column prop="status" label="状态">
- <template #default="{ row }">
- <el-tag :type="row.status === '已确认' ? 'success' : 'warning'">
- {{ row.status }}
- </el-tag>
- </template>
- </el-table-column>
- <el-table-column label="操作" width="100">
- <template #default="{ row }">
- <el-button type="text" @click="handleView(row)">详情</el-button>
- </template>
- </el-table-column>
- </el-table>
- <div class="pagination">
- <el-pagination
- :current-page.sync="currentPage"
- :page-size="10"
- layout="total, prev, pager, next"
- :total="total"
- @current-change="handlePageChange"
- />
+ <!-- 第二行信息 -->
+ <div class="info-row">
+ <div class="info-item left-column">
+ <span class="label">菌种名称：</span>
+ <span class="value">{{ detail.strainName }}</span>
+ </div>
+ <div class="info-item flex-column full-width">
+ <span class="label">特性描述：</span>
+ <span class="value">{{ detail.features }}</span>
+ </div>
+ </div>
+
+ <!-- 第三行信息 -->
+ <div class="info-row">
+ <div class="info-item left-column">
+ <span class="label">菌种来源：</span>
+ <span class="value">{{ detail.strainSource }}</span>
+ </div>
+ <div class="info-item flex-column">
+ <span class="label">菌种保存方法：</span>
+ <span class="value">{{ detail.saveMethod }}</span>
+ </div>
+ <div class="info-item flex-column">
+ <span class="label">出入库状态：</span>
+ <span class="value">{{ {
+ 1: '已出库',
+ 2: '出库待确认',
+ 3: '已入库',
+ 4: '入库待确认'
+ }[detail.status] || '' }}</span>
+ </div>
+ </div>
</div>
- </div>
- </el-dialog>
+
+ <div class="record-table">
+ <div class="table-title">原始细胞库出/入库记录</div>
+ <el-table :data="detail.records" style="width: 100%">
+ <el-table-column label="出库/入库">
+ <template #default="{ row }">
+ {{ { 1: '出库', 2: '入库' }[row.type] || '' }}
+ </template>
+ </el-table-column>
+ <el-table-column prop="boundTime" label="操作时间" />
+ <el-table-column prop="handleName" label="操作人姓名" />
+ <el-table-column prop="preserveName" label="签核确认人姓名" />
+ <el-table-column label="状态">
+ <template #default="{ row }">
+ <el-tag :type="row.confirmTime ? 'success' : 'warning'">
+ {{ row.confirmTime ? '已确认' : '待确认' }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column label="操作" width="100">
+ <template #default="{ row }">
+ <el-button type="text" @click="handleView(row)">确认</el-button>
+ <el-button style="margin-left: 10px;" type="text" @click="handleView(row)">详情</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <div class="pagination">
+ <el-pagination :current-page.sync="currentPage" :page-size="10" layout="total, prev, pager, next"
+ :total="total" @current-change="handlePageChange" />
+ </div>
+ </div>
+ </el-dialog>
+ <RecordDetailDialog :visible="visibleRecordDetailDialog" :recordData="recordData" @close="visibleRecordDetailDialog = false" />
+ </div>
+
</template>
<script>
+import { getDetailById } from '../service'
+import RecordDetailDialog from './RecordDetailDialog.vue'
export default {
+ components: { RecordDetailDialog },
name: 'StrainDetail',
props: {
visible: {
@@ -102,13 +107,32 @@
},
data() {
return {
+ visibleRecordDetailDialog: false,
+ recordData: {},
currentPage: 1,
- total: 0
+ total: 0,
+ query: {
+ endTime: '',
+ id: '',
+ pageNum: 1,
+ pageSize: 10,
+ startTime: ''
+ }
}
},
methods: {
+ fetchDetail() {
+ this.query.id = this.detail.id
+ getDetailById(this.query).then(res => {
+ this.detail.records = res.warehousingList?.records || [];
+ this.total = res.warehousingList?.total || 0;
+ this.currentPage = res.warehousingList?.current || 1;
+ })
+ },
handleView(row) {
console.log('View record:', row)
+ this.visibleRecordDetailDialog = true;
+ this.recordData = row;
},
handlePageChange(page) {
this.currentPage = page
@@ -124,7 +148,7 @@
padding: 20px;
border-bottom: 1px solid #EBEEF5;
margin-right: 0;
-
+
.el-dialog__title {
font-size: 18px;
font-weight: bold;
@@ -147,38 +171,38 @@
display: flex;
flex-wrap: wrap;
margin-bottom: 16px;
-
+
&:last-child {
margin-bottom: 0;
}
-
+
.info-item {
display: flex;
align-items: flex-start;
margin-right: 24px;
margin-bottom: 8px;
-
+
&.left-column {
width: 33%;
min-width: 200px;
}
-
+
&.flex-column {
flex: 1;
min-width: 150px;
}
-
+
&.full-width {
flex: 1;
min-width: 300px;
}
-
+
.label {
color: #606266;
margin-right: 8px;
white-space: nowrap;
}
-
+
.value {
flex: 1;
color: #303133;
@@ -204,4 +228,4 @@
justify-content: center;
}
}
-</style>
\ No newline at end of file
+</style>
\ No newline at end of file
--
Gitblit v1.7.1