github.com/e154/smart-home@v0.17.2-0.20240311175135-e530a6e5cd45/static_source/admin/src/views/Entities/components/StateForm.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 {EntityState} 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    state: {
    16      type: Object as PropType<Nullable<EntityState>>,
    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: 'image',
    52      label: t('entities.image'),
    53      component: 'Image',
    54      colProps: {
    55        span: 24
    56      },
    57      value: null,
    58      componentProps: {
    59        placeholder: t('entities.image')
    60      }
    61    },
    62  ])
    63  
    64  watch(
    65      () => props.state,
    66      (val) => {
    67        if (!val) return
    68        setValues(val)
    69      },
    70      {
    71        deep: true,
    72        immediate: true
    73      }
    74  )
    75  
    76  defineExpose({
    77    elFormRef,
    78    getFormData: methods.getFormData
    79  })
    80  </script>
    81  
    82  <template>
    83    <Form
    84        :schema="schema"
    85        :rules="rules"
    86        label-position="top"
    87        @register="register"
    88    />
    89  </template>