init
This commit is contained in:
clay
380
src/views/workflow/common/Comment.vue
Normal file
380
src/views/workflow/common/Comment.vue
Normal file
@@ -0,0 +1,380 @@
|
||||
<template>
|
||||
<el-dialog custom-class="custom-dialog" class="border" width="500px" :title="title"
|
||||
v-model="visible">
|
||||
<!--显示转签弹出框-->
|
||||
<div v-if="type === 3" style="margin-bottom: 10px;">
|
||||
<span>转交给谁：</span>
|
||||
<el-button size="mini" icon="User" @click="chooseUser">选择人员</el-button>
|
||||
<div class="userStyle" v-for="(user, i) in userList" :key="i">
|
||||
<span @click="delDept(i)">×</span>
|
||||
<el-avatar :src="user.avatar"/>
|
||||
<el-tooltip class="item" effect="dark" :content="user.name" placement="bottom-start">
|
||||
<span>{{ user.name }}</span>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<!--显示退回节点弹出框-->
|
||||
<div v-if="type === 4" style="margin-bottom: 10px">
|
||||
<span>回退节点：</span>
|
||||
<el-select v-if="userTaskOption.length >0 " v-model="rollBackId" slot="prepend" placeholder="选择要回退到的节点" filterable>
|
||||
<el-option v-for="(option,index) in userTaskOption" :key="index"
|
||||
:label="option.label" :value="option.value"/>
|
||||
</el-select>
|
||||
<span v-if="userTaskOption.length <=0 " style="margin-left: 10px;color: rgb(140, 140, 140);">暂无可回退节点</span>
|
||||
</div>
|
||||
<!--显示增加审批人弹出框-->
|
||||
<div v-if="type === 5" style="margin-bottom: 10px;">
|
||||
<span>给谁加签：</span>
|
||||
<el-button size="mini" icon="User" @click="chooseUser">选择人员</el-button>
|
||||
<div class="userStyle" v-for="(user, i) in userList" :key="i">
|
||||
<span @click="delDept(i)">×</span>
|
||||
<el-avatar :src="user.avatar"/>
|
||||
<el-tooltip class="item" effect="dark" :content="user.name" placement="bottom-start">
|
||||
<span>{{ user.name }}</span>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="el-textarea">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
maxlength="255"
|
||||
show-word-limit
|
||||
placeholder="评论内容"
|
||||
v-model="context">
|
||||
</el-input>
|
||||
</div>
|
||||
<div style="margin: 20px 0;" v-if="imageList && imageList.length > 0">
|
||||
<el-upload :file-list="imageList"
|
||||
:limit="imageSize" with-credentials
|
||||
:multiple="imageSize > 0"
|
||||
:data="uploadParams"
|
||||
list-type="picture-card"
|
||||
:action="uploadFileUrl"
|
||||
:headers="headers"
|
||||
:auto-upload="true"
|
||||
:on-success="handleUploadSuccess"
|
||||
:before-upload="beforeUpload">
|
||||
<el-icon>
|
||||
<Plus />
|
||||
</el-icon>
|
||||
<!-- <i slot="default" class="el-icon-plus"></i>-->
|
||||
<div slot="file" slot-scope="{file}">
|
||||
<img style="width: 100%;height: 100%" :src="file.url" alt="">
|
||||
<label class="el-upload-list__item-status-label">
|
||||
<i class="el-icon-upload-success el-icon-check"></i>
|
||||
</label>
|
||||
<span class="el-upload-list__item-actions">
|
||||
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
|
||||
<i class="el-icon-zoom-in"></i>
|
||||
</span>
|
||||
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
|
||||
<i class="el-icon-download"></i>
|
||||
</span>
|
||||
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
|
||||
<i class="el-icon-delete"></i>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div slot="tip">添加图片 {{ sizeTip }}</div>
|
||||
</el-upload>
|
||||
<el-dialog :visible.sync="dialogVisible" center append-to-body>
|
||||
<div>
|
||||
<img width="100%" :src="dialogImageUrl" alt="" style="z-index: 3435">
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<el-upload style="margin-top: 10px" :file-list="attachmentList"
|
||||
:limit="attachmentMaxSize" with-credentials
|
||||
:multiple="attachmentMaxSize > 0"
|
||||
:action="uploadFileUrl"
|
||||
:headers="headers"
|
||||
:auto-upload="true"
|
||||
:on-success="handleAttachmentUploadSuccess"
|
||||
:before-upload="beforeAttachmentUpload"
|
||||
:on-remove="handleRemoveAttachment"
|
||||
>
|
||||
<el-button size="small" round >
|
||||
<el-icon>
|
||||
<Plus />
|
||||
</el-icon>
|
||||
<span>选择文件</span>
|
||||
</el-button>
|
||||
<div slot="tip" style="margin-left: 5px"> 添加附件 {{ attachmentTip }}</div>
|
||||
</el-upload>
|
||||
|
||||
<div slot="footer">
|
||||
<el-button size="mini" @click="visible = false; emit('cancel')">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="selectConfirm">确 定</el-button>
|
||||
</div>
|
||||
<user-picker :multiple="false" ref="userPicker" title="请选择人员" v-model:value="userList" @ok="selected"/>
|
||||
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {deleteFile} from '@/api/workflow/process-file.js'
|
||||
const baseURL = import.meta.env.VITE_BASE_URL
|
||||
import {computed, defineProps,defineEmits} from "vue";
|
||||
import {useProcessStore} from '@/stores/processStore.js'
|
||||
import { getToken } from '@/utils/auth'
|
||||
import {ElMessage} from "element-plus";
|
||||
import UserPicker from "../process/common/UserPicker.vue";
|
||||
const processStore = useProcessStore()
|
||||
const emit = defineEmits()
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: "添加评论"
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: "评论内容"
|
||||
},
|
||||
imageSize: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
type: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
attachmentMaxSize: {
|
||||
type: Number,
|
||||
default: 100
|
||||
}
|
||||
});
|
||||
|
||||
const sizeTip = computed(() => {
|
||||
return props.imageSize > 0 ? `| 每张图不超过${props.imageSize}MB` : "";
|
||||
});
|
||||
|
||||
const attachmentTip = computed(() => {
|
||||
return props.attachmentMaxSize > 0 ? `| 单个附件不超过${props.attachmentMaxSize}MB` : "";
|
||||
});
|
||||
|
||||
const userTaskOption = computed(() => {
|
||||
let optionList = processStore.userTaskOption.value;
|
||||
if (optionList) {
|
||||
return optionList;
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
});
|
||||
const userList = ref([])
|
||||
const userPicker = ref()
|
||||
const visible = ref(false);
|
||||
const disabled = ref(false);
|
||||
const imageList = ref([]);
|
||||
const attachmentList = ref([]);
|
||||
const uploadParams = ref({});
|
||||
const uploadFileUrl = ref(baseURL + "/workflow/process/file");
|
||||
const headers = ref({
|
||||
authorization: getToken()
|
||||
});
|
||||
const context = ref(null);
|
||||
const rollBackId = ref(null);
|
||||
const dialogImageUrl = ref("");
|
||||
const dialogVisible = ref(false);
|
||||
const chooseUser=()=>{
|
||||
userPicker.value.showUserPicker()
|
||||
}
|
||||
const show = () => {
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
const handleChange = (file, imageList) => {
|
||||
imageList.value = imageList.slice(-3);
|
||||
};
|
||||
|
||||
const handleUploadSuccess = (res, file) => {
|
||||
if (res.code !== 1000) {
|
||||
ElMessage.error("上传失败");
|
||||
}
|
||||
let data = res.data;
|
||||
imageList.value.push(data);
|
||||
};
|
||||
|
||||
const handleAttachmentUploadSuccess = (res, file) => {
|
||||
if (res.code !== 1000) {
|
||||
ElMessage.error("上传失败");
|
||||
}
|
||||
let data = res.data;
|
||||
attachmentList.value.push(data);
|
||||
};
|
||||
|
||||
const beforeAttachmentUpload = (file) => {
|
||||
if (props.attachmentMaxSize > 0 && file.size / 1024 / 1024 > props.attachmentMaxSize) {
|
||||
ElMessage.warning(`单张图片最大不超过 ${props.attachmentMaxSize}MB`);
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
const beforeUpload = (file) => {
|
||||
const alows = ["image/jpeg", "image/png", "image/gif", "image/jpg"];
|
||||
if (alows.indexOf(file.type) === -1) {
|
||||
ElMessage.warning("存在不支持的图片格式");
|
||||
} else if (props.imageSize > 0 && file.size / 1024 / 1024 > props.imageSize) {
|
||||
ElMessage.warning(`单张图片最大不超过 ${props.imageSize}MB`);
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const handlePictureCardPreview = (file) => {
|
||||
dialogVisible.value = true;
|
||||
dialogImageUrl.value = file.url;
|
||||
};
|
||||
|
||||
const handleDownload = (file) => {
|
||||
console.log(file);
|
||||
};
|
||||
const handleRemoveAttachment=(file)=>{
|
||||
handleRemove(file.response.data)
|
||||
}
|
||||
const handleRemove = (file) => {
|
||||
deleteFile(file.id).then(res => {
|
||||
if (res.code === 1000) {
|
||||
ElMessage.success("删除成功");
|
||||
this.fileList.splice(this.fileList.findIndex((item) => item.id === file.id), 1);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const selectConfirm = () => {
|
||||
let fileList = [];
|
||||
attachmentList.value.forEach((attachment) => {
|
||||
fileList.push({
|
||||
id: attachment.id,
|
||||
name: attachment.name,
|
||||
isImage: attachment.isImage,
|
||||
size: attachment.size,
|
||||
url: attachment.url
|
||||
});
|
||||
});
|
||||
imageList.value.forEach((image) => {
|
||||
fileList.push({
|
||||
id: image.id,
|
||||
name: image.name,
|
||||
isImage: image.isImage,
|
||||
size: image.size,
|
||||
url: image.url
|
||||
});
|
||||
});
|
||||
let data = {
|
||||
context: context.value,
|
||||
attachments: fileList,
|
||||
rollBackId: rollBackId.value
|
||||
};
|
||||
console.log(data)
|
||||
emit("ok", data, props.type);
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
const selected = (select) => {
|
||||
let userInfoList = []
|
||||
for (let val of select) {
|
||||
let userInfo = {
|
||||
id: val.id,
|
||||
name: val.name,
|
||||
avatar: val.avatar,
|
||||
}
|
||||
userInfoList.push(userInfo)
|
||||
}
|
||||
userList.value = userInfoList
|
||||
console.log('select',userList.value)
|
||||
}
|
||||
const delDept = (i) => {
|
||||
userList.value.splice(i, 1)
|
||||
}
|
||||
defineExpose({
|
||||
show
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.userStyle {
|
||||
width: 45px;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
|
||||
span:first-child {
|
||||
position: absolute;
|
||||
right: -3px;
|
||||
top: -11px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span:last-child {
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden
|
||||
}
|
||||
}
|
||||
|
||||
.custom-dialog {
|
||||
:deep .el-dialog__header {
|
||||
padding: 10px 20px;
|
||||
|
||||
.el-dialog__title {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.el-dialog__headerbtn {
|
||||
top: 15px;
|
||||
|
||||
.i {
|
||||
font-size: large;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep .el-dialog__footer {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.border {
|
||||
:deep .el-dialog__header {
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
:deep .el-dialog__footer {
|
||||
border-top: 1px solid #e8e8e8;
|
||||
}
|
||||
}
|
||||
|
||||
:deep .el-select .el-input__inner {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
:deep .el-select .el-input .el-select__caret {
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
:deep .el-upload--picture-card {
|
||||
width: 65px;
|
||||
height: 65px;
|
||||
line-height: 70px;
|
||||
}
|
||||
|
||||
:deep .el-upload-list--picture-card {
|
||||
.el-upload-list__item {
|
||||
width: 65px !important;
|
||||
height: 65px !important;
|
||||
}
|
||||
}
|
||||
|
||||
:deep .el-upload-list__item-status-label {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
98
src/views/workflow/common/InstanceDetails.vue
Normal file
98
src/views/workflow/common/InstanceDetails.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<el-drawer
|
||||
title="审批详情"
|
||||
size="500px"
|
||||
v-model="approveOpen"
|
||||
direction="rtl">
|
||||
<div v-loading="loadingDetails">
|
||||
<div v-if="!loadingDetails">
|
||||
<div class="top">
|
||||
<div class="top_left">
|
||||
<el-avatar size="large" :src="processInstanceData.userInfo.avatar"></el-avatar>
|
||||
<span
|
||||
style="text-align: center;color: #19191a;font-size: 14px;">{{processInstanceData.userInfo.name}}</span>
|
||||
</div>
|
||||
<div class="top_right" v-if="!loadingDetails">
|
||||
<div style="margin-bottom: 12px">
|
||||
<span style="font-size: 15px;margin-right: 15px;">{{ instance.deploymentName }}</span>
|
||||
<tag dict-type="process_state" :value="instance.state"/>
|
||||
<el-tooltip class="item" effect="dark" content="查看详细流程" placement="top-start">
|
||||
<el-icon style="float: right;font-size: 20px;cursor: pointer"
|
||||
@click.native="processDiagramViewer = true">
|
||||
<View/>
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div>
|
||||
<span style="color: rgb(108, 108, 108);">编号: {{ instance.processInstanceId }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 15px;background:#f5f5f5;"></div>
|
||||
<form-render ref="taskViewForm" :form-items="processInstanceData.formItems"
|
||||
v-model:value="processInstanceData.formData"/>
|
||||
<div style="height: 15px;background:#f5f5f5;"></div>
|
||||
<operation-render :operation-list="processInstanceData.operationList"
|
||||
:state="instance.state"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
<el-dialog title="流程详情" v-model="processDiagramViewer" :close-on-click-modal="true">
|
||||
<process-diagram-viewer v-if="processDiagramViewer"/>
|
||||
<div style="height: 70px;"></div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Tag from '@/components/Tag.vue'
|
||||
import FormRender from '@/views/workflow/form/FormRender.vue'
|
||||
import OperationRender from '@/views/workflow/common/OperationRender.vue'
|
||||
import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue'
|
||||
import {getInitiatedInstanceInfo} from "@/api/workflow/process-instance.js";
|
||||
import {defineProps, defineExpose} from 'vue'
|
||||
import {useCacheStore} from '@/stores/cache.js'
|
||||
|
||||
useCacheStore().setCacheKey(['process_state'])
|
||||
import {useProcessStore} from '@/stores/processStore.js'
|
||||
|
||||
const processStore = useProcessStore()
|
||||
|
||||
const props = defineProps({
|
||||
instance: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
})
|
||||
|
||||
const approveOpen = ref()
|
||||
const loadingDetails = ref(true)
|
||||
const processDiagramViewer = ref(false)
|
||||
const processInstanceData = ref()
|
||||
|
||||
|
||||
const loadProcessInstance = async (processInstanceId) => {
|
||||
getInitiatedInstanceInfo(processInstanceId).then(res => {
|
||||
let data = res.data
|
||||
processInstanceData.value = data
|
||||
processStore.setDesign(data)
|
||||
processStore.runningList.value = data.runningList;
|
||||
processStore.endList.value = data.endList;
|
||||
processStore.noTakeList.value = data.noTakeList;
|
||||
processStore.refuseList.value = data.refuseList;
|
||||
processStore.passList.value = data.passList;
|
||||
nextTick(() => {
|
||||
loadingDetails.value = false;
|
||||
})
|
||||
})
|
||||
}
|
||||
const init = () => {
|
||||
approveOpen.value = true
|
||||
loadingDetails.value = true
|
||||
loadProcessInstance(props.instance.processInstanceId)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
init
|
||||
})
|
||||
|
||||
</script>
|
||||
294
src/views/workflow/common/OperationRender.vue
Normal file
294
src/views/workflow/common/OperationRender.vue
Normal 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>
|
||||
27
src/views/workflow/common/ProcessDiagramViewer.vue
Normal file
27
src/views/workflow/common/ProcessDiagramViewer.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="scale">
|
||||
<el-button icon="Plus" size="mini" @click="scale += 10" :disabled="scale >= 150" circle></el-button>
|
||||
<span>{{ scale }}%</span>
|
||||
<el-button icon="Minus" size="mini" @click="scale -= 10" :disabled="scale <= 40" circle></el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 40px">
|
||||
<div :style="'transform: scale('+ scale / 100 +');'">
|
||||
<div id="previewProcess">
|
||||
<process-tree mode="preview" ref="processTreePreview" id-name="previewProcess"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ProcessTree from '@/views/workflow/process/ProcessTree.vue'
|
||||
|
||||
const processTreePreview = ref()
|
||||
const scale = ref(100)
|
||||
|
||||
nextTick(()=>{
|
||||
processTreePreview.value.init()
|
||||
})
|
||||
</script>
|
||||
256
src/views/workflow/common/TaskDetails.vue
Normal file
256
src/views/workflow/common/TaskDetails.vue
Normal file
@@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<el-drawer
|
||||
title="审批详情"
|
||||
size="500px"
|
||||
v-model="approveOpen"
|
||||
direction="rtl">
|
||||
<div v-loading="loadingDetails">
|
||||
<div v-if="!loadingDetails">
|
||||
<div class="top">
|
||||
<div class="top_left">
|
||||
<el-avatar size="large" :src="processTask.userInfo.avatar"></el-avatar>
|
||||
<span
|
||||
style="text-align: center;color: #19191a;font-size: 14px;">{{ processTask.userInfo.name }}</span>
|
||||
</div>
|
||||
<div class="top_right">
|
||||
<div style="margin-bottom: 12px">
|
||||
<span style="font-size: 15px;margin-right: 15px;">{{ task.processName }}</span>
|
||||
<tag dict-type="process_state" :value="task.state"/>
|
||||
</div>
|
||||
<div>
|
||||
<span style="color: rgb(108, 108, 108);">编号: {{ task.taskId }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 15px;background:#f5f5f5;"></div>
|
||||
<form-render ref="taskViewForm" :form-items="processTask.formItems"
|
||||
v-model:value="processTask.formData"/>
|
||||
<div style="height: 15px;background:#f5f5f5;"></div>
|
||||
<operation-render :operation-list="processTask.operationList"
|
||||
:state="task.state"/>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-footer style="display: flex;justify-content: right;align-items: center ">
|
||||
<div style="margin-right: 20px;">
|
||||
<el-dropdown>
|
||||
<span style="color: #2a99ff;cursor: pointer;margin-top: 8px;">
|
||||
更多<el-icon style="margin-left: 5px"><ArrowDown/></el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item icon="Avatar" @click.native="showTransferBox()">转交</el-dropdown-item>
|
||||
<el-dropdown-item icon="Failed" @click.native="showBackNodeBox()">退回</el-dropdown-item>
|
||||
<el-dropdown-item icon="Stamp" @click.native="showAddApprovalBox()">加签</el-dropdown-item>
|
||||
<el-dropdown-item icon="RefreshLeft" @click.native="showRevocationBox()">撤销</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<el-button type="danger" size="mini" plain round style="margin-left: 20px"
|
||||
@click="showRefuseBox()">拒绝
|
||||
</el-button>
|
||||
<el-button type="primary" size="mini" round @click="submitTask()">同意</el-button>
|
||||
</div>
|
||||
<div @click="showCommentBox" style="display: flex;align-items: center">
|
||||
<el-icon size="18"><ChatLineRound /></el-icon>
|
||||
<span style="font-size: 14px;margin-left: 5px">评论</span>
|
||||
</div>
|
||||
</el-footer>
|
||||
</template>
|
||||
</el-drawer>
|
||||
|
||||
<comment ref="comment"
|
||||
:title="commentInfo.title"
|
||||
:type="commentInfo.type"
|
||||
:max-size="5"
|
||||
:attachment-max-size="20" @ok="commentConfirm"/>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import FormRender from '@/views/workflow/form/FormRender.vue'
|
||||
import OperationRender from '@/views/workflow/common/OperationRender.vue'
|
||||
import Comment from '@/views/workflow/common/Comment.vue'
|
||||
import Tag from '@/components/Tag.vue'
|
||||
import {getTaskInfo, refuseTask, rollBackTask, addComment, completeTask} from "@/api/workflow/process-task.js";
|
||||
import {defineProps, defineExpose, defineEmits} from 'vue'
|
||||
import {ElMessage} from "element-plus";
|
||||
import {useProcessStore} from '@/stores/processStore.js'
|
||||
|
||||
const processStore = useProcessStore()
|
||||
import {useCacheStore} from '@/stores/cache.js'
|
||||
|
||||
useCacheStore().setCacheKey(['process_state'])
|
||||
const emit = defineEmits()
|
||||
|
||||
const props = defineProps({
|
||||
task: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
})
|
||||
|
||||
const comment = ref()
|
||||
const approveOpen = ref()
|
||||
const commentInfo = ref({
|
||||
title: null,
|
||||
type: null, //1 添加评论 2 拒绝
|
||||
})
|
||||
const loadingDetails = ref(true)
|
||||
const processTask = ref()
|
||||
const taskViewForm = ref()
|
||||
|
||||
|
||||
const submitTask = () => {
|
||||
taskViewForm.value.validate(valid => {
|
||||
if (valid) {
|
||||
let params = {
|
||||
taskId: props.task.taskId,
|
||||
formData: JSON.stringify(processTask.value.formData)
|
||||
};
|
||||
completeTask(params).then(res => {
|
||||
approveOpen.value = false;
|
||||
emit("refresh")
|
||||
ElMessage.success(res.msg);
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const loadProcessTask = async (taskId) => {
|
||||
getTaskInfo(taskId).then(res => {
|
||||
processTask.value = res.data
|
||||
processStore.setDesign(res.data)
|
||||
processStore.userTaskOption.value = res.data.userTaskOption;
|
||||
nextTick(() => {
|
||||
loadingDetails.value = false;
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const showCommentBox = () => {
|
||||
commentInfo.value = {
|
||||
title: "添加评论",
|
||||
type: 1
|
||||
}
|
||||
commentShow()
|
||||
}
|
||||
|
||||
const showRefuseBox = () => {
|
||||
commentInfo.value = {
|
||||
title: "拒绝任务",
|
||||
type: 2
|
||||
}
|
||||
commentShow()
|
||||
}
|
||||
|
||||
const showTransferBox = () => {
|
||||
commentInfo.value = {
|
||||
title: "转交给其他人审批",
|
||||
type: 3
|
||||
}
|
||||
commentShow()
|
||||
}
|
||||
const showBackNodeBox = () => {
|
||||
commentInfo.value = {
|
||||
title: "退回到之前节点",
|
||||
type: 4
|
||||
}
|
||||
commentShow()
|
||||
}
|
||||
const showAddApprovalBox = () => {
|
||||
commentInfo.value = {
|
||||
title: "加签",
|
||||
type: 5
|
||||
}
|
||||
commentShow()
|
||||
}
|
||||
const showRevocationBox = () => {
|
||||
commentInfo.value = {
|
||||
title: "撤销当前流程",
|
||||
type: 6
|
||||
}
|
||||
commentShow()
|
||||
}
|
||||
const commentShow = () => {
|
||||
nextTick(() => {
|
||||
comment.value.show()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 评论回调
|
||||
* @param data
|
||||
* @param type
|
||||
*/
|
||||
const commentConfirm = (data, type) => {
|
||||
console.log(data, type)
|
||||
switch (type) {
|
||||
case 1:
|
||||
submitComment(data);
|
||||
break;
|
||||
case 2:
|
||||
submitRefuse(data);
|
||||
break;
|
||||
case 4:
|
||||
submitRollBack(data);
|
||||
break;
|
||||
default :
|
||||
break;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 拒绝任务
|
||||
* @param data
|
||||
*/
|
||||
const submitRefuse = (data) => {
|
||||
let params = {
|
||||
taskId: props.task.taskId,
|
||||
comment: data
|
||||
};
|
||||
refuseTask(params).then(res => {
|
||||
approveOpen.value = false;
|
||||
emit("refresh")
|
||||
ElMessage.success(res.msg);
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 回退
|
||||
*/
|
||||
const submitRollBack = (data) => {
|
||||
let params = {
|
||||
taskId: props.task.taskId,
|
||||
rollBackId: data.rollBackId,
|
||||
comment: data,
|
||||
};
|
||||
rollBackTask(params).then(res => {
|
||||
approveOpen.value = false;
|
||||
emit("refresh")
|
||||
ElMessage.success(res.msg);
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 提交评论
|
||||
* @param data
|
||||
*/
|
||||
const submitComment = (data) => {
|
||||
data['taskId'] = props.task.taskId
|
||||
addComment(data).then(res => {
|
||||
approveOpen.value = false;
|
||||
ElMessage.success(res.msg);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const init = () => {
|
||||
approveOpen.value = true
|
||||
loadingDetails.value = true
|
||||
loadProcessTask(props.task.taskId)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
init
|
||||
})
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user