165 lines
4.3 KiB
Vue
165 lines
4.3 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch } from 'vue';
|
|
import { type FormInst } from 'naive-ui';
|
|
import { useWorkflowStore } from '@/store/modules/workflow';
|
|
import { $t } from '@/locales';
|
|
import { failStrategyOptions, workFlowNodeStatusOptions } from '@/constants/business';
|
|
import EditableInput from '@/components/common/editable-input.vue';
|
|
|
|
defineOptions({
|
|
name: 'WorkflowDrawer'
|
|
});
|
|
|
|
interface Props {
|
|
modelValue?: Workflow.ConditionNodeType;
|
|
open?: boolean;
|
|
len?: number;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
open: false,
|
|
len: 0,
|
|
modelValue: () => ({})
|
|
});
|
|
|
|
interface Emits {
|
|
(e: 'update:open', open: boolean): void;
|
|
(e: 'save', form: Workflow.ConditionNodeType): void;
|
|
}
|
|
|
|
const emit = defineEmits<Emits>();
|
|
|
|
const store = useWorkflowStore();
|
|
const drawer = ref<boolean>(false);
|
|
const form = ref<Workflow.ConditionNodeType>({});
|
|
const workflowList = ref<Pick<Api.Workflow.Workflow, 'id' | 'workflowName'>[]>([]);
|
|
|
|
watch(
|
|
() => store.workflowList,
|
|
val => {
|
|
workflowList.value = val;
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
|
|
watch(
|
|
() => props.open,
|
|
val => {
|
|
drawer.value = val;
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
|
|
watch(
|
|
() => props.modelValue,
|
|
val => {
|
|
form.value = val;
|
|
},
|
|
{ immediate: 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 rules = {
|
|
failStrategy: [{ required: true, message: '请选择失败策略' }],
|
|
workflowNodeStatus: [{ required: true, message: '请选择工作流状态' }],
|
|
subWorkflow: {
|
|
id: [{ required: true, message: '请选择' }]
|
|
}
|
|
};
|
|
|
|
const jobTaskChange = (_: string, option: { label: string; value: number }) => {
|
|
form.value.subWorkflow!.name = option.label;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<NDrawer v-model:show="drawer" display-directive="if" :width="500" @after-leave="close">
|
|
<NDrawerContent>
|
|
<template #header>
|
|
<div class="w-460px flex-center">
|
|
<EditableInput v-model="form.nodeName" class="mr-16px max-w-320px min-w-320px" />
|
|
|
|
<NSelect
|
|
v-model:value="form.priorityLevel"
|
|
class="max-w-110px"
|
|
:options="
|
|
Array(len)
|
|
.fill(0)
|
|
.map((_, index) => {
|
|
return {
|
|
label: '优先级 ' + (index + 1),
|
|
value: index + 1
|
|
};
|
|
})
|
|
"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<NForm ref="formRef" :model="form" :rules="rules" label-align="left" label-width="100px">
|
|
<NFormItem path="subWorkflow.id" label="调用工作流" placeholder="请选择工作流">
|
|
<NSelect
|
|
v-model:value="form.subWorkflow!.id"
|
|
filterable
|
|
:options="
|
|
workflowList.map(item => {
|
|
return {
|
|
label: item.workflowName,
|
|
value: item.id
|
|
};
|
|
})
|
|
"
|
|
@update:value="jobTaskChange"
|
|
/>
|
|
</NFormItem>
|
|
<NFormItem path="failStrategy" label="失败策略">
|
|
<NRadioGroup v-model:value="form.failStrategy">
|
|
<NSpace>
|
|
<NRadio
|
|
v-for="(options, index) in failStrategyOptions"
|
|
:key="index"
|
|
:label="$t(options.label)"
|
|
:value="options.value"
|
|
/>
|
|
</NSpace>
|
|
</NRadioGroup>
|
|
</NFormItem>
|
|
<NFormItem path="workflowNodeStatus" label="状态">
|
|
<NRadioGroup v-model:value="form.workflowNodeStatus">
|
|
<NSpace>
|
|
<NRadio
|
|
v-for="(options, index) in workFlowNodeStatusOptions"
|
|
:key="index"
|
|
:label="$t(options.label)"
|
|
:value="options.value"
|
|
/>
|
|
</NSpace>
|
|
</NRadioGroup>
|
|
</NFormItem>
|
|
</NForm>
|
|
|
|
<template #footer>
|
|
<NButton type="primary" @click="save">保存</NButton>
|
|
<NButton class="ml-12px" @click="close">取消</NButton>
|
|
</template>
|
|
</NDrawerContent>
|
|
</NDrawer>
|
|
</template>
|