联调 退役管理
This commit is contained in:
534
src/views/pqs/task/myTask/components/ProcessViewer.vue
Normal file
534
src/views/pqs/task/myTask/components/ProcessViewer.vue
Normal file
@@ -0,0 +1,534 @@
|
||||
<template>
|
||||
<div class="my-process-designer">
|
||||
<div class="my-process-designer__container">
|
||||
<div class="my-process-designer__canvas" style="height: 760px" ref="bpmnCanvas"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, onBeforeUnmount, onMounted, nextTick } from 'vue'
|
||||
import BpmnViewer from 'bpmn-js/lib/Viewer'
|
||||
import 'bpmn-js/dist/assets/diagram-js.css'
|
||||
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
|
||||
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
|
||||
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
|
||||
|
||||
defineOptions({ name: 'MyProcessViewer' })
|
||||
|
||||
const props = defineProps({
|
||||
value: {
|
||||
// BPMN XML 字符串
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
prefix: {
|
||||
// 使用哪个引擎
|
||||
type: String,
|
||||
default: 'camunda'
|
||||
},
|
||||
activityData: {
|
||||
// 活动的数据。传递时，可高亮流程
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['destroy'])
|
||||
|
||||
let bpmnModeler: any
|
||||
|
||||
const xml = ref('')
|
||||
const activityLists = ref<any[]>([])
|
||||
const processInstance = ref<any>(undefined)
|
||||
const taskList = ref<any[]>([])
|
||||
const bpmnCanvas = ref()
|
||||
|
||||
const initBpmnModeler = () => {
|
||||
if (bpmnModeler) return
|
||||
bpmnModeler = new BpmnViewer({
|
||||
container: bpmnCanvas.value,
|
||||
bpmnRenderer: {}
|
||||
})
|
||||
}
|
||||
|
||||
/* 创建新的流程图 */
|
||||
const createNewDiagram = async (xml: any) => {
|
||||
// 将字符串转换成图显示出来
|
||||
|
||||
let xmlString = xml
|
||||
|
||||
try {
|
||||
let { warnings } = await bpmnModeler.importXML(xmlString)
|
||||
if (warnings && warnings.length) {
|
||||
// warnings.forEach(warn => console.warn(warn))
|
||||
}
|
||||
// 高亮流程图
|
||||
await highlightDiagram()
|
||||
|
||||
const canvas = bpmnModeler.get('canvas')
|
||||
|
||||
canvas.zoom('fit-viewport', 'auto')
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
// console.error(`[Process Designer Warn]: ${e?.message || e}`);
|
||||
}
|
||||
}
|
||||
|
||||
/* 高亮流程图 */
|
||||
// TODO 芋艿：如果多个 endActivity 的话，目前的逻辑可能有一定的问题。https://www.jdon.com/workflow/multi-events.html
|
||||
const highlightDiagram = async () => {
|
||||
const activityList = activityLists.value
|
||||
if (activityList.length === 0) {
|
||||
return
|
||||
}
|
||||
// 参考自 https://gitee.com/tony2y/RuoYi-flowable/blob/master/ruoyi-ui/src/components/Process/index.vue#L222 实现
|
||||
// 再次基础上，增加不同审批结果的颜色等等
|
||||
let canvas = bpmnModeler.get('canvas')
|
||||
let todoActivity: any = activityList.find((m: any) => !m.endTime) // 找到待办的任务
|
||||
let endActivity: any = activityList[activityList.length - 1] // 获得最后一个任务
|
||||
let findProcessTask = false //是否已经高亮了进行中的任务
|
||||
//进行中高亮之后的任务 key 集合，用于过滤掉 taskList 进行中后面的任务，避免进行中后面的数据 Hover 还有数据
|
||||
let removeTaskDefinitionKeyList: any = []
|
||||
// debugger
|
||||
bpmnModeler.getDefinitions().rootElements[0].flowElements?.forEach((n: any) => {
|
||||
let activity: any = activityList.find((m: any) => m.key === n.id) // 找到对应的活动
|
||||
if (!activity) {
|
||||
return
|
||||
}
|
||||
if (n.$type === 'bpmn:UserTask') {
|
||||
// 用户任务
|
||||
// 处理用户任务的高亮
|
||||
const task: any = taskList.value.find((m: any) => m.id === activity.taskId) // 找到活动对应的 taskId
|
||||
if (!task) {
|
||||
return
|
||||
}
|
||||
// 进行中的任务已经高亮过了，则不高亮后面的任务了
|
||||
if (findProcessTask) {
|
||||
removeTaskDefinitionKeyList.push(n.id)
|
||||
return
|
||||
}
|
||||
// 高亮任务
|
||||
canvas.addMarker(n.id, getResultCss(task.status))
|
||||
//标记是否高亮了进行中任务
|
||||
if (task.status === 1) {
|
||||
findProcessTask = true
|
||||
}
|
||||
// 如果非通过，就不走后面的线条了
|
||||
if (task.status !== 2) {
|
||||
return
|
||||
}
|
||||
// 处理 outgoing 出线
|
||||
const outgoing = getActivityOutgoing(activity)
|
||||
outgoing?.forEach((nn: any) => {
|
||||
// debugger
|
||||
let targetActivity: any = activityList.find((m: any) => m.key === nn.targetRef.id)
|
||||
// 如果目标活动存在，则根据该活动是否结束，进行【bpmn:SequenceFlow】连线的高亮设置
|
||||
if (targetActivity) {
|
||||
canvas.addMarker(nn.id, targetActivity.endTime ? 'highlight' : 'highlight-todo')
|
||||
} else if (nn.targetRef.$type === 'bpmn:ExclusiveGateway') {
|
||||
// TODO 芋艿：这个流程，暂时没走到过
|
||||
canvas.addMarker(nn.id, activity.endTime ? 'highlight' : 'highlight-todo')
|
||||
canvas.addMarker(nn.targetRef.id, activity.endTime ? 'highlight' : 'highlight-todo')
|
||||
} else if (nn.targetRef.$type === 'bpmn:EndEvent') {
|
||||
// TODO 芋艿：这个流程，暂时没走到过
|
||||
if (!todoActivity && endActivity.key === n.id) {
|
||||
canvas.addMarker(nn.id, 'highlight')
|
||||
canvas.addMarker(nn.targetRef.id, 'highlight')
|
||||
}
|
||||
if (!activity.endTime) {
|
||||
canvas.addMarker(nn.id, 'highlight-todo')
|
||||
canvas.addMarker(nn.targetRef.id, 'highlight-todo')
|
||||
}
|
||||
}
|
||||
})
|
||||
} else if (n.$type === 'bpmn:ExclusiveGateway') {
|
||||
// 排它网关
|
||||
// 设置【bpmn:ExclusiveGateway】排它网关的高亮
|
||||
canvas.addMarker(n.id, getActivityHighlightCss(activity))
|
||||
// 查找需要高亮的连线
|
||||
let matchNN: any = undefined
|
||||
let matchActivity: any = undefined
|
||||
n.outgoing?.forEach((nn: any) => {
|
||||
let targetActivity = activityList.find((m: any) => m.key === nn.targetRef.id)
|
||||
if (!targetActivity) {
|
||||
return
|
||||
}
|
||||
// 特殊判断 endEvent 类型的原因，ExclusiveGateway 可能后续连有 2 个路径：
|
||||
// 1. 一个是 UserTask => EndEvent
|
||||
// 2. 一个是 EndEvent
|
||||
// 在选择路径 1 时，其实 EndEvent 可能也存在，导致 1 和 2 都高亮，显然是不正确的。
|
||||
// 所以，在 matchActivity 为 EndEvent 时，需要进行覆盖~~
|
||||
if (!matchActivity || matchActivity.type === 'endEvent') {
|
||||
matchNN = nn
|
||||
matchActivity = targetActivity
|
||||
}
|
||||
})
|
||||
if (matchNN && matchActivity) {
|
||||
canvas.addMarker(matchNN.id, getActivityHighlightCss(matchActivity))
|
||||
}
|
||||
} else if (n.$type === 'bpmn:ParallelGateway') {
|
||||
// 并行网关
|
||||
// 设置【bpmn:ParallelGateway】并行网关的高亮
|
||||
canvas.addMarker(n.id, getActivityHighlightCss(activity))
|
||||
n.outgoing?.forEach((nn: any) => {
|
||||
// 获得连线是否有指向目标。如果有，则进行高亮
|
||||
const targetActivity = activityList.find((m: any) => m.key === nn.targetRef.id)
|
||||
if (targetActivity) {
|
||||
canvas.addMarker(nn.id, getActivityHighlightCss(targetActivity)) // 高亮【bpmn:SequenceFlow】连线
|
||||
// 高亮【...】目标。其中 ... 可以是 bpm:UserTask、也可以是其它的。当然，如果是 bpm:UserTask 的话，其实不做高亮也没问题，因为上面有逻辑做了这块。
|
||||
canvas.addMarker(nn.targetRef.id, getActivityHighlightCss(targetActivity))
|
||||
}
|
||||
})
|
||||
} else if (n.$type === 'bpmn:StartEvent') {
|
||||
// 开始节点
|
||||
canvas.addMarker(n.id, 'highlight')
|
||||
n.outgoing?.forEach(nn => {
|
||||
// outgoing 例如说【bpmn:SequenceFlow】连线
|
||||
// 获得连线是否有指向目标。如果有，则进行高亮
|
||||
let targetActivity = activityList.find((m: any) => m.key === nn.targetRef.id)
|
||||
if (targetActivity) {
|
||||
canvas.addMarker(nn.id, 'highlight') // 高亮【bpmn:SequenceFlow】连线
|
||||
canvas.addMarker(n.id, 'highlight') // 高亮【bpmn:StartEvent】开始节点（自己）
|
||||
}
|
||||
})
|
||||
} else if (n.$type === 'bpmn:EndEvent') {
|
||||
// 结束节点
|
||||
if (!processInstance.value || processInstance.value.status === 1) {
|
||||
return
|
||||
}
|
||||
canvas.addMarker(n.id, getResultCss(processInstance.value.status))
|
||||
} else if (n.$type === 'bpmn:ServiceTask') {
|
||||
//服务任务
|
||||
if (activity.startTime > 0 && activity.endTime === 0) {
|
||||
//进入执行，标识进行色
|
||||
canvas.addMarker(n.id, getResultCss(1))
|
||||
}
|
||||
if (activity.endTime > 0) {
|
||||
// 执行完成，节点标识完成色, 所有outgoing标识完成色。
|
||||
canvas.addMarker(n.id, getResultCss(2))
|
||||
const outgoing = getActivityOutgoing(activity)
|
||||
outgoing?.forEach((out: any) => {
|
||||
canvas.addMarker(out.id, getResultCss(2))
|
||||
})
|
||||
}
|
||||
} else if (n.$type === 'bpmn:SequenceFlow') {
|
||||
let targetActivity = activityList.find((m: any) => m.key === n.targetRef.id)
|
||||
if (targetActivity) {
|
||||
canvas.addMarker(n.id, getActivityHighlightCss(targetActivity))
|
||||
}
|
||||
}
|
||||
})
|
||||
if (!(removeTaskDefinitionKeyList == null)) {
|
||||
taskList.value = taskList.value.filter(item => !removeTaskDefinitionKeyList.includes(item.taskDefinitionKey))
|
||||
}
|
||||
}
|
||||
|
||||
const getActivityHighlightCss = (activity: any) => {
|
||||
return activity.endTime ? 'highlight' : 'highlight-todo'
|
||||
}
|
||||
|
||||
const getResultCss = (status: any) => {
|
||||
if (status === 1) {
|
||||
// 审批中
|
||||
return 'highlight-todo'
|
||||
} else if (status === 2) {
|
||||
// 已通过
|
||||
return 'highlight'
|
||||
} else if (status === 3) {
|
||||
// 不通过
|
||||
return 'highlight-reject'
|
||||
} else if (status === 4) {
|
||||
// 已取消
|
||||
return 'highlight-cancel'
|
||||
} else if (status === 5) {
|
||||
// 退回
|
||||
return 'highlight-return'
|
||||
} else if (status === 6) {
|
||||
// 委派
|
||||
return 'highlight-todo'
|
||||
} else if (status === 7) {
|
||||
// 审批通过中
|
||||
return 'highlight-todo'
|
||||
} else if (status === 0) {
|
||||
// 待审批
|
||||
return 'highlight-todo'
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
const getActivityOutgoing = (activity: any) => {
|
||||
// 如果有 outgoing，则直接使用它
|
||||
if (activity.outgoing && activity.outgoing.length > 0) {
|
||||
return activity.outgoing
|
||||
}
|
||||
// 如果没有，则遍历获得起点为它的【bpmn:SequenceFlow】节点们。原因是：bpmn-js 的 UserTask 拿不到 outgoing
|
||||
const flowElements = bpmnModeler.getDefinitions().rootElements[0].flowElements
|
||||
const outgoing: any[] = []
|
||||
flowElements.forEach((item: any) => {
|
||||
if (item.$type !== 'bpmn:SequenceFlow') {
|
||||
return
|
||||
}
|
||||
if (item.sourceRef.id === activity.key) {
|
||||
outgoing.push(item)
|
||||
}
|
||||
})
|
||||
return outgoing
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
xml.value = props.value
|
||||
activityLists.value = props.activityData
|
||||
// 初始化
|
||||
initBpmnModeler()
|
||||
|
||||
createNewDiagram(xml.value)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// this.$once('hook:beforeDestroy', () => {
|
||||
// })
|
||||
if (bpmnModeler) bpmnModeler.destroy()
|
||||
emit('destroy', bpmnModeler)
|
||||
bpmnModeler = null
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.value,
|
||||
newValue => {
|
||||
xml.value = newValue
|
||||
createNewDiagram(xml.value)
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => props.activityData,
|
||||
newActivityData => {
|
||||
activityLists.value = newActivityData
|
||||
createNewDiagram(xml.value)
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/** 处理中 */
|
||||
.highlight-todo.djs-connection > .djs-visual > path {
|
||||
stroke: #1890ff !important;
|
||||
stroke-dasharray: 4px !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
|
||||
.highlight-todo.djs-shape .djs-visual > :nth-child(1) {
|
||||
fill: #1890ff !important;
|
||||
stroke: #1890ff !important;
|
||||
stroke-dasharray: 4px !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
|
||||
:deep(.highlight-todo.djs-connection > .djs-visual > path) {
|
||||
stroke: #1890ff !important;
|
||||
stroke-dasharray: 4px !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
marker-end: url('#sequenceflow-end-_E7DFDF-_E7DFDF-803g1kf6zwzmcig1y2ulm5egr');
|
||||
}
|
||||
|
||||
:deep(.highlight-todo.djs-shape .djs-visual > :nth-child(1)) {
|
||||
fill: #1890ff !important;
|
||||
stroke: #1890ff !important;
|
||||
stroke-dasharray: 4px !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
|
||||
/** 通过 */
|
||||
.highlight.djs-shape .djs-visual > :nth-child(1) {
|
||||
fill: green !important;
|
||||
stroke: green !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
|
||||
.highlight.djs-shape .djs-visual > :nth-child(2) {
|
||||
fill: green !important;
|
||||
}
|
||||
|
||||
.highlight.djs-shape .djs-visual > path {
|
||||
fill: green !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
stroke: green !important;
|
||||
}
|
||||
|
||||
.highlight.djs-connection > .djs-visual > path {
|
||||
stroke: green !important;
|
||||
}
|
||||
|
||||
.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
|
||||
fill: green !important; /* color elements as green */
|
||||
}
|
||||
|
||||
:deep(.highlight.djs-shape .djs-visual > :nth-child(1)) {
|
||||
fill: green !important;
|
||||
stroke: green !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
|
||||
:deep(.highlight.djs-shape .djs-visual > :nth-child(2)) {
|
||||
fill: green !important;
|
||||
}
|
||||
|
||||
:deep(.highlight.djs-shape .djs-visual > path) {
|
||||
fill: green !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
stroke: green !important;
|
||||
}
|
||||
|
||||
:deep(.highlight.djs-connection > .djs-visual > path) {
|
||||
stroke: green !important;
|
||||
}
|
||||
|
||||
.djs-element.highlight > .djs-visual > path {
|
||||
stroke: green !important;
|
||||
}
|
||||
|
||||
/** 不通过 */
|
||||
.highlight-reject.djs-shape .djs-visual > :nth-child(1) {
|
||||
fill: red !important;
|
||||
stroke: red !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
|
||||
.highlight-reject.djs-shape .djs-visual > :nth-child(2) {
|
||||
fill: red !important;
|
||||
}
|
||||
|
||||
.highlight-reject.djs-shape .djs-visual > path {
|
||||
fill: red !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
stroke: red !important;
|
||||
}
|
||||
|
||||
.highlight-reject.djs-connection > .djs-visual > path {
|
||||
stroke: red !important;
|
||||
marker-end: url(#sequenceflow-end-white-success) !important;
|
||||
}
|
||||
|
||||
.highlight-reject:not(.djs-connection) .djs-visual > :nth-child(1) {
|
||||
fill: red !important; /* color elements as green */
|
||||
}
|
||||
|
||||
:deep(.highlight-reject.djs-shape .djs-visual > :nth-child(1)) {
|
||||
fill: red !important;
|
||||
stroke: red !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
|
||||
:deep(.highlight-reject.djs-shape .djs-visual > :nth-child(2)) {
|
||||
fill: red !important;
|
||||
}
|
||||
|
||||
:deep(.highlight-reject.djs-shape .djs-visual > path) {
|
||||
fill: red !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
stroke: red !important;
|
||||
}
|
||||
|
||||
:deep(.highlight-reject.djs-connection > .djs-visual > path) {
|
||||
stroke: red !important;
|
||||
}
|
||||
|
||||
/** 已取消 */
|
||||
.highlight-cancel.djs-shape .djs-visual > :nth-child(1) {
|
||||
fill: grey !important;
|
||||
stroke: grey !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
|
||||
.highlight-cancel.djs-shape .djs-visual > :nth-child(2) {
|
||||
fill: grey !important;
|
||||
}
|
||||
|
||||
.highlight-cancel.djs-shape .djs-visual > path {
|
||||
fill: grey !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
stroke: grey !important;
|
||||
}
|
||||
|
||||
.highlight-cancel.djs-connection > .djs-visual > path {
|
||||
stroke: grey !important;
|
||||
}
|
||||
|
||||
.highlight-cancel:not(.djs-connection) .djs-visual > :nth-child(1) {
|
||||
fill: grey !important; /* color elements as green */
|
||||
}
|
||||
|
||||
:deep(.highlight-cancel.djs-shape .djs-visual > :nth-child(1)) {
|
||||
fill: grey !important;
|
||||
stroke: grey !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
|
||||
:deep(.highlight-cancel.djs-shape .djs-visual > :nth-child(2)) {
|
||||
fill: grey !important;
|
||||
}
|
||||
|
||||
:deep(.highlight-cancel.djs-shape .djs-visual > path) {
|
||||
fill: grey !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
stroke: grey !important;
|
||||
}
|
||||
|
||||
:deep(.highlight-cancel.djs-connection > .djs-visual > path) {
|
||||
stroke: grey !important;
|
||||
}
|
||||
|
||||
/** 回退 */
|
||||
.highlight-return.djs-shape .djs-visual > :nth-child(1) {
|
||||
fill: #e6a23c !important;
|
||||
stroke: #e6a23c !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
|
||||
.highlight-return.djs-shape .djs-visual > :nth-child(2) {
|
||||
fill: #e6a23c !important;
|
||||
}
|
||||
|
||||
.highlight-return.djs-shape .djs-visual > path {
|
||||
fill: #e6a23c !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
stroke: #e6a23c !important;
|
||||
}
|
||||
|
||||
.highlight-return.djs-connection > .djs-visual > path {
|
||||
stroke: #e6a23c !important;
|
||||
}
|
||||
|
||||
.highlight-return:not(.djs-connection) .djs-visual > :nth-child(1) {
|
||||
fill: #e6a23c !important; /* color elements as green */
|
||||
}
|
||||
|
||||
:deep(.highlight-return.djs-shape .djs-visual > :nth-child(1)) {
|
||||
fill: #e6a23c !important;
|
||||
stroke: #e6a23c !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
}
|
||||
|
||||
:deep(.highlight-return.djs-shape .djs-visual > :nth-child(2)) {
|
||||
fill: #e6a23c !important;
|
||||
}
|
||||
|
||||
:deep(.highlight-return.djs-shape .djs-visual > path) {
|
||||
fill: #e6a23c !important;
|
||||
fill-opacity: 0.2 !important;
|
||||
stroke: #e6a23c !important;
|
||||
}
|
||||
|
||||
:deep(.highlight-return.djs-connection > .djs-visual > path) {
|
||||
stroke: #e6a23c !important;
|
||||
}
|
||||
|
||||
.element-overlays {
|
||||
width: 200px;
|
||||
padding: 8px;
|
||||
color: #fafafa;
|
||||
background: rgb(0 0 0 / 60%);
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
48
src/views/pqs/task/myTask/components/detail.vue
Normal file
48
src/views/pqs/task/myTask/components/detail.vue
Normal file
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<el-dialog draggable v-model="dialogVisible" title="详情" width="1500">
|
||||
<el-tabs v-model="activeName" class="demo-tabs">
|
||||
<el-tab-pane label="表单信息" name="1">User</el-tab-pane>
|
||||
<el-tab-pane label="流转记录" name="2">
|
||||
<Recording ref="RecordingRef" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="流程图" name="3">
|
||||
<ProcessViewer
|
||||
v-if="bpmnXMLShow"
|
||||
:key="activeName"
|
||||
ref="ProcessViewerRef"
|
||||
v-model="bpmnXML"
|
||||
:value="bpmnXML"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, nextTick } from 'vue'
|
||||
import { flowXmlAndNode } from '@/api/process-boot/bpm'
|
||||
import Recording from './recording.vue'
|
||||
import ProcessViewer from './ProcessViewer.vue'
|
||||
const dialogVisible = ref(false)
|
||||
const activeName = ref(1)
|
||||
const RecordingRef = ref()
|
||||
const ProcessViewerRef = ref()
|
||||
const bpmnXMLShow = ref(false)
|
||||
const bpmnXML: any = ref(null)
|
||||
const open = async (row: any) => {
|
||||
dialogVisible.value = true
|
||||
await flowXmlAndNode({
|
||||
deployId: row.deployId,
|
||||
procInsId: row.procInsId
|
||||
}).then(res => {
|
||||
bpmnXML.value = res.data.xmlData
|
||||
})
|
||||
bpmnXMLShow.value = true
|
||||
|
||||
await nextTick(() => {
|
||||
RecordingRef.value.open(row)
|
||||
// ProcessViewerRef.value.open(bpmnXML.value)
|
||||
})
|
||||
}
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
101
src/views/pqs/task/myTask/components/recording.vue
Normal file
101
src/views/pqs/task/myTask/components/recording.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<el-col :span="12" :offset="6" class="mt10">
|
||||
<el-timeline class="box">
|
||||
<el-timeline-item
|
||||
v-for="(item, index) in flowRecordList"
|
||||
:key="index"
|
||||
:icon="setIcon(item.finishTime)"
|
||||
:color="setColor(item.finishTime)"
|
||||
>
|
||||
<p style="font-weight: 700">{{ item.taskName }}</p>
|
||||
<el-card :body-style="{ padding: '10px' }">
|
||||
<el-descriptions :column="1" border>
|
||||
<el-descriptions-item v-if="item.assigneeName">
|
||||
<template #label>
|
||||
<Icon class="elIcon" name="el-icon-User" />
|
||||
办理人
|
||||
</template>
|
||||
|
||||
{{ item.assigneeName }}
|
||||
<el-tag type="info">{{ item.deptName }}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="item.candidate">
|
||||
<template #label>
|
||||
<Icon class="elIcon" name="el-icon-User" />
|
||||
候选办理
|
||||
</template>
|
||||
{{ item.candidate }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item>
|
||||
<template #label>
|
||||
<Icon class="elIcon" name="el-icon-Calendar" />
|
||||
接收时间
|
||||
</template>
|
||||
{{ item.createTime }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="item.finishTime">
|
||||
<template #label>
|
||||
<Icon class="elIcon" name="el-icon-Calendar" />
|
||||
处理时间
|
||||
</template>
|
||||
{{ item.finishTime }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="item.duration">
|
||||
<template #label>
|
||||
<Icon class="elIcon" name="el-icon-Timer" />
|
||||
耗时
|
||||
</template>
|
||||
{{ item.duration }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item v-if="item.comment">
|
||||
<template #label>
|
||||
<Icon class="elIcon" name="el-icon-Tickets" />
|
||||
处理意见
|
||||
</template>
|
||||
{{ item.comment.comment }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</el-col>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { flowRecord } from '@/api/process-boot/bpm'
|
||||
const flowRecordList: any = ref([])
|
||||
// 设置icon
|
||||
const setIcon = (val: any) => {
|
||||
if (val) {
|
||||
return 'el-icon-Check'
|
||||
} else {
|
||||
return 'el-icon-Time'
|
||||
}
|
||||
}
|
||||
// 设置颜色
|
||||
const setColor = (val: any) => {
|
||||
if (val) {
|
||||
return '#2bc418'
|
||||
} else {
|
||||
return '#b3bdbb'
|
||||
}
|
||||
}
|
||||
const open = (row: any) => {
|
||||
flowRecord({ procInsId: row.procInsId, deployId: row.deployId }).then((res: any) => {
|
||||
flowRecordList.value = res.data.flowList
|
||||
})
|
||||
}
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.box) {
|
||||
.elIcon {
|
||||
font-size: 14px !important;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
.el-descriptions__label {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,18 +1,17 @@
|
||||
<!--业务用户管理界面-->
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader >
|
||||
<TableHeader>
|
||||
<template v-slot:select>
|
||||
<el-form-item label="筛选数据">
|
||||
<el-input v-model="tableStore.table.params.name" clearable placeholder="筛选数据" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-slot:operation>
|
||||
<el-button type="primary" @click="exportEvent" class="ml10" icon="el-icon-Download">导出</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<!--表格-->
|
||||
<Table ref="tableRef"></Table>
|
||||
<!-- 详情 -->
|
||||
<Detail ref="detailRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -24,18 +23,17 @@ import TableHeader from '@/components/table/header/index.vue'
|
||||
import { onMounted, provide, ref } from 'vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { pageTable } from '@/api/harmonic-boot/luckyexcel'
|
||||
import Detail from './components/detail.vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'harmonic-boot/reate/word'
|
||||
name: '/flowTask/mytask'
|
||||
})
|
||||
const dictData = useDictData()
|
||||
//区域联级选择
|
||||
const industry = dictData.getBasicData('Interference_Source')
|
||||
//用户信息弹出框
|
||||
const tableRef = ref()
|
||||
const detailRef = ref()
|
||||
|
||||
const tableStore = new TableStore({
|
||||
url: '/process-boot/flowable/task/todoList',
|
||||
url: '/process-boot/flowable/task/myProcess',
|
||||
method: 'GET',
|
||||
column: [
|
||||
{
|
||||
@@ -45,59 +43,85 @@ const tableStore = new TableStore({
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{ title: '变电站', field: 'subName', width: 200 },
|
||||
{ title: '监测点名称', field: 'lineName', width: 200 },
|
||||
{ title: '流程名称', field: 'procDefName', width: 200 },
|
||||
{ title: '流程类别', field: 'category' },
|
||||
{
|
||||
title: '行业类型',
|
||||
field: 'businessType',
|
||||
formatter: (row: any) => {
|
||||
return industry.find((item: any) => item.id == row.cellValue)?.name || '/'
|
||||
}
|
||||
title: '流程版本',
|
||||
field: 'procDefVersion'
|
||||
},
|
||||
{
|
||||
title: '分类等级',
|
||||
field: 'calssificationGrade',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue || '/'
|
||||
title: '提交时间',
|
||||
field: 'createTime'
|
||||
},
|
||||
{
|
||||
title: '流程状态',
|
||||
field: 'finishTime',
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'warning',
|
||||
1: 'success'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '进行中',
|
||||
1: '已完成'
|
||||
}
|
||||
},
|
||||
{ title: '电压等级', field: 'voltageScale' },
|
||||
{ title: '耗时', field: 'duration' },
|
||||
{
|
||||
title: '上级变电站',
|
||||
field: 'superiorsSubstation',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue || '/'
|
||||
}
|
||||
title: '当前节点',
|
||||
field: 'taskName'
|
||||
},
|
||||
{
|
||||
title: '办理人',
|
||||
field: 'assigneeName'
|
||||
},
|
||||
|
||||
{
|
||||
title: '操作',
|
||||
width: '180',
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
title: '详情',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Plus',
|
||||
render: 'basicButton',
|
||||
click: row => {
|
||||
detailRef.value.open(row)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'del',
|
||||
text: '删除',
|
||||
type: 'danger',
|
||||
icon: 'el-icon-Delete',
|
||||
render: 'confirmButton',
|
||||
popconfirm: {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
confirmButtonType: 'danger',
|
||||
title: '确定删除？'
|
||||
},
|
||||
click: row => {}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.beginTime = tableStore.table.params.startTime
|
||||
tableStore.table.params.deptId = tableStore.table.params.deptIndex
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.data.forEach((item: any) => {
|
||||
item.finishTime = item.finishTime == null ? '0' : '1'
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
// 加载数据
|
||||
tableStore.index()
|
||||
})
|
||||
tableStore.table.params.name = ''
|
||||
provide('tableStore', tableStore)
|
||||
// 导出
|
||||
const exportEvent = () => {
|
||||
let form = JSON.parse(JSON.stringify(tableStore.table.params))
|
||||
form.pageNum = 1
|
||||
form.pageSize = tableStore.table.total
|
||||
pageTable(form).then(res => {
|
||||
tableRef.value.getRef().exportData({
|
||||
filename: '合格率报告', // 文件名字
|
||||
sheetName: 'Sheet1',
|
||||
type: 'xlsx', //导出文件类型 xlsx 和 csv
|
||||
useStyle: true,
|
||||
data: res.data.records, // 数据源 // 过滤那个字段导出
|
||||
columnFilterMethod: function (column: any) {
|
||||
return !(column.$columnIndex === 0)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user