补充
This commit is contained in:
56
src/components/Process/approvalButton.vue
Normal file
56
src/components/Process/approvalButton.vue
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
<template>
|
||||||
|
<div style="display: flex; justify-content: space-between">
|
||||||
|
<div>
|
||||||
|
<el-button v-if="submitButtonShow" :loading="props.buttonLoading" type="info" @click="submitForm('draft')">暂存</el-button>
|
||||||
|
<el-button v-if="submitButtonShow" :loading="props.buttonLoading" type="primary" @click="submitForm('submit')">提 交</el-button>
|
||||||
|
<el-button v-if="approvalButtonShow" :loading="props.buttonLoading" type="primary" @click="approvalVerifyOpen">审批</el-button>
|
||||||
|
<el-button v-if="props.id && props.status !== 'draft'" type="primary" @click="handleApprovalRecord">流程进度</el-button>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<el-button style="float: right" @click="goBack()">返回</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { propTypes } from '@/utils/propTypes';
|
||||||
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||||
|
const props = defineProps({
|
||||||
|
status: propTypes.string.def(''),
|
||||||
|
pageType: propTypes.string.def(''),
|
||||||
|
buttonLoading: propTypes.bool.def(false),
|
||||||
|
id: propTypes.string.def('') || propTypes.number.def()
|
||||||
|
});
|
||||||
|
const emits = defineEmits(['submitForm', 'approvalVerifyOpen', 'handleApprovalRecord']);
|
||||||
|
//暂存,提交
|
||||||
|
const submitForm = async (type) => {
|
||||||
|
emits('submitForm', type);
|
||||||
|
};
|
||||||
|
//审批
|
||||||
|
const approvalVerifyOpen = async () => {
|
||||||
|
emits('approvalVerifyOpen');
|
||||||
|
};
|
||||||
|
//审批记录
|
||||||
|
const handleApprovalRecord = () => {
|
||||||
|
emits('handleApprovalRecord');
|
||||||
|
};
|
||||||
|
|
||||||
|
//校验提交按钮是否显示
|
||||||
|
const submitButtonShow = computed(() => {
|
||||||
|
return (
|
||||||
|
props.pageType === 'add' ||
|
||||||
|
(props.pageType === 'update' && props.status && (props.status === 'draft' || props.status === 'cancel' || props.status === 'back'))
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
//校验审批按钮是否显示
|
||||||
|
const approvalButtonShow = computed(() => {
|
||||||
|
return props.pageType === 'approval' && props.status && props.status === 'waiting';
|
||||||
|
});
|
||||||
|
|
||||||
|
//返回
|
||||||
|
const goBack = () => {
|
||||||
|
proxy.$tab.closePage(proxy.$route);
|
||||||
|
proxy.$router.go(-1);
|
||||||
|
};
|
||||||
|
</script>
|
@ -3,21 +3,7 @@
|
|||||||
<el-dialog v-model="visible" draggable title="审批记录" :width="props.width" :height="props.height" :close-on-click-modal="false">
|
<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-tabs v-model="tabActiveName" class="demo-tabs">
|
||||||
<el-tab-pane v-loading="loading" label="流程图" name="image" style="height: 68vh">
|
<el-tab-pane v-loading="loading" label="流程图" name="image" style="height: 68vh">
|
||||||
<div
|
<flowChart :ins-id="insId" v-if="insId" />
|
||||||
ref="imageWrapperRef"
|
|
||||||
class="image-wrapper"
|
|
||||||
@wheel="handleMouseWheel"
|
|
||||||
@mousedown="handleMouseDown"
|
|
||||||
@mousemove="handleMouseMove"
|
|
||||||
@mouseup="handleMouseUp"
|
|
||||||
@mouseleave="handleMouseLeave"
|
|
||||||
@dblclick="resetTransform"
|
|
||||||
:style="transformStyle"
|
|
||||||
>
|
|
||||||
<el-card class="box-card">
|
|
||||||
<el-image :src="imgUrl" class="scalable-image" />
|
|
||||||
</el-card>
|
|
||||||
</div>
|
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane v-loading="loading" label="审批信息" name="info">
|
<el-tab-pane v-loading="loading" label="审批信息" name="info">
|
||||||
<div>
|
<div>
|
||||||
@ -72,11 +58,11 @@
|
|||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script setup lang="ts">
|
||||||
import { flowImage } from '@/api/workflow/instance';
|
import { flowHisTaskList } from '@/api/workflow/instance';
|
||||||
import { propTypes } from '@/utils/propTypes';
|
import { propTypes } from '@/utils/propTypes';
|
||||||
import { listByIds } from '@/api/system/oss';
|
import { listByIds } from '@/api/system/oss';
|
||||||
|
import FlowChart from '@/components/Process/flowChart.vue';
|
||||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||||
const { wf_task_status } = toRefs<any>(proxy?.useDict('wf_task_status'));
|
const { wf_task_status } = toRefs<any>(proxy?.useDict('wf_task_status'));
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
@ -87,7 +73,7 @@ const loading = ref(false);
|
|||||||
const visible = ref(false);
|
const visible = ref(false);
|
||||||
const historyList = ref<Array<any>>([]);
|
const historyList = ref<Array<any>>([]);
|
||||||
const tabActiveName = ref('image');
|
const tabActiveName = ref('image');
|
||||||
const imgUrl = ref('');
|
const insId = ref(null);
|
||||||
|
|
||||||
//初始化查询审批记录
|
//初始化查询审批记录
|
||||||
const init = async (businessId: string | number) => {
|
const init = async (businessId: string | number) => {
|
||||||
@ -95,10 +81,10 @@ const init = async (businessId: string | number) => {
|
|||||||
loading.value = true;
|
loading.value = true;
|
||||||
tabActiveName.value = 'image';
|
tabActiveName.value = 'image';
|
||||||
historyList.value = [];
|
historyList.value = [];
|
||||||
flowImage(businessId).then((resp) => {
|
flowHisTaskList(businessId).then((resp) => {
|
||||||
if (resp.data) {
|
if (resp.data) {
|
||||||
historyList.value = resp.data.list;
|
historyList.value = resp.data.list;
|
||||||
imgUrl.value = 'data:image/gif;base64,' + resp.data.image;
|
insId.value = resp.data.instanceId;
|
||||||
if (historyList.value.length > 0) {
|
if (historyList.value.length > 0) {
|
||||||
historyList.value.forEach((item) => {
|
historyList.value.forEach((item) => {
|
||||||
if (item.ext) {
|
if (item.ext) {
|
||||||
@ -124,109 +110,6 @@ const handleDownload = (ossId: string) => {
|
|||||||
proxy?.$download.oss(ossId);
|
proxy?.$download.oss(ossId);
|
||||||
};
|
};
|
||||||
|
|
||||||
const imageWrapperRef = ref<HTMLElement | null>(null);
|
|
||||||
const scale = ref(1); // 初始缩放比例
|
|
||||||
const maxScale = 3; // 最大缩放比例
|
|
||||||
const minScale = 0.5; // 最小缩放比例
|
|
||||||
|
|
||||||
let isDragging = false;
|
|
||||||
let startX = 0;
|
|
||||||
let startY = 0;
|
|
||||||
let currentTranslateX = 0;
|
|
||||||
let currentTranslateY = 0;
|
|
||||||
|
|
||||||
const handleMouseWheel = (event: WheelEvent) => {
|
|
||||||
event.preventDefault();
|
|
||||||
let newScale = scale.value - event.deltaY / 1000;
|
|
||||||
newScale = Math.max(minScale, Math.min(newScale, maxScale));
|
|
||||||
if (newScale !== scale.value) {
|
|
||||||
scale.value = newScale;
|
|
||||||
resetDragPosition(); // 重置拖拽位置,使图片居中
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleMouseDown = (event: MouseEvent) => {
|
|
||||||
if (scale.value > 1) {
|
|
||||||
event.preventDefault(); // 阻止默认行为,防止拖拽
|
|
||||||
isDragging = true;
|
|
||||||
startX = event.clientX;
|
|
||||||
startY = event.clientY;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleMouseMove = (event: MouseEvent) => {
|
|
||||||
if (!isDragging || !imageWrapperRef.value) return;
|
|
||||||
|
|
||||||
const deltaX = event.clientX - startX;
|
|
||||||
const deltaY = event.clientY - startY;
|
|
||||||
startX = event.clientX;
|
|
||||||
startY = event.clientY;
|
|
||||||
|
|
||||||
currentTranslateX += deltaX;
|
|
||||||
currentTranslateY += deltaY;
|
|
||||||
|
|
||||||
// 边界检测,防止图片被拖出容器
|
|
||||||
const bounds = getBounds();
|
|
||||||
if (currentTranslateX > bounds.maxTranslateX) {
|
|
||||||
currentTranslateX = bounds.maxTranslateX;
|
|
||||||
} else if (currentTranslateX < bounds.minTranslateX) {
|
|
||||||
currentTranslateX = bounds.minTranslateX;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (currentTranslateY > bounds.maxTranslateY) {
|
|
||||||
currentTranslateY = bounds.maxTranslateY;
|
|
||||||
} else if (currentTranslateY < bounds.minTranslateY) {
|
|
||||||
currentTranslateY = bounds.minTranslateY;
|
|
||||||
}
|
|
||||||
|
|
||||||
applyTransform();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleMouseUp = () => {
|
|
||||||
isDragging = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleMouseLeave = () => {
|
|
||||||
isDragging = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
const resetTransform = () => {
|
|
||||||
scale.value = 1;
|
|
||||||
currentTranslateX = 0;
|
|
||||||
currentTranslateY = 0;
|
|
||||||
applyTransform();
|
|
||||||
};
|
|
||||||
|
|
||||||
const resetDragPosition = () => {
|
|
||||||
currentTranslateX = 0;
|
|
||||||
currentTranslateY = 0;
|
|
||||||
applyTransform();
|
|
||||||
};
|
|
||||||
|
|
||||||
const applyTransform = () => {
|
|
||||||
if (imageWrapperRef.value) {
|
|
||||||
imageWrapperRef.value.style.transform = `translate(${currentTranslateX}px, ${currentTranslateY}px) scale(${scale.value})`;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getBounds = () => {
|
|
||||||
if (!imageWrapperRef.value) return { minTranslateX: 0, maxTranslateX: 0, minTranslateY: 0, maxTranslateY: 0 };
|
|
||||||
|
|
||||||
const imgRect = imageWrapperRef.value.getBoundingClientRect();
|
|
||||||
const containerRect = imageWrapperRef.value.parentElement?.getBoundingClientRect() ?? imgRect;
|
|
||||||
|
|
||||||
const minTranslateX = (containerRect.width - imgRect.width * scale.value) / 2;
|
|
||||||
const maxTranslateX = -(containerRect.width - imgRect.width * scale.value) / 2;
|
|
||||||
const minTranslateY = (containerRect.height - imgRect.height * scale.value) / 2;
|
|
||||||
const maxTranslateY = -(containerRect.height - imgRect.height * scale.value) / 2;
|
|
||||||
|
|
||||||
return { minTranslateX, maxTranslateX, minTranslateY, maxTranslateY };
|
|
||||||
};
|
|
||||||
|
|
||||||
const transformStyle = computed(() => ({
|
|
||||||
transition: isDragging ? 'none' : 'transform 0.2s ease'
|
|
||||||
}));
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 对外暴露子组件方法
|
* 对外暴露子组件方法
|
||||||
*/
|
*/
|
||||||
@ -235,46 +118,10 @@ defineExpose({
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.triangle {
|
|
||||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.triangle::after {
|
|
||||||
content: ' ';
|
|
||||||
position: absolute;
|
|
||||||
top: 8em;
|
|
||||||
right: 215px;
|
|
||||||
border: 15px solid;
|
|
||||||
border-color: transparent #fff transparent transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
:deep(.el-dialog .el-dialog__body) {
|
:deep(.el-dialog .el-dialog__body) {
|
||||||
max-height: calc(100vh - 170px) !important;
|
max-height: calc(100vh - 170px) !important;
|
||||||
min-height: calc(100vh - 170px) !important;
|
min-height: calc(100vh - 170px) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-wrapper {
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
margin: 0 auto;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
user-select: none; /* 禁用文本选择 */
|
|
||||||
cursor: grab; /* 设置初始鼠标指针为可拖动 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-wrapper:active {
|
|
||||||
cursor: grabbing; /* 当正在拖动时改变鼠标指针 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.scalable-image {
|
|
||||||
object-fit: contain;
|
|
||||||
width: 100%;
|
|
||||||
padding: 15px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
40
src/components/Process/flowChart.vue
Normal file
40
src/components/Process/flowChart.vue
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div style="height: 68vh" class="iframe-wrapper">
|
||||||
|
<iframe :src="iframeUrl" style="width: 100%; height: 100%" frameborder="0" scrolling="no" class="custom-iframe" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { getToken } from '@/utils/auth';
|
||||||
|
|
||||||
|
// Props 定义方式变化
|
||||||
|
const props = defineProps({
|
||||||
|
insId: {
|
||||||
|
type: [String, Number],
|
||||||
|
default: null
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const iframeUrl = ref('');
|
||||||
|
const baseUrl = import.meta.env.VITE_APP_BASE_API;
|
||||||
|
|
||||||
|
onMounted(async () => {
|
||||||
|
const url = baseUrl + `/warm-flow-ui/index.html?id=${props.insId}&type=FlowChart&t=${Date.now()}`;
|
||||||
|
iframeUrl.value = url + '&Authorization=Bearer ' + getToken() + '&clientid=' + import.meta.env.VITE_APP_CLIENT_ID;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.iframe-wrapper {
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-iframe {
|
||||||
|
width: 100%;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
</style>
|
154
src/components/Process/flowChartImg.vue
Normal file
154
src/components/Process/flowChartImg.vue
Normal file
@ -0,0 +1,154 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
ref="imageWrapperRef"
|
||||||
|
class="image-wrapper"
|
||||||
|
@wheel="handleMouseWheel"
|
||||||
|
@mousedown="handleMouseDown"
|
||||||
|
@mousemove="handleMouseMove"
|
||||||
|
@mouseup="handleMouseUp"
|
||||||
|
@mouseleave="handleMouseLeave"
|
||||||
|
@dblclick="resetTransform"
|
||||||
|
:style="transformStyle"
|
||||||
|
>
|
||||||
|
<el-card class="box-card">
|
||||||
|
<el-image :src="props.imgUrl" class="scalable-image" />
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
// Props 定义方式变化
|
||||||
|
const props = defineProps({
|
||||||
|
imgUrl: {
|
||||||
|
type: String,
|
||||||
|
default: () => ''
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const imageWrapperRef = ref<HTMLElement | null>(null);
|
||||||
|
const scale = ref(1); // 初始缩放比例
|
||||||
|
const maxScale = 3; // 最大缩放比例
|
||||||
|
const minScale = 0.5; // 最小缩放比例
|
||||||
|
|
||||||
|
let isDragging = false;
|
||||||
|
let startX = 0;
|
||||||
|
let startY = 0;
|
||||||
|
let currentTranslateX = 0;
|
||||||
|
let currentTranslateY = 0;
|
||||||
|
|
||||||
|
const handleMouseWheel = (event: WheelEvent) => {
|
||||||
|
event.preventDefault();
|
||||||
|
let newScale = scale.value - event.deltaY / 1000;
|
||||||
|
newScale = Math.max(minScale, Math.min(newScale, maxScale));
|
||||||
|
if (newScale !== scale.value) {
|
||||||
|
scale.value = newScale;
|
||||||
|
resetDragPosition(); // 重置拖拽位置,使图片居中
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMouseDown = (event: MouseEvent) => {
|
||||||
|
if (scale.value > 1) {
|
||||||
|
event.preventDefault(); // 阻止默认行为,防止拖拽
|
||||||
|
isDragging = true;
|
||||||
|
startX = event.clientX;
|
||||||
|
startY = event.clientY;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMouseMove = (event: MouseEvent) => {
|
||||||
|
if (!isDragging || !imageWrapperRef.value) return;
|
||||||
|
|
||||||
|
const deltaX = event.clientX - startX;
|
||||||
|
const deltaY = event.clientY - startY;
|
||||||
|
startX = event.clientX;
|
||||||
|
startY = event.clientY;
|
||||||
|
|
||||||
|
currentTranslateX += deltaX;
|
||||||
|
currentTranslateY += deltaY;
|
||||||
|
|
||||||
|
// 边界检测,防止图片被拖出容器
|
||||||
|
const bounds = getBounds();
|
||||||
|
if (currentTranslateX > bounds.maxTranslateX) {
|
||||||
|
currentTranslateX = bounds.maxTranslateX;
|
||||||
|
} else if (currentTranslateX < bounds.minTranslateX) {
|
||||||
|
currentTranslateX = bounds.minTranslateX;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentTranslateY > bounds.maxTranslateY) {
|
||||||
|
currentTranslateY = bounds.maxTranslateY;
|
||||||
|
} else if (currentTranslateY < bounds.minTranslateY) {
|
||||||
|
currentTranslateY = bounds.minTranslateY;
|
||||||
|
}
|
||||||
|
|
||||||
|
applyTransform();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMouseUp = () => {
|
||||||
|
isDragging = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMouseLeave = () => {
|
||||||
|
isDragging = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const resetTransform = () => {
|
||||||
|
scale.value = 1;
|
||||||
|
currentTranslateX = 0;
|
||||||
|
currentTranslateY = 0;
|
||||||
|
applyTransform();
|
||||||
|
};
|
||||||
|
|
||||||
|
const resetDragPosition = () => {
|
||||||
|
currentTranslateX = 0;
|
||||||
|
currentTranslateY = 0;
|
||||||
|
applyTransform();
|
||||||
|
};
|
||||||
|
|
||||||
|
const applyTransform = () => {
|
||||||
|
if (imageWrapperRef.value) {
|
||||||
|
imageWrapperRef.value.style.transform = `translate(${currentTranslateX}px, ${currentTranslateY}px) scale(${scale.value})`;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getBounds = () => {
|
||||||
|
if (!imageWrapperRef.value) return { minTranslateX: 0, maxTranslateX: 0, minTranslateY: 0, maxTranslateY: 0 };
|
||||||
|
|
||||||
|
const imgRect = imageWrapperRef.value.getBoundingClientRect();
|
||||||
|
const containerRect = imageWrapperRef.value.parentElement?.getBoundingClientRect() ?? imgRect;
|
||||||
|
|
||||||
|
const minTranslateX = (containerRect.width - imgRect.width * scale.value) / 2;
|
||||||
|
const maxTranslateX = -(containerRect.width - imgRect.width * scale.value) / 2;
|
||||||
|
const minTranslateY = (containerRect.height - imgRect.height * scale.value) / 2;
|
||||||
|
const maxTranslateY = -(containerRect.height - imgRect.height * scale.value) / 2;
|
||||||
|
|
||||||
|
return { minTranslateX, maxTranslateX, minTranslateY, maxTranslateY };
|
||||||
|
};
|
||||||
|
|
||||||
|
const transformStyle = computed(() => ({
|
||||||
|
transition: isDragging ? 'none' : 'transform 0.2s ease'
|
||||||
|
}));
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.image-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
user-select: none; /* 禁用文本选择 */
|
||||||
|
cursor: grab; /* 设置初始鼠标指针为可拖动 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-wrapper:active {
|
||||||
|
cursor: grabbing; /* 当正在拖动时改变鼠标指针 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.scalable-image {
|
||||||
|
object-fit: contain;
|
||||||
|
width: 100%;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
</style>
|
@ -49,7 +49,7 @@
|
|||||||
</el-dialog>
|
</el-dialog>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script setup lang="ts">
|
||||||
import { propTypes } from '@/utils/propTypes';
|
import { propTypes } from '@/utils/propTypes';
|
||||||
import { FlowTaskVO, TaskOperationBo } from '@/api/workflow/task/types';
|
import { FlowTaskVO, TaskOperationBo } from '@/api/workflow/task/types';
|
||||||
import UserSelect from '@/components/UserSelect';
|
import UserSelect from '@/components/UserSelect';
|
||||||
@ -85,9 +85,13 @@ const task = ref<FlowTaskVO>({
|
|||||||
nodeName: undefined,
|
nodeName: undefined,
|
||||||
flowCode: undefined,
|
flowCode: undefined,
|
||||||
flowStatus: undefined,
|
flowStatus: undefined,
|
||||||
|
formCustom: undefined,
|
||||||
|
formPath: undefined,
|
||||||
nodeType: undefined,
|
nodeType: undefined,
|
||||||
nodeRatio: undefined,
|
nodeRatio: undefined,
|
||||||
version: undefined
|
version: undefined,
|
||||||
|
applyNode: undefined,
|
||||||
|
buttonList: []
|
||||||
});
|
});
|
||||||
|
|
||||||
const open = (taskId: string) => {
|
const open = (taskId: string) => {
|
||||||
@ -171,7 +175,7 @@ const deleteMultiInstanceUser = async (row) => {
|
|||||||
};
|
};
|
||||||
//获取办理人
|
//获取办理人
|
||||||
const handleTaskUser = async () => {
|
const handleTaskUser = async () => {
|
||||||
let data = await currentTaskAllUser(task.value.id);
|
const data = await currentTaskAllUser(task.value.id);
|
||||||
deleteUserList.value = data.data;
|
deleteUserList.value = data.data;
|
||||||
if (deleteUserList.value && deleteUserList.value.length > 0) {
|
if (deleteUserList.value && deleteUserList.value.length > 0) {
|
||||||
deleteUserList.value.forEach((e) => {
|
deleteUserList.value.forEach((e) => {
|
||||||
@ -183,7 +187,7 @@ const handleTaskUser = async () => {
|
|||||||
|
|
||||||
//终止任务
|
//终止任务
|
||||||
const handleTerminationTask = async () => {
|
const handleTerminationTask = async () => {
|
||||||
let params = {
|
const params = {
|
||||||
taskId: task.value.id,
|
taskId: task.value.id,
|
||||||
comment: ''
|
comment: ''
|
||||||
};
|
};
|
||||||
|
@ -8,15 +8,26 @@
|
|||||||
<el-checkbox value="3" name="type">短信</el-checkbox>
|
<el-checkbox value="3" name="type">短信</el-checkbox>
|
||||||
</el-checkbox-group>
|
</el-checkbox-group>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item v-if="task.flowStatus === 'waiting'" label="附件">
|
<el-form-item label="附件">
|
||||||
<fileUpload v-model="form.fileId" :file-type="['png', 'jpg', 'jpeg', 'doc', 'docx', 'xlsx', 'xls', 'ppt', 'txt', 'pdf']" :file-size="20" />
|
<fileUpload v-model="form.fileId" :file-type="['png', 'jpg', 'jpeg', 'doc', 'docx', 'xlsx', 'xls', 'ppt', 'txt', 'pdf']" :file-size="20" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="抄送">
|
<el-form-item label="抄送" v-if="buttonObj.copy">
|
||||||
<el-button type="primary" icon="Plus" circle @click="openUserSelectCopy" />
|
<el-button type="primary" icon="Plus" circle @click="openUserSelectCopy" />
|
||||||
<el-tag v-for="user in selectCopyUserList" :key="user.userId" closable style="margin: 2px" @close="handleCopyCloseTag(user)">
|
<el-tag v-for="user in selectCopyUserList" :key="user.userId" closable style="margin: 2px" @close="handleCopyCloseTag(user)">
|
||||||
{{ user.nickName }}
|
{{ user.nickName }}
|
||||||
</el-tag>
|
</el-tag>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
<el-form-item v-if="buttonObj.pop && nestNodeList && nestNodeList.length > 0" label="下一步审批人" prop="assigneeMap">
|
||||||
|
<div v-for="(item, index) in nestNodeList" :key="index" style="margin-bottom: 5px; width: 500px">
|
||||||
|
<span>【{{ item.nodeName }}】:</span>
|
||||||
|
<el-input v-if="false" v-model="form.assigneeMap[item.nodeCode]" />
|
||||||
|
<el-input placeholder="请选择审批人" readonly v-model="nickName[item.nodeCode]">
|
||||||
|
<template v-slot:append>
|
||||||
|
<el-button @click="choosePeople(item)" icon="search">选择</el-button>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
<el-form-item v-if="task.flowStatus === 'waiting'" label="审批意见">
|
<el-form-item v-if="task.flowStatus === 'waiting'" label="审批意见">
|
||||||
<el-input v-model="form.message" type="textarea" resize="none" />
|
<el-input v-model="form.message" type="textarea" resize="none" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
@ -24,10 +35,14 @@
|
|||||||
<template #footer>
|
<template #footer>
|
||||||
<span class="dialog-footer">
|
<span class="dialog-footer">
|
||||||
<el-button :disabled="buttonDisabled" type="primary" @click="handleCompleteTask"> 提交 </el-button>
|
<el-button :disabled="buttonDisabled" type="primary" @click="handleCompleteTask"> 提交 </el-button>
|
||||||
<el-button v-if="task.flowStatus === 'waiting'" :disabled="buttonDisabled" type="primary" @click="openDelegateTask"> 委托 </el-button>
|
<el-button v-if="task.flowStatus === 'waiting' && buttonObj.trust" :disabled="buttonDisabled" type="primary" @click="openDelegateTask">
|
||||||
<el-button v-if="task.flowStatus === 'waiting'" :disabled="buttonDisabled" type="primary" @click="openTransferTask"> 转办 </el-button>
|
委托
|
||||||
|
</el-button>
|
||||||
|
<el-button v-if="task.flowStatus === 'waiting' && buttonObj.transfer" :disabled="buttonDisabled" type="primary" @click="openTransferTask">
|
||||||
|
转办
|
||||||
|
</el-button>
|
||||||
<el-button
|
<el-button
|
||||||
v-if="task.flowStatus === 'waiting' && Number(task.nodeRatio) > 0"
|
v-if="task.flowStatus === 'waiting' && Number(task.nodeRatio) > 0 && buttonObj.addSign"
|
||||||
:disabled="buttonDisabled"
|
:disabled="buttonDisabled"
|
||||||
type="primary"
|
type="primary"
|
||||||
@click="openMultiInstanceUser"
|
@click="openMultiInstanceUser"
|
||||||
@ -35,15 +50,24 @@
|
|||||||
加签
|
加签
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button
|
<el-button
|
||||||
v-if="task.flowStatus === 'waiting' && Number(task.nodeRatio) > 0"
|
v-if="task.flowStatus === 'waiting' && Number(task.nodeRatio) > 0 && buttonObj.subSign"
|
||||||
:disabled="buttonDisabled"
|
:disabled="buttonDisabled"
|
||||||
type="primary"
|
type="primary"
|
||||||
@click="handleTaskUser"
|
@click="handleTaskUser"
|
||||||
>
|
>
|
||||||
减签
|
减签
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button v-if="task.flowStatus === 'waiting'" :disabled="buttonDisabled" type="danger" @click="handleTerminationTask"> 终止 </el-button>
|
<el-button
|
||||||
<el-button v-if="task.flowStatus === 'waiting'" :disabled="buttonDisabled" type="danger" @click="handleBackProcessOpen"> 退回 </el-button>
|
v-if="task.flowStatus === 'waiting' && buttonObj.termination"
|
||||||
|
:disabled="buttonDisabled"
|
||||||
|
type="danger"
|
||||||
|
@click="handleTerminationTask"
|
||||||
|
>
|
||||||
|
终止
|
||||||
|
</el-button>
|
||||||
|
<el-button v-if="task.flowStatus === 'waiting' && buttonObj.back" :disabled="buttonDisabled" type="danger" @click="handleBackProcessOpen">
|
||||||
|
退回
|
||||||
|
</el-button>
|
||||||
<el-button :disabled="buttonDisabled" @click="cancel">取消</el-button>
|
<el-button :disabled="buttonDisabled" @click="cancel">取消</el-button>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
@ -55,6 +79,8 @@
|
|||||||
<UserSelect ref="delegateTaskRef" :multiple="false" @confirm-call-back="handleDelegateTask"></UserSelect>
|
<UserSelect ref="delegateTaskRef" :multiple="false" @confirm-call-back="handleDelegateTask"></UserSelect>
|
||||||
<!-- 加签组件 -->
|
<!-- 加签组件 -->
|
||||||
<UserSelect ref="multiInstanceUserRef" :multiple="true" @confirm-call-back="addMultiInstanceUser"></UserSelect>
|
<UserSelect ref="multiInstanceUserRef" :multiple="true" @confirm-call-back="addMultiInstanceUser"></UserSelect>
|
||||||
|
<!-- 弹窗选人 -->
|
||||||
|
<UserSelect ref="porUserRef" :multiple="true" :userIds="popUserIds" @confirm-call-back="handlePopUser"></UserSelect>
|
||||||
|
|
||||||
<!-- 驳回开始 -->
|
<!-- 驳回开始 -->
|
||||||
<el-dialog v-model="backVisible" draggable title="驳回" width="40%" :close-on-click-modal="false">
|
<el-dialog v-model="backVisible" draggable title="驳回" width="40%" :close-on-click-modal="false">
|
||||||
@ -72,7 +98,11 @@
|
|||||||
</el-checkbox-group>
|
</el-checkbox-group>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item v-if="task.flowStatus === 'waiting'" label="附件">
|
<el-form-item v-if="task.flowStatus === 'waiting'" label="附件">
|
||||||
<fileUpload v-model="backForm.fileId" :file-type="['png', 'jpg', 'jpeg', 'doc', 'docx', 'xlsx', 'xls', 'ppt', 'txt', 'pdf']" :file-size="20" />
|
<fileUpload
|
||||||
|
v-model="backForm.fileId"
|
||||||
|
:file-type="['png', 'jpg', 'jpeg', 'doc', 'docx', 'xlsx', 'xls', 'ppt', 'txt', 'pdf']"
|
||||||
|
:file-size="20"
|
||||||
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="审批意见">
|
<el-form-item label="审批意见">
|
||||||
<el-input v-model="backForm.message" type="textarea" resize="none" />
|
<el-input v-model="backForm.message" type="textarea" resize="none" />
|
||||||
@ -102,11 +132,20 @@
|
|||||||
</el-dialog>
|
</el-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script setup lang="ts">
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import { ComponentInternalInstance } from 'vue';
|
import { ComponentInternalInstance } from 'vue';
|
||||||
import { ElForm } from 'element-plus';
|
import { ElForm } from 'element-plus';
|
||||||
import { completeTask, backProcess, getTask, taskOperation, terminationTask, getBackTaskNode, currentTaskAllUser } from '@/api/workflow/task';
|
import {
|
||||||
|
completeTask,
|
||||||
|
backProcess,
|
||||||
|
getTask,
|
||||||
|
taskOperation,
|
||||||
|
terminationTask,
|
||||||
|
getBackTaskNode,
|
||||||
|
currentTaskAllUser,
|
||||||
|
getNextNodeList
|
||||||
|
} from '@/api/workflow/task';
|
||||||
import UserSelect from '@/components/UserSelect';
|
import UserSelect from '@/components/UserSelect';
|
||||||
|
|
||||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||||
@ -117,6 +156,7 @@ const userSelectCopyRef = ref<InstanceType<typeof UserSelect>>();
|
|||||||
const transferTaskRef = ref<InstanceType<typeof UserSelect>>();
|
const transferTaskRef = ref<InstanceType<typeof UserSelect>>();
|
||||||
const delegateTaskRef = ref<InstanceType<typeof UserSelect>>();
|
const delegateTaskRef = ref<InstanceType<typeof UserSelect>>();
|
||||||
const multiInstanceUserRef = ref<InstanceType<typeof UserSelect>>();
|
const multiInstanceUserRef = ref<InstanceType<typeof UserSelect>>();
|
||||||
|
const porUserRef = ref<InstanceType<typeof UserSelect>>();
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
taskVariables: {
|
taskVariables: {
|
||||||
@ -136,12 +176,28 @@ const selectCopyUserList = ref<UserVO[]>([]);
|
|||||||
const selectCopyUserIds = ref<string>(undefined);
|
const selectCopyUserIds = ref<string>(undefined);
|
||||||
//可减签的人员
|
//可减签的人员
|
||||||
const deleteUserList = ref<any>([]);
|
const deleteUserList = ref<any>([]);
|
||||||
|
//弹窗可选择的人员id
|
||||||
|
const popUserIds = ref<any>([]);
|
||||||
//驳回是否显示
|
//驳回是否显示
|
||||||
const backVisible = ref(false);
|
const backVisible = ref(false);
|
||||||
const backLoading = ref(true);
|
const backLoading = ref(true);
|
||||||
const backButtonDisabled = ref(true);
|
const backButtonDisabled = ref(true);
|
||||||
// 可驳回得任务节点
|
// 可驳回得任务节点
|
||||||
const taskNodeList = ref([]);
|
const taskNodeList = ref([]);
|
||||||
|
const nickName = ref({});
|
||||||
|
//节点编码
|
||||||
|
const nodeCode = ref<string>('');
|
||||||
|
const buttonObj = ref<any>({
|
||||||
|
pop: false,
|
||||||
|
trust: false,
|
||||||
|
transfer: false,
|
||||||
|
addSign: false,
|
||||||
|
subSign: false,
|
||||||
|
termination: false,
|
||||||
|
back: false
|
||||||
|
});
|
||||||
|
//下一节点列表
|
||||||
|
const nestNodeList = ref([]);
|
||||||
//任务
|
//任务
|
||||||
const task = ref<FlowTaskVO>({
|
const task = ref<FlowTaskVO>({
|
||||||
id: undefined,
|
id: undefined,
|
||||||
@ -159,7 +215,9 @@ const task = ref<FlowTaskVO>({
|
|||||||
formCustom: undefined,
|
formCustom: undefined,
|
||||||
formPath: undefined,
|
formPath: undefined,
|
||||||
nodeType: undefined,
|
nodeType: undefined,
|
||||||
nodeRatio: undefined
|
nodeRatio: undefined,
|
||||||
|
applyNode: false,
|
||||||
|
buttonList: []
|
||||||
});
|
});
|
||||||
const dialog = reactive<DialogOption>({
|
const dialog = reactive<DialogOption>({
|
||||||
visible: false,
|
visible: false,
|
||||||
@ -170,6 +228,7 @@ const deleteSignatureVisible = ref(false);
|
|||||||
const form = ref<Record<string, any>>({
|
const form = ref<Record<string, any>>({
|
||||||
taskId: undefined,
|
taskId: undefined,
|
||||||
message: undefined,
|
message: undefined,
|
||||||
|
assigneeMap: {},
|
||||||
variables: {},
|
variables: {},
|
||||||
messageType: ['1'],
|
messageType: ['1'],
|
||||||
flowCopyList: []
|
flowCopyList: []
|
||||||
@ -181,8 +240,9 @@ const backForm = ref<Record<string, any>>({
|
|||||||
variables: {},
|
variables: {},
|
||||||
messageType: ['1']
|
messageType: ['1']
|
||||||
});
|
});
|
||||||
|
|
||||||
//打开弹窗
|
//打开弹窗
|
||||||
const openDialog = (id?: string) => {
|
const openDialog = async (id?: string) => {
|
||||||
selectCopyUserIds.value = undefined;
|
selectCopyUserIds.value = undefined;
|
||||||
selectCopyUserList.value = [];
|
selectCopyUserList.value = [];
|
||||||
form.value.fileId = undefined;
|
form.value.fileId = undefined;
|
||||||
@ -191,13 +251,20 @@ const openDialog = (id?: string) => {
|
|||||||
dialog.visible = true;
|
dialog.visible = true;
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
buttonDisabled.value = true;
|
buttonDisabled.value = true;
|
||||||
nextTick(() => {
|
const response = await getTask(taskId.value);
|
||||||
getTask(taskId.value).then((response) => {
|
|
||||||
task.value = response.data;
|
task.value = response.data;
|
||||||
loading.value = false;
|
buttonObj.value = {};
|
||||||
|
task.value.buttonList.forEach((e) => {
|
||||||
|
buttonObj.value[e.code] = e.show;
|
||||||
|
});
|
||||||
buttonDisabled.value = false;
|
buttonDisabled.value = false;
|
||||||
});
|
const data = {
|
||||||
});
|
taskId: taskId.value,
|
||||||
|
variables: props.taskVariables
|
||||||
|
};
|
||||||
|
const nextData = await getNextNodeList(data);
|
||||||
|
nestNodeList.value = nextData.data;
|
||||||
|
loading.value = false;
|
||||||
};
|
};
|
||||||
|
|
||||||
onMounted(() => {});
|
onMounted(() => {});
|
||||||
@ -206,11 +273,30 @@ const emits = defineEmits(['submitCallback', 'cancelCallback']);
|
|||||||
/** 办理流程 */
|
/** 办理流程 */
|
||||||
const handleCompleteTask = async () => {
|
const handleCompleteTask = async () => {
|
||||||
form.value.taskId = taskId.value;
|
form.value.taskId = taskId.value;
|
||||||
form.value.taskVariables = props.taskVariables;
|
form.value.variables = props.taskVariables;
|
||||||
|
let verify = false;
|
||||||
|
if (buttonObj.value.pop && nestNodeList.value && nestNodeList.value.length > 0) {
|
||||||
|
nestNodeList.value.forEach((e) => {
|
||||||
|
if (
|
||||||
|
Object.keys(form.value.assigneeMap).length === 0 ||
|
||||||
|
form.value.assigneeMap[e.nodeCode] === '' ||
|
||||||
|
form.value.assigneeMap[e.nodeCode] === null ||
|
||||||
|
form.value.assigneeMap[e.nodeCode] === undefined
|
||||||
|
) {
|
||||||
|
verify = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (verify) {
|
||||||
|
proxy?.$modal.msgWarning('请选择审批人!');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
form.value.assigneeMap = {};
|
||||||
|
}
|
||||||
if (selectCopyUserList.value && selectCopyUserList.value.length > 0) {
|
if (selectCopyUserList.value && selectCopyUserList.value.length > 0) {
|
||||||
let flowCopyList = [];
|
const flowCopyList = [];
|
||||||
selectCopyUserList.value.forEach((e) => {
|
selectCopyUserList.value.forEach((e) => {
|
||||||
let copyUser = {
|
const copyUser = {
|
||||||
userId: e.userId,
|
userId: e.userId,
|
||||||
userName: e.nickName
|
userName: e.nickName
|
||||||
};
|
};
|
||||||
@ -239,7 +325,7 @@ const handleBackProcessOpen = async () => {
|
|||||||
backVisible.value = true;
|
backVisible.value = true;
|
||||||
backLoading.value = true;
|
backLoading.value = true;
|
||||||
backButtonDisabled.value = true;
|
backButtonDisabled.value = true;
|
||||||
let data = await getBackTaskNode(task.value.definitionId, task.value.nodeCode);
|
const data = await getBackTaskNode(task.value.definitionId, task.value.nodeCode);
|
||||||
taskNodeList.value = data.data;
|
taskNodeList.value = data.data;
|
||||||
backLoading.value = false;
|
backLoading.value = false;
|
||||||
backButtonDisabled.value = false;
|
backButtonDisabled.value = false;
|
||||||
@ -266,6 +352,8 @@ const handleBackProcess = async () => {
|
|||||||
const cancel = async () => {
|
const cancel = async () => {
|
||||||
dialog.visible = false;
|
dialog.visible = false;
|
||||||
buttonDisabled.value = false;
|
buttonDisabled.value = false;
|
||||||
|
nickName.value = {};
|
||||||
|
form.value.assigneeMap = {};
|
||||||
emits('cancelCallback');
|
emits('cancelCallback');
|
||||||
};
|
};
|
||||||
//打开抄送人员
|
//打开抄送人员
|
||||||
@ -386,7 +474,7 @@ const handleDelegateTask = async (data) => {
|
|||||||
};
|
};
|
||||||
//终止任务
|
//终止任务
|
||||||
const handleTerminationTask = async () => {
|
const handleTerminationTask = async () => {
|
||||||
let params = {
|
const params = {
|
||||||
taskId: taskId.value,
|
taskId: taskId.value,
|
||||||
comment: form.value.message
|
comment: form.value.message
|
||||||
};
|
};
|
||||||
@ -402,7 +490,7 @@ const handleTerminationTask = async () => {
|
|||||||
proxy?.$modal.msgSuccess('操作成功');
|
proxy?.$modal.msgSuccess('操作成功');
|
||||||
};
|
};
|
||||||
const handleTaskUser = async () => {
|
const handleTaskUser = async () => {
|
||||||
let data = await currentTaskAllUser(taskId.value);
|
const data = await currentTaskAllUser(taskId.value);
|
||||||
deleteUserList.value = data.data;
|
deleteUserList.value = data.data;
|
||||||
if (deleteUserList.value && deleteUserList.value.length > 0) {
|
if (deleteUserList.value && deleteUserList.value.length > 0) {
|
||||||
deleteUserList.value.forEach((e) => {
|
deleteUserList.value.forEach((e) => {
|
||||||
@ -411,6 +499,26 @@ const handleTaskUser = async () => {
|
|||||||
}
|
}
|
||||||
deleteSignatureVisible.value = true;
|
deleteSignatureVisible.value = true;
|
||||||
};
|
};
|
||||||
|
// 选择人员
|
||||||
|
const choosePeople = async (data) => {
|
||||||
|
if (!data.permissionFlag) {
|
||||||
|
proxy?.$modal.msgError('没有可选择的人员,请联系管理员!');
|
||||||
|
}
|
||||||
|
popUserIds.value = data.permissionFlag;
|
||||||
|
nodeCode.value = data.nodeCode;
|
||||||
|
porUserRef.value.open();
|
||||||
|
};
|
||||||
|
//确认选择
|
||||||
|
const handlePopUser = async (userList) => {
|
||||||
|
const userIds = userList.map((item) => {
|
||||||
|
return item.userId;
|
||||||
|
});
|
||||||
|
const nickNames = userList.map((item) => {
|
||||||
|
return item.nickName;
|
||||||
|
});
|
||||||
|
form.value.assigneeMap[nodeCode.value] = userIds.join(',');
|
||||||
|
nickName.value[nodeCode.value] = nickNames.join(',');
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 对外暴露子组件方法
|
* 对外暴露子组件方法
|
||||||
|
Reference in New Issue
Block a user