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

     1  <script setup lang="ts">
     2  import {PropType, reactive, ref, unref, watch} from 'vue'
     3  import {Form, FormExpose} 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 {Trigger} from "@/views/Automation/components/types";
     9  import {ApiAction, ApiEntityShort} from "@/api/stub";
    10  import api from "@/api/api";
    11  
    12  const {register, elFormRef, methods} = useForm()
    13  const {required} = useValidator()
    14  const {t} = useI18n()
    15  
    16  const props = defineProps({
    17    action: {
    18      type: Object as PropType<Nullable<ApiAction>>,
    19      default: () => null
    20    }
    21  })
    22  
    23  const rules = {
    24    name: [required()],
    25    pluginName: [required()],
    26  }
    27  
    28  const getEntity = async (entityId?: string) => {
    29    if (!entityId) {
    30      return null
    31    }
    32    const res = await api.v1.entityServiceGetEntity(entityId)
    33    return res.data
    34  }
    35  
    36  const entityActionOptions = (options) => {
    37    unref(formRef)?.setSchema([
    38      {
    39        field: 'entityActionName',
    40        path: 'componentProps.options',
    41        value: options,
    42      }
    43    ])
    44  }
    45  
    46  const formRef = ref<FormExpose>()
    47  const updateEntityActions = async (entity?: ApiEntityShort) => {
    48    if (!entity) {
    49      entityActionOptions([])
    50      return
    51    }
    52    const res = await getEntity(entity.id)
    53    let options = []
    54    if (res) {
    55      for (const action of res?.actions) {
    56        options.push({
    57          key: action.name,
    58          value: action.name,
    59        })
    60      }
    61    }
    62    entityActionOptions(options)
    63  }
    64  
    65  updateEntityActions(props.action?.entity)
    66  
    67  const schema = reactive<FormSchema[]>([
    68    {
    69      field: 'name',
    70      label: t('automation.actions.name'),
    71      component: 'Input',
    72      colProps: {
    73        span: 12
    74      },
    75      componentProps: {
    76        placeholder: t('automation.actions.name')
    77      }
    78    },
    79    {
    80      field: 'description',
    81      label: t('automation.description'),
    82      component: 'Input',
    83      colProps: {
    84        span: 12
    85      },
    86      componentProps: {
    87        placeholder: t('automation.description')
    88      }
    89    },
    90    {
    91      field: 'area',
    92      label: t('automation.area'),
    93      value: null,
    94      component: 'Area',
    95      colProps: {
    96        span: 12
    97      },
    98      componentProps: {
    99        placeholder: t('automation.area'),
   100      }
   101    },
   102    {
   103      field: 'script',
   104      label: t('automation.actions.script'),
   105      component: 'Script',
   106      colProps: {
   107        span: 24
   108      },
   109      value: null,
   110      componentProps: {
   111        placeholder: t('automation.actions.script')
   112      }
   113    },
   114    {
   115      field: 'script',
   116      component: 'ScriptHelper',
   117      colProps: {
   118        span: 24
   119      },
   120      value: null,
   121      componentProps: {
   122        placeholder: t('automation.triggers.script'),
   123      }
   124    },
   125    {
   126      field: 'entity',
   127      label: t('automation.actions.entity'),
   128      component: 'Entity',
   129      colProps: {
   130        span: 24
   131      },
   132      hidden: false,
   133      componentProps: {
   134        placeholder: t('automation.actions.entity'),
   135        onChange: (entity?: ApiEntityShort) => {
   136          updateEntityActions(entity)
   137        }
   138      }
   139    },
   140    {
   141      field: 'entityActionName',
   142      label: t('automation.actions.entityActionName'),
   143      component: 'Select',
   144      colProps: {
   145        span: 24,
   146      },
   147      componentProps: {
   148        options: []
   149      }
   150    },
   151  ])
   152  
   153  const {setValues, setSchema} = methods
   154  
   155  watch(
   156      () => props.action,
   157      (val) => {
   158        if (!val) return
   159        setValues(val)
   160      },
   161      {
   162        deep: true,
   163        immediate: true
   164      }
   165  )
   166  
   167  defineExpose({
   168    elFormRef,
   169    getFormData: methods.getFormData
   170  })
   171  </script>
   172  
   173  <template>
   174    <Form
   175        ref="formRef"
   176        :schema="schema"
   177        :rules="rules"
   178        label-position="top"
   179        @register="register"
   180  
   181    />
   182  </template>