gtsoft/gtsoft-snail-job-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(sj_map_reduce): 优化工作流批次详情样式

Browse Source
This commit is contained in:
xlsea 2024-06-21 11:22:37 +08:00
parent edbad0c914
commit 3f94657e8e
2 changed files with 123 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

211
src/components/workflow/modules/common/detail-card.vue
View File

@ -12,7 +12,12 @@ import {
import { useWorkflowStore } from '@/store/modules/workflow'; import { useWorkflowStore } from '@/store/modules/workflow';
import { $t } from '@/locales'; import { $t } from '@/locales';
import { isNotNull } from '@/utils/common'; import { isNotNull } from '@/utils/common';
import { fetchGetJobBatchDetail, fetchGetJobDetail, fetchGetJobTaskList, fetchWorkflowNodeRetry } from '@/service/api'; import {
fetchGetJobBatchDetail,
fetchGetJobDetail,
fetchGetJobTaskList
// fetchWorkflowNodeRetry
} from '@/service/api';
defineOptions({ defineOptions({
name: 'DetailCard' name: 'DetailCard'
@ -139,16 +144,16 @@ const getLogRows = (task: Workflow.JobTaskType) => {
logOpen.value = true; logOpen.value = true;
}; };
const retry = async (item: Workflow.JobTaskType) => { // const retry = async (item: Workflow.JobTaskType) => {
const { error } = await fetchWorkflowNodeRetry(store.id!, item.workflowNodeId!); // const { error } = await fetchWorkflowNodeRetry(store.id!, item.workflowNodeId!);
if (!error) { // if (!error) {
window.$message?.success('执行重试成功'); // window.$message?.success('执行重试成功');
} // }
}; // };
const isRetry = (taskBatchStatus: number) => { // const isRetry = (taskBatchStatus: number) => {
return taskBatchStatus === 4 || taskBatchStatus === 5 || taskBatchStatus === 6; // return taskBatchStatus === 4 || taskBatchStatus === 5 || taskBatchStatus === 6;
}; // };
type ThemeColor = 'default' | 'error' | 'primary' | 'info' | 'success' | 'warning'; type ThemeColor = 'default' | 'error' | 'primary' | 'info' | 'success' | 'warning';
@ -260,94 +265,105 @@ const onUpdatePage = (page: number) => {
<NDrawerContent title="任务批次详情" closable> <NDrawerContent title="任务批次详情" closable>
<NTabs v-if="idList && idList.length > 0" v-model:value="currentIndex" type="segment" animated> <NTabs v-if="idList && idList.length > 0" v-model:value="currentIndex" type="segment" animated>
<NTabPane v-for="(item, index) in idList" :key="index" :name="index + 1" :tab="item"> <NTabPane v-for="(item, index) in idList" :key="index" :name="index + 1" :tab="item">
<NSpin :show="spinning"> <NTabs class="detail-tabs" type="segment" animated>
<NDescriptions label-placement="left" bordered :column="2"> <NTabPane name="info" :tab="$t('page.log.info')">
<NDescriptionsItem :label="$t('page.jobBatch.groupName')">{{ jobData?.groupName }}</NDescriptionsItem> <NSpin :show="spinning">
<NDescriptions class="pt-12px" label-placement="left" bordered :column="2">
<NDescriptionsItem :label="$t('page.jobBatch.groupName')">{{ jobData?.groupName }}</NDescriptionsItem>
<NDescriptionsItem :label="$t('page.jobBatch.jobName')">{{ jobData?.jobName }}</NDescriptionsItem> <NDescriptionsItem :label="$t('page.jobBatch.jobName')">{{ jobData?.jobName }}</NDescriptionsItem>
<NDescriptionsItem :label="$t('page.jobBatch.taskBatchStatus')"> <NDescriptionsItem :label="$t('page.jobBatch.taskBatchStatus')">
<NTag <NTag
v-if="isNotNull(jobData.taskBatchStatus)" v-if="isNotNull(jobData.taskBatchStatus)"
:color="getTagColor(taskBatchStatusEnum[jobData.taskBatchStatus!].color )" :color="getTagColor(taskBatchStatusEnum[jobData.taskBatchStatus!].color )"
> >
{{ taskBatchStatusEnum[jobData.taskBatchStatus!].title }} {{ taskBatchStatusEnum[jobData.taskBatchStatus!].title }}
</NTag> </NTag>
<NTag v-if="isNotNull(jobData.jobStatus)" :color="getTagColor(jobStatusEnum[jobData.jobStatus!].color)"> <NTag
{{ $t(jobStatusEnum[jobData.jobStatus!].name) }} v-if="isNotNull(jobData.jobStatus)"
</NTag> :color="getTagColor(jobStatusEnum[jobData.jobStatus!].color)"
</NDescriptionsItem> >
{{ $t(jobStatusEnum[jobData.jobStatus!].name) }}
</NTag>
</NDescriptionsItem>
<NDescriptionsItem :label="$t('page.jobBatch.executionAt')"> <NDescriptionsItem :label="$t('page.jobBatch.executionAt')">
{{ jobData?.executionAt }} {{ jobData?.executionAt }}
</NDescriptionsItem> </NDescriptionsItem>
<NDescriptionsItem :label="$t('page.jobBatch.operationReason')"> <NDescriptionsItem :label="$t('page.jobBatch.operationReason')">
<NTag <NTag
v-if="isNotNull(jobData.operationReason)" v-if="isNotNull(jobData.operationReason)"
:color="getTagColor(jobOperationReasonEnum[jobData.operationReason!].color)" :color="getTagColor(jobOperationReasonEnum[jobData.operationReason!].color)"
> >
{{ $t(jobOperationReasonEnum[jobData.operationReason!].name) }} {{ $t(jobOperationReasonEnum[jobData.operationReason!].name) }}
</NTag> </NTag>
</NDescriptionsItem> </NDescriptionsItem>
<NDescriptionsItem v-if="!slots.default" :label="$t('page.jobBatch.executorType')"> <NDescriptionsItem v-if="!slots.default" :label="$t('page.jobBatch.executorType')">
<NTag <NTag
v-if="isNotNull(jobData.executorType)" v-if="isNotNull(jobData.executorType)"
:color="getTagColor(jobExecutorEnum[jobData.executorType!].color)" :color="getTagColor(jobExecutorEnum[jobData.executorType!].color)"
> >
{{ $t(jobExecutorEnum[jobData.executorType!].name) }} {{ $t(jobExecutorEnum[jobData.executorType!].name) }}
</NTag> </NTag>
</NDescriptionsItem> </NDescriptionsItem>
<NDescriptionsItem :label="$t('page.jobBatch.executorInfo')" :span="2"> <NDescriptionsItem :label="$t('page.jobBatch.executorInfo')" :span="2">
{{ jobData?.executorInfo }} {{ jobData?.executorInfo }}
</NDescriptionsItem> </NDescriptionsItem>
<NDescriptionsItem :label="$t('common.createDt')" :span="2"> <NDescriptionsItem :label="$t('common.createDt')" :span="2">
{{ jobData?.createDt }} {{ jobData?.createDt }}
</NDescriptionsItem> </NDescriptionsItem>
</NDescriptions> </NDescriptions>
</NSpin> </NSpin>
<slot></slot> <slot></slot>
<NCard </NTabPane>
:bordered="false" <NTabPane name="task">
size="small" <template #tab>
class="sm:flex-1-hidden card-wrapper" <span>任务项列表</span>
:content-style="{ padding: 0 }" <!--
:header-style="{ padding: 0 }" <div class="absolute right-16px top-9px">
> <NTooltip trigger="hover">
<template #header> <template #trigger>
<div class="header-border"><span class="pl-12px">任务项列表</span></div> <NButton text @click="getRows(item)">
</template> <icon-ant-design:sync-outlined class="mr-8px text-20px font-bold" />
<template #header-extra> </NButton>
<NTooltip trigger="hover"> </template>
<template #trigger> 刷新
<NButton text @click="getRows(item)"> </NTooltip>
<icon-ant-design:sync-outlined class="mr-16px text-20px font-bold" /> <NTooltip v-if="isRetry(jobData.taskBatchStatus!)" trigger="hover">
</NButton> <template #trigger>
</template> <NButton text>
刷新 <icon-ant-design:redo-outlined class="text-20px font-bold" @click="retry(jobData)" />
</NTooltip> </NButton>
<NTooltip v-if="isRetry(jobData.taskBatchStatus!)" trigger="hover"> </template>
<template #trigger> 重试
<NButton text> </NTooltip>
<icon-ant-design:redo-outlined class="text-20px font-bold" @click="retry(jobData)" /> </div>
</NButton> -->
</template> </template>
重试 <NCard
</NTooltip> :bordered="false"
</template> size="small"
<NDataTable class="sm:flex-1-hidden card-wrapper pt-16px"
:columns="columns" :content-style="{ padding: 0 }"
:data="dataSource" :header-style="{ padding: 0 }"
:loading="loading" >
:scroll="{ x: 1200 }" <NDataTable
remote :columns="columns"
:row-key="row => row.id" :data="dataSource"
:pagination="pagination" :loading="loading"
class="sm:h-full" :scroll="{ x: 1200 }"
/> remote
</NCard> :row-key="row => row.id"
:pagination="pagination"
class="sm:h-full"
/>
</NCard>
</NTabPane>
</NTabs>
</NTabPane> </NTabPane>
</NTabs> </NTabs>
<template v-if="ids && ids.length > 1" #footer> <template v-if="ids && ids.length > 1" #footer>
@ -386,4 +402,15 @@ const onUpdatePage = (page: number) => {
:deep(.n-tab-pane) { :deep(.n-tab-pane) {
padding-top: 0 !important; padding-top: 0 !important;
} }
.detail-tabs {
:deep(.n-tabs-nav) {
display: flex !important;
}
:deep(.n-tabs-tab__label) {
width: 100%;
justify-content: center;
}
}
</style> </style>

8
src/components/workflow/workflow.vue
View File

@ -146,8 +146,8 @@ const onDragstop = () => {
</div> </div>
</div> </div>
</NAffix> </NAffix>
<div class="workflow-body"> <NSpin :show="spinning">
<NSpin :show="spinning"> <div class="workflow-body">
<VueDragResize <VueDragResize
class="vue-drag" class="vue-drag"
:is-draggable="true" :is-draggable="true"
@ -166,8 +166,8 @@ const onDragstop = () => {
</div> </div>
</div> </div>
</VueDragResize> </VueDragResize>
</NSpin> </div>
</div> </NSpin>
</div> </div>
</div> </div>
</template> </template>