<script lang="ts" setup>
|
import { reactive } from 'vue';
|
|
import { BasicModal, useModal, useModalInner } from '@jnpf/ui/modal';
|
import { formatToDateTime } from '@jnpf/utils';
|
|
import { getTaskLogList } from '#/api/workFlow/trigger';
|
|
import LogErrorModal from './LogErrorModal.vue';
|
|
interface State {
|
list: any[];
|
loading: boolean;
|
}
|
|
const statusMap = {
|
0: '已完成',
|
1: '异常',
|
2: '进行中',
|
};
|
const statusIconMap = {
|
0: 'icon-ym-success',
|
1: 'icon-ym-fail',
|
2: 'icon-ym-recovery',
|
};
|
const state = reactive<State>({
|
list: [],
|
loading: false,
|
});
|
const [registerModal, { changeLoading }] = useModalInner(init);
|
const [registerLogErrorModal, { openModal: openLogErrorModal }] = useModal();
|
|
function init(data) {
|
changeLoading(true);
|
state.loading = true;
|
state.list = [];
|
getTaskLogList({ taskId: data.taskId, nodeCode: data.nodeId }).then((res) => {
|
state.list = res.data || [];
|
changeLoading(false);
|
state.loading = false;
|
});
|
}
|
function handleShowErrorModal(item) {
|
openLogErrorModal(true, { errorTip: item.errorTip, errorData: item.errorData });
|
}
|
</script>
|
<template>
|
<BasicModal v-bind="$attrs" @register="registerModal" title="任务流程" destroy-on-close class="jnpf-task-log-modal" :footer="null">
|
<div class="record-container" v-if="state.list?.length">
|
<div class="record-item" v-for="item in state.list" :key="item">
|
<div class="record-item-top">
|
<div class="handle-time">触发时间：{{ formatToDateTime(item.startTime) }}</div>
|
<div class="async">
|
<a-tag :color="item.isAsync == 1 ? 'error' : 'blue'">{{ item.isAsync == 1 ? '异步' : '同步' }}</a-tag>
|
</div>
|
</div>
|
<div class="record-item-bottom">
|
<div class="item" v-for="child in item.recordList" :key="child">
|
<div class="node-name">{{ child.nodeName }}</div>
|
<div class="task-flow-status">
|
<i class="icon icon-ym" :class="statusIconMap[child.status]" v-if="statusIconMap[child.status]"></i>
|
{{ statusMap[child.status] }}
|
</div>
|
<div class="w-[56px]">
|
<a-button type="link" @click="handleShowErrorModal(child)" v-if="child.status === 1">查看异常</a-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
<jnpf-empty v-if="!state.list?.length && !state.loading" />
|
</div>
|
</BasicModal>
|
<LogErrorModal @register="registerLogErrorModal" />
|
</template>
|
<style lang="scss">
|
.jnpf-task-log-modal {
|
.ant-modal-body {
|
& > .scrollbar {
|
padding: 0 20px;
|
}
|
}
|
|
.record-container {
|
height: 600px;
|
padding-top: 20px;
|
|
.record-item {
|
display: flex;
|
flex-direction: column;
|
padding-bottom: 12px;
|
margin-bottom: 12px;
|
border-bottom: 1px solid var(--border-color-base1);
|
|
.record-item-top {
|
display: flex;
|
margin-bottom: 5px;
|
|
.handle-time {
|
flex: 1;
|
font-size: 14px;
|
color: var(--text-color-secondary);
|
}
|
}
|
|
.record-item-bottom {
|
padding: 0 15px;
|
margin: 4px 0;
|
background-color: var(--app-content-background);
|
border-radius: 4px;
|
|
.item {
|
display: flex;
|
align-items: center;
|
height: 38px;
|
border-bottom: 1px solid var(--border-color-base);
|
|
&:last-child {
|
border-bottom: unset;
|
}
|
}
|
|
.node-name {
|
flex: 1;
|
padding-right: 10px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
.ant-btn-link {
|
padding: unset;
|
}
|
}
|
}
|
}
|
|
.icon-ym-recovery {
|
background-color: #1a90ff;
|
}
|
}
|
</style>
|
