yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

仿钉钉流程设计器- 完善条件分支节点

pull/452/head
jason 2024-04-30 00:10:17 +08:00
parent 9a2dcf2004
commit e8193a0aa0
7 changed files with 123 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
View File

@ -100,7 +100,7 @@ const addNode = (type: number) => {
childNode: undefined,
attributes: {
conditionType: 1,
defaultCondition: false
defaultFlow: false
}
},
{
@ -111,7 +111,7 @@ const addNode = (type: number) => {
childNode: undefined,
attributes: {
conditionType: undefined,
defaultCondition: true
defaultFlow: true
}
}
]

3
src/components/SimpleProcessDesignerV2/src/consts.ts
View File

@ -115,6 +115,5 @@ export const APPROVE_METHODS: DictDataVO [] = [
]
export const CONDITION_CONFIG_TYPES: DictDataVO [] = [
{ label: '条件规则', value: 1 },
{ label: '条件表达式', value: 2 }
{ label: '自定义条件表达式', value: 1 }
]

18
src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
View File

@ -13,10 +13,10 @@
</div>
</template>
<div>
<div class="mb-3 text-size-sm" v-if="currentNode.attributes.defaultCondition">其它条件不满足进入此分支（该分支不可编辑和删除）</div>
<div class="mb-3 text-size-sm" v-if="currentNode.attributes.defaultFlow">其它条件不满足进入此分支（该分支不可编辑和删除）</div>
<div v-else>
<el-form label-position="top">
<el-form-item label="配置方式" prop="conditionType">
<el-form-item label="条件类型" prop="conditionType">
<el-radio-group
v-model="currentNode.attributes.conditionType"
@change="changeConditionType"
@ -33,7 +33,7 @@
</el-form-item>
<el-form-item
v-if="currentNode.attributes.conditionType === 2"
v-if="currentNode.attributes.conditionType === 1"
label="条件表达式"
prop="conditionExpression"
>
@ -44,13 +44,13 @@
style="width: 100%"
/>
</el-form-item>
<el-form-item
<!-- <el-form-item
v-if="currentNode.attributes.conditionType === 1"
label="条件规则"
prop="conditionExpression"
>
<span class="text-red-400">待实现</span>
</el-form-item>
</el-form-item> -->
</el-form>
</div>
</div>
@ -93,17 +93,17 @@ const closeDrawer = () => {
}
// 保存配置
const saveConfig = () => {
if (!currentNode.value.attributes.defaultCondition) {
if (!currentNode.value.attributes.defaultFlow) {
currentNode.value.showText = getShowText();
}
settingVisible.value = false
}
const getShowText = () : string => {
let showText ='';
// if (currentNode.value.attributes.conditionType === 1) {
// showText = '待实现'
// }
if (currentNode.value.attributes.conditionType === 1) {
showText = '待实现'
}
if (currentNode.value.attributes.conditionType === 2) {
if (currentNode.value.attributes.conditionExpression) {
showText = `表达式：${currentNode.value.attributes.conditionExpression}`
}

2
src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
View File

@ -28,7 +28,7 @@
</div>
<div class="node-toolbar">
<!-- <div class="toolbar-icon"><Icon icon="ep:document-copy" @click="copyNode" /></div> -->
<div class="toolbar-icon"><Icon icon="ep:circle-close" :size="18" @click="deleteNode" /></div>
<div class="toolbar-icon"><Icon icon="ep:delete" :size="16" @click="deleteNode" /></div>
</div>
</div>

84
src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
View File

@ -2,11 +2,7 @@
<div class="branch-node-wrapper">
<div class="branch-node-container">
<div class="branch-node-add" @click="addCondition">添加条件</div>
<div
class="branch-node-item"
v-for="(item, index) in currentNode.conditionNodes"
:key="index"
>
<div class="branch-node-item" v-for="(item, index) in currentNode.conditionNodes" :key="index">
<template v-if="index == 0">
<div class="branch-line-first-top"></div>
<div class="branch-line-first-bottom"></div>
@ -17,31 +13,40 @@
</template>
<div class="node-wrapper">
<div class="node-container">
<div class="node-box" :class="{'node-config-error': !item.showText}">
<div class="node-box" :class="{ 'node-config-error': !item.showText }">
<div class="branch-node-title-container">
<div class="branch-title" v-if="showInputs[index]">
<input
type="text"
class="input-max-width editable-title-input"
@blur="blurEvent(index)"
v-mountedFocus
v-model="item.name"
/>
type="text" class="input-max-width editable-title-input" @blur="blurEvent(index)"
v-mountedFocus v-model="item.name" />
</div>
<div v-else class="branch-title" @click="clickEvent(index)"> {{ item.name }} </div>
<div class="branch-priority"> 优先级{{ index + 1 }} </div>
</div>
<div class="node-content" @click="conditionNodeConfig(item.id)">
<div class="node-text" :title="item.showText" v-if ="item.showText">
<div class="branch-node-content" @click="conditionNodeConfig(item.id)">
<div class="branch-node-text" :title="item.showText" v-if="item.showText">
{{ item.showText }}
</div>
<div class="node-text" v-else >
<div class="branch-node-text" v-else>
{{ NODE_DEFAULT_TEXT.get(NodeType.CONDITION_NODE) }}
</div>
<Icon icon="ep:arrow-right-bold" />
</div>
<div class="node-toolbar" v-if="index + 1 !== currentNode.conditionNodes?.length">
<div class="toolbar-icon"><Icon icon="ep:circle-close" @click="deleteCondition(index)"/></div>
<div class="toolbar-icon">
<Icon icon="ep:delete" :size="16" @click="deleteCondition(index)" />
</div>
</div>
<div
class="branch-node-move move-node-left"
v-if="index != 0 && index + 1 !== currentNode.conditionNodes?.length" @click="moveNode(index, -1)">
<Icon icon="ep:arrow-left" />
</div>
<div
class="branch-node-move move-node-right"
v-if="currentNode.conditionNodes && index < currentNode.conditionNodes.length - 2"
@click="moveNode(index, 1)">
<Icon icon="ep:arrow-right" />
</div>
</div>
<NodeHandler v-model:child-node="item.childNode" />
@ -49,7 +54,7 @@
</div>
<ConditionNodeConfig :condition-node="item" :ref="item.id" />
<!-- 递归显示子节点 -->
<ProcessNodeTree v-if="item && item.childNode" v-model:flow-node="item.childNode" />
<ProcessNodeTree v-if="item && item.childNode" v-model:flow-node="item.childNode" />
</div>
</div>
<NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" />
@ -74,14 +79,14 @@ const props = defineProps({
})
// 定义事件，更新父组件
const emits = defineEmits<{
'update:modelValue': [node : SimpleFlowNode | undefined]
'update:modelValue': [node: SimpleFlowNode | undefined]
}>()
const currentNode = ref<SimpleFlowNode>(props.flowNode)
// const conditionNodes = computed(() => currentNode.value.conditionNodes);
watch(() => props.flowNode, (newValue) => {
currentNode.value = newValue;
watch(() => props.flowNode, (newValue) => {
currentNode.value = newValue;
});
// TODO 测试后续去掉
// watch(() => conditionNodes, (newValue) => {
@ -90,17 +95,17 @@ watch(() => props.flowNode, (newValue) => {
const showInputs = ref<boolean[]>([])
// 失去焦点
const blurEvent = (index:number) => {
const blurEvent = (index: number) => {
showInputs.value[index] = false
const conditionNode = currentNode.value.conditionNodes?.at(index) as SimpleFlowNode;
conditionNode.name = conditionNode.name || '条件' + index
const conditionNode = currentNode.value.conditionNodes?.at(index) as SimpleFlowNode;
conditionNode.name = conditionNode.name || '条件' + index
}
// 点击条件名称
const clickEvent = (index:number) => {
const clickEvent = (index: number) => {
showInputs.value[index] = true
}
const conditionNodeConfig = (nodeId:string) => {
const conditionNodeConfig = (nodeId: string) => {
console.log('nodeId', nodeId);
console.log("proxy.$refs", proxy.$refs);
// TODO 测试后续去掉
@ -109,29 +114,31 @@ const conditionNodeConfig = (nodeId:string) => {
conditionNode.open()
}
// 新增条件
const addCondition = () => {
const conditionNodes = currentNode.value.conditionNodes;
const conditionNodes = currentNode.value.conditionNodes;
if (conditionNodes) {
const len = conditionNodes.length
let lastIndex = len - 1
const conditionData: SimpleFlowNode = {
id: generateUUID(),
name: '条件'+len,
showText : '',
id: 'Flow_' + generateUUID(),
name: '条件' + len,
showText: '',
type: NodeType.CONDITION_NODE,
childNode: undefined,
conditionNodes: [],
attributes: {
conditionType: 1,
defaultCondition: false
defaultFlow: false
}
}
conditionNodes.splice(lastIndex, 0, conditionData)
}
}
const deleteCondition = (index:number) => {
const conditionNodes = currentNode.value.conditionNodes;
// 删除条件
const deleteCondition = (index: number) => {
const conditionNodes = currentNode.value.conditionNodes;
if (conditionNodes) {
conditionNodes.splice(index, 1)
if (conditionNodes.length == 1) {
@ -142,6 +149,17 @@ const deleteCondition = (index:number) => {
}
}
// 移动节点
const moveNode = (index: number, to: number) => {
// -1 ：向左 1： 向右
if (currentNode.value.conditionNodes) {
currentNode.value.conditionNodes[index] = currentNode.value.conditionNodes.splice(index + to,
1, currentNode.value.conditionNodes[index])[0]
}
}
</script>
<style lang="scss" scoped></style>

2
src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
View File

@ -28,7 +28,7 @@
</div>
<div class="node-toolbar">
<!-- <div class="toolbar-icon"><Icon icon="ep:document-copy" @click="copyNode" /></div> -->
<div class="toolbar-icon"><Icon icon="ep:circle-close" :size="18" @click="deleteNode" /></div>
<div class="toolbar-icon"><Icon icon="ep:delete" :size="18" @click="deleteNode" /></div>
</div>
</div>
<!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->

62
src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
View File

@ -95,6 +95,10 @@
.node-toolbar {
opacity: 1;
}
.branch-node-move {
display: flex;
}
}
// 普通节点标题
@ -181,24 +185,74 @@
}
}
//条件节点内容
.branch-node-content {
display: flex;
min-height: 32px;
padding: 4px 8px;
margin-top: 4px;
line-height: 32px;
align-items: center;
color: #111f2c;
border-radius: 4px;
.branch-node-text {
overflow: hidden;
font-size: 14px;
line-height: 24px;
text-overflow: ellipsis;
word-break: break-all;
-webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
-webkit-box-orient: vertical;
}
}
// 节点操作 ：删除
.node-toolbar {
opacity: 0;
position: absolute;
top: -5px;
right: -8px;
top: -25px;
right: 0px;
display: flex;
.toolbar-icon {
text-align: center;
vertical-align: middle;
color: #6d6c6e;
color: #000;
}
}
// 条件节点左右移动
.branch-node-move {
position: absolute;
width: 10px;
cursor: pointer;
display: none;
align-items: center;
height: 100%;
justify-content: center;
}
.move-node-left {
left: -2px;
top: 0px;
background: rgba(126, 134, 142, .08);
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.move-node-right {
right: -2px;
top: 0px;
background: rgba(126,134,142,.08);
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
}
.node-config-error {
border-color: #ff5219;
border-color: #ff5219 !important;
}
// 普通节点包装
.node-wrapper {