完善预览流程显示

hookehuyr
Commit 018e0109a94f61b143c3f8e2f553146d79de3d9d 018e0109 1 parent 1b4086e2
Showing 3 changed files with 41 additions and 70 deletions
doc/App.vue
package.json
yarn.lock
--- a/doc/App.vue
View file @018e010
+++ b/doc/App.vue
View file @018e010
@@ -478,28 +478,30 @@
     </template>
   </el-dialog>
-  <el-dialog v-model="state.dialogPreviewVisible" title="预览" width="80%" center>
+  <el-dialog class="preview-dialog" v-model="state.dialogPreviewVisible" title="预览节点流程" width="100%" center style="margin-top: 0; margin-bottom: 0;">
-    <div class="preview-container" style="height: 500px; overflow: scroll;">
+    <div class="preview-container" :style="{height: state.window_height}">
       <vue-flow-editor-form
         ref="editor"
-        height="500px"
+        :height="state.window_height"
         :data="flowData"
         :grid="showGrid"
         :miniMap="showMiniMap"
         :onRef="onRef"
         :multipleSelect="showMultipleSelect"
         :loading="state.editorLoading"
-        :beforeAdd="handlePreviewBeforeAdd"
-        @dragstart-node="onDragStartNode"
         @click-node="onClickNodePreview"
         :controlConfig="state.controlConfig"
         :toolbarButtonHandler="toolbarButtonHandler"
       ></vue-flow-editor-form>
     </div>
+    <div class="preview-detail-container">
+      {{ state.detailModel }}
+      <iframe src="https://oa-dev.onwall.cn/f/custom_form/front/index.html#/?code=fboupg&model=preview" width="100%" height="100%" style="border: 0;"></iframe>
+    </div>
     <template #footer>
       <span class="dialog-footer">
         <el-button @click="state.dialogPreviewVisible = false">取消</el-button>
-        <el-button color="#009688" @click="confirmSort">确认</el-button>
+        <el-button color="#009688" @click="state.dialogPreviewVisible = false">确认</el-button>
       </span>
     </template>
   </el-dialog>
