corrad-bp/components/process-flow/FormNodeConfigurationModal.vue
Afiq 0abb905477 Add Business Rule Node Configuration and Modals
- Introduced BusinessRuleNodeConfiguration and BusinessRuleNodeConfigurationModal components for configuring business rules within the process builder.
- Enhanced ProcessBuilderComponents to include the new Business Rule node type with default properties.
- Implemented BusinessRuleNode in ProcessFlowNodes for rendering business rule nodes with relevant details.
- Updated the process builder to support business rule configurations, allowing users to define conditions and actions visually.
- Improved overall user experience by refining the UI for business rule management and enhancing variable handling in the process builder.
2025-05-20 12:37:57 +08:00

72 lines
1.5 KiB
Vue

<template>
<RsModal
v-model="showModal"
title="Form Task Configuration"
size="lg"
position="center"
:okCallback="saveAndClose"
okTitle="Save"
:cancelCallback="closeModal"
>
<template #body>
<FormNodeConfiguration
:nodeData="nodeData"
:availableVariables="availableVariables"
@update="handleUpdate"
/>
</template>
</RsModal>
</template>
<script setup>
import { ref, watch } from 'vue';
import FormNodeConfiguration from './FormNodeConfiguration.vue';
const props = defineProps({
modelValue: {
type: Boolean,
default: false
},
nodeData: {
type: Object,
required: true
},
availableVariables: {
type: Array,
default: () => []
}
});
const emit = defineEmits(['update:modelValue', 'update']);
const showModal = ref(props.modelValue);
const localNodeData = ref({ ...props.nodeData });
// Watch for changes to modelValue prop to sync modal visibility
watch(() => props.modelValue, (value) => {
showModal.value = value;
});
// Watch for changes to showModal to emit update:modelValue
watch(() => showModal.value, (value) => {
emit('update:modelValue', value);
});
// Watch for changes to nodeData prop
watch(() => props.nodeData, (value) => {
localNodeData.value = { ...value };
}, { deep: true });
function handleUpdate(updatedData) {
localNodeData.value = { ...updatedData };
}
function saveAndClose() {
emit('update', localNodeData.value);
showModal.value = false;
}
function closeModal() {
showModal.value = false;
}
</script>