github.com/e154/smart-home@v0.17.2-0.20240311175135-e530a6e5cd45/static_source/admin/src/views/Areas/Form.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 {ApiArea} from "@/api/stub";
     9  
    10  const {register, elFormRef, methods} = useForm()
    11  const {required} = useValidator()
    12  const {t} = useI18n()
    13  
    14  const props = defineProps({
    15    currentRow: {
    16      type: Object as PropType<Nullable<ApiArea>>,
    17      default: () => null
    18    }
    19  })
    20  
    21  const rules = {
    22    name: [required()],
    23    description: []
    24  }
    25  
    26  const schema = reactive<FormSchema[]>([
    27    {
    28      field: 'name',
    29      label: t('areas.name'),
    30      component: 'Input',
    31      colProps: {
    32        span: 24
    33      },
    34      componentProps: {
    35        placeholder: t('areas.name')
    36      }
    37    },
    38    {
    39      field: 'description',
    40      label: t('areas.description'),
    41      component: 'Input',
    42      colProps: {
    43        span: 24
    44      },
    45      componentProps: {
    46        placeholder: t('areas.description')
    47      }
    48    },
    49  ])
    50  
    51  watch(
    52      () => props.currentRow,
    53      (currentRow) => {
    54        if (!currentRow) return
    55        const { setValues, setSchema } = methods
    56        setValues(currentRow)
    57      },
    58      {
    59        deep: true,
    60        immediate: true
    61      }
    62  )
    63  
    64  defineExpose({
    65    elFormRef,
    66    getFormData: methods.getFormData
    67  })
    68  </script>
    69  
    70  <template>
    71    <Form
    72        :schema="schema"
    73        :rules="rules"
    74        label-position="top"
    75        @register="register"
    76    />
    77  </template>