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-07-12 19:35:56 +08:00
parent 640ca5db57
commit 8dc50bb21e
6 changed files with 77 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/common/detail-drawer.vue
View File

@ -14,6 +14,7 @@ const props = defineProps<Props>();
interface Emits {
(e: 'update:modelValue', modelValue: boolean): void;
(e: 'update:show', show: boolean): void;
(e: 'afterLeave'): void;
}
const emit = defineEmits<Emits>();
@ -58,6 +59,7 @@ onUnmounted(() => {
const onUpdateShow = (value: boolean) => {
emit('update:modelValue', value);
emit('update:show', value);
};
const afterLeave = () => {

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

@ -138,85 +138,83 @@ const onUpdatePage = (page: number) => {
</script>
<template>
<NDrawer v-model:show="visible" :width="800" display-directive="if" @update:show="onUpdateShow">
<NDrawerContent title="任务批次详情" closable>
<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">
<NTabs class="detail-tabs" type="segment" animated>
<NTabPane name="info" :tab="$t('page.log.info')">
<NSpin :show="spinning">
<NDescriptions class="pt-12px" label-placement="left" bordered :column="2">
<NDescriptionsItem :label="$t('page.jobBatch.groupName')">{{ jobData?.groupName }}</NDescriptionsItem>
<DetailDrawer v-model="visible" title="任务批次详情" :width="['800px', '90%']" @update:show="onUpdateShow">
<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">
<NTabs class="detail-tabs" type="segment" animated>
<NTabPane name="info" :tab="$t('page.log.info')">
<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')">
<NTag
v-if="isNotNull(jobData.taskBatchStatus)"
:color="getTagColor(taskBatchStatusEnum[jobData.taskBatchStatus!].color )"
>
{{ taskBatchStatusEnum[jobData.taskBatchStatus!].title }}
</NTag>
<NTag
v-if="isNotNull(jobData.jobStatus)"
:color="getTagColor(jobStatusEnum[jobData.jobStatus!].color)"
>
{{ $t(jobStatusEnum[jobData.jobStatus!].name) }}
</NTag>
</NDescriptionsItem>
<NDescriptionsItem :label="$t('page.jobBatch.taskBatchStatus')">
<NTag
v-if="isNotNull(jobData.taskBatchStatus)"
:color="getTagColor(taskBatchStatusEnum[jobData.taskBatchStatus!].color )"
>
{{ taskBatchStatusEnum[jobData.taskBatchStatus!].title }}
</NTag>
<NTag
v-if="isNotNull(jobData.jobStatus)"
:color="getTagColor(jobStatusEnum[jobData.jobStatus!].color)"
>
{{ $t(jobStatusEnum[jobData.jobStatus!].name) }}
</NTag>
</NDescriptionsItem>
<NDescriptionsItem :label="$t('page.jobBatch.executionAt')">
{{ jobData?.executionAt }}
</NDescriptionsItem>
<NDescriptionsItem :label="$t('page.jobBatch.executionAt')">
{{ jobData?.executionAt }}
</NDescriptionsItem>
<NDescriptionsItem :label="$t('page.jobBatch.operationReason')">
<NTag
v-if="isNotNull(jobData.operationReason)"
:color="getTagColor(jobOperationReasonEnum[jobData.operationReason!].color)"
>
{{ $t(jobOperationReasonEnum[jobData.operationReason!].name) }}
</NTag>
</NDescriptionsItem>
<NDescriptionsItem :label="$t('page.jobBatch.operationReason')">
<NTag
v-if="isNotNull(jobData.operationReason)"
:color="getTagColor(jobOperationReasonEnum[jobData.operationReason!].color)"
>
{{ $t(jobOperationReasonEnum[jobData.operationReason!].name) }}
</NTag>
</NDescriptionsItem>
<NDescriptionsItem v-if="!slots.default" :label="$t('page.jobBatch.executorType')">
<NTag
v-if="isNotNull(jobData.executorType)"
:color="getTagColor(jobExecutorEnum[jobData.executorType!].color)"
>
{{ $t(jobExecutorEnum[jobData.executorType!].name) }}
</NTag>
</NDescriptionsItem>
<NDescriptionsItem v-if="!slots.default" :label="$t('page.jobBatch.executorType')">
<NTag
v-if="isNotNull(jobData.executorType)"
:color="getTagColor(jobExecutorEnum[jobData.executorType!].color)"
>
{{ $t(jobExecutorEnum[jobData.executorType!].name) }}
</NTag>
</NDescriptionsItem>
<NDescriptionsItem :label="$t('page.jobBatch.executorInfo')" :span="2">
{{ jobData?.executorInfo }}
</NDescriptionsItem>
<NDescriptionsItem :label="$t('common.createDt')" :span="2">
{{ jobData?.createDt }}
</NDescriptionsItem>
</NDescriptions>
</NSpin>
<slot></slot>
</NTabPane>
<NTabPane name="task" :disabled="jobData.taskBatchStatus === 99">
<template #tab>
<span>任务项列表</span>
</template>
<JobTaskListTable :row-data="jobData as any" @show-log="getLogRows" @retry="retry" />
</NTabPane>
</NTabs>
</NTabPane>
</NTabs>
<template v-if="ids && ids.length > 1" #footer>
<NPagination
v-model:page="currentIndex"
class="text-center"
:page-size="1"
:page-count="ids.length"
@update:page="onUpdatePage"
/>
</template>
</NDrawerContent>
</NDrawer>
<NDescriptionsItem :label="$t('page.jobBatch.executorInfo')" :span="2">
{{ jobData?.executorInfo }}
</NDescriptionsItem>
<NDescriptionsItem :label="$t('common.createDt')" :span="2">
{{ jobData?.createDt }}
</NDescriptionsItem>
</NDescriptions>
</NSpin>
<slot></slot>
</NTabPane>
<NTabPane name="task" :disabled="jobData.taskBatchStatus === 99">
<template #tab>
<span>任务项列表</span>
</template>
<JobTaskListTable :row-data="jobData as any" @show-log="getLogRows" @retry="retry" />
</NTabPane>
</NTabs>
</NTabPane>
</NTabs>
<template v-if="ids && ids.length > 1" #footer>
<NPagination
v-model:page="currentIndex"
class="text-center"
:page-size="1"
:page-count="ids.length"
@update:page="onUpdatePage"
/>
</template>
</DetailDrawer>
<FlowLogDrawer v-model:show="logOpen" title="日志详情" :task-data="record" />
</template>

2
src/components/workflow/modules/detail/branch-detail.vue
View File

@ -38,7 +38,7 @@ watch(
</script>
<template>
<DetailDrawer v-model="visible" title="决策详情" :width="['50%', '90%']" @after-leave="onClose">
<DetailDrawer v-model="visible" title="决策详情" :width="['500px', '90%']" @after-leave="onClose">
<BranchDesc v-if="visible" :model-value="modelValue" />
</DetailDrawer>
</template>

2
src/components/workflow/modules/detail/callback-detail.vue
View File

@ -38,7 +38,7 @@ const onClose = () => {
</script>
<template>
<DetailDrawer v-model="visible" title="回调详情" :width="['50%', '90%']" @after-leave="onClose">
<DetailDrawer v-model="visible" title="回调详情" :width="['500px', '90%']" @after-leave="onClose">
<NDescriptions :column="1" label-placement="left" bordered :label-style="{ width: '120px' }">
<NDescriptionsItem label="节点名称">{{ modelValue.nodeName }}</NDescriptionsItem>
<NDescriptionsItem label="webhook">{{ modelValue.callback?.webhook }}</NDescriptionsItem>

2
src/components/workflow/modules/detail/start-detail.vue
View File

@ -39,7 +39,7 @@ const onClose = () => {
</script>
<template>
<DetailDrawer v-model="visible" title="工作流详情" :width="['50%', '90%']" @after-leave="onClose">
<DetailDrawer v-model="visible" title="工作流详情" :width="['500px', '90%']" @after-leave="onClose">
<NDescriptions :column="1" label-placement="left" bordered :label-style="{ width: '120px' }">
<NDescriptionsItem label="工作流名称">{{ modelValue.workflowName }}</NDescriptionsItem>
<NDescriptionsItem label="组名称">{{ modelValue.groupName }}</NDescriptionsItem>

2
src/components/workflow/modules/detail/task-detail.vue
View File

@ -46,7 +46,7 @@ const getTaskName = (id: string) => {
</script>
<template>
<DetailDrawer v-model="visible" title="任务详情" :width="['50%', '90%']" @after-leave="onClose">
<DetailDrawer v-model="visible" title="任务详情" :width="['500px', '90%']" @after-leave="onClose">
<NDescriptions :column="1" label-placement="left" bordered :label-style="{ width: '120px' }">
<NDescriptionsItem label="节点名称">{{ modelValue.nodeName }}</NDescriptionsItem>
<NDescriptionsItem label="任务 ID">{{ modelValue.jobTask?.jobId }}</NDescriptionsItem>