From 38431cc99238d5d2d673abf3f6ac46861e656bf8 Mon Sep 17 00:00:00 2001
From: zhaozhenfang <zhaozhenfang@kylinos.cn>
Date: Fri, 29 Dec 2023 17:45:56 +0800
Subject: [PATCH] add router guide for plugin

---
 atune/web/src/components/atuneTemplete.vue | 20 ++-----
 atune/web/src/router/index.ts              |  2 +-
 atune/web/src/store/router.ts              | 19 ++++++
 atune/web/src/views/Home.vue               | 67 +++++-----------------
 atune/web/src/views/atuneDetail.vue        |  1 -
 atune/web/src/views/atuneList.vue          | 26 +++++----
 atune/web/src/views/taskDetail.vue         | 17 +++++-
 atune/web/src/views/taskList.vue           | 52 +++++++++++++----
 8 files changed, 110 insertions(+), 94 deletions(-)
 create mode 100644 atune/web/src/store/router.ts

diff --git a/atune/web/src/components/atuneTemplete.vue b/atune/web/src/components/atuneTemplete.vue
index 69301f8d..3b6b4bb4 100644
--- a/atune/web/src/components/atuneTemplete.vue
+++ b/atune/web/src/components/atuneTemplete.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-form :model="form" class="custom-form">
+    <el-form :model="form" class="custom-form" :disabled="!isTune">
       <el-form-item label="调优对象" v-show="isTune">
         <el-select
           v-model="form.tuneName"
