[feat](任务历史): 静态页面

src/page/main/auto-maintenance/task-history/list/index.vue

@@ -9,7 +9,7 @@
         placeholder="请输入关键字">
         <template v-slot:left_action>
           <div class="apaas_button">
-            <el-button type="default" @click="deleteAllTips"> 返回 </el-button>
+            <el-button type="default" @click="router.go(-1)"> 返回 </el-button>
           </div>
           <span class="filter-group-item">执行ping命令</span>
         </template>
@@ -18,8 +18,8 @@
         <div class="table bg-scroll">
           <bg-table ref="dataTable" :headers="headers" :rows="tableRows" :stripe="true">
             <template v-slot:desc="{ row }">
-              <span class="can_click_text" @click="getChildren(row)">
-                {{ row.name }}
+              <span class="can_click_text" @click="gotoPage(`/auto-maintenance/task-history/list/record?id=${row.id}`)">
+                {{ row.desc }}
               </span>
             </template>
             <template v-slot:state="{ row }">
@@ -41,11 +41,15 @@
 
 <script setup>
 import { reactive, ref, onBeforeMount, toRefs, computed, watch, nextTick, watchEffect } from "vue";
+import { useRouter, useRoute } from "vue-router";
 import { ElMessage } from "element-plus";
 import axios from "@/request/http.js";
 import { Search } from "@element-plus/icons-vue";
 import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
