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

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