Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
vue-flow-editor
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2023-12-08 18:14:01 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
ccc52e8a287240fd5b4ab3cd35e3893fce55dc77
ccc52e8a
1 parent
2cd712dd
fix 处理新增和删除节点后的检查有效性问题
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
68 additions
and
13 deletions
doc/App.vue
doc/App.vue
View file @
ccc52e8
...
...
@@ -472,6 +472,7 @@ interface RuleForm {
}
interface myObj {
text: string
source: string
id: string
label: string
...
...
@@ -1509,7 +1510,6 @@ export default {
let { nodes } = editor.editorState.graph.save();
let models = []; // 未通过的节点ID集合
console.warn('state.node_tree', state.node_tree);
for (const key in state.node_tree) {
const element = state.node_tree[key];
...
...
@@ -1533,7 +1533,6 @@ export default {
models.push(element.model);
}
}
console.warn(models);
if (models.length) {
ElMessage({
...
...
@@ -1705,6 +1704,14 @@ export default {
if (type === 'node') {
// 关闭编辑器
editor.closeModel();
// TAG: 节点删除后,如果有缓存也要删除掉
for (const key in state.node_tree) {
if (key === model.id) {
delete state.node_tree[model.id];
}
}
console.warn(state.node_tree);
}
if (type === 'edge') {
// console.log('delete edge')
...
...
@@ -1713,12 +1720,7 @@ export default {
flowData.value.nodes = editor.editorState.graph.save().nodes
flowData.value.edges = editor.editorState.graph.save().edges
// TAG: 节点删除后,如果有缓存也要删除掉
for (const key in state.node_tree) {
if (key === model.id) {
delete state.node_tree[model.id];
}
}
}
/**
...
...
@@ -1783,15 +1785,69 @@ export default {
* @param {model} model - The model being handled.
* @param {type} type - The type of the event.
*/
function handleAfterAdd(model: myObj, type: string)
{
const handleAfterAdd = async (model: myObj, type: string) =>
{
if (type === 'node') {
// console.log(`新增节点`)
flowData.value.nodes = editor.editorState.graph.save().nodes
editor.addNode(model);
let flow_id = getFlowId(); // 流程id
const { code, data } = await flowNodePropertyAPI({ node_code: model.id, flow_id });
if (code) {
// 转换数据结构使用
let node_name = data.name ? data.name : model.text;
let userTags = data.user; // 节点负责人
let field_extend = data.field; // 字段权限临时储存,实际传给后端数据结构
let field_auths = []; // 清空字段权限列表,本地使用数据结构
let more_attr = data.property; // 更多属性
// 转换数据结构使用
field_extend.forEach(ele => {
if (!ele.field_extend.disabled) { // 流程节点字段权限列表内是否显示
field_auths.push({
field_id: ele.field_extend.field_id,
name: ele.field_extend.label,
visible: {
checked: ele.field_extend.visibled,
disabled: false,
},
editable: {
checked: ele.field_extend.editabled,
disabled: ele.field_extend.readonly,
},
show: true,
})
}
});
// 初始化表单数据比较结构
field_extend.forEach(ele => {
field_auths.forEach(auth => {
if (ele.field_id === auth.field_id) {
ele.field_extend.visibled = auth.visible.checked;
ele.field_extend.editabled = auth.editable.checked;
ele.field_extend.readonly = auth.editable.disabled;
}
})
});
state.node_tree[model.id] = {
name: node_name,
user: userTags, // 开始节点没有负责人
field_auths: field_auths, // 页面显示结构
field_extend: field_extend, // 后端使用结构
property: more_attr,
model
};
editor.addNode(model);
}
}
if (type === 'edge') {
// console.log(`新增连接线`)
flowData.value.edges = editor.editorState.graph.save().edges
}
}
function onClickCanvas(e: myEvent) {
...
...
@@ -1845,7 +1901,6 @@ export default {
// 保存流程图数据
flowData.value.nodes = editor.editorState.graph.save().nodes
flowData.value.edges = editor.editorState.graph.save().edges
} else {
ElNotification.error('开始或者结束节点不可以复制')
}
...
...
@@ -1860,8 +1915,6 @@ export default {
// 清空错误提示
let { nodes } = editor.editorState.graph.save();
console.warn(nodes);
nodes.forEach((ele: any, idx: number) => {
ele.desc = '';
editor.updateModel(ele); // 更新流程图信息
...
...
@@ -1906,7 +1959,9 @@ export default {
// TAG: 检查节点是否完整
const checkResult = await checkAllFlowNodePropertyAPI({ flow_id: +flow_id })
if (checkResult.code) {
let raw_keys = checkResult.data;
let { nodes, edges } = editor.editorState.graph.save();
let available_keys = _.map(nodes, 'id'); // 画布上存在的有效节点ID
let raw_keys = _.intersection(checkResult.data, available_keys); // 取交集有效ID
let node_keys = Object.keys(state.node_tree); // 现在本地的ID都是有效的值
let result = _.difference(raw_keys, node_keys);
if (result.length) {
...
...
Please
register
or
login
to post a comment