gtsoft-snail-job-admin/packages/work-flow/src/drawer/start-drawer.vue

228 lines
6.6 KiB
Vue

<script setup lang="ts">
import { ref, watch } from 'vue';
import CronInput from '@sa/cron-input';
import { type FormInst, type FormItemRule } from 'naive-ui';
import { blockStrategyOptions, triggerTypeOptions, workFlowNodeStatusOptions } from '../constants/business';
import { $t } from '../locales';
import { fetchGroupNameList } from '../api';
import { isNotNull } from '../utils/common';
import { useFlowStore } from '../stores';
import EditableInput from '../common/editable-input.vue';
defineOptions({
name: 'StartDrawer'
});
interface Props {
modelValue?: Flow.NodeDataType;
open?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
open: false,
modelValue: () => ({})
});
interface Emits {
(e: 'update:open', open: boolean): void;
(e: 'save', form: Flow.NodeDataType): void;
}
const emit = defineEmits<Emits>();
const store = useFlowStore();
let title: string = '';
const drawer = ref<boolean>(false);
const form = ref<Flow.NodeDataType>({});
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);
}
if (val.workflowName) {
title = val.workflowName;
} else if (val.groupName) {
title = val.groupName;
} else {
title = '请选择组';
}
},
{ immediate: true, deep: true }
);
const formRef = ref<FormInst>();
const close = () => {
emit('update:open', false);
drawer.value = false;
};
const save = () => {
formRef.value
?.validate(errors => {
if (!errors) {
close();
emit('save', form.value);
}
})
.catch(() => window.$message?.warning('请检查表单信息'));
};
const getGroupNameList = async () => {
const { data, error } = await fetchGroupNameList();
if (!error) {
groupNameList.value = data;
}
};
getGroupNameList();
const typeChange = (value: number) => {
if (value === 3) {
form.value.triggerInterval = '* * * * * ?';
} else if (value === 2) {
form.value.triggerInterval = 60;
}
};
type Model = Pick<
Flow.NodeDataType,
'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>
<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
};
})
"
/>
</NFormItem>
<NGrid :cols="24" x-gap="20">
<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
};
})
"
@update:value="typeChange"
/>
</NFormItem>
</NGi>
<NGi :span="16">
<NFormItem path="triggerInterval" label="触发间隔">
<CronInput
v-if="form.triggerType === 3"
v-model="form.triggerInterval as string"
placeholder="请输入Cron表达式"
/>
<NInputNumber
v-else
v-model:value="form.triggerInterval as number"
class="w-full"
placeholder="请输入触发间隔"
>
<template #suffix>秒</template>
</NInputNumber>
</NFormItem>
</NGi>
</NGrid>
<NGrid :cols="24" x-gap="20">
<NGi :span="8">
<NFormItem path="executorTimeout" label="执行超时时间">
<NInputNumber v-model:value="form.executorTimeout" placeholder="请输入超时时间">
<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 blockStrategyOptions"
:key="index"
:label="$t(options.label)"
:value="options.value"
/>
</NSpace>
</NRadioGroup>
</NFormItem>
</NGi>
</NGrid>
<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>
</NFormItem>
<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>