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

     1  <script setup lang="ts">
     2  import {computed, ref, unref} from 'vue'
     3  import {useI18n} from '@/hooks/web/useI18n'
     4  import {ElButton, ElMessage, ElPopconfirm} from 'element-plus'
     5  import {useForm} from '@/hooks/web/useForm'
     6  import {useRoute, useRouter} from 'vue-router'
     7  import {useValidator} from '@/hooks/web/useValidator'
     8  import api from "@/api/api";
     9  import Form from './components/Form.vue'
    10  import {ApiTrigger} from "@/api/stub";
    11  import {ContentWrap} from "@/components/ContentWrap";
    12  import TriggerForm from "@/views/Automation/components/TriggerForm.vue";
    13  
    14  const {register, elFormRef, methods} = useForm()
    15  const {required} = useValidator()
    16  const {currentRoute, addRoute, push} = useRouter()
    17  const route = useRoute();
    18  const {t} = useI18n()
    19  
    20  const writeRef = ref<ComponentRef<typeof Form>>()
    21  const loading = ref(true)
    22  const triggerId = computed(() => +route.params.id);
    23  const currentRow = ref<Nullable<ApiTrigger>>(null)
    24  
    25  const fetch = async () => {
    26    loading.value = true
    27    const res = await api.v1.triggerServiceGetTriggerById(triggerId.value)
    28        .catch(() => {
    29        })
    30        .finally(() => {
    31          loading.value = false
    32        })
    33    if (res) {
    34      currentRow.value = res.data;
    35    } else {
    36      currentRow.value = null
    37    }
    38  }
    39  
    40  const save = async () => {
    41    const write = unref(writeRef)
    42    const validate = await write?.elFormRef?.validate()?.catch(() => {
    43    })
    44    if (validate) {
    45      loading.value = true
    46      const tr = (await write?.getFormData()) as ApiTrigger;
    47      let data = {
    48        name: tr.name,
    49        description: tr.description,
    50        entityIds: tr.entityIds || [],
    51        scriptId: tr.script?.id || null,
    52        areaId: tr.area?.id || null,
    53        pluginName: tr.pluginName,
    54        attributes: {},
    55        enabled: tr.enabled,
    56      }
    57      if (tr.pluginName === 'time') {
    58        data.attributes['cron'] = {
    59          string: tr?.timePluginOptions || '',
    60          type: "STRING",
    61        }
    62      }
    63      if (tr.pluginName === 'system') {
    64        data.attributes['system'] = {
    65          string: tr?.systemPluginOptions || '',
    66          type: "STRING",
    67        }
    68      }
    69      const res = await api.v1.triggerServiceUpdateTrigger(triggerId.value, data)
    70          .catch(() => {
    71          })
    72          .finally(() => {
    73            loading.value = false
    74          })
    75      if (res) {
    76        ElMessage({
    77          title: t('Success'),
    78          message: t('message.updatedSuccessfully'),
    79          type: 'success',
    80          duration: 2000
    81        })
    82      }
    83    }
    84  }
    85  
    86  const cancel = () => {
    87    push('/automation/triggers')
    88  }
    89  
    90  const remove = async () => {
    91    loading.value = true
    92    const res = await api.v1.triggerServiceDeleteTrigger(triggerId.value)
    93        .catch(() => {
    94        })
    95        .finally(() => {
    96          loading.value = false
    97        })
    98    if (res) {
    99      cancel()
   100    }
   101  }
   102  
   103  const callTrigger = async () => {
   104    await api.v1.developerToolsServiceCallTrigger({id: triggerId.value})
   105        .catch(() => {
   106        })
   107        .finally(() => {
   108          ElMessage({
   109            title: t('Success'),
   110            message: t('message.callSuccessful'),
   111            type: 'success',
   112            duration: 2000
   113          })
   114        })
   115  }
   116  
   117  fetch()
   118  
   119  </script>
   120  
   121  <template>
   122    <ContentWrap>
   123  
   124      <TriggerForm ref="writeRef" :trigger="currentRow"/>
   125  
   126      <div style="text-align: right">
   127  
   128        <ElButton type="success" @click="callTrigger()">
   129          {{ t('main.call') }}
   130        </ElButton>
   131  
   132        <ElButton type="primary" @click="save()">
   133          {{ t('main.save') }}
   134        </ElButton>
   135  
   136        <ElButton type="default" @click="cancel()">
   137          {{ t('main.return') }}
   138        </ElButton>
   139  
   140        <ElPopconfirm
   141            :confirm-button-text="$t('main.ok')"
   142            :cancel-button-text="$t('main.no')"
   143            width="250"
   144            style="margin-left: 10px;"
   145            :title="$t('main.are_you_sure_to_do_want_this?')"
   146            @confirm="remove"
   147        >
   148          <template #reference>
   149            <ElButton class="mr-10px" type="danger" plain>
   150              <Icon icon="ep:delete" class="mr-5px"/>
   151              {{ t('main.remove') }}
   152            </ElButton>
   153          </template>
   154        </ElPopconfirm>
   155  
   156      </div>
   157    </ContentWrap>
   158  
   159  </template>
   160  
   161  <style lang="less" scoped>
   162  
   163  </style>