disinfector_vue/src/components/home/config.vue

<script lang="ts" setup>
import SelectModal from 'components/common/SelectModal/index.vue'
import FormulaConfig from 'components/formula/FormulaConfig.vue'
import { FtMessage } from 'libs/message'
import { computed, onMounted, ref, watchEffect } from 'vue'

import { convertValuesToInt } from '@/libs/utils'
import { useFormulaStore } from '@/stores/formulaStore'
import { useHomeStore } from '@/stores/homeStore'

/**
 * 配方选择页面组件
 * @description 负责处理配方选择逻辑、设备状态判断及界面交互
 */

// 状态管理
const formulaStore = useFormulaStore()
const homeStore = useHomeStore()

// 组件状态
const recipes = ref<Formula.FormulaItem[]>([]) // 配方列表
const isModalOpen = ref(false) // 选择模态框是否打开
const selectedValue = ref() // 选中的配方ID
const isDeviceIdle = ref(homeStore.isDeviceIdle) // 设备是否空闲状态

/**
 * @hook 生命周期钩子 - 挂载完成时执行
 * @description 初始化时检查配方列表，若为空则重新获取
 */
onMounted(() => {
  if (!formulaStore.formulaList || !formulaStore.formulaList.length) {
    formulaStore.initFormulaList()
  }
})

/**
 * @hook 响应式依赖监听
 * @description 监听store数据变化，同步更新组件状态
 */
watchEffect(() => {
  recipes.value = [...formulaStore.formulaList]
  isDeviceIdle.value = homeStore.isDeviceIdle
})

/**
 * @computed 计算属性 - 生成选择框选项
 * @returns {System.Option[]} 包含label和value的选项数组
 */
const options = computed(() => {
  const list = formulaStore.formulaList
  const optionList: System.Option[] = []
  list.forEach((item: Formula.FormulaItem) => {
    optionList.push({
      label: item.name.toString(),
      value: item.formula_id,
    })
  })
  return optionList
})

/**
 * @function 确认选择处理函数
 * @param {any} value - 选中的配方ID
 * @description 关闭模态框，更新选中配方并转换数值类型
 */
const handleConfirm = (value: any) => {
  if (!value) {
    FtMessage.error('请选择配方')
    return
  }
  console.log('value---', value)
  isModalOpen.value = false
  let selectedFormula = {}
  formulaStore.formulaList.forEach((item: Formula.FormulaItem) => {
    if (item.formula_id === value) {
      selectedFormula = item
    }
  })
  const selectedFormulaToInt = convertValuesToInt(selectedFormula)
  formulaStore.updateSelectedFormulaDataByList(selectedFormulaToInt as Formula.FormulaItem)
}

/**
 * @function 取消选择处理函数
 * @description 关闭模态框
 */
const handleCancel = () => {
  isModalOpen.value = false
}

/**
 * @function 打开选择配方模态框
 * @description 触发模态框显示
 */
const onChooseFormula = () => {
  isModalOpen.value = true
}

/**
 * @function 应用默认配方
 * @description 重置配方数据为默认配置
 */
const onDefaultFormula = () => {
  formulaStore.initFormulaData()
}
</script>

<template>
  <div class="main-content">
    <div v-if="isDeviceIdle">
      <bt-button
        type="primary"
        button-text="选择配方"
        width="12vw"
        height="5vh"
        @click="onChooseFormula"
      >
        <template #icon>
          <el-icon>
            <Plus />
          </el-icon>
        </template>
      </bt-button>
      <bt-button
        button-text="默认配置"
        height="5vh"
        width="12vw"
        @click="onDefaultFormula"
      >
        <template #icon>
          <el-icon>
            <Operation />
          </el-icon>
        </template>
      </bt-button>
    </div>
    <div class="formula-config">
      <FormulaConfig type="home" />
    </div>
    <SelectModal
      v-if="isModalOpen"
      :options="options"
      :selected-value="selectedValue"
      placeholder="请选择"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    />
  </div>
</template>

<style lang="scss" scoped>
  .main-content{
    overflow: hidden;
    height: auto;
    //background: $gradient-color;
    padding: 15px;
    .formula-config{
      display: grid;
      padding: 10px;
      width: 100%;
    }
    .formula-config-form{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5px;
    }
    .formdata-input{
      width: 10vw;
    }
  }
</style>