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

     1  <script setup lang="ts">
     2  import {computed, defineEmits, onMounted, PropType, reactive, ref, 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 {User} from "@/views/Users/components/types";
     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<User>>,
    17      default: () => null
    18    }
    19  })
    20  
    21  const rules = {
    22    name: [required()],
    23    lang: [required()],
    24  }
    25  
    26  const schema = reactive<FormSchema[]>([
    27    {
    28      field: 'name',
    29      label: t('scripts.name'),
    30      component: 'Input',
    31      colProps: {
    32        span: 12
    33      },
    34      componentProps: {
    35        placeholder: t('scripts.name')
    36      }
    37    },
    38    {
    39      field: 'description',
    40      label: t('scripts.description'),
    41      component: 'Input',
    42      colProps: {
    43        span: 12
    44      },
    45      componentProps: {
    46        placeholder: t('scripts.description')
    47      }
    48    },
    49    {
    50      field: 'lang',
    51      label: t('scripts.lang'),
    52      component: 'Select',
    53      value: 'coffeescript',
    54      componentProps: {
    55        options: [
    56          {
    57            label: 'coffeescript',
    58            value: 'coffeescript'
    59          },
    60          {
    61            label: 'javascript',
    62            value: 'javascript'
    63          },
    64          {
    65            label: 'typescript',
    66            value: 'ts'
    67          }
    68        ],
    69      },
    70      colProps: {
    71        span: 12,
    72      },
    73    },
    74  
    75  ])
    76  
    77  watch(
    78      () => props.currentRow,
    79      (currentRow) => {
    80        if (!currentRow) return
    81        const { setValues } = methods
    82        setValues(currentRow)
    83      },
    84      {
    85        deep: true,
    86        immediate: true
    87      }
    88  )
    89  
    90  defineExpose({
    91    elFormRef,
    92    getFormData: methods.getFormData
    93  })
    94  </script>
    95  
    96  <template>
    97    <Form
    98        :schema="schema"
    99        :rules="rules"
   100        label-position="top"
   101        @register="register"
   102    />
   103  </template>