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

<script lang="ts" setup>
import { getContainerList } from '@/apis/container'
import { getSolsList } from '@/apis/solution'
import { useSolutionStore } from '@/stores/useSolutionStore'
import { onMounted, 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 solutionStore = useSolutionStore()
const stepInfo = ref(props.step)
onMounted(() => {
  querySolutionList()
})

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

const solutionList = ref<Solution.SolutionItem[]>([])
const querySolutionList = () => {
  getSolsList().then((res) => {
    if (res && res.list) {
      solutionList.value = res.list
      solutionStore.updateSolution(res.list)
      queryContainerList()
    }
  })
}

const containerLiquiedList = ref<Container.ContainerItem[]>([])
const queryContainerList = () => {
  getContainerList().then((res) => {
    res.forEach((item) => {
      if (item.solutionId) {
        solutionList.value.forEach((soluItem) => {
          if (item.solutionId === soluItem.id) {
            containerLiquiedList.value.push({
              ...item,
              solutionName: soluItem.name,
            })
          }
        })
      }
    })
  })
}
</script>

<template>
  <div class="right-container">
    <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 containerLiquiedList" :key="item.id" :label="item.solutionName" :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" :disabled="type === 'showlog'" />
          <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" :disabled="type === 'showlog'" />
          <span class="mL-2">°C</span>
        </div>
        <div class="flex items-center right-base">
          加热时间：<el-input v-model.number="stepInfo.params.second" style="width: 100px" size="small" :disabled="type === 'showlog'" />
          <span class="mL-2">秒</span>
        </div>
      </section>
    </template>
  </div>
  <div style="height:5px;background: white;" />
</template>

<style lang="scss" scoped>
div{
  font-size: 12px;
}
span{
  font-size: 12px;
}
.right-container{
  background-color: rgb(82 148 215 / .06);
  border-radius: 10px;
  min-height: 40px;
  padding-top: 5px;
}

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

.right-base{
  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: 3rem;
}

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

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