<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">
|
<el-input :disabled="$route.query.isDetail" 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">
|
<el-input :disabled="$route.query.isDetail" 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="formula">
|
<el-input :disabled="$route.query.isDetail" v-model="form.formula" 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="sourceMaterialTimeBatchNumber">
|
<el-input :disabled="$route.query.isDetail" v-model="form.sourceMaterialTimeBatchNumber"
|
placeholder="请输入物资编号" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="培养基配方" prop="formula">
|
<el-input :disabled="$route.query.isDetail" v-model="form.formula" placeholder="请输入培养基配方" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="分离菌落编号" prop="separateColonyNumber">
|
<el-input :disabled="$route.query.isDetail" v-model="form.separateColonyNumber" 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="cultureMedium">
|
<el-input :disabled="$route.query.isDetail" v-model="form.cultureMedium" 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="temperature">
|
<el-input :disabled="$route.query.isDetail" v-model="form.temperature" 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="aerobicType">
|
<el-select :disabled="$route.query.isDetail" v-model="form.aerobicType" class="w-380"
|
placeholder="请选择需氧类型">
|
<el-option label="专性需氧" value="1"></el-option>
|
<el-option label="专性厌氧" value="2"></el-option>
|
<el-option label="兼性需氧" value="3"></el-option>
|
<el-option label="耐氧厌氧" value="4"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
|
<el-form-item label="培养时间" prop="cultureTime">
|
<el-input :disabled="$route.query.isDetail" v-model="form.cultureTime" class="w-380"
|
placeholder="请输入培养时间" />
|
<!-- <el-date-picker v-model="form.cultureTime" class="w-380" placeholder="请选择培养时间" type="date" value-format="yyyy-MM-dd" /> -->
|
</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="handleAddSeparation" v-if="!$route.query.isDetail && [1, 4].includes(roleType)"
|
class="el-icon-circle-plus-outline" type="primary">
|
新增培养皿分离记录</el-button>
|
</div>
|
</div>
|
<Table :data="form.separationOfCultureDishesList" :height="null" :queryForm="queryForm" :total="0">
|
<el-table-column width="100" type="index" label="培养皿序号" />
|
<el-table-column prop="separateBacterialColoniesCode" label="分离菌落编号" />
|
<el-table-column prop="handleSignature" label="接种操作人签字">
|
<template slot-scope="scope">
|
<el-image :preview-src-list="[scope.row.handleSignature]" style="width: 40px;"
|
:src="scope.row.handleSignature" alt="操作人签字" />
|
</template>
|
</el-table-column>
|
<el-table-column prop="createTime" label="操作时间" />
|
<el-table-column prop="address" label="操作" v-if="!$route.query.isDetail">
|
<template slot-scope="scope" v-if="[1, 4].includes(roleType)">
|
<el-button type="text" @click="handleEditSeparation(scope.row, scope.$index)"
|
v-if="!$route.query.isDetail">编辑</el-button>
|
<el-button type="text" @click="handleDeleteSeparation(scope.$index)"
|
v-if="!$route.query.isDetail">删除</el-button>
|
</template>
|
</el-table-column>
|
</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="handleAddObservation" v-if="!$route.query.isDetail && [1, 4].includes(roleType)"
|
class="el-icon-circle-plus-outline" type="primary">
|
新增观察记录</el-button>
|
</div>
|
</div>
|
<Table :data="form.observationOfPetriDishes" :height="null" :queryForm="queryForm" :total="0">
|
<el-table-column prop="separateColonyCode" label="分离菌落编号" />
|
<el-table-column prop="strength" label="形状强壮度排名" />
|
<el-table-column prop="address" label="操作">
|
<template slot-scope="scope">
|
<!-- <el-button type="text" @click="handleEditObservation(scope.row)" v-if="!$route.query.isDetail">编辑</el-button> -->
|
<el-button type="text" @click="handleEditObservation(scope.row)">形态记录</el-button>
|
<el-button type="text" @click="handleDeleteObservation(scope.$index)"
|
v-if="!$route.query.isDetail && [1, 4].includes(roleType)">删除</el-button>
|
</template>
|
</el-table-column>
|
</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="handleAddInoculation" v-if="!$route.query.isDetail && [1, 4].includes(roleType)"
|
class="el-icon-circle-plus-outline" type="primary">
|
新增斜面记录</el-button>
|
</div>
|
</div>
|
<el-table :data="form.vaccinationSlopes" border style="width: 100%; margin-bottom: 16px;"
|
:span-method="inoculationRowSpan">
|
<el-table-column prop="separateColonyCode" label="分离菌落编号" />
|
<el-table-column prop="vaccinationSlopeCode" label="接种斜面编号" />
|
<el-table-column prop="handleName" label="接种操作人" />
|
<el-table-column prop="handleSignature" label="接种操作人签字">
|
<template slot-scope="scope">
|
<el-image v-if="scope.row.handleSignature" :preview-src-list="[scope.row.handleSignature]"
|
style="width: 40px;" :src="scope.row.handleSignature" alt="操作人签字" />
|
</template>
|
</el-table-column>
|
<el-table-column prop="handleTime" label="接种操作时间" />
|
<el-table-column prop="handleType" label="入库/废弃">
|
<template slot-scope="scope">
|
{{ scope.row.handleType === '保存' ? '入库' : '废弃' }}
|
</template>
|
</el-table-column>
|
<el-table-column label="入库总数（只）">
|
<template slot-scope="scope">
|
<span v-if="scope.$index === firstInoculationOrDiscardIndex">{{ totalInoculationCount }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="preserveSignature" label="菌种保藏人签字">
|
<template slot-scope="scope">
|
<el-image v-if="scope.row.preserveSignature" :preview-src-list="[scope.row.preserveSignature]"
|
style="width: 40px;" :src="scope.row.preserveSignature" alt="操作人签字" />
|
</template>
|
</el-table-column>
|
<el-table-column prop="preserveTime" label="入库保藏/废弃时间" />
|
<el-table-column label="操作"
|
v-if="[1, 3].includes(roleType) && $route.query.isDetail&& !scope.row.preserveSignature || (!$route.query.isDetail && [4].includes(roleType))">
|
<template slot-scope="scope">
|
<el-button type="text" @click="handleEditInoculation(scope.row, scope.$index)"
|
v-if="!$route.query.isDetail && [1, 4].includes(roleType)">编辑</el-button>
|
<el-button type="text" @click="handleConfirmStorageClick(scope.row, scope.$index)"
|
v-if="$route.query.isDetail && [3].includes(roleType) && !scope.row.preserveSignature">确认入库</el-button>
|
<el-button type="text" @click="handleDeleteInoculation(scope.$index)"
|
v-if="!$route.query.isDetail && !scope.row.preserveSignature && [1, 4].includes(roleType)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-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="handleAddPreserve" v-if="!$route.query.isDetail && [1, 4].includes(roleType)"
|
class="el-icon-circle-plus-outline" type="primary">
|
新增菌种保藏记录</el-button>
|
</div>
|
</div>
|
<Table :data="form.culturePreservations" :height="null" :queryForm="queryForm" :total="0">
|
<el-table-column prop="forPreserveCode" label="用于保藏的菌种编号" />
|
<el-table-column prop="verificationConclusion" label="实验验证结论" />
|
<el-table-column prop="preserveMethod" label="保藏方法" />
|
<el-table-column prop="preserveCode" label="保藏菌种编号" />
|
<el-table-column prop="handleSignature" label="菌种操作人签字">
|
<template slot-scope="scope">
|
<el-image v-if="scope.row.handleSignature" :preview-src-list="[scope.row.handleSignature]"
|
style="width: 40px;" :src="scope.row.handleSignature" alt="签字" />
|
</template>
|
</el-table-column>
|
<el-table-column prop="handleTime" label="操作人" />
|
<el-table-column prop="preserveSignature" label="菌种保藏人签字">
|
<template slot-scope="scope">
|
<el-image v-if="scope.row.preserveSignature" :preview-src-list="[scope.row.preserveSignature]"
|
style="width: 40px;" :src="scope.row.preserveSignature" alt="签字" />
|
</template>
|
</el-table-column>
|
<el-table-column prop="preserveTime" label="保藏时间" />
|
<el-table-column label="操作"
|
v-if="[1, 3].includes(roleType) && $route.query.isDetail&& !scope.row.preserveSignature || (!$route.query.isDetail && [4].includes(roleType))">
|
<template slot-scope="scope">
|
<el-button type="text" @click="handleEditPreserve(scope.row, scope.$index)"
|
v-if="!$route.query.isDetail && [1, 4].includes(roleType)">编辑</el-button>
|
<el-button type="text" @click="handleConfirmPreserve(scope.row, scope.$index)"
|
v-if="$route.query.isDetail && [3].includes(roleType) && !scope.row.preserveSignature">确认入库</el-button>
|
<el-button type="text" @click="handleDeletePreserve(scope.$index)"
|
v-if="!$route.query.isDetail && !scope.row.preserveSignature && [1, 4].includes(roleType)">删除</el-button>
|
</template>
|
</el-table-column>
|
</Table>
|
<!-- 弹窗组件 -->
|
<SeparationRecordDialog :visible.sync="showSeparationDialog" :editData="editSeparationData"
|
@confirm="handleSeparationConfirm" @close="resetSeparationEdit" />
|
<SlantRecordDialog :visible.sync="showObservationDialog" :editData="editObservationData"
|
@ok="handleObservationConfirm" />
|
<InoculationSlopeRecordDialog :visible.sync="showInoculationDialog" :editData="editInoculationData"
|
@save="handleInoculationConfirm" />
|
<PreserveStrainRecordDialog :visible.sync="showPreserveDialog" :editData="editPreserveData"
|
@save="handlePreserveConfirm" />
|
<ConfirmStorageDialog :visible.sync="showConfirmStorageDialog" :editData="editInoculationData"
|
@confirm="handleConfirmStorage" />
|
<ConfirmPreserveDialog :visible.sync="showConfirmPreserveDialog" :editData="editPreserveData"
|
@confirm="handleConfirmPreserveSubmit" />
|
<div class="end-btn" style="margin-top: 20px;" v-if="!$route.query.isDetail && [3, 4].includes(roleType)">
|
<el-button type="primary" @click="handleSubmit(1)">提交</el-button>
|
<el-button type="primary" @click="handleSubmit(3)">同步给保藏人</el-button>
|
<el-button type="default" @click="handleSubmit(2)">存草稿</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";
|
import ConfirmStorageDialog from "./confirm-storage-dialog.vue";
|
import ConfirmPreserveDialog from "./confirm-preserve-dialog.vue";
|
|
import { add, detail, edit, vaccinationSlopesConfirm, culturePreservationsConfirm } from './service'
|
export default {
|
components: {
|
AiEditor,
|
SeparationRecordDialog,
|
SlantRecordDialog,
|
InoculationSlopeRecordDialog,
|
PreserveStrainRecordDialog,
|
ConfirmStorageDialog,
|
ConfirmPreserveDialog,
|
|
},
|
name: "AddBreedingRecord",
|
data() {
|
return {
|
form: {
|
id: '', // 主键
|
strainCode: '', // 菌株编号
|
strainName: '', // 菌株名称
|
formula: '', // 培养基配方
|
cultureMedium: '', // 培养基
|
cultureTime: '', // 培养时间
|
aerobicType: '', // 需氧类型
|
temperature: '', // 培养温度
|
status: '', // 状态
|
createBy: '', // 创建人
|
createTime: '', // 创建时间
|
updateBy: '', // 修改人
|
updateTime: '', // 修改时间
|
disabled: 0, // 是否删除
|
preserveSource: '', // 来源类型
|
separateColonyNumber: '', // 分离菌落编号
|
sourceMaterialTimeBatchNumber: '', // 来源物资存值批号
|
// 下面是 array 类型字段
|
culturePreservations: [],
|
observationOfPetriDishes: [],
|
separationOfCultureDishesList: [],
|
vaccinationSlopes: [],
|
// 兼容原有表单字段
|
mediumFormula: '',
|
materialCode: '',
|
materialName: '',
|
materialDescription: '',
|
planName: '',
|
planCode: '',
|
stage: '',
|
creator: '',
|
approvalComment: '',
|
approver: '',
|
approveTime: '',
|
culturePreservations: [], // 新增：菌种保藏记录数组
|
},
|
rules: {
|
strainCode: [{ required: true, message: "请输入菌株编号", trigger: "blur" }],
|
strainName: [{ required: true, message: "请输入菌株名称", trigger: "blur" }],
|
formula: [{ required: true, message: "请输入培养基配方", trigger: "blur" }],
|
cultureMedium: [{ required: true, message: "请输入培养基", trigger: "blur" }],
|
cultureTime: [{ required: true, message: "请输入培养时间", trigger: "blur" }],
|
aerobicType: [{ required: true, message: "请输入需氧类型", trigger: "blur" }],
|
temperature: [{ required: true, message: "请输入培养温度", trigger: "blur" }],
|
sourceMaterialTimeBatchNumber: [{ 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,
|
showConfirmStorageDialog: false,
|
showConfirmPreserveDialog: false,
|
editSeparationIndex: null,
|
editSeparationData: null,
|
editObservationData: null,
|
editInoculationIndex: null,
|
editInoculationData: null,
|
editPreserveIndex: null,
|
editPreserveData: null,
|
roleType: Number(JSON.parse(sessionStorage.getItem('userInfo')).roleType || 1), // 1.超级管理员 2.审批人 3.工程师 4.实验员
|
};
|
},
|
computed: {
|
totalInoculationCount() {
|
// 只统计入库（保存）
|
return this.form.vaccinationSlopes
|
.filter(item => item.handleType === '保存')
|
.length;
|
},
|
firstInoculationOrDiscardIndex() {
|
// 第一个入库或废弃行
|
return this.form.vaccinationSlopes.findIndex(item => item.handleType === '保存' || item.handleType === '废弃');
|
}
|
},
|
mounted() {
|
if (this.$route.query.id) {
|
this.getDetail()
|
}
|
},
|
methods: {
|
async getDetail() {
|
const res = await detail({ id: this.$route.query.id })
|
if (res.preserveSource == 1) {
|
this.activeTab = 'strain'
|
} else {
|
this.activeTab = 'material'
|
}
|
res.vaccinationSlopes = res.vaccinationSlopes.map(item => {
|
return {
|
...item,
|
handleType: item.handleType === 1 ? '保存' : '废弃'
|
}
|
})
|
this.form = res
|
},
|
handleSeparationConfirm(data) {
|
console.log('分离', data)
|
if (this.editSeparationIndex !== null) {
|
// 编辑
|
this.$set(this.form.separationOfCultureDishesList, this.editSeparationIndex, data);
|
this.resetSeparationEdit();
|
} else {
|
// 新增
|
console.log('新增', data)
|
this.form.separationOfCultureDishesList.push(data);
|
}
|
},
|
handleObservationConfirm(data) {
|
if (this.editObservationData) {
|
// 编辑
|
const index = this.form.observationOfPetriDishes.findIndex(item => item.id === data.id);
|
if (index !== -1) {
|
this.$set(this.form.observationOfPetriDishes, index, data);
|
}
|
} else {
|
// 新增
|
this.form.observationOfPetriDishes.push({
|
...data,
|
id: Date.now().toString(), // 临时ID，实际应该由后端生成
|
});
|
}
|
this.editObservationData = null;
|
},
|
handleInoculationConfirm(data) {
|
console.log('接种', data)
|
if (this.editInoculationIndex !== null) {
|
// 编辑模式：更新指定索引的数据
|
this.$set(this.form.vaccinationSlopes, this.editInoculationIndex, {
|
...data,
|
// 保留原有的ID和其他必要字段
|
id: this.form.vaccinationSlopes[this.editInoculationIndex].id
|
});
|
} else {
|
// 新增模式：添加新数据
|
this.form.vaccinationSlopes.push({
|
...data,
|
id: Date.now().toString() // 临时ID，实际应该由后端生成
|
});
|
}
|
this.showInoculationDialog = false;
|
this.editInoculationIndex = null;
|
this.editInoculationData = null;
|
},
|
handlePreserveConfirm(data) {
|
if (this.editPreserveIndex !== null) {
|
// 编辑
|
this.$set(this.form.culturePreservations, this.editPreserveIndex, data);
|
} else {
|
// 新增
|
this.form.culturePreservations.push(data);
|
}
|
this.showPreserveDialog = false;
|
this.editPreserveIndex = null;
|
this.editPreserveData = null;
|
},
|
handleSubmit(type) {
|
if (this.activeTab === 'material') {
|
this.form.preserveSource = 2
|
} else {
|
this.form.preserveSource = 1
|
}
|
|
if (type == 1) {
|
this.form.status = 1
|
} else if (type == 3) {
|
this.form.status = 2
|
} else {
|
this.form.status = 3
|
}
|
|
this.$refs.form.validate(async (valid) => {
|
if (!valid) return;
|
try {
|
if (this.form.vaccinationSlopes.length > 0) {
|
let arr = this.form.vaccinationSlopes
|
this.form.vaccinationSlopes = arr.map(item => {
|
return {
|
...item,
|
handleType: item.handleType === '保存' ? 1 : 2,
|
}
|
})
|
}
|
if (this.form.id && this.form.isDraft == 0) {
|
edit(this.form).then(res => {
|
if (res.code === 200) {
|
this.$message.success('编辑成功');
|
this.$router.back();
|
} else {
|
this.$message.error('编辑失败');
|
}
|
})
|
} else {
|
add(this.form).then(res => {
|
if (res.code === 200) {
|
this.$message.success('添加成功');
|
this.$router.back();
|
} else {
|
this.$message.error('添加失败');
|
}
|
});
|
}
|
|
} catch (e) {
|
this.$message.error('添加失败');
|
}
|
});
|
},
|
handleEditSeparation(row, index) {
|
this.editSeparationIndex = index;
|
this.editSeparationData = { ...row };
|
this.showSeparationDialog = true;
|
},
|
handleDeleteSeparation(index) {
|
this.form.separationOfCultureDishesList.splice(index, 1);
|
},
|
resetSeparationEdit() {
|
this.editSeparationIndex = null;
|
this.editSeparationData = null;
|
},
|
handleAddSeparation() {
|
this.editSeparationIndex = null;
|
this.editSeparationData = null;
|
this.showSeparationDialog = true;
|
},
|
handleAddObservation() {
|
this.editObservationData = null;
|
this.showObservationDialog = true;
|
},
|
handleEditObservation(row) {
|
this.editObservationData = { ...row };
|
this.showObservationDialog = true;
|
},
|
handleDeleteObservation(index) {
|
this.form.observationOfPetriDishes.splice(index, 1);
|
},
|
handleAddInoculation() {
|
this.editInoculationIndex = null;
|
this.editInoculationData = null;
|
this.showInoculationDialog = true;
|
},
|
handleEditInoculation(row, index) {
|
this.editInoculationIndex = index;
|
// 深拷贝当前行数据，避免直接修改原数据
|
this.editInoculationData = JSON.parse(JSON.stringify(row));
|
this.showInoculationDialog = true;
|
},
|
handleConfirmStorageClick(row, index) {
|
this.editInoculationIndex = index;
|
// 深拷贝当前行数据，避免直接修改原数据
|
this.editInoculationData = JSON.parse(JSON.stringify(row));
|
this.showConfirmStorageDialog = true;
|
},
|
handleConfirmStorage(data) {
|
if (data.preserveSignature) {
|
vaccinationSlopesConfirm({ id: this.form.vaccinationSlopes[this.editInoculationIndex].id, preserveSignature: data.preserveSignature }).then(res => {
|
if (this.editInoculationIndex !== null) {
|
this.$set(this.form.vaccinationSlopes, this.editInoculationIndex, {
|
...this.form.vaccinationSlopes[this.editInoculationIndex],
|
preserveSignature: data.preserveSignature, // 更新签名数据
|
status: '保存' // 更新状态为保存
|
});
|
}
|
this.showConfirmStorageDialog = false;
|
this.editInoculationIndex = null;
|
this.editInoculationData = null;
|
})
|
}
|
},
|
handleDeleteInoculation(index) {
|
this.form.vaccinationSlopes.splice(index, 1);
|
},
|
inoculationRowSpan({ row, rowIndex, columnIndex }) {
|
// 入库总数（只）列合并
|
if (columnIndex === 6) {
|
// 合并所有入库或废弃行
|
const mergeCount = this.form.vaccinationSlopes.filter(item => item.handleType === '保存' || item.handleType === '废弃').length;
|
if (rowIndex === this.firstInoculationOrDiscardIndex) {
|
return { rowspan: mergeCount, colspan: 1 };
|
} else if (row.handleType === '保存' || row.handleType === '废弃') {
|
return { rowspan: 0, colspan: 0 };
|
}
|
}
|
},
|
handleAddPreserve() {
|
this.editPreserveIndex = null;
|
this.editPreserveData = null;
|
this.showPreserveDialog = true;
|
},
|
handleEditPreserve(row, index) {
|
this.editPreserveIndex = index;
|
this.editPreserveData = { ...row };
|
this.showPreserveDialog = true;
|
},
|
handleDeletePreserve(index) {
|
this.form.culturePreservations.splice(index, 1);
|
},
|
handleConfirmPreserve(row, index) {
|
this.editPreserveIndex = index;
|
// 深拷贝当前行数据，避免直接修改原数据
|
this.editPreserveData = JSON.parse(JSON.stringify(row));
|
this.showConfirmPreserveDialog = true;
|
},
|
handleConfirmPreserveSubmit(data) {
|
if (data.preserveSignature) {
|
culturePreservationsConfirm({ id: this.form.culturePreservations[this.editPreserveIndex].id, preserveSignature: data.preserveSignature }).then(res => {
|
if (this.editPreserveIndex !== null) {
|
this.$set(this.form.culturePreservations, this.editPreserveIndex, {
|
...this.form.culturePreservations[this.editPreserveIndex],
|
preserveSignature: data.preserveSignature, // 更新签名数据
|
preserveTime: data.preserveTime,
|
});
|
}
|
this.showConfirmPreserveDialog = false;
|
this.editPreserveIndex = null;
|
this.editPreserveData = null;
|
})
|
}
|
|
},
|
},
|
};
|
</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>
|
