<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="colonyCode" required>
|
<el-input v-model="form.colonyCode" placeholder="请输入" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="接种斜面编号" prop="slopeCode" required>
|
<el-input v-model="form.slopeCode" placeholder="请输入" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-form-item label="保存/废弃" prop="status" required>
|
<el-button
|
:type="form.status === '保存' ? 'primary' : 'default'"
|
@click="form.status = '保存'"
|
>保存</el-button
|
>
|
<el-button
|
:type="form.status === '废弃' ? 'primary' : 'default'"
|
@click="form.status = '废弃'"
|
>废弃</el-button
|
>
|
</el-form-item>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="菌种入库时间" prop="storageTime" required>
|
<el-input
|
v-model="form.storageTime"
|
disabled
|
placeholder="自动回填"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="接种操作时间" prop="operationTime" required>
|
<el-input
|
v-model="form.operationTime"
|
disabled
|
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: {
|
colonyCode: "",
|
slopeCode: "",
|
status: "保存",
|
storageTime: this.getNowTime(),
|
operationTime: this.getNowTime(),
|
signature: "",
|
},
|
rules: {
|
colonyCode: [
|
{ required: true, message: "请输入分离菌落编号", trigger: "blur" },
|
],
|
slopeCode: [
|
{ required: true, message: "请输入接种斜面编号", trigger: "blur" },
|
],
|
status: [
|
{ required: true, message: "请选择保存/废弃", trigger: "change" },
|
],
|
signature: [{ required: true, message: "请签名", trigger: "change" }],
|
},
|
showSignature: false,
|
};
|
},
|
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() {
|
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>
|
