github.com/e154/smart-home@v0.17.2-0.20240311175135-e530a6e5cd45/static_source/admin/src/views/Zigbee2mqtt/components/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 {ApiZigbee2Mqtt} 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<ApiZigbee2Mqtt>>,
    17      default: () => null
    18    }
    19  })
    20  
    21  const rules = {
    22    name: [required()],
    23    baseTopic: [required()],
    24    description: []
    25  }
    26  
    27  const schema = reactive<FormSchema[]>([
    28    {
    29      field: 'name',
    30      label: t('zigbee2mqtt.name'),
    31      component: 'Input',
    32      colProps: {
    33        span: 24
    34      },
    35      componentProps: {
    36        placeholder: t('zigbee2mqtt.name')
    37      }
    38    },
    39    {
    40      field: 'baseTopic',
    41      label: t('zigbee2mqtt.baseTopic'),
    42      component: 'Input',
    43      colProps: {
    44        span: 24
    45      },
    46      componentProps: {
    47        placeholder: t('zigbee2mqtt.baseTopic')
    48      }
    49    },
    50    {
    51      field: 'login',
    52      label: t('zigbee2mqtt.login'),
    53      component: 'Input',
    54      colProps: {
    55        span: 24
    56      },
    57      componentProps: {
    58        placeholder: t('zigbee2mqtt.login')
    59      }
    60    },
    61    {
    62      field: 'password',
    63      label: t('zigbee2mqtt.password'),
    64      component: 'Input',
    65      colProps: {
    66        span: 24
    67      },
    68      componentProps: {
    69        placeholder: t('zigbee2mqtt.password')
    70      }
    71    },
    72    {
    73      field: 'permitJoin',
    74      label: t('zigbee2mqtt.permitJoin'),
    75      component: 'Switch',
    76      value: false,
    77      colProps: {
    78        span: 24
    79      },
    80    },
    81  ])
    82  
    83  watch(
    84      () => props.currentRow,
    85      (currentRow) => {
    86        if (!currentRow) return
    87        const { setValues, setSchema } = methods
    88        setValues(currentRow)
    89      },
    90      {
    91        deep: true,
    92        immediate: true
    93      }
    94  )
    95  
    96  defineExpose({
    97    elFormRef,
    98    getFormData: methods.getFormData
    99  })
   100  </script>
   101  
   102  <template>
   103    <Form
   104        :schema="schema"
   105        :rules="rules"
   106        label-position="top"
   107        @register="register"
   108    />
   109  </template>