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

     1  <script setup lang="ts">
     2  import {onMounted, ref, unref} from 'vue'
     3  import {useI18n} from '@/hooks/web/useI18n'
     4  import {ElButton} from 'element-plus'
     5  import {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 {t} = useI18n()
    14  
    15  const writeRef = ref<ComponentRef<typeof Form>>()
    16  const loading = ref(false)
    17  const currentRow = ref<Nullable<ApiArea>>(null)
    18  
    19  onMounted(() => {
    20    currentRow.value = {
    21      name: '',
    22      description: '',
    23      polygon: [],
    24      center: {lat: 0, lon: 0},
    25      zoom: 0,
    26      resolution: 0,
    27    }
    28  })
    29  
    30  const child = ref(null)
    31  const save = async () => {
    32    const {polygon, zoom, center, resolution} = child.value.save()
    33  
    34    const write = unref(writeRef)
    35    const validate = await write?.elFormRef?.validate()?.catch(() => {
    36    })
    37    if (validate) {
    38      loading.value = true
    39      const data = (await write?.getFormData()) as ApiArea
    40      const body = {
    41        name: data.name,
    42        description: data.description,
    43        polygon: polygon,
    44        center: center,
    45        zoom: zoom,
    46        resolution: resolution,
    47      }
    48      const res = await api.v1.areaServiceAddArea(body)
    49          .catch(() => {
    50          })
    51          .finally(() => {
    52            loading.value = false
    53          })
    54      if (res) {
    55        cancel()
    56      }
    57    }
    58  }
    59  
    60  const cancel = () => {
    61    push('/etc/areas')
    62  }
    63  
    64  </script>
    65  
    66  <template>
    67    <ContentWrap>
    68      <Form ref="writeRef" :current-row="currentRow"/>
    69  
    70      <MapEditor ref="child" :area="currentRow"/>
    71  
    72      <div style="text-align: right" class="mt-20px">
    73  
    74        <ElButton type="primary" @click="save()">
    75          {{ t('main.save') }}
    76        </ElButton>
    77  
    78        <ElButton type="default" @click="cancel()">
    79          {{ t('main.cancel') }}
    80        </ElButton>
    81  
    82      </div>
    83    </ContentWrap>
    84  
    85  </template>
    86  
    87  <style lang="less" scoped>
    88  
    89  </style>