<template>
|
<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-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 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: {
|
type: Boolean,
|
default: false
|
},
|
detail: {
|
type: Object,
|
default: () => ({})
|
}
|
},
|
data() {
|
return {
|
visibleRecordDetailDialog: false,
|
recordData: {},
|
currentPage: 1,
|
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
|
this.$emit('page-change', page)
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.strain-detail-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;
|
}
|
}
|
|
.strain-info {
|
background: #F5F7FA;
|
border-radius: 4px;
|
padding: 20px;
|
margin-bottom: 20px;
|
|
.info-row {
|
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;
|
word-break: break-all;
|
}
|
}
|
}
|
}
|
|
.record-table {
|
.table-title {
|
font-size: 16px;
|
font-weight: bold;
|
color: #303133;
|
margin-bottom: 16px;
|
padding-left: 8px;
|
border-left: 4px solid #049C9A;
|
}
|
|
.pagination {
|
margin-top: 20px;
|
display: flex;
|
justify-content: center;
|
}
|
}
|
</style>
|
