<template>
|
<Card>
|
<!-- <div class="header-title">
|
<div class="header-title-left">
|
<img src="@/assets/public/headercard.png" />
|
<div>新增原始细胞</div>
|
</div>
|
</div> -->
|
<el-form :model="form" :rules="rules" ref="strainForm" label-position="top" class="strain-form">
|
<div class="form-row">
|
<el-form-item label="菌种来源" prop="strainSource">
|
<el-input v-model="form.strainSource" placeholder="请输入"></el-input>
|
</el-form-item>
|
</div>
|
<div class="form-row three-columns">
|
<el-form-item label="鉴别菌株编号" prop="identifyingStrainCode">
|
<el-input v-model="form.identifyingStrainCode" placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="鉴别菌株名称" prop="identifyingStrainName">
|
<el-input v-model="form.identifyingStrainName" placeholder="请输入"></el-input>
|
</el-form-item>
|
<div class="form-item-placeholder"></div>
|
</div>
|
<div class="form-row three-columns">
|
<el-form-item label="验证实验编号" prop="validationExperimentCode">
|
<el-input v-model="form.validationExperimentCode" placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="实验时间" prop="experimentTime">
|
<el-date-picker :prefix-icon="' '" style="width: 290px;" v-model="form.experimentTime" type="date"
|
placeholder="请选择实验时间"></el-date-picker>
|
</el-form-item>
|
<div class="form-item-placeholder"></div>
|
</div>
|
<div class="end-btn" style="margin-top: 400px">
|
<el-button type="primary" @click="handleSubmit">提交</el-button>
|
<el-button @click="handleDraft">存草稿</el-button>
|
</div>
|
</el-form>
|
|
<!-- 签字确认组件 -->
|
<ConfirmStorageDialog :visible.sync="signatureVisible" :handleSignature="form.handleSignature"
|
@confirm="handleSignatureConfirm" name="操作人签字" text="是否确认提交该项原始细胞库资料信息?" />
|
</Card>
|
</template>
|
|
<script>
|
import ConfirmStorageDialog from '@/components/confirm-storage-dialog/index.vue'
|
import { add, edit, detail } from './service'
|
import moment from 'moment'
|
|
export default {
|
name: 'AddprimitiveCell',
|
components: {
|
ConfirmStorageDialog
|
},
|
data() {
|
return {
|
signatureVisible: false,
|
currentAction: '', // 'submit' or 'batchAdd'
|
batchForm: {
|
count: ''
|
},
|
form: {
|
strainSource: '', // 菌种来源
|
identifyingStrainCode: '', // 鉴别菌株编号
|
identifyingStrainName: '', // 鉴别菌株名称
|
validationExperimentCode: '', // 验证实验编号
|
experimentTime: '', // 实验时间
|
handleSignature: '', // 签名图片url
|
},
|
rules: {
|
strainSource: [{ required: true, message: '请输入菌种来源', trigger: 'blur' }],
|
identifyingStrainCode: [{ required: true, message: '请输入鉴别菌株编号', trigger: 'blur' }],
|
identifyingStrainName: [{ required: true, message: '请输入鉴别菌株名称', trigger: 'blur' }],
|
validationExperimentCode: [{ required: true, message: '请输入验证实验编号', trigger: 'blur' }],
|
experimentTime: [{ required: true, message: '请输入实验时间', trigger: 'blur' }]
|
}
|
}
|
},
|
mounted() {
|
if (this.$route.query.id) {
|
detail({ id: this.$route.query.id }).then(res => {
|
if (res) {
|
// 这里根据实际接口返回字段做适配
|
this.form = res
|
}
|
})
|
}
|
},
|
methods: {
|
handleSubmit() {
|
this.$refs.strainForm.validate((valid) => {
|
if (valid) {
|
this.currentAction = 'submit'
|
this.signatureVisible = true
|
}
|
})
|
},
|
handleDraft() {
|
// 实现存草稿逻辑
|
this.signatureVisible = true
|
this.currentAction = 'draft'
|
},
|
handleSignatureConfirm(signatureImage) {
|
this.signatureVisible = false;
|
const id = this.$route.query.id || this.$route.params.id;
|
const submitData = { ...this.form, strainType: 1, isDraft:this.form.isDraft?this.form.isDraft:this.currentAction == 'submit' ? 0 : 1, handleSignature: signatureImage.signature, experimentTime:this.form.experimentTime?moment(this.form.experimentTime).format('YYYY-MM-DD'):''};
|
if (this.currentAction === 'submit' || this.form.isDraft == 1) {
|
if (id) {
|
// 编辑
|
edit({ ...submitData, id }).then(() => {
|
this.$router.back();
|
});
|
} else {
|
// 新增
|
add(submitData).then(() => {
|
this.$router.back();
|
});
|
}
|
} else {
|
// 存草稿
|
add(submitData).then(() => {
|
this.$router.back();
|
});
|
}
|
},
|
mounted() {
|
const id = this.$route.query.id || this.$route.params.id;
|
if (id) {
|
// 编辑或详情回显
|
detail({ id }).then(res => {
|
if (res && res.data) {
|
// 这里根据实际接口返回字段做适配
|
Object.assign(this.form, res.data);
|
}
|
});
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.add-strain {
|
height: 100%;
|
background: #F5F7FA;
|
|
.form-card {
|
background: #fff;
|
border-radius: 8px;
|
}
|
}
|
|
.header-title {
|
margin-bottom: 24px;
|
|
&-left {
|
display: flex;
|
align-items: center;
|
|
img {
|
width: 20px;
|
height: 20px;
|
margin-right: 8px;
|
}
|
|
div {
|
font-size: 18px;
|
font-weight: bold;
|
color: #303133;
|
}
|
}
|
}
|
|
.end-btn {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
gap: 10px;
|
|
button {
|
width: 180px;
|
height: 36px;
|
// background: #409EFF;
|
}
|
}
|
|
.strain-form {
|
padding: 0 40px;
|
|
.form-row {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 24px;
|
margin-bottom: 24px;
|
|
&.three-columns {
|
|
.el-form-item,
|
.form-item-placeholder {
|
flex: 1;
|
min-width: 280px;
|
|
@media screen and (max-width: 1200px) {
|
min-width: calc(50% - 12px);
|
}
|
|
@media screen and (max-width: 768px) {
|
min-width: 100%;
|
}
|
}
|
|
.form-item-placeholder {
|
@media screen and (max-width: 1200px) {
|
display: none;
|
}
|
}
|
}
|
|
.el-form-item {
|
margin-bottom: 0;
|
|
&.full-width {
|
width: 100%;
|
}
|
}
|
}
|
|
:deep(.el-form-item__label) {
|
font-weight: normal;
|
color: #606266;
|
padding-bottom: 8px;
|
line-height: 20px;
|
}
|
|
:deep(.el-form-item__content) {
|
line-height: unset;
|
}
|
|
:deep(.el-input__inner) {
|
border-radius: 4px;
|
height: 36px;
|
line-height: 36px;
|
}
|
|
:deep(.el-textarea__inner) {
|
border-radius: 4px;
|
padding: 8px 12px;
|
min-height: 120px;
|
}
|
}
|
|
.batch-add-dialog {
|
:deep(.el-dialog__header) {
|
margin: 0;
|
padding: 20px;
|
text-align: center;
|
border-bottom: 1px solid #EBEEF5;
|
|
.el-dialog__title {
|
font-size: 16px;
|
font-weight: 600;
|
color: #303133;
|
}
|
}
|
|
:deep(.el-dialog__body) {
|
padding: 20px;
|
}
|
|
.dialog-content {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
|
.batch-form {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
:deep(.el-form-item) {
|
width: 320px;
|
margin-bottom: 0;
|
}
|
|
:deep(.el-form-item__label) {
|
width: 100%;
|
color: #606266;
|
font-weight: normal;
|
padding-bottom: 8px;
|
|
&::before {
|
color: #F56C6C;
|
}
|
}
|
|
:deep(.el-input) {
|
width: 100%;
|
|
input {
|
width: 100%;
|
}
|
}
|
}
|
|
.dialog-notice {
|
margin-top: 16px;
|
text-align: center;
|
|
p {
|
margin: 0;
|
line-height: 22px;
|
color: #606266;
|
font-size: 14px;
|
}
|
}
|
|
:deep(.el-dialog__footer) {
|
padding: 0 20px 20px;
|
text-align: center;
|
|
.el-button {
|
width: 180px;
|
height: 36px;
|
padding: 0;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 14px;
|
border-radius: 4px;
|
margin: 0;
|
}
|
}
|
}
|
|
.end-btn {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
gap: 10px;
|
|
:deep(.el-button) {
|
width: 180px;
|
height: 36px;
|
padding: 0;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 14px;
|
border-radius: 4px;
|
margin: 0;
|
}
|
}
|
</style>
|