github.com/e154/smart-home@v0.17.2-0.20240311175135-e530a6e5cd45/static_source/admin/src/views/Automation/components/ConditionForm.vue (about)

     1  <script setup lang="ts">
     2  import {PropType, reactive, watch} from 'vue'
     3  import {Form} from '@/components/Form'
     4  import {useI18n} from '@/hooks/web/useI18n'
     5  import {useForm} from '@/hooks/web/useForm'
     6  import {useValidator} from '@/hooks/web/useValidator'
     7  import {FormSchema} from '@/types/form'
     8  import {ApiCondition} from "@/api/stub";
     9  
    10  const {register, elFormRef, methods} = useForm()
    11  const {required} = useValidator()
    12  const {t} = useI18n()
    13  
    14  const props = defineProps({
    15    condition: {
    16      type: Object as PropType<Nullable<ApiCondition>>,
    17      default: () => null
    18    }
    19  })
    20  
    21  const rules = {
    22    name: [required()],
    23    script: [required()],
    24  }
    25  
    26  const schema = reactive<FormSchema[]>([
    27    {
    28      field: 'name',
    29      label: t('automation.conditions.name'),
    30      component: 'Input',
    31      colProps: {
    32        span: 12
    33      },
    34      componentProps: {
    35        placeholder: t('automation.conditions.name')
    36      }
    37    },
    38    {
    39      field: 'description',
    40      label: t('automation.description'),
    41      component: 'Input',
    42      colProps: {
    43        span: 12
    44      },
    45      componentProps: {
    46        placeholder: t('automation.description')
    47      }
    48    },
    49    {
    50      field: 'area',
    51      label: t('automation.area'),
    52      value: null,
    53      component: 'Area',
    54      colProps: {
    55        span: 12
    56      },
    57      componentProps: {
    58        placeholder: t('automation.area'),
    59      }
    60    },
    61    {
    62      field: 'script',
    63      label: t('automation.conditions.script'),
    64      component: 'Script',
    65      colProps: {
    66        span: 24
    67      },
    68      value: null,
    69      componentProps: {
    70        placeholder: t('automation.conditions.script')
    71      }
    72    },
    73    {
    74      field: 'script',
    75      component: 'ScriptHelper',
    76      colProps: {
    77        span: 24
    78      },
    79      value: null,
    80      componentProps: {
    81        placeholder: t('automation.triggers.script'),
    82      }
    83    },
    84  ])
    85  
    86  const {setValues} = methods
    87  
    88  watch(
    89      () => props.condition,
    90      (val) => {
    91        if (!val) return
    92        setValues(val)
    93      },
    94      {
    95        deep: true,
    96        immediate: true
    97      }
    98  )
    99  
   100  defineExpose({
   101    elFormRef,
   102    getFormData: methods.getFormData
   103  })
   104  </script>
   105  
   106  <template>
   107    <Form
   108        :schema="schema"
   109        :rules="rules"
   110        label-position="top"
   111        @register="register"
   112    />
   113  </template>