graphite_vue/src/views/oreManage/components/StepItemEx.vue

<template>
	<div class="bg-[#5294D7]/[.06] rounded-lg mb-[10px]">
		<section class="h-12 flex items-center text-xl px-1">
			<!-- <span>{{ order }}.</span> -->
			<span class="text-base ml-5">{{ StepCmdDescMap[step.method] }}</span>
			<div class="ml-auto w-11 h-11 flex justify-center items-center" @click="$emit('del', order)">
				<img class="w-4" src="@/assets/icon_del_s.svg" alt="del" />
			</div>
		</section>
		<template v-if="step.method !== 'takePhoto'">
			<section v-if="step.method === 'addLiquid'" class="h-12 flex items-start px-6 text-[#5e5e5e] gap-5">
				<!-- <div class="h-[1.875rem] rounded-sm bg-[#eaeaea] flex items-center px-3 min-w-[8.125rem]">
					<span>盐酸</span>
					<img class="ml-auto w-2" src="@/assets/icon_arr_s.svg" alt="arr" />
				</div> -->
				<el-select v-model="step.params.solId" placeholder="Select" style="width: 100px">
					<el-option v-for="item in settingStore.availableLiquids" :key="item.id" :label="item.name" :value="item.id" />
				</el-select>
				<div class="flex items-center">
					<el-input v-model.number="step.params.volume" style="width: 100px" />
					<span class="ml-2">ml</span>
				</div>
			</section>
			<section
				v-if="step.method === 'shaking' || step.method === 'delay'"
				class="h-12 flex items-start px-6 text-[#5e5e5e] gap-5">
				<div class="flex items-center">
					<el-input v-model.number="step.params.second" style="width: 100px" />
					<span class="ml-2">秒</span>
				</div>
			</section>
			<!-- <section
				v-if="
					step.method === 'upTray' ||
					step.method === 'downTray' ||
					step.method === 'moveToSol' ||
					step.method === 'moveToHeater' ||
					step.method === 'stopHeating'
				"
				class=" h-12 flex items-center px-6 text-[#5e5e5e] gap-5">
				<div class="flex items-center">
					<el-select v-model="step.params.heaterId" placeholder="Select" style="width: 120px">
						<el-option
							v-for="item in settingStore.areaOptions"
							:key="item.value"
							:label="item.label"
							:value="item.value" />
					</el-select>
				</div>
			</section> -->
			<section v-if="step.method === 'startHeating'" class="h-12 flex items-start px-6 text-[#5e5e5e] gap-5">
				<div class="flex items-center gap-3">
					<!-- <el-select v-model="step.params.heaterId" placeholder="Select" style="width: 100px">
						<el-option
							v-for="item in settingStore.areaOptions"
							:key="item.value"
							:label="item.label"
							:value="item.value" />
					</el-select> -->
					<el-input v-model.number="step.params.temperature" style="width: 100px" />
					<span class="ml-2">℃</span>
				</div>
			</section>
		</template>
	</div>
</template>
<script setup lang="ts">
import { StepCmdDescMap, type StepStruct } from "@/services/globalCmd/cmdTypes";
import { useSettingStore } from "@/stores/setting";
const settingStore = useSettingStore();

const props = defineProps<{ order: number; step: StepStruct }>();
const emit = defineEmits<{
	(e: "del", order: number): void;
}>();
</script>