feat 新增通过前端显示流程图方式

feat 办理人权限处理器，新增办理人转换接口，比如角色转用户
update 升级warm-flow-1.7.3-m1

src/components/Process/flowChart.vue

@@ -1,84 +1,29 @@
 <template>
   <div>
-    <el-header style="border-bottom: 1px solid rgb(218 218 218); height: auto">
-      <div style="display: flex; padding: 10px 0px; justify-content: space-between">
-        <div>
-          <el-tooltip effect="dark" content="自适应屏幕" placement="bottom">
-            <el-button size="small" icon="Rank" @click="zoomViewport(1)">自适应屏幕</el-button>
-          </el-tooltip>
-          <el-tooltip effect="dark" content="放大" placement="bottom">
-            <el-button size="small" icon="ZoomIn" @click="zoomViewport(true)">放大</el-button>
-          </el-tooltip>
-          <el-tooltip effect="dark" content="缩小" placement="bottom">
-            <el-button size="small" icon="ZoomOut" @click="zoomViewport(false)">缩小</el-button>
-          </el-tooltip>
-        </div>
-        <div>
-          <el-button size="small" style="border: 1px solid #000">未完成</el-button>
-          <el-button size="small" style="background-color: #fff8dc; border: 1px solid #ffcd17">进行中</el-button>
-          <el-button size="small" style="background-color: #f0ffd9; border: 1px solid #9dff00">已完成</el-button>
-        </div>
-      </div>
-    </el-header>
-    <div class="container" ref="container"></div>
+    <div :style="'height:' + height">
+      <iframe :src="iframeUrl" style="width: 100%; height: 100%" />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import LogicFlow from '@logicflow/core';
 import '@logicflow/core/lib/style/index.css';
-import Start from './js/start.js';
-import Between from './js/between.js';
-import Serial from './js/serial.js';
-import Parallel from './js/parallel.js';
-import End from './js/end.js';
-import Skip from './js/skip.js';
-import { json2LogicFlowJson } from './js/tool.js';
+import { getToken } from '@/utils/auth';
 
 // Props 定义方式变化
 const props = defineProps({
-  defJson: {
-    type: Object,
-    default: () => ({})
+  insId: {
+    type: [String, Number],
+    default: null
   }
 });
 
-const container = ref(null);
-const lf = ref(null);
-const register = () => {
-  lf.value.register(Start);
-  lf.value.register(Between);
-  lf.value.register(Serial);
-  lf.value.register(Parallel);
-  lf.value.register(End);
-  lf.value.register(Skip);
-};
-const zoomViewport = async (zoom) => {
-  lf.value.zoom(zoom);
-  // 将内容平移至画布中心
-  lf.value.translateCenter();
-};
+const height = document.documentElement.clientHeight - 94.5 + 'px';
+const iframeUrl = ref('');
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
 
 onMounted(async () => {
-  if (props.defJson) {
-    const data = json2LogicFlowJson(props.defJson);
-    lf.value = new LogicFlow({
-      container: container.value,
-      grid: false,
-      isSilentMode: true,
-      textEdit: false
-    });
-    register();
-    lf.value.render(data);
-    lf.value.translateCenter();
-  }
+  const url = baseUrl + `/warm-flow-ui/index.html?id=${props.insId}&type=FlowChart`;
+  iframeUrl.value = url + '&Authorization=Bearer ' + getToken() + '&clientid=' + import.meta.env.VITE_APP_CLIENT_ID;
 });
 </script>
-
-<style scoped>
-/* 样式部分保持不变 */
-.container {
-  width: 100%;
-  height: 500px;
-}
-</style>