style(sj_map_reduce): 优化工作流详情组件

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

View File

@ -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 }}

View File

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

View File

@ -38,8 +38,7 @@ const onClose = () => {
</script>
<template>
<NDrawer v-model:show="visible" placement="right" :width="500" display-directive="if" @after-leave="onClose">
<NDrawerContent title="工作流详情">
<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>
@ -50,8 +49,7 @@ const onClose = () => {
{{ modelValue.callback?.secret }}
</NDescriptionsItem>
</NDescriptions>
</NDrawerContent>
</NDrawer>
</DetailDrawer>
</template>
<style scoped lang="scss"></style>

View File

@ -39,8 +39,7 @@ const onClose = () => {
</script>
<template>
<NDrawer v-model:show="visible" placement="right" :width="500" display-directive="if" @after-leave="onClose">
<NDrawerContent title="工作流详情">
<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>
@ -57,6 +56,5 @@ const onClose = () => {
{{ $t(workFlowNodeStatusRecord[modelValue.workflowStatus!]) }}
</NDescriptionsItem>
</NDescriptions>
</NDrawerContent>
</NDrawer>
</DetailDrawer>
</template>

View File

@ -46,8 +46,7 @@ const getTaskName = (id: string) => {
</script>
<template>
<NDrawer v-model:show="visible" placement="right" :width="500" display-directive="if" @after-leave="onClose">
<NDrawerContent title="工作流详情">
<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>
@ -59,8 +58,7 @@ const getTaskName = (id: string) => {
{{ $t(workFlowNodeStatusRecord[modelValue.workflowNodeStatus!]) }}
</NDescriptionsItem>
</NDescriptions>
</NDrawerContent>
</NDrawer>
</DetailDrawer>
</template>
<style scoped lang="scss"></style>