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

     1  <script setup lang="ts">
     2  import {computed, defineEmits, 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 {ApiCondition, ApiScript} from "@/api/stub";
    11  import {ContentWrap} from "@/components/ContentWrap";
    12  import ConditionForm from "@/views/Automation/components/ConditionForm.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 conditionId = computed(() => route.params.id as number);
    23  const currentRow = ref<Nullable<ApiCondition>>(null)
    24  
    25  const fetch = async () => {
    26    loading.value = true
    27    const res = await api.v1.conditionServiceGetConditionById(conditionId.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 con = (await write?.getFormData()) as ApiCondition;
    47      const data = {
    48        name: con.name,
    49        description: con.description,
    50        scriptId: con.script?.id,
    51        areaId: con.area?.id,
    52      }
    53      const res = await api.v1.conditionServiceUpdateCondition(conditionId.value, data)
    54          .catch(() => {
    55          })
    56          .finally(() => {
    57            loading.value = false
    58          })
    59      if (res) {
    60        ElMessage({
    61          title: t('Success'),
    62          message: t('message.updatedSuccessfully'),
    63          type: 'success',
    64          duration: 2000
    65        })
    66      }
    67    }
    68  }
    69  
    70  const cancel = () => {
    71    push('/automation/conditions')
    72  }
    73  
    74  const remove = async () => {
    75    loading.value = true
    76    const res = await api.v1.conditionServiceDeleteCondition(conditionId.value)
    77        .catch(() => {
    78        })
    79        .finally(() => {
    80          loading.value = false
    81        })
    82    if (res) {
    83      cancel()
    84    }
    85  }
    86  fetch()
    87  
    88  </script>
    89  
    90  <template>
    91    <ContentWrap>
    92  
    93      <ConditionForm ref="writeRef" :condition="currentRow"/>
    94  
    95      <div style="text-align: right">
    96  
    97        <ElButton type="primary" @click="save()">
    98          {{ t('main.save') }}
    99        </ElButton>
   100  
   101        <ElButton type="default" @click="cancel()">
   102          {{ t('main.return') }}
   103        </ElButton>
   104  
   105        <ElPopconfirm
   106            :confirm-button-text="$t('main.ok')"
   107            :cancel-button-text="$t('main.no')"
   108            width="250"
   109            style="margin-left: 10px;"
   110            :title="$t('main.are_you_sure_to_do_want_this?')"
   111            @confirm="remove"
   112        >
   113          <template #reference>
   114            <ElButton class="mr-10px" type="danger" plain>
   115              <Icon icon="ep:delete" class="mr-5px"/>
   116              {{ t('main.remove') }}
   117            </ElButton>
   118          </template>
   119        </ElPopconfirm>
   120  
   121      </div>
   122    </ContentWrap>
   123  
   124  </template>
   125  
   126  <style lang="less" scoped>
   127  
   128  </style>