admin-ui/src/views/iot/network/server/component/serverDetail.vue

<!-- 服务器详情页 -->
<template>
  <el-descriptions :column="2" border>
    <el-descriptions-item label="名称">{{ detail.name }}</el-descriptions-item>
    <el-descriptions-item label="类型">{{ detail.types }}</el-descriptions-item>
    <el-descriptions-item label="地址">{{ detail.addr }}</el-descriptions-item>
    <el-descriptions-item label="状态">{{ detail.status ? '启动' : '未启动' }}</el-descriptions-item>
    <el-descriptions-item label="开启TLS">{{ detail.isTls ? '是' : '否' }}</el-descriptions-item>
    <el-descriptions-item label="正则表达式">{{ detail.register ? JSON.parse(detail.register).regex : '' }}</el-descriptions-item>
    <el-descriptions-item label="协议">{{ detail.protocol ? JSON.parse(detail.protocol).name : '' }}</el-descriptions-item>
    <el-descriptions-item label="协议参数">{{ detail.protocol ? JSON.parse(detail.protocol).options : '' }}</el-descriptions-item>
    <el-descriptions-item label="修改状态">
      <el-switch :loading="loading" :before-change="onChangeStatus" :active-value="1" :inactive-value="0" size="small" v-model="detail.status" />
    </el-descriptions-item>
    <el-descriptions-item label="创建时间">{{ detail.createdAt }}</el-descriptions-item>
  </el-descriptions>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import api from '/@/api/network';

const loading = ref(false)

const emit = defineEmits(['update:detail'])
const props = defineProps({
  detail: {
    type: Object,
    default: () => { }
  }
})

// 禁用状态
const onChangeStatus = () => {
  loading.value = true
  const status = props.detail.status ? 0 : 1
  return new Promise(() => {
    api.server.changeServerStatus({ id: props.detail.id, status }).then(() => {
      ElMessage.success(props.detail.status ? '已启动' : '未启动');
      emit('update:detail', { ...props.detail, status })
    }).finally(() => {
      loading.value = false
    })
  })
};
</script>