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>
|