通道、服务详情页：右上角增加刷新和跳转编辑页功能

src/views/network/server/detail.vue

@@ -8,20 +8,21 @@
 			<el-tab-pane label="通道" name="third">通道</el-tab-pane>
 		</el-tabs>
 		<div style="position: absolute;right:20px;top: 34px;">
-			<el-icon style="font-size: 16px;"><ele-RefreshRight /></el-icon>
-			<el-icon style="font-size: 16px;margin: 0 6px;"><ele-Operation /></el-icon>
-			<el-icon style="font-size: 16px;"><ele-Edit /></el-icon>
+			<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>
 		</div>
 	</el-card>
 </template>
 <script lang="ts">
 import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
-import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue';
+// import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue';
+import { ElMessage } from 'element-plus';
 import type { TabsPaneContext } from 'element-plus'
 
 import serverDetail from './component/serverDetail.vue'
 
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 import api from '/@/api/network';
 
@@ -44,6 +45,7 @@ export default defineComponent({
 
 	setup(props, context) {
 		const route = useRoute();
+		const router = useRouter();
 		const state = reactive<TableDataState>({
 			resourceModalPro: {
 				mode: '',
@@ -59,6 +61,13 @@ export default defineComponent({
 				state.detail = res
 			})
 		};
+		const freshData = () => {
+			getDetail()
+			ElMessage.success('刷新成功');
+		};
+		const toEdit = () => {
+            router.push(`/network/server/edit/${route.params && route.params.id}`)
+        };
 		onMounted(() => {
 			getDetail()
 		});
@@ -67,8 +76,9 @@ export default defineComponent({
 		}
 
 		return {
-			Edit,
+			toEdit,
 			activeName,
+			freshData,
 			getDetail,
 			handleClick,
 			...toRefs(props),

src/views/network/tunnel/detail.vue

@@ -1,16 +1,16 @@
 <template>
 	<el-card class="system-dic-container" style="position: relative;">
 		<el-tabs v-model="activeName" class="demo-tabs">
-			<el-tab-pane label="服务器详情" name="first">
+			<el-tab-pane label="通道详情" name="first">
 				<serverDetail :detail="detail" />
 			</el-tab-pane>
 			<el-tab-pane label="相关详情" name="second">相关详情</el-tab-pane>
 			<el-tab-pane label="通道" name="third">通道</el-tab-pane>
 		</el-tabs>
 		<div style="position: absolute;right:20px;top: 34px;">
-			<el-icon style="font-size: 16px;"><ele-RefreshRight /></el-icon>
-			<el-icon style="font-size: 16px;margin: 0 6px;"><ele-Operation /></el-icon>
-			<el-icon style="font-size: 16px;"><ele-Edit /></el-icon>
+			<el-icon @click="freshData" style="cursor: pointer;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>
 		</div>
 	</el-card>
 </template>
@@ -21,7 +21,7 @@ import type { TabsPaneContext } from 'element-plus'
 
 import serverDetail from './component/serverDetail.vue'
 
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 import api from '/@/api/network';
 
@@ -44,6 +44,7 @@ export default defineComponent({
 
 	setup(props, context) {
 		const route = useRoute();
+		const router = useRouter();
 		const state = reactive<TableDataState>({
 			resourceModalPro: {
 				mode: '',
@@ -58,12 +59,21 @@ export default defineComponent({
 				state.detail = res
 			})
 		};
+		const freshData = () => {
+			getDetail()
+			ElMessage.success('刷新成功');
+		};
+		const toEdit = () => {
+            router.push(`/network/tunnel/edit/${route.params && route.params.id}`)
+        };
 		onMounted(() => {
 			getDetail()
 		});
 
 		return {
 			activeName,
+			toEdit,
+			freshData,
 			getDetail,
 			...toRefs(props),
 			...toRefs(state),