|
|
@ -1,6 +1,5 @@ |
|
|
|
<template> |
|
|
|
<el-dialog v-model="visible" width="80%" top="5vh" append-to-body> |
|
|
|
|
|
|
|
<div style="display: flex; flex-direction: column; gap: 10px;"> |
|
|
|
<!-- 第一部分:实例表格(带分页) --> |
|
|
|
<el-card shadow="hover"> |
|
|
@ -13,6 +12,7 @@ |
|
|
|
<el-table |
|
|
|
:data="instances" |
|
|
|
border |
|
|
|
highlight-current-row |
|
|
|
style="width: 100%" |
|
|
|
@row-click="handleFirstRowClick" |
|
|
|
:height="350" |
|
|
@ -38,7 +38,7 @@ |
|
|
|
:total="total" |
|
|
|
:page-size="pageSize" |
|
|
|
:current-page="currentPage" |
|
|
|
@current-change="fetchInstances" |
|
|
|
@current-change="handlePageChange" |
|
|
|
style="margin-top: 10px; text-align: right;" |
|
|
|
/> |
|
|
|
</el-card> |
|
|
@ -54,6 +54,7 @@ |
|
|
|
<el-table |
|
|
|
:data="taskNodesData" |
|
|
|
border |
|
|
|
highlight-current-row |
|
|
|
style="width: 100%" |
|
|
|
@row-click="handleSecondRowClick" |
|
|
|
:height="300" |
|
|
@ -92,50 +93,75 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup> |
|
|
|
import { ref, getCurrentInstance } from "vue"; |
|
|
|
import { listInstances, taskNodes, logDetails } from "@/api/meta/metatask"; |
|
|
|
import { ref } from "vue"; |
|
|
|
|
|
|
|
const { proxy } = getCurrentInstance(); |
|
|
|
const { meta_instance_status } = proxy.useDict("meta_instance_status"); |
|
|
|
// Define props |
|
|
|
|
|
|
|
// Props |
|
|
|
const props = defineProps({ |
|
|
|
defindName: String, // Assuming defindName is a string, you can adjust based on actual type |
|
|
|
defindName: String, |
|
|
|
}); |
|
|
|
|
|
|
|
// Define reactive state |
|
|
|
const visible = ref(false); //弹窗显示状态 |
|
|
|
const instances = ref([]); // 第一个表格数据 |
|
|
|
const total = ref(0); // 数据总数,用于分页 |
|
|
|
const pageSize = ref(10); // 每页条数 |
|
|
|
const currentPage = ref(1); // 当前页码 |
|
|
|
const taskNodesData = ref([]); // 第二个表格数据 |
|
|
|
const logDetailsContent = ref(""); // 第三部分的日志内容 |
|
|
|
// State |
|
|
|
const visible = ref(false); |
|
|
|
const instances = ref([]); |
|
|
|
const total = ref(0); |
|
|
|
const pageSize = ref(10); |
|
|
|
const currentPage = ref(1); |
|
|
|
const taskNodesData = ref([]); |
|
|
|
const logDetailsContent = ref(""); |
|
|
|
|
|
|
|
// 对外方法 |
|
|
|
defineExpose({ |
|
|
|
show(name) { |
|
|
|
visible.value = true; |
|
|
|
currentPage.value = 1; |
|
|
|
fetchInstances(name); |
|
|
|
}, |
|
|
|
}); |
|
|
|
// Fetch first table data |
|
|
|
const fetchInstances = (defindName) => { |
|
|
|
|
|
|
|
// 加载实例数据 |
|
|
|
const fetchInstances = (name) => { |
|
|
|
listInstances({ |
|
|
|
page_num: currentPage.value, |
|
|
|
page_size: pageSize.value, |
|
|
|
searchVal: defindName, |
|
|
|
searchVal: name, |
|
|
|
}).then((response) => { |
|
|
|
instances.value = response.rows; |
|
|
|
total.value = response.total; |
|
|
|
|
|
|
|
// 自动点击第一行 |
|
|
|
if (instances.value.length > 0) { |
|
|
|
handleFirstRowClick(instances.value[0]); |
|
|
|
} else { |
|
|
|
taskNodesData.value = []; |
|
|
|
logDetailsContent.value = ""; |
|
|
|
} |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
// Handle row click in the first table and fetch task node data |
|
|
|
// 分页切换 |
|
|
|
const handlePageChange = (page) => { |
|
|
|
currentPage.value = page; |
|
|
|
fetchInstances(props.defindName); |
|
|
|
}; |
|
|
|
|
|
|
|
// 选中实例,加载任务节点 |
|
|
|
const handleFirstRowClick = (row) => { |
|
|
|
taskNodes(row.id).then((response) => { |
|
|
|
taskNodesData.value = response.rows; |
|
|
|
|
|
|
|
if (taskNodesData.value.length > 0) { |
|
|
|
handleSecondRowClick(taskNodesData.value[0]); |
|
|
|
} else { |
|
|
|
logDetailsContent.value = ""; |
|
|
|
} |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
// Handle row click in the second table and fetch log details |
|
|
|
// 选中节点,加载日志 |
|
|
|
const handleSecondRowClick = (row) => { |
|
|
|
logDetails(row.id).then((response) => { |
|
|
|
logDetailsContent.value = response.data; |
|
|
@ -143,9 +169,7 @@ const handleSecondRowClick = (row) => { |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<style scoped> |
|
|
|
/* 添加全局间距和样式优化 */ |
|
|
|
.el-card { |
|
|
|
padding: 5px; |
|
|
|
} |
|
|
|