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/breeding-record/add.vue | 478 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 478 insertions(+), 0 deletions(-)
diff --git a/culture/src/views/strain-library/breeding-record/add.vue b/culture/src/views/strain-library/breeding-record/add.vue
new file mode 100644
index 0000000..4fc6c3f
--- /dev/null
+++ b/culture/src/views/strain-library/breeding-record/add.vue
@@ -0,0 +1,478 @@
+<template>
+ <div>
+ <Card>
+ <el-form ref="form" :model="form" :rules="rules" inline label-position="top">
+ <div class="header-title" style="width: 100%">
+ <div class="header-title-left">
+ <img src="@/assets/public/headercard.png" />
+ <div>来源类型</div>
+ </div>
+ </div>
+ <div class="flex" style="margin-bottom: 20px">
+ <div class="tabs">
+ <div :class="{ active: activeTab === 'strain' }" @click="activeTab = 'strain'">
+ 来源菌株
+ </div>
+ <div :class="{ active: activeTab === 'material' }" @click="activeTab = 'material'">
+ 来源物资
+ </div>
+ </div>
+ </div>
+ <!-- 来源菌株 -->
+ <el-row v-if="activeTab === 'strain'" :gutter="10">
+ <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
+ <el-form-item label="菌株编号" prop="strainCode" required>
+ <el-input v-model="form.strainCode" class="w-380" placeholder="请输入菌株编号" />
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
+ <el-form-item label="菌株名称" prop="strainName" required>
+ <el-input v-model="form.strainName" class="w-380" placeholder="请输入菌株名称" />
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
+ <el-form-item label="培养基配方" prop="mediumFormula" required>
+ <el-input v-model="form.mediumFormula" class="w-380" placeholder="请输入培养基配方" />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <!-- 来源物资 -->
+ <el-row v-if="activeTab === 'material'" :gutter="10">
+ <el-col :span="24">
+ <el-form-item label="来源物资、时间及批号" prop="materialCode" required>
+ <el-input v-model="form.materialCode" placeholder="请输入物资编号" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="24">
+ <el-form-item label="培养基配方" prop="materialName" required>
+ <el-input v-model="form.materialName" placeholder="请输入物资名称" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="24">
+ <el-form-item label="分离菌落编号" prop="materialDescription" required>
+ <el-input v-model="form.materialDescription" placeholder="请输入物资描述" />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <div class="header-title" style="margin-top: 20px;">
+ <div class="header-title-left">
+ <img src="@/assets/public/headercard.png" />
+ <div>培养条件</div>
+ </div>
+ </div>
+ <el-row :gutter="10">
+ <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+ <el-form-item label="培养基" prop="strainCode" required>
+ <el-input v-model="form.strainCode" class="w-380" placeholder="请输入培养基" />
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+ <el-form-item label="培养温度" prop="strainName" required>
+ <el-input v-model="form.strainName" class="w-380" placeholder="请输入培养温度" />
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+ <el-form-item label="需氧类型" prop="mediumFormula" required>
+ <el-input v-model="form.mediumFormula" class="w-380" placeholder="请输入需氧类型" />
+ </el-form-item>
+ </el-col>
+ <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+ <el-form-item label="培养时间" prop="mediumFormula" required>
+ <el-input v-model="form.mediumFormula" class="w-380" placeholder="请输入培养时间" />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <div class="header-title" style="margin-top: 20px;">
+ <div class="header-title-left">
+ <img src="@/assets/public/headercard.png" />
+ <div>一、培养基分离记录</div>
+ </div>
+ <div class="header-title-right">
+ <el-button @click="showSeparationDialog = true" class="el-icon-circle-plus-outline" type="primary">
+ 新增培养皿分离记录</el-button>
+ </div>
+ </div>
+ <Table :height="null" :queryForm="queryForm" :total="0">
+ <template>
+ <el-table-column prop="name" label="培养皿序号" />
+ <el-table-column prop="age" label="分离菌落编号" />
+ <el-table-column prop="age" label="接种操作人签字" />
+ <el-table-column prop="age" label="操作时间" />
+ <el-table-column prop="address" label="操作">
+ <template slot-scope="scope"><el-button type="text"
+ @click="handleEdit(scope.row)">编辑</el-button>
+ <el-button type="text"
+ @click="handleEdit(scope.row)">删除</el-button></template>
+ </el-table-column>
+ </template>
+ </Table>
+ <div class="header-title" style="margin-top: 20px;">
+ <div class="header-title-left">
+ <img src="@/assets/public/headercard.png" />
+ <div>二、培养皿生物学形态观察记录</div>
+ </div>
+ <div class="header-title-right">
+ <el-button @click="showObservationDialog = true" class="el-icon-circle-plus-outline" type="primary">
+ 新增观察记录</el-button>
+ </div>
+ </div>
+ <Table :height="null" :queryForm="queryForm" :total="0">
+ <template>
+ <el-table-column prop="age" label="分离菌落编号" />
+ <el-table-column prop="age" label="形状强壮度排名" />
+ <el-table-column prop="address" label="操作">
+ <template slot-scope="scope"><el-button type="text"
+ @click="handleEdit(scope.row)">形态记录</el-button>
+ <el-button type="text"
+ @click="handleEdit(scope.row)">删除</el-button></template>
+ </el-table-column>
+ </template>
+ </Table>
+ <div class="header-title" style="margin-top: 20px;">
+ <div class="header-title-left">
+ <img src="@/assets/public/headercard.png" />
+ <div>三、接种斜面记录</div>
+ </div>
+ <div class="header-title-right">
+ <el-button @click="showInoculationDialog = true" class="el-icon-circle-plus-outline" type="primary">
+ 新增斜面记录</el-button>
+ </div>
+ </div>
+ <Table :height="null" :queryForm="queryForm" :total="0">
+ <template>
+ <el-table-column prop="age" label="分离菌落编号" />
+ <el-table-column prop="age" label="接种斜面编号" />
+ <el-table-column prop="age" label="接种操作人" />
+ <el-table-column prop="age" label="接种操作人签字" />
+ <el-table-column prop="age" label="接种操作时间" />
+ <el-table-column prop="age" label="入库/废弃" />
+ <el-table-column prop="age" label="入库总数（只）" />
+ <el-table-column prop="age" label="菌种保藏人签字" />
+ <el-table-column prop="age" label="入库保藏/废弃时间" />
+
+ <el-table-column prop="address" label="操作">
+ <template slot-scope="scope">
+ <el-button type="text"
+ @click="handleEdit(scope.row)">删除</el-button></template>
+ </el-table-column>
+ </template>
+ </Table>
+ <div class="header-title" style="margin-top: 20px;">
+ <div class="header-title-left">
+ <img src="@/assets/public/headercard.png" />
+ <div>四、菌种保藏记录</div>
+ </div>
+ <div class="header-title-right">
+ <el-button @click="showPreserveDialog = true" class="el-icon-circle-plus-outline" type="primary">
+ 新增菌种保藏记录</el-button>
+ </div>
+ </div>
+ <Table :height="null" :queryForm="queryForm" :total="0">
+ <template>
+ <el-table-column prop="age" label="用于保藏的菌种编号" />
+ <el-table-column prop="age" label="实验验证结论" />
+ <el-table-column prop="age" label="保藏方法" />
+ <el-table-column prop="age" label="保藏菌种编号" />
+ <el-table-column prop="age" label="菌种保藏人签字" />
+ <el-table-column prop="age" label="保藏时间" />
+ <el-table-column prop="address" label="操作">
+ <template slot-scope="scope">
+ <el-button type="text"
+ @click="handleEdit(scope.row)">删除</el-button></template>
+ </el-table-column>
+ </template>
+ </Table>
+ <!-- 弹窗组件 -->
+ <SeparationRecordDialog
+ :visible.sync="showSeparationDialog"
+ @confirm="handleSeparationConfirm"
+ />
+ <SlantRecordDialog
+ :visible.sync="showObservationDialog"
+ @ok="handleObservationConfirm"
+ />
+ <InoculationSlopeRecordDialog
+ :visible.sync="showInoculationDialog"
+ @save="handleInoculationConfirm"
+ />
+ <PreserveStrainRecordDialog
+ :visible.sync="showPreserveDialog"
+ @save="handlePreserveConfirm"
+ />
+ <div class="end-btn">
+ <el-button type="primary">发送</el-button>
+ <el-button type="default">存草稿</el-button>
+ </div>
+ </el-form>
+ </Card>
+ </div>
+</template>
+<script>
+import AiEditor from "@/components/AiEditor";
+import SeparationRecordDialog from "./separation-record-dialog.vue";
+import SlantRecordDialog from "./SlantRecordDialog.vue";
+import InoculationSlopeRecordDialog from "./inoculation-slope-record-dialog.vue";
+import PreserveStrainRecordDialog from "./preserve-strain-record-dialog.vue";
+
+export default {
+ components: {
+ AiEditor,
+ SeparationRecordDialog,
+ SlantRecordDialog,
+ InoculationSlopeRecordDialog,
+ PreserveStrainRecordDialog,
+ },
+ name: "AddBreedingRecord",
+ data() {
+ return {
+ form: {
+ strainCode: "",
+ strainName: "",
+ mediumFormula: "",
+ materialCode: "",
+ materialName: "",
+ materialDescription: "",
+ planName: "",
+ planCode: "",
+ stage: "",
+ creator: "",
+ createTime: "",
+ approvalComment: "",
+ status: "pending",
+ approver: "",
+ approveTime: "",
+ },
+ rules: {
+ strainCode: [{ required: true, message: "请输入菌株编号", trigger: "blur" }],
+ strainName: [{ required: true, message: "请输入菌株名称", trigger: "blur" }],
+ mediumFormula: [{ required: true, message: "请输入培养基配方", trigger: "blur" }],
+ materialCode: [{ required: true, message: "请输入物资编号", trigger: "blur" }],
+ materialName: [{ required: true, message: "请输入物资名称", trigger: "blur" }],
+ materialDescription: [{ required: true, message: "请输入物资描述", trigger: "blur" }],
+ },
+ activeTab: "strain", // 默认显示来源菌株表单
+ fileList: [], // 附件列表
+ showChoose: false,
+ radio1: 1,
+ status: "1",
+ remark: "",
+ queryForm: {},
+ showSeparationDialog: false,
+ showObservationDialog: false,
+ showInoculationDialog: false,
+ showPreserveDialog: false,
+ };
+ },
+ methods: {
+ handleSeparationConfirm(data) {
+ console.log("培养皿分离记录确认", data);
+ },
+ handleObservationConfirm(data) {
+ console.log("培养皿观察记录确认", data);
+ },
+ handleInoculationConfirm(data) {
+ console.log("接种斜面记录确认", data);
+ },
+ handlePreserveConfirm(data) {
+ console.log("菌种保藏记录确认", data);
+ },
+ },
+};
+</script>
+
+<style lang="less" scoped>
+::v-deep(.el-form-item) {
+ width: 100%;
+
+ .el-input__inner {
+ width: 100%;
+ }
+
+ .w-380 {
+ width: 280px;
+ }
+}
+
+.mt-unset {
+ margin-top: unset !important;
+}
+
+.flex {
+ display: flex;
+}
+
+.tabs {
+ display: flex;
+ align-items: center;
+ border: 2px solid rgba(4, 156, 154, 0.5);
+ border-radius: 10px;
+ padding: 4px;
+
+ div {
+ width: 183px;
+ height: 32px;
+ border-radius: 10px;
+ text-align: center;
+ line-height: 32px;
+ font-size: 16px;
+ cursor: pointer;
+ }
+
+ .active {
+ background: #ebfefd;
+ color: #049c9a;
+ }
+
+ .inactive {
+ background: #fff;
+ color: #333333;
+ }
+}
+
+.header-title {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ margin-bottom: 20px;
+ gap: 13px;
+
+ .header-title-left {
+ display: flex;
+ align-items: center;
+ gap: 13px;
+
+ img {
+ width: 12px;
+ height: 19px;
+ }
+
+ div {
+ flex-shrink: 0;
+ font-weight: bold;
+ font-size: 18px;
+ color: #222222;
+ line-height: 27px;
+ font-family: "Source Han Sans CN Bold Bold";
+
+ }
+
+ span {
+ flex-shrink: 0;
+ font-weight: bold;
+ font-size: 18px;
+ color: #222222;
+ line-height: 27px;
+ font-family: "Source Han Sans CN Bold Bold";
+ }
+ }
+
+ .header-title-left :first-child {
+ margin-top: 0;
+ }
+}
+
+.header-title:first-child {
+ .header-title-left {
+ margin-top: 0;
+ }
+}
+
+.end-btn {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+
+ button {
+ width: 180px;
+ height: 36px;
+ // background: #409EFF;
+ }
+}
+
+.member-list {
+ margin-top: 18px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 28px;
+
+ .member-list-card {
+ width: 340px;
+ height: 400px;
+ border-radius: 8px;
+ border: 1px solid #dcdfe6;
+ background: linear-gradient(to bottom,
+ rgba(5, 160, 193, 0.2) 0%,
+ rgba(5, 242, 194, 0) 70%);
+
+ .member-item {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+
+ .member-title {
+ margin-top: 20px;
+ width: 100%;
+ font-family: "Source Han Sans CN Bold Bold";
+ font-weight: bold;
+ font-size: 16px;
+ color: rgba(0, 0, 0, 0.8);
+ line-height: 16px;
+ text-align: center;
+ }
+
+ .flex1 {
+ flex: 1;
+ }
+
+ .member-name-box {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .member-name-box-2 {
+ flex: 1;
+ padding: 0 20px;
+ padding-top: 40px;
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 20px;
+ justify-items: center;
+ align-items: start;
+ }
+
+ .member-name {
+ width: 60px;
+ height: 60px;
+ background: #7d8b79;
+ border-radius: 50%;
+ text-align: center;
+ line-height: 60px;
+ font-weight: 500;
+ font-size: 16px;
+ color: #ffffff;
+ margin: 0;
+ }
+
+ .member-change {
+ display: flex;
+ justify-content: center;
+ padding: 10px 0;
+ margin-top: auto;
+ cursor: pointer;
+
+ .member-change-btn {
+ background: #fff1f0;
+ border-radius: 4px;
+ border: 1px solid #ffccc7;
+ padding: 1px 8px;
+ font-weight: 400;
+ font-size: 12px;
+ color: #ff4d4f;
+ }
+ }
+ }
+ }
+}
+</style>
--
Gitblit v1.7.1