|
|
@@ -15,11 +15,11 @@
|
|
|
<div class="ep-node-error-msg" v-if="isError">
|
|
|
<div class="ep-node-error-msg-box">
|
|
|
<icon icon="svg:tips" :width="23" height="23" color="red" @mouseenter="showErrorTips(true)" @mouseleave="showErrorTips(false)" />
|
|
|
- <div class="ep-node-error-tips" v-if="errorTips && errorMsg">{{ errorMsg }}</div>
|
|
|
+ <div class="ep-node-error-tips" v-if="errorTips">{{ errorMessage }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <AddNode :node="props.node" />
|
|
|
+ <NodeAdd :node="props.node" />
|
|
|
|
|
|
<!-- 节点配置Drawer -->
|
|
|
<BaseDrawer ref="nodeDrawer" @updateConfig="updateConfig" @cancelUpdateConfig="cancelUpdateConfig" />
|
|
|
@@ -27,89 +27,73 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts" name="BaseNode">
|
|
|
- import BaseDrawer from './BaseDrawer.vue'
|
|
|
- import AddNode from './node_add.vue'
|
|
|
import { ref, shallowRef, onMounted, getCurrentInstance, defineAsyncComponent, watch, computed, onUnmounted, inject } from 'vue'
|
|
|
- import { nodeConfigData } from '../../common/data'
|
|
|
+ import BaseDrawer from './BaseDrawer.vue'
|
|
|
+ import NodeAdd from './node_add.vue'
|
|
|
+ import { nodeConfigData, ProcessConstant } from '../../common/process.data'
|
|
|
import { getUUID } from '../../common/common.util'
|
|
|
- import { KEY_VALIDATOR } from '../../config/keys'
|
|
|
-
|
|
|
- const props = defineProps({
|
|
|
- node: {
|
|
|
- // 传入的流程节点数据
|
|
|
- type: Object,
|
|
|
- default: () => {}
|
|
|
- },
|
|
|
- conditionNodes: {
|
|
|
- // 条件集合,当节点类型为condition时有效
|
|
|
- type: Array,
|
|
|
- default: () => []
|
|
|
- },
|
|
|
- conditionIndex: {
|
|
|
- // 当前条件节点的顺序,当节点类型为condition时有效
|
|
|
- type: Number,
|
|
|
- default: 0
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- const { proxy } = getCurrentInstance()
|
|
|
-
|
|
|
- // 生成临时节点ID
|
|
|
- const tempNodeId = getUUID()
|
|
|
+ import { EasyProcess } from '../../common/process.type'
|
|
|
+ import { Validator } from '../../common/validator.util'
|
|
|
+
|
|
|
+ const props = withDefaults(
|
|
|
+ defineProps<{
|
|
|
+ node: EasyProcess.NodeConfig
|
|
|
+ }>(),
|
|
|
+ {}
|
|
|
+ )
|
|
|
|
|
|
// 节点配置数据
|
|
|
const config = ref(nodeConfigData[props.node.nodeType])
|
|
|
-
|
|
|
- // 获取流程验证器实例
|
|
|
- const validator = inject(KEY_VALIDATOR)
|
|
|
- const errorMsg = ref(null)
|
|
|
- const errorTips = ref(false)
|
|
|
+ const isStart = computed(() => props.node.nodeType == 'start')
|
|
|
+ const validator = inject<Validator>(ProcessConstant.KEY_VALIDATOR)
|
|
|
|
|
|
watch(
|
|
|
() => props.node,
|
|
|
() => {
|
|
|
config.value = nodeConfigData[props.node.nodeType]
|
|
|
- validator.validate()
|
|
|
+ validator?.validate()
|
|
|
}
|
|
|
)
|
|
|
-
|
|
|
- const modules = import.meta.glob('../*/*Node.vue')
|
|
|
- const nodeComponents = shallowRef({})
|
|
|
-
|
|
|
- Object.keys(nodeConfigData).forEach((key) => {
|
|
|
- let component = defineAsyncComponent(modules[`../${key}/${key}Node.vue`])
|
|
|
- nodeComponents.value[key] = component
|
|
|
- })
|
|
|
-
|
|
|
- onMounted(async () => {})
|
|
|
-
|
|
|
- onUnmounted(async () => {
|
|
|
- validator.remove(tempNodeId)
|
|
|
- validator.validate()
|
|
|
- })
|
|
|
-
|
|
|
- const isStart = computed(() => {
|
|
|
- return props.node.nodeType == 'start'
|
|
|
+ // ---------- 节点数据校验 ---------- start
|
|
|
+ const errorTips = ref<boolean>(false)
|
|
|
+ const showErrorTips = (flag: boolean) => (errorTips.value = flag)
|
|
|
+ const errorMessage = computed<string>(() => {
|
|
|
+ let result = validator?.getResult(tempNodeId)
|
|
|
+ return result ? (result.message ?? '') : ''
|
|
|
})
|
|
|
-
|
|
|
- // 节点验证结果是否异常
|
|
|
- const isError = computed(() => {
|
|
|
- let result = validator.getResult(tempNodeId)
|
|
|
- if (result) {
|
|
|
- errorMsg.value = result.message
|
|
|
- return !result.valid
|
|
|
- }
|
|
|
- errorMsg.value = null
|
|
|
- return false
|
|
|
+ const isError = computed<boolean>(() => {
|
|
|
+ let result = validator?.getResult(tempNodeId)
|
|
|
+ return result ? !result.valid : false
|
|
|
})
|
|
|
+ // ---------- 节点数据校验 --------- end
|
|
|
|
|
|
// 节点是否可以被移除
|
|
|
const canRemoved = computed(() => {
|
|
|
- if (isLastCondition()) {
|
|
|
- return false
|
|
|
- }
|
|
|
+ if (isLastCondition.value) return false
|
|
|
return config.value.canRemoved
|
|
|
})
|
|
|
+ // 是否是最后一个条件节点
|
|
|
+ const isLastCondition = computed<boolean>(() => {
|
|
|
+ return props.node.nodeType == 'condition' && props.node.isLastCondition
|
|
|
+ })
|
|
|
+
|
|
|
+ const { proxy } = getCurrentInstance()
|
|
|
+
|
|
|
+ // 生成临时节点ID
|
|
|
+ const tempNodeId = getUUID()
|
|
|
+
|
|
|
+ const modules = import.meta.glob('../*/*Node.vue')
|
|
|
+ const nodeComponents = shallowRef({})
|
|
|
+ onMounted(() => {
|
|
|
+ Object.keys(nodeConfigData).forEach((key) => {
|
|
|
+ let component = defineAsyncComponent(() => modules[`../${key}/${key}Node.vue`]() as Promise<{ default: Component }>)
|
|
|
+ nodeComponents.value = { ...nodeComponents.value, [key]: component }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ onUnmounted(async () => {
|
|
|
+ validator?.remove(tempNodeId)
|
|
|
+ validator?.validate()
|
|
|
+ })
|
|
|
|
|
|
// 显示节点配置组件
|
|
|
const showNodeDrawer = () => {
|
|
|
@@ -121,22 +105,6 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- // 判断当前节点是否为条件节点
|
|
|
- const isCondition = () => {
|
|
|
- if (props.node.nodeType == 'condition') {
|
|
|
- return true
|
|
|
- }
|
|
|
- return false
|
|
|
- }
|
|
|
-
|
|
|
- // 判断当前节点是否为条件节点,且为最后一个条件
|
|
|
- const isLastCondition = () => {
|
|
|
- if (isCondition() && props.node.isLastCondition) {
|
|
|
- return true
|
|
|
- }
|
|
|
- return false
|
|
|
- }
|
|
|
-
|
|
|
// 移除当前节点
|
|
|
const emit = defineEmits(['removeNode'])
|
|
|
const removeNode = () => {
|
|
|
@@ -144,18 +112,13 @@
|
|
|
}
|
|
|
|
|
|
// 更新节点配置属性
|
|
|
- const updateConfig = (data) => {
|
|
|
- props.node.config = data
|
|
|
- validator.validate()
|
|
|
+ const updateConfig = (data: EasyProcess.NodeConfig) => {
|
|
|
+ props.node = data
|
|
|
+ validator?.validate()
|
|
|
}
|
|
|
|
|
|
// 取消更新节点配置属性
|
|
|
- const cancelUpdateConfig = () => {
|
|
|
- validator.validate()
|
|
|
- }
|
|
|
-
|
|
|
- // 显示错误提示信息
|
|
|
- const showErrorTips = (flag: boolean) => (errorTips.value = flag)
|
|
|
+ const cancelUpdateConfig = () => validator?.validate()
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|