Hooke / vue-flow-editor

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
2cd712dd 1 parent 32238554

fix 复制后的数据检查问题修复

Inline Side-by-side
Showing 1 changed file with 46 additions and 113 deletions
......@@ -1202,25 +1202,25 @@ export default {
state.dialogUserFormVisible = status
}
const onConfirmUserView = async (data: any) => {
const onConfirmUserView = async (data: any) => { // 负责人弹框确认回调
state.userTags = data;
// 自动保存流程
let { nodes, edges } = editor.editorState.graph.save();
// 检查路径有效性
const paths = [];
findPathsToEndNode(edges, 'start-node', [], paths);
let flow_id = getFlowId(); // 流程id
if (paths.length) {
const { code, data } = await saveFlowAPI({ form_id: +form_id, flow_id: +flow_id, data: JSON.stringify({ nodes, edges }) });
if (code) {
updateFlowId(data); // 更新缓存flow_id
console.log('满足条件的路径', paths); // 输出满足条件的路径结果数组
}
} else {
ElNotification.error('缺少一条从开始节点到结束节点的完整流程！');
}
// // 自动保存流程
// let { nodes, edges } = editor.editorState.graph.save();
// // 检查路径有效性
// const paths = [];
// findPathsToEndNode(edges, 'start-node', [], paths);
// let flow_id = getFlowId(); // 流程id
// if (paths.length) {
// const { code, data } = await saveFlowAPI({ form_id: +form_id, flow_id: +flow_id, data: JSON.stringify({ nodes, edges }) });
// if (code) {
// updateFlowId(data); // 更新缓存flow_id
// console.log('满足条件的路径', paths); // 输出满足条件的路径结果数组
// }
// } else {
// ElNotification.error('缺少一条从开始节点到结束节点的完整流程！');
// }
}
/******************* END *******************/
......@@ -1234,6 +1234,7 @@ export default {
updateModel: (arg0: any) => void
editorState: {
graph: {
addItem: any
removeItem: any
save: () => { nodes: any; edges: any }
read: any
......@@ -1276,6 +1277,7 @@ export default {
state.detailModel = model;
state.search_auth_value = '';
// 清空全选状态
state.auth_all_checked = false;
state.auth_all_edit = false;
......@@ -1401,26 +1403,17 @@ export default {
editor.openModel();
// // 储存原始节点属性
// state.node_attr = {
// name: _.cloneDeep(state.node_name),
// user: _.cloneDeep(state.userTags),
// field: _.cloneDeep(state.field_extend),
// property: _.cloneDeep(state.more_attr)
// }
// 临时保存树信息
setNodeTree(model.id,
{
name: _.cloneDeep(state.node_name),
user: model_id === 'start-node' ? '' : _.cloneDeep(state.userTags), // 开始节点没有负责人
field_auths: _.cloneDeep(state.field_auths),
field_extend: _.cloneDeep(state.field_extend),
field_auths: _.cloneDeep(state.field_auths), // 页面显示结构
field_extend: _.cloneDeep(state.field_extend), // 后端使用结构
property: _.cloneDeep(state.more_attr),
model
}
);
} else {
state.statusLoading = false;
}
......@@ -1512,10 +1505,12 @@ export default {
state.main_attr_set = true;
}
const checkSaveNodeTree = () => { // 检查点击过的节点是否有问题
const checkNodeTree = () => { // 检查点击过的节点是否有问题
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];
let avail_visible_count = element.field_auths.filter((ele) => {
......@@ -1530,13 +1525,15 @@ export default {
});
if (
(element.name === '') ||
(element.name === '') || // 节点名称为空
(key !=='start-node' && !element.user.length) || // 开始节点不需要检查负责人
(avail_visible_count.length === 0 && avail_editable_count.length === 0)
) { // 节点名称为空, 节点负责人不能为空, 请至少选择一个字段权限
(avail_visible_count.length === 0 && avail_editable_count.length === 0) // 可见和可编辑都为空
)
{
models.push(element.model);
}
}
console.warn(models);
if (models.length) {
ElMessage({
......@@ -1642,68 +1639,6 @@ export default {
}
/**
* 保存表单信息
*
*/
// async function saveForm() {
// if (state.node_name === '') {
// ElMessage({
// type: 'error',
// message: '节点名称不能为空',
// });
// return;
// }
// if (state.detailModel.id !== 'start-node' && state.userTags.length === 0) {
// ElMessage({
// type: 'error',
// message: '节点负责人不能为空',
// });
// return;
// }
// let avail_visible_count = state.field_auths.filter((ele) => {
// if (ele.visible.checked && !ele.visible.disabled) {
// return ele;
// }
// });
// let avail_editable_count = state.field_auths.filter((ele) => {
// if (ele.editable.checked && !ele.editable.disabled) {
// return ele;
// }
// });
// if (avail_visible_count.length === 0 && avail_editable_count.length === 0) {
// ElMessage({
// type: 'error',
// message: '请至少选择一个字段权限',
// });
// return;
// }
// // 调整数据结构
// state.field_extend.forEach(ele => {
// state.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;
// }
// })
// });
// let flow_id = getFlowId(); // 流程id
// console.warn(state.node_tree);
// // TAG: 保存表单信息
// const { code, data } = await saveFlowNodePropertyAPI({ flow_id: +flow_id, node_code: state.detailModel.id, data: JSON.stringify({ name: state.node_name, user: state.userTags, field: state.field_extend, property: state.more_attr }) })
// if (code) {
// ElMessage({
// type:'success',
// message: '保存成功',
// });
// state.detailModel.text = state.node_name; // 更新节点名称显示
// editor.updateModel(state.detailModel); // 更新流程图信息
// editor.closeModel();
// }
// }
/**
* 删除前校验
*
* @param {Object} model - The model object.
......@@ -1884,20 +1819,6 @@ export default {
editor.closeModel()
}
// const checkFormEdited = () => { // 检查表单是否修改过内容
// state.field_extend.forEach(ele => {
// state.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;
// }
// })
// });
// return _.isEqual(state.node_attr, {name: state.node_name, user: state.userTags, field: state.field_extend, property: state.more_attr})
// }
/**
* 拖动节点结束回调
*
......@@ -1909,14 +1830,22 @@ export default {
const copyData = () => { // 复制节点回调
if (state.detailModel.control !== 'start' && state.detailModel.control !== 'end') {
let copy_node = _.cloneDeep(state.node_tree[state.detailModel.id]); // 复制节点的属性
// delete copy_node.model;
editor.clearStates(state.detailModel.id); // 清除选中节点的状态
state.detailModel.id = uuidv4(); // ID需要重新生成
state.detailModel.y = state.detailModel.y + 50
editor.addNode(state.detailModel);
let id = uuidv4(); // ID需要重新生成
// state.detailModel.y = state.detailModel.y + 50
// 新节点的属性
copy_node['model']['id'] = id;
copy_node['model']['y'] = state.detailModel.y + 50;
state.node_tree[id] = copy_node; // 新节点放到缓存中
editor.addNode(copy_node['model']);
editor.closeModel();
// 保存流程图数据
flowData.value.nodes = editor.editorState.graph.save().nodes
flowData.value.edges = editor.editorState.graph.save().edges
} else {
ElNotification.error('开始或者结束节点不可以复制')
}
......@@ -1931,6 +1860,8 @@ export default {
// 清空错误提示
let { nodes } = editor.editorState.graph.save();
console.warn(nodes);
nodes.forEach((ele: any, idx: number) => {
ele.desc = '';
editor.updateModel(ele); // 更新流程图信息
......@@ -1966,10 +1897,12 @@ export default {
}
// 节点点击后，使用本地数据检查
if (checkSaveNodeTree().length) {
if (checkNodeTree().length) {
return;
}
// TAG: 检查节点是否完整
const checkResult = await checkAllFlowNodePropertyAPI({ flow_id: +flow_id })
if (checkResult.code) {
......