111 lines
3.2 KiB
Vue
111 lines
3.2 KiB
Vue
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<el-dialog :title="title" :visible.sync="visible" width="800px">
|
|||
|
|
<div v-if="processConfig && processConfig.nodeList" style="margin-top: 30px" v-loading="loading">
|
|||
|
|
<div style="margin-bottom: 15px; font-weight: bold">审批进度</div>
|
|||
|
|
<el-timeline>
|
|||
|
|
<el-timeline-item
|
|||
|
|
v-for="node in processConfig.nodeList"
|
|||
|
|
:key="node.id"
|
|||
|
|
:timestamp="getNodeRecord(node) ? getNodeRecord(node).approveTime : ''"
|
|||
|
|
placement="top"
|
|||
|
|
:type="getNodeTagType(node)"
|
|||
|
|
>
|
|||
|
|
<p>
|
|||
|
|
<strong>{{ node.nodeName }}</strong>
|
|||
|
|
<span style="margin-left: 20px">{{ getNodeStatusLabel(node) }}</span>
|
|||
|
|
</p>
|
|||
|
|
<p v-if="getNodeRecord(node)"> 审批人：{{ getNodeRecord(node).approverName }} </p>
|
|||
|
|
<p v-if="getNodeRecord(node)"> 审批意见：{{ getNodeRecord(node).approveOpinion }} </p>
|
|||
|
|
</el-timeline-item>
|
|||
|
|
</el-timeline>
|
|||
|
|
</div>
|
|||
|
|
</el-dialog>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { getApprovalInstanceByBusiness, getApprovalDetail, getProcessConfig } from '@/api/approval'
|
|||
|
|
export default {
|
|||
|
|
name: 'ApproveDialog',
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
visible: false,
|
|||
|
|
title: '审批详情',
|
|||
|
|
loading: false,
|
|||
|
|
approvalInstance: {},
|
|||
|
|
processConfig: { nodeList: [] },
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 获取节点标签类型
|
|||
|
|
getNodeTagType(node) {
|
|||
|
|
const record = this.getNodeRecord(node)
|
|||
|
|
if (record) {
|
|||
|
|
return record.approveResult === '1' ? 'success' : 'danger'
|
|||
|
|
}
|
|||
|
|
if (node.id === this.approvalInstance.currentNodeId) {
|
|||
|
|
return 'warning'
|
|||
|
|
}
|
|||
|
|
return 'info'
|
|||
|
|
},
|
|||
|
|
// 获取节点记录
|
|||
|
|
getNodeRecord(node) {
|
|||
|
|
if (!this.approvalInstance.recordList) {
|
|||
|
|
return null
|
|||
|
|
}
|
|||
|
|
return this.approvalInstance.recordList.find((record) => record.nodeId === node.id)
|
|||
|
|
},
|
|||
|
|
// 获取节点状态标签
|
|||
|
|
getNodeStatusLabel(node) {
|
|||
|
|
const record = this.getNodeRecord(node)
|
|||
|
|
if (record) {
|
|||
|
|
return record.approveResult === '1' ? '已通过' : '已驳回'
|
|||
|
|
}
|
|||
|
|
if (node.id === this.approvalInstance.currentNodeId) {
|
|||
|
|
return '审批中'
|
|||
|
|
}
|
|||
|
|
return '未开始'
|
|||
|
|
},
|
|||
|
|
async getInfo(id, type) {
|
|||
|
|
try {
|
|||
|
|
this.loading = true
|
|||
|
|
const businessId = id
|
|||
|
|
|
|||
|
|
if (!businessId) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const instanceRes = await getApprovalInstanceByBusiness(type, businessId)
|
|||
|
|
|
|||
|
|
if (!instanceRes || !instanceRes.data) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const instanceId = instanceRes.data.id
|
|||
|
|
const processId = instanceRes.data.processId
|
|||
|
|
|
|||
|
|
if (!instanceId || !processId) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
const approvalRes = await getApprovalDetail(instanceId)
|
|||
|
|
this.approvalInstance = approvalRes.data || {}
|
|||
|
|
if (!approvalRes.data) return
|
|||
|
|
const res = await getProcessConfig(processId)
|
|||
|
|
this.processConfig = res.data || { nodeList: [] }
|
|||
|
|
} catch (error) {
|
|||
|
|
console.log('🚀 ~ error:', error)
|
|||
|
|
} finally {
|
|||
|
|
this.loading = false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
openDialog(id, type) {
|
|||
|
|
this.getInfo(id, type)
|
|||
|
|
this.visible = true
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped></style>
|