425 lines
11 KiB
Vue
425 lines
11 KiB
Vue
<template>
|
||
<div>
|
||
<el-button v-print="print" color="#ded0b2" icon="Printer"> 打印</el-button>
|
||
</div>
|
||
<div style="margin: 10px" id="printBox">
|
||
<el-timeline>
|
||
<el-timeline-item v-for="(operation,index) in operationList"
|
||
:key="index" :timestamp="operation.startTime"
|
||
:icon="operation.icon"
|
||
:color="operation.color"
|
||
size="large"
|
||
placement="top">
|
||
<template #dot>
|
||
<!-- :style="{backgroundColor:operation.color}"-->
|
||
<div style="background-color:#fff;width: 16px; height: 16px">
|
||
<el-icon :color="operation.color" size="16px">
|
||
<component :is="operation.icon"></component>
|
||
</el-icon>
|
||
</div>
|
||
</template>
|
||
<el-card>
|
||
<div>
|
||
当前节点: {{ operation.operationName }}
|
||
</div>
|
||
<div class="card">
|
||
<div v-for="(user,index) in operation.userInfo" :key="index" class="avatar_name"
|
||
:style="{'flex-direction': isColumn?'column':'row'}">
|
||
<div class="avatar-block" :style="{'margin-bottom': isColumn?'10px':'0'}">
|
||
<name-circle :user="user" :type="operation.operation"/>
|
||
<div class="name">
|
||
<div style="display: flex;align-items: center">
|
||
<el-icon :color="user.accountType==='0'?'#95d475':user.accountType==null?'#95d475':'#409eff'"
|
||
style="margin-right: 5px;">
|
||
<UserFilled/>
|
||
</el-icon>
|
||
<span class="name-style">{{ user.name }}</span>
|
||
</div>
|
||
<span>{{ user.jobActivityDesc }}</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<!-- <div class="remark">{{ operation.remark }}</div>-->
|
||
<!-- <div>-->
|
||
<!-- <div>审批人：</div>-->
|
||
<!-- <div>{{ user.name }}</div>-->
|
||
<!-- </div>-->
|
||
<div v-if="user.auditOpinion">
|
||
<div style="margin-bottom: 10px;color: #909399">{{ user.operationTime }}</div>
|
||
<div class="username">
|
||
<span style="font-weight: bold">审批意见：</span>
|
||
<el-text v-text="user.auditOpinion" style="word-break: break-all">
|
||
</el-text>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</el-timeline-item>
|
||
<el-timeline-item :color="timeline.color" :icon="timeline.icon" size="large">
|
||
<template #dot>
|
||
<div style="background-color:#fff;width: 16px; height: 16px">
|
||
<el-icon :color="timeline.color" size="16px">
|
||
<component :is="timeline.icon"></component>
|
||
</el-icon>
|
||
</div>
|
||
</template>
|
||
<el-card style="font-size: 16px;font-weight: bold;">
|
||
{{ timeline.context }}
|
||
</el-card>
|
||
</el-timeline-item>
|
||
</el-timeline>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import NameCircle from "@/components/NameCircle.vue";
|
||
|
||
const props = defineProps({
|
||
operationList: {
|
||
type: Array,
|
||
default: () => {
|
||
return []
|
||
}
|
||
},
|
||
state: {
|
||
type: String,
|
||
default: () => {
|
||
return '1'
|
||
}
|
||
},
|
||
isColumn: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
step: {
|
||
type: String,
|
||
default: ""
|
||
}
|
||
})
|
||
|
||
const timeline = ref({
|
||
color: '',
|
||
icon: '',
|
||
context: ''
|
||
})
|
||
const print = ref({
|
||
id: 'printBox',//这里的id就是上面我们的打印区域id，实现指哪打哪
|
||
popTitle: '配置页眉标题', // 打印配置页上方的标题
|
||
extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
|
||
preview: false, // 是否启动预览模式，默认是false
|
||
previewTitle: '预览的标题', // 打印预览的标题
|
||
previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
|
||
zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
|
||
previewBeforeOpenCallback() {
|
||
console.log('正在加载预览窗口！');
|
||
}, // 预览窗口打开之前的callback
|
||
previewOpenCallback() {
|
||
console.log('已经加载完预览窗口，预览打开了！')
|
||
}, // 预览窗口打开时的callback
|
||
beforeOpenCallback() {
|
||
console.log('开始打印之前！')
|
||
}, // 开始打印之前的callback
|
||
openCallback() {
|
||
console.log('执行打印了！')
|
||
}, // 调用打印时的callback
|
||
closeCallback() {
|
||
console.log('关闭了打印工具！')
|
||
}, // 关闭打印的callback(无法区分确认or取消)
|
||
clickMounted() {
|
||
console.log('点击v-print绑定的按钮了！')
|
||
},
|
||
|
||
})
|
||
|
||
const init = () => {
|
||
switch (props.state) {
|
||
case '1':
|
||
timeline.value = {
|
||
color: '#f78f5f',
|
||
icon: 'MoreFilled',
|
||
context: '审批进行中'
|
||
}
|
||
break
|
||
case '4':
|
||
if (props.step != 'report') {
|
||
timeline.value = {
|
||
color: '#0bbd87',
|
||
icon: 'CircleCheckFilled',
|
||
context: '审批通过'
|
||
}
|
||
} else {
|
||
timeline.value = {
|
||
color: '#f78f5f',
|
||
icon: 'MoreFilled',
|
||
context: '年度计划审批中'
|
||
}
|
||
}
|
||
break
|
||
case '2':
|
||
timeline.value = {
|
||
color: '#0bbd87',
|
||
icon: 'CircleCheckFilled',
|
||
context: '审批通过'
|
||
}
|
||
break
|
||
case '3':
|
||
timeline.value = {
|
||
color: '#f56c6c',
|
||
icon: 'CircleCloseFilled',
|
||
context: '审核已驳回'
|
||
}
|
||
break
|
||
case '5':
|
||
case '6':
|
||
timeline.value = {
|
||
color: '#0bbd87',
|
||
icon: 'CircleCheckFilled',
|
||
context: '年度计划审批通过'
|
||
}
|
||
break
|
||
default:
|
||
break
|
||
}
|
||
// let operationListNew = []
|
||
for (let i = 0; i < props.operationList?.length; i++) {
|
||
let operationNew = initOperationFun(props.operationList[i])
|
||
let userList = []
|
||
if (operationNew.userInfo) {
|
||
for (let user of operationNew.userInfo) {
|
||
let userNew = initUser(user, operationNew.operation)
|
||
userList.push(userNew)
|
||
}
|
||
operationNew.userInfo = userList
|
||
}
|
||
// operationListNew.push(operationNew)
|
||
// this.operationList.push(operationNew)
|
||
props.operationList[i] = operationNew
|
||
}
|
||
}
|
||
//获取到对应附件的地址
|
||
|
||
const getAttachmentList = (attachments, image) => {
|
||
let result = [];
|
||
if (attachments) {
|
||
for (let attachment of attachments) {
|
||
if (attachment.isImage === image) {
|
||
result.push(attachment)
|
||
}
|
||
}
|
||
}
|
||
return result;
|
||
}
|
||
|
||
const initUser = (user, type) => {
|
||
let state = user.state
|
||
//创建节点
|
||
if (state === 'CREATE') {
|
||
user["icon"] = 'CircleCheckFilled'
|
||
user["color"] = "#0bbd87"
|
||
}
|
||
//审批通过
|
||
if (state === 'AGREE' || state === 'AUTO_PASS') {
|
||
user["icon"] = 'CircleCheckFilled'
|
||
user["color"] = "#0bbd87"
|
||
}
|
||
if (type === "CC") {
|
||
user["icon"] = "Promotion"
|
||
user["color"] = "#3395f8"
|
||
}
|
||
//审批处理中
|
||
if (state === 'RUNNING') {
|
||
user["icon"] = 'Loading'
|
||
user["color"] = "#f78f5f"
|
||
user["class"] = 'is-loading'
|
||
}
|
||
//拒绝后评论
|
||
if (state === 'REFUSE') {
|
||
user["icon"] = 'Close'
|
||
user["color"] = "#f56c6c"
|
||
}
|
||
if (state === 'PASS') {
|
||
user["icon"] = 'MoreFilled'
|
||
user["color"] = "#c0c4cc"
|
||
}
|
||
return user;
|
||
}
|
||
|
||
const initOperationFun = (operation) => {
|
||
let state = operation.state
|
||
let type = operation.operation
|
||
//创建节点
|
||
if (type === 'CREATE') {
|
||
operation["icon"] = "CircleCheckFilled"
|
||
operation["color"] = "#0bbd87"
|
||
}
|
||
if (type === 'OPINION') {
|
||
//审批通过
|
||
if (state === 'AGREE' || state === 'AUTO_PASS') {
|
||
operation["icon"] = "CircleCheckFilled"
|
||
operation["color"] = "#0bbd87"
|
||
operation["remark"] = " 已同意"
|
||
}
|
||
if (state === 'PASS') {
|
||
operation["icon"] = "SemiSelect"
|
||
operation["color"] = "#c0c4cc"
|
||
}
|
||
//审批处理中
|
||
if (state === 'RUNNING') {
|
||
operation["icon"] = "Loading"
|
||
operation["color"] = "#f78f5f"
|
||
operation["remark"] = " 处理中"
|
||
}
|
||
//回退
|
||
if (state === 'ROLLBACK') {
|
||
operation["icon"] = "RefreshLeft"
|
||
operation["color"] = "#f78f5f"
|
||
operation["remark"] = " 回退成功"
|
||
}
|
||
//拒绝操作
|
||
if (state === 'REFUSE' || state === 'AUTO_REFUSE') {
|
||
operation["icon"] = "CircleCloseFilled"
|
||
operation["color"] = "#f56c6c"
|
||
operation["remark"] = " 拒绝"
|
||
}
|
||
}
|
||
//抄送
|
||
if (type === 'CC') {
|
||
operation["icon"] = "Promotion"
|
||
operation["color"] = "#3395f8"
|
||
operation["remark"] = " 抄送成功"
|
||
}
|
||
//评论
|
||
if (type === 'COMMENT') {
|
||
//评论
|
||
if (state === 'COMMENT') {
|
||
operation["icon"] = "ChatDotRound"
|
||
operation["color"] = "#0bbd87"
|
||
operation["remark"] = " 添加了评论"
|
||
}
|
||
}
|
||
//触发器发送http请求
|
||
if (type === 'TRIGGER_WEBHOOK') {
|
||
operation["icon"] = "Share"
|
||
if (state === 'SUCCESS') {
|
||
operation["color"] = "#0bbd87"
|
||
operation["remark"] = " 成功"
|
||
} else if (state === 'RUNNING') {
|
||
operation["color"] = "#f78f5f"
|
||
operation["remark"] = " 请求中"
|
||
} else {
|
||
operation["color"] = "#f56c6c"
|
||
operation["remark"] = " 失败"
|
||
}
|
||
}
|
||
|
||
//触发器发送邮件
|
||
if (type === 'TRIGGER_EMAIL') {
|
||
operation["icon"] = "Message"
|
||
if (state === 'SUCCESS') {
|
||
operation["color"] = "#0bbd87"
|
||
operation["remark"] = " 成功"
|
||
} else if (state === 'RUNNING') {
|
||
operation["color"] = "#f78f5f"
|
||
operation["remark"] = " 发送中"
|
||
} else {
|
||
operation["color"] = "#f78f5f"
|
||
operation["remark"] = " 发送中"
|
||
}
|
||
}
|
||
return operation;
|
||
}
|
||
init()
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
:deep(.el-timeline-item__dot) {
|
||
margin-left: -3px;
|
||
}
|
||
:deep .el-card__body, .el-main {
|
||
padding: 10px;
|
||
}
|
||
|
||
.card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-size: 15px;
|
||
|
||
> div:first-child {
|
||
display: flex;
|
||
}
|
||
|
||
.avatar_name {
|
||
padding: 10px 0;
|
||
display: flex;
|
||
margin-right: 5px;
|
||
border-bottom: 1px solid #ebeef5;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.avatar-block {
|
||
display: flex;
|
||
|
||
.name {
|
||
width: 130px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-left: 10px;
|
||
margin-right: 20px;
|
||
|
||
.name-style {
|
||
color: #2a99ff;
|
||
}
|
||
|
||
> span:last-child {
|
||
margin-top: 5px;
|
||
color: #909399;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
> div:nth-child(2) {
|
||
display: flex;
|
||
flex-direction: column;
|
||
color: #8a8a8a;
|
||
|
||
.remark {
|
||
font-weight: bold;
|
||
}
|
||
|
||
> div {
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
> div:nth-child(2) {
|
||
//display: flex;
|
||
margin-top: -5px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.el-timeline-item__node {
|
||
position: absolute;
|
||
bottom: 20px;
|
||
right: 1px;
|
||
}
|
||
|
||
.username {
|
||
margin-top: 10px;
|
||
background: #f5f5f5;
|
||
padding: 12px;
|
||
}
|
||
|
||
@media print {
|
||
//:deep .el-timeline-item__node--large > .el-icon {
|
||
// color: $iconColor !important;
|
||
//}
|
||
}
|
||
</style>
|