127 lines
3.2 KiB
Vue
127 lines
3.2 KiB
Vue
|
<script lang="ts" setup>
|
||
|
|
import { ref, watch } from 'vue';
|
||
|
|
import { $t } from '../locales';
|
||
|
|
import { useFlowStore } from '../stores';
|
||
|
|
import { blockStrategyRecord, taskBatchStatusEnum } from '../constants/business';
|
||
|
|
import StartDetail from '../detail/start-detail.vue';
|
||
|
|
import StartDrawer from '../drawer/start-drawer.vue';
|
||
|
|
import AddNode from './add-node.vue';
|
||
|
|
|
||
|
|
defineOptions({
|
||
|
|
name: 'StartNode'
|
||
|
|
});
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
modelValue?: Flow.NodeDataType;
|
||
|
|
disabled?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
const props = withDefaults(defineProps<Props>(), {
|
||
|
|
disabled: false,
|
||
|
|
modelValue: () => ({})
|
||
|
|
});
|
||
|
|
|
||
|
|
interface Emits {
|
||
|
|
(e: 'update:modelValue', modelValue: Flow.NodeDataType): void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const emit = defineEmits<Emits>();
|
||
|
|
|
||
|
|
const store = useFlowStore();
|
||
|
|
const form = ref<Flow.NodeDataType>({});
|
||
|
|
const nodeData = ref<Flow.NodeDataType>({});
|
||
|
|
|
||
|
|
watch(
|
||
|
|
() => props.modelValue,
|
||
|
|
val => {
|
||
|
|
nodeData.value = val;
|
||
|
|
},
|
||
|
|
{ immediate: true, deep: true }
|
||
|
|
);
|
||
|
|
|
||
|
|
watch(
|
||
|
|
() => nodeData.value,
|
||
|
|
val => {
|
||
|
|
emit('update:modelValue', val);
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
watch(
|
||
|
|
() => nodeData.value?.groupName,
|
||
|
|
val => {
|
||
|
|
if (val) {
|
||
|
|
store.setJobList(val);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{ immediate: true }
|
||
|
|
);
|
||
|
|
|
||
|
|
const drawer = ref<boolean>(false);
|
||
|
|
const detailDrawer = ref<boolean>(false);
|
||
|
|
|
||
|
|
const save = (val: Flow.NodeDataType) => {
|
||
|
|
nodeData.value = val;
|
||
|
|
};
|
||
|
|
|
||
|
|
const show = () => {
|
||
|
|
if (store.type === 0) {
|
||
|
|
form.value = JSON.parse(JSON.stringify(nodeData.value));
|
||
|
|
drawer.value = true;
|
||
|
|
} else {
|
||
|
|
detailDrawer.value = true;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="node-wrap">
|
||
|
|
<div
|
||
|
|
:class="disabled ? 'start-node-disabled' : 'node-wrap-box-hover'"
|
||
|
|
class="node-wrap-box node-error-success start-node"
|
||
|
|
@click="show"
|
||
|
|
>
|
||
|
|
<div class="title bg-#ffffff">
|
||
|
|
<span class="text" calss="color-#ff943e">
|
||
|
|
<NBadge dot :color="nodeData.workflowStatus === 1 ? '#52c41a' : '#ff000d'" />
|
||
|
|
{{ nodeData.workflowName ? nodeData.workflowName : $t('snail.form.groupName') }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div v-if="nodeData.groupName" class="content">
|
||
|
|
<div>
|
||
|
|
<span class="content_label">{{ $t('snail.groupName') }}:</span>
|
||
|
|
<NEllipsis class="w-135px">
|
||
|
|
{{ nodeData.groupName }}
|
||
|
|
</NEllipsis>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span class="content_label">{{ $t('snail.blockStrategy') }}:</span>
|
||
|
|
{{ blockStrategyRecord[nodeData.blockStrategy!] }}
|
||
|
|
</div>
|
||
|
|
<div>.........</div>
|
||
|
|
</div>
|
||
|
|
<div v-else class="content">
|
||
|
|
<span class="placeholder">{{ $t('snail.form.workflowTip') }}</span>
|
||
|
|
</div>
|
||
|
|
<NTooltip v-if="store.type === 2" trigger="hover">
|
||
|
|
<template #trigger>{{ taskBatchStatusEnum[3].title }}</template>
|
||
|
|
<SvgIcon
|
||
|
|
class="error-tip"
|
||
|
|
:color="taskBatchStatusEnum[3].color"
|
||
|
|
size="24px"
|
||
|
|
:icon="taskBatchStatusEnum[3].icon"
|
||
|
|
@click.stop="() => {}"
|
||
|
|
/>
|
||
|
|
</NTooltip>
|
||
|
|
</div>
|
||
|
|
<AddNode v-model="nodeData.nodeConfig!" :disabled="disabled"></AddNode>
|
||
|
|
<StartDetail v-if="store.type !== 0" v-model:open="detailDrawer" v-model="nodeData" />
|
||
|
|
<StartDrawer v-model:open="drawer" v-model="form" @save="save" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.content {
|
||
|
|
line-height: 136%;
|
||
|
|
}
|
||
|
|
</style>
|