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' ...@@ -427,6 +427,7 @@ import type { FormInstance, FormRules } from 'element-plus'
427 import qs from 'qs' 427 import qs from 'qs'
428 import { after } from 'lodash-es'; 428 import { after } from 'lodash-es';
429 // import { VueSpinner } from 'vue3-spinners'; 429 // import { VueSpinner } from 'vue3-spinners';
430 +import { flowVersionAPI, saveFlowAPI, flowNodesAPI, enableFlowVersionAPI, flowNodePropertyAPI, saveFlowNodePropertyAPI } from "./api";
430 431
431 const G6 = (window as any).G6.default as any 432 const G6 = (window as any).G6.default as any
432 433
...@@ -484,28 +485,6 @@ export default { ...@@ -484,28 +485,6 @@ export default {
484 editorLoading: false, // 开始编辑器的loading状态 485 editorLoading: false, // 开始编辑器的loading状态
485 statusLoading: false, // loading状态 486 statusLoading: false, // loading状态
486 reloadLoading: false, // loading状态 487 reloadLoading: false, // loading状态
487 - // menuData: [
488 - // {
489 - // label: '流程节点',
490 - // menus: [
491 - // { label: '开始', shape: 'ellipse', id: 'start-node' },
492 - // { label: '结束', shape: 'ellipse', id: 'end-node' },
493 - // { label: '审批节点', busType: '123' },
494 - // { label: '判断节点', shape: 'diamond' },
495 - // ],
496 - // },
497 - // {
498 - // label: '其他形状节点',
499 - // menus: [
500 - // { label: '矩形节点', shape: 'rect' },
501 - // { label: '圆形节点', shape: 'circle' },
502 - // { label: '椭圆节点', shape: 'ellipse' },
503 - // { label: '菱形节点', shape: 'diamond' },
504 - // { label: '三角形节点', shape: 'triangle' },
505 - // { label: '星形节点', shape: 'star' },
506 - // ],
507 - // },
508 - // ],
509 controlList: { 488 controlList: {
510 flow: { 489 flow: {
511 text: '流程节点', 490 text: '流程节点',
...@@ -585,35 +564,6 @@ export default { ...@@ -585,35 +564,6 @@ export default {
585 }); 564 });
586 565
587 /** 566 /**
588 - * 更新URL中的flow_id
589 - * @param flowId
590 - */
591 - // const updateUrl = (flowId: any) => {
592 - // // 获取当前 URL
593 - // const url = new URL(window.location.href);
594 -
595 - // // 获取 URL 中的查询参数对象
596 - // const searchParams = url.searchParams;
597 -
598 - // // 检查是否存在 form_id 参数
599 - // if (!searchParams.has('form_id')) {
600 - // // 如果不存在 form_id 参数，则添加 form_id 和 flow_id 参数
601 - // searchParams.append('flow_id', flowId);
602 - // } else {
603 - // // 如果存在 form_id 参数，则更新 flow_id 参数的值
604 - // searchParams.set('flow_id', flowId);
605 - // }
606 -
607 - // // 将更新后的查询参数设置回 URL 对象
608 - // url.search = searchParams.toString();
609 -
610 - // // 修改完 URL 后，更新浏览器地址栏显示的 URL
611 - // window.history.replaceState(null, '', url.toString());
612 - // // TODO: 到时候测试iframe的时候，看看有没有影响
613 - // // 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';
614 - // }
615 -
616 - /**
617 * 获取url参数 567 * 获取url参数
618 * @param url 568 * @param url
619 */ 569 */
...@@ -663,86 +613,55 @@ export default { ...@@ -663,86 +613,55 @@ export default {
663 * 因为从外部页面到流程图页面，flow_id都需要从当前页面生成 613 * 因为从外部页面到流程图页面，flow_id都需要从当前页面生成
664 * 获取版本信息列表 614 * 获取版本信息列表
665 */ 615 */
666 - const getVersionList = () => { 616 + const getVersionList = async () => {
667 - axios.get('/admin/?a=flow_version&form_id=' + form_id) 617 + const { code, data } = await flowVersionAPI({ form_id });
668 - .then(res => { 618 + if (code) {
669 - if (res.data.code) { 619 + state.version_list = data;// 流程版本列表
670 - state.version_list = res.data.data;// 流程版本列表 620 + let flow_id = getFlowId(); // 流程id，如果是新的流程，则为空
671 - let flow_id = getFlowId(); // 流程id，如果是新的流程，则为空 621 + if (state.version_list.length) { // 从外部页面第一次跳到流程编辑页面时，flow_id不存在
672 - if (state.version_list.length) { // 从外部页面第一次跳到流程编辑页面时，flow_id不存在 622 + let index = _.findIndex(state.version_list, { status: '1' });
673 - let index = _.findIndex(state.version_list, { status: '1' }); 623 + if (index > -1) {
674 - if (index > -1) { 624 + state.current_enable_version = state.version_list[index].code; // 流程版本列表显示启用项
675 - state.current_enable_version = state.version_list[index].code; // 流程版本列表显示启用项 625 + }
676 - }
677 626
678 - let find_index = _.findIndex(state.version_list, (v) => v.id == flow_id); 627 + let find_index = _.findIndex(state.version_list, (v) => v.id == flow_id);
679 - if (flow_id && find_index > -1) { // 缓存里访问过并且在列表里 628 + if (flow_id && find_index > -1) { // 缓存里访问过并且在列表里
680 - state.select_flow_version = state.version_list[find_index].code; // 选中的版本号 629 + state.select_flow_version = state.version_list[find_index].code; // 选中的版本号
681 - } else { // 如果列表里没有启用的版本获取 flow_id 不存在时，默认选中第一个 630 + } else { // 如果列表里没有启用的版本获取 flow_id 不存在时，默认选中第一个
682 - state.select_flow_version = state.version_list[0].code; // 选中的版本号 631 + state.select_flow_version = state.version_list[0].code; // 选中的版本号
683 - state.reloadLoading = true; // 打开loading 632 + state.reloadLoading = true; // 打开loading
684 - updateFlowId(state.version_list[0].id); // 更新 flow_id 633 + updateFlowId(state.version_list[0].id); // 更新 flow_id
685 - getFlowData(state.version_list[0].id);// 新的 flow_id，更新流程图 634 + getFlowData(state.version_list[0].id);// 新的 flow_id，更新流程图
686 - } 635 + }
687 - } else { // 没有默认版本列表，自动新增流程 636 + } else { // 没有默认版本列表，自动新增流程
688 - axios.post('/admin/?a=save_flow', qs.stringify({ form_id: +form_id, flow_id: '', data: JSON.stringify(AppData) })) 637 + const { code } = await saveFlowAPI({ form_id: +form_id, flow_id: '', data: JSON.stringify(AppData) });
689 - .then(res => { 638 + if (code) {
690 - if (res.data.code) { 639 + getVersionList(); // 刷新版本列表显示
691 - getVersionList(); // 刷新版本列表显示
692 - } else {
693 - ElMessage({
694 - type: 'error',
695 - message: res.data.msg,
696 - });
697 - }
698 - })
699 - .catch(err => {
700 - console.log(err);
701 - });
702 } 640 }
703 - } else {
704 - ElMessage({
705 - type: 'error',
706 - message: res.data.msg,
707 - });
708 } 641 }
709 - }) 642 + }
710 - .catch(err => {
711 - console.error(err);
712 - });
713 } 643 }
714 getVersionList(); 644 getVersionList();
715 645
716 // TAG: 接口获取流程图数据 646 // TAG: 接口获取流程图数据
717 const flowData = ref<any>(null); 647 const flowData = ref<any>(null);
718 - const getFlowData = (flow_id: any) => { 648 + const getFlowData = async (flow_id: any) => {
719 flowData.value = null; 649 flowData.value = null;
720 - axios.get('/admin/?a=flow_nodes&flow_id=' + flow_id) 650 + const { code, data } = await flowNodesAPI({ flow_id });
721 - .then(res => { 651 + if (code) {
722 - if (res.data.code) { 652 + let nodes = data.nodes;
723 - let nodes = res.data.data.nodes; 653 + let edges = data.edges;
724 - let edges = res.data.data.edges; 654 + // 没有流程图数据
725 - // 没有流程图数据 655 + if (!nodes.length && !edges.length) {
726 - if (!nodes.length && !edges.length) { 656 + flowData.value = AppData; // 设置默认的数据
727 - flowData.value = AppData; // 设置默认的数据
728 - } else {
729 - flowData.value = res.data.data; // 获取已存在的数据
730 - }
731 - state.reloadLoading = false;
732 } else { 657 } else {
733 - ElMessage({ 658 + flowData.value = data; // 获取已存在的数据
734 - type: 'error',
735 - message: res.data.msg,
736 - });
737 - state.reloadLoading = false;
738 } 659 }
739 - })
740 - .catch(err => {
741 - console.error(err);
742 state.reloadLoading = false; 660 state.reloadLoading = false;
743 - }); 661 + } else {
662 + state.reloadLoading = false;
663 + }
744 } 664 }
745 -
746 let flow_id = getFlowId(); // flow_id 流程ID 665 let flow_id = getFlowId(); // flow_id 流程ID
747 if (flow_id) { 666 if (flow_id) {
748 state.reloadLoading = true; // 打开loading 667 state.reloadLoading = true; // 打开loading
...@@ -791,74 +710,45 @@ export default { ...@@ -791,74 +710,45 @@ export default {
791 } 710 }
792 } 711 }
793 712
794 - const addFlowVersion = () => { // 新增版本 713 + const addFlowVersion = async () => { // 新增版本
795 - axios.post('/admin/?a=save_flow', qs.stringify({ 714 + const { code, data } = await saveFlowAPI({ form_id: +form_id, flow_id: '', data: JSON.stringify(AppData) });
796 - form_id: +form_id, 715 + if (code) {
797 - flow_id: '', 716 + ElMessage({
798 - data: JSON.stringify(AppData) 717 + type: 'success',
799 - })) 718 + message: '新增成功',
800 - .then(res => { 719 + });
801 - if (res.data.code) { 720 + flow_id = data; // 更新flow_id
802 - flow_id = res.data.data; // 更新flow_id 721 + updateFlowId(flow_id); // 更新缓存 flow_id
803 - state.reloadLoading = true; // 打开loading 722 + state.reloadLoading = true; // 打开 loading
804 - updateFlowId(flow_id); // 更新缓存flow_id 723 + getFlowData(flow_id); // 更新流程图数据
805 - getFlowData(flow_id); 724 + const flow_version = await flowVersionAPI({ form_id });
806 - ElMessage({ 725 + if (flow_version.code) {
807 - type: 'success', 726 + state.version_list = flow_version.data; // 更新版本列表
808 - message: '新增成功', 727 + state.version_list.forEach((ele) => {
809 - }); 728 + if (ele.id === +flow_id) {
810 - axios.get('/admin/?a=flow_version&form_id=' + form_id) 729 + state.select_flow_version = ele.code; // 选中新增的版本
811 - .then(res => {
812 - if (res.data.code) {
813 - // 版本列表
814 - state.version_list = res.data.data;
815 - state.version_list.forEach((ele) => {
816 - if (ele.id === +flow_id) {
817 - // 选中新增的版本
818 - state.select_flow_version = ele.code;
819 - }
820 - if (ele.status === '1') {
821 - state.current_enable_version = ele.code;
822 - }
823 - });
824 - } else {
825 - ElMessage({
826 - type: 'error',
827 - message: res.data.msg,
828 - });
829 } 730 }
830 - })
831 - .catch(err => {
832 - console.error(err);
833 }); 731 });
834 } 732 }
835 - }) 733 + }
836 - .catch(err => {
837 - console.log(err);
838 - });
839 } 734 }
840 735
841 - const setFLowVersionEnable = () => { // 启用版本 736 + const setFLowVersionEnable = async () => { // 启用版本
842 state.versionForm.type = 2; 737 state.versionForm.type = 2;
843 - axios.post('/admin/?a=enable_flow_version', qs.stringify(state.versionForm)) 738 + const { code, data } = await enableFlowVersionAPI(state.versionForm);
844 - .then(res => { 739 + if (code) {
845 - if (res.data.code) { 740 + ElMessage({
846 - state.current_enable_version = state.versionForm.code; 741 + type: 'success',
847 - state.dialogVersionFormVisible = false; 742 + message: '启用成功',
848 - ElMessage({ 743 + });
849 - type: 'success', 744 + state.current_enable_version = state.versionForm.code; // 当前选中的版本号
850 - message: '启用成功', 745 + state.dialogVersionFormVisible = false; // 关闭弹框
851 - }); 746 + let flow_id = data;
852 - let flow_id = res.data.data; 747 + updateFlowId(flow_id); // 更新缓存flow_id
853 - state.reloadLoading = true; // 打开loading 748 + getVersionList(); // 刷新版本列表
854 - updateFlowId(flow_id); // 更新缓存flow_id 749 + state.reloadLoading = true; // 打开loading
855 - getVersionList(); // 刷新版本列表 750 + getFlowData(flow_id); // 更新流程图数据
856 - getFlowData(flow_id); // 更新流程图数据 751 + }
857 - }
858 - })
859 - .catch(err => {
860 - console.error(err);
861 - });
862 } 752 }
863 753
864 const editFlowVersion = () => { // 编辑版本 754 const editFlowVersion = () => { // 编辑版本
...@@ -872,50 +762,30 @@ export default { ...@@ -872,50 +762,30 @@ export default {
872 }); 762 });
873 } 763 }
874 764
875 - const deleteFlowVersion = () => { // 删除版本 765 + const deleteFlowVersion = async () => { // 删除版本
876 state.versionForm.type = 1; 766 state.versionForm.type = 1;
877 - axios.post('/admin/?a=enable_flow_version', qs.stringify(state.versionForm)) 767 + const { code } = await enableFlowVersionAPI(state.versionForm);
878 - .then(res => { 768 + if (code) {
879 - if (res.data.code) { 769 + ElMessage({
880 - state.dialogVersionFormVisible = false; 770 + type: 'success',
881 - ElMessage({ 771 + message: '删除成功',
882 - type: 'success', 772 + });
883 - message: '删除成功', 773 + state.dialogVersionFormVisible = false;
884 - }); 774 + getVersionList();
885 - getVersionList(); 775 + }
886 - } else {
887 - ElMessage({
888 - type: 'error',
889 - message: res.data.msg,
890 - });
891 - }
892 - })
893 - .catch(err => {
894 - console.error(err);
895 - });
896 } 776 }
897 777
898 - const saveFlowVersionNote = () => { // 保存版本描述 778 + const saveFlowVersionNote = async () => { // 保存版本描述
899 state.versionForm.type = 0; 779 state.versionForm.type = 0;
900 - axios.post('/admin/?a=enable_flow_version', qs.stringify(state.versionForm)) 780 + const { code } = await enableFlowVersionAPI(state.versionForm);
901 - .then(res => { 781 + if (code) {
902 - if (res.data.code) { 782 + ElMessage({
903 - state.dialogVersionFormVisible = false; 783 + type: 'success',
904 - ElMessage({ 784 + message: '保存成功',
905 - type: 'success', 785 + });
906 - message: '保存成功', 786 + state.dialogVersionFormVisible = false;
907 - }); 787 + getVersionList(); // 刷新版本列表
908 - getVersionList(); // 刷新版本列表 788 + }
909 - } else {
910 - ElMessage({
911 - type: 'error',
912 - message: res.data.msg,
913 - });
914 - }
915 - })
916 - .catch(err => {
917 - console.error(err);
918 - });
919 } 789 }
920 790
921 /***************** END *******************/ 791 /***************** END *******************/
...@@ -1119,20 +989,20 @@ export default { ...@@ -1119,20 +989,20 @@ export default {
1119 989
1120 /** 990 /**
1121 * 单击节点回调 991 * 单击节点回调
1122 - *
1123 * @param {Event} e - The event object representing the click event. 992 * @param {Event} e - The event object representing the click event.
1124 */ 993 */
1125 - function onClickNode(e: myEvent) { 994 + const onClickNode = async (e: myEvent) => {
1126 const model = G6.Util.clone(e.item.get('model')); // 节点的基本属性 995 const model = G6.Util.clone(e.item.get('model')); // 节点的基本属性
1127 model.style = model.style || {} 996 model.style = model.style || {}
1128 model.labelCfg = model.labelCfg || { style: {} } 997 model.labelCfg = model.labelCfg || { style: {} }
1129 998
1130 model.data = model.data ? model.data : {}; 999 model.data = model.data ? model.data : {};
1131 1000
1132 - state.detailModel = model 1001 + state.detailModel = model;
1133 1002
1134 // 判断是否是流程节点 1003 // 判断是否是流程节点
1135 let model_id = model.id; 1004 let model_id = model.id;
1005 +
1136 if (model_id !== 'end-node') { 1006 if (model_id !== 'end-node') {
1137 // 判断是否是开始节点, 不设置负责人 1007 // 判断是否是开始节点, 不设置负责人
1138 if (model_id ==='start-node') { 1008 if (model_id ==='start-node') {
...@@ -1140,141 +1010,80 @@ export default { ...@@ -1140,141 +1010,80 @@ export default {
1140 } else { 1010 } else {
1141 state.user_attr_set = true; 1011 state.user_attr_set = true;
1142 } 1012 }
1013 +
1143 // 判断是否是抄送节点 1014 // 判断是否是抄送节点
1144 if (model.control === 'cc') { 1015 if (model.control === 'cc') {
1145 state.select_attr_set = false; 1016 state.select_attr_set = false;
1146 } else { 1017 } else {
1147 state.select_attr_set = true; 1018 state.select_attr_set = true;
1148 } 1019 }
1149 - state.statusLoading = true; 1020 +
1150 state.main_attr_set = true; // 重置更多属性的显示 1021 state.main_attr_set = true; // 重置更多属性的显示
1151 1022
1152 let flow_id = getFlowId(); // 流程id 1023 let flow_id = getFlowId(); // 流程id
1153 - // 1024 + state.statusLoading = true;
1154 - axios.get('/admin/?a=flow_node_property&node_code=' + model.id + '&flow_id=' + flow_id) 1025 + // 获取节点属性
1155 - .then((res: any) => { 1026 + const { code, data } = await flowNodePropertyAPI({ node_code: model.id, flow_id });
1156 - if (res.data.code) { 1027 + if (code) {
1157 - state.statusLoading = false; 1028 + state.statusLoading = false;
1158 - // 1029 +
1159 - flowData.value.nodes.forEach((ele: any, idx: number) => { 1030 + flowData.value.nodes.forEach((ele: any, idx: number) => {
1160 - if (ele.id === model.id) { 1031 + if (ele.id === model.id) {
1161 - state.node_idx = idx; 1032 + state.node_idx = idx; // 详情里显示节点索引
1162 - }
1163 - });
1164 - state.node_name = res.data.data.name ? res.data.data.name : model.text; // 节点名称
1165 - state.userTags = res.data.data.user; // 节点负责人
1166 - state.dialogUserTags = state.userTags; // 同步给弹框数据
1167 - state.field_extend = res.data.data.field; // 字段权限临时储存，实际传给后端数据结构
1168 - state.field_auths = []; // 清空字段权限列表，本地使用数据结构
1169 - // 转换数据结构使用
1170 - state.field_extend.forEach(ele => {
1171 - if (!ele.field_extend.disabled) { // 流程节点字段权限列表内是否显示
1172 - state.field_auths.push({
1173 - field_id: ele.field_extend.field_id,
1174 - name: ele.field_extend.label,
1175 - visible: {
1176 - checked: ele.field_extend.visibled,
1177 - disabled: false,
1178 - },
1179 - editable: {
1180 - checked: ele.field_extend.editabled,
1181 - disabled: ele.field_extend.readonly,
1182 - },
1183 - show: true,
1184 - })
1185 - }
1186 - });
1187 - // 检查字段权限选中情况
1188 - checkAuthAll('visible');
1189 - checkAuthAll('editable');
1190 - //
1191 - state.more_attr = res.data.data.property; // 更多属性
1192 - // state.more_attr = [ // 更多属性
1193 - // {
1194 - // id: 'no-1',
1195 - // label: '审批意见',
1196 - // desc: '开启审批意见后，节点负责人处理流程时须按要求填写审批意见',
1197 - // data: [
1198 - // {
1199 - // id: 'text-1',
1200 - // label: '文本意见',
1201 - // show: true,
1202 - // desc: '用户在处理流程时，可通过输入框或快捷选项录入文本意见。',
1203 - // btnText: '',
1204 - // },
1205 - // {
1206 - // id: 'signature-1',
1207 - // label: '手写签名',
1208 - // show: false,
1209 - // desc: '用户在处理流程时，需要签名确认。',
1210 - // btnText: ''
1211 - // },
1212 - // ]
1213 - // },
1214 - // {
1215 - // id: 'no-2',
1216 - // label: '节点操作',
1217 - // desc: '定义流程负责人在处理流程时可以进行的操作',
1218 - // data: [
1219 - // {
1220 - // id: 'node-1',
1221 - // label: '提交',
1222 - // show: true,
1223 - // desc: '用户在处理流程时点击此按钮，将保存用户在此节点中对数据的更改，流程数据流转至后续节点。',
1224 - // btnText: '提交'
1225 - // },
1226 - // {
1227 - // id: 'node-2',
1228 - // label: '暂存',
1229 - // show: false,
1230 - // desc: '暂存后将保存在此节点中对数据的更改，流程不发生流转。',
1231 - // btnText: '暂存'
1232 - // },
1233 - // {
1234 - // id: 'node-3',
1235 - // label: '撤回',
1236 - // show: false,
1237 - // desc: '开启后，用户在处理流程时点击此按钮，将保存用户在此节点中对数据的更改，同时流程退回到指定的节点中。',
1238 - // btnText: '撤回'
1239 - // },
1240 - // {
1241 - // id: 'node-4',
1242 - // label: '回退',
1243 - // show: false,
1244 - // desc: '开启后，用户在处理流程时点击此按钮，将保存用户在此节点中对数据的更改，同时流程退回到指定的节点中。',
1245 - // btnText: '回退'
1246 - // },
1247 - // ],
1248 - // }
1249 - // ];
1250 - // 开始节点不显示审批意见
1251 - if (model_id ==='start-node') {
1252 - // TODO：等待后台结构
1253 - state.more_attr = state.more_attr.filter((ele: any) => {
1254 - return ele.label !== '审批意见'
1255 - });
1256 } 1033 }
1257 - // 抄送节点不显示 1034 + });
1258 - if (state.detailModel.control === 'cc') { 1035 +
1259 - state.more_attr = []; 1036 + state.node_name = data.name ? data.name : model.text; // 节点名称
1037 + state.userTags = data.user; // 节点负责人
1038 + state.dialogUserTags = state.userTags; // 同步给弹框数据
1039 + state.field_extend = data.field; // 字段权限临时储存，实际传给后端数据结构
1040 + state.field_auths = []; // 清空字段权限列表，本地使用数据结构
1041 +
1042 + // 转换数据结构使用
1043 + state.field_extend.forEach(ele => {
1044 + if (!ele.field_extend.disabled) { // 流程节点字段权限列表内是否显示
1045 + state.field_auths.push({
1046 + field_id: ele.field_extend.field_id,
1047 + name: ele.field_extend.label,
1048 + visible: {
1049 + checked: ele.field_extend.visibled,
1050 + disabled: false,
1051 + },
1052 + editable: {
1053 + checked: ele.field_extend.editabled,
1054 + disabled: ele.field_extend.readonly,
1055 + },
1056 + show: true,
1057 + })
1260 } 1058 }
1261 - // 打开属性表单 1059 + });
1262 - state.attr_radio = '基础属性'; // 还原tab默认值 1060 +
1263 - editor.openModel(); 1061 + // 检查字段权限选中情况
1264 - } else { 1062 + checkAuthAll('visible');
1265 - ElMessage({ 1063 + checkAuthAll('editable');
1266 - type: 'error', 1064 +
1267 - message: res.data.msg, 1065 + state.more_attr = data.property; // 更多属性
1066 +
1067 + // 开始节点不显示审批意见
1068 + if (model_id ==='start-node') {
1069 + state.more_attr = state.more_attr.filter((ele: any) => {
1070 + return ele.label !== '审批意见'
1268 }); 1071 });
1269 - state.statusLoading = false;
1270 } 1072 }
1271 - }) 1073 + // 抄送节点不显示
1272 - .catch((err: any) => { 1074 + if (state.detailModel.control === 'cc') {
1273 - console.log(err); 1075 + state.more_attr = [];
1076 + }
1077 +
1078 + // 打开属性表单
1079 + state.attr_radio = '基础属性'; // 还原tab默认值
1080 +
1081 + editor.openModel();
1082 + } else {
1274 state.statusLoading = false; 1083 state.statusLoading = false;
1275 - }); 1084 + }
1276 } else { 1085 } else {
1277 - editor.closeModel() 1086 + editor.closeModel();
1278 } 1087 }
1279 } 1088 }
1280 1089
...@@ -1380,31 +1189,16 @@ export default { ...@@ -1380,31 +1189,16 @@ export default {
1380 let flow_id = getFlowId(); // 流程id 1189 let flow_id = getFlowId(); // 流程id
1381 1190
1382 // TAG: 保存表单信息 1191 // TAG: 保存表单信息
1383 - axios.post('/admin/?a=save_node_property', qs.stringify({ 1192 + 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 }) })
1384 - flow_id: +flow_id, 1193 + if (code) {
1385 - node_code: state.detailModel.id, 1194 + ElMessage({
1386 - data: JSON.stringify({ name: state.node_name, user: state.userTags, field: state.field_extend, property: state.more_attr }) 1195 + type:'success',
1387 - })) 1196 + message: '保存成功',
1388 - .then(res => { 1197 + });
1389 - if (res.data.code) { 1198 + state.detailModel.text = state.node_name; // 更新节点名称显示
1390 - state.detailModel.text = state.node_name; 1199 + editor.updateModel(state.detailModel); // 更新流程图信息
1391 - // 更新流程图信息 1200 + editor.closeModel();
1392 - editor.updateModel(state.detailModel); 1201 + }
1393 - editor.closeModel();
1394 - ElMessage({
1395 - type:'success',
1396 - message: '保存成功',
1397 - });
1398 - } else {
1399 - ElMessage({
1400 - type: 'error',
1401 - message: res.data.msg,
1402 - });
1403 - }
1404 - })
1405 - .catch(err => {
1406 - console.error(err);
1407 - });
1408 } 1202 }
1409 1203
1410 /** 1204 /**
...@@ -1633,7 +1427,7 @@ export default { ...@@ -1633,7 +1427,7 @@ export default {
1633 type: 'warning', 1427 type: 'warning',
1634 } 1428 }
1635 ) 1429 )
1636 - .then(() => { 1430 + .then(async () => {
1637 // 检查路径有效性 1431 // 检查路径有效性
1638 const paths = []; 1432 const paths = [];
1639 findPathsToEndNode(edges, 'start-node', [], paths); 1433 findPathsToEndNode(edges, 'start-node', [], paths);
...@@ -1641,30 +1435,16 @@ export default { ...@@ -1641,30 +1435,16 @@ export default {
1641 let flow_id = getFlowId(); // 流程id 1435 let flow_id = getFlowId(); // 流程id
1642 1436
1643 if (paths.length) { 1437 if (paths.length) {
1644 - axios.post('/admin/?a=save_flow', qs.stringify({ 1438 + const { code, data } = await saveFlowAPI({ form_id: +form_id, flow_id: +flow_id, data: JSON.stringify({ nodes, edges }) });
1645 - form_id: +form_id, 1439 + if (code) {
1646 - flow_id: +flow_id, 1440 + ElMessage({
1647 - data: JSON.stringify({ nodes, edges }) 1441 + type: 'success',
1648 - })) 1442 + message: '保存流程图成功',
1649 - .then(res => { 1443 + });
1650 - if (res.data.code) { 1444 + flow_id = data; // 更新flow_id
1651 - ElMessage({ 1445 + updateFlowId(flow_id); // 更新缓存flow_id
1652 - type: 'success', 1446 + console.log(paths); // 输出满足条件的路径结果数组
1653 - message: '保存流程图成功', 1447 + }
1654 - });
1655 - flow_id = res.data.data; // 更新flow_id
1656 - updateFlowId(flow_id); // 更新缓存flow_id
1657 - console.log(paths); // 输出满足条件的路径结果数组
1658 - } else {
1659 - ElMessage({
1660 - type: 'error',
1661 - message: res.data.msg,
1662 - });
1663 - }
1664 - })
1665 - .catch(err => {
1666 - console.log(err);
1667 - });
1668 } else { 1448 } else {
1669 ElNotification.error('缺少一条从开始节点到结束节点的完整流程！'); 1449 ElNotification.error('缺少一条从开始节点到结束节点的完整流程！');
1670 } 1450 }
......
1 +/*
2 + * @Date: 2023-11-30 10:33:56
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2023-11-30 10:55:38
5 + * @FilePath: /vue-flow-editor/doc/api/fn.js
6 + * @Description: 文件描述
7 + */
8 +import axios from '../axios';
9 +import qs from 'qs'
10 +import { ElMessage } from 'element-plus'
11 +
12 +/**
13 + * 网络请求功能函数
14 + * @param {*} api 请求axios接口
15 + * @returns 请求成功后，获取数据
16 + */
17 +export const fn = (api) => {
18 + return api
19 + .then(res => {
20 + if (res.data.code === 1) {
21 + return res.data || true;
22 + } else {
23 + // tslint:disable-next-line: no-console
24 + // if (!res.data.show) return false;
25 + ElMessage({
26 + type: 'error',
27 + message: res.data.msg,
28 + });
29 + return false;
30 + }
31 + })
32 + .catch(err => {
33 + // tslint:disable-next-line: no-console
34 + console.error(err);
35 + return false;
36 + })
37 + .finally(() => { // 最终执行
38 + })
39 +}
40 +
41 +/**
42 + * 统一 GET/POST 不同传参形式
43 + */
44 +export const fetch = {
45 + get: function (api, params) {
46 + return axios.get(api, { params })
47 + },
48 + post: function (api, params) {
49 + return axios.post(api, params)
50 + },
51 + stringifyPost: function (api, params) {
52 + return axios.post(api, qs.stringify(params))
53 + },
54 + basePost: function (url, data, config) {
55 + return axios.post(url, data, config)
56 + }
57 +}
1 +/*
2 + * @Date: 2023-11-30 10:34:01
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2023-11-30 11:32:14
5 + * @FilePath: /vue-flow-editor/doc/api/index.js
6 + * @Description: 文件描述
7 + */
8 +import { fn, fetch } from './fn';
9 +
10 +const Api = {
11 + FLOW_VERSION: '/admin/?a=flow_version',
12 + SAVE_FLOW: '/admin/?a=save_flow',
13 + FLOW_NODES: '/admin/?a=flow_nodes',
14 + ENABLE_FLOW_VERSION: '/admin/?a=enable_flow_version',
15 + FLOW_NODE_PROPERTY: '/admin/?a=flow_node_property',
16 + SAVE_FLOW_NODE_PROPERTY: '/admin/?a=save_node_property',
17 +}
18 +
19 +/**
20 + * @description: 版本列表
21 + * @param {*} form_id 表单 ID
22 + * @returns
23 + */
24 +export const flowVersionAPI = (params) => fn(fetch.get(Api.FLOW_VERSION, params));
25 +
26 +/**
27 + * @description: 保存流程
28 + * @param {*} form_id 表单 ID
29 + * @param {*} flow_id 流程 ID
30 + * @param {*} data 流程数据
31 + * @returns
32 + */
33 +export const saveFlowAPI = (params) => fn(fetch.stringifyPost(Api.SAVE_FLOW, params));
34 +
35 +/**
36 + * @description: 流程图数据
37 + * @param {*} flow_id 流程 ID
38 + * @returns
39 + */
40 +export const flowNodesAPI = (params) => fn(fetch.get(Api.FLOW_NODES, params));
41 +
42 +/**
43 + * @description: 启用流程/删除流程/仅保存流程说明
44 + * @param {*} id 待操作的流程ID
45 + * @param {*} note 流程说明
46 + * @param {*} type 操作方式 0:仅保存流程说明 1:删除,2:启用
47 + * @returns
48 + */
49 +export const enableFlowVersionAPI = (params) => fn(fetch.stringifyPost(Api.ENABLE_FLOW_VERSION, params));
50 +
51 +/**
52 + * @description: 获取节点属性
53 + * @param {*} flow_id 流程 ID
54 + * @param {*} node_code 前端的节点 ID
55 + * @returns
56 + */
57 +export const flowNodePropertyAPI = (params) => fn(fetch.get(Api.FLOW_NODE_PROPERTY, params));
58 +
59 +/**
60 + * @description: 保存节点属性
61 + * @param {*} flow_id 流程 ID
62 + * @param {*} node_code 前端定义的节点id，非真正数据行id
63 + * @param {*} data 节点属性的数据，json格式字符串
64 + * @returns
65 + */
66 +export const saveFlowNodePropertyAPI = (params) => fn(fetch.stringifyPost(Api.SAVE_FLOW_NODE_PROPERTY, params));