github.com/e154/smart-home@v0.17.2-0.20240311175135-e530a6e5cd45/static_source/admin/src/views/Areas/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, ElPopconfirm} from 'element-plus'
     5  import {useRoute, useRouter} from 'vue-router'
     6  import api from "@/api/api";
     7  import Form from './Form.vue'
     8  import {ApiArea} from "@/api/stub";
     9  import {ContentWrap} from "@/components/ContentWrap";
    10  import {MapEditor} from "@/components/MapEditor";
    11  
    12  const {push} = useRouter()
    13  const route = useRoute();
    14  const {t} = useI18n()
    15  
    16  const writeRef = ref<ComponentRef<typeof Form>>()
    17  const loading = ref(false)
    18  const areaId = computed(() => route.params.id as number);
    19  const currentRow = ref<Nullable<ApiArea>>(null)
    20  
    21  const fetch = async () => {
    22    loading.value = true
    23    const res = await api.v1.areaServiceGetAreaById(areaId.value)
    24        .catch(() => {
    25        })
    26        .finally(() => {
    27          loading.value = false
    28        })
    29    if (res) {
    30      currentRow.value = res.data
    31    } else {
    32      currentRow.value = null
    33    }
    34  }
    35  
    36  const child = ref(null)
    37  const save = async () => {
    38    const {polygon, zoom, center, resolution} = child.value.save()
    39  
    40    const write = unref(writeRef)
    41    const validate = await write?.elFormRef?.validate()?.catch(() => {
    42    })
    43    if (validate) {
    44      loading.value = true
    45      const data = (await write?.getFormData()) as ApiArea
    46      const body = {
    47        name: data.name,
    48        description: data.description,
    49        polygon: polygon,
    50        center: center,
    51        zoom: zoom,
    52        resolution: resolution,
    53      }
    54      const res = await api.v1.areaServiceUpdateArea(areaId.value, body)
    55          .catch(() => {
    56          })
    57          .finally(() => {
    58            loading.value = false
    59          })
    60    }
    61  }
    62  
    63  const cancel = () => {
    64    push('/etc/areas')
    65  }
    66  
    67  const remove = async () => {
    68    loading.value = true
    69    const res = await api.v1.areaServiceDeleteArea(areaId.value)
    70        .catch(() => {
    71        })
    72        .finally(() => {
    73          loading.value = false
    74        })
    75    if (res) {
    76      cancel()
    77    }
    78  }
    79  fetch()
    80  
    81  </script>
    82  
    83  <template>
    84    <ContentWrap>
    85      <Form ref="writeRef" :current-row="currentRow"/>
    86  
    87      <MapEditor ref="child" :area="currentRow"/>
    88  
    89      <div style="text-align: right" class="mt-20px">
    90  
    91        <ElButton type="primary" @click="save()">
    92          {{ t('main.save') }}
    93        </ElButton>
    94  
    95        <ElButton type="default" @click="cancel()">
    96          {{ t('main.return') }}
    97        </ElButton>
    98  
    99        <ElPopconfirm
   100            :confirm-button-text="$t('main.ok')"
   101            :cancel-button-text="$t('main.no')"
   102            width="250"
   103            style="margin-left: 10px;"
   104            :title="$t('main.are_you_sure_to_do_want_this?')"
   105            @confirm="remove"
   106        >
   107          <template #reference>
   108            <ElButton class="mr-10px" type="danger" plain>
   109              <Icon icon="ep:delete" class="mr-5px"/>
   110              {{ t('main.remove') }}
   111            </ElButton>
   112          </template>
   113        </ElPopconfirm>
   114  
   115      </div>
   116    </ContentWrap>
   117  
   118  </template>
   119  
   120  <style lang="less" scoped>
   121  
   122  </style>