disinfector_vue/src/components/formula/RunFormulaConfig.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()
const runtimeFormRef = ref()
const saveFormData = () => {
  runtimeFormRef.value.validate((valid: any) => {
    if (valid) {
      return convertValuesToString(formData.value, 'name')
    }
    return null
  })
}
/**
 * 注册孙子组件方法的注入函数
 */
const registerGrandsonMethods = inject<(methods: any) => void>('registerGrandsonMethods', () => {})
onMounted(() => {
  registerGrandsonMethods && registerGrandsonMethods({ saveFormData })
})
/**
 * 当前表单数据
 * - home: 当前选中的配方 或者默认配方
 */
const formData = ref<Record<string, any>>({})
/**
 * 标签单位映射表，用于显示各参数的单位
 */
const labelUnitMap: Record<string, any> = formulaStore.labelUnitMap
/**
 * 监听事件
 */
watchEffect(() => {
  formData.value = convertValuesToInt(formulaStore.getRealtimeConfig())
})
/**
 * 配方配置列表
 */
const formulaConfigList = formulaStore.formulaConfigList
const size = 'default'
const validatePass = (rule: any, value: any, callback: any, config: Formula.FormulaConfig) => {
  if (!value && value !== 0 && value !== '0') {
    callback(new Error('此为必填项'))
  }
  else if (config.val_type === 'int' || config.val_type === 'float') {
    const temp = Number(value)
    if (temp < config.val_lower_limit || temp > config.val_upper_limit) {
      callback(new Error(`输入范围为${config.val_lower_limit}-${config.val_upper_limit}`))
    }
  }
  callback()
}
</script>

<template>
  <div class="formula-form">
    <el-form
      ref="runtimeFormRef"
      :model="formData"
      label-width="auto"
      label-position="right"
      :size="size"
      inline
    >
      <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"
        :rules="[
          {
            required: true,
            validator: (rule, value, callback) => validatePass(rule, value, callback, item),
            trigger: 'blur',
          },
        ]"
      >
        <template v-if="item.val_type === 'int'">
          <el-input
            v-model.number="formData[item.setting_id]"
            v-prevent-keyboard
            style="width: 80%"
            type="number"
            :name="item.setting_id"
            :controls="false"
            :disabled="!(item.is_editable)"
          >
            <template v-if="labelUnitMap[item.setting_id]" #append>
              {{ labelUnitMap[item.setting_id] }}
            </template>
          </el-input>
        </template>
        <template v-if="item.val_type === 'float'">
          <el-input
            v-model.number="formData[item.setting_id]"
            v-prevent-keyboard
            style="width: 80%"
            type="number"
            :name="item.setting_id"
            :controls="false"
            :disabled="!(item.is_editable)"
          >
            <template v-if="labelUnitMap[item.setting_id]" #append>
              {{ labelUnitMap[item.setting_id] }}
            </template>
          </el-input>
        </template>
        <template v-else-if="item.val_type === 'enum'">
          <el-select
            v-model="formData[item.setting_id]"
            v-prevent-keyboard
            style="width: 80%;height:40px"
            placeholder="请选择"
            :disabled="!(item.is_editable)"
            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]" :disabled="!item.is_editable">
            <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;
}

/* 进入动画的初始状态 */
.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>