<template>
|
<el-dialog
|
:visible.sync="visible"
|
width="88%"
|
top="6vh"
|
custom-class="validation-simple-detail-dialog"
|
:close-on-click-modal="false"
|
@close="handleClose"
|
>
|
<div class="validation-overview">
|
<div class="stacked-field">
|
<span class="field-label">菌种来源</span>
|
<div class="value-box multiline-box source-box">{{ detail.strainSource || '-' }}</div>
|
</div>
|
<div class="project-header">
|
<span class="project-label">项目组：</span>
|
<span class="project-name">{{ detail.projectName || '-' }}</span>
|
</div>
|
<div class="detail-panel">
|
<div class="single-field-row">
|
<div class="inline-field code-field">
|
<span class="field-label">鉴别菌株编号</span>
|
<div class="value-box compact-box">{{ detail.identifyingStrainCode || '-' }}</div>
|
</div>
|
</div>
|
<div class="stacked-field name-field">
|
<span class="field-label">鉴别菌株名称</span>
|
<div class="value-box multiline-box">{{ detail.identifyingStrainName || '-' }}</div>
|
</div>
|
<div class="paired-fields">
|
<div class="inline-field">
|
<span class="field-label">验证实验编号</span>
|
<div class="value-box compact-box">{{ detail.validationExperimentCode || '-' }}</div>
|
</div>
|
<div class="inline-field time-field">
|
<span class="field-label">实验时间</span>
|
<div class="value-box compact-box">{{ detail.experimentTime || '-' }}</div>
|
</div>
|
</div>
|
<div class="paired-fields signature-row">
|
<div class="inline-field">
|
<span class="field-label">菌种实验员签字</span>
|
<div class="signature-area">
|
<el-image v-if="detail.handleSignature" :src="getFullUrl(detail.handleSignature)"
|
:preview-src-list="[getFullUrl(detail.handleSignature)]" fit="contain" alt="菌种实验员签字" />
|
<span v-else class="waiting-text">暂无签名</span>
|
</div>
|
</div>
|
<div class="inline-field time-field">
|
<span class="field-label">签字时间</span>
|
<div class="value-box compact-box">{{ detail.handleTime || '-' }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { getFullUrl } from '@/utils/utils'
|
export default {
|
name: 'PrimitiveCellDetailDialog',
|
props: {
|
visible: Boolean,
|
detail: {
|
type: Object,
|
default: () => ({
|
strainSource: '',
|
identifyingStrainCode: '',
|
identifyingStrainName: '',
|
validationExperimentCode: '',
|
experimentTime: '',
|
handleSignature: '',
|
handleTime: ''
|
})
|
}
|
},
|
methods: {
|
getFullUrl(url) {
|
if (url) return getFullUrl(url);
|
return ''
|
},
|
handleClose() {
|
this.$emit('update:visible', false)
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
::v-deep(.validation-simple-detail-dialog) {
|
max-width: 1320px;
|
}
|
|
.validation-overview {
|
color: #303133;
|
font-size: 15px;
|
}
|
.field-label {
|
display: block;
|
margin-bottom: 8px;
|
color: #606266;
|
font-weight: 600;
|
line-height: 22px;
|
white-space: nowrap;
|
}
|
.value-box {
|
min-width: 0;
|
padding: 8px 12px;
|
color: #303133;
|
background: #fff;
|
border: 1px solid #dcdfe6;
|
border-radius: 4px;
|
box-sizing: border-box;
|
line-height: 22px;
|
word-break: break-word;
|
overflow-wrap: anywhere;
|
}
|
.multiline-box {
|
min-height: 72px;
|
white-space: pre-wrap;
|
}
|
.source-box {
|
min-height: 68px;
|
}
|
.validation-overview > .stacked-field {
|
margin: 0 32px;
|
}
|
.validation-overview > .stacked-field .field-label {
|
padding-left: 112px;
|
}
|
.project-header {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
min-height: 52px;
|
padding: 10px 20px;
|
margin: 16px 0;
|
background: #f0f8fb;
|
border: 1px solid #b9dfe6;
|
border-radius: 6px;
|
box-sizing: border-box;
|
}
|
.project-label {
|
margin: 0 8px 0 0;
|
color: #4d5965;
|
font-size: 16px;
|
}
|
.project-name {
|
color: #1890ff;
|
font-size: 18px;
|
font-weight: 700;
|
word-break: break-word;
|
}
|
.detail-panel {
|
padding: 24px 40px 28px;
|
background: #f3f4f6;
|
border: 1px solid #e2e6eb;
|
border-radius: 6px;
|
box-sizing: border-box;
|
}
|
.single-field-row {
|
display: flex;
|
padding-left: 42px;
|
}
|
.inline-field {
|
display: grid;
|
grid-template-columns: 150px minmax(0, 1fr);
|
column-gap: 12px;
|
align-items: center;
|
min-width: 0;
|
}
|
.inline-field .field-label {
|
margin-bottom: 0;
|
}
|
.code-field {
|
width: 100%;
|
max-width: 416px;
|
grid-template-columns: 160px minmax(0, 1fr);
|
}
|
.compact-box {
|
display: flex;
|
align-items: center;
|
min-height: 40px;
|
}
|
.name-field {
|
margin-top: 22px;
|
}
|
.name-field .field-label {
|
padding-left: 42px;
|
}
|
.paired-fields {
|
display: grid;
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
gap: 72px;
|
margin-top: 22px;
|
padding: 0 32px;
|
}
|
.time-field {
|
grid-template-columns: 100px minmax(0, 1fr);
|
}
|
.paired-fields .compact-box,
|
.paired-fields .signature-area {
|
width: 100%;
|
max-width: 265px;
|
}
|
.signature-row {
|
align-items: start;
|
}
|
.signature-row .signature-area {
|
max-width: 260px;
|
}
|
.signature-area {
|
width: 100%;
|
height: 72px;
|
background: #fff;
|
border: 1px solid #dcdfe6;
|
border-radius: 4px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
}
|
.signature-area .el-image {
|
width: 100%;
|
height: 100%;
|
}
|
.waiting-text {
|
color: #909399;
|
font-size: 14px;
|
}
|
@media (max-width: 900px) {
|
.detail-panel {
|
padding: 20px;
|
}
|
.paired-fields {
|
grid-template-columns: 1fr;
|
gap: 16px;
|
padding: 0;
|
}
|
}
|
@media (max-width: 600px) {
|
.inline-field {
|
display: block;
|
}
|
.inline-field .field-label {
|
margin-bottom: 8px;
|
}
|
.single-field-row {
|
padding-left: 0;
|
}
|
.name-field .field-label,
|
.validation-overview > .stacked-field .field-label {
|
padding-left: 0;
|
}
|
.validation-overview > .stacked-field {
|
margin: 0;
|
}
|
}
|
</style>
|
