Hooke / vue-flow-editor

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
5bb7d57c 1 parent 789344e9

flow_id获取设置都改为本地缓存控制

Inline Side-by-side
Showing 1 changed file with 81 additions and 91 deletions
......@@ -417,6 +417,7 @@ import { staticPath } from './utils'
import { ElNotification, ElMessage, ElMessageBox, ElLoading } from 'element-plus'
import axios from './axios'
import $ from 'jquery'
import _ from 'lodash'
import { Calendar, Search } from '@element-plus/icons-vue'
import SelectUserView from './selectUserView.vue'
import { Function } from 'lodash'
......@@ -587,33 +588,30 @@ export default {
* 更新URL中的flow_id
* @param flowId
*/
const updateUrl = (flowId: any) => {
// 获取当前 URL
const url = new URL(window.location.href);
// 获取 flow_id 的值（可以是一个变量）
// const flowId = 'some_value';
// 获取 URL 中的查询参数对象
const searchParams = url.searchParams;
// 检查是否存在 form_id 参数
if (!searchParams.has('form_id')) {
// 如果不存在 form_id 参数，则添加 form_id 和 flow_id 参数
searchParams.append('flow_id', flowId);
} else {
// 如果存在 form_id 参数，则更新 flow_id 参数的值
searchParams.set('flow_id', flowId);
}
// 将更新后的查询参数设置回 URL 对象
url.search = searchParams.toString();
// 修改完 URL 后，更新浏览器地址栏显示的 URL
window.history.replaceState(null, '', url.toString());
// TODO: 到时候测试iframe的时候，看看有没有影响
// window.parent.location.href = window.parent.location.href + '&mod_id=' + item.id + '&width=' + item.width + '&height=' + item.height + '&bg_img=' + encodeURIComponent(item.background) + '&type=edit';
}
// const updateUrl = (flowId: any) => {
// // 获取当前 URL
// const url = new URL(window.location.href);
// // 获取 URL 中的查询参数对象
// const searchParams = url.searchParams;
// // 检查是否存在 form_id 参数
// if (!searchParams.has('form_id')) {
// // 如果不存在 form_id 参数，则添加 form_id 和 flow_id 参数
// searchParams.append('flow_id', flowId);
// } else {
// // 如果存在 form_id 参数，则更新 flow_id 参数的值
// searchParams.set('flow_id', flowId);
// }
// // 将更新后的查询参数设置回 URL 对象
// url.search = searchParams.toString();
// // 修改完 URL 后，更新浏览器地址栏显示的 URL
// window.history.replaceState(null, '', url.toString());
// // TODO: 到时候测试iframe的时候，看看有没有影响
// // window.parent.location.href = window.parent.location.href + '&mod_id=' + item.id + '&width=' + item.width + '&height=' + item.height + '&bg_img=' + encodeURIComponent(item.background) + '&type=edit';
// }
/**
* 获取url参数
......@@ -642,9 +640,24 @@ export default {
return params;
}
/**
* 获取缓存里的 flow_id
*/
const getFlowId = () => {
let id = localStorage.getItem('flow_id') ? localStorage.getItem('flow_id') : '';
return id;
}
/**
* 更新缓存里的 flow_id
* @param id
*/
const updateFlowId = (id: any) => {
localStorage.setItem('flow_id', id);
}
const urlQuery = getQueryParams(location.href);
let form_id = urlQuery.form_id? urlQuery.form_id : ''; // 表单id
let flow_id = urlQuery.flow_id? urlQuery.flow_id : ''; // 流程id，如果是新的流程，则为空
/**
* 因为从外部页面到流程图页面，flow_id都需要从当前页面生成
......@@ -654,58 +667,39 @@ export default {
axios.get('/admin/?a=flow_version&form_id=' + form_id)
.then(res => {
if (res.data.code) {
// 流程版本列表
state.version_list = res.data.data;
const urlQuery = getQueryParams(location.href);
let flow_id = urlQuery.flow_id? urlQuery.flow_id : ''; // 流程id，如果是新的流程，则为空
// 从外部页面第一次跳到流程编辑页面时，flow_id不存在
if (flow_id) {
if (state.version_list.length) {
state.version_list.forEach((ele) => {
if (ele.id === +flow_id) {
// 选中的版本号
state.select_flow_version = ele.code;
}
if (ele.status === '1') {
// 流程版本列表显示启用项
state.current_enable_version = ele.code;
}
});
state.version_list = res.data.data;// 流程版本列表
let flow_id = getFlowId(); // 流程id，如果是新的流程，则为空
if (state.version_list.length) { // 从外部页面第一次跳到流程编辑页面时，flow_id不存在
let index = _.findIndex(state.version_list, { status: '1' });
if (index > -1) {
state.current_enable_version = state.version_list[index].code; // 流程版本列表显示启用项
}
} else {
// 如果列表里没有启用的版本获取flow_id不存在时，默认选中第一个
if (state.version_list.length) {
let ele = state.version_list[0];
flow_id = ele.id;
updateUrl(flow_id); // 更新url
state.select_flow_version = ele.code; // 选中的版本号
state.version_list.forEach((ele) => {
if (ele.status === '1') {
// 流程版本列表显示启用项
state.current_enable_version = ele.code;
}
});
console.warn(ele);
getFlowData(flow_id);
if (flow_id) { // 缓存里访问过
let index = _.findIndex(state.version_list, (v) => v.id == flow_id);
if (index > -1) {
state.select_flow_version = state.version_list[index].code; // 选中的版本号
}
} else { // 如果列表里没有启用的版本获取 flow_id 不存在时，默认选中第一个
state.select_flow_version = state.version_list[0].code; // 选中的版本号
updateFlowId(state.version_list[0].id); // 更新 flow_id
getFlowData(state.version_list[0].id);// 新的 flow_id，更新流程图
}
}
// 没有默认版本列表，自动新增流程
if (!state.version_list.length) {
axios.post('/admin/?a=save_flow', qs.stringify({
form_id: +form_id,
flow_id: '',
data: JSON.stringify(AppData)
}))
.then(res => {
if (res.data.code) {
// 刷新版本列表显示
getVersionList();
}
})
.catch(err => {
console.log(err);
});
} else { // 没有默认版本列表，自动新增流程
axios.post('/admin/?a=save_flow', qs.stringify({ form_id: +form_id, flow_id: '', data: JSON.stringify(AppData) }))
.then(res => {
if (res.data.code) {
getVersionList(); // 刷新版本列表显示
} else {
ElMessage({
type: 'error',
message: res.data.msg,
});
}
})
.catch(err => {
console.log(err);
});
}
} else {
ElMessage({
......@@ -718,7 +712,6 @@ export default {
console.error(err);
});
}
getVersionList();
// TAG: 接口获取流程图数据
......@@ -751,6 +744,7 @@ export default {
});
}
let flow_id = getFlowId(); // flow_id 流程ID
if (flow_id) {
getFlowData(flow_id);
}
......@@ -781,7 +775,7 @@ export default {
/***************** 版本操作 ***************/
const onSelectFlowVersion = (id: number, code: number, note: string) => {
// 切换版本信息
updateUrl(id); // 更新URL
updateFlowId(id); // 更新缓存flow_id
getFlowData(id); // 更新流程图数据
state.select_flow_version = code;
}
......@@ -805,7 +799,7 @@ export default {
.then(res => {
if (res.data.code) {
flow_id = res.data.data; // 更新flow_id
updateUrl(flow_id); // 更新url
updateFlowId(flow_id); // 更新缓存flow_id
getFlowData(flow_id);
ElMessage({
type: 'success',
......@@ -855,7 +849,7 @@ export default {
});
let flow_id = res.data.data;
state.reloadLoading = true; // 打开loading
updateUrl(flow_id); // 更新URL
updateFlowId(flow_id); // 更新缓存flow_id
getVersionList(); // 刷新版本列表
getFlowData(flow_id); // 更新流程图数据
}
......@@ -1056,8 +1050,7 @@ export default {
const paths = [];
findPathsToEndNode(edges, 'start-node', [], paths);
const urlQuery = getQueryParams(location.href);
let flow_id = urlQuery.flow_id? urlQuery.flow_id : ''; // 流程id
let flow_id = getFlowId(); // 流程id
if (paths.length) {
axios.post('/admin/?a=save_flow', qs.stringify({
......@@ -1068,7 +1061,7 @@ export default {
.then(res => {
if (res.data.code) {
flow_id = res.data.data; // 更新flow_id
updateUrl(flow_id); // 更新url
updateFlowId(flow_id); // 更新缓存flow_id
console.log(paths); // 输出满足条件的路径结果数组
} else {
ElMessage({
......@@ -1154,8 +1147,7 @@ export default {
state.statusLoading = true;
state.main_attr_set = true; // 重置更多属性的显示
const urlQuery = getQueryParams(location.href);
let flow_id = urlQuery.flow_id? urlQuery.flow_id : ''; // 流程id
let flow_id = getFlowId(); // 流程id
//
axios.get('/admin/?a=flow_node_property&node_code=' + model.id + '&flow_id=' + flow_id)
.then((res: any) => {
......@@ -1383,8 +1375,7 @@ export default {
})
});
const urlQuery = getQueryParams(location.href);
let flow_id = urlQuery.flow_id? urlQuery.flow_id : ''; // 流程id
let flow_id = getFlowId(); // 流程id
// TAG: 保存表单信息
axios.post('/admin/?a=save_node_property', qs.stringify({
......@@ -1645,8 +1636,7 @@ export default {
const paths = [];
findPathsToEndNode(edges, 'start-node', [], paths);
const urlQuery = getQueryParams(location.href);
let flow_id = urlQuery.flow_id? urlQuery.flow_id : ''; // 流程id
let flow_id = getFlowId(); // 流程id
if (paths.length) {
axios.post('/admin/?a=save_flow', qs.stringify({
......@@ -1661,7 +1651,7 @@ export default {
message: '保存流程图成功',
});
flow_id = res.data.data; // 更新flow_id
updateUrl(flow_id); // 更新url
updateFlowId(flow_id); // 更新缓存flow_id
console.log(paths); // 输出满足条件的路径结果数组
} else {
ElMessage({
......