142 lines
3.9 KiB
Vue
142 lines
3.9 KiB
Vue
<!--
|
||
* 文件说明：节点参数抽屉，统一触发参数校验和保存。
|
||
* 作用范围：仅服务于流程设计器模块。
|
||
-->
|
||
<template>
|
||
<el-drawer
|
||
:model-value="props.drawer"
|
||
custom-class="flow-params-drawer"
|
||
:title="props.data.properties?.name || '参数配置'"
|
||
class="flow-params-drawer"
|
||
:size="drawerSize"
|
||
append-to-body
|
||
destroy-on-close
|
||
:close-on-click-modal="false"
|
||
:before-close="confirmSave"
|
||
>
|
||
<component
|
||
:is="currentComponent"
|
||
ref="paramsComponentRef"
|
||
:data="props.data"
|
||
@save-success="handleSaveSuccess"
|
||
@save-error="handleSaveError"
|
||
/>
|
||
</el-drawer>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from 'vue'
|
||
import { emitter } from '@/utils/eventBus'
|
||
|
||
// 导入各子组件
|
||
import StartParams from './params/StartParams.vue'
|
||
import BasicNodeParams from './params/BasicNodeParams.vue'
|
||
import CodeNodeParams from './params/CodeNodeParams.vue'
|
||
import HttpNodeParams from './params/HttpNodeParams.vue'
|
||
import SdAgentNodeParams from './params/SdAgentNodeParams.vue'
|
||
import RecognizeNodeParams from './params/RecognizeNodeParams.vue'
|
||
import DeviceUniversal from './params/DeviceUniversal.vue'
|
||
import SwitchNodeParams from './params/SwitchNodeParams.vue'
|
||
|
||
const props = defineProps({
|
||
drawer: Boolean,
|
||
data: Object
|
||
})
|
||
|
||
const emits = defineEmits(['close'])
|
||
const paramsComponentRef = ref(null)
|
||
|
||
/**
|
||
* 分支条件包含左值、运算符和右值三列，仅为分支节点提供更宽的编辑空间。
|
||
*/
|
||
const drawerSize = computed(() => (
|
||
props.data?.type === 'branch' ? 'min(920px, 96vw)' : 'min(560px, 92vw)'
|
||
))
|
||
|
||
// 根据节点类型决定渲染哪个子组件
|
||
const currentComponent = computed(() => {
|
||
const type = props.data?.type
|
||
if (type === 'start') return StartParams
|
||
if (['currentLoop', 'serviceNode', 'sleep', 'loop'].includes(type)) return BasicNodeParams
|
||
if (type === 'code') return CodeNodeParams
|
||
if (type === 'http') return HttpNodeParams
|
||
if (type === 'sdAgent') return SdAgentNodeParams
|
||
if (type === 'recognize') return RecognizeNodeParams
|
||
if (type === 'deviceUniversal') return DeviceUniversal
|
||
if (type === 'branch') return SwitchNodeParams
|
||
return null
|
||
})
|
||
|
||
// 这里提供一个公开方法供父组件调用
|
||
/**
|
||
* 确认 confirmSave 对应的数据或交互；作用范围仅限当前组件或模块。
|
||
*/
|
||
const confirmSave = async () => {
|
||
if (paramsComponentRef.value && typeof paramsComponentRef.value.validateAndSave === 'function') {
|
||
await paramsComponentRef.value.validateAndSave()
|
||
} else {
|
||
emits('close')
|
||
}
|
||
}
|
||
|
||
// 暴露给父组件使用
|
||
defineExpose({ confirmSave })
|
||
|
||
// 保存成功 / 失败处理
|
||
/**
|
||
* 处理 handleSaveSuccess 对应的数据或交互；作用范围仅限当前组件或模块。
|
||
*/
|
||
const handleSaveSuccess = () => {
|
||
emitter.emit('setProperties', { id: props.data.id })
|
||
emitter.emit("throwAnError", { id: props.data.id, hasError: false, type: props.data.type });
|
||
// 无错误，关闭抽屉
|
||
emits('close')
|
||
}
|
||
|
||
/**
|
||
* 处理 handleSaveError 对应的数据或交互；作用范围仅限当前组件或模块。
|
||
*/
|
||
const handleSaveError = () => {
|
||
emitter.emit('setProperties', { id: props.data.id })
|
||
emitter.emit("throwAnError", { id: props.data.id, hasError: true, type: props.data.type });
|
||
emits('close')
|
||
}
|
||
|
||
// 组件卸载时清理事件监听
|
||
// 注意：emitter.off 应在各子组件中自行清理，父组件不再重复
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.flow-params-drawer {
|
||
.el-drawer__header {
|
||
min-height: 62px;
|
||
margin-bottom: 0 !important;
|
||
padding: 0 20px;
|
||
border-bottom: 1px solid #e4e8ef;
|
||
color: #1f2937;
|
||
font-size: 16px;
|
||
font-weight: 650;
|
||
}
|
||
|
||
.el-drawer__body {
|
||
padding: 0 20px 24px;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.el-collapse {
|
||
border-top: 0;
|
||
}
|
||
|
||
.el-collapse-item__header {
|
||
height: 50px;
|
||
color: #344054;
|
||
font-size: 13px;
|
||
font-weight: 650;
|
||
}
|
||
|
||
.form__container {
|
||
padding: 4px 0 10px;
|
||
}
|
||
}
|
||
</style>
|