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

@@ -2,7 +2,7 @@
   <div class="app" style="height: 100vh">
     <vue-flow-editor
       ref="editor"
-      modelWidth="30%"
+      modelWidth="300px"
       :data="state.data"
       :grid="showGrid"
       :miniMap="showMiniMap"
@@ -314,7 +314,7 @@
 import { ref, reactive, onMounted, watch, nextTick } from 'vue'
 import { AppData } from './data.js'
 import { staticPath } from './utils'
-import { ElNotification } from 'element-plus'
+import { ElNotification, ElMessage, ElMessageBox } from 'element-plus'
 import axios from './axios'
 import $ from 'jquery'
 import { Calendar, Search } from '@element-plus/icons-vue'
@@ -535,8 +535,12 @@ export default {
     }
 
     /************** 字段权限操作 ***************/
+    /**
+     * 检查权限全选状态
+     * @param type
+     */
     const checkAuthAll = (type: string) => {
-      if (type === 'visible') {
+      if (type === 'visible') { // 可见列
         let total_count = state.field_auths.filter((ele) => {
           if (!ele.visible.disabled) {
             return ele;
@@ -553,7 +557,7 @@ export default {
           state.auth_all_checked = false;
         }
       }
-      if (type === 'editable') {
+      if (type === 'editable') { // 可编辑列
         let total_count = state.field_auths.filter((ele) => {
           if (!ele.editable.disabled) {
             return ele;
@@ -975,7 +979,7 @@ export default {
       // console.log('handleAfterAdd', model);
       if (type === 'node') {
         console.log(`新增节点`)
-        // TODO: 测试更新ID
+        // TODO: 测试更新ID，窗口变化时连接线会消失，但是只有单独操作一次的时候才会发生，如果多次生成连接线不会发生。
         model.id = String(new Date().getTime());
         editor.updateModel(model);
       }
@@ -1057,8 +1061,26 @@ export default {
         targetAnchor,
       }))
       // console.log(JSON.stringify({ nodes, edges }, null, 2));
+
+      ElMessageBox.confirm(
+        '是否确定保存流程图?',
+        '温馨提示',
+        {
+          confirmButtonText: '确认',
+          cancelButtonText: '取消',
+          type: 'warning',
+        }
+      )
+        .then(() => {
+          ElMessage({
+            type: 'success',
+            message: '保存流程图成功',
+          })
           console.log(nodes)
           console.log(edges)
+        })
+        .catch(() => {
+        });
     }
 
     const startFlow = () => { // 启用流程图
@@ -1150,9 +1172,9 @@ body {
   }
 }
 
-.demo-tabs > .el-tabs__content {
+/* .demo-tabs > .el-tabs__content { */
   /* padding: 32px; */
-}
+/* } */
 
 .flow-tag__wrapper {
   border: 1px dashed #dcdfe6;
@@ -1185,10 +1207,10 @@ body {
       justify-content: space-between;
       align-items: center;
       margin-bottom: 5px;
-      .left {
+      /* .left {
       }
       .right {
-      }
+      } */
       .active {
         color: #409eff;
       }