@@ -672,6 +674,7 @@ export default {
       node_attr: {},
       node_tree: {},
       show_preview: false,
+      window_height: '500px'
     });
     const setNodeTree = (id: string, data: object) => {
@@ -908,6 +911,8 @@ export default {
       //   state.detailModel = null;
       //   editor.closeModel();
       // });
+      // 适口高度
+      state.window_height = $(window).height() - 200 + 'px';
     });
     /**
@@ -2262,60 +2267,7 @@ export default {
       model.data = model.data ? model.data : {};
-      // 判断是否是流程节点
+      state.detailModel = model;
-      let model_id = model.id;
-
-      if (model_id !== 'end-node') {
-        // 判断是否是开始节点, 不设置负责人
-        if (model_id ==='start-node') {
-          state.user_attr_set = false;
-        } else {
-          state.user_attr_set = true;
-        }
-
-        // 判断是否是抄送节点
-        if (model.control === 'cc') {
-          state.select_attr_set = false;
-        } else {
-          state.select_attr_set = true;
-        }
-
-        flowData.value.nodes.forEach((ele: any, idx: number) => {
-          if (ele.id === model.id) {
-            state.node_idx = idx; // 详情里显示节点索引
-          }
-        });
-
-      } else {
-        state.detailModel = null;
-        editor.closeModel();
-      }
-    }
-
-    /**
-     * 预览添加前校验
-     *
-     * @param {object} model - The model object.
-     * @param {string} type - The type of the model.
-     * @return {Promise} A promise that resolves to a result or rejects with an error.
-     */
-    function handlePreviewBeforeAdd(model: myObj, type: string): Promise<any> {
-      const source = model.source;
-      const target = model.target;
-      let { nodes, edges } = editor.editorState.graph.save();
-
-      if (type === 'edge') {
-        ElNotification.error('预览模式禁止操作')
-        return Promise.reject('reject')
-      }
-    }
-
-    function onDragStartNode(e) {
-      // const source = model.source;
-      // const target = model.target;
-      // let { nodes, edges } = editor.editorState.graph.save();
-      ElNotification.error('预览模式禁止操作')
-
     }
     return {
@@ -2376,8 +2328,6 @@ export default {
       toolbarButtonHandler,
       openPreview,
       onClickNodePreview,
-      handlePreviewBeforeAdd,
-      onDragStartNode,
       onRef: (e: any) => (editor = e),
       staticPath,
@@ -2647,5 +2597,21 @@ body {
 .sort-item-border {
   border-bottom: 0 !important;
 }
-
+.preview-dialog {
+  .el-dialog__body {
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+.preview-detail-container {
+  position: fixed;
+  width: 30vw;
+  height: 80vh;
+  top: 10vh;
+  right: 20px;
+  border: 1px solid #c3c3c3;
+  background: #fff;
+  /* padding: 1rem; */
+  /* border-radius: 5px; */
+}
 </style>
--- a/package.json
View file @018e010
+++ b/package.json
View file @018e010
@@ -26,7 +26,7 @@
     "@vue/composition-api": "^1.7.2",
     "axios": "^1.6.0",
     "echarts": "^5.1.2",
-    "element-plus": "^2.4.2",
+    "element-plus": "^2.5.6",
     "jquery": "^3.7.1",
     "lodash": "^4.17.21",
     "qs": "^6.11.2",
--- a/yarn.lock
View file @018e010
+++ b/yarn.lock
View file @018e010
@@ -958,11 +958,16 @@
   resolved "https://mirrors.cloud.tencent.com/npm/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz#b6c75a56a1947cc916ea058772d666a2c8932f31"
   integrity sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==
-"@element-plus/icons-vue@^2.0.6", "@element-plus/icons-vue@^2.1.0":
+"@element-plus/icons-vue@^2.1.0":
   version "2.1.0"
   resolved "https://mirrors.cloud.tencent.com/npm/@element-plus/icons-vue/-/icons-vue-2.1.0.tgz#7ad90d08a8c0d5fd3af31c4f73264ca89614397a"
   integrity sha512-PSBn3elNoanENc1vnCfh+3WA9fimRC7n+fWkf3rE5jvv+aBohNHABC/KAR5KWPecxWxDTVT1ERpRbOMRcOV/vA==
+"@element-plus/icons-vue@^2.3.1":
+  version "2.3.1"
+  resolved "https://mirrors.cloud.tencent.com/npm/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz#1f635ad5fdd5c85ed936481525570e82b5a8307a"
+  integrity sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==
+
 "@floating-ui/core@^1.4.2":
   version "1.5.0"
   resolved "https://mirrors.cloud.tencent.com/npm/@floating-ui/core/-/core-1.5.0.tgz#5c05c60d5ae2d05101c3021c1a2a350ddc027f8c"
@@ -3792,13 +3797,13 @@ electron-to-chromium@^1.3.793:
   resolved "https://registry.nlark.com/electron-to-chromium/download/electron-to-chromium-1.3.806.tgz?cache=0&sync_timestamp=1628906712766&other_urls=https%3A%2F%2Fregistry.nlark.com%2Felectron-to-chromium%2Fdownload%2Felectron-to-chromium-1.3.806.tgz"
   integrity sha1-IVAhAPEa6tbFAdHNfyUE8WyTZkI=
-element-plus@^2.4.2:
+element-plus@^2.5.6:
-  version "2.4.2"
+  version "2.5.6"
-  resolved "https://mirrors.cloud.tencent.com/npm/element-plus/-/element-plus-2.4.2.tgz#2a24632e0904ccd7bbbd64c269704f6b9969833c"
+  resolved "https://mirrors.cloud.tencent.com/npm/element-plus/-/element-plus-2.5.6.tgz#d63dabc6330c0e2abe6f97cf99013a30140940d1"
-  integrity sha512-E/HwXX7JF1LPvQSjs0fZ8WblIoc0quoXsRXQZiL7QDq7xJdNGSUaXtdk7xiEv7axPmLfEFtxE5du9fFspDrmJw==
+  integrity sha512-zctKTiyIDmcnMp3K5WG1hglgraW9EbiCLiIDVtaMCS5mPMl2fRKdS0vOFGnECIq9taFoxnyoDwxHD81nv0B4RA==
   dependencies:
     "@ctrl/tinycolor" "^3.4.1"
-    "@element-plus/icons-vue" "^2.0.6"
+    "@element-plus/icons-vue" "^2.3.1"
     "@floating-ui/dom" "^1.0.1"
     "@popperjs/core" "npm:@sxzz/popperjs-es@^2.11.7"
     "@types/lodash" "^4.14.182"