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

     1  <script setup lang="ts">
     2  import {ref, unref} from 'vue'
     3  import {useI18n} from '@/hooks/web/useI18n'
     4  import {ElButton} from 'element-plus'
     5  import {useForm} from '@/hooks/web/useForm'
     6  import {useCache} from '@/hooks/web/useCache'
     7  import {useAppStore} from '@/store/modules/app'
     8  import {usePermissionStore} from '@/store/modules/permission'
     9  import {useRoute, useRouter} from 'vue-router'
    10  import {useValidator} from '@/hooks/web/useValidator'
    11  import api from "@/api/api";
    12  import Form from './components/Form.vue'
    13  import {ApiNewZigbee2MqttRequest} from "@/api/stub";
    14  import {ContentWrap} from "@/components/ContentWrap";
    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 writeRef = ref<ComponentRef<typeof Form>>()
    26  const loading = ref(false)
    27  const currentRow = ref<Nullable<ApiNewZigbee2MqttRequest>>(null)
    28  
    29  const save = async () => {
    30    const write = unref(writeRef)
    31    const validate = await write?.elFormRef?.validate()?.catch(() => {
    32    })
    33    if (validate) {
    34      loading.value = true
    35      const data = (await write?.getFormData()) as ApiNewZigbee2MqttRequest
    36      const res = await api.v1.zigbee2MqttServiceAddZigbee2MqttBridge(data)
    37          .catch(() => {
    38          })
    39          .finally(() => {
    40            loading.value = false
    41          })
    42      if (res) {
    43        push(`/etc/zigbee2mqtt/edit/${res.data.id}`)
    44      }
    45    }
    46  }
    47  
    48  const cancel = () => {
    49    push('/etc/zigbee2mqtt')
    50  }
    51  
    52  </script>
    53  
    54  <template>
    55    <ContentWrap>
    56      <Form ref="writeRef" :current-row="currentRow"/>
    57  
    58      <div style="text-align: right">
    59  
    60        <ElButton type="primary" @click="save()">
    61          {{ t('main.save') }}
    62        </ElButton>
    63  
    64        <ElButton type="default" @click="cancel()">
    65          {{ t('main.cancel') }}
    66        </ElButton>
    67  
    68      </div>
    69    </ContentWrap>
    70  
    71  </template>
    72  
    73  <style lang="less" scoped>
    74  
    75  </style>