Hooke / vue-flow-editor

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
fc4e797f 1 parent dbd6717a

新增临时缓存功能

Inline Side-by-side
Showing 1 changed file with 114 additions and 29 deletions
......@@ -18,6 +18,7 @@
@click-canvas="onClickCanvas"
@dragend-node="onDragEndNode"
@click-node="onClickNode"
@click-node-mousedown="onClickNodeMousedown"
@click-edge="onClickEdge"
@dblclick-node="onDblClickNode"
@dblclick-edge="onDblClickEdge"
......@@ -591,8 +592,13 @@ export default {
},
showConfirmation: true,
node_attr: {},
node_tree: {},
});
const setNodeTree = (id: string, data: object) => {
state.node_tree[id] = data;
}
/**
* 获取url参数
* @param url
......@@ -724,6 +730,42 @@ export default {
// });
});
/************* 监听表单数据变化 **************/
watch(
() => state.node_name,
(newValue, oldValue) => {
if (newValue !== oldValue) {
if (state.node_tree[state.detailModel?.id]) {
state.node_tree[state.detailModel.id].name = newValue;
}
}
},
{ immediate: true }
);
watch(
() => state.userTags,
(newValue, oldValue) => {
if (newValue !== oldValue) {
if (state.node_tree[state.detailModel?.id]) {
state.node_tree[state.detailModel.id].user = newValue;
}
}
},
{ immediate: true }
);
watch(
() => state.more_attr,
(newValue, oldValue) => {
if (newValue !== oldValue) {
if (state.node_tree[state.detailModel?.id]) {
state.node_tree[state.detailModel.id].property = newValue;
}
}
},
{ immediate: true }
);
/***************** END ******************/
const showHelp = () => {
state.dialogHelpVisible = true;
}
......@@ -972,12 +1014,19 @@ export default {
* @param index
*/
const onAuthVisibleChange = (val: any, index: number) => {
state.field_auths[index].visible.checked = val.visible.checked; // 修改实际树变化
// 可见不选中时，可编辑也取消选中
if (!val.visible.checked) {
val.editable.checked = false
val.editable.checked = false;
state.field_auths[index].editable.checked = false; // 修改实际树变化
}
checkAuthAll('visible');
checkAuthAll('editable');
// 修改缓存树的字段权限
if (state.node_tree[state.detailModel?.id]) {
state.node_tree[state.detailModel.id].field = _.cloneDeep(state.field_auths);
}
}
/**
......@@ -986,12 +1035,20 @@ export default {
* @param index
*/
const onAuthEditableChange = (val: any, index: number) => {
state.field_auths[index].editable.checked = val.editable.checked; // 修改实际树变化
// 可编辑选中时，勾选可见
if (val.editable.checked) {
val.visible.checked = true
val.visible.checked = true;
state.field_auths[index].visible.checked = true; // 修改实际树变化
}
checkAuthAll('editable');
checkAuthAll('visible')
checkAuthAll('visible');
// 修改缓存树的字段权限
if (state.node_tree[state.detailModel?.id]) {
state.node_tree[state.detailModel.id].field = _.cloneDeep(state.field_auths);
}
}
/**
......@@ -1127,7 +1184,8 @@ export default {
// editor.openModel()
// }
}
const onClickNodeMousedown = (e) => {
}
/**
* 单击节点回调
* @param {Event} e - The event object representing the click event.
......@@ -1165,17 +1223,54 @@ export default {
state.statusLoading = true;
// 获取节点属性
const { code, data } = await flowNodePropertyAPI({ node_code: model.id, flow_id });
if (code) {
state.statusLoading = false;
flowData.value.nodes.forEach((ele: any, idx: number) => {
if (ele.id === model.id) {
state.node_idx = idx; // 详情里显示节点索引
}
});
// 开始节点不显示审批意见
if (model_id ==='start-node') {
state.more_attr = state.more_attr.filter((ele: any) => {
return ele.label !== '审批意见'
});
}
// 抄送节点不显示
if (state.detailModel.control === 'cc') {
state.more_attr = [];
}
// 打开属性表单
state.attr_radio = '基础属性'; // 还原tab默认值
// 如果是缓存过的节点，则直接显示
if (state.node_tree[state.detailModel.id]) {
state.statusLoading = false;
state.node_name = state.node_tree[state.detailModel.id].name;
state.userTags = state.node_tree[state.detailModel.id].user;
state.dialogUserTags = state.node_tree[state.detailModel.id].user;
state.field_auths = state.node_tree[state.detailModel.id].field;
state.more_attr = state.node_tree[state.detailModel.id].property;
// 初始化表单数据比较结构
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;
}
})
});
editor.openModel();
return;
}
// 获取节点属性
const { code, data } = await flowNodePropertyAPI({ node_code: model.id, flow_id });
if (code) {
state.statusLoading = false;
state.node_name = data.name ? data.name : model.text; // 节点名称
state.userTags = data.user; // 节点负责人
state.dialogUserTags = state.userTags; // 同步给弹框数据
......@@ -1218,20 +1313,6 @@ export default {
})
});
// 开始节点不显示审批意见
if (model_id ==='start-node') {
state.more_attr = state.more_attr.filter((ele: any) => {
return ele.label !== '审批意见'
});
}
// 抄送节点不显示
if (state.detailModel.control === 'cc') {
state.more_attr = [];
}
// 打开属性表单
state.attr_radio = '基础属性'; // 还原tab默认值
editor.openModel();
// 储存原始节点属性
......@@ -1242,6 +1323,9 @@ export default {
property: _.cloneDeep(state.more_attr)
}
// 临时保存树信息
setNodeTree(model.id, { name: _.cloneDeep(state.node_name), user: _.cloneDeep(state.userTags), field: _.cloneDeep(state.field_auths), property: _.cloneDeep(state.more_attr) });
} else {
state.statusLoading = false;
}
......@@ -1753,6 +1837,7 @@ export default {
showMultipleSelect: true, // 编辑器是否可以多选
onClickCanvas,
onClickNodeMousedown,
onClickNode,
onClickEdge,
onDblClickNode,
......@@ -2036,13 +2121,13 @@ body {
}
.el-button.el-button--primary {
background-color: #009688!important;
border-color: #009688!important;
color: white!important;
background-color: #009688 !important;
border-color: #009688 !important;
color: white !important;
}
.el-radio-button__original-radio:checked+.el-radio-button__inner {
border-color: #009688!important;
box-shadow: -1px 0 0 0 #009688!important;
.el-radio-button__original-radio:checked + .el-radio-button__inner {
border-color: #009688 !important;
box-shadow: -1px 0 0 0 #009688 !important;
}
</style>
......