update 调整流程设计溢出问题，优化流程图，流程实例按钮

gssong

2025-01-17 ecf2337205e878afff74364ce4037ec68b890528

update 调整流程设计溢出问题，优化流程图，流程实例按钮

 src/components/Process/approvalRecord.vue

@@ -1,8 +1,8 @@
<template>
  <div class="container">
    <el-dialog v-model="visible" draggable title="审批记录" :width="props.width" :height="props.height" :close-on-click-modal="false">
      <el-tabs v-model="tabActiveName" class="demo-tabs" >
        <el-tab-pane v-loading="loading" label="流程图" name="image" style="height: 68vh;">
      <el-tabs v-model="tabActiveName" class="demo-tabs">
        <el-tab-pane v-loading="loading" label="流程图" name="image" style="height: 68vh">
          <div
            ref="imageWrapperRef"
            class="image-wrapper"
@@ -14,7 +14,9 @@
            @dblclick="resetTransform"
            :style="transformStyle"
          >
            <el-image :src="imgUrl" class="scalable-image" />
            <el-card class="box-card">
              <el-image :src="imgUrl" class="scalable-image" />
            </el-card>
          </div>
        </el-tab-pane>
        <el-tab-pane v-loading="loading" label="审批信息" name="info">
@@ -222,9 +224,8 @@
};

const transformStyle = computed(() => ({
  transition: isDragging ? 'none' : 'transform 0.2s ease',
  transition: isDragging ? 'none' : 'transform 0.2s ease'
}));


/**
 * 对外暴露子组件方法
@@ -257,7 +258,6 @@

.image-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
@@ -275,5 +275,6 @@
.scalable-image {
  object-fit: contain;
  width: 100%;
  padding: 15px;
}
</style>

 src/views/workflow/processDefinition/design.vue

@@ -1,25 +1,13 @@
<template>
  <div ref="container" class="container">
    <iframe ref="iframe" :src="iframeUrl" frameborder="0" :width="sidebarStatusWidth()" height="100%"></iframe>
    <iframe ref="iframe" :src="iframeUrl" frameborder="0" style="height: 100%; width: inherit"></iframe>
  </div>
</template>

<script setup name="WarmFlow">

const { proxy } = getCurrentInstance();
import { onMounted } from 'vue';
import { getToken } from '@/utils/auth';

const sidebarStatus = useStorage('sidebarStatus', '1');

console.log(sidebarStatus.value)

const sidebarStatusWidth = () => {
  if (sidebarStatus.value === '0') {
    return "115%";
  }
  return "104%";
}

// definitionId为需要查询的流程定义id，
// disabled为是否可编辑, 例如：查看的时候不可编辑，不可保存

 src/views/workflow/processInstance/index.vue

@@ -93,7 +93,7 @@
              </el-table-column>
              <el-table-column align="center" prop="createTime" label="启动时间" width="160"></el-table-column>
              <el-table-column v-if="tab === 'finish'" align="center" prop="updateTime" label="结束时间" width="160"></el-table-column>
              <el-table-column label="操作" align="center" :width="162">
              <el-table-column label="操作" align="center" :width="165">
                <template #default="scope">
                  <el-row v-if="tab === 'running'" :gutter="10" class="mb8">
                    <el-col :span="1.5">