| | |
| | | <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: 500px"> |
| | | <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" |
| | |
| | | @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"> |
| | |
| | | <el-table-column prop="updateTime" label="结束时间" width="160" :show-overflow-tooltip="true" sortable align="center"></el-table-column> |
| | | <el-table-column |
| | | prop="runDuration" |
| | | label="运行时常" |
| | | label="运行时长" |
| | | width="140" |
| | | :show-overflow-tooltip="true" |
| | | sortable |
| | |
| | | }; |
| | | |
| | | const transformStyle = computed(() => ({ |
| | | transition: isDragging ? 'none' : 'transform 0.2s ease', |
| | | transition: isDragging ? 'none' : 'transform 0.2s ease' |
| | | })); |
| | | |
| | | |
| | | /** |
| | | * 对外暴露子组件方法 |
| | |
| | | |
| | | .image-wrapper { |
| | | width: 100%; |
| | | height: 100%; |
| | | overflow: hidden; |
| | | position: relative; |
| | | margin: 0 auto; |
| | |
| | | .scalable-image { |
| | | object-fit: contain; |
| | | width: 100%; |
| | | padding: 15px; |
| | | } |
| | | </style> |