<template>
|
<el-dialog
|
:visible.sync="visible"
|
title="新增接种斜面记录"
|
width="700px"
|
@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="separateColonyCode">
|
<el-input v-model="form.separateColonyCode" placeholder="请输入" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="接种斜面编号" prop="vaccinationSlopeCode">
|
<el-input v-model="form.vaccinationSlopeCode" placeholder="请输入" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-form-item label="保存/废弃" prop="handleType">
|
<el-button
|
:type="form.handleType === '保存' ? 'primary' : 'default'"
|
@click="form.handleType = '保存'"
|
>保存</el-button
|
>
|
<el-button
|
:type="form.handleType === '废弃' ? 'primary' : 'default'"
|
@click="form.handleType = '废弃'"
|
>废弃</el-button
|
>
|
</el-form-item>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="菌种入库时间" prop="preserveTime">
|
<el-input
|
v-model="form.preserveTime"
|
disabled
|
placeholder="自动回填"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="接种操作时间" prop="handleTime">
|
<el-input
|
v-model="form.handleTime"
|
disabled
|
placeholder="自动填入"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item>
|
<template #label>
|
<span>接种操作人签字</span>
|
<el-button type="primary" class="sign-btn" @click="showSignature = true">签名</el-button>
|
</template>
|
<div class="signature-area" :class="{ 'waiting': !form.handleSignature }">
|
<template v-if="form.handleSignature">
|
<img :src="form.handleSignature" alt="接种操作人签字" />
|
</template>
|
<template v-else>
|
<span class="waiting-text">等待确认</span>
|
</template>
|
</div>
|
</el-form-item>
|
</el-col>
|
<!-- <el-col :span="12">
|
<el-form-item label="接种操作人" prop="handleName">
|
<el-input v-model="form.handleName" disabled placeholder="自动填入" />
|
</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,
|
editData: {
|
type: Object,
|
default: () => ({})
|
}
|
},
|
data() {
|
return {
|
form: {
|
separateColonyCode: "",
|
vaccinationSlopeCode: "",
|
handleType: "保存",
|
preserveTime: '',
|
handleTime: this.getNowTime(),
|
handleSignature: "",
|
handleName: JSON.parse(sessionStorage.getItem('userInfo'))?.nickName || '',
|
handleId: JSON.parse(sessionStorage.getItem('userInfo'))?.userId || '',
|
},
|
rules: {
|
separateColonyCode: [
|
{ required: true, message: "请输入分离菌落编号", trigger: "blur" },
|
],
|
vaccinationSlopeCode: [
|
{ required: true, message: "请输入接种斜面编号", trigger: "blur" },
|
],
|
handleType: [
|
{ required: true, message: "请选择保存/废弃", trigger: "change" },
|
],
|
handleSignature: [{ required: true, message: "请签名", trigger: "change" }],
|
},
|
showSignature: false,
|
};
|
},
|
watch: {
|
visible(val) {
|
if (val && this.editData) {
|
// 当对话框显示且有编辑数据时，进行数据回显
|
this.form = {
|
...this.form,
|
...this.editData
|
};
|
}
|
}
|
},
|
methods: {
|
getNowTime() {
|
const d = new Date();
|
return (
|
d.getFullYear() +
|
"-" +
|
(d.getMonth() + 1).toString().padStart(2, "0") +
|
"-" +
|
d.getDate().toString().padStart(2, "0") +
|
" " +
|
d.getHours().toString().padStart(2, "0") +
|
":" +
|
d.getMinutes().toString().padStart(2, "0")
|
);
|
},
|
handleSave() {
|
console.log(this.form)
|
this.$refs.form.validate((valid) => {
|
if(!this.form.handleSignature){
|
this.$message.error('请接种操作人签字')
|
return
|
}
|
if (valid) {
|
this.$emit("save", { ...this.form });
|
|
this.handleClose();
|
}
|
});
|
},
|
handleClose() {
|
this.$emit("update:visible", false);
|
// 重置表单数据
|
this.form = {
|
separateColonyCode: "",
|
vaccinationSlopeCode: "",
|
handleType: "保存",
|
preserveTime: '',
|
handleTime: this.getNowTime(),
|
handleSignature: "",
|
handleName: JSON.parse(sessionStorage.getItem('userInfo'))?.nickName || '',
|
handleId: JSON.parse(sessionStorage.getItem('userInfo'))?.userId || '',
|
};
|
// 重置表单验证
|
this.$nextTick(() => {
|
this.$refs.form && this.$refs.form.clearValidate();
|
});
|
},
|
handleSignatureConfirm(dataUrl) {
|
this.form.handleSignature = 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>
|
