<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>
|
