github.com/e154/smart-home@v0.17.2-0.20240311175135-e530a6e5cd45/static_source/admin/src/views/Entities/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 {Entity} 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    currentRow: {
    16      type: Object as PropType<Nullable<Entity>>,
    17      default: () => null
    18    }
    19  })
    20  
    21  const rules = {
    22    name: [required()],
    23    plugin: [required()],
    24    description: []
    25  }
    26  
    27  const schema = reactive<FormSchema[]>([
    28    {
    29      field: 'name',
    30      label: t('entities.name'),
    31      component: 'Input',
    32      colProps: {
    33        span: 12
    34      },
    35      componentProps: {
    36        placeholder: t('entities.name')
    37      }
    38    },
    39    {
    40      field: 'id',
    41      label: t('entities.id'),
    42      component: 'Input',
    43      colProps: {
    44        span: 12
    45      },
    46      hidden: true,
    47      componentProps: {
    48        placeholder: t('entities.id'),
    49        disabled: true
    50      }
    51    },
    52    {
    53      field: 'plugin',
    54      label: t('entities.pluginName'),
    55      component: 'Plugin',
    56      value: null,
    57      colProps: {
    58        span: 12
    59      },
    60      hidden: false,
    61      componentProps: {
    62        placeholder: t('entities.pluginName')
    63      }
    64    },
    65    {
    66      field: 'scriptIds',
    67      label: t('entities.scripts'),
    68      component: 'Scripts',
    69      colProps: {
    70        span: 12
    71      },
    72      value: [],
    73      hidden: false,
    74      componentProps: {
    75        placeholder: t('entities.scripts')
    76      }
    77    },
    78    {
    79      field: 'tags',
    80      label: t('main.tags'),
    81      component: 'Tags',
    82      colProps: {
    83        span: 12
    84      },
    85      value: [],
    86      hidden: false,
    87      componentProps: {
    88        placeholder: t('main.tags')
    89      }
    90    },
    91    {
    92      field: 'description',
    93      label: t('entities.description'),
    94      component: 'Input',
    95      colProps: {
    96        span: 12
    97      },
    98      componentProps: {
    99        placeholder: t('entities.description')
   100      }
   101    },
   102    {
   103      field: 'icon',
   104      label: t('entities.icon'),
   105      component: 'Input',
   106      colProps: {
   107        span: 12
   108      },
   109      componentProps: {
   110        placeholder: t('entities.icon')
   111      }
   112    },
   113    {
   114      field: 'image',
   115      label: t('entities.image'),
   116      component: 'Image',
   117      value: null,
   118      colProps: {
   119        span: 24
   120      },
   121      componentProps: {
   122        placeholder: t('entities.image'),
   123      }
   124    },
   125    {
   126      field: 'autoLoad',
   127      label: t('entities.autoLoad'),
   128      component: 'Switch',
   129      value: false,
   130      colProps: {
   131        span: 12
   132      },
   133    },
   134    {
   135      field: 'restoreState',
   136      label: t('entities.restoreState'),
   137      component: 'Switch',
   138      value: true,
   139      colProps: {
   140        span: 12
   141      },
   142    },
   143    {
   144      field: 'parent',
   145      label: t('entities.parent'),
   146      value: null,
   147      component: 'Entity',
   148      colProps: {
   149        span: 12
   150      },
   151      componentProps: {
   152        placeholder: t('entities.parent'),
   153      }
   154    },
   155    {
   156      field: 'area',
   157      label: t('entities.area'),
   158      value: null,
   159      component: 'Area',
   160      colProps: {
   161        span: 12
   162      },
   163      componentProps: {
   164        placeholder: t('entities.area'),
   165      }
   166    },
   167  ])
   168  
   169  const {setValues, setSchema} = methods
   170  watch(
   171      () => props.currentRow,
   172      (currentRow) => {
   173        if (!currentRow) return
   174  
   175        let exist: boolean
   176        if (currentRow.id) {
   177          exist = true
   178        }
   179        const schema = [
   180          {field: 'name', path: 'hidden', value: exist},
   181          {field: 'id', path: 'hidden', value: !exist},
   182          {field: 'plugin', path: 'componentProps.disabled', value: exist},
   183        ]
   184        setSchema(schema)
   185        setValues(currentRow)
   186      },
   187      {
   188        deep: true,
   189        immediate: true
   190      }
   191  )
   192  
   193  defineExpose({
   194    elFormRef,
   195    getFormData: methods.getFormData
   196  })
   197  </script>
   198  
   199  <template>
   200    <Form
   201        :schema="schema"
   202        :rules="rules"
   203        label-position="top"
   204        @register="register"
   205    />
   206  </template>