graphite-digestion-web/src/components/home/SetTemperature/index.vue

<script setup lang="ts">
import { setTargetTemperature } from 'apis/home'
import { getOreList } from 'apis/ore'
import { FtMessage } from 'libs/message'
import { onMounted, ref } from 'vue'

const props = defineProps({
  id: {
    type: String,
    default: 'heat_module_01',
  },
})
const emits = defineEmits(['ok', 'cancel'])

onMounted(() => {
  getOres()
})

const form = ref({
  temperature: 0,
})
const formRef = ref()

const rules = {
  temperature: [
    { required: true, message: '请输入目标温度', trigger: 'blur' },
  ],
}

const okHandle = async () => {
  try {
    const valid = await formRef.value.validate()
    if (!valid) {
      return
    }
    await setTargetTemperature({
      ...form.value,
      moduleCode: props.id,
    })
    FtMessage.success('设置成功')
    emits('ok')
  }
  catch (error) {
    console.log(error)
  }
}
const cancel = () => {
  emits('cancel')
}

const oreList = ref<Ore.OreItem[]>([])

const getOres = async () => {
  const res = await getOreList()
  oreList.value = res.list
}
</script>

<template>
  <FtDialog visible title="设置温度" width="40%" :ok-handle="okHandle" @cancel="cancel">
    <el-form ref="formRef" label-width="auto" :model="form" :rules="rules">
      <el-form-item label="目标温度" prop="temperature">
        <el-input v-model.number="form.temperature" type="number" placeholder="请输入温度">
          <template #append>
            ℃
          </template>
        </el-input>
      </el-form-item>
      <!--      <el-form-item label="到达温度后" prop="type"> -->
      <!--        <el-radio-group v-model="form.type"> -->
      <!--          <el-radio value="1" size="large"> -->
      <!--            保持温度 -->
      <!--          </el-radio> -->
      <!--          <el-radio value="2" size="large"> -->
      <!--            停止加热 -->
      <!--          </el-radio> -->
      <!--        </el-radio-group> -->
      <!--      </el-form-item> -->
    </el-form>
  </FtDialog>
</template>

<style scoped lang="scss">
.el-tag {
  margin-right: 5px;
}
</style>