99 lines
3.4 KiB
Vue
99 lines
3.4 KiB
Vue
<template>
|
|
<el-drawer
|
|
title="审批详情"
|
|
size="500px"
|
|
v-model="approveOpen"
|
|
direction="rtl">
|
|
<div v-loading="loadingDetails">
|
|
<div v-if="!loadingDetails">
|
|
<div class="top">
|
|
<div class="top_left">
|
|
<el-avatar size="large" :src="processInstanceData.userInfo.avatar"></el-avatar>
|
|
<span
|
|
style="text-align: center;color: #19191a;font-size: 14px;">{{processInstanceData.userInfo.name}}</span>
|
|
</div>
|
|
<div class="top_right" v-if="!loadingDetails">
|
|
<div style="margin-bottom: 12px">
|
|
<span style="font-size: 15px;margin-right: 15px;">{{ instance.deploymentName }}</span>
|
|
<tag dict-type="process_state" :value="instance.state"/>
|
|
<el-tooltip class="item" effect="dark" content="查看详细流程" placement="top-start">
|
|
<el-icon style="float: right;font-size: 20px;cursor: pointer"
|
|
@click.native="processDiagramViewer = true">
|
|
<View/>
|
|
</el-icon>
|
|
</el-tooltip>
|
|
</div>
|
|
<div>
|
|
<span style="color: rgb(108, 108, 108);">编号: {{ instance.processInstanceId }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="height: 15px;background:#f5f5f5;"></div>
|
|
<!-- <form-render ref="taskViewForm" :form-items="processInstanceData.formItems"-->
|
|
<!-- v-model:value="processInstanceData.formData"/>-->
|
|
<div style="height: 15px;background:#f5f5f5;"></div>
|
|
<operation-render :operation-list="processInstanceData.operationList"
|
|
:state="instance.state"/>
|
|
</div>
|
|
</div>
|
|
</el-drawer>
|
|
<el-dialog title="流程详情" v-model="processDiagramViewer" :close-on-click-modal="true">
|
|
<process-diagram-viewer v-if="processDiagramViewer"/>
|
|
<div style="height: 70px;"></div>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Tag from '@/components/Tag.vue'
|
|
// import FormRender from '@/views/workflow/form/FormRender.vue'
|
|
import OperationRender from '@/views/workflow/common/OperationRender.vue'
|
|
import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue'
|
|
import {getInitiatedInstanceInfo} from "@/api/workflow/process-instance.js";
|
|
import {defineProps, defineExpose} from 'vue'
|
|
import {useCacheStore} from '@/stores/cache.js'
|
|
|
|
useCacheStore().setCacheKey(['process_state'])
|
|
import {useProcessStore} from '@/stores/processStore.js'
|
|
|
|
const processStore = useProcessStore()
|
|
|
|
const props = defineProps({
|
|
instance: {
|
|
type: Object,
|
|
default: {}
|
|
}
|
|
})
|
|
|
|
const approveOpen = ref()
|
|
const loadingDetails = ref(true)
|
|
const processDiagramViewer = ref(false)
|
|
const processInstanceData = ref()
|
|
|
|
|
|
const loadProcessInstance = async (processInstanceId) => {
|
|
getInitiatedInstanceInfo(processInstanceId).then(res => {
|
|
let data = res.data
|
|
processInstanceData.value = data
|
|
processStore.setDesign(data)
|
|
processStore.runningList.value = data.runningList;
|
|
processStore.endList.value = data.endList;
|
|
processStore.noTakeList.value = data.noTakeList;
|
|
processStore.refuseList.value = data.refuseList;
|
|
processStore.passList.value = data.passList;
|
|
nextTick(() => {
|
|
loadingDetails.value = false;
|
|
})
|
|
})
|
|
}
|
|
const init = () => {
|
|
approveOpen.value = true
|
|
loadingDetails.value = true
|
|
loadProcessInstance(props.instance.processInstanceId)
|
|
}
|
|
|
|
defineExpose({
|
|
init
|
|
})
|
|
|
|
</script>
|