disinfector_vue/src/components/formula/HomeFormulaConfig.vue

<script lang="ts" setup>
import { formulaNameMap } from 'libs/constant'
import { inject, onMounted, ref, watchEffect } from 'vue'

import { convertValuesToInt, convertValuesToString } from '@/libs/utils'
import { useFormulaStore } from '@/stores/formulaStore'

const formulaStore = useFormulaStore()
/**
 * 获取当前表单数据，将值转换为字符串格式
 * @returns {Record<string, string>} 转换后的表单数据
 */
const getFormData = () => {
  return convertValuesToString(formData.value, 'name')
}
/**
 * 注册孙子组件方法的注入函数
 */
const registerGrandsonMethods = inject<(methods: any) => void>('registerGrandsonMethods', () => {})
onMounted(() => {
  formulaStore.initFormulaList()
  registerGrandsonMethods && registerGrandsonMethods({ getFormData })
})
/**
 * 当前表单数据
 * - home: 当前选中的配方 或者默认配方
 */
const formData = ref<Record<string, any>>({})
/**
 * 标签单位映射表，用于显示各参数的单位
 */
const labelUnitMap: Record<string, any> = formulaStore.labelUnitMap
/**
 * 监听事件
 */
watchEffect(() => {
  formData.value
    = formulaStore.selectedFormulaInfo !== null
      ? convertValuesToInt(formulaStore.selectedFormulaInfo as Record<string, any>)
      : convertValuesToInt(formulaStore.defaultFormulaInfo as Record<string, any>)
})
/**
 * 配方配置列表
 */
const formulaConfigList = formulaStore.formulaConfigList
const size = 'default'
</script>

<template>
  <div class="formula-form">
    <el-form :model="formData" disabled label-width="auto" label-position="right" :size="size" inline>
      <el-form-item label="配方名称" style="width: 93%">
        <ft-input v-model="formData.name" name="name" placeholder="默认" />
      </el-form-item>
      <el-form-item
        v-for="item in formulaConfigList.filter(data => data.is_visible_in_rt_page)"
        :key="item.setting_id"
        :label="formulaNameMap[item.setting_id]"
        style="width: 50%"
        :prop="item.setting_id"
      >
        <template v-if="item.val_type === 'int'">
          <ft-input
            v-model.number="formData[item.setting_id]"
            style="width: 80%"
            :name="item.setting_id"
            :controls="false"
          >
            <template v-if="labelUnitMap[item.setting_id]" #append>
              {{ labelUnitMap[item.setting_id] }}
            </template>
          </ft-input>
        </template>
        <template v-if="item.val_type === 'float'">
          <ft-input
            v-model.number="formData[item.setting_id]"
            style="width: 80%"
            :name="item.setting_id"
            :controls="false"
          >
            <template v-if="labelUnitMap[item.setting_id]" #append>
              {{ labelUnitMap[item.setting_id] }}
            </template>
          </ft-input>
        </template>
        <template v-else-if="item.val_type === 'enum'">
          <el-select v-model="formData[item.setting_id]" style="width: 80%" placeholder="请选择" readonly>
            <el-option v-for="log in item.enums" :key="log" :label="log" :value="log" />
          </el-select>
        </template>
        <template v-else-if="item.val_type === 'boolean'">
          <el-radio-group v-model="formData[item.setting_id]">
            <el-radio :label="true">
              是
            </el-radio>
            <el-radio :label="false">
              否
            </el-radio>
          </el-radio-group>
        </template>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.formula-form {
  font-size: 20px !important;
  padding: 5px;
  padding-left: 15px;
  align-items: center;
  .default-btn {
    margin-top: 1rem;
  }
  .config-btn {
    height: 3rem;
    width: 8rem;
  }
}

.formula-form-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.formData-input-config {
  width: 10vw;
}
:deep(.el-input__inner) {
  text-align: left;
  height: 40px;
}
:deep(.el-form-item) {
  margin-right: 0;
  align-items: center;
}
:deep(.el-select) {
  height: 42px;
}
:deep(.el-select__wrapper) {
  height: 42px;
}
:deep(.el-input-group__append) {
  font-size: 12px;
  padding: 0 1vw;
}
/* 进入动画的初始状态 */
.slide-right-enter-from {
  transform: translateX(100%);
}
/* 进入动画的结束状态（也可以理解为激活状态） */
.slide-right-enter-to {
  transform: translateX(0);
}
/* 进入动画的过渡曲线等 */
.slide-right-enter-active {
  transition: transform 0.3s ease-in-out;
}
/* 离开动画的初始状态（激活状态） */
.slide-right-leave-from {
  transform: translateX(0);
}
/* 离开动画的结束状态 */
.slide-right-leave-to {
  transform: translateX(100%);
}
/* 离开动画的过渡曲线等 */
.slide-right-leave-active {
  transition: transform 0.3s ease-in-out;
}
</style>