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/DetailConditionDialog.vue | 282 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 282 insertions(+), 0 deletions(-) diff --git a/culture/src/views/strain-library/validation/primitive-cell/DetailConditionDialog.vue b/culture/src/views/strain-library/validation/primitive-cell/DetailConditionDialog.vue new file mode 100644 index 0000000..b615204 --- /dev/null +++ b/culture/src/views/strain-library/validation/primitive-cell/DetailConditionDialog.vue @@ -0,0 +1,282 @@ +<template> + <el-dialog :visible.sync="visible" width="80%" @close="handleClose"> + <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> + <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> + </template> + </el-table-column> + </el-table> + </div> + </el-dialog> +</template> + +<script> +import EditConditionDialog from "./EditConditionDialog.vue"; +import DetailConditionDialog from "./DetailConditionDialog.vue"; +export default { + name: "DetailConditionDialog", + components: { EditConditionDialog, DetailConditionDialog }, + props: { + visible: Boolean, + value: { + type: Object, + default: () => ({ condition: "", record: "", process: "" }), + }, + }, + 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, + }; + }, + methods: { + handleClose() { + this.$emit("update:visible", false); + }, + 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; + }, + + 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"> +.el-dialog__body { + padding-bottom: 0; +} +.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> -- Gitblit v1.7.1