You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
1.3 KiB
71 lines
1.3 KiB
<!-- 容器步骤表单 -->
|
|
<template>
|
|
<div class="flex items-center">
|
|
<div>容器选择</div>
|
|
<HandleFormItem class="w-auto" type="select" :item="fieldConfigs.containerType"
|
|
@change="onContainerTypeChange"
|
|
v-model="formData.containerType" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import HandleFormItem from '../HandleFormItem.vue'
|
|
|
|
export default {
|
|
name: 'ContainerStep',
|
|
components: {
|
|
HandleFormItem
|
|
},
|
|
props: ['stepData'],
|
|
data() {
|
|
return {
|
|
formData: {
|
|
containerType: '',
|
|
},
|
|
// 字段配置
|
|
fieldConfigs: {
|
|
containerType: {
|
|
label: '容器选择',
|
|
placeholder: '请选择',
|
|
fillType:"actFill",
|
|
options: [
|
|
{ label: '离心管', value: 'centrifugeTube' },
|
|
{ label: '试管', value: 'testTube' },
|
|
{ label: '烧杯', value: 'beaker' },
|
|
{ label: '容量瓶', value: 'volumetricFlask' },
|
|
{ label: '培养皿', value: 'petriDish' }
|
|
]
|
|
}
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.formData = { ...this.formData, ...this.stepData }
|
|
},
|
|
watch: {
|
|
formData: {
|
|
handler(newVal) {
|
|
console.log(newVal,"newVal")
|
|
this.$emit('update', newVal)
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
methods: {
|
|
onContainerTypeChange(val) {
|
|
this.formData.containerType = val
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
.items-center {
|
|
align-items: center;
|
|
}
|
|
.w-auto {
|
|
width: auto;
|
|
}
|
|
</style>
|