2024-05-15 14:43:28 +08:00
|
|
|
<script setup lang="ts">
|
2024-12-12 17:18:57 +08:00
|
|
|
import { nextTick, onMounted, ref, watch } from 'vue';
|
2024-05-15 14:43:28 +08:00
|
|
|
import CronInput from '@sa/cron-input';
|
2024-05-30 15:37:56 +08:00
|
|
|
import { type FormInst, type FormItemRule } from 'naive-ui';
|
2024-06-20 10:56:55 +08:00
|
|
|
import {
|
|
|
|
blockStrategyRecordOptions,
|
|
|
|
workflowTriggerTypeOptions as triggerTypeOptions,
|
|
|
|
workFlowNodeStatusOptions
|
|
|
|
} from '@/constants/business';
|
2024-06-18 17:05:56 +08:00
|
|
|
import { $t } from '@/locales';
|
2024-12-12 17:18:57 +08:00
|
|
|
import { fetchGetAllGroupNameList, fetchGetNotifyConfigSystemTaskTypeList } from '@/service/api';
|
2024-07-02 15:51:17 +08:00
|
|
|
import { isNotNull, parseContent, stringToContent } from '@/utils/common';
|
2024-06-18 17:05:56 +08:00
|
|
|
import { useWorkflowStore } from '@/store/modules/workflow';
|
|
|
|
import EditableInput from '@/components/common/editable-input.vue';
|
2024-05-15 14:43:28 +08:00
|
|
|
|
|
|
|
defineOptions({
|
2024-05-25 14:15:59 +08:00
|
|
|
name: 'StartDrawer'
|
2024-05-15 14:43:28 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
interface Props {
|
2024-06-18 17:05:56 +08:00
|
|
|
modelValue?: Workflow.NodeDataType;
|
2024-05-15 14:43:28 +08:00
|
|
|
open?: boolean;
|
|
|
|
}
|
|
|
|
|
2024-12-12 17:18:57 +08:00
|
|
|
const notifyNameList = ref<CommonType.Option<number>[]>([]);
|
2024-05-15 14:43:28 +08:00
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
|
|
open: false,
|
2024-07-02 15:51:17 +08:00
|
|
|
modelValue: () => ({
|
|
|
|
wfContexts: []
|
|
|
|
})
|
2024-05-15 14:43:28 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
interface Emits {
|
|
|
|
(e: 'update:open', open: boolean): void;
|
2024-06-18 17:05:56 +08:00
|
|
|
(e: 'save', form: Workflow.NodeDataType): void;
|
2024-05-15 14:43:28 +08:00
|
|
|
}
|
|
|
|
|
2024-12-12 17:18:57 +08:00
|
|
|
onMounted(() => {
|
|
|
|
nextTick(() => {
|
|
|
|
getNotifyConfigSystemTaskTypeList();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
async function getNotifyConfigSystemTaskTypeList() {
|
|
|
|
const res = await fetchGetNotifyConfigSystemTaskTypeList(4);
|
|
|
|
notifyNameList.value = res.data as CommonType.Option<number>[];
|
|
|
|
}
|
2024-05-15 14:43:28 +08:00
|
|
|
const emit = defineEmits<Emits>();
|
|
|
|
|
2024-06-18 17:05:56 +08:00
|
|
|
const store = useWorkflowStore();
|
2024-05-15 14:43:28 +08:00
|
|
|
|
|
|
|
let title: string = '';
|
|
|
|
const drawer = ref<boolean>(false);
|
2024-07-02 15:51:17 +08:00
|
|
|
const form = ref<Workflow.NodeDataType>({
|
|
|
|
wfContexts: []
|
|
|
|
});
|
2024-05-15 14:43:28 +08:00
|
|
|
const groupNameList = ref<string[]>([]);
|
|
|
|
|
|
|
|
watch(
|
|
|
|
() => props.open,
|
|
|
|
val => {
|
|
|
|
drawer.value = val;
|
|
|
|
},
|
|
|
|
{ immediate: true }
|
|
|
|
);
|
|
|
|
|
|
|
|
watch(
|
|
|
|
() => props.modelValue,
|
|
|
|
val => {
|
|
|
|
form.value = val;
|
2024-05-25 14:15:59 +08:00
|
|
|
if (val.triggerType === 2) {
|
|
|
|
form.value.triggerInterval = Number(val.triggerInterval);
|
|
|
|
}
|
2024-05-15 14:43:28 +08:00
|
|
|
if (val.workflowName) {
|
|
|
|
title = val.workflowName;
|
|
|
|
} else if (val.groupName) {
|
|
|
|
title = val.groupName;
|
|
|
|
} else {
|
|
|
|
title = '请选择组';
|
|
|
|
}
|
2024-06-27 17:56:23 +08:00
|
|
|
if (val.wfContext) {
|
2024-07-02 15:51:17 +08:00
|
|
|
form.value.wfContext = JSON.parse(val.wfContext);
|
|
|
|
form.value.wfContexts = stringToContent(val.wfContext);
|
2024-06-27 17:56:23 +08:00
|
|
|
}
|
2024-05-15 14:43:28 +08:00
|
|
|
},
|
2024-06-27 17:56:23 +08:00
|
|
|
{ immediate: true }
|
2024-05-15 14:43:28 +08:00
|
|
|
);
|
|
|
|
|
|
|
|
const formRef = ref<FormInst>();
|
|
|
|
|
|
|
|
const close = () => {
|
|
|
|
emit('update:open', false);
|
|
|
|
drawer.value = false;
|
|
|
|
};
|
|
|
|
|
|
|
|
const save = () => {
|
|
|
|
formRef.value
|
2024-05-30 15:37:56 +08:00
|
|
|
?.validate(errors => {
|
|
|
|
if (!errors) {
|
2024-07-02 15:51:17 +08:00
|
|
|
form.value.wfContext = JSON.stringify(parseContent(form.value.wfContexts) || {});
|
2024-05-30 15:37:56 +08:00
|
|
|
close();
|
|
|
|
emit('save', form.value);
|
|
|
|
}
|
2024-05-15 14:43:28 +08:00
|
|
|
})
|
2024-05-30 15:37:56 +08:00
|
|
|
.catch(() => window.$message?.warning('请检查表单信息'));
|
2024-05-15 14:43:28 +08:00
|
|
|
};
|
|
|
|
|
|
|
|
const getGroupNameList = async () => {
|
2024-06-18 17:05:56 +08:00
|
|
|
const { data, error } = await fetchGetAllGroupNameList();
|
2024-05-15 14:43:28 +08:00
|
|
|
if (!error) {
|
|
|
|
groupNameList.value = data;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
getGroupNameList();
|
|
|
|
|
|
|
|
const typeChange = (value: number) => {
|
2024-06-03 19:56:24 +08:00
|
|
|
if (value === 3) {
|
2024-05-15 14:43:28 +08:00
|
|
|
form.value.triggerInterval = '* * * * * ?';
|
|
|
|
} else if (value === 2) {
|
2024-05-25 14:15:59 +08:00
|
|
|
form.value.triggerInterval = 60;
|
2024-05-15 14:43:28 +08:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
type Model = Pick<
|
2024-06-18 17:05:56 +08:00
|
|
|
Workflow.NodeDataType,
|
2024-05-15 14:43:28 +08:00
|
|
|
'groupName' | 'triggerType' | 'triggerInterval' | 'executorTimeout' | 'blockStrategy' | 'workflowStatus'
|
|
|
|
>;
|
|
|
|
|
|
|
|
type RuleKey = keyof Model;
|
|
|
|
|
|
|
|
const rules: Record<RuleKey, FormItemRule> = {
|
|
|
|
groupName: { required: true, message: '请选择组' },
|
|
|
|
triggerType: { required: true, message: '请选择触发类型' },
|
|
|
|
triggerInterval: { required: true, message: '请输入触发间隔' },
|
|
|
|
executorTimeout: { required: true, message: '请输入执行超时时间' },
|
|
|
|
blockStrategy: { required: true, message: '请选择阻塞策略' },
|
|
|
|
workflowStatus: { required: true, message: '请选择工作流状态' }
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<NDrawer v-model:show="drawer" display-directive="if" :width="610" @after-leave="close">
|
|
|
|
<NDrawerContent :title="title">
|
2024-05-25 14:15:59 +08:00
|
|
|
<template #header>
|
|
|
|
<EditableInput v-model="form.workflowName" class="max-w-570px min-w-570px" />
|
|
|
|
</template>
|
2024-05-15 14:43:28 +08:00
|
|
|
<NForm ref="formRef" :model="form" :rules="rules" label-align="left" label-width="100px">
|
|
|
|
<NFormItem path="groupName" label="组名称">
|
|
|
|
<NSelect
|
|
|
|
v-model:value="form.groupName"
|
|
|
|
placeholder="请选择组"
|
|
|
|
:disabled="store.type === 0 && isNotNull(store.id)"
|
|
|
|
:options="
|
|
|
|
groupNameList.map(groupName => {
|
|
|
|
return {
|
|
|
|
label: groupName,
|
|
|
|
value: groupName
|
|
|
|
};
|
|
|
|
})
|
|
|
|
"
|
2024-05-20 17:10:58 +08:00
|
|
|
/>
|
2024-05-15 14:43:28 +08:00
|
|
|
</NFormItem>
|
2024-05-20 17:10:58 +08:00
|
|
|
<NGrid :cols="24" x-gap="20">
|
2024-05-15 14:43:28 +08:00
|
|
|
<NGi :span="8">
|
|
|
|
<NFormItem path="triggerType" label="触发类型">
|
|
|
|
<NSelect
|
|
|
|
v-model:value="form.triggerType"
|
|
|
|
placeholder="请选择触发类型"
|
2024-05-30 15:37:56 +08:00
|
|
|
:options="
|
|
|
|
triggerTypeOptions.map(option => {
|
|
|
|
return {
|
|
|
|
label: $t(option.label),
|
|
|
|
value: option.value
|
|
|
|
};
|
|
|
|
})
|
|
|
|
"
|
2024-05-15 14:43:28 +08:00
|
|
|
@update:value="typeChange"
|
|
|
|
/>
|
|
|
|
</NFormItem>
|
|
|
|
</NGi>
|
|
|
|
<NGi :span="16">
|
|
|
|
<NFormItem path="triggerInterval" label="触发间隔">
|
|
|
|
<CronInput
|
|
|
|
v-if="form.triggerType === 3"
|
2024-06-03 19:56:24 +08:00
|
|
|
v-model="form.triggerInterval as string"
|
2024-05-15 14:43:28 +08:00
|
|
|
placeholder="请输入Cron表达式"
|
|
|
|
/>
|
2024-05-20 17:10:58 +08:00
|
|
|
<NInputNumber
|
|
|
|
v-else
|
|
|
|
v-model:value="form.triggerInterval as number"
|
2024-06-20 10:56:55 +08:00
|
|
|
:min="1"
|
2024-05-20 17:10:58 +08:00
|
|
|
class="w-full"
|
|
|
|
placeholder="请输入触发间隔"
|
|
|
|
>
|
2024-05-15 14:43:28 +08:00
|
|
|
<template #suffix>秒</template>
|
|
|
|
</NInputNumber>
|
|
|
|
</NFormItem>
|
|
|
|
</NGi>
|
|
|
|
</NGrid>
|
2024-05-20 17:10:58 +08:00
|
|
|
<NGrid :cols="24" x-gap="20">
|
2024-05-15 14:43:28 +08:00
|
|
|
<NGi :span="8">
|
|
|
|
<NFormItem path="executorTimeout" label="执行超时时间">
|
2024-06-20 10:56:55 +08:00
|
|
|
<NInputNumber v-model:value="form.executorTimeout" placeholder="请输入超时时间" :min="1">
|
2024-05-15 14:43:28 +08:00
|
|
|
<template #suffix>秒</template>
|
|
|
|
</NInputNumber>
|
|
|
|
</NFormItem>
|
|
|
|
</NGi>
|
|
|
|
<NGi :span="16">
|
|
|
|
<NFormItem path="blockStrategy" label="阻塞策略">
|
2024-05-20 17:10:58 +08:00
|
|
|
<NRadioGroup v-model:value="form.blockStrategy">
|
|
|
|
<NSpace>
|
|
|
|
<NRadio
|
2024-06-18 17:05:56 +08:00
|
|
|
v-for="(options, index) in blockStrategyRecordOptions"
|
2024-05-25 14:15:59 +08:00
|
|
|
:key="index"
|
2024-05-20 17:10:58 +08:00
|
|
|
:label="$t(options.label)"
|
|
|
|
:value="options.value"
|
|
|
|
/>
|
|
|
|
</NSpace>
|
|
|
|
</NRadioGroup>
|
2024-05-15 14:43:28 +08:00
|
|
|
</NFormItem>
|
|
|
|
</NGi>
|
|
|
|
</NGrid>
|
2024-07-05 14:51:41 +08:00
|
|
|
<NFormItem path="wfContext" label="工作流上下文" :show-feedback="false">
|
2024-07-02 15:51:17 +08:00
|
|
|
<DynamicInput v-model:value="form.wfContexts!" path="wfContexts" />
|
2024-06-27 17:56:23 +08:00
|
|
|
</NFormItem>
|
2024-05-15 14:43:28 +08:00
|
|
|
<NFormItem path="workflowStatus" label="节点状态">
|
2024-05-20 17:10:58 +08:00
|
|
|
<NRadioGroup v-model:value="form.workflowStatus">
|
|
|
|
<NSpace>
|
|
|
|
<NRadio
|
2024-05-25 14:15:59 +08:00
|
|
|
v-for="(options, index) in workFlowNodeStatusOptions"
|
|
|
|
:key="index"
|
2024-05-20 17:10:58 +08:00
|
|
|
:label="$t(options.label)"
|
|
|
|
:value="options.value"
|
|
|
|
/>
|
|
|
|
</NSpace>
|
|
|
|
</NRadioGroup>
|
2024-05-15 14:43:28 +08:00
|
|
|
</NFormItem>
|
2024-12-27 23:28:52 +08:00
|
|
|
<NFormItem path="notifyIds" label="告警通知">
|
2024-12-12 17:18:57 +08:00
|
|
|
<NSelect
|
|
|
|
v-model:value="form.notifyIds"
|
|
|
|
value-field="id"
|
|
|
|
label-field="notifyName"
|
|
|
|
placeholder="请选择告警通知名称"
|
|
|
|
:options="notifyNameList"
|
|
|
|
clearable
|
|
|
|
multiple
|
|
|
|
/>
|
|
|
|
</NFormItem>
|
2024-05-15 14:43:28 +08:00
|
|
|
<NFormItem path="description" label="描述">
|
|
|
|
<NInput
|
|
|
|
v-model:value="form.description"
|
|
|
|
type="textarea"
|
|
|
|
:autosize="{ minRows: 5 }"
|
|
|
|
placeholder="请输入描述"
|
|
|
|
/>
|
|
|
|
</NFormItem>
|
|
|
|
</NForm>
|
|
|
|
|
|
|
|
<template #footer>
|
|
|
|
<NButton type="primary" @click="save">保存</NButton>
|
|
|
|
<NButton class="ml-12px" @click="close">取消</NButton>
|
|
|
|
</template>
|
|
|
|
</NDrawerContent>
|
|
|
|
</NDrawer>
|
|
|
|
</template>
|