disinfector_vue/src/components/formula/RunFormulaConfig.vue

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

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

const formulaStore = useFormulaStore()
const runtimeFormRef = ref()
const saveFormData = async () => {
  const valid = await runtimeFormRef.value.validate
  if (valid) {
    return convertValuesToString(formData.value, 'name')
  }
  return null
}
defineExpose({ saveFormData })
/**
 * 注册孙子组件方法的注入函数
 */
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(async () => {
  formData.value = (await formulaStore.getRealtimeConfig()).rely
  console.log(formData.value)
})
/**
 * 配方配置列表
 */
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 (value.substring(0, 1) === '.' || value.split('.').length > 2) {
    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
      style="overflow: hidden"
    >
      <el-row :gutter="20">
        <el-col
          v-for="item in formulaConfigList.filter(data => data.is_visible_in_rt_page)"
          :key="item.setting_id"
          :span="12"
        >
          <el-form-item
            :label="item.name_ch"
            style="width: 100%"
            :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'">
              <ft-input
                v-model="formData[item.setting_id]"
                style="width: 100%"
                :name="item.setting_id"
                :controls="false"
                :disabled="!item.is_editable"
              >
                <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: 100%"
                :name="item.setting_id"
                :controls="false"
                :disabled="!item.is_editable"
              >
                <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]"
                v-prevent-keyboard
                style="width: 100%"
                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-col>
      </el-row>
    </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-select) {
  height: 42px;
}
:deep(.el-select__wrapper) {
  height: 42px;
}
: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>