Hooke / vue-flow-editor

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
20e06e22 1 parent fb7d7268

优化流程图操作逻辑

Inline Side-by-side
Showing 1 changed file with 121 additions and 34 deletions
......@@ -72,7 +72,6 @@
<el-form
v-if="!!state.detailModel"
ref="formRef"
:rules="rules"
:model="state.detailModel"
label-position="top"
label-width="100px"
......@@ -91,7 +90,7 @@
</div>
<el-input v-model="state.node_name" />
</el-form-item>
<div>
<div class="node-user">
<div style="font-size: 14px; margin-bottom: 10px;">
节点负责人 <span style="color: red;">*</span>
</div>
......@@ -157,6 +156,7 @@
:disabled="field.visible.disabled"
label=""
size="large"
@change="onAuthVisibleChange(field, index)"
/></el-col>
<el-col :span="6" style="padding-left: 5px;"
><el-checkbox
......@@ -164,6 +164,7 @@
:disabled="field.editable.disabled"
label=""
size="large"
@change="onAuthEditableChange(field, index)"
/></el-col>
</el-row>
</el-form-item>
......@@ -389,8 +390,8 @@ export default {
{
name: '字段1',
visible: {
checked: true,
disabled: false,
checked: false,
disabled: true,
},
editable: {
checked: false,
......@@ -411,7 +412,7 @@ export default {
{
name: '字段3',
visible: {
checked: true,
checked: false,
disabled: false,
},
editable: {
......@@ -424,32 +425,51 @@ export default {
onMounted(() => {
document.title = '可视化流程设计器'
// // 显示提示框的标志位
// var showConfirmation = true;
// // 监听 beforeunload 事件
// window.addEventListener('beforeunload', function (event) {
// if (showConfirmation) {
// // 取消事件的默认行为（弹出确认对话框）
// event.preventDefault();
// // Chrome 和 Firefox 需要返回一个值以显示确认对话框
// event.returnValue = '';
// // 显示自定义的提示信息
// var confirmationMessage = '确定要离开此页面吗？';
// (event || window.event).returnValue = confirmationMessage; // 兼容旧版浏览器
// return confirmationMessage;
// }
// });
// // 监听 unload 事件
// window.addEventListener('unload', function () {
// // 设置标志位为 false，避免在刷新页面时再次显示提示框
// showConfirmation = false;
// });
// 显示提示框的标志位
var showConfirmation = true;
// 监听 beforeunload 事件
window.addEventListener('beforeunload', function (event) {
if (showConfirmation) {
// 取消事件的默认行为（弹出确认对话框）
event.preventDefault();
// Chrome 和 Firefox 需要返回一个值以显示确认对话框
event.returnValue = '';
// 显示自定义的提示信息
var confirmationMessage = '确定要离开此页面吗？';
(event || window.event).returnValue = confirmationMessage; // 兼容旧版浏览器
return confirmationMessage;
}
});
// 监听 unload 事件
window.addEventListener('unload', function () {
// 设置标志位为 false，避免在刷新页面时再次显示提示框
showConfirmation = false;
});
})
function handleActiveChange(name) {
console.warn(name)
}
/************** 字段权限操作 ***************/
const onAuthVisibleChange = (val: any, index: number) => {
// 可见按钮回调
console.log('onAuthVisibleChange', val, index);
let count = state.field_auths.filter((ele) => {
if (ele.visible.checked && !ele.visible.disabled) {
return ele;
}
});
if (count.length === state.field_auths.length) {
state.auth_all_checked = true;
} else {
state.auth_all_checked = false;
}
}
const onAuthEditChange = (val: any, index: number) => {
console.log('onAuthEditChange', val, index)
}
const onAuthAllChange = (val: any) => {
// 全选可见按钮回调
if (val) {
......@@ -468,6 +488,7 @@ export default {
// 全选可编辑按钮回调
console.warn(val)
}
/******************* END *******************/
/****** 用户选择控件弹框 ******/
const openUserForm = () => {
......@@ -479,6 +500,7 @@ export default {
state.dialogUserFormVisible = status
}
const onConfirmUserView = (data: any) => {
state.userTags = data;
console.log(data)
}
/******************* END *******************/
......@@ -534,7 +556,32 @@ export default {
// 判断是否是流程节点
let model_id = model.id
if (model_id !== 'start-node' && model_id!== 'end-node') {
state.detailModel = model
state.detailModel = model;
// 获取节点名称
state.node_name = state.detailModel.text;
// // 检查字段权限选中情况
// let checked_count = state.field_auths.filter((ele) => {
// if (ele.visible.checked && !ele.visible.disabled) {
// return ele;
// }
// });
// if (checked_count.length === state.field_auths.length) {
// state.auth_all_checked = true;
// } else {
// state.auth_all_checked = false;
// }
// let edit_count = state.field_auths.filter((ele) => {
// if (ele.editable.checked && !ele.editable.disabled) {
// return ele;
// }
// });
// if (edit_count.length === state.field_auths.length) {
// state.auth_all_edit = true;
// } else {
// state.auth_all_edit = false;
// }
// 打开属性表单
editor.openModel()
} else {
editor.closeModel()
......@@ -583,11 +630,15 @@ export default {
// return false
// }
// })
// editor.updateModel(state.detailModel)
state.detailModel.text = state.node_name
// state.detailModel.label = state.node_name
// 更新流程图信息
editor.updateModel(state.detailModel)
// editor.closeModel()
console.log(state.node_name)
console.log(state.userTags)
console.log(state.field_auths)
console.log('节点名称', state.node_name)
console.log('节点负责人', state.userTags)
console.log('字段权限', state.field_auths)
}
/**
......@@ -601,14 +652,48 @@ export default {
model: myObj,
type: string,
): Promise<any> {
let { nodes, edges } = editor.editorState.graph.save();
// 不可以删除开始与结束连接线
let node_id = model.id;
for (let index = 0; index < edges.length; index++) {
const element = edges[index]
if(
(element.target === node_id && element.source === 'start-node') ||
(element.source === node_id && element.target === 'end-node')
)
{
ElNotification.error('不可以删除【开始】与【结束】连接线')
return Promise.reject('reject')
}
}
if (type === 'node') {
if (model.label === '开始') {
state.editorLoading = true
await delay(1000)
state.editorLoading = false
if (model.id === 'start-node') {
// state.editorLoading = true
// await delay(1000)
// state.editorLoading = false
ElNotification.error('不可以删除【开始】节点')
return Promise.reject('reject')
}
if (model.id === 'end-node') {
ElNotification.error('不可以删除【结束】节点')
return Promise.reject('reject')
}
// 流程图中必须有一个流程节点
let is_flow_node = nodes.filter(node => node.control === 'flow');
if (is_flow_node.length === 1) {
ElNotification.error('流程图中必须有一个流程节点')
return Promise.reject('reject')
}
}
if (type === 'edge') {
if (model.source === 'start-node') {
ElNotification.error('不可以删除【开始】连接线')
return Promise.reject('reject')
}
if (model.target === 'end-node') {
ElNotification.error('不可以删除【结束】连接线')
return Promise.reject('reject')
}
}
}
......@@ -783,6 +868,8 @@ export default {
handleAfterAdd,
handleActiveChange,
onAuthVisibleChange,
onAuthEditChange,
onAuthAllChange,
onAuthAllEditChange,
......