@@ -67,10 +67,6 @@ let props = defineProps({
     default: false,
     required: true,
   },
-  selectedNodeData: {
-    type: String,
-    default: "",
-  },
   selectedEditRow: {
     type: Object as () => Atune,
     default: null,
@@ -88,7 +84,7 @@ const form = reactive({
   restore: "",
   note: "",
 });
-const emit = defineEmits(["closeDialog", "dataUpdated"]);
+const emit = defineEmits(["closeDialog"]);
 // 获取所有的调优模板
 const getAllTune = () => {
   getAtuneAllName().then((res) => {
@@ -111,9 +107,8 @@ const handleEdit = () => {
   form.description = props.selectedEditRow.description;
 };
 
-const fetchAtuneInfo = (tuneName?: string) => {
-  let paramName = tuneName ? tuneName : props.selectedNodeData;
-  getAtuneInfo({ name: paramName }).then((res) => {
+const fetchAtuneInfo = (tuneName: string) => {
+  getAtuneInfo({ name: tuneName }).then((res) => {
     if (res.data && res.data.code === 200) {
       const data = res.data.data;
       // 判断数据结构类型
@@ -136,7 +131,6 @@ const saveTuneData = () => {
     .then((res) => {
       if (res.data.code === 200) {
         ElMessage.success(res.data.msg);
-        emit("dataUpdated");
       } else {
         ElMessage.error(res.data.msg);
       }
@@ -150,7 +144,6 @@ const updateTuneData = () => {
     .then((res) => {
       if (res.data.code === 200) {
         ElMessage.success(res.data.msg);
-        emit("dataUpdated");
       } else {
         ElMessage.error(res.data.msg);
       }
@@ -177,11 +170,6 @@ watchEffect(() => {
     getAllTune();
   }
 });
-watchEffect(() => {
-  if (props.selectedNodeData !== "") {
-    fetchAtuneInfo();
-  }
-});
 
 watchEffect(() => {
   if (props.selectedEditRow) {
diff --git a/atune/web/src/router/index.ts b/atune/web/src/router/index.ts
index ba402a4e..ac4ef73e 100644
--- a/atune/web/src/router/index.ts
+++ b/atune/web/src/router/index.ts
@@ -6,7 +6,7 @@ import Result from "@/views/ResultInfo.vue";
 
 const routes: Array<RouteRecordRaw> = [
   {
-    path: "/",
+    path: "",
     redirect: "/task",
   },
   {
diff --git a/atune/web/src/store/router.ts b/atune/web/src/store/router.ts
new file mode 100644
index 00000000..ffadbb2c
--- /dev/null
+++ b/atune/web/src/store/router.ts
@@ -0,0 +1,19 @@
+import { defineStore } from "pinia";
+import { Task, Atune } from "@/types/atune";
+
+export const useRouterStore = defineStore("router", {
+  state: () => ({
+    route: "",
+  }),
+  getters: {
+    currentRoute: (state) => state.route,
+  },
+  actions: {
+    setCurrentRoute(route: string) {
+      this.route = route;
+    },
+    showRoute(path: string, str: string) {
+      return path.indexOf(str) >= 0;
+    },
+  },
+});
diff --git a/atune/web/src/views/Home.vue b/atune/web/src/views/Home.vue
index 1c85de62..0cbc1969 100644
--- a/atune/web/src/views/Home.vue
+++ b/atune/web/src/views/Home.vue
@@ -2,23 +2,7 @@
   <div class="container">
     <!-- 任务列表 -->
     <div class="container-table shadow" v-show="!showDetail">
-      <taskList
-        @taskDetail="handleTaskDetail"
-        @atuneDetail="handleAtuneDetail"
-        :refreshData="refreshData"
-        :searchTuneName="searchTuneName"
-        :searchTune="searchTune"
-      >
-      </taskList>
-    </div>
-    <!-- 单项任务详情 -->
-    <div v-show="showDetail" class="container-nav">
-      <el-breadcrumb separator="/">
-        <el-breadcrumb-item :to="{ path: '/task' }" @click="returnHome"
-          >执行任务列表</el-breadcrumb-item
-        >
-        <el-breadcrumb-item>任务详情</el-breadcrumb-item>
-      </el-breadcrumb>
+      <taskList @atuneDetail="handleAtuneDetail"> </taskList>
     </div>
     <router-view />
   </div>
@@ -27,63 +11,47 @@
   <el-dialog title="调优模板信息" width="70%" v-model="showDialog">
     <atuneTemplete
       :is-tune="false"
-      :selectedNodeData="selectedNodeData"
       :selectedEditRow="selectedEditRow"
       @closeDialog="closeDialog"
-      @dataUpdated="handleDataUpdated"
     >
     </atuneTemplete>
   </el-dialog>
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import { ElDialog } from "element-plus";
 import taskList from "./taskList.vue";
 import atuneTemplete from "@/components/atuneTemplete.vue";
-import { useRouter } from "vue-router";
 import { Task, Atune } from "@/types/atune";
+import { useRoute } from "vue-router";
+import { onBeforeRouteUpdate } from "vue-router";
+import { useRouterStore } from "@/store/router";
 
-const selectedNodeData = ref("");
-const searchTuneName = ref("");
-const searchTune = ref(false);
 const showDialog = ref(false);
 const selectedEditRow = ref();
-const refreshData = ref(false);
 const showDetail = ref(false);
 
-// 路由管理器
-const router = useRouter();
+// 每次刷新界面都需重新判断路由
+onMounted(() => {
+  showDetail.value = useRouterStore().showRoute(useRoute().fullPath, "detail");
+});
+// 组件内守卫
+onBeforeRouteUpdate((to: any, _from: any, next: any) => {
+  showDetail.value = useRouterStore().showRoute(to.fullPath, "detail");
+  next();
+});
 
 // 关闭dialog弹框
 const closeDialog = () => {
   showDialog.value = false;
 };
 
-// 返回任务列表
-const returnHome = () => {
-  showDetail.value = false;
-};
-
-// 新增
-const handleCreat = () => {};
-
 // 查看模板详情
 const handleAtuneDetail = (taskRow: Task | Atune) => {
   selectedEditRow.value = taskRow.tune;
   showDialog.value = true;
 };
-
-// 查看任务详情
-const handleTaskDetail = () => {
-  router.push("/task/detail");
-  showDetail.value = true;
-};
-
-// 刷新
-const handleDataUpdated = () => {
-  refreshData.value = !refreshData.value;
-};
 </script>
 
 <style lang="less" scoped>
@@ -99,12 +67,5 @@ const handleDataUpdated = () => {
     margin: 0 auto;
     height: 100%;
   }
-
-  &-nav {
-    width: 96%;
-    margin: 0 auto;
-    height: 20px;
-    text-align: left;
-  }
 }
 </style>
diff --git a/atune/web/src/views/atuneDetail.vue b/atune/web/src/views/atuneDetail.vue
index b33d2be4..a5413720 100644
--- a/atune/web/src/views/atuneDetail.vue
+++ b/atune/web/src/views/atuneDetail.vue
@@ -9,7 +9,6 @@
           <el-descriptions-item label="工作目录:">{{
             workDir
           }}</el-descriptions-item>
-          <br />
           <el-descriptions-item label="注意事项:">{{
             note
           }}</el-descriptions-item>
diff --git a/atune/web/src/views/atuneList.vue b/atune/web/src/views/atuneList.vue
index 4851902f..08257fa8 100644
--- a/atune/web/src/views/atuneList.vue
+++ b/atune/web/src/views/atuneList.vue
@@ -30,32 +30,42 @@
   <el-dialog title="调优模板信息" width="70%" v-model="showDialog">
     <atuneTemplete
       :is-tune="true"
-      :selectedNodeData="selectedNodeData"
       :selectedEditRow="selectedEditRow"
       @closeDialog="closeDialog"
-      @dataUpdated="handleDataUpdated"
     >
     </atuneTemplete>
   </el-dialog>
-  <div class="tuneList shadow" v-if="showDetail">
+  <div class="tuneList shadow">
     <router-view />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import { ElDialog } from "element-plus";
 import { getTuneLists, searchTune, deleteTune } from "@/api/atune";
 import atuneTemplete from "@/components/atuneTemplete.vue";
 import { Atune } from "@/types/atune";
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
+import { onBeforeRouteUpdate } from "vue-router";
+import { useRouterStore } from "@/store/router";
 import { useAtuneStore } from "@/store/atune";
 const tuneRef = ref();
 const router = useRouter();
 const showDetail = ref(false);
-const selectedNodeData = ref("");
 const showDialog = ref(false);
 const selectedEditRow = ref();
+
+// 每次刷新界面都需重新判断路由
+onMounted(() => {
+  showDetail.value = useRouterStore().showRoute(useRoute().fullPath, "detail");
+});
+// 组件内守卫
+onBeforeRouteUpdate((to: any, _from: any, next: any) => {
+  showDetail.value = useRouterStore().showRoute(to.fullPath, "detail");
+  next();
+});
+
 // 关闭dialog弹框
 const closeDialog = () => {
   showDialog.value = false;
@@ -79,10 +89,6 @@ const handleEdit = (row: Atune) => {
   selectedEditRow.value = row;
   showDialog.value = true;
 };
-// 刷新
-const handleDataUpdated = () => {
-  tuneRef.value.handleRefresh();
-};
 </script>
 
 <style lang="less" scoped>
diff --git a/atune/web/src/views/taskDetail.vue b/atune/web/src/views/taskDetail.vue
index d0fda5ff..8389dd38 100644
--- a/atune/web/src/views/taskDetail.vue
+++ b/atune/web/src/views/taskDetail.vue
@@ -1,14 +1,29 @@
 <template>
+  <div class="nav">
+    <el-breadcrumb separator="/">
+      <el-breadcrumb-item :to="{ path: '/task' }"
+        >执行任务列表</el-breadcrumb-item
+      >
+      <el-breadcrumb-item>任务详情</el-breadcrumb-item>
+    </el-breadcrumb>
+  </div>
   <div class="task_detail shadow"></div>
 </template>
 <script lang="ts" setup>
 import { useAtuneStore } from "@/store/atune";
+import { ref } from "vue";
 const { taskRow } = useAtuneStore();
 
 // 获取路由参数
-console.log("详情数据：", taskRow);
+// console.log("详情数据：", taskRow);
 </script>
 <style lang="less" scope>
+.nav {
+  width: 96%;
+  margin: 0 auto;
+  height: 20px;
+  text-align: left;
+}
 .task_detail {
   width: 98%;
   height: 100%;
diff --git a/atune/web/src/views/taskList.vue b/atune/web/src/views/taskList.vue
index a6568d48..dfb85251 100644
--- a/atune/web/src/views/taskList.vue
+++ b/atune/web/src/views/taskList.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="taskList">
-    <my-table ref="taskRef" :get-data="getTaskLists" :get-all-data="getTaskLists" :del-func="deleteTask"
-      :search-func="searchTask">
+    <my-table
+      ref="taskRef"
+      :get-data="getTaskLists"
+      :get-all-data="getTaskLists"
+      :del-func="deleteTask"
+      :search-func="searchTask"
+    >
       <template #listName>任务列表</template>
       <template #button_bar>
         <my-button @click="handleCreat">新增</my-button>
@@ -13,23 +18,43 @@
       <el-table-column prop="command" label="命令" />
       <el-table-column label="模板编号">
         <template #default="props">
-          <el-link type="primary" @click="atuneDetail(props.row)">{{ props.row.tune ? props.row.tune_id : "暂无" }}
-            <el-icon class="el-icon--right"><icon-view /></el-icon></el-link>
+          <el-link type="primary" @click="atuneDetail(props.row)"
+            >{{ props.row.tune ? props.row.tune_id : "暂无" }}
+            <el-icon class="el-icon--right"><icon-view /></el-icon
+          ></el-link>
         </template>
       </el-table-column>
       <el-table-column prop="task_status" label="状态">
         <template #default="props">
-          <el-progress v-if="props.row.task_status === '执行中'" :percentage="100" :format="format" striped striped-flow
-            :duration="4" />
-          <el-progress v-else-if="props.row.task_status === '已完成'" :percentage="100" status="success" :duration="0" />
-          <el-progress v-else :percentage="0" :format="format" status="exception" />
+          <el-progress
+            v-if="props.row.task_status === '执行中'"
+            :percentage="100"
+            :format="format"
+            striped
+            striped-flow
+            :duration="4"
+          />
+          <el-progress
+            v-else-if="props.row.task_status === '已完成'"
+            :percentage="100"
+            status="success"
+            :duration="0"
+          />
+          <el-progress
+            v-else
+            :percentage="0"
+            :format="format"
+            status="exception"
+          />
         </template>
       </el-table-column>
       <el-table-column prop="create_time" label="创建时间" />
       <el-table-column prop="update_time" label="更新时间" />
       <el-table-column label="操作" width="80">
         <template #default="{ row }">
-          <my-button round size="small" @click="handleDetail(row)">详情</my-button>
+          <my-button round size="small" @click="handleDetail(row)"
+            >详情</my-button
+          >
         </template>
       </el-table-column>
     </my-table>
@@ -41,10 +66,13 @@ import { ref } from "vue";
 import { View as IconView } from "@element-plus/icons-vue";
 import { getTaskLists, searchTask, deleteTask } from "@/api/atune";
 import { Task } from "@/types/atune";
+import { useRouter } from "vue-router";
 import { useAtuneStore } from "@/store/atune";
 
 const taskRef = ref();
-const emit = defineEmits(["selectionChange", "taskDetail", "atuneDetail"]);
+// 路由管理器
+const router = useRouter();
+const emit = defineEmits(["atuneDetail"]);
 
 // 状态渲染函数
 const format = (percentage: number) => (percentage === 0 ? "error" : "running");
@@ -55,12 +83,12 @@ const atuneDetail = (row: Task) => {
 };
 // 查看任务详情
 const handleDetail = (row: Task) => {
+  router.push("/task/detail");
   useAtuneStore().setTaskRow(row);
-  emit("taskDetail", row);
 };
 
 // 新增
-const handleCreat = () => { };
+const handleCreat = () => {};
 // 删除
 const handleDelete = () => {
   taskRef.value.handleDelete();
-- 
Gitee