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:31:19 +08:00
parent 47341ad6d7
commit 640ca5db57
5 changed files with 56 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
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: 'afterLeave'): void;
} }
const emit = defineEmits<Emits>(); const emit = defineEmits<Emits>();
@ -58,10 +59,20 @@ onUnmounted(() => {
const onUpdateShow = (value: boolean) => { const onUpdateShow = (value: boolean) => {
emit('update:modelValue', value); emit('update:modelValue', value);
}; };
const afterLeave = () => {
emit('afterLeave');
};
</script> </script>
<template> <template>
<NDrawer v-model:show="model" display-directive="if" :width="drawerWidth" @update:show="onUpdateShow"> <NDrawer
v-model:show="model"
display-directive="if"
:width="drawerWidth"
@update:show="onUpdateShow"
@after-leave="afterLeave"
>
<NDrawerContent :title="props.title" :native-scrollbar="false" closable header-class="operate-dawer-header"> <NDrawerContent :title="props.title" :native-scrollbar="false" closable header-class="operate-dawer-header">
<template #header> <template #header>
{{ props.title }} {{ props.title }}

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

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

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

@ -38,20 +38,18 @@ const onClose = () => {
</script> </script>
<template> <template>
<NDrawer v-model:show="visible" placement="right" :width="500" display-directive="if" @after-leave="onClose"> <DetailDrawer v-model="visible" title="回调详情" :width="['50%', '90%']" @after-leave="onClose">
<NDrawerContent title="工作流详情"> <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> <NDescriptionsItem label="请求类型">
<NDescriptionsItem label="请求类型"> {{ contentTypeRecord[modelValue.callback?.contentType!] }}
{{ contentTypeRecord[modelValue.callback?.contentType!] }} </NDescriptionsItem>
</NDescriptionsItem> <NDescriptionsItem label="密钥">
<NDescriptionsItem label="密钥"> {{ modelValue.callback?.secret }}
{{ modelValue.callback?.secret }} </NDescriptionsItem>
</NDescriptionsItem> </NDescriptions>
</NDescriptions> </DetailDrawer>
</NDrawerContent>
</NDrawer>
</template> </template>
<style scoped lang="scss"></style> <style scoped lang="scss"></style>

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

@ -39,24 +39,22 @@ const onClose = () => {
</script> </script>
<template> <template>
<NDrawer v-model:show="visible" placement="right" :width="500" display-directive="if" @after-leave="onClose"> <DetailDrawer v-model="visible" title="工作流详情" :width="['50%', '90%']" @after-leave="onClose">
<NDrawerContent title="工作流详情"> <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> <NDescriptionsItem label="触发类型">{{ $t(triggerTypeRecord[modelValue.triggerType!]) }}</NDescriptionsItem>
<NDescriptionsItem label="触发类型">{{ $t(triggerTypeRecord[modelValue.triggerType!]) }}</NDescriptionsItem>
<NDescriptionsItem label="触发间隔"> <NDescriptionsItem label="触发间隔">
{{ modelValue.triggerInterval }} {{ modelValue.triggerType === 2 ? '秒' : null }} {{ modelValue.triggerInterval }} {{ modelValue.triggerType === 2 ? '秒' : null }}
</NDescriptionsItem> </NDescriptionsItem>
<NDescriptionsItem label="执行超时时间">{{ modelValue.executorTimeout }} 秒</NDescriptionsItem> <NDescriptionsItem label="执行超时时间">{{ modelValue.executorTimeout }} 秒</NDescriptionsItem>
<NDescriptionsItem label="阻塞策略">{{ $t(blockStrategyRecord[modelValue.blockStrategy!]) }}</NDescriptionsItem> <NDescriptionsItem label="阻塞策略">{{ $t(blockStrategyRecord[modelValue.blockStrategy!]) }}</NDescriptionsItem>
<NDescriptionsItem label="工作流上下文">{{ modelValue.wfContext }}</NDescriptionsItem> <NDescriptionsItem label="工作流上下文">{{ modelValue.wfContext }}</NDescriptionsItem>
<NDescriptionsItem label="工作流状态"> <NDescriptionsItem label="工作流状态">
{{ $t(workFlowNodeStatusRecord[modelValue.workflowStatus!]) }} {{ $t(workFlowNodeStatusRecord[modelValue.workflowStatus!]) }}
</NDescriptionsItem> </NDescriptionsItem>
</NDescriptions> </NDescriptions>
</NDrawerContent> </DetailDrawer>
</NDrawer>
</template> </template>

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

@ -46,21 +46,19 @@ const getTaskName = (id: string) => {
</script> </script>
<template> <template>
<NDrawer v-model:show="visible" placement="right" :width="500" display-directive="if" @after-leave="onClose"> <DetailDrawer v-model="visible" title="任务详情" :width="['50%', '90%']" @after-leave="onClose">
<NDrawerContent title="工作流详情"> <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> <NDescriptionsItem label="任务名称">{{ getTaskName(modelValue.jobTask?.jobId!) }}</NDescriptionsItem>
<NDescriptionsItem label="任务名称">{{ getTaskName(modelValue.jobTask?.jobId!) }}</NDescriptionsItem> <NDescriptionsItem label="失败策略">
<NDescriptionsItem label="失败策略"> {{ $t(failStrategyRecord[modelValue.failStrategy!]) }}
{{ $t(failStrategyRecord[modelValue.failStrategy!]) }} </NDescriptionsItem>
</NDescriptionsItem> <NDescriptionsItem label="工作流状态">
<NDescriptionsItem label="工作流状态"> {{ $t(workFlowNodeStatusRecord[modelValue.workflowNodeStatus!]) }}
{{ $t(workFlowNodeStatusRecord[modelValue.workflowNodeStatus!]) }} </NDescriptionsItem>
</NDescriptionsItem> </NDescriptions>
</NDescriptions> </DetailDrawer>
</NDrawerContent>
</NDrawer>
</template> </template>
<style scoped lang="scss"></style> <style scoped lang="scss"></style>