Ver código fonte

feat: 优化服务器详情的显示,修复修改状态操作的逻辑错误

yanglzh 1 ano atrás
pai
commit
856af9d5dc

+ 38 - 84
src/views/iot/network/server/component/serverDetail.vue

@@ -1,92 +1,46 @@
-<!--
- * @Author: vera_min vera_min@163.com
- * @Date: 2022-09-05 08:41:57
- * @LastEditors: vera_min vera_min@163.com
- * @LastEditTime: 2022-09-06 17:18:19
- * @FilePath: /sagoo-admin-ui/src/views/network/tunnel/component/serverDetail.vue
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--->
 <!-- 服务器详情页 -->
 <template>
-    <el-descriptions :column="2" border>
-        <el-descriptions-item>
-            <template #label>
-                <div class="cell-item">名称</div>
-            </template>
-            {{detail.name}}
-        </el-descriptions-item>
-        <el-descriptions-item>
-            <template #label>
-                <div class="cell-item">类型</div>
-            </template>
-            {{detail.types}}
-        </el-descriptions-item>
-        <el-descriptions-item>
-            <template #label>
-                <div class="cell-item">地址</div>
-            </template>
-            {{detail.addr}}
-        </el-descriptions-item>
-        <el-descriptions-item>
-            <template #label>
-                <div class="cell-item">状态</div>
-            </template>
-            {{ detail.status ? '启动' : '未启动' }}
-        </el-descriptions-item>
-        <el-descriptions-item>
-            <template #label>
-                <div class="cell-item">禁用</div>
-            </template>
-            <el-switch :loading="loading" :before-change="onChangeStatus" :disabled="!detail.status" :active-value="0" :inactive-value="1" size="small" v-model="detail.status" />
-        </el-descriptions-item>
-        <el-descriptions-item>
-            <template #label>
-                <div class="cell-item">创建时间</div>
-            </template>
-            {{ detail.createdAt }}
-        </el-descriptions-item>
-    </el-descriptions>
+  <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">
-import { toRefs, reactive, onMounted, defineComponent } from 'vue';
+<script lang="ts" setup>
+import { ref } from 'vue';
 import { ElMessage } from 'element-plus';
 import api from '/@/api/network';
 
-interface TableDataState {
-    loading: boolean
-}
-export default defineComponent({
-    name: 'serverDetail',
-    props: {
-        detail: {
-            type: Object,
-            default: () => {}
-        }
-    },
-    setup(props) {
-        const state = reactive<TableDataState>({
-            loading: false
-        });
-        onMounted(() => {
-        });
-        // 禁用状态
-        const onChangeStatus = () => {
-            state.loading = true
-            return new Promise(() => {
-                api.server.changeServerStatus({ id: props.detail.id, status: 0 }).then(() => {
-                    state.loading = false
-                    ElMessage.success('已关闭');
-                    props.detail.status = 0
-                })
-            })
+const loading = ref(false)
 
-        };
-        return {
-            onChangeStatus,
-            ...toRefs(props),
-            ...toRefs(state),
-        };
-    }
-});
-</script>
+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>

+ 9 - 10
src/views/iot/network/server/detail.vue

@@ -2,7 +2,7 @@
 	<div class="page bg border padding Ipt-2" style="position: relative;">
 		<el-tabs v-model="activeName" @tab-click="handleClick">
 			<el-tab-pane label="服务器详情" name="first">
-				<serverDetail :detail="detail" />
+				<serverDetail v-model:detail="detail" />
 			</el-tab-pane>
 			<!-- <el-tab-pane label="相关详情" name="second">相关详情</el-tab-pane>
 			<el-tab-pane label="通道" name="third">通道</el-tab-pane> -->
@@ -10,7 +10,7 @@
 		<div style="position: absolute;right:20px;top: 18px;">
 			<el-icon @click="freshData" style="font-size: 16px;margin-right:6px;"><ele-RefreshRight /></el-icon>
 			<!-- <el-icon style="font-size: 16px;margin: 0 6px;"><ele-Operation /></el-icon> -->
-			<el-icon @click="toEdit"  style="cursor: pointer;font-size: 16px;"><ele-Edit /></el-icon>
+			<el-icon @click="toEdit" style="cursor: pointer;font-size: 16px;"><ele-Edit /></el-icon>
 		</div>
 	</div>
 </template>
@@ -48,12 +48,12 @@ export default defineComponent({
 				mode: '',
 				content: ''
 			},
-			detail:{}
+			detail: {}
 		});
 		const activeName = ref('first')
 		const getDetail = () => {
 			const id = route.params && route.params.id;
-			api.server.getDetail({"id": id}).then((res: any) => {
+			api.server.getDetail({ id }).then((res: any) => {
 				state.detail = res
 			})
 		};
@@ -62,8 +62,8 @@ export default defineComponent({
 			ElMessage.success('刷新成功');
 		};
 		const toEdit = () => {
-            router.push(`/iotmanager/network/server/edit/${route.params && route.params.id}`)
-        };
+			router.push(`/iotmanager/network/server/edit/${route.params && route.params.id}`)
+		};
 		onMounted(() => {
 			getDetail()
 		});
@@ -86,9 +86,8 @@ export default defineComponent({
 
 <style scoped>
 .CodeMirror {
-  width: 100%;
-  height: 600px;
-  font-size: 16px;
+	width: 100%;
+	height: 600px;
+	font-size: 16px;
 }
 </style>
-