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

     1  <script setup lang="ts">
     2  import {computed, defineEmits, PropType, reactive, ref, watch} from 'vue'
     3  import {Form} from '@/components/Form'
     4  import {useI18n} from '@/hooks/web/useI18n'
     5  import {ElButton, ElPopconfirm} from 'element-plus'
     6  import {useForm} from '@/hooks/web/useForm'
     7  import {useCache} from '@/hooks/web/useCache'
     8  import {useAppStore} from '@/store/modules/app'
     9  import {usePermissionStore} from '@/store/modules/permission'
    10  import {useRoute, useRouter} from 'vue-router'
    11  import {useValidator} from '@/hooks/web/useValidator'
    12  import {FormSchema} from '@/types/form'
    13  import {ApiTask} from "@/api/stub";
    14  import api from "@/api/api";
    15  
    16  const {register, elFormRef, methods} = useForm()
    17  const {required} = useValidator()
    18  const appStore = useAppStore()
    19  const permissionStore = usePermissionStore()
    20  const {currentRoute, addRoute, push} = useRouter()
    21  const route = useRoute();
    22  const {wsCache} = useCache()
    23  const {t} = useI18n()
    24  
    25  const props = defineProps({
    26    task: {
    27      type: Object as PropType<Nullable<ApiTask>>,
    28      default: () => null
    29    }
    30  })
    31  
    32  const rules = {
    33    name: [required()],
    34    condition: [required()],
    35  }
    36  
    37  const schema = reactive<FormSchema[]>([
    38    {
    39      field: 'name',
    40      label: t('automation.name'),
    41      component: 'Input',
    42      colProps: {
    43        span: 12
    44      },
    45      componentProps: {
    46        placeholder: t('automation.name')
    47      }
    48    },
    49    {
    50      field: 'description',
    51      label: t('automation.description'),
    52      component: 'Input',
    53      colProps: {
    54        span: 12
    55      },
    56      componentProps: {
    57        placeholder: t('automation.description')
    58      }
    59    },
    60    {
    61      field: 'enabled',
    62      label: t('automation.enabled'),
    63      component: 'Switch',
    64      value: false,
    65      colProps: {
    66        span: 12
    67      },
    68    },
    69    {
    70      field: 'condition',
    71      label: t('automation.condition'),
    72      component: 'Select',
    73      value: 'and',
    74      colProps: {
    75        span: 12,
    76      },
    77      componentProps: {
    78        options: [
    79          {
    80            label: 'AND',
    81            value: 'and'
    82          },
    83          {
    84            label: 'OR',
    85            value: 'or'
    86          }
    87        ],
    88        onChange: (value: string) => {
    89  
    90        }
    91      }
    92    },
    93    {
    94      field: 'area',
    95      label: t('automation.area'),
    96      value: null,
    97      component: 'Area',
    98      colProps: {
    99        span: 12
   100      },
   101      componentProps: {
   102        placeholder: t('automation.area'),
   103      }
   104    },
   105  ])
   106  
   107  watch(
   108      () => props.task,
   109      (task) => {
   110        if (!task) return
   111        const { setValues, setSchema } = methods
   112        setValues(task)
   113      },
   114      {
   115        deep: true,
   116        immediate: true
   117      }
   118  )
   119  
   120  defineExpose({
   121    elFormRef,
   122    getFormData: methods.getFormData
   123  })
   124  </script>
   125  
   126  <template>
   127    <Form
   128        :schema="schema"
   129        :rules="rules"
   130        label-position="top"
   131        @register="register"
   132    />
   133  </template>