|
|
|
|
@ -1,12 +1,20 @@ |
|
|
|
|
<template> |
|
|
|
|
<div> |
|
|
|
|
<el-dialog :close-on-click-modal="false" :title="inDialogTiltle" :visible.sync="inDialogVisible" |
|
|
|
|
:append-to-body="true" width="20%" @close="handleCloseDetail"> |
|
|
|
|
<el-steps class="teps-con" direction="vertical" :active="1"> |
|
|
|
|
<el-step v-for="(item, index) in processedApproveList" |
|
|
|
|
<el-dialog |
|
|
|
|
:close-on-click-modal="false" |
|
|
|
|
:title="inDialogTiltle" |
|
|
|
|
:visible.sync="inDialogVisible" |
|
|
|
|
:append-to-body="true" |
|
|
|
|
width="20%" |
|
|
|
|
@close="handleCloseDetail" |
|
|
|
|
> |
|
|
|
|
<el-steps class="teps-con" direction="vertical" :active="-1"> |
|
|
|
|
<el-step |
|
|
|
|
v-for="(item, index) in processedApproveList" |
|
|
|
|
:key="item.id" |
|
|
|
|
:title="item.userName" |
|
|
|
|
:description="`状态:${item.statusText}\n${item.formattedTime}`" |
|
|
|
|
:status="item.stepStatus" |
|
|
|
|
></el-step> |
|
|
|
|
</el-steps> |
|
|
|
|
</el-dialog> |
|
|
|
|
@ -33,51 +41,70 @@ export default { |
|
|
|
|
computed: { |
|
|
|
|
// 处理审批列表数据 |
|
|
|
|
processedApproveList() { |
|
|
|
|
return this.approveList.map(item => { |
|
|
|
|
// 1. 处理时间格式化 |
|
|
|
|
let formattedTime = '' |
|
|
|
|
return this.approveList.map((item) => { |
|
|
|
|
let formattedTime = ""; |
|
|
|
|
if (item.optTime) { |
|
|
|
|
const date = new Date(item.optTime); |
|
|
|
|
const pad = (num) => num.toString().padStart(2, '0'); |
|
|
|
|
formattedTime = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`; |
|
|
|
|
const pad = (num) => num.toString().padStart(2, "0"); |
|
|
|
|
formattedTime = `${date.getFullYear()}-${pad( |
|
|
|
|
date.getMonth() + 1 |
|
|
|
|
)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad( |
|
|
|
|
date.getMinutes() |
|
|
|
|
)}:${pad(date.getSeconds())}`; |
|
|
|
|
} |
|
|
|
|
let statusText = '待审核' |
|
|
|
|
if (item.status !== '' && item.status !== undefined) { |
|
|
|
|
|
|
|
|
|
let statusText = "待审核"; |
|
|
|
|
let stepStatus = "wait"; // 默认状态 |
|
|
|
|
|
|
|
|
|
if (item.status !== "" && item.status !== undefined) { |
|
|
|
|
const statusMap = { |
|
|
|
|
0: '审批中', |
|
|
|
|
1: '已完成', |
|
|
|
|
2: '已驳回', |
|
|
|
|
0: "审批中", |
|
|
|
|
1: "已完成", |
|
|
|
|
2: "已驳回", |
|
|
|
|
}; |
|
|
|
|
statusText = statusMap[item.status] || ''; |
|
|
|
|
statusText = statusMap[item.status] || "未知"; |
|
|
|
|
|
|
|
|
|
// 映射到 el-step 的 status |
|
|
|
|
if (item.status === '0') { |
|
|
|
|
stepStatus = "process"; |
|
|
|
|
} else if (item.status === '1') { |
|
|
|
|
stepStatus = "finish"; |
|
|
|
|
} else if (item.status === '2') { |
|
|
|
|
stepStatus = "error"; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return { |
|
|
|
|
...item, |
|
|
|
|
formattedTime, |
|
|
|
|
statusText, |
|
|
|
|
stepStatus, // 👈 新增字段 |
|
|
|
|
}; |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
activeStep() { |
|
|
|
|
return this.processedApproveList.findIndex((item, index, array) => { |
|
|
|
|
return index === array.length - 1 && item.statusText !== '审批中'; |
|
|
|
|
}) || 0; |
|
|
|
|
} |
|
|
|
|
return ( |
|
|
|
|
this.processedApproveList.findIndex((item, index, array) => { |
|
|
|
|
return index === array.length - 1 && item.statusText !== "审批中"; |
|
|
|
|
}) || 0 |
|
|
|
|
); |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
handleCloseDetail() { |
|
|
|
|
this.inDialogVisible = false; |
|
|
|
|
this.$emit("closeDialog"); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
inDialogVisible: false, |
|
|
|
|
inDialogTiltle: "审批流程" |
|
|
|
|
inDialogTiltle: "审批流程", |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
mounted() { |
|
|
|
|
this.inDialogVisible = this.showDialog; |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
@ -98,7 +125,6 @@ export default { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// :deep(.el-dialog__body) { |
|
|
|
|
// height: 300px; |
|
|
|
|
// } |
|
|
|
|
|