gtsoft-snail-job-admin/src/components/workflow/modules/drawer/start-drawer.vue

267 lines
8.0 KiB
Vue
Raw Normal View History

2024-05-15 14:43:28 +08:00
<script setup lang="ts">
import { nextTick, onMounted, ref, watch } from 'vue';
2024-05-15 14:43:28 +08:00
import CronInput from '@sa/cron-input';
import { type FormInst, type FormItemRule } from 'naive-ui';
import {
blockStrategyRecordOptions,
workflowTriggerTypeOptions as triggerTypeOptions,
workFlowNodeStatusOptions
} from '@/constants/business';
import { $t } from '@/locales';
import { fetchGetAllGroupNameList, fetchGetNotifyConfigSystemTaskTypeList } from '@/service/api';
import { isNotNull, parseContent, stringToContent } from '@/utils/common';
import { useWorkflowStore } from '@/store/modules/workflow';
import EditableInput from '@/components/common/editable-input.vue';
2024-05-15 14:43:28 +08:00
defineOptions({
name: 'StartDrawer'
2024-05-15 14:43:28 +08:00
});
interface Props {
modelValue?: Workflow.NodeDataType;
2024-05-15 14:43:28 +08:00
open?: boolean;
}
const notifyNameList = ref<CommonType.Option<number>[]>([]);
2024-05-15 14:43:28 +08:00
const props = withDefaults(defineProps<Props>(), {
open: false,
modelValue: () => ({
wfContexts: []
})
2024-05-15 14:43:28 +08:00
});
interface Emits {
(e: 'update:open', open: boolean): void;
(e: 'save', form: Workflow.NodeDataType): void;
2024-05-15 14:43:28 +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>();
const store = useWorkflowStore();
2024-05-15 14:43:28 +08:00
let title: string = '';
const drawer = ref<boolean>(false);
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;
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 = '请选择组';
}
if (val.wfContext) {
form.value.wfContext = JSON.parse(val.wfContext);
form.value.wfContexts = stringToContent(val.wfContext);
}
2024-05-15 14:43:28 +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
?.validate(errors => {
if (!errors) {
form.value.wfContext = JSON.stringify(parseContent(form.value.wfContexts) || {});
close();
emit('save', form.value);
}
2024-05-15 14:43:28 +08:00
})
.catch(() => window.$message?.warning('请检查表单信息'));
2024-05-15 14:43:28 +08:00
};
const getGroupNameList = async () => {
const { data, error } = await fetchGetAllGroupNameList();
2024-05-15 14:43:28 +08:00
if (!error) {
groupNameList.value = data;
}
};
getGroupNameList();
const typeChange = (value: number) => {
if (value === 3) {
2024-05-15 14:43:28 +08:00
form.value.triggerInterval = '* * * * * ?';
} else if (value === 2) {
form.value.triggerInterval = 60;
2024-05-15 14:43:28 +08:00
}
};
type Model = Pick<
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">
<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-15 14:43:28 +08:00
</NFormItem>
<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="请选择触发类型"
: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"
v-model="form.triggerInterval as string"
2024-05-15 14:43:28 +08:00
placeholder="请输入Cron表达式"
/>
<NInputNumber
v-else
v-model:value="form.triggerInterval as number"
:min="1"
class="w-full"
placeholder="请输入触发间隔"
>
2024-05-15 14:43:28 +08:00
<template #suffix></template>
</NInputNumber>
</NFormItem>
</NGi>
</NGrid>
<NGrid :cols="24" x-gap="20">
2024-05-15 14:43:28 +08:00
<NGi :span="8">
<NFormItem path="executorTimeout" label="执行超时时间">
<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="阻塞策略">
<NRadioGroup v-model:value="form.blockStrategy">
<NSpace>
<NRadio
v-for="(options, index) in blockStrategyRecordOptions"
:key="index"
:label="$t(options.label)"
:value="options.value"
/>
</NSpace>
</NRadioGroup>
2024-05-15 14:43:28 +08:00
</NFormItem>
</NGi>
</NGrid>
<NFormItem path="wfContext" label="工作流上下文" :show-feedback="false">
<DynamicInput v-model:value="form.wfContexts!" path="wfContexts" />
</NFormItem>
2024-05-15 14:43:28 +08:00
<NFormItem path="workflowStatus" label="节点状态">
<NRadioGroup v-model:value="form.workflowStatus">
<NSpace>
<NRadio
v-for="(options, index) in workFlowNodeStatusOptions"
:key="index"
:label="$t(options.label)"
:value="options.value"
/>
</NSpace>
</NRadioGroup>
2024-05-15 14:43:28 +08:00
</NFormItem>
<NFormItem path="notifyIds" label="告警通知">
<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>