odjbin/mosr-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
clay
2024-03-04 19:13:43 +08:00
commit e44edd71c0
350 changed files with 52288 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

294
src/views/workflow/common/OperationRender.vue Normal file
View File

@@ -0,0 +1,294 @@
<template>
<div style="margin: 10px">
<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">
<el-card>
<div style="display: flex;">
<div v-for="(user,index) in operation.userInfo" :key="index" class="avatar_name">
<el-avatar size="large" :src="user.avatar"></el-avatar>
<div v-if="!$slots.dot && operation.userInfo.length > 1"
class="el-timeline-item__node" :style="{
backgroundColor: user.color
}">
<el-icon v-if="user.icon" :class="user.class">
<component :is="user.icon"/>
</el-icon>
</div>
<el-tooltip effect="dark" :content="user.name" placement="bottom-start">
<span class="username">{{ user.name }}</span>
</el-tooltip>
</div>
<div style="margin-left: 10px;">
<div style="color: #c0bebe">{{ operation.operationName }}</div>
<div style="font-size: 14px; font-weight: bold;">{{ operation.remark }}</div>
</div>
</div>
<template v-if="operation.comment">
<div style="margin-top: 10px;background:#f5f5f5;padding: 10px;">
<div>
{{ operation.comment.context }}
</div>
<div style="margin-top: 10px;" v-if="operation.comment.attachments && operation.comment.attachments.length > 0">
<template v-for="(item) in getAttachmentList(operation.comment.attachments,true)">
<el-image
style="width: 100px; height: 100px"
:src="item.url"
:preview-src-list="[item.url]">
</el-image>
</template>
<div v-for="(file) in getAttachmentList(operation.comment.attachments,false)">
<el-link style="color: #2a99ff" :href="file.url" icon="el-icon-document">{{ file.name }}</el-link>
</div>
</div>
</div>
</template>
</el-card>
</el-timeline-item>
<el-timeline-item :color="timeline.color" :icon="timeline.icon" size="large">
<el-card style="font-size: 16px;font-weight: bold;">
{{ timeline.context }}
</el-card>
</el-timeline-item>
</el-timeline>
</div>
</template>
<script setup>
import {CircleCheckFilled, Close, Loading, MoreFilled} from "@element-plus/icons-vue";
import {ref,defineProps} from 'vue'
const props = defineProps({
operationList: {
type: Array,
default: () => {
return []
}
},
state: {
type: String,
default: () => {
return '1'
}
}
})
const timeline = ref()
const init = () => {
switch (props.state) {
case '1':
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 '4':
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-card__body, .el-main {
padding: 10px;
}
.avatar_name {
width: 45px;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
margin-right: 5px;
}
.el-timeline-item__node{
position: absolute;
bottom: 20px;
right: 1px;
}
.username {
width: 45px;
padding-top: 2px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden
}
</style>