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

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

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

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

@ -38,7 +38,7 @@ watch(
</script> </script>
<template> <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" /> <BranchDesc v-if="visible" :model-value="modelValue" />
</DetailDrawer> </DetailDrawer>
</template> </template>

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

@ -38,7 +38,7 @@ const onClose = () => {
</script> </script>
<template> <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' }"> <NDescriptions :column="1" label-placement="left" bordered :label-style="{ width: '120px' }">
<NDescriptionsItem label="节点名称">{{ modelValue.nodeName }}</NDescriptionsItem> <NDescriptionsItem label="节点名称">{{ modelValue.nodeName }}</NDescriptionsItem>
<NDescriptionsItem label="webhook">{{ modelValue.callback?.webhook }}</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> </script>
<template> <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' }"> <NDescriptions :column="1" label-placement="left" bordered :label-style="{ width: '120px' }">
<NDescriptionsItem label="工作流名称">{{ modelValue.workflowName }}</NDescriptionsItem> <NDescriptionsItem label="工作流名称">{{ modelValue.workflowName }}</NDescriptionsItem>
<NDescriptionsItem label="组名称">{{ modelValue.groupName }}</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> </script>
<template> <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' }"> <NDescriptions :column="1" label-placement="left" bordered :label-style="{ width: '120px' }">
<NDescriptionsItem label="节点名称">{{ modelValue.nodeName }}</NDescriptionsItem> <NDescriptionsItem label="节点名称">{{ modelValue.nodeName }}</NDescriptionsItem>
<NDescriptionsItem label="任务 ID">{{ modelValue.jobTask?.jobId }}</NDescriptionsItem> <NDescriptionsItem label="任务 ID">{{ modelValue.jobTask?.jobId }}</NDescriptionsItem>