Hooke / vue-flow-editor

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
6290cc47 1 parent 3e16ecd4

新增切换流程图版本功能

Inline Side-by-side
Showing 1 changed file with 111 additions and 44 deletions
......@@ -316,19 +316,18 @@
<span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">启用</span>
</div>
</el-tooltip> -->
<!-- <div style="position: absolute; top:20px; right: 15px;">
<div style="position: absolute; top:20px; right: 15px;">
<el-dropdown trigger="click">
<div style="margin-left: 15px;">
<div style="width: 10px; height: 10px; background-color: #009688; border-radius: 50%; display: inline-block;"></div> <span style="font-size: 13px;">流程版本 (V1)</span>
<div style="width: 10px; height: 10px; background-color: #009688; border-radius: 50%; display: inline-block;"></div> <span style="font-size: 13px;">流程版本 (V{{ state.flow_version }})</span>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>流程版本 (V2)</el-dropdown-item>
<el-dropdown-item>流程版本 (V3)</el-dropdown-item>
<el-dropdown-item @click.native="onSelectFlowVersion(item.id)" v-for="(item, index) in state.flow_version_list" :key="index">流程版本 (V{{ item.code }})</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div> -->
</div>
</template>
<!-- 表单底部按钮 -->
<template v-slot:foot>
......@@ -338,6 +337,12 @@
</div>
</template>
</vue-flow-editor>
<div v-if="state.reloadLoading" style="position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.5);width: 100%; height: 100%; z-index: 2006;">
<div class="el-loading-spinner">
<svg class="circular" viewBox="0 0 50 50"><circle class="path" cx="25" cy="25" r="20" fill="none"></circle></svg>
<p class="el-loading-text">加载流程图中...</p>
</div>
</div>
</div>
<select-user-view
......@@ -419,6 +424,7 @@ export default {
detailModel: null,
editorLoading: false, // 开始编辑器的loading状态
statusLoading: false, // loading状态
reloadLoading: false, // loading状态
// menuData: [
// {
// label: '流程节点',
......@@ -507,6 +513,8 @@ export default {
auth_all_edit: false,
field_auths: [],
field_extend: [],
flow_version: '',
flow_version_list: [],
})
/**
......@@ -574,47 +582,54 @@ export default {
// TAG: 接口获取流程图数据
const flowData = ref<any>(null);
axios.get('/admin/?a=flow_nodes&flow_id=' + flow_id)
.then(res => {
if (res.data.code) {
let nodes = res.data.data.nodes;
let edges = res.data.data.edges;
// 没有流程图数据
if (!nodes.length && !edges.length) {
flowData.value = AppData; // 设置默认的数据
// 马上保存一次
axios.post('/admin/?a=save_flow', qs.stringify({
form_id: +form_id,
flow_id: '',
data: JSON.stringify(AppData)
}))
.then(res => {
if (res.data.code) {
flow_id = res.data.data; // 更新flow_id
updateUrl(flow_id); // 更新url
}
})
.catch(err => {
console.log(err);
});
const getFlowData = (flow_id) => {
flowData.value = null;
axios.get('/admin/?a=flow_nodes&flow_id=' + flow_id)
.then(res => {
if (res.data.code) {
let nodes = res.data.data.nodes;
let edges = res.data.data.edges;
// 没有流程图数据
if (!nodes.length && !edges.length) {
flowData.value = AppData; // 设置默认的数据
// 马上保存一次
axios.post('/admin/?a=save_flow', qs.stringify({
form_id: +form_id,
flow_id: '',
data: JSON.stringify(AppData)
}))
.then(res => {
if (res.data.code) {
flow_id = res.data.data; // 更新flow_id
updateUrl(flow_id); // 更新url
}
})
.catch(err => {
console.log(err);
});
} else {
flowData.value = res.data.data; // 获取已存在的数据
}
state.reloadLoading = false;
} else {
flowData.value = res.data.data; // 获取已存在的数据
ElMessage({
type: 'error',
message: res.data.msg,
});
state.reloadLoading = false;
}
} else {
ElMessage({
type: 'error',
message: res.data.msg,
});
}
})
.catch(err => {
console.error(err);
});
})
.catch(err => {
console.error(err);
state.reloadLoading = false;
});
}
getFlowData(flow_id);
// 显示提示框的标志位
var showConfirmation = true;
onMounted(async () => {
document.title = '可视化流程设计器'
// 显示提示框的标志位
var showConfirmation = true;
// 监听 beforeunload 事件
window.addEventListener('beforeunload', function (event) {
if (showConfirmation) {
......@@ -632,7 +647,56 @@ export default {
// state.detailModel = null;
// editor.closeModel();
// });
})
getVersionList();
});
const getVersionList = () => {
// 获取版本信息列表
axios.get('/admin/?a=flow_version&form_id=' + form_id)
.then(res => {
if (res.data.code) {
// 启用的版本号
res.data.data.forEach((ele) => {
if (ele.status === '1') {
state.flow_version = ele.code;
}
});
// 版本列表
state.flow_version_list = res.data.data.filter((ele) => {
return ele.status !== '1';
});
} else {
ElMessage({
type: 'error',
message: res.data.msg,
});
}
})
.catch(err => {
console.error(err);
});
}
const onSelectFlowVersion = (id: string) => {
// 切换版本信息
axios.post('/admin/?a=enable_flow_version', qs.stringify({ id: +id }))
.then(res => {
if (res.data.code) {
getVersionList();
updateUrl(res.data.data);
state.reloadLoading = true;
getFlowData(res.data.data);
} else {
ElMessage({
type: 'error',
message: res.data.msg,
});
}
})
.catch(err => {
console.error(err);
});
}
function handleActiveChange(name: any) {
console.warn(name)
......@@ -1451,6 +1515,7 @@ export default {
handleBeforeAdd,
handleAfterAdd,
onSelectFlowVersion,
handleActiveChange,
onAuthVisibleChange,
onAuthEditableChange,
......@@ -1613,13 +1678,15 @@ body {
}
.el-loading-spinner .path {
stroke: #009688!important;
stroke: #009688 !important;
}
.el-loading-spinner .el-loading-text {
color: #009688 !important;
}
:focus-visible { outline: none; }
:focus-visible {
outline: none;
}
.el-dropdown-menu__item:not(.is-disabled):focus {
background-color: white;
......