-const bgForm = ref(null);
+
+const router = useRouter();
+const route = useRoute();
+
 const dataTable = ref(null);
 const headers = [
   {
@@ -71,100 +75,30 @@ const headers = [
 ];
 
 const state = reactive({
-  bgForm,
-  typeList: [], // 分类数据
-  typeKeyword: "", // 分类删选关键词
-  nodeClassifyId: null, // 当前选中分类的uuid  用于新增字典
-  nodeId: null, // 当前选中分类的id  用于请求列表
-  timer: null, // 定时器
-  tableRows: [], // 表格数据
-  selected: [], //选择数据
+  tableRows: [
+    {
+      state: "执行中",
+      desc: "asda",
+    },
+  ], // 表格数据
   tableTotal: 0, // 表格数据条数
   filter: {
-    time: "",
     search: "",
     page: 1,
     limit: 10,
   }, // 表格筛选项
   actionRow: null, // 当前操作的数据
-  dialogDelete: false, // 删除弹窗
-  addType: 0, //
-  addDialog: false,
-  formData: {
-    name: "",
-    describe: "",
-    state: 1,
-    p_dict_id: "",
-  },
-  rules: {
-    name: [{ required: true, message: "请输入名称", trigger: "blur" }],
-    describe: [
-      { required: true, message: "请输入描述", trigger: "blur" },
-      { max: 200, message: "描述最大为200字", trigger: "blur" },
-    ],
-    state: [{ required: true, message: "请选择是否启用", trigger: "change" }],
-  },
-  fatherRow: null,
 });
 
-const selectRows = (data) => {
-  state.selected = data.selection;
-};
-
-const clearSelected = () => {
-  dataTable.value.clearTable();
-};
-
-const deleteAllTips = () => {};
-
-const getChildren = (row) => {
-  state.tableRows = row.children || [];
-  state.tableTotal = row.total_children;
-  state.fatherRow = row;
+const gotoPage = (url) => {
+  router.push(url);
 };
 
-const getTypeList = () => {
-  let params = {
-    name: state.typeKeyword,
-  };
-  axios
-    .get(`/apaas/system/v5/dictionary/classify/list`, { params })
-    .then((res) => {
-      if (res.data.code == 200) {
-        state.typeList = res.data.data || [];
-        state.nodeClassifyId = state.typeList[0].classify_id || null;
-        state.nodeId = state.typeList[0].id || null;
-        if (state.nodeId) {
-          getTableRows();
-        }
-      } else {
-        ElMessage.error(res.data.data);
-      }
-    })
-    .catch((err) => {
-      console.log(err);
-    });
-}; // 获取字典分类
-
 const changeSearch = (val) => {
   state.filter.search = val;
   changePage(1);
 }; // 表格关键字筛选
 
-const filterAction = () => {
-  changePage(1);
-}; // 查询按钮
-
-const filterClear = () => {
-  state.filter = {
-    time: "",
-    search: "",
-    limit: 10,
-    page: 1,
-  };
-  changePage(1);
-}; // 重置筛选项
-
 const getTableRows = () => {
   let params = { ...state.filter };
   params.id = state.nodeId;
@@ -193,29 +127,7 @@ const changeSize = (size) => {
   changePage(1);
 }; // 改变每页条数
 
-const register = () => {
-  state.formData = {
-    name: "",
-    describe: "",
-    state: 1,
-    p_dict_id: state.fatherRow ? state.fatherRow.dict_id : "",
-  };
-  if (state.bgForm) {
-    nextTick().then(() => {
-      state.bgForm.validate((valid) => {
-        if (!valid) {
-          state.bgForm.clearValidate();
-        }
-      });
-    });
-  }
-  state.addType = 1;
-  state.addDialog = true;
-}; // 新增字典按钮
-
-onBeforeMount(() => {
-  getTypeList();
-});
+onBeforeMount(() => {});
 
 const { tableRows, tableTotal, filter } = toRefs(state);
 </script>

src/page/main/auto-maintenance/task-history/list/record/index.vue

+<template>
+  <div class="detail_container">
+    <bg-breadcrumb></bg-breadcrumb>
+    <div class="main_container">
+      <div class="top-container">
+        <el-button class="back" type="default" @click="router.go(-1)"> 返回 </el-button>
+        执行ping命令 / 执行说明1
+      </div>
+      <div class="middle-container">
+        <finish-use :state="true" height="calc(100vh - 330px)" time="00:00:11"></finish-use>
+      </div>
+      <div class="bottom-container">
+        <el-button class="use-script" type="primary" @click="router.go(-1)"> 重新执行 </el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, onBeforeMount, toRefs } from "vue";
+import { useRouter, useRoute } from "vue-router";
+import { ElMessage } from "element-plus";
+import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
+import finishUse from "@/page/main/auto-maintenance/task-manage/add/finish-use.vue";
+const router = useRouter();
+const route = useRoute();
+const state = reactive({ data: 1 });
+const { data } = toRefs(state);
+</script>
+
+<style lang="scss" scoped>
+.top-container {
+  width: 100%;
+  height: 70px;
+  line-height: 70px;
+  text-align: center;
+  font-size: 14px;
+  color: #202531;
+  position: relative;
+  .back {
+    position: absolute;
+    top: 16px;
+    left: 16px;
+  }
+}
+.middle-container {
+  flex: 1;
+  padding: 30px 30px 10px 30px;
+  border-top: 1px solid #e6e9ef;
+  border-bottom: 1px solid #e6e9ef;
+}
+.bottom-container {
+  width: 100%;
+  height: 50px;
+  .use-script {
+    margin: 16px;
+    float: right;
+  }
+}
+</style>

src/page/main/auto-maintenance/task-manage/add/finish-use.vue

@@ -11,7 +11,7 @@
         <bg-icon style="color: #d75138" icon="#bg-ic-s-circle-close"></bg-icon> 执行失败
       </div>
     </div>
-    <div class="log-bg bg-scroll">
+    <div class="log-bg bg-scroll" :style="{ height: props.height }">
       <div class="log-box">
         <div v-for="(item, i) in stateData.codes" :key="i" class="codes-box">
           <span class="codes-num">{{ item.pos + 1 }}</span>
@@ -42,6 +42,10 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  height: {
+    type: String,
+    default: "",
+  },
 });
 
 const stateData = reactive({