Hooke / vue-flow-editor

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
7982f4f9 1 parent acdbcae5

新增备注

Inline Side-by-side
Showing 1 changed file with 149 additions and 96 deletions
......@@ -487,12 +487,41 @@ export default {
}
});
onMounted(() => {
// // 显示提示框的标志位
// 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;
// });
// axios.get('/srv/?a=query_form_all_field')
// .then(res => {
// console.warn(res.data);
// });
// $('.el-tabs__nav')
// 根据数据获取选中的tag标签
// setTagsList(state.userTabs);
});
function handleActiveChange(name) {
console.warn(name);
}
const onAuthAllChange = val => {
// 全选可见按钮回调
const onAuthAllChange = val => { // 全选可见按钮回调
if (val) {
// 全部选中
state.field_auths.forEach(ele => {
......@@ -505,14 +534,16 @@ export default {
});
}
};
const onAuthAllEditChange = val => {
// 全选可编辑按钮回调
const onAuthAllEditChange = val => { // 全选可编辑按钮回调
console.warn(val);
};
const openUserForm = () => {
const openUserForm = () => { // 打开设置用户弹框
state.dialogUserFormVisible = true;
// TODO:查询到的用户列表数据
state.userTags = [
{ id: "user-1-1", name: "用户1-1" },
]
state.userTabs = [
{
id: "tab-1",
......@@ -531,7 +562,7 @@ export default {
{
id: "user-1-1",
label: "用户1-1",
checked: true,
checked: false,
disabled: false
},
{
......@@ -634,10 +665,13 @@ export default {
]
}
];
// 对比选中的用户的 ID，选中的 ID 同步状态到 userTabs 的数据结构上
state.userTags.forEach(ele => {
modifyFieldValue(state.userTabs, "id", ele.id, true);
});
};
const handleTabClick = (tab, event, idx) => {
// 点击Tab切换回调
const handleTabClick = (tab, event, idx) => { // 点击Tab切换回调
state.tabSelectData = tab.data; // tab选中数据提供给list类型使用
state.userList = []; // 清空用户列表
state.checkedUserList = []; // 清空选中用户列表
......@@ -669,8 +703,7 @@ export default {
// }
};
const handleTabContentClick = (tab, event) => {
// 侧边栏Tab点击回调
const handleTabContentClick = (tab, event) => { // 侧边栏Tab点击回调
// console.log(state.activeTabContent);
// console.log(tab);
// console.log(event);
......@@ -688,7 +721,7 @@ export default {
});
};
const handleNodeClick = data => {
const handleNodeClick = data => { // 树形结构点击回调
// console.log(data);
if (data.list) {
state.userList = data.list;
......@@ -704,8 +737,15 @@ export default {
}
};
/**
* 递归查找匹配字段，并修改字段为新值
*
* @param {object} obj - 修改对象
* @param {string} fieldName - 修改字段
* @param {any} targetValue - 匹配值
* @param {any} newValue - 修改新值
*/
function modifyFieldValue(obj, fieldName, targetValue, newValue) {
// 遍历相应ID修改选中值
// 检查当前层级的字段值是否匹配目标值
if (obj[fieldName] === targetValue) {
obj["checked"] = newValue;
......@@ -719,14 +759,18 @@ export default {
}
}
const handleCheckedUserListChange = (user, checked) => {
// 勾选用户回调
const handleCheckedUserListChange = (user, checked) => { // 勾选用户回调
// 修改选中值状态
modifyFieldValue(state.userTabs, "id", user.id, checked);
};
/**
* 递归获取树形结构下的所有list字段数据
*
* @param {Array} arr - The array to traverse.
* @return {Array} - The list items found.
*/
function getAllListItems(arr) {
// 遍历递归获取list下面的数据
var result = [];
function recursiveGetListItems(subArr) {
......@@ -745,8 +789,14 @@ export default {
return result;
}
const setTagsList = val => {
let userList = [];
/**
* 根据 userTabs 的选中状态，更新 tag 选中列表显示
* 获取生成 list 集合的 checked 状态，生成 tags 的勾选显示
*
* @param {Array} val - userTabs
*/
const setTagsList = (val) => {
let userList = []; // 存储所有的list数据
val.forEach(ele => {
let data = getAllListItems(ele.data);
userList.push(data);
......@@ -771,20 +821,18 @@ export default {
});
};
// 监听数据结构选中值变化
watch(
watch( // TAG: watch state.userTabs 监听数据结构选中值变化
() => state.userTabs,
val => {
if (val) {
// 设置tag选中列表
// 更新 tags 选中列表显示
setTagsList(val);
}
},
{ deep: true }
);
const handleTagClose = tag => {
// 移除成员标签回调
const handleTagClose = (tag) => { // 移除 tags 成员标签回调
state.userTags.splice(state.userTags.indexOf(tag), 1); // 删除标签列表中的项
// 移除数据结构中的选中值
modifyFieldValue(state.userTabs, "id", tag.id, false);
......@@ -792,55 +840,42 @@ export default {
let tagsId = state.userTags.map(ele => {
return ele.id;
});
// console.warn(tagsId);
if (state.is_active_search) { // 搜索状态
// 获取tags中已删除的, 勾选列表中还勾选的值
let result = state.checkedSearchUserList.filter(
value => !tagsId.includes(value)
);
// 选中列表中不存在勾选列表中项时，需要删除勾选列表中的项
if (result.length) {
result.forEach(ele => {
state.checkedSearchUserList.splice(
state.checkedSearchUserList.indexOf(ele),
1
);
});
}
} else { // 非搜索状态
// 获取tags中已删除的, 勾选列表中还勾选的值
let result = state.checkedUserList.filter(
// 处理tags列表和下面选中列表同步问题
let checkDataList = [];
if (state.is_active_search) { // 激活搜索状态
checkDataList = state.checkedSearchUserList;
} else { // 激活非搜索状态
checkDataList = state.checkedUserList;
}
// 获取 tags 中已删除的, 勾选列表中还勾选的值
let result = checkDataList.filter(
value => !tagsId.includes(value)
);
// 选中列表中不存在勾选列表中项时，需要删除勾选列表中的项
if (result.length) {
result.forEach(ele => {
state.checkedUserList.splice(state.checkedUserList.indexOf(ele), 1);
});
}
);
// 如果存在不同步的值，需要在列表中删除勾选列表中的项
if (result.length) {
result.forEach(ele => {
checkDataList.splice(
checkDataList.indexOf(ele),
1
);
});
}
// console.log(result);
// console.log(state.userTags);
// console.log(state.checkedUserList);
};
const closeUserForm = () => {
// 关闭用户列表表单回调
const closeUserForm = () => { // 关闭用户列表表单回调
state.dialogUserFormVisible = false;
};
const confirmUserForm = () => {
// 确认用户列表表单回调
const confirmUserForm = () => { // 确认用户列表表单回调
state.dialogUserFormVisible = false;
console.log(state.userTags);
};
const activeSearchBtn = () => {
const activeSearchBtn = () => { // 激活搜索按钮操作
state.is_active_search = !state.is_active_search;
state.searchUserList = [];
state.searchUserList = []; // 清空搜索列表
};
const checkSearchStatus = () => {
// 在搜索框中同步显示tag框选中的用户
const checkSearchStatus = () => { // 在搜索框中同步显示tag框选中的用户
state.userTags.forEach(ele => {
state.searchUserList.forEach(item => {
if (ele.id === item.id) {
......@@ -853,8 +888,7 @@ export default {
.filter(ele => ele.checked)
.map(ele => ele.id);
};
const checkUserStatus = () => {
// 在搜索框中同步显示tag框选中的用户
const checkUserStatus = () => { // 在搜索框中同步显示tag框选中的用户
state.userTags.forEach(ele => {
state.userList.forEach(item => {
if (ele.id === item.id) {
......@@ -868,14 +902,13 @@ export default {
.map(ele => ele.id);
};
const onClearSearch = () => {
// 清空搜索回调
const onClearSearch = () => { // 清空搜索回调
state.is_active_search = !state.is_active_search;
// 同步显示tag框选中的用户
checkUserStatus();
};
const onSearch = () => {
// TODO: 搜索回调
const onSearch = () => { // 搜索回调
// TODO: 获取后台数据
state.searchUserList = [
{
id: "user-1-1",
......@@ -896,41 +929,11 @@ export default {
disabled: true
}
];
// console.log(state.userTags);
// 如果 tags 里存在的值，需要在搜索列表中勾选
checkSearchStatus();
};
onMounted(() => {
// // 显示提示框的标志位
// 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;
// });
// axios.get('/srv/?a=query_form_all_field')
// .then(res => {
// console.warn(res.data);
// });
// $('.el-tabs__nav')
// 根据数据获取选中的tag标签
setTagsList(state.userTabs);
});
watch(
watch( // TAG: watch state.dialogUserFormVisible 监听弹框显示，修改tab文字宽度
() => state.dialogUserFormVisible,
val => {
if (val) {
......@@ -941,8 +944,16 @@ export default {
}
);
/********** 流程图功能函数 **********/
let editor;
/**
* Handle the event when a node is double-clicked.
*
* @param {Object} e - The event object
*/
function onDblclickNode(e) {
const model = G6.Util.clone(e.item.get("model"));
model.style = model.style || {};
......@@ -952,6 +963,11 @@ export default {
editor.openModel();
}
/**
* Handles the double click event on an edge.
*
* @param {Event} e - The event object representing the double click event.
*/
function onDblClickEdge(e) {
const { source, target, style, labelCfg, label } = e.item.get("model");
const model = {
......@@ -970,15 +986,34 @@ export default {
editor.openModel();
}
/**
* Cancels the operation and closes the editor model.
*
* @param {}
* @return {}
*/
function cancel() {
editor.closeModel();
}
/**
* Saves the changes made in the editor.
*
* @param {type} paramName - description of parameter
* @return {type} description of return value
*/
function save() {
editor.updateModel(state.detailModel);
editor.closeModel();
}
/**
* Handles the before delete event of the model.
*
* @param {Object} model - The model object.
* @param {string} type - The type of the model.
* @return {Promise} A promise that resolves when the event is handled.
*/
async function handleBeforeDelete(model, type) {
if (type === "node") {
if (model.label === "开始") {
......@@ -991,6 +1026,12 @@ export default {
}
}
/**
* Handles the logic after deleting a model.
*
* @param {Object} model - The model being deleted.
* @param {string} type - The type of the model being deleted.
*/
function handleAfterDelete(model, type) {
if (type === "edge") {
console.log("delete edge");
......@@ -999,6 +1040,13 @@ export default {
}
}
/**
* A function to handle something before adding.
*
* @param {object} model - The model object.
* @param {string} type - The type of the model.
* @return {Promise} A promise that resolves to a result or rejects with an error.
*/
function handleBeforeAdd(model, type) {
if (type === "edge") {
if (model.source === "end-node") {
......@@ -1028,6 +1076,11 @@ export default {
}
}
/**
* Logs the data from the editor's graph.
*
* @return {undefined} No return value.
*/
function logData() {
let { nodes, edges } = editor.editorState.graph.save();
nodes = nodes.map(
......