Hooke / vue-flow-editor

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
5034e472 1 parent b3c05390

请求API查询方式更新

Inline Side-by-side
Showing 3 changed files with 296 additions and 393 deletions
......@@ -427,6 +427,7 @@ import type { FormInstance, FormRules } from 'element-plus'
import qs from 'qs'
import { after } from 'lodash-es';
// import { VueSpinner } from 'vue3-spinners';
import { flowVersionAPI, saveFlowAPI, flowNodesAPI, enableFlowVersionAPI, flowNodePropertyAPI, saveFlowNodePropertyAPI } from "./api";
const G6 = (window as any).G6.default as any
......@@ -484,28 +485,6 @@ export default {
editorLoading: false, // 开始编辑器的loading状态
statusLoading: false, // loading状态
reloadLoading: false, // loading状态
// menuData: [
// {
// label: '流程节点',
// menus: [
// { label: '开始', shape: 'ellipse', id: 'start-node' },
// { label: '结束', shape: 'ellipse', id: 'end-node' },
// { label: '审批节点', busType: '123' },
// { label: '判断节点', shape: 'diamond' },
// ],
// },
// {
// label: '其他形状节点',
// menus: [
// { label: '矩形节点', shape: 'rect' },
// { label: '圆形节点', shape: 'circle' },
// { label: '椭圆节点', shape: 'ellipse' },
// { label: '菱形节点', shape: 'diamond' },
// { label: '三角形节点', shape: 'triangle' },
// { label: '星形节点', shape: 'star' },
// ],
// },
// ],
controlList: {
flow: {
text: '流程节点',
......@@ -585,35 +564,6 @@ export default {
});
/**
* 更新URL中的flow_id
* @param flowId
*/
// 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参数
* @param url
*/
......@@ -663,86 +613,55 @@ export default {
* 因为从外部页面到流程图页面，flow_id都需要从当前页面生成
* 获取版本信息列表
*/
const getVersionList = () => {
axios.get('/admin/?a=flow_version&form_id=' + form_id)
.then(res => {
if (res.data.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; // 流程版本列表显示启用项
}
const getVersionList = async () => {
const { code, data } = await flowVersionAPI({ form_id });
if (code) {
state.version_list = 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; // 流程版本列表显示启用项
}
let find_index = _.findIndex(state.version_list, (v) => v.id == flow_id);
if (flow_id && find_index > -1) { // 缓存里访问过并且在列表里
state.select_flow_version = state.version_list[find_index].code; // 选中的版本号
} else { // 如果列表里没有启用的版本获取 flow_id 不存在时，默认选中第一个
state.select_flow_version = state.version_list[0].code; // 选中的版本号
state.reloadLoading = true; // 打开loading
updateFlowId(state.version_list[0].id); // 更新 flow_id
getFlowData(state.version_list[0].id);// 新的 flow_id，更新流程图
}
} 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);
});
let find_index = _.findIndex(state.version_list, (v) => v.id == flow_id);
if (flow_id && find_index > -1) { // 缓存里访问过并且在列表里
state.select_flow_version = state.version_list[find_index].code; // 选中的版本号
} else { // 如果列表里没有启用的版本获取 flow_id 不存在时，默认选中第一个
state.select_flow_version = state.version_list[0].code; // 选中的版本号
state.reloadLoading = true; // 打开loading
updateFlowId(state.version_list[0].id); // 更新 flow_id
getFlowData(state.version_list[0].id);// 新的 flow_id，更新流程图
}
} else { // 没有默认版本列表，自动新增流程
const { code } = await saveFlowAPI({ form_id: +form_id, flow_id: '', data: JSON.stringify(AppData) });
if (code) {
getVersionList(); // 刷新版本列表显示
}
} else {
ElMessage({
type: 'error',
message: res.data.msg,
});
}
})
.catch(err => {
console.error(err);
});
}
}
getVersionList();
// TAG: 接口获取流程图数据
const flowData = ref<any>(null);
const getFlowData = (flow_id: any) => {
const getFlowData = async (flow_id: any) => {
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; // 设置默认的数据
} else {
flowData.value = res.data.data; // 获取已存在的数据
}
state.reloadLoading = false;
const { code, data } = await flowNodesAPI({ flow_id });
if (code) {
let nodes = data.nodes;
let edges = data.edges;
// 没有流程图数据
if (!nodes.length && !edges.length) {
flowData.value = AppData; // 设置默认的数据
} else {
ElMessage({
type: 'error',
message: res.data.msg,
});
state.reloadLoading = false;
flowData.value = data; // 获取已存在的数据
}
})
.catch(err => {
console.error(err);
state.reloadLoading = false;
});
} else {
state.reloadLoading = false;
}
}
let flow_id = getFlowId(); // flow_id 流程ID
if (flow_id) {
state.reloadLoading = true; // 打开loading
......@@ -791,74 +710,45 @@ export default {
}
}
const addFlowVersion = () => { // 新增版本
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
state.reloadLoading = true; // 打开loading
updateFlowId(flow_id); // 更新缓存flow_id
getFlowData(flow_id);
ElMessage({
type: 'success',
message: '新增成功',
});
axios.get('/admin/?a=flow_version&form_id=' + form_id)
.then(res => {
if (res.data.code) {
// 版本列表
state.version_list = res.data.data;
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;
}
});
} else {
ElMessage({
type: 'error',
message: res.data.msg,
});
const addFlowVersion = async () => { // 新增版本
const { code, data } = await saveFlowAPI({ form_id: +form_id, flow_id: '', data: JSON.stringify(AppData) });
if (code) {
ElMessage({
type: 'success',
message: '新增成功',
});
flow_id = data; // 更新flow_id
updateFlowId(flow_id); // 更新缓存 flow_id
state.reloadLoading = true; // 打开 loading
getFlowData(flow_id); // 更新流程图数据
const flow_version = await flowVersionAPI({ form_id });
if (flow_version.code) {
state.version_list = flow_version.data; // 更新版本列表
state.version_list.forEach((ele) => {
if (ele.id === +flow_id) {
state.select_flow_version = ele.code; // 选中新增的版本
}
})
.catch(err => {
console.error(err);
});
}
})
.catch(err => {
console.log(err);
});
}
}
const setFLowVersionEnable = () => { // 启用版本
const setFLowVersionEnable = async () => { // 启用版本
state.versionForm.type = 2;
axios.post('/admin/?a=enable_flow_version', qs.stringify(state.versionForm))
.then(res => {
if (res.data.code) {
state.current_enable_version = state.versionForm.code;
state.dialogVersionFormVisible = false;
ElMessage({
type: 'success',
message: '启用成功',
});
let flow_id = res.data.data;
state.reloadLoading = true; // 打开loading
updateFlowId(flow_id); // 更新缓存flow_id
getVersionList(); // 刷新版本列表
getFlowData(flow_id); // 更新流程图数据
}
})
.catch(err => {
console.error(err);
});
const { code, data } = await enableFlowVersionAPI(state.versionForm);
if (code) {
ElMessage({
type: 'success',
message: '启用成功',
});
state.current_enable_version = state.versionForm.code; // 当前选中的版本号
state.dialogVersionFormVisible = false; // 关闭弹框
let flow_id = data;
updateFlowId(flow_id); // 更新缓存flow_id
getVersionList(); // 刷新版本列表
state.reloadLoading = true; // 打开loading
getFlowData(flow_id); // 更新流程图数据
}
}
const editFlowVersion = () => { // 编辑版本
......@@ -872,50 +762,30 @@ export default {
});
}
const deleteFlowVersion = () => { // 删除版本
const deleteFlowVersion = async () => { // 删除版本
state.versionForm.type = 1;
axios.post('/admin/?a=enable_flow_version', qs.stringify(state.versionForm))
.then(res => {
if (res.data.code) {
state.dialogVersionFormVisible = false;
ElMessage({
type: 'success',
message: '删除成功',
});
getVersionList();
} else {
ElMessage({
type: 'error',
message: res.data.msg,
});
}
})
.catch(err => {
console.error(err);
});
const { code } = await enableFlowVersionAPI(state.versionForm);
if (code) {
ElMessage({
type: 'success',
message: '删除成功',
});
state.dialogVersionFormVisible = false;
getVersionList();
}
}
const saveFlowVersionNote = () => { // 保存版本描述
const saveFlowVersionNote = async () => { // 保存版本描述
state.versionForm.type = 0;
axios.post('/admin/?a=enable_flow_version', qs.stringify(state.versionForm))
.then(res => {
if (res.data.code) {
state.dialogVersionFormVisible = false;
ElMessage({
type: 'success',
message: '保存成功',
});
getVersionList(); // 刷新版本列表
} else {
ElMessage({
type: 'error',
message: res.data.msg,
});
}
})
.catch(err => {
console.error(err);
});
const { code } = await enableFlowVersionAPI(state.versionForm);
if (code) {
ElMessage({
type: 'success',
message: '保存成功',
});
state.dialogVersionFormVisible = false;
getVersionList(); // 刷新版本列表
}
}
/***************** END *******************/
......@@ -1119,20 +989,20 @@ export default {
/**
* 单击节点回调
*
* @param {Event} e - The event object representing the click event.
*/
function onClickNode(e: myEvent) {
const onClickNode = async (e: myEvent) => {
const model = G6.Util.clone(e.item.get('model')); // 节点的基本属性
model.style = model.style || {}
model.labelCfg = model.labelCfg || { style: {} }
model.data = model.data ? model.data : {};
state.detailModel = model
state.detailModel = model;
// 判断是否是流程节点
let model_id = model.id;
if (model_id !== 'end-node') {
// 判断是否是开始节点, 不设置负责人
if (model_id ==='start-node') {
......@@ -1140,141 +1010,80 @@ export default {
} else {
state.user_attr_set = true;
}
// 判断是否是抄送节点
if (model.control === 'cc') {
state.select_attr_set = false;
} else {
state.select_attr_set = true;
}
state.statusLoading = true;
state.main_attr_set = true; // 重置更多属性的显示
let flow_id = getFlowId(); // 流程id
//
axios.get('/admin/?a=flow_node_property&node_code=' + model.id + '&flow_id=' + flow_id)
.then((res: any) => {
if (res.data.code) {
state.statusLoading = false;
//
flowData.value.nodes.forEach((ele: any, idx: number) => {
if (ele.id === model.id) {
state.node_idx = idx;
}
});
state.node_name = res.data.data.name ? res.data.data.name : model.text; // 节点名称
state.userTags = res.data.data.user; // 节点负责人
state.dialogUserTags = state.userTags; // 同步给弹框数据
state.field_extend = res.data.data.field; // 字段权限临时储存，实际传给后端数据结构
state.field_auths = []; // 清空字段权限列表，本地使用数据结构
// 转换数据结构使用
state.field_extend.forEach(ele => {
if (!ele.field_extend.disabled) { // 流程节点字段权限列表内是否显示
state.field_auths.push({
field_id: ele.field_extend.field_id,
name: ele.field_extend.label,
visible: {
checked: ele.field_extend.visibled,
disabled: false,
},
editable: {
checked: ele.field_extend.editabled,
disabled: ele.field_extend.readonly,
},
show: true,
})
}
});
// 检查字段权限选中情况
checkAuthAll('visible');
checkAuthAll('editable');
//
state.more_attr = res.data.data.property; // 更多属性
// state.more_attr = [ // 更多属性
// {
// id: 'no-1',
// label: '审批意见',
// desc: '开启审批意见后，节点负责人处理流程时须按要求填写审批意见',
// data: [
// {
// id: 'text-1',
// label: '文本意见',
// show: true,
// desc: '用户在处理流程时，可通过输入框或快捷选项录入文本意见。',
// btnText: '',
// },
// {
// id: 'signature-1',
// label: '手写签名',
// show: false,
// desc: '用户在处理流程时，需要签名确认。',
// btnText: ''
// },
// ]
// },
// {
// id: 'no-2',
// label: '节点操作',
// desc: '定义流程负责人在处理流程时可以进行的操作',
// data: [
// {
// id: 'node-1',
// label: '提交',
// show: true,
// desc: '用户在处理流程时点击此按钮，将保存用户在此节点中对数据的更改，流程数据流转至后续节点。',
// btnText: '提交'
// },
// {
// id: 'node-2',
// label: '暂存',
// show: false,
// desc: '暂存后将保存在此节点中对数据的更改，流程不发生流转。',
// btnText: '暂存'
// },
// {
// id: 'node-3',
// label: '撤回',
// show: false,
// desc: '开启后，用户在处理流程时点击此按钮，将保存用户在此节点中对数据的更改，同时流程退回到指定的节点中。',
// btnText: '撤回'
// },
// {
// id: 'node-4',
// label: '回退',
// show: false,
// desc: '开启后，用户在处理流程时点击此按钮，将保存用户在此节点中对数据的更改，同时流程退回到指定的节点中。',
// btnText: '回退'
// },
// ],
// }
// ];
// 开始节点不显示审批意见
if (model_id ==='start-node') {
// TODO：等待后台结构
state.more_attr = state.more_attr.filter((ele: any) => {
return ele.label !== '审批意见'
});
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 (state.detailModel.control === 'cc') {
state.more_attr = [];
});
state.node_name = data.name ? data.name : model.text; // 节点名称
state.userTags = data.user; // 节点负责人
state.dialogUserTags = state.userTags; // 同步给弹框数据
state.field_extend = data.field; // 字段权限临时储存，实际传给后端数据结构
state.field_auths = []; // 清空字段权限列表，本地使用数据结构
// 转换数据结构使用
state.field_extend.forEach(ele => {
if (!ele.field_extend.disabled) { // 流程节点字段权限列表内是否显示
state.field_auths.push({
field_id: ele.field_extend.field_id,
name: ele.field_extend.label,
visible: {
checked: ele.field_extend.visibled,
disabled: false,
},
editable: {
checked: ele.field_extend.editabled,
disabled: ele.field_extend.readonly,
},
show: true,
})
}
// 打开属性表单
state.attr_radio = '基础属性'; // 还原tab默认值
editor.openModel();
} else {
ElMessage({
type: 'error',
message: res.data.msg,
});
// 检查字段权限选中情况
checkAuthAll('visible');
checkAuthAll('editable');
state.more_attr = data.property; // 更多属性
// 开始节点不显示审批意见
if (model_id ==='start-node') {
state.more_attr = state.more_attr.filter((ele: any) => {
return ele.label !== '审批意见'
});
state.statusLoading = false;
}
})
.catch((err: any) => {
console.log(err);
// 抄送节点不显示
if (state.detailModel.control === 'cc') {
state.more_attr = [];
}
// 打开属性表单
state.attr_radio = '基础属性'; // 还原tab默认值
editor.openModel();
} else {
state.statusLoading = false;
});
}
} else {
editor.closeModel()
editor.closeModel();
}
}
......@@ -1380,31 +1189,16 @@ export default {
let flow_id = getFlowId(); // 流程id
// TAG: 保存表单信息
axios.post('/admin/?a=save_node_property', qs.stringify({
flow_id: +flow_id,
node_code: state.detailModel.id,
data: JSON.stringify({ name: state.node_name, user: state.userTags, field: state.field_extend, property: state.more_attr })
}))
.then(res => {
if (res.data.code) {
state.detailModel.text = state.node_name;
// 更新流程图信息
editor.updateModel(state.detailModel);
editor.closeModel();
ElMessage({
type:'success',
message: '保存成功',
});
} else {
ElMessage({
type: 'error',
message: res.data.msg,
});
}
})
.catch(err => {
console.error(err);
});
const { code, data } = await saveFlowNodePropertyAPI({ flow_id: +flow_id, node_code: state.detailModel.id, data: JSON.stringify({ name: state.node_name, user: state.userTags, field: state.field_extend, property: state.more_attr }) })
if (code) {
ElMessage({
type:'success',
message: '保存成功',
});
state.detailModel.text = state.node_name; // 更新节点名称显示
editor.updateModel(state.detailModel); // 更新流程图信息
editor.closeModel();
}
}
/**
......@@ -1633,7 +1427,7 @@ export default {
type: 'warning',
}
)
.then(() => {
.then(async () => {
// 检查路径有效性
const paths = [];
findPathsToEndNode(edges, 'start-node', [], paths);
......@@ -1641,30 +1435,16 @@ export default {
let flow_id = getFlowId(); // 流程id
if (paths.length) {
axios.post('/admin/?a=save_flow', qs.stringify({
form_id: +form_id,
flow_id: +flow_id,
data: JSON.stringify({ nodes, edges })
}))
.then(res => {
if (res.data.code) {
ElMessage({
type: 'success',
message: '保存流程图成功',
});
flow_id = res.data.data; // 更新flow_id
updateFlowId(flow_id); // 更新缓存flow_id
console.log(paths); // 输出满足条件的路径结果数组
} else {
ElMessage({
type: 'error',
message: res.data.msg,
});
}
})
.catch(err => {
console.log(err);
});
const { code, data } = await saveFlowAPI({ form_id: +form_id, flow_id: +flow_id, data: JSON.stringify({ nodes, edges }) });
if (code) {
ElMessage({
type: 'success',
message: '保存流程图成功',
});
flow_id = data; // 更新flow_id
updateFlowId(flow_id); // 更新缓存flow_id
console.log(paths); // 输出满足条件的路径结果数组
}
} else {
ElNotification.error('缺少一条从开始节点到结束节点的完整流程！');
}
......
/*
* @Date: 2023-11-30 10:33:56
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-11-30 10:55:38
* @FilePath: /vue-flow-editor/doc/api/fn.js
* @Description: 文件描述
*/
import axios from '../axios';
import qs from 'qs'
import { ElMessage } from 'element-plus'
/**
* 网络请求功能函数
* @param {*} api 请求axios接口
* @returns 请求成功后，获取数据
*/
export const fn = (api) => {
return api
.then(res => {
if (res.data.code === 1) {
return res.data || true;
} else {
// tslint:disable-next-line: no-console
// if (!res.data.show) return false;
ElMessage({
type: 'error',
message: res.data.msg,
});
return false;
}
})
.catch(err => {
// tslint:disable-next-line: no-console
console.error(err);
return false;
})
.finally(() => { // 最终执行
})
}
/**
* 统一 GET/POST 不同传参形式
*/
export const fetch = {
get: function (api, params) {
return axios.get(api, { params })
},
post: function (api, params) {
return axios.post(api, params)
},
stringifyPost: function (api, params) {
return axios.post(api, qs.stringify(params))
},
basePost: function (url, data, config) {
return axios.post(url, data, config)
}
}
/*
* @Date: 2023-11-30 10:34:01
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-11-30 11:32:14
* @FilePath: /vue-flow-editor/doc/api/index.js
* @Description: 文件描述
*/
import { fn, fetch } from './fn';
const Api = {
FLOW_VERSION: '/admin/?a=flow_version',
SAVE_FLOW: '/admin/?a=save_flow',
FLOW_NODES: '/admin/?a=flow_nodes',
ENABLE_FLOW_VERSION: '/admin/?a=enable_flow_version',
FLOW_NODE_PROPERTY: '/admin/?a=flow_node_property',
SAVE_FLOW_NODE_PROPERTY: '/admin/?a=save_node_property',
}
/**
* @description: 版本列表
* @param {*} form_id 表单 ID
* @returns
*/
export const flowVersionAPI = (params) => fn(fetch.get(Api.FLOW_VERSION, params));
/**
* @description: 保存流程
* @param {*} form_id 表单 ID
* @param {*} flow_id 流程 ID
* @param {*} data 流程数据
* @returns
*/
export const saveFlowAPI = (params) => fn(fetch.stringifyPost(Api.SAVE_FLOW, params));
/**
* @description: 流程图数据
* @param {*} flow_id 流程 ID
* @returns
*/
export const flowNodesAPI = (params) => fn(fetch.get(Api.FLOW_NODES, params));
/**
* @description: 启用流程/删除流程/仅保存流程说明
* @param {*} id 待操作的流程ID
* @param {*} note 流程说明
* @param {*} type 操作方式 0:仅保存流程说明 1:删除,2:启用
* @returns
*/
export const enableFlowVersionAPI = (params) => fn(fetch.stringifyPost(Api.ENABLE_FLOW_VERSION, params));
/**
* @description: 获取节点属性
* @param {*} flow_id 流程 ID
* @param {*} node_code 前端的节点 ID
* @returns
*/
export const flowNodePropertyAPI = (params) => fn(fetch.get(Api.FLOW_NODE_PROPERTY, params));
/**
* @description: 保存节点属性
* @param {*} flow_id 流程 ID
* @param {*} node_code 前端定义的节点id，非真正数据行id
* @param {*} data 节点属性的数据，json格式字符串
* @returns
*/
export const saveFlowNodePropertyAPI = (params) => fn(fetch.stringifyPost(Api.SAVE_FLOW_NODE_PROPERTY, params));