graphite-digestion-web/src/components/craft/TransferRight.vue

<script lang="ts" setup>
import { useLiquidStore } from '@/stores/useLiquidsStore'
import { ref, watch } from 'vue'
import { StepCmdDescMap, tubeSolList } from '../../views/craft/craft_constant'

const props = defineProps<{
  order: number
  step: CraftTypes.StepStruct
  type: string
}>()

const $emit = defineEmits<{
  (e: 'del', order: number): void
  (e: 'transferChange', stepData: CraftTypes.StepStruct, order: number): void
}>()

const liquidStore = useLiquidStore()
const stepInfo = ref(props.step)

watch(stepInfo, (newVal) => {
  $emit('transferChange', newVal, props.order)
}, {
  deep: true,
})

// const onDel = () => {
//   emit('del', props.order)
// }
</script>

<template>
  <div class="right-contaner">
    <section class="right-main">
      <span class="right-seq">{{ order }}</span>
      <span class="right-base">{{ StepCmdDescMap[stepInfo.method] }}</span>
      <div v-if="type !== 'showlog'" class="text-item" @click="$emit('del', order)">
        <img class="item-img" src="@/assets/images/icon_del_s.svg" alt="del">
      </div>
    </section>
    <template v-if="stepInfo.method !== 'takePhoto'">
      <section v-if="stepInfo.method === 'addLiquid'" class="right-liquid right-base">
        <div v-for="(tubeItem, index) in stepInfo.params.tubeSolList" :key="index" class="right-liquid">
          <el-select v-model="tubeItem.tubeNum" size="small" placeholder="请选择" style="width: 120px" class="right-base" :disabled="type === 'showlog'">
            <el-option v-for="item in tubeSolList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
          <div v-for="(liquidItem, liquidIndex) in tubeItem.addLiquidList" :key="liquidIndex" class="right-liquid right-base">
            <el-select v-model="liquidItem.solId" size="small" placeholder="请选择" style="width: 100px" class="right-base" :disabled="type === 'showlog'">
              <el-option v-for="item in liquidStore.liquids" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
            <div>
              <el-input v-model.number="liquidItem.volume" size="small" style="width: 100px" :disabled="type === 'showlog'" />
              <span class="ml-2">ml</span>
            </div>
          </div>
        </div>
      </section>

      <section v-if="stepInfo.method === 'shaking' || stepInfo.method === 'delay'" class="right-shaking">
        <div class="flex items-center right-base">
          <el-input v-model.number="stepInfo.params.second" style="width: 100px" size="small" class="right-base" />
          <span class="ml-2">秒</span>
        </div>
      </section>
      <section v-if="stepInfo.method === 'startHeating'" class="right-shaking">
        <div class="flex items-center right-base">
          加热温度：<el-input v-model.number="stepInfo.params.temperature" style="width: 100px" size="small" />
          <span class="ml-2">°C</span>
        </div>
      </section>
    </template>
  </div>
  <div style="height:5px;background: white;" />
</template>

<style lang="scss" scoped>
.right-contaner{
  background-color: rgb(82 148 215 / .06);
  border-radius: 10px;
}

.right-main{
 display: flex;
 align-items: center;
}

.right-base{
  font-size: 1rem;
  line-height: 1.5rem;
  margin-left: 1.25rem;
}
.text-item{
  margin-left: auto;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  .item-img{
    width:1rem
  }
}
.right-liquid{
  display: flex;
  height: 2.5rem;
}

.right-shaking{
  display: flex;
  height: 2.5rem;
}

.right-seq{
  padding-left: 20px;
  color: #19b370;
}
.el-select-dropdown__item{
  display: flex;
  align-items: center;
}
</style>