github.com/e154/smart-home@v0.17.2-0.20240311175135-e530a6e5cd45/static_source/admin/src/views/Zigbee2mqtt/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, ElTabs, ElTabPane} 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 {ApiZigbee2Mqtt} from "@/api/stub";
    14  import {ContentWrap} from "@/components/ContentWrap";
    15  import Devices from "@/views/Zigbee2mqtt/components/Devices.vue";
    16  
    17  const {register, elFormRef, methods} = useForm()
    18  const {required} = useValidator()
    19  const appStore = useAppStore()
    20  const permissionStore = usePermissionStore()
    21  const {currentRoute, addRoute, push} = useRouter()
    22  const route = useRoute();
    23  const {wsCache} = useCache()
    24  const {t} = useI18n()
    25  
    26  const writeRef = ref<ComponentRef<typeof Form>>()
    27  const loading = ref(false)
    28  const bridgeId = computed(() => route.params.id as number);
    29  const currentBridge = ref<Nullable<ApiZigbee2Mqtt>>(null)
    30  const activeTab = ref('devices')
    31  
    32  const fetch = async () => {
    33    loading.value = true
    34    const res = await api.v1.zigbee2MqttServiceGetZigbee2MqttBridge(bridgeId.value)
    35        .catch(() => {
    36        })
    37        .finally(() => {
    38          loading.value = false
    39        })
    40    if (res) {
    41      currentBridge.value = res.data
    42    } else {
    43      currentBridge.value = null
    44    }
    45  }
    46  
    47  const save = async () => {
    48    const write = unref(writeRef)
    49    const validate = await write?.elFormRef?.validate()?.catch(() => {
    50    })
    51    if (validate) {
    52      loading.value = true
    53      const data = (await write?.getFormData())
    54      const body = {
    55        name: data.name,
    56        login: data.login,
    57        password: data.password,
    58        permitJoin: data.permitJoin,
    59        baseTopic: data.baseTopic,
    60      }
    61      const res = await api.v1.zigbee2MqttServiceUpdateBridgeById(bridgeId.value as string, body)
    62          .catch(() => {
    63          })
    64          .finally(() => {
    65            loading.value = false
    66          })
    67      if (res) {
    68        cancel()
    69      }
    70    }
    71  }
    72  
    73  const cancel = () => {
    74    push('/etc/zigbee2mqtt')
    75  }
    76  
    77  const remove = async () => {
    78    loading.value = true
    79    const res = await api.v1.zigbee2MqttServiceDeleteBridgeById(bridgeId.value as string)
    80        .catch(() => {
    81        })
    82        .finally(() => {
    83          loading.value = false
    84        })
    85    if (res) {
    86      cancel()
    87    }
    88  }
    89  fetch()
    90  
    91  </script>
    92  
    93  <template>
    94    <ContentWrap>
    95  
    96      <el-tabs class="demo-tabs" v-model="activeTab">
    97        <!-- main -->
    98        <el-tab-pane :label="$t('zigbee2mqtt.main')" name="main">
    99          <Form ref="writeRef" :current-row="currentBridge"/>
   100        </el-tab-pane>
   101        <!-- /main -->
   102  
   103        <!-- devices -->
   104        <el-tab-pane :label="$t('zigbee2mqtt.devices')" name="devices">
   105          <Devices v-model="currentBridge"/>
   106        </el-tab-pane>
   107        <!-- /devices -->
   108      </el-tabs>
   109  
   110      <div style="text-align: right">
   111  
   112        <ElButton type="primary" @click="save()">
   113          {{ t('main.save') }}
   114        </ElButton>
   115  
   116        <ElButton type="default" @click="cancel()">
   117          {{ t('main.return') }}
   118        </ElButton>
   119  
   120        <ElPopconfirm
   121            :confirm-button-text="$t('main.ok')"
   122            :cancel-button-text="$t('main.no')"
   123            width="250"
   124            style="margin-left: 10px;"
   125            :title="$t('main.are_you_sure_to_do_want_this?')"
   126            @confirm="remove"
   127        >
   128          <template #reference>
   129            <ElButton class="mr-10px" type="danger" plain>
   130              <Icon icon="ep:delete" class="mr-5px"/>
   131              {{ t('main.remove') }}
   132            </ElButton>
   133          </template>
   134        </ElPopconfirm>
   135  
   136      </div>
   137    </ContentWrap>
   138  
   139  </template>
   140  
   141  <style lang="less" scoped>
   142  
   143  </style>