eln_web/src/components/Template/StepComponents/ContainerStep.vue

<!-- 容器步骤表单 -->
<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>