126 lines
3.5 KiB
Vue
126 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch } from 'vue';
|
|
import type { FormInst, FormRules } from 'naive-ui';
|
|
import { $t } from '../locales';
|
|
import EditableInput from '../common/editable-input.vue';
|
|
import { contentTypeOptions, workFlowNodeStatusOptions } from '../constants/business';
|
|
|
|
defineOptions({
|
|
name: 'CallbackDrawer'
|
|
});
|
|
|
|
interface Props {
|
|
modelValue?: Flow.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: Flow.ConditionNodeType): void;
|
|
}
|
|
|
|
const emit = defineEmits<Emits>();
|
|
|
|
const drawer = ref<boolean>(false);
|
|
const form = ref<Flow.ConditionNodeType>({});
|
|
|
|
watch(
|
|
() => props.open,
|
|
val => {
|
|
drawer.value = val;
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
|
|
watch(
|
|
() => props.modelValue,
|
|
val => {
|
|
form.value = val;
|
|
},
|
|
{ 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 rules: FormRules = {
|
|
workflowNodeStatus: [{ required: true, message: '请选择工作流状态', trigger: 'change' }],
|
|
callback: {
|
|
webhook: [{ required: true, message: '请输入 webhook', trigger: 'change' }],
|
|
contentType: [{ required: true, message: '请选择请求类型', trigger: 'change', type: 'number' }],
|
|
secret: [{ required: true, message: '请输入秘钥', trigger: 'change' }]
|
|
}
|
|
};
|
|
</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" />
|
|
</div>
|
|
</template>
|
|
|
|
<NForm ref="formRef" :model="form" :rules="rules" label-align="left" label-width="100px">
|
|
<NFormItem path="callback.webhook" label="webhook">
|
|
<NInput v-model:value="form.callback!.webhook" placeholder="请输入 webhook" />
|
|
</NFormItem>
|
|
<NFormItem path="callback.contentType" label="请求类型">
|
|
<NSelect
|
|
v-model:value="form.callback!.contentType"
|
|
:options="contentTypeOptions"
|
|
placeholder="请选择请求类型"
|
|
/>
|
|
</NFormItem>
|
|
<NFormItem path="callback.secret" label="秘钥">
|
|
<NInput v-model:value="form.callback!.secret" placeholder="请输入秘钥" />
|
|
</NFormItem>
|
|
<NFormItem
|
|
name="workflowNodeStatus"
|
|
label="工作流状态"
|
|
:rules="[{ required: true, message: '请选择工作流状态', trigger: 'change' }]"
|
|
>
|
|
<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>
|