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/pedigree-chart/progenitorComponents/AddAncestor.vue | 262 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 262 insertions(+), 0 deletions(-) diff --git a/culture/src/views/pedigree-chart/progenitorComponents/AddAncestor.vue b/culture/src/views/pedigree-chart/progenitorComponents/AddAncestor.vue new file mode 100644 index 0000000..002863a --- /dev/null +++ b/culture/src/views/pedigree-chart/progenitorComponents/AddAncestor.vue @@ -0,0 +1,262 @@ +<template> + <!-- 设置传代计划数弹窗 --> + <el-dialog :title="planForm.status == 'add' ? '新增菌种传代项' : '菌种传代项详情'" :visible.sync="planDialogVisible" width="40%" + :close-on-click-modal="false"> + <el-form :model="planForm" :rules="planRules" ref="planForm" label-position="top"> + <el-row :gutter="20"> + <el-col :span="16"> + <el-form-item label="菌株类型" required> + <div class="type-box" v-if="planForm.status == 'add'"> + <div @click="handleType(index)" v-for="(item, index) in ['原始祖代菌株SO', '分离菌落 CO', '祖代菌株 O']" + :key="item" class="type-box-item" + :class="index + 1 == planForm.activeType && 'activeType'"> + <div class="type-box-item-text">{{ item }}</div> + <img v-if="index + 1 == planForm.activeType" class="type-box-item-select" + src="../../../assets/public/selectType.png" /> + </div> + </div> + <div v-else class="type-box"> + <div class="type-box-item activeType"> + {{ ['原始祖代菌株SO', '分离菌落 CO', '祖代菌株 O'][planForm.activeType - 1] }} + </div> + </div> + </el-form-item> + </el-col> + <el-col :span="20" v-if="planForm.activeType == 1"> + <el-form-item label="来源获得" prop="source"> + <el-input :disabled="planForm.status != 'add'" v-model="planForm.source" + placeholder="请输入"></el-input> + </el-form-item> + </el-col> + <el-col :span="10" v-else> + <el-form-item label="菌落编号" prop="source"> + <el-input :disabled="planForm.status != 'add'" v-model="planForm.source" + placeholder="请输入"></el-input> + </el-form-item> + </el-col> + <el-col :span="10"> + <el-form-item label="菌种名称" prop="inoculateName"> + <el-input :disabled="planForm.status != 'add'" v-model="planForm.inoculateName" + placeholder="请输入"></el-input> + </el-form-item> + </el-col> + <el-col :span="10"> + <el-form-item label="菌种编号" prop="inoculateNo"> + <el-input :disabled="planForm.status != 'add'" v-model="planForm.inoculateNo" + placeholder="请输入"></el-input> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="20"> + <el-col :span="10"> + <el-form-item label="保存/废弃" required> + <div class="flex-row" v-if="planForm.status == 'add'"> + <div @click="handleStatus('save')" :class="planForm.isDiscarded && 'active'">保存</div> + <div @click="handleStatus('discard')" :class="!planForm.isDiscarded && 'active'">废弃</div> + </div> + <div v-else class="activeStatus"> + 保存 + </div> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="20" v-if="!planForm.isDiscarded"> + <el-col :span="10"> + <el-form-item label="废弃原因说明" required> + <el-input :disabled="planForm.status != 'add'" v-model="planForm.discardReason" + placeholder="请输入"></el-input> + </el-form-item> + </el-col> + </el-row> + <el-row :gutter="20"> + <el-col :span="10"> + <el-form-item label="菌种入库时间"> + <el-input disabled v-model="planForm.inTime"></el-input> + </el-form-item> + </el-col> + </el-row> + <el-row v-if="planForm.status != 'add'" :gutter="20"> + <el-col :span="10"> + <el-form-item label="接种操作人签字"> + <el-image /> + </el-form-item> + </el-col> + <el-col :span="10"> + <el-form-item label="菌种保藏人签字"> + <el-image /> + </el-form-item> + </el-col> + </el-row> + </el-form> + <div v-if="planForm.status == 'add'" class="dialog-footer"> + <el-button>保存草稿</el-button> + <el-button type="primary" @click="handleAddPlan">提交</el-button> + </div> + </el-dialog> +</template> +<script> +export default { + data() { + return { + planDialogVisible: false, + planForm: {}, + planRules: { + inoculateNo: [ + { required: true, message: '请输入菌种编号', trigger: 'blur' } + ], + inoculateName: [ + { required: true, message: '请输入菌种名称', trigger: 'blur' } + ], + source: [ + { required: true, message: '请输入来源获得', trigger: 'blur' } + ], + }, + dialogTitle: '' + } + }, + methods: { + openInitData(value) { + this.planForm = value + this.openDialog() + }, + openDialog() { + this.planDialogVisible = true + }, + closeDialog() { + this.planDialogVisible = false + }, + handleAddPlan() { + this.$refs.planForm.validate((valid) => { + if (valid) { + if (!this.planForm.activeType) { + this.$message.warning('请选择菌株类型'); + return + } + this.$emit('addNodeSign', this.planForm, 1) + } + }) + }, + handleStatus(status) { + if (this.planForm.status != 'add') return + this.planForm.isDiscarded = status === 'save' + this.$forceUpdate() + }, + handleType(index) { + if (this.planForm.status != 'add') return + this.planForm.activeType = index + 1 + } + } +} +</script> +<style scoped lang="less"> +.dialog-footer { + margin-top: 39px; + display: flex; + justify-content: center; + gap: 60px; + + .el-button--primary { + width: 150px; + height: 40px; + background: #049C9A; + border-radius: 4px; + } + + .el-button--default { + + width: 150px; + height: 40px; + border-radius: 4px; + } +} + +::v-deep .el-input-number .el-input__inner { + text-align: left; +} + +.el-input-number--small { + width: 100%; +} + +.flex-row { + width: 370px; + display: flex; + align-items: center; + font-size: 16px; + color: #333333; + padding: 4px; + border-radius: 10px; + border: 2px solid rgba(4, 156, 154, 0.5); + font-family: 'PingFangSCRegular'; + + .flex-row-save { + background: #049C9A; + color: #fff; + } + + div { + width: 183px; + height: 32px; + text-align: center; + flex-shrink: 0; + cursor: pointer; + } + + .active { + font-family: 'SourceHanSansCN-Medium'; + color: #049C9A; + background: #EBFEFD; + box-shadow: 0px 0px 6px 0px rgba(10, 109, 108, 0.25); + border-radius: 10px; + } +} + +.activeStatus { + font-family: 'SourceHanSansCN-Medium'; + color: #049C9A; + background: #EBFEFD; + border-radius: 10px; + width: 183px; + line-height: 40px; + border-radius: 10px; + text-align: center; + font-weight: 500; + font-size: 16px; +} + +.type-box { + display: flex; + align-items: center; + gap: 11px; + + .activeType { + background: #EBFEFD; + font-weight: 500; + color: #049C9A; + } + + &-item { + cursor: pointer; + position: relative; + width: 150px; + text-align: center; + background: #F5F5F5; + border-radius: 4px; + font-weight: 400; + font-size: 16px; + color: #333333; + + &-text { + line-height: 40px; + } + + &-select { + position: absolute; + bottom: 0; + right: 0; + width: 21px; + height: 17px; + } + } +} +</style> \ No newline at end of file -- Gitblit v1.7.1