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/primitive-cell/confirm-detail.vue | 254 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 254 insertions(+), 0 deletions(-) diff --git a/culture/src/views/strain-library/validation/primitive-cell/confirm-detail.vue b/culture/src/views/strain-library/validation/primitive-cell/confirm-detail.vue new file mode 100644 index 0000000..45d90ba --- /dev/null +++ b/culture/src/views/strain-library/validation/primitive-cell/confirm-detail.vue @@ -0,0 +1,254 @@ +<template> + <Card class="confirm-detail-page"> + <el-card class="top-card"> + <el-row :gutter="24" class="top-info-row"> + <el-col :span="8" class="info-col"> + <div class="info-item"><span class="label">菌种来源:</span>{{ detail.source }}</div> + <div class="info-item"><span class="label">鉴别菌株编号:</span>{{ detail.strainNo }}</div> + <div class="info-item"><span class="label">鉴别菌株名称:</span>{{ detail.strainName }}</div> + </el-col> + <el-col :span="8" class="info-col"> + <div class="info-item"><span class="label">验证实验编号:</span>{{ detail.verifyNo }}</div> + <div class="info-item"><span class="label">实验时间:</span>{{ detail.experimentTime }}</div> + <div class="info-item"></div> + </el-col> + <el-col :span="8" class="info-col "> + <div class="info-item sign-label"><span class="label">菌种实验员签字</span></div> + <div class="info-item signature-item"> + <div class="signature-area"> + <img v-if="detail.signature" :src="detail.signature" alt="签字" /> + <span v-else class="waiting-text">暂无签名</span> + </div> + </div> + </el-col> + </el-row> + </el-card> + <div class="section-card" style="margin-top: 24px;"> + <el-form label-width="100px" label-position="top"> + <el-form-item label="实验结论"> + <el-input type="textarea" v-model="detail.conclusion" :rows="3" placeholder="请输入" /> + </el-form-item> + <el-form-item label="批准菌株用途"> + <el-checkbox-group v-model="detail.usage"> + <el-checkbox label="传代" /> + <el-checkbox label="菌种保藏" /> + <el-checkbox label="废弃" /> + </el-checkbox-group> + </el-form-item> + </el-form> + </div> + <el-button type="primary" @click="handleSave" class="el-icon-plus"> 新增</el-button> + <EditConditionDialog + :visible.sync="dialogVisible" + :isEdit="dialogIsEdit" + :isFixed="dialogIsFixed" + :value="dialogValue" + @ok="handleDialogOk" + /> + + <div class="section-card" style="margin-top: 12px;"> + <el-table :data="tableData" border style="width: 100%;" :row-class-name="getRowClassName"> + <el-table-column prop="condition" label="菌种培养工艺条件" /> + <el-table-column prop="record" label="菌种培养工艺实况记录" /> + <el-table-column prop="process" label="菌种培养标准工艺" /> + <el-table-column label="操作" width="120"> + <template #default="{ row }"> + <el-button type="text" @click="handleEdit(row)">编辑</el-button> + <el-button type="text" @click="handleDetail(row)">详情2</el-button> + </template> + </el-table-column> + </el-table> + </div> + <div class="footer-btns"> + <el-button type="primary" @click="handleSave">保存</el-button> + <el-button @click="handleDraft">存稿</el-button> + </div> + <DetailConditionDialog + :visible.sync="detailDialogVisible" + :value="detailDialogValue" + /> + </Card> +</template> + +<script> +import EditConditionDialog from './EditConditionDialog.vue' +import DetailConditionDialog from './DetailConditionDialog.vue' +export default { + name: 'ConfirmDetail', + components: { EditConditionDialog, DetailConditionDialog }, + data() { + return { + detail: { + source: '内容的内容内容内容', + strainNo: '3411234', + strainName: '名称名称名称', + verifyNo: '34133214', + experimentTime: '2025-1-23 11:10:28', + signature: '', // 签名图片url + conclusion: '', + usage: [] + }, + activeTab: 'condition', + initialTableData: [ + { condition: '平板培养基', record: '文字内容文字内容文字内容文字内容文字内容文字内容', process: '文字内容文字内容文字内容文字内容文字内容文字内容' }, + { condition: '培养温度', record: '', process: '' }, + { condition: '培养时间', record: '', process: '' }, + { condition: '摇瓶培养基', record: '', process: '' }, + { condition: '接种量', record: '', process: '' }, + { condition: '培养时间', record: '', process: '' }, + { condition: '发酵时间', record: '', process: '' }, + { condition: '检测数据及结果', record: '', process: '' } + ], + tableData: [ + { condition: '平板培养基', record: '文字内容文字内容文字内容文字内容文字内容文字内容', process: '文字内容文字内容文字内容文字内容文字内容文字内容' }, + { condition: '培养温度', record: '', process: '' }, + { condition: '培养时间', record: '', process: '' }, + { condition: '摇瓶培养基', record: '', process: '' }, + { condition: '接种量', record: '', process: '' }, + { condition: '培养时间', record: '', process: '' }, + { condition: '发酵时间', record: '', process: '' }, + { condition: '检测数据及结果', record: '', process: '' } + ], + dialogVisible: false, + dialogIsEdit: false, + dialogIsFixed: false, + dialogValue: {}, + dialogIndex: null, + detailDialogVisible: false, + detailDialogValue: {} + } + }, + methods: { + handleEdit(row) { + const idx = this.tableData.indexOf(row) + this.dialogVisible = true + this.dialogIsEdit = true + this.dialogIsFixed = idx < this.initialTableData.length + this.dialogValue = { ...row } + this.dialogIndex = idx + }, + handleDetail(row) { + this.detailDialogVisible = true + this.detailDialogValue = { ...row } + }, + handleSave() { + this.dialogVisible = true + this.dialogIsEdit = false + this.dialogIsFixed = false + this.dialogValue = { condition: '', record: '', process: '' } + this.dialogIndex = null + }, + handleDraft() { + // 存稿逻辑 + }, + handleDialogOk(val) { + if (this.dialogIsEdit && this.dialogIndex !== null) { + this.$set(this.tableData, this.dialogIndex, val) + } else { + this.tableData.push(val) + } + }, + getRowClassName({ rowIndex }) { + return rowIndex < this.initialTableData.length ? 'fixed-row' : ''; + } + } +} +</script> + +<style scoped lang="less"> +.top-card { + margin-bottom: 0; + background: rgba(239, 239, 239, 1); + border-radius: 16px; +} + +.top-info-row { + align-items: stretch; +} + +.info-col { + display: flex; + flex-direction: column; + +} + +.info-item { + display: flex; + font-size: 15px; + height: 45px; + line-height: 45px; +} + +.label { + color: #666; + font-weight: 500; +} + +.sign-col { + align-items: center; + text-align: center; +} + +.sign-label { + justify-content: center; +} + +.signature-item { + justify-content: center; +} + +.signature-area { + min-height: 80px; + min-width: 120px; + background: #f5f7fa; + border: 1px solid #dcdfe6; + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; + margin-top: 8px; +} + +.signature-area img { + max-width: 100%; + max-height: 100%; + display: block; +} + +.waiting-text { + color: #909399; + font-size: 14px; +} + +.sign-time { + justify-content: center; + text-align: center; + color: #666; + font-size: 14px; +} + +.section-card { + margin-bottom: 0; +} + +.footer-btns { + display: flex; + justify-content: center; + padding: 24px; + padding-bottom: 0; + gap: 24px; + .el-button { + width: 150px; + } +} + +::v-deep(.fixed-row) { + background-color: rgb(228, 248, 250) !important; +} + +@media (max-width: 900px) { + .info-col { + height: auto; + } +} +</style> \ No newline at end of file -- Gitblit v1.7.1