hookehuyr

新增复制节点功能和保存流程图提示功能

Showing 1 changed file with 33 additions and 11 deletions
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 <div class="app" style="height: 100vh"> 2 <div class="app" style="height: 100vh">
3 <vue-flow-editor 3 <vue-flow-editor
4 ref="editor" 4 ref="editor"
5 - modelWidth="30%" 5 + modelWidth="300px"
6 :data="state.data" 6 :data="state.data"
7 :grid="showGrid" 7 :grid="showGrid"
8 :miniMap="showMiniMap" 8 :miniMap="showMiniMap"
...@@ -314,7 +314,7 @@ ...@@ -314,7 +314,7 @@
314 import { ref, reactive, onMounted, watch, nextTick } from 'vue' 314 import { ref, reactive, onMounted, watch, nextTick } from 'vue'
315 import { AppData } from './data.js' 315 import { AppData } from './data.js'
316 import { staticPath } from './utils' 316 import { staticPath } from './utils'
317 -import { ElNotification } from 'element-plus' 317 +import { ElNotification, ElMessage, ElMessageBox } from 'element-plus'
318 import axios from './axios' 318 import axios from './axios'
319 import $ from 'jquery' 319 import $ from 'jquery'
320 import { Calendar, Search } from '@element-plus/icons-vue' 320 import { Calendar, Search } from '@element-plus/icons-vue'
...@@ -535,8 +535,12 @@ export default { ...@@ -535,8 +535,12 @@ export default {
535 } 535 }
536 536
537 /************** 字段权限操作 ***************/ 537 /************** 字段权限操作 ***************/
538 + /**
539 + * 检查权限全选状态
540 + * @param type
541 + */
538 const checkAuthAll = (type: string) => { 542 const checkAuthAll = (type: string) => {
539 - if (type === 'visible') { 543 + if (type === 'visible') { // 可见列
540 let total_count = state.field_auths.filter((ele) => { 544 let total_count = state.field_auths.filter((ele) => {
541 if (!ele.visible.disabled) { 545 if (!ele.visible.disabled) {
542 return ele; 546 return ele;
...@@ -553,7 +557,7 @@ export default { ...@@ -553,7 +557,7 @@ export default {
553 state.auth_all_checked = false; 557 state.auth_all_checked = false;
554 } 558 }
555 } 559 }
556 - if (type === 'editable') { 560 + if (type === 'editable') { // 可编辑列
557 let total_count = state.field_auths.filter((ele) => { 561 let total_count = state.field_auths.filter((ele) => {
558 if (!ele.editable.disabled) { 562 if (!ele.editable.disabled) {
559 return ele; 563 return ele;
...@@ -975,7 +979,7 @@ export default { ...@@ -975,7 +979,7 @@ export default {
975 // console.log('handleAfterAdd', model); 979 // console.log('handleAfterAdd', model);
976 if (type === 'node') { 980 if (type === 'node') {
977 console.log(`新增节点`) 981 console.log(`新增节点`)
978 - // TODO: 测试更新ID 982 + // TODO: 测试更新ID,窗口变化时连接线会消失,但是只有单独操作一次的时候才会发生,如果多次生成连接线不会发生。
979 model.id = String(new Date().getTime()); 983 model.id = String(new Date().getTime());
980 editor.updateModel(model); 984 editor.updateModel(model);
981 } 985 }
...@@ -1057,8 +1061,26 @@ export default { ...@@ -1057,8 +1061,26 @@ export default {
1057 targetAnchor, 1061 targetAnchor,
1058 })) 1062 }))
1059 // console.log(JSON.stringify({ nodes, edges }, null, 2)); 1063 // console.log(JSON.stringify({ nodes, edges }, null, 2));
1060 - console.log(nodes) 1064 +
1061 - console.log(edges) 1065 + ElMessageBox.confirm(
1066 + '是否确定保存流程图?',
1067 + '温馨提示',
1068 + {
1069 + confirmButtonText: '确认',
1070 + cancelButtonText: '取消',
1071 + type: 'warning',
1072 + }
1073 + )
1074 + .then(() => {
1075 + ElMessage({
1076 + type: 'success',
1077 + message: '保存流程图成功',
1078 + })
1079 + console.log(nodes)
1080 + console.log(edges)
1081 + })
1082 + .catch(() => {
1083 + });
1062 } 1084 }
1063 1085
1064 const startFlow = () => { // 启用流程图 1086 const startFlow = () => { // 启用流程图
...@@ -1150,9 +1172,9 @@ body { ...@@ -1150,9 +1172,9 @@ body {
1150 } 1172 }
1151 } 1173 }
1152 1174
1153 -.demo-tabs > .el-tabs__content { 1175 +/* .demo-tabs > .el-tabs__content { */
1154 /* padding: 32px; */ 1176 /* padding: 32px; */
1155 -} 1177 +/* } */
1156 1178
1157 .flow-tag__wrapper { 1179 .flow-tag__wrapper {
1158 border: 1px dashed #dcdfe6; 1180 border: 1px dashed #dcdfe6;
...@@ -1185,10 +1207,10 @@ body { ...@@ -1185,10 +1207,10 @@ body {
1185 justify-content: space-between; 1207 justify-content: space-between;
1186 align-items: center; 1208 align-items: center;
1187 margin-bottom: 5px; 1209 margin-bottom: 5px;
1188 - .left { 1210 + /* .left {
1189 } 1211 }
1190 .right { 1212 .right {
1191 - } 1213 + } */
1192 .active { 1214 .active {
1193 color: #409eff; 1215 color: #409eff;
1194 } 1216 }
......