<template>
|
<el-dialog
|
:visible.sync="visible"
|
title="新增菌种保藏记录"
|
width="900px"
|
@close="handleClose"
|
>
|
<el-form
|
:model="form"
|
:rules="rules"
|
ref="form"
|
label-width="120px"
|
label-position="top"
|
>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="用于保藏的菌种编号" prop="strainCode" required>
|
<el-input v-model="form.strainCode" placeholder="请输入" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-form-item label="实验验证结论" prop="experimentConclusion" required>
|
<el-input type="textarea" :rows="4" v-model="form.experimentConclusion" placeholder="请输入" />
|
</el-form-item>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="保藏方法" prop="preserveMethod" required>
|
<el-input v-model="form.preserveMethod" placeholder="请输入" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="保藏菌种编号" prop="preserveStrainCode" required>
|
<el-input v-model="form.preserveStrainCode" placeholder="请输入" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item required>
|
<template #label>
|
<span>操作人签字</span>
|
<el-button type="primary" class="sign-btn" @click="showSignature = true">签名</el-button>
|
</template>
|
<div class="signature-area" :class="{ 'waiting': !form.signature }">
|
<template v-if="form.signature">
|
<img :src="form.signature" alt="操作人签字" />
|
</template>
|
<template v-else>
|
<span class="waiting-text">等待确认</span>
|
</template>
|
</div>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<div style="text-align: center; margin-top: 20px">
|
<el-button @click="handleClose" style="margin-right: 16px;">取消</el-button>
|
<el-button type="primary" @click="handleSave">保存</el-button>
|
</div>
|
<signature-canvas :visible.sync="showSignature" @confirm="handleSignatureConfirm" />
|
</el-dialog>
|
</template>
|
|
<script>
|
import SignatureCanvas from '@/components/SignatureCanvas.vue';
|
export default {
|
components: { SignatureCanvas },
|
props: { visible: Boolean },
|
data() {
|
return {
|
form: {
|
strainCode: '',
|
experimentConclusion: '',
|
preserveMethod: '',
|
preserveStrainCode: '',
|
signature: '',
|
},
|
rules: {
|
strainCode: [
|
{ required: true, message: '请输入用于保藏的菌种编号', trigger: 'blur' },
|
],
|
experimentConclusion: [
|
{ required: true, message: '请输入实验验证结论', trigger: 'blur' },
|
],
|
preserveMethod: [
|
{ required: true, message: '请输入保藏方法', trigger: 'blur' },
|
],
|
preserveStrainCode: [
|
{ required: true, message: '请输入保藏菌种编号', trigger: 'blur' },
|
],
|
signature: [
|
{ required: true, message: '请签名', trigger: 'change' },
|
],
|
},
|
showSignature: false,
|
};
|
},
|
methods: {
|
handleSave() {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
this.$emit('save', { ...this.form });
|
this.handleClose();
|
}
|
});
|
},
|
handleClose() {
|
this.$emit('update:visible', false);
|
},
|
handleSignatureConfirm(dataUrl) {
|
this.form.signature = dataUrl;
|
this.showSignature = false;
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.signature-area {
|
height: 120px;
|
width: 100%;
|
background: #F5F7FA;
|
border-radius: 4px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border: 1px solid #DCDFE6;
|
overflow: hidden;
|
padding: 0;
|
}
|
.signature-area.waiting {
|
border-style: dashed;
|
background: #FAFAFA;
|
}
|
.signature-area img {
|
width: 100%;
|
height: 100%;
|
object-fit: cover;
|
display: block;
|
}
|
.waiting-text {
|
color: #909399;
|
font-size: 14px;
|
}
|
.sign-btn {
|
height: 32px;
|
border-radius: 4px;
|
font-size: 14px;
|
padding: 0 20px;
|
font-weight: 400;
|
margin-left: 12px;
|
}
|
</style>
|
