pqs-9100_client/frontend/src/views/home/components/writeTHPopup.vue

<template>
  <el-dialog title='填写实验室环境' v-model='dialogVisible' @close='handleClose' v-bind='dialogSmall'>
    <div>
      <el-form ref='dialogFormRef' :model='formContent' :rules='rules'>
        <el-form-item label='温度(℃)' prop='temperature' :label-width='110'>
          <el-input v-model='formContent.temperature' placeholder='请输入温度' maxlength='32' show-word-limit />
        </el-form-item>
        <el-form-item label='相对湿度(%)' prop='humidity' :label-width='110'>
          <el-input v-model='formContent.humidity' placeholder='请输入湿度' maxlength='32' show-word-limit />
        </el-form-item>
        <el-form-item v-if='hasCheckingDevice' label='是否续检' :label-width='110'>
          <el-checkbox v-model='resumeFormalChecked' @change='handleResumeFormalChange' />
        </el-form-item>
        <el-form-item v-if='checkStore.plan.timeCheck === 1' label='守时检测' prop='timeTest' :label-width='110'>
          <el-checkbox v-model='timeTestChecked' @change='handleTimeTestChange' />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
        <span class='dialog-footer'>
          <el-button @click='handleClose'>取消</el-button>
          <el-button type='primary' @click='handleStart'>确定</el-button>
        </span>
    </template>
  </el-dialog>
</template>

<script setup lang='tsx' name='selectTestItemPopup'>
import { dialogSmall } from '@/utils/elementBind'
import { reactive, Ref, ref } from 'vue'
import type { Device } from '@/api/device/interface/device.ts'
import { ElMessageBox, FormItemRule } from 'element-plus'
import { useCheckStore } from '@/stores/modules/check'

const emit = defineEmits(['openTestDialog2'])
const dialogFormRef = ref()


const dialogVisible = ref(false)
const formContent = reactive<Device.ResTH>({ temperature: 0, humidity: 0 })
const hasCheckingDevice = ref(false)
const resumeFormalChecked = ref(false)
const timeTestChecked = ref(false)
const checkStore = useCheckStore()
const open = async () => {
  resetFormContent()
  syncResumeFormalSelection()
  timeTestChecked.value = Boolean(checkStore.selectTestItems.timeTest)
  dialogVisible.value = true
}

// 清空表单内容
const resetFormContent = () => {
  Object.assign(formContent, { temperature: '22', humidity: '50' })
  hasCheckingDevice.value = false
  resumeFormalChecked.value = false
  timeTestChecked.value = false
}

const syncTimeTestSelection = (selected: boolean) => {
  timeTestChecked.value = selected
  checkStore.setSelectTestItems({
    ...checkStore.selectTestItems,
    timeTest: selected,
  })
}

const syncResumeFormalSelection = () => {
  hasCheckingDevice.value = checkStore.devices.some(device => Number(device.checkState) === 1)
  resumeFormalChecked.value = hasCheckingDevice.value
  checkStore.setResumeFormal(hasCheckingDevice.value)
}

const handleResumeFormalChange = (value: string | number | boolean) => {
  const selected = hasCheckingDevice.value && Boolean(value)
  resumeFormalChecked.value = selected
  checkStore.setResumeFormal(selected)
}

const handleTimeTestChange = (value: string | number | boolean) => {
  syncTimeTestSelection(Boolean(value))
}


//定义校验规则
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
  temperature: [{ required: true, message: '温度必填！', trigger: 'blur' },
    // 指定正则，此处是数字正则
    {
      pattern: /^(?:(?:-50)|-?[1-4][0-9]|-?[0-9]|[1-4][0-9]|50)(\.[0-9]+)?$/,
      message: '温度必须为 -50 到 50 之间的合法数字',
      trigger: 'blur',
    }],
  humidity: [{ required: true, message: '湿度必填！', trigger: 'blur' },
    {
      pattern: /^(?:100(?:\.0+)?|\d{1,2}(?:\.\d+)?|0?\.\d+)$/,
      message: '湿度必须为 0 到 100 之间的合法数字',
      trigger: 'blur',
    },
  ],

})


const handleStart = () => {
  try {
    dialogFormRef.value?.validate(async (valid: boolean) => {
      if (valid) {
        checkStore.setTemperature(formContent.temperature)
        checkStore.setHumidity(formContent.humidity)
        checkStore.setResumeFormal(hasCheckingDevice.value && resumeFormalChecked.value)
        emit('openTestDialog2')
        handleClose()
      }
    })
  } catch (err) {
    console.error('验证过程中出现错误', err)
  }

}

// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false
  // 清空dialogForm中的值
  resetFormContent()
  dialogFormRef.value?.resetFields()
}

defineExpose({ open })

</script>


<style scoped lang='scss'>
</style>