Hooke / vue-flow-editor

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
3f952699 1 parent 50369aed

新增抄送类型节点，抄送节点点击时节点属性不显示

Inline Side-by-side
Showing 2 changed files with 109 additions and 63 deletions
......@@ -171,7 +171,11 @@
</el-form-item>
<div v-if="state.attr_radio === '更多属性'">
<div class="more-attr">
<div v-for="(attr, index) in state.more_attr" :key="index" class="more-attr-item">
<div
v-for="(attr, index) in state.more_attr"
:key="index"
class="more-attr-item"
>
<div style="display: flex; align-items: center;">
<p class="title">{{ attr.label }}</p>&nbsp;
<el-tooltip
......@@ -182,7 +186,11 @@
<el-icon><InfoFilled color="#b5b8be" /></el-icon>
</el-tooltip>
</div>
<div v-for="(item, idx) in attr.data" :key="idx" class="content">
<div
v-for="(item, idx) in attr.data"
:key="idx"
class="content"
>
<div v-if="item.btnText" class="left">
<span v-if="item.label === item.btnText">{{ item.label }}</span>
<span v-else>
......@@ -268,11 +276,16 @@
<template v-slot:toolbar>
<el-tooltip content="保存流程图数据">
<div class="vue-flow-editor-toolbar-item" @click="saveData">
<!-- <el-icon><Coin /></el-icon> -->
<i class="el-icon-coin" style=" margin-top: 4px;" />
<span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">保存</span>
</div>
</el-tooltip>
<!-- <el-tooltip content="启用流程图数据">
<div class="vue-flow-editor-toolbar-item" @click="startFlow">
<i class="el-icon-check" style=" margin-top: 4px;" />
<span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">启用</span>
</div>
</el-tooltip> -->
</template>
<!-- 表单底部按钮 -->
<template v-slot:foot>
......@@ -419,6 +432,12 @@ export default {
color: '#ed8383',
img: 'https://cdn.ipadbiz.cn/oa/coupon-node.svg',
},
cc: {
text: '抄送节点',
desc: '抄送节点',
color: '#ed8383',
img: 'https://cdn.ipadbiz.cn/oa/coupon-node.svg',
},
end: {
id: 'end-node',
text: '结束',
......@@ -432,64 +451,7 @@ export default {
attr_radio: '基础属性',
main_attr_set: true,
more_attr_switch: false,
more_attr: [ // 更多属性
{
id: 'no-1',
label: '审批意见',
desc: '开启审批意见后，节点负责人处理流程时须按要求填写审批意见',
data: [
{
id: 'text-1',
label: '文本意见',
show: true,
desc: '用户在处理流程时，可通过输入框或快捷选项录入文本意见。',
btnText: '',
},
{
id: 'signature-1',
label: '手写签名',
show: false,
desc: '用户在处理流程时，需要签名确认。',
btnText: ''
},
]
},
{
id: 'no-2',
label: '节点操作',
desc: '定义流程负责人在处理流程时可以进行的操作',
data: [
{
id: 'node-1',
label: '提交',
show: true,
desc: '用户在处理流程时点击此按钮，将保存用户在此节点中对数据的更改，流程数据流转至后续节点。',
btnText: '提交'
},
{
id: 'node-2',
label: '暂存',
show: false,
desc: '暂存后将保存在此节点中对数据的更改，流程不发生流转。',
btnText: '暂存'
},
{
id: 'node-3',
label: '撤回',
show: false,
desc: '开启后，用户在处理流程时点击此按钮，将保存用户在此节点中对数据的更改，同时流程退回到指定的节点中。',
btnText: '撤回'
},
{
id: 'node-4',
label: '回退',
show: false,
desc: '开启后，用户在处理流程时点击此按钮，将保存用户在此节点中对数据的更改，同时流程退回到指定的节点中。',
btnText: '回退'
},
],
}
],
more_attr: [], // 更多属性
more_attr_data: {
label: '',
show: false,
......@@ -736,8 +698,73 @@ export default {
// 检查字段权限选中情况
checkAuthAll('visible');
checkAuthAll('editable');
// TODO: 需要处理更多属性数据，节点类型是抄送时不显示节点操作
state.more_attr = [ // 更多属性
{
id: 'no-1',
label: '审批意见',
desc: '开启审批意见后，节点负责人处理流程时须按要求填写审批意见',
data: [
{
id: 'text-1',
label: '文本意见',
show: true,
desc: '用户在处理流程时，可通过输入框或快捷选项录入文本意见。',
btnText: '',
},
{
id: 'signature-1',
label: '手写签名',
show: false,
desc: '用户在处理流程时，需要签名确认。',
btnText: ''
},
]
},
{
id: 'no-2',
label: '节点操作',
desc: '定义流程负责人在处理流程时可以进行的操作',
data: [
{
id: 'node-1',
label: '提交',
show: true,
desc: '用户在处理流程时点击此按钮，将保存用户在此节点中对数据的更改，流程数据流转至后续节点。',
btnText: '提交'
},
{
id: 'node-2',
label: '暂存',
show: false,
desc: '暂存后将保存在此节点中对数据的更改，流程不发生流转。',
btnText: '暂存'
},
{
id: 'node-3',
label: '撤回',
show: false,
desc: '开启后，用户在处理流程时点击此按钮，将保存用户在此节点中对数据的更改，同时流程退回到指定的节点中。',
btnText: '撤回'
},
{
id: 'node-4',
label: '回退',
show: false,
desc: '开启后，用户在处理流程时点击此按钮，将保存用户在此节点中对数据的更改，同时流程退回到指定的节点中。',
btnText: '回退'
},
],
}
];
if (state.detailModel.control === 'cc') {
state.more_attr = state.more_attr.filter((ele: any) => {
return ele.label !== '节点操作'
});
}
// 打开属性表单
editor.openModel()
state.attr_radio = '基础属性'; // 还原tab默认值
editor.openModel();
} else {
editor.closeModel()
}
......@@ -1005,6 +1032,10 @@ export default {
console.log(edges)
}
const startFlow = () => { // 启用流程图
}
/**
* 格式化工具栏按钮
*
......@@ -1051,6 +1082,7 @@ export default {
onConfirmUserView,
saveData,
startFlow,
toolbarButtonHandler,
onRef: (e: any) => (editor = e),
......
/*
* @Date: 2023-10-27 09:29:48
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-11-15 16:16:04
* @LastEditTime: 2023-11-17 15:08:51
* @FilePath: /vue-flow-editor/doc/data.js
* @Description: 初始化结构，数据都是固定的
*/
......@@ -24,6 +24,14 @@ export const AppData = {
control: 'flow',
},
{
id: '1700204887203',
x: 465,
y: 210,
text: '抄送节点',
desc: '',
control: 'cc',
},
{
id: 'end-node',
x: 225,
y: 335,
......@@ -45,5 +53,11 @@ export const AppData = {
target: 'end-node',
targetAnchor: 0,
},
{
source: '5353453523',
sourceAnchor: 3,
target: '1700204887203',
targetAnchor: 1,
},
],
}
......