style(sj_map_reduce): 优化工作流详情组件
This commit is contained in:
xlsea
parent
47341ad6d7
commit
640ca5db57
@ -14,6 +14,7 @@ const props = defineProps<Props>();
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:modelValue', modelValue: boolean): void;
|
||||
(e: 'afterLeave'): void;
|
||||
}
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
@ -58,10 +59,20 @@ onUnmounted(() => {
|
||||
const onUpdateShow = (value: boolean) => {
|
||||
emit('update:modelValue', value);
|
||||
};
|
||||
|
||||
const afterLeave = () => {
|
||||
emit('afterLeave');
|
||||
};
|
||||
</script>
|
||||
|
||||
<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">
|
||||
<template #header>
|
||||
{{ props.title }}
|
||||
|
||||
@ -38,9 +38,7 @@ watch(
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NDrawer v-model:show="visible" placement="right" :width="500" display-directive="if" @after-leave="onClose">
|
||||
<NDrawerContent title="决策详情">
|
||||
<BranchDesc v-if="visible" :model-value="modelValue" />
|
||||
</NDrawerContent>
|
||||
</NDrawer>
|
||||
<DetailDrawer v-model="visible" title="决策详情" :width="['50%', '90%']" @after-leave="onClose">
|
||||
<BranchDesc v-if="visible" :model-value="modelValue" />
|
||||
</DetailDrawer>
|
||||
</template>
|
||||
|
||||
@ -38,20 +38,18 @@ const onClose = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NDrawer v-model:show="visible" placement="right" :width="500" display-directive="if" @after-leave="onClose">
|
||||
<NDrawerContent title="工作流详情">
|
||||
<NDescriptions :column="1" label-placement="left" bordered :label-style="{ width: '120px' }">
|
||||
<NDescriptionsItem label="节点名称">{{ modelValue.nodeName }}</NDescriptionsItem>
|
||||
<NDescriptionsItem label="webhook">{{ modelValue.callback?.webhook }}</NDescriptionsItem>
|
||||
<NDescriptionsItem label="请求类型">
|
||||
{{ contentTypeRecord[modelValue.callback?.contentType!] }}
|
||||
</NDescriptionsItem>
|
||||
<NDescriptionsItem label="密钥">
|
||||
{{ modelValue.callback?.secret }}
|
||||
</NDescriptionsItem>
|
||||
</NDescriptions>
|
||||
</NDrawerContent>
|
||||
</NDrawer>
|
||||
<DetailDrawer v-model="visible" title="回调详情" :width="['50%', '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>
|
||||
<NDescriptionsItem label="请求类型">
|
||||
{{ contentTypeRecord[modelValue.callback?.contentType!] }}
|
||||
</NDescriptionsItem>
|
||||
<NDescriptionsItem label="密钥">
|
||||
{{ modelValue.callback?.secret }}
|
||||
</NDescriptionsItem>
|
||||
</NDescriptions>
|
||||
</DetailDrawer>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
@ -39,24 +39,22 @@ const onClose = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NDrawer v-model:show="visible" placement="right" :width="500" display-directive="if" @after-leave="onClose">
|
||||
<NDrawerContent title="工作流详情">
|
||||
<NDescriptions :column="1" label-placement="left" bordered :label-style="{ width: '120px' }">
|
||||
<NDescriptionsItem label="工作流名称">{{ modelValue.workflowName }}</NDescriptionsItem>
|
||||
<NDescriptionsItem label="组名称">{{ modelValue.groupName }}</NDescriptionsItem>
|
||||
<NDescriptionsItem label="触发类型">{{ $t(triggerTypeRecord[modelValue.triggerType!]) }}</NDescriptionsItem>
|
||||
<DetailDrawer v-model="visible" title="工作流详情" :width="['50%', '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>
|
||||
<NDescriptionsItem label="触发类型">{{ $t(triggerTypeRecord[modelValue.triggerType!]) }}</NDescriptionsItem>
|
||||
|
||||
<NDescriptionsItem label="触发间隔">
|
||||
{{ modelValue.triggerInterval }} {{ modelValue.triggerType === 2 ? '秒' : null }}
|
||||
</NDescriptionsItem>
|
||||
<NDescriptionsItem label="触发间隔">
|
||||
{{ modelValue.triggerInterval }} {{ modelValue.triggerType === 2 ? '秒' : null }}
|
||||
</NDescriptionsItem>
|
||||
|
||||
<NDescriptionsItem label="执行超时时间">{{ modelValue.executorTimeout }} 秒</NDescriptionsItem>
|
||||
<NDescriptionsItem label="阻塞策略">{{ $t(blockStrategyRecord[modelValue.blockStrategy!]) }}</NDescriptionsItem>
|
||||
<NDescriptionsItem label="工作流上下文">{{ modelValue.wfContext }}</NDescriptionsItem>
|
||||
<NDescriptionsItem label="工作流状态">
|
||||
{{ $t(workFlowNodeStatusRecord[modelValue.workflowStatus!]) }}
|
||||
</NDescriptionsItem>
|
||||
</NDescriptions>
|
||||
</NDrawerContent>
|
||||
</NDrawer>
|
||||
<NDescriptionsItem label="执行超时时间">{{ modelValue.executorTimeout }} 秒</NDescriptionsItem>
|
||||
<NDescriptionsItem label="阻塞策略">{{ $t(blockStrategyRecord[modelValue.blockStrategy!]) }}</NDescriptionsItem>
|
||||
<NDescriptionsItem label="工作流上下文">{{ modelValue.wfContext }}</NDescriptionsItem>
|
||||
<NDescriptionsItem label="工作流状态">
|
||||
{{ $t(workFlowNodeStatusRecord[modelValue.workflowStatus!]) }}
|
||||
</NDescriptionsItem>
|
||||
</NDescriptions>
|
||||
</DetailDrawer>
|
||||
</template>
|
||||
|
||||
@ -46,21 +46,19 @@ const getTaskName = (id: string) => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NDrawer v-model:show="visible" placement="right" :width="500" display-directive="if" @after-leave="onClose">
|
||||
<NDrawerContent title="工作流详情">
|
||||
<NDescriptions :column="1" label-placement="left" bordered :label-style="{ width: '120px' }">
|
||||
<NDescriptionsItem label="节点名称">{{ modelValue.nodeName }}</NDescriptionsItem>
|
||||
<NDescriptionsItem label="任务 ID">{{ modelValue.jobTask?.jobId }}</NDescriptionsItem>
|
||||
<NDescriptionsItem label="任务名称">{{ getTaskName(modelValue.jobTask?.jobId!) }}</NDescriptionsItem>
|
||||
<NDescriptionsItem label="失败策略">
|
||||
{{ $t(failStrategyRecord[modelValue.failStrategy!]) }}
|
||||
</NDescriptionsItem>
|
||||
<NDescriptionsItem label="工作流状态">
|
||||
{{ $t(workFlowNodeStatusRecord[modelValue.workflowNodeStatus!]) }}
|
||||
</NDescriptionsItem>
|
||||
</NDescriptions>
|
||||
</NDrawerContent>
|
||||
</NDrawer>
|
||||
<DetailDrawer v-model="visible" title="任务详情" :width="['50%', '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>
|
||||
<NDescriptionsItem label="任务名称">{{ getTaskName(modelValue.jobTask?.jobId!) }}</NDescriptionsItem>
|
||||
<NDescriptionsItem label="失败策略">
|
||||
{{ $t(failStrategyRecord[modelValue.failStrategy!]) }}
|
||||
</NDescriptionsItem>
|
||||
<NDescriptionsItem label="工作流状态">
|
||||
{{ $t(workFlowNodeStatusRecord[modelValue.workflowNodeStatus!]) }}
|
||||
</NDescriptionsItem>
|
||||
</NDescriptions>
|
||||
</DetailDrawer